/* =========================================================
   Avalon Builders — main.css
   Warm-luxe monochrome. Design tokens are overridable via
   the Design admin screen (Appearance → Design).
   ========================================================= */

:root {
	/* Palette — warm off-white + ink + construction-yellow accent */
	--ink:        #0d0d0d;
	--ink-soft:   #3a3a3a;
	--muted:      #6b6b6b;
	--line:       #e6e1d7;
	--line-soft:  #efeae0;
	--bg:         #faf7f1;
	--bg-soft:    #f2ede2;
	--bg-deep:    #111111;
	--white:      #ffffff;
	--accent-ink: #faf7f1;

	/* Construction yellow — brand accent (matches Tidii's gold role) */
	--yellow:        #38b6ff;   /* base — safety/hi-vis */
	--yellow-bright: #5ec4ff;   /* hover */
	--yellow-deep:   #1b7eae;   /* pressed / borders on light */
	--yellow-soft:   rgba(56, 182, 255, 0.10);
	--yellow-ring:   rgba(56, 182, 255, 0.35);

	/* --accent points at yellow so any existing --accent consumers pick it up */
	--accent:     var(--yellow);

	/* Type */
	--font-display: 'Roboto', system-ui, -apple-system, sans-serif;
	--font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
	--fs-h1: clamp(2.5rem, 4.5vw, 4.75rem);
	--fs-h2: clamp(2rem, 3.4vw, 3.25rem);
	--fs-h3: clamp(1.5rem, 2.4vw, 2rem);
	--fs-h4: clamp(1.25rem, 1.8vw, 1.5rem);
	--fs-h5: 1.125rem;
	--fs-h6: 1rem;
	--fs-body: 1.0625rem;
	--lh-head: 1.1;
	--lh-body: 1.65;
	--ls-head: -0.02em;
	--ls-body: 0;
	--ls-tight: 0.14em;
	--fw-head: 500;
	--fw-body: 400;

	/* Rhythm */
	--container: 1300px;
	--container-narrow: 920px;
	--gutter: clamp(20px, 3vw, 32px);
	--section-y: clamp(4rem, 8vw, 7rem);

	/* Radii — Tidii scale, monochrome-luxe */
	--radius-sm:   8px;
	--radius:      12px;
	--radius-lg:   18px;
	--radius-xl:   24px;
	--radius-2xl:  32px;
	--radius-pill: 999px;

	/* Logo sizes — override in Customizer → Avalon Design → Logo sizing */
	--logo-h: 52px;
	--logo-h-mobile: 44px;
	--logo-h-footer: 60px;
	--header-h: 88px;

	/* Motion — snappier, Tidii-style */
	--ease: cubic-bezier(.2,.8,.2,1);
	--dur-quick: 200ms;
	--dur: 280ms;

	/* Shadow system — Tidii-style layered, monochrome */
	--sh-hairline: 0 1px 0 rgba(10,10,10,.04);
	--sh-card:     0 4px 16px rgba(5, 6, 8, 0.06);
	--sh-lift:     0 18px 40px -10px rgba(5, 6, 8, 0.18), 0 2px 8px rgba(5, 6, 8, 0.06);
	--sh-pop:      0 24px 64px rgba(11, 24, 20, .18), 0 2px 8px rgba(11, 24, 20, .06);
	--sh-header:   0 6px 24px rgba(5,14,12,.06);
	--sh-cta:      0 12px 32px rgba(10, 10, 10, 0.22);
	--sh-cta-hover:0 18px 40px rgba(10, 10, 10, 0.32);
	--sh-cta-yellow:      0 12px 32px rgba(56, 182, 255, 0.30);
	--sh-cta-yellow-hover:0 18px 40px rgba(56, 182, 255, 0.45);
	--sh-inset:    inset 0 1px 0 rgba(255,255,255,.6);
	--ring:        0 0 0 4px var(--yellow-ring);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--accent); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 0; box-shadow: var(--ring); border-radius: 2px; }

/* ---------- Type ---------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-head);
	line-height: var(--lh-head);
	letter-spacing: var(--ls-head);
	margin: 0 0 .5em;
	color: var(--ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); text-transform: uppercase; letter-spacing: var(--ls-tight); }
p  { margin: 0 0 1em; color: var(--ink-soft); }
strong { color: var(--ink); font-weight: 600; }

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: .78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--ls-tight);
	color: var(--muted);
	margin: 0 0 1.25rem;
	padding: 0 0 .35rem;
	border-bottom: 1px solid var(--line);
}
.lead { font-size: 1.15rem; color: var(--ink-soft); }
.hairline { height: 1px; background: var(--line); border: 0; margin: 3rem 0; }

/* ---------- Layout ---------- */
.container { width: min(var(--container), 92vw); margin-inline: auto; }
.container.narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--bg-soft); }
.section--dark { background: var(--bg-deep); color: var(--accent-ink); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--accent-ink); }
.section--dark p, .section--dark .lead { color: rgba(255,255,255,.75); }
.section--dark .eyebrow { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.15); }
.center { text-align: center; }
.cluster { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.grid-2 { display: grid; gap: 3rem; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) {
	.grid-2 { grid-template-columns: 1fr 1fr; }
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Buttons — Tidii-style pill, monochrome ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: 14px 26px;
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	transition:
		background .2s var(--ease),
		color .2s var(--ease),
		border-color .2s var(--ease),
		transform .2s var(--ease),
		box-shadow .25s var(--ease);
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
}
.btn__arrow {
	display: inline-flex;
	width: 16px; height: 16px;
	transition: transform .2s var(--ease);
}
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(3px); }
.btn:active { transform: translateY(0) !important; box-shadow: var(--sh-card) !important; }
.btn--block { width: 100%; }

.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn--lg { padding: 16px 32px; font-size: 15.5px; }

.btn--primary {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
	box-shadow: var(--sh-cta);
}
.btn--primary:hover, .btn--primary:focus-visible {
	background: var(--ink);
	color: var(--yellow);
	border-color: var(--ink);
	transform: translateY(-2px);
	box-shadow: var(--sh-cta-hover);
}

/* Construction yellow — the money-path CTA. High-vis, one per visual area. */
.btn--blue {
	background: var(--yellow);
	color: var(--ink);
	border-color: var(--yellow);
	box-shadow: var(--sh-cta-yellow);
	font-weight: 700;
}
.btn--blue:hover, .btn--blue:focus-visible {
	background: var(--yellow-bright);
	color: var(--ink);
	border-color: var(--yellow-bright);
	transform: translateY(-2px);
	box-shadow: var(--sh-cta-yellow-hover);
}

.btn--ghost, .btn--outline {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.btn--ghost:hover, .btn--outline:hover,
.btn--ghost:focus-visible, .btn--outline:focus-visible {
	background: var(--ink);
	color: var(--bg);
	transform: translateY(-2px);
	box-shadow: var(--sh-lift);
}

.btn--light {
	background: var(--white);
	color: var(--ink);
	border-color: var(--white);
	box-shadow: var(--sh-cta);
}
.btn--light:hover, .btn--light:focus-visible {
	background: transparent;
	color: var(--white);
	border-color: var(--white);
	transform: translateY(-2px);
	box-shadow: 0 18px 40px rgba(255,255,255,.18);
}

.btn--outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.55);
}
.btn--outline-light:hover, .btn--outline-light:focus-visible {
	background: #fff; color: var(--ink); border-color: #fff;
	transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255,255,255,.15);
}

.btn--link {
	position: relative;
	padding: 0 0 .25rem;
	background: none;
	border: 0;
	border-radius: 0;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .78rem;
	box-shadow: none;
	color: var(--ink);
	white-space: nowrap;
}
.btn--link::after {
	content: ' →';
	transition: transform .2s var(--ease);
	display: inline-block;
	margin-left: .25rem;
}
.btn--link:hover::after, .btn--link:focus-visible::after { transform: translateX(4px); }

/* ---------- Header — Tidii cluster, monochrome ---------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--bg); padding: .5rem 1rem; z-index: 9999; border-radius: var(--radius); }

.site-header {
	position: sticky; top: 0; z-index: 90;
	background: rgba(250, 247, 241, .94);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled { box-shadow: var(--sh-header); background: rgba(250, 247, 241, .98); border-bottom-color: var(--yellow); }
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px;
	padding: 14px clamp(12px, 1.6vw, 28px);
	min-height: var(--header-h);
	max-width: var(--container);
	margin-inline: auto;
	width: 100%;
}
.brand__link { display: inline-flex; align-items: center; }
.brand__logo { max-height: var(--logo-h-mobile); width: auto; }
@media (min-width: 768px) { .brand__logo { max-height: var(--logo-h); } }
.brand__wordmark {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--ink);
}

.site-nav { display: none; }
@media (min-width: 1024px) { .site-nav { display: block; flex: 1; } }
.site-nav__list {
	display: flex; align-items: center; gap: 2px; justify-content: center;
	list-style: none; margin: 0; padding: 0;
}
.site-nav__list li { position: relative; }
.site-nav__list a {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 10px 14px;
	font-size: 14.5px; font-weight: 600;
	color: var(--ink);
	border-radius: 10px;
	transition: background .2s, color .2s;
	white-space: nowrap;
	position: relative;
}
.site-nav__list a:hover { background: var(--yellow-soft); color: var(--ink); }
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-ancestor > a {
	background: var(--yellow-soft); font-weight: 700;
}
/* Active-page underline lives on ::before so it never collides with the
   dropdown caret (::after) on parent items like "Our Services". */
.site-nav__list .current-menu-item > a::before,
.site-nav__list .current_page_item > a::before,
.site-nav__list .current-menu-ancestor > a::before {
	content: '';
	position: absolute;
	left: 14px; right: 14px; bottom: 4px;
	height: 2px;
	background: var(--yellow);
	border-radius: 2px;
}

.site-header__actions { display: flex; align-items: center; gap: 12px; }
.site-header__phone {
	display: none;
	align-items: center; gap: 8px;
	font-size: 14.5px; font-weight: 700;
	color: var(--ink);
	padding: 8px 12px;
	border-radius: var(--radius-pill);
	transition: background .2s;
}
.site-header__phone:hover { background: var(--bg-soft); }
.site-header__phone svg { width: 18px; height: 18px; opacity: .7; }
.site-header__cta { display: none; }
@media (min-width: 768px)  { .site-header__phone { display: inline-flex; } }
@media (min-width: 1024px) { .site-header__cta   { display: inline-flex; } }

.mobile-nav-toggle {
	display: inline-flex; flex-direction: column; justify-content: center;
	gap: 5px; width: 44px; height: 44px; padding: 10px;
	background: var(--ink); color: var(--bg);
	border-radius: 12px;
}
.mobile-nav-toggle span { display: block; height: 2px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) { .mobile-nav-toggle { display: none; } }

/* Mobile nav — slide-in panel from the right with a backdrop */
.mobile-nav {
	position: fixed; inset: 0; z-index: 100;
	pointer-events: none;
}
.mobile-nav[aria-hidden="false"] { pointer-events: auto; }

.mobile-nav__backdrop {
	position: absolute; inset: 0;
	background: rgba(13, 13, 13, .55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .35s var(--ease);
}
.mobile-nav[aria-hidden="false"] .mobile-nav__backdrop { opacity: 1; }

.mobile-nav__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(400px, 88vw);
	background: var(--bg);
	box-shadow: -24px 0 60px rgba(5, 6, 8, .28);
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform .42s cubic-bezier(.22, 1, .36, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mobile-nav[aria-hidden="false"] .mobile-nav__panel { transform: translateX(0); }

.mobile-nav__top {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
	padding: 20px 22px;
	border-bottom: 1px solid var(--line);
	flex-shrink: 0;
}
.mobile-nav__top .brand__logo { max-height: 40px; width: auto; }
.mobile-nav__close {
	width: 42px; height: 42px;
	background: var(--bg-soft);
	color: var(--ink);
	border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: background .2s var(--ease), color .2s var(--ease), transform .3s var(--ease);
}
.mobile-nav__close:hover, .mobile-nav__close:focus-visible {
	background: var(--ink); color: var(--yellow); transform: rotate(90deg);
}

.mobile-nav__body {
	padding: 20px 22px 32px;
	display: flex; flex-direction: column; gap: 24px;
	flex: 1;
}

/* Nav links — staggered entrance */
.mobile-nav__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 4px;
}
.mobile-nav__list li {
	opacity: 0;
	transform: translateX(16px);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mobile-nav[aria-hidden="false"] .mobile-nav__list li { opacity: 1; transform: none; }
.mobile-nav[aria-hidden="false"] .mobile-nav__list li:nth-child(1) { transition-delay: .12s; }
.mobile-nav[aria-hidden="false"] .mobile-nav__list li:nth-child(2) { transition-delay: .17s; }
.mobile-nav[aria-hidden="false"] .mobile-nav__list li:nth-child(3) { transition-delay: .22s; }
.mobile-nav[aria-hidden="false"] .mobile-nav__list li:nth-child(4) { transition-delay: .27s; }
.mobile-nav[aria-hidden="false"] .mobile-nav__list li:nth-child(5) { transition-delay: .32s; }
.mobile-nav[aria-hidden="false"] .mobile-nav__list li:nth-child(6) { transition-delay: .37s; }

.mobile-nav__list li a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 15px 16px;
	font-size: 16.5px; font-weight: 700;
	color: var(--ink);
	border-radius: 12px;
	position: relative;
	transition: background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.mobile-nav__list li a:hover,
.mobile-nav__list li a:focus-visible { background: var(--bg-soft); padding-left: 20px; }
.mobile-nav__list .current-menu-item > a,
.mobile-nav__list .current_page_item > a {
	background: var(--yellow-soft);
	padding-left: 20px;
}
.mobile-nav__list .current-menu-item > a::before,
.mobile-nav__list .current_page_item > a::before {
	content: '';
	position: absolute;
	left: 6px; top: 13px; bottom: 13px;
	width: 3px; background: var(--yellow); border-radius: 2px;
}

/* Contact block + CTA — fade in after the links */
.mobile-nav__contact,
.mobile-nav__cta {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mobile-nav[aria-hidden="false"] .mobile-nav__contact { opacity: 1; transform: none; transition-delay: .40s; }
.mobile-nav[aria-hidden="false"] .mobile-nav__cta     { opacity: 1; transform: none; transition-delay: .46s; }

.mobile-nav__contact {
	display: flex; flex-direction: column; gap: 12px;
	margin-top: auto;
	padding: 18px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.mobile-nav__contact-label {
	font-size: 11px; font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}
.mobile-nav__contact a {
	display: inline-flex; align-items: center; gap: 10px;
	color: var(--ink); font-weight: 600;
	font-size: 15px;
	word-break: break-word;
	transition: color .2s var(--ease);
}
.mobile-nav__contact a:hover { color: var(--yellow-deep); }
.mobile-nav__contact a svg { width: 17px; height: 17px; color: var(--yellow-deep); flex-shrink: 0; }
.mobile-nav__contact-email span { font-size: 13.5px; }

body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.mobile-nav__panel,
	.mobile-nav__backdrop,
	.mobile-nav__list li,
	.mobile-nav__contact,
	.mobile-nav__cta { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- Hero — Tidii-style gradient stack, monochrome ---------- */
.hero {
	position: relative;
	background: var(--bg-deep);
	color: var(--accent-ink);
	overflow: hidden;
	min-height: clamp(560px, 82vh, 820px);
	display: grid; align-items: end;
	padding-block: clamp(4rem, 8vw, 6rem);
}
.hero__bg {
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.95) 75%, #000 100%);
	        mask-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.95) 75%, #000 100%);
}
.hero__bg img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center right;
}
.hero::before {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to right, var(--bg-deep) 0%, rgba(17,17,17,.92) 25%, rgba(17,17,17,.55) 55%, rgba(17,17,17,.15) 100%);
}
.hero::after {
	content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background:
		radial-gradient(60% 50% at 75% 0%, rgba(255,255,255,.06), transparent 70%),
		radial-gradient(45% 40% at 10% 100%, rgba(255,255,255,.04), transparent 70%);
}
@media (max-width: 1023px) {
	.hero__bg {
		-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 60%, rgba(0,0,0,.55) 100%);
		        mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 60%, rgba(0,0,0,.55) 100%);
	}
	.hero::before {
		background:
			linear-gradient(180deg, rgba(17,17,17,.78) 0%, rgba(17,17,17,.55) 40%, rgba(17,17,17,.85) 100%),
			radial-gradient(60% 50% at 30% 25%, rgba(17,17,17,.45), transparent 70%);
	}
}
@media (max-width: 640px) {
	.hero::before { background: linear-gradient(180deg, rgba(17,17,17,.82) 0%, rgba(17,17,17,.62) 35%, rgba(17,17,17,.90) 100%); }
}
.hero__inner {
	position: relative; z-index: 3;
	width: min(var(--container), 92vw);
	margin-inline: auto;
	padding-inline: clamp(12px, 1.6vw, 28px); /* MATCH header padding so content lines up under the logo */
	padding-block: 0;
}
.hero .container.hero__inner { width: 100%; max-width: var(--container); padding-inline: clamp(12px, 1.6vw, 28px); }
.hero__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.hero__content > * + * { margin-top: 18px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.75rem; }
.hero--fallback {
	background: radial-gradient(60% 50% at 75% 0%, rgba(255,255,255,.06), transparent 70%), linear-gradient(180deg, #1a1a1a, #0d0d0d);
}

/* Quote card — Tidii-style rounded white card floating over the hero */
.quote-card {
	position: relative;
	/* Frosted glass — kept light enough to read identically on ANY hero photo
	   (a dark night cityscape on inner pages vs a bright truck on the homepage),
	   so the card never looks grey/washed out. Blur keeps the soft glass edge. */
	background: rgba(255, 255, 255, 0.93);
	-webkit-backdrop-filter: blur(20px) saturate(115%);
	backdrop-filter: blur(20px) saturate(115%);
	border: 1px solid rgba(255, 255, 255, 0.8);
	color: var(--ink);
	border-radius: var(--radius-2xl);
	padding: clamp(24px, 2.4vw, 36px);
	box-shadow: 0 30px 80px rgba(5, 6, 8, .35), 0 4px 18px rgba(5, 6, 8, .14);
}
/* Fallback: browsers without backdrop-filter keep a near-solid, readable card. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.quote-card { background: rgba(255, 255, 255, 0.94); }
}
.quote-card__badge {
	position: absolute;
	top: -12px; left: 24px;
	display: inline-block;
	background: var(--yellow);
	color: var(--ink);
	font-size: 11px; font-weight: 800;
	letter-spacing: 0.14em;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	text-transform: uppercase;
	box-shadow: 0 6px 16px var(--yellow-ring);
}
.quote-card__title {
	margin: 6px 0 4px;
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--ink);
}
.quote-card__sub {
	margin: 0 0 20px;
	color: var(--ink-soft);
	font-size: .93rem;
}
.quote-card__errors {
	background: rgba(220, 38, 38, .08);
	border: 1px solid rgba(220, 38, 38, .25);
	color: #b91c1c;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	margin-bottom: 14px;
	font-size: .9rem;
}
.quote-card__errors p { margin: .15rem 0; color: #b91c1c; }
.quote-card__thanks { text-align: center; padding: 12px 8px; }
.quote-card__thanks-tick {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	background: var(--yellow); color: var(--ink);
	border-radius: 50%;
	font-size: 1.6rem; font-weight: 800;
	margin: 0 auto 1rem;
	box-shadow: 0 6px 16px var(--yellow-ring);
}
.quote-card__thanks h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.quote-card__thanks p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.quote-card__thanks a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }

.quote-form { display: grid; gap: 12px; }
.quote-field { display: grid; gap: 6px; }
.quote-field label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.quote-field input,
.quote-field select,
.quote-field textarea {
	width: 100%;
	padding: 12px 14px;
	/* Crisp translucent-white fields that sit cleanly on the frosted card
	   (not the warm cream, which clashed with the cool glass). */
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(13, 13, 13, 0.10);
	border-radius: 10px;
	font: inherit;
	font-size: .95rem;
	color: var(--ink);
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
	outline: 0;
	border-color: var(--ink);
	background: #fff;
	box-shadow: 0 0 0 4px var(--yellow-ring);
}
.quote-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%); background-position: calc(100% - 20px) center, calc(100% - 14px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 34px; }
.quote-field input::placeholder, .quote-field textarea::placeholder { color: var(--muted); opacity: .7; }
.quote-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quote-field--row > div { display: grid; gap: 6px; }
.quote-form button[type="submit"] { margin-top: 6px; }
.quote-form__note {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	margin: 14px 0 0;
	font-size: .78rem;
	color: var(--muted);
	text-align: center;
}
@media (max-width: 640px) {
	.quote-field--row { grid-template-columns: 1fr; }
}

/* At the very top of the hero, give a little vertical breathing so the card
   doesn't sit under the sticky header on mobile */
@media (max-width: 1023px) {
	.hero { padding-top: clamp(3rem, 6vw, 4.5rem); }
}

/* ---------- Section: intro (2-col) ---------- */
.intro-2col { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .intro-2col { grid-template-columns: 1fr 1.4fr; gap: 5rem; } }
.intro-2col__lead h2 { margin-top: .35rem; }

/* ---------- Services grid — Tidii-style rounded cards ---------- */
.svc-header { max-width: 720px; margin-bottom: 3rem; }
.svc-header h2 { margin: 0; }
.svc-3up { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .svc-3up { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-3up { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.svc-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--sh-card);
	position: relative;
	display: flex; flex-direction: column;
	transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.svc-card:hover, .svc-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--sh-pop);
	border-color: var(--yellow);
}
.svc-card__bar {
	position: absolute; top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--yellow);
	transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--ease);
	z-index: 2;
}
.svc-card:hover .svc-card__bar { transform: scaleX(1); }
.svc-card__media {
	aspect-ratio: 16/10;
	background: linear-gradient(135deg, var(--bg-soft) 0%, var(--line-soft) 100%);
	display: grid; place-items: center;
	overflow: hidden;
	position: relative;
}
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.svc-card:hover .svc-card__media img { transform: scale(1.04); }
.svc-card__deco {
	position: absolute;
	top: 20px; right: 24px;
	font-family: var(--font-display);
	font-size: clamp(3.5rem, 6vw, 5.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--line);
	pointer-events: none;
	transition: color .3s var(--ease), -webkit-text-stroke .3s var(--ease);
	z-index: 1;
}
.svc-card:hover .svc-card__deco {
	color: var(--yellow-soft);
	-webkit-text-stroke-color: var(--yellow);
}
.svc-card__body {
	position: relative; z-index: 2;
	padding: 32px 28px 28px;
	display: flex; flex-direction: column; gap: .8rem;
	flex: 1;
}
.svc-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	border-radius: 14px;
	background: var(--yellow-soft);
	color: var(--yellow-deep);
	margin-bottom: 1rem;
	transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.svc-card:hover .svc-card__icon {
	background: var(--yellow);
	color: var(--ink);
	transform: rotate(-4deg) scale(1.05);
}
.svc-card__icon svg { width: 28px; height: 28px; }
.svc-card__meta {
	font-family: var(--font-display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--muted);
	text-transform: uppercase;
	margin-bottom: -.2rem;
}
.svc-card h3 { margin: 0; font-size: 1.35rem; transition: color .2s; letter-spacing: -.01em; }
.svc-card:hover h3 { color: var(--ink); }
.svc-card p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.svc-card__cta {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 18px 12px 20px;
	background: var(--ink);
	color: var(--bg);
	border-radius: var(--radius-pill);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), gap .2s var(--ease);
	margin-top: 1rem;
}
.svc-card__cta svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.svc-card__cta:hover,
.svc-card:hover .svc-card__cta {
	background: var(--yellow);
	color: var(--ink);
	gap: 12px;
}
.svc-card__cta:hover svg { transform: translateX(3px); }

/* ---------- FEATURED PROJECTS — modernised editorial grid ---------- */
.section--featured {
	position: relative;
	background: var(--bg-soft);
	padding-block: clamp(5rem, 8vw, 7rem);
	overflow: hidden;
}
.section--featured__deco {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(50% 60% at 100% 100%, var(--yellow-soft), transparent 65%),
		radial-gradient(40% 50% at 0% 0%, rgba(10,10,10,.03), transparent 65%);
}
.section--featured > .container { position: relative; z-index: 1; }

.featured-header {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 2rem;
	margin-bottom: 3.5rem;
	flex-wrap: wrap;
}
.featured-header__lead { max-width: 640px; }
.featured-header__lead h2 { margin: .8rem 0 .8rem; }
.featured-header__lead p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.featured-header__cta { flex-shrink: 0; }

.featured-grid {
	display: grid; gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .featured-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* Homepage "Selected Work" stays 2×2 — the query is capped at 4 so the block
   always reads as a balanced square rather than a 3 + orphan row.
   The archive and related-projects grids keep their 3-up rhythm. */
@media (min-width: 1024px) {
	.section--featured .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

.fp-card {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--white);
	color: inherit;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--sh-card);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fp-card:hover, .fp-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--sh-pop);
}
.fp-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ink);
}
.fp-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 800ms var(--ease);
}
.fp-card:hover .fp-card__media img { transform: scale(1.08); }

/* Editorial placeholder — ink background + centered roofline mark + subtle grid */
.fp-card__ph {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%),
		repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,.02) 12px 13px);
	background-blend-mode: normal, screen;
	display: grid; place-items: center;
	color: var(--yellow);
	overflow: hidden;
}
.fp-card__ph::before {
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(60% 60% at 50% 40%, rgba(56, 182, 255,.08), transparent 65%),
		repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,.025) 20px 21px);
}
.fp-card__ph-mark {
	position: relative;
	width: 42%;
	max-width: 160px;
	opacity: .55;
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.fp-card:hover .fp-card__ph-mark { opacity: .85; transform: scale(1.05); }

/* Category chip pinned top-left of the media */
.fp-card__chip {
	position: absolute;
	top: 16px; left: 16px;
	z-index: 2;
	background: var(--yellow);
	color: var(--ink);
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	font-size: 11px; font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	box-shadow: 0 6px 16px var(--yellow-ring);
}
/* Corner arrow — animates on hover */
.fp-card__arrow {
	position: absolute;
	top: 16px; right: 16px;
	z-index: 2;
	width: 40px; height: 40px;
	background: rgba(255,255,255,.9);
	color: var(--ink);
	border-radius: 50%;
	display: grid; place-items: center;
	backdrop-filter: blur(6px);
	transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
	opacity: 0;
	transform: translate(-6px, 6px);
}
.fp-card:hover .fp-card__arrow,
.fp-card:focus-visible .fp-card__arrow {
	opacity: 1;
	transform: translate(0, 0);
	background: var(--yellow);
}
.fp-card__arrow svg { width: 16px; height: 16px; }

.fp-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.fp-card__meta {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-display);
	font-size: 11.5px; font-weight: 700;
	color: var(--muted);
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.fp-card__dot { color: var(--yellow); font-weight: 900; }
.fp-card__title {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	transition: color .2s var(--ease);
}
.fp-card:hover .fp-card__title { color: var(--ink); }
.fp-card__client {
	margin: 4px 0 0;
	color: var(--ink-soft);
	font-size: .92rem;
}
.fp-empty { text-align: center; color: var(--muted); padding: 3rem 0; }

/* ---------- STATS STRIP — dark, dividers, count-up (no more bullet dots) ---------- */
.stats-section { position: relative; overflow: hidden; }
.stats-section__deco {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(50% 60% at 15% 30%, rgba(56, 182, 255,.08), transparent 65%),
		radial-gradient(45% 55% at 85% 80%, rgba(255,255,255,.04), transparent 65%);
}
.stats-section > .container { position: relative; z-index: 1; }
.stats-strip {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 2rem; grid-template-columns: 1fr;
	text-align: center;
}
@media (min-width: 700px) { .stats-strip { grid-template-columns: repeat(4, 1fr); text-align: left; gap: 0; } }
.stat {
	list-style: none;
	position: relative;
	padding: .5rem 1.5rem;
	display: flex; flex-direction: column; gap: .6rem;
}
.stat::marker { content: ''; } /* belt & braces — no bullet, ever */
.stat__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.8rem, 5vw, 4rem);
	line-height: 1;
	font-weight: 300;
	color: var(--accent-ink);
	letter-spacing: -.03em;
	position: relative;
}
.stat__num::before {
	content: '';
	display: block;
	width: 28px; height: 3px;
	background: var(--yellow);
	border-radius: 2px;
	margin-bottom: 14px;
}
@media (min-width: 700px) {
	.stat { text-align: left; }
	.stat__num::before { margin-inline: 0; }
}
@media (max-width: 699px) {
	.stat__num::before { margin-inline: auto; }
}
.stat__label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-tight);
	color: rgba(255,255,255,.65);
	max-width: 20ch;
}
@media (min-width: 700px) {
	.stat__label { margin-inline: 0; }
}
@media (max-width: 699px) {
	.stat__label { margin-inline: auto; }
}
@media (min-width: 700px) {
	.stat__divider {
		position: absolute;
		top: 15%; bottom: 15%; right: 0;
		width: 1px;
		background: rgba(255,255,255,.1);
	}
}

/* ---------- Section: testimonial pull-quote ---------- */
.testimonial {
	max-width: 820px; margin-inline: auto; text-align: center;
}
.testimonial blockquote {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.6vw, 2rem);
	font-weight: 300;
	line-height: 1.35;
	color: var(--ink);
	margin: 0 0 1.5rem;
	quotes: "\201C" "\201D";
}
.testimonial blockquote::before { content: open-quote; }
.testimonial blockquote::after  { content: close-quote; }
.testimonial cite {
	font-style: normal;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: var(--ls-tight);
	color: var(--muted);
}

/* ---------- Section: CTA banner ---------- */
.cta-banner {
	background: var(--ink);
	color: var(--accent-ink);
	padding: clamp(3rem, 6vw, 5rem) 0;
	text-align: center;
}
.cta-banner h2 { color: var(--accent-ink); margin: 0 0 .8rem; }
.cta-banner p  { color: rgba(255,255,255,.75); max-width: 560px; margin: 0 auto 1.5rem; }

/* ---------- Page hero (About/Services/Contact) ---------- */
/* PAGE HERO — dark ink + yellow gradient on the left, featured image on the right */
.page-hero {
	position: relative;
	background: var(--bg-deep);
	color: var(--accent-ink);
	padding: clamp(6rem, 11vw, 8.5rem) 0 clamp(4rem, 7vw, 5.5rem);
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,.05);
	min-height: clamp(360px, 55vh, 520px);
	display: flex; align-items: center;
}
.page-hero--no-image { min-height: auto; padding-block: clamp(5rem, 9vw, 7rem) clamp(3rem, 5vw, 4rem); }

/* Featured image — masks L→R so the right side reveals the photo, left stays dark */
.page-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.92) 72%, #000 100%);
	        mask-image: linear-gradient(to right, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.92) 72%, #000 100%);
}
.page-hero__bg img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center right;
}

/* Left-heavy dark scrim on top of the image so the content stays readable */
.page-hero::before {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to right,
		var(--bg-deep) 0%,
		rgba(13,13,13,.94) 30%,
		rgba(13,13,13,.55) 60%,
		rgba(13,13,13,.10) 100%
	);
}
/* Warm yellow wash — top-left glow + bottom-left kiss */
.page-hero::after {
	content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background:
		radial-gradient(55% 65% at 8% 25%, rgba(56, 182, 255,.20), transparent 68%),
		radial-gradient(45% 55% at 0% 100%, rgba(56, 182, 255,.10), transparent 65%);
}

@media (max-width: 1023px) {
	.page-hero__bg {
		-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 65%, rgba(0,0,0,.55) 100%);
		        mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 65%, rgba(0,0,0,.55) 100%);
	}
	.page-hero::before {
		background: linear-gradient(180deg,
			rgba(13,13,13,.78) 0%, rgba(13,13,13,.55) 40%, rgba(13,13,13,.88) 100%);
	}
}

/* Container inside page-hero must match .site-header__inner exactly so the
   H1 lines up with the logo's left edge. */
.page-hero > .container {
	position: relative; z-index: 3;
	width: 100%;
	max-width: var(--container);
	padding-inline: clamp(12px, 1.6vw, 28px);
	margin-inline: auto;
}
.page-hero__inner {
	max-width: 50%;
}
@media (max-width: 1023px) { .page-hero__inner { max-width: 100%; } }

.page-hero .chip--yellow {
	background: rgba(56, 182, 255,.16);
	color: var(--yellow);
	border-color: rgba(56, 182, 255,.35);
	backdrop-filter: blur(6px);
}
.page-hero h1 {
	color: var(--accent-ink);
	margin: 1rem 0 1rem;
	/* Follow the Customizer H1 size (Design → Sizes) like every other H1 —
	   a hardcoded clamp here silently ignored the setting. */
	font-size: var(--fs-h1);
	font-weight: var(--fw-head);
	line-height: var(--lh-head);
	letter-spacing: var(--ls-head);
	text-wrap: balance;
}
.page-hero p {
	color: rgba(255,255,255,.82);
	font-size: clamp(1rem, 0.2vw + 0.95rem, 1.15rem);
	max-width: 52ch;
	margin: 0;
}
.page-hero__inner > * + * { margin-top: 1rem; }

/* Fallback ambient (no featured image) — just the gradients, no image behind */
.page-hero--no-image .page-hero__bg { display: none; }
.page-hero--no-image::before {
	background: linear-gradient(180deg, #1a1a1a 0%, var(--bg-deep) 100%);
}

/* ---------- About: mission/values + pillars ---------- */
.about-story { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .about-story { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.about-story img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ============================================================
   ABOUT PAGE — modernised
   ============================================================ */

/* Credentials rail — sits below the page hero on About */
.ab-credentials {
	position: relative;
	background: var(--white);
	padding-block: clamp(2.5rem, 4vw, 3.5rem);
	border-bottom: 1px solid var(--line);
}
.ab-credentials__grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .ab-credentials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ab-credentials__grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.ab-credential {
	list-style: none;
	padding: 4px 0 4px 20px;
	position: relative;
}
.ab-credential::before {
	content: '';
	position: absolute;
	top: 6px; bottom: 6px; left: 0;
	width: 3px;
	background: var(--yellow);
	border-radius: 2px;
}
.ab-credential__num {
	font-family: var(--font-display);
	font-size: clamp(2rem, 3vw, 2.6rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--ink);
	margin-bottom: .5rem;
}
.ab-credential__label {
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-tight);
	color: var(--muted);
	max-width: 22ch;
}

/* Story — 2-col with image + floating year badge */
.ab-story-section { padding-block: clamp(4rem, 7vw, 6.5rem); }
.ab-story {
	display: grid; gap: 3rem;
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 900px)  { .ab-story { grid-template-columns: 1fr 1.2fr; gap: 4.5rem; } }
@media (min-width: 1200px) { .ab-story { gap: 6rem; } }

.ab-story__media { position: relative; margin: 0; }
.ab-story__img {
	width: 100%; aspect-ratio: 4/5;
	object-fit: cover;
	border-radius: var(--radius-xl);
	box-shadow: var(--sh-pop);
}
/* Match the project-card placeholder treatment — a light-on-light gradient
   just reads as a broken image well. */
.ab-story__img--ph,
.why-dam__img--ph {
	position: relative;
	background:
		linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%),
		radial-gradient(60% 60% at 35% 30%, rgba(56, 182, 255,.12), transparent 65%);
	background-blend-mode: normal, screen;
	display: grid; place-items: center;
	overflow: hidden;
}
.ab-story__img--ph::before,
.why-dam__img--ph::before {
	content: ''; position: absolute; inset: 0;
	background: repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,.028) 20px 21px);
	border-radius: inherit;
}
/* Brand roofline mark, drawn in CSS so no extra request */
.ab-story__img--ph::after,
.why-dam__img--ph::after {
	content: '';
	position: relative;
	width: 40%; max-width: 150px; aspect-ratio: 5 / 3;
	background: var(--yellow);
	opacity: .5;
	-webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 42 50 8l42 34'/%3E%3Cpath d='M18 42v14h64V42'/%3E%3Cpath d='M40 56V44h20v12'/%3E%3C/g%3E%3C/svg%3E");
	        mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 42 50 8l42 34'/%3E%3Cpath d='M18 42v14h64V42'/%3E%3Cpath d='M40 56V44h20v12'/%3E%3C/g%3E%3C/svg%3E");
}
.ab-story__badge {
	position: absolute;
	bottom: -18px; right: -18px;
	background: var(--ink);
	color: var(--yellow);
	padding: 1.25rem 1.6rem;
	border-radius: var(--radius);
	box-shadow: var(--sh-pop);
	transform: rotate(-3deg);
	text-align: center;
	min-width: 130px;
}
.ab-story__badge-num {
	display: block;
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--yellow);
	margin-bottom: .3rem;
}
.ab-story__badge-sub {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-tight);
	color: rgba(255,255,255,.7);
	line-height: 1.3;
}
@media (max-width: 899px) {
	.ab-story__badge { bottom: 12px; right: 12px; }
}

.ab-story__content h2 {
	margin: 1rem 0 1.5rem;
	position: relative;
	padding-bottom: 1rem;
}
.ab-story__content h2::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 60px; height: 3px;
	background: var(--yellow);
	border-radius: 2px;
}
.ab-story__prose p {
	color: var(--ink-soft);
	font-size: 1.05rem;
	line-height: 1.75;
	margin: 0 0 1.1rem;
}

/* Mission + Values — 2 rounded cards with icon badge */
.ab-mv {
	display: grid; gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 800px) { .ab-mv { grid-template-columns: 1fr 1fr; gap: 32px; } }
.ab-mv__card {
	position: relative;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	padding: 36px 32px 32px;
	box-shadow: var(--sh-card);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ab-mv__card:hover { transform: translateY(-4px); box-shadow: var(--sh-pop); border-color: var(--yellow); }
.ab-mv__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	border-radius: 14px;
	background: var(--yellow-soft);
	color: var(--yellow-deep);
	margin-bottom: 1.25rem;
	transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.ab-mv__card:hover .ab-mv__icon { background: var(--yellow); color: var(--ink); transform: rotate(-6deg) scale(1.05); }
.ab-mv__icon svg { width: 28px; height: 28px; }
.ab-mv__card h3 { margin: 0 0 .7rem; font-size: 1.4rem; letter-spacing: -.01em; }
.ab-mv__card p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }

/* Pillars — 4-up cards with big display number */
.ab-pillars {
	display: grid; gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .ab-pillars { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1100px) { .ab-pillars { grid-template-columns: repeat(4, 1fr); } }
.ab-pillar {
	position: relative;
	padding: 28px 24px 26px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--sh-card);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
	overflow: hidden;
}
.ab-pillar:hover { transform: translateY(-4px); box-shadow: var(--sh-pop); border-color: var(--yellow); }
.ab-pillar__num {
	position: absolute;
	top: 8px; right: 16px;
	font-family: var(--font-display);
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--line);
	pointer-events: none;
	transition: -webkit-text-stroke .3s var(--ease);
}
.ab-pillar:hover .ab-pillar__num { -webkit-text-stroke-color: var(--yellow); }
.ab-pillar h4 { margin: 0 0 .6rem; font-size: 1.15rem; letter-spacing: -.01em; position: relative; z-index: 1; }
.ab-pillar p { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.6; position: relative; z-index: 1; }

/* ============================================================
   CONTACT PAGE — modernised
   ============================================================ */

.ct-section { padding-block: clamp(4rem, 7vw, 6rem); }
.ct-grid { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .ct-grid { grid-template-columns: 1.4fr 1fr; gap: 40px; } }

.ct-form-wrap {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-2xl);
	padding: clamp(28px, 3vw, 44px);
	box-shadow: var(--sh-card);
}
.ct-form-title { margin: 0 0 .3rem; font-size: 1.4rem; }
.ct-form-sub { margin: 0 0 1.75rem; color: var(--ink-soft); font-size: .95rem; }
.ct-form { display: grid; gap: 14px; }
.ct-field { display: grid; gap: 6px; }
.ct-field label {
	font-size: 11.5px; font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.ct-field input,
.ct-field select,
.ct-field textarea {
	width: 100%;
	padding: 13px 15px;
	background: var(--bg);
	border: 1.5px solid var(--line);
	border-radius: 10px;
	font: inherit;
	font-size: .95rem;
	color: var(--ink);
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
	outline: 0;
	border-color: var(--ink);
	background: var(--white);
	box-shadow: 0 0 0 4px var(--yellow-ring);
}
.ct-field textarea { min-height: 130px; resize: vertical; }
.ct-field--row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.ct-field--row > div { display: grid; gap: 6px; }
@media (max-width: 640px) { .ct-field--row { grid-template-columns: 1fr; } }

.ct-form button[type="submit"] { margin-top: 8px; }
.ct-form__note {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	margin: 14px 0 0;
	font-size: .78rem;
	color: var(--muted);
	text-align: center;
}
.ct-errors {
	background: rgba(220, 38, 38, .08);
	border: 1px solid rgba(220, 38, 38, .25);
	color: #b91c1c;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	margin-bottom: 14px;
	font-size: .9rem;
}
.ct-errors p { margin: .15rem 0; color: #b91c1c; }
.ct-thanks { text-align: center; padding: 20px 8px; }
.ct-thanks__tick {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px;
	background: var(--yellow); color: var(--ink);
	border-radius: 50%;
	font-size: 1.8rem; font-weight: 800;
	margin: 0 auto 1.25rem;
	box-shadow: 0 6px 20px var(--yellow-ring);
}
.ct-thanks h3 { margin: 0 0 .6rem; font-size: 1.35rem; }
.ct-thanks p { margin: 0; color: var(--ink-soft); }
.ct-thanks a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }

/* Info card (right column) */
.ct-side { display: flex; flex-direction: column; gap: 24px; }
.ct-info {
	background: var(--bg-deep);
	color: var(--bg);
	border-radius: var(--radius-2xl);
	padding: clamp(28px, 3vw, 36px);
	position: relative;
	box-shadow: var(--sh-card);
	overflow: hidden;
}
.ct-info::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(60% 60% at 100% 0%, rgba(56, 182, 255,.10), transparent 65%),
		radial-gradient(50% 60% at 0% 100%, rgba(255,255,255,.03), transparent 65%);
}
.ct-info > * { position: relative; z-index: 1; }
.ct-info__badge {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--yellow); color: var(--ink);
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	font-size: 11px; font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.ct-info__block { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.10); }
.ct-info__block:last-of-type { border-bottom: 0; }
.ct-info__block h4 {
	margin: 0 0 .4rem;
	color: rgba(255,255,255,.55);
	font-size: 11px; font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ct-info__block p, .ct-info__block address { margin: 0; font-style: normal; color: var(--bg); font-size: 1rem; }
.ct-info__block a { color: var(--bg); font-weight: 600; }
.ct-info__block a:hover { color: var(--yellow); }
.ct-info__social { display: flex; gap: 10px; list-style: none; padding: 0; margin: .5rem 0 0; }
.ct-info__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: var(--bg);
	transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.ct-info__social a:hover { background: var(--yellow); color: var(--ink); transform: translateY(-2px); }
.ct-info__trust {
	list-style: none; padding: 20px 0 0; margin: 20px 0 0;
	border-top: 1px solid rgba(255,255,255,.10);
	display: grid; gap: 10px;
	font-size: .88rem;
	color: rgba(255,255,255,.85);
}
.ct-info__trust li { display: flex; align-items: center; gap: 10px; }
.ct-info__trust li span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px;
	background: var(--yellow); color: var(--ink);
	border-radius: 50%;
	font-size: .7rem; font-weight: 800; flex-shrink: 0;
}

.ct-map { aspect-ratio: 4/3; background: var(--bg-soft); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--sh-card); }
.ct-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* FAQ */
.ct-faq-section { padding-block: clamp(4rem, 7vw, 6rem); }
.ct-faqs {
	max-width: 860px; margin: 0 auto;
	display: grid; gap: 14px;
}
.ct-faq {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--sh-card);
	overflow: hidden;
	transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.ct-faq[open] { box-shadow: var(--sh-pop); border-color: var(--yellow); }
.ct-faq summary {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px;
	padding: 22px 24px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ink);
}
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq__mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	background: var(--yellow-soft);
	color: var(--yellow-deep);
	border-radius: 10px;
	font-size: 1.3rem; font-weight: 400;
	line-height: 1;
	transition: transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease);
	flex-shrink: 0;
}
.ct-faq[open] .ct-faq__mark { background: var(--yellow); color: var(--ink); transform: rotate(45deg); }
.ct-faq__body { padding: 0 24px 22px; color: var(--ink-soft); font-size: .98rem; line-height: 1.65; }
.ct-faq__body p { margin: 0; }

/* Phone-forward banner */
.ct-phone-banner {
	background: var(--ink);
	color: var(--bg);
	padding-block: clamp(3rem, 5vw, 4rem);
	position: relative; overflow: hidden;
}
.ct-phone-banner::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(60% 80% at 100% 100%, var(--yellow-soft), transparent 70%);
}
.ct-phone-banner__inner {
	position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: space-between;
	gap: 2rem; flex-wrap: wrap;
}
.ct-phone-banner h2 { color: var(--bg); margin: .75rem 0 .4rem; font-size: clamp(1.6rem, 2.4vw, 2rem); }
.ct-phone-banner p { color: rgba(255,255,255,.7); margin: 0; }


.mv-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .mv-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.mv-block h3 { margin: 0 0 .6rem; }
.mv-block p  { color: var(--ink-soft); }

.pillars { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { padding: 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sh-card); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.pillar h4 { margin: 0 0 .5rem; font-size: 1.1rem; }
.pillar p  { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ============================================================
   SERVICES PAGE — modernised
   ============================================================ */

/* Quick nav — sticky pill strip under the header. Horizontal-scrolls on narrow
   viewports so pills never crop off the right edge. */
.sv-quicknav {
	background: var(--white);
	border-bottom: 1px solid var(--line);
	padding: 16px 0;
	margin: 20px 0;
	position: sticky;
	top: var(--header-h);
	z-index: 30;
	box-shadow: 0 6px 20px rgba(10,10,10,.04);
}
.sv-quicknav .container {
	display: flex; align-items: center; gap: 20px;
	flex-wrap: wrap;
}
.sv-quicknav__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
	flex-shrink: 0;
}
.sv-quicknav__pills {
	display: flex; flex-wrap: wrap; gap: 8px;
	flex: 1;
	min-width: 0;
}
.sv-quicknav__pill { flex-shrink: 0; }

/* Desktop-only — the sticky anchor nav eats too much of a phone viewport,
   and the service rows are already one-per-screen on mobile. */
@media (max-width: 1023px) {
	.sv-quicknav { display: none; }
	/* No sticky nav to clear, so the anchor offset only needs the header. */
	.sv-row { scroll-margin-top: calc(var(--header-h) + 20px); }
}
.sv-quicknav__pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px 8px 10px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
	white-space: nowrap;
}
.sv-quicknav__pill:hover, .sv-quicknav__pill:focus-visible {
	background: var(--ink);
	color: var(--yellow);
	border-color: var(--ink);
	transform: translateY(-1px);
}
.sv-quicknav__icon {
	display: inline-grid; place-items: center;
	width: 22px; height: 22px;
	background: var(--yellow); color: var(--ink);
	border-radius: 8px;
	flex-shrink: 0;
	transition: background .2s var(--ease);
}
.sv-quicknav__pill:hover .sv-quicknav__icon,
.sv-quicknav__pill:focus-visible .sv-quicknav__icon { background: var(--yellow); }
.sv-quicknav__icon svg { width: 13px; height: 13px; }

/* Service rows — big alternating 2-col with editorial spacing */
.sv-rows-section { padding-block: clamp(4rem, 7vw, 6rem); }
.sv-row {
	display: grid; gap: 2.5rem;
	grid-template-columns: 1fr;
	padding: clamp(3rem, 5vw, 4.5rem) 0;
	scroll-margin-top: calc(var(--header-h) + 90px); /* offset for sticky header + quicknav */
	border-bottom: 1px solid var(--line);
}
.sv-row:last-child { border-bottom: 0; }
@media (min-width: 900px)  {
	.sv-row { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
}
@media (min-width: 1200px) { .sv-row { gap: 6rem; } }
.sv-row--reverse .sv-row__media { order: -1; }
@media (min-width: 900px)  {
	.sv-row--reverse .sv-row__media { order: 2; }
}

/* Media column — image or a designed placeholder */
.sv-row__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bg-soft);
	border-radius: var(--radius-2xl);
	box-shadow: var(--sh-pop);
}
.sv-row__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 700ms var(--ease);
}
.sv-row:hover .sv-row__media img { transform: scale(1.03); }
.sv-row__ph {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%),
		radial-gradient(60% 60% at 30% 30%, rgba(56, 182, 255,.14), transparent 65%);
	background-blend-mode: normal, screen;
	display: grid; place-items: center;
	color: var(--yellow);
	overflow: hidden;
}
.sv-row__ph::before {
	content: ''; position: absolute; inset: 0;
	background: repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,.03) 22px 23px);
}
.sv-row__ph-icon {
	position: relative; z-index: 1;
	display: grid; place-items: center;
	width: 96px; height: 96px;
	background: rgba(56, 182, 255,.14);
	border: 1px solid rgba(56, 182, 255,.35);
	border-radius: 24px;
	color: var(--yellow);
}
.sv-row__ph-icon svg { width: 44px; height: 44px; }
.sv-row__ph-num {
	position: absolute;
	bottom: 24px; right: 28px;
	font-family: var(--font-display);
	font-size: 5rem; font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(56, 182, 255,.35);
	z-index: 2;
}

/* Body column */
.sv-row__body { max-width: 600px; }
.sv-row__eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	margin-bottom: 1.25rem;
}
.sv-row__icon {
	display: inline-grid; place-items: center;
	width: 44px; height: 44px;
	background: var(--yellow-soft);
	color: var(--yellow-deep);
	border-radius: 12px;
	transition: background .25s var(--ease), color .25s var(--ease);
	flex-shrink: 0;
}
.sv-row:hover .sv-row__icon { background: var(--yellow); color: var(--ink); }
.sv-row__icon svg { width: 22px; height: 22px; }
.sv-row__title {
	margin: 1rem 0 1rem;
	font-size: clamp(1.8rem, 2.6vw, 2.4rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.02em;
	position: relative;
	padding-bottom: 1rem;
}
.sv-row__title::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 60px; height: 3px;
	background: var(--yellow);
	border-radius: 2px;
}
.sv-row__desc {
	color: var(--ink-soft);
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 1.5rem;
}
.sv-row__bullets {
	list-style: none; padding: 0; margin: 0 0 2rem;
	display: grid; gap: 12px;
}
.sv-row__bullets li {
	display: flex; align-items: flex-start; gap: 12px;
	color: var(--ink);
	font-size: .95rem;
	line-height: 1.5;
}
.sv-row__tick {
	display: inline-grid; place-items: center;
	width: 22px; height: 22px;
	background: var(--yellow); color: var(--ink);
	border-radius: 50%;
	font-size: .72rem; font-weight: 800;
	flex-shrink: 0;
	margin-top: 1px;
}
.sv-row__actions {
	display: flex; align-items: center; gap: 1.25rem;
	flex-wrap: wrap;
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; } }
.contact-form-wrap { background: var(--white); border: 1px solid var(--line); padding: 2.5rem; border-radius: var(--radius-xl); box-shadow: var(--sh-card); }
.contact-form label { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: var(--ls-tight); color: var(--muted); margin: 1rem 0 .5rem; }
.contact-form input, .contact-form textarea, .contact-form select {
	width: 100%;
	padding: .95rem 1.1rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 10px;
	font: inherit;
	color: var(--ink);
	transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form button { margin-top: 1.5rem; }
.contact-side { display: flex; flex-direction: column; gap: 1.75rem; }
.contact-block h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: var(--ls-tight); color: var(--muted); margin: 0 0 .5rem; font-weight: 500; }
.contact-block p, .contact-block address { margin: 0; color: var(--ink); font-style: normal; }
.contact-block a { color: var(--ink); border-bottom: 1px solid var(--line); }
.contact-block a:hover { border-color: var(--ink); }
.contact-map { aspect-ratio: 4/3; background: var(--line-soft); margin-top: 1rem; overflow: hidden; }
.contact-map iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================
   PROJECTS ARCHIVE — filter pills + fp-card grid + refined pagination
   ============================================================ */
.section--projects-archive { padding-block: clamp(3rem, 5vw, 4.5rem) clamp(4rem, 6vw, 6rem); }

/* AJAX grid wrap — loading state */
.projects-grid-wrap { position: relative; min-height: 300px; transition: opacity .25s var(--ease); }
.projects-grid-wrap.is-loading { opacity: .35; pointer-events: none; }
.projects-grid-wrap.is-loading::after {
	content: '';
	position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
	width: 36px; height: 36px;
	border: 3px solid var(--line);
	border-top-color: var(--yellow);
	border-radius: 50%;
	animation: dam-spin .7s linear infinite;
	z-index: 5;
}
@keyframes dam-spin { to { transform: translateX(-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.projects-grid-wrap.is-loading::after { animation: none; }
}

.filter-pills {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 0 0 3rem;
}
.filter-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px 10px 18px;
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ink);
	transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.filter-pill__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px;
	background: var(--bg-soft); color: var(--muted);
	border-radius: var(--radius-pill);
	font-size: 11px; font-weight: 700;
	padding: 0 6px;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.filter-pill:hover {
	background: var(--white);
	border-color: var(--ink);
	transform: translateY(-2px);
	box-shadow: var(--sh-lift);
}
.filter-pill.is-active {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
	box-shadow: var(--sh-cta);
}
.filter-pill.is-active .filter-pill__count {
	background: var(--yellow); color: var(--ink);
}

/* Pagination — pill-shaped */
.pagination {
	display: flex; justify-content: center; align-items: center;
	gap: 6px;
	margin-top: 3.5rem;
	flex-wrap: wrap;
}
.pagination a, .pagination span {
	display: inline-flex; min-width: 44px; height: 44px;
	padding: 0 14px;
	align-items: center; justify-content: center;
	border: 1.5px solid var(--line);
	background: var(--white);
	border-radius: var(--radius-pill);
	font-size: .92rem;
	font-weight: 700;
	color: var(--ink);
	transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.pagination a:hover {
	background: var(--yellow-soft);
	border-color: var(--yellow);
	transform: translateY(-2px);
}
.pagination .current {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}
.pagination .dots {
	border: 0; background: transparent; min-width: 24px;
}

/* ============================================================
   SINGLE PROJECT — dark hero + meta card rail + editorial gallery
   ============================================================ */
.project-hero {
	position: relative;
	background: var(--bg-deep);
	color: var(--accent-ink);
	padding: clamp(6rem, 11vw, 9rem) 0 clamp(6rem, 10vw, 8rem);
	overflow: hidden;
	min-height: clamp(420px, 65vh, 620px);
	display: flex; align-items: center;
}
.project-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none;
}
.project-hero__bg img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: .55;
}
.project-hero::before {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.75) 60%, rgba(13,13,13,.95) 100%);
}
.project-hero::after {
	content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background:
		radial-gradient(60% 65% at 15% 20%, rgba(56, 182, 255,.14), transparent 70%),
		radial-gradient(45% 55% at 0% 100%, rgba(56, 182, 255,.08), transparent 65%);
}
.project-hero > .container {
	position: relative; z-index: 3;
	width: 100%; max-width: var(--container);
	padding-inline: clamp(12px, 1.6vw, 28px);
	margin-inline: auto;
}
.project-hero__inner { max-width: 800px; }
.project-hero__inner > * + * { margin-top: 1rem; }

.project-hero__crumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: rgba(255,255,255,.6);
	margin-bottom: 1rem;
}
.project-hero__crumbs a {
	color: rgba(255,255,255,.75);
	border-bottom: 1px solid transparent;
	transition: color .2s var(--ease), border-color .2s var(--ease);
}
.project-hero__crumbs a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }
.crumb-sep { color: rgba(255,255,255,.35); font-weight: 400; }

.project-hero__title {
	color: var(--accent-ink);
	font-size: clamp(2.2rem, 4.5vw, 4rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.025em;
	margin: 0;
	text-wrap: balance;
}
.project-hero__summary {
	color: rgba(255,255,255,.82);
	font-size: clamp(1.05rem, 0.3vw + 1rem, 1.2rem);
	max-width: 56ch;
	line-height: 1.55;
}

/* Meta cards — float up under the hero */
.project-meta-rail {
	position: relative;
	margin-top: -3rem;
	z-index: 5;
	padding-bottom: clamp(2rem, 4vw, 3rem);
}
/* Flex, not a fixed 4-col grid: most projects only fill some of Client /
   Value / Completed / Location, and empty grid slots left the rail lopsided. */
.project-meta-cards {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 14px;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(12px, 1.6vw, 28px);
}
/* Grow to fill the row whatever the count (4, 3 or 2 populated fields).
   A lone card is capped so it doesn't stretch the full container width. */
.project-meta-card { flex: 1 1 210px; }
.project-meta-card:only-child { flex-grow: 0; min-width: 260px; max-width: 340px; }
@media (min-width: 1024px) { .project-meta-cards { gap: 20px; } }

.project-meta-card {
	list-style: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 20px 22px;
	box-shadow: var(--sh-pop);
	position: relative;
	overflow: hidden;
	transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.project-meta-card::before {
	content: ''; position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--yellow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--ease);
}
.project-meta-card:hover { transform: translateY(-3px); border-color: var(--yellow); }
.project-meta-card:hover::before { transform: scaleX(1); }
.project-meta-card__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--muted);
	margin-bottom: .4rem;
}
.project-meta-card__value {
	display: block;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.3;
	letter-spacing: -.01em;
}

/* Body content */
.project-body-section { padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 6vw, 5rem); }
.project-body {
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--ink-soft);
}
.project-body h2 { margin: 2rem 0 1rem; color: var(--ink); }
.project-body h3 { margin: 1.5rem 0 .75rem; color: var(--ink); }
.project-body p  { margin: 0 0 1.25rem; }
.project-body ul, .project-body ol {
	margin: 0 0 1.25rem; padding-left: 1.5em;
}
.project-body li { margin-bottom: .4rem; }

/* Gallery — uniform grid on white, so the photos carry the section */
.project-gallery-section {
	padding-block: clamp(4rem, 7vw, 6rem);
	background: var(--white);
}
/* Uniform grid — every tile the same size. Source photos are a mix of
   portrait and landscape, so a fixed ratio + object-fit:cover is the only
   way the wall reads as one deliberate set rather than a ragged collage. */
.project-gallery {
	display: grid; gap: 14px;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px)  { .project-gallery { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1200px) { .project-gallery { grid-template-columns: repeat(4, 1fr); } }

.project-gallery__tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--bg-soft);
	aspect-ratio: 4/3;
	border-radius: var(--radius-lg);
	box-shadow: var(--sh-card);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.project-gallery__tile:hover { transform: translateY(-3px); box-shadow: var(--sh-pop); }
.project-gallery__tile img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 700ms var(--ease);
}
.project-gallery__tile:hover img { transform: scale(1.06); }

/* --wide retired: kept as a no-op so any older saved markup stays uniform. */
.project-gallery__tile--wide { grid-column: auto; aspect-ratio: 4 / 3; }

.project-gallery__zoom {
	position: absolute;
	bottom: 14px; right: 14px;
	width: 40px; height: 40px;
	background: rgba(255,255,255,.92);
	color: var(--ink);
	border-radius: 50%;
	display: grid; place-items: center;
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translate(-6px, 6px);
	transition: opacity .25s var(--ease), transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.project-gallery__tile:hover .project-gallery__zoom,
.project-gallery__tile:focus-visible .project-gallery__zoom {
	opacity: 1;
	transform: translate(0, 0);
	background: var(--yellow);
}
.project-gallery__zoom svg { width: 16px; height: 16px; }

/* Related section header */
.related-section { padding-block: clamp(4rem, 7vw, 6rem); background: var(--bg-soft); position: relative; overflow: hidden; }
.related-section::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(50% 60% at 100% 100%, var(--yellow-soft), transparent 65%),
		radial-gradient(40% 50% at 0% 0%, rgba(10,10,10,.03), transparent 65%);
}
.related-section > .container { position: relative; z-index: 1; }
.related-header {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 2rem; flex-wrap: wrap;
	margin-bottom: 3rem;
}
.related-header h2 { margin: .8rem 0 0; }

/* ---------- Footer — Tidii chunky layout, monochrome cream ---------- */
.site-footer {
	position: relative;
	background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
	color: var(--ink-soft);
	padding: clamp(64px, 7vw, 96px) 0 24px;
	margin-top: 0;
	overflow: hidden;
}
.site-footer::before {
	content: ''; position: absolute; left: 0; right: 0; top: 0;
	height: 4px;
	background: linear-gradient(to right, var(--ink) 0%, var(--yellow) 35%, var(--yellow-bright) 65%, var(--ink) 100%);
}
.site-footer::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(80px 80px at 8% 22%, rgba(10,10,10,.04), transparent 70%),
		radial-gradient(140px 140px at 92% 80%, rgba(10,10,10,.05), transparent 70%);
}
.site-footer > .container, .site-footer .site-footer__inner { position: relative; z-index: 1; }

.site-footer__grid {
	display: grid; gap: 40px;
	grid-template-columns: 1fr;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(10,10,10,.1);
}
@media (min-width: 640px)  { .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 40px; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.6fr 1.1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; } }

.site-footer__col--brand { display: flex; flex-direction: column; }
.site-footer__logo {
	display: block;
	margin-bottom: 22px;
	height: auto !important;
	width: auto !important;
	max-height: var(--logo-h-footer);
	max-width: 220px;
	object-fit: contain;
	object-position: left center;
	line-height: 0;
	filter: none;
	transition: transform .25s var(--ease);
}
.site-footer__logo:hover { transform: translateY(-2px); }
.site-footer__wordmark {
	font-family: var(--font-display); font-weight: 700;
	font-size: 2.4rem; letter-spacing: -.025em;
	color: var(--ink); line-height: 1;
	margin-bottom: 22px;
}
.site-footer__tag {
	font-family: var(--font-display); font-style: italic;
	color: var(--ink-soft);
	margin: 0 0 24px; max-width: 38ch;
	line-height: 1.65; font-size: 15px;
}
.site-footer__heading {
	color: var(--ink); font-size: 13px; font-weight: 800;
	letter-spacing: 0.18em; text-transform: uppercase;
	margin: 0 0 18px;
	position: relative; padding-bottom: 10px;
}
.site-footer__heading::after {
	content: ''; position: absolute;
	left: 0; bottom: 0; width: 28px; height: 3px;
	background: var(--yellow); border-radius: 2px;
}
.site-footer__list, .site-footer__list ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 11px;
}
.site-footer__list a {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14.5px;
	color: var(--ink-soft);
	transition: color .2s, transform .2s, padding-left .2s;
}
.site-footer__list a::before {
	content: '';
	width: 0; height: 2px;
	background: var(--yellow); border-radius: 2px;
	transition: width .25s var(--ease);
	margin-right: -4px;
}
.site-footer__list a:hover { color: var(--ink); padding-left: 4px; font-weight: 600; }
.site-footer__list a:hover::before { width: 16px; margin-right: 4px; }

.site-footer__address, .site-footer__contact {
	font-style: normal; font-size: 14.5px;
	color: var(--ink); line-height: 1.55;
	margin: 0 0 14px;
}
.site-footer__contact a { color: var(--ink); font-weight: 600; }
.site-footer__contact a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.social { list-style: none; padding: 0; margin: auto 0 0; display: flex; gap: 10px; }
.social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(10,10,10,.10);
	background: rgba(255,255,255,.55);
	color: var(--ink);
	transition: background .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s;
}
.social a:hover {
	background: var(--yellow); border-color: var(--yellow); color: var(--ink);
	transform: translateY(-3px);
	box-shadow: 0 10px 22px var(--yellow-ring);
}

.site-footer__col--contact,
.site-footer__col:last-child {
	background: rgba(255,255,255,.55);
	border: 1px solid rgba(10,10,10,.08);
	border-radius: var(--radius-xl);
	padding: 24px;
	box-shadow: var(--sh-card);
}

.site-footer__trust {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 14px 28px;
	padding: 24px 0;
	font-size: 13px; font-weight: 600;
	color: var(--ink-soft);
	border-bottom: 1px solid rgba(10,10,10,.08);
	position: relative; z-index: 1;
}
.site-footer__trust span { display: inline-flex; align-items: center; gap: 8px; }
.site-footer__trust span::before {
	content: '✓';
	color: var(--ink);
	background: var(--yellow);
	width: 20px; height: 20px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	font-size: .7rem; font-weight: 800;
}

.site-footer__bar {
	padding-top: 22px;
	display: flex; flex-wrap: wrap; gap: 16px;
	align-items: center; justify-content: space-between;
	font-size: 13px; color: var(--muted);
	position: relative; z-index: 1;
}
.site-footer__bar p { margin: 0; }
.site-footer__bar a { color: var(--muted); border-bottom: 1px dotted rgba(10,10,10,.3); }
.site-footer__bar a:hover { color: var(--ink); border-color: var(--ink); }
.site-footer__credit { margin: 0; }
@media (max-width: 640px) {
	.site-footer__bar { justify-content: center; text-align: center; flex-direction: column; gap: 10px; }
}

/* ---------- Footer — mobile compaction ----------
   At 390px the single-column stack ran ~1400px tall. Pair the two link
   columns side-by-side, tighten the rhythm, and de-rag the trust strip. */
@media (max-width: 639px) {
	.site-footer { padding: 48px 0 20px; }

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px 20px;
		padding-bottom: 32px;
	}
	/* Brand and the contact card stay full-width; the two menus pair up. */
	.site-footer__col--brand,
	.site-footer__col--contact,
	.site-footer__col:last-child { grid-column: 1 / -1; }

	.site-footer__logo { max-height: 48px; margin-bottom: 16px; }
	.site-footer__tag { margin-bottom: 18px; font-size: 14.5px; }

	.site-footer__heading { margin-bottom: 14px; padding-bottom: 8px; font-size: 12px; }
	.site-footer__list, .site-footer__list ul { gap: 9px; }
	.site-footer__list a { font-size: 14px; }
	/* The hover slide-bar is pointless on touch and costs horizontal room. */
	.site-footer__list a::before { display: none; }

	.social { gap: 8px; }
	.social a { width: 40px; height: 40px; }

	.site-footer__col--contact,
	.site-footer__col:last-child { padding: 20px; }
	.site-footer__address, .site-footer__contact { font-size: 14px; margin-bottom: 12px; }

	/* Trust strip — a tidy 2-up grid instead of a centre-wrapped rag */
	.site-footer__trust {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: stretch;
		gap: 10px 14px;
		padding: 18px 0;
		font-size: 12px;
	}
	.site-footer__trust span { align-items: flex-start; gap: 6px; line-height: 1.35; }
	.site-footer__trust span::before { margin-top: 1px; }

	.site-footer__bar { padding-top: 18px; font-size: 12px; }
}

/* Very narrow phones — one column reads better than a cramped two */
@media (max-width: 380px) {
	.site-footer__grid { grid-template-columns: 1fr; }
	.site-footer__trust { grid-template-columns: 1fr; }
}

/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: 0; }
.faq details {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--line);
}
.faq summary {
	display: flex; justify-content: space-between; gap: 2rem; align-items: center;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: '+';
	font-size: 1.6rem;
	line-height: 1;
	color: var(--muted);
	transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { content: '−'; }
.faq details > *:not(summary) { color: var(--ink-soft); margin-top: .8rem; }

/* ---------- Lightbox ---------- */
.lightbox {
	position: fixed; inset: 0; z-index: 100;
	background: rgba(0,0,0,.94);
	display: none;
	align-items: center; justify-content: center;
	padding: 2rem;
}
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: min(1400px, 96vw); max-height: 88vh; object-fit: contain; }
.lightbox__close, .lightbox__nav {
	position: absolute; z-index: 2;
	color: #fff; font-size: 2rem; line-height: 1;
	width: 52px; height: 52px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.08); border-radius: 50%;
	transition: background var(--dur-quick) var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.18); color: #fff; }
.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__nav--prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__caption { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: .85rem; }

/* ---------- Back-to-top ---------- */
.back-to-top {
	position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 30;
	width: 46px; height: 46px;
	background: var(--ink); color: var(--bg);
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	opacity: 0; pointer-events: none;
	box-shadow: var(--sh-cta);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur-quick) var(--ease);
	transform: translateY(20px);
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--accent, var(--ink)); color: var(--bg); transform: translateY(-3px); box-shadow: var(--sh-cta-hover); }
.back-to-top:active { transform: translateY(0); }

/* =========================================================
   HOME §  Section head + eyebrow helpers
   ========================================================= */
.section-head { max-width: 720px; margin: 0 0 3rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin: .5rem 0 1rem; }
.section-head__sub { color: var(--ink-soft); font-size: 1.05rem; margin: 0; max-width: 56ch; margin-inline: auto; }
.eyebrow--light { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.25); }

/* Yellow chip — pill eyebrow used across sections */
.chip {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	font-size: 12px; font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
}
.chip--yellow {
	background: var(--yellow-soft);
	color: var(--yellow-deep);
	border: 1px solid rgba(56, 182, 255, .35);
}

/* =========================================================
   INTRO — 2-col credibility rail + editorial body
   ========================================================= */
.section--intro {
	position: relative;
	padding-block: clamp(4rem, 7vw, 6.5rem);
	background: var(--white);
	overflow: hidden;
}
.section--intro__deco {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(50% 60% at 5% 15%, var(--yellow-soft), transparent 65%),
		radial-gradient(40% 50% at 95% 90%, rgba(10,10,10,.05), transparent 65%);
}
.section--intro > .container { position: relative; z-index: 1; }
.intro-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px)  { .intro-grid { grid-template-columns: 1fr 1.35fr; gap: 4.5rem; } }
@media (min-width: 1200px) { .intro-grid { gap: 6rem; } }

/* Left column — floating credibility card */
.intro-stats { position: relative; }
.intro-stats__card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-2xl);
	padding: 8px 24px;
	box-shadow: var(--sh-pop);
	position: relative;
	overflow: hidden;
}
.intro-stats__card::before {
	content: ''; position: absolute; inset: 0 0 0 auto;
	width: 4px; background: var(--yellow);
}
.intro-stat {
	display: flex; align-items: center; gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}
.intro-stat:last-child { border-bottom: 0; }
.intro-stat__bar {
	width: 3px;
	align-self: stretch;
	background: var(--ink);
	border-radius: 2px;
	transition: background var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
}
.intro-stats__card:hover .intro-stat__bar,
.intro-stat:hover .intro-stat__bar { background: var(--yellow); transform: scaleY(1.05); }
.intro-stat__num {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4vw, 3rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--ink);
}
.intro-stat__label {
	margin-top: .35rem;
	font-size: .82rem; font-weight: 600;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: var(--ls-tight);
}
.intro-stats__badge {
	position: absolute;
	bottom: -18px; right: -14px;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	background: var(--ink); color: var(--yellow);
	border-radius: var(--radius-pill);
	font-size: 12px; font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: var(--sh-cta);
	transform: rotate(-4deg);
}
.intro-stats__badge-tick {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px;
	background: var(--yellow); color: var(--ink); border-radius: 50%;
	font-size: 10px; font-weight: 800;
}
@media (max-width: 899px) {
	.intro-stats__badge { position: static; display: inline-flex; margin-top: 20px; transform: none; }
}

/* Right column — editorial body */
.intro-body { max-width: 640px; }
.intro-body__heading {
	font-family: var(--font-display);
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 1.25rem 0 1.25rem;
	position: relative;
	padding-bottom: 1.25rem;
}
.intro-body__heading::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 60px; height: 3px;
	background: var(--yellow);
	border-radius: 2px;
}
.intro-body__prose p {
	color: var(--ink-soft);
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 1rem;
}
.intro-body__cta { margin-top: 1.5rem; }

/* =========================================================
   SERVICES — modernised card grid
   ========================================================= */
.section--services {
	position: relative;
	background: var(--bg-soft);
	padding-block: clamp(5rem, 8vw, 7rem);
	overflow: hidden;
}
.section--services__deco {
	position: absolute; inset: 0; pointer-events: none;
	/* Glow derives from the live accent (--yellow) + ink tokens, so the
	   Customizer "Section background (soft)" + Accent pickers fully control
	   this background — no hard-coded blue cast. */
	background:
		radial-gradient(60% 60% at 100% 0%, color-mix(in srgb, var(--yellow) 10%, transparent), transparent 65%),
		radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--ink) 3%, transparent), transparent 65%);
}
.section--services > .container { position: relative; z-index: 1; }

/* =========================================================
   HOME §  Hero (overrides base .hero with badges + refined type)
   ========================================================= */
.hero__eyebrow {
	display: inline-block;
	background: var(--yellow-soft);
	color: var(--yellow);
	font-size: 13px; font-weight: 700;
	letter-spacing: .04em;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(56, 182, 255,.35);
	margin-bottom: 1.5rem;
	backdrop-filter: blur(6px);
}
.hero__title {
	color: var(--accent-ink);
	font-size: var(--fs-h1);
	font-weight: var(--fw-head);
	line-height: var(--lh-head);
	letter-spacing: var(--ls-head);
	margin: 0 0 1rem;
	max-width: 20ch;
	text-wrap: balance;
}
@media (min-width: 1200px) {
	.hero__title { max-width: 22ch; }
}
.hero__sub { color: rgba(255,255,255,.85); font-size: clamp(1rem, 0.4vw + 1rem, 1.18rem); max-width: 56ch; margin-bottom: 2rem; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--outline-light:hover, .btn--outline-light:focus-visible { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255,255,255,.15); }
.btn--lg { padding: 1.15rem 2rem; font-size: 1rem; }

.hero__badges { position: absolute; right: max(6vw, 2rem); bottom: 3rem; display: none; gap: 1rem; z-index: 2; }
@media (min-width: 1024px) { .hero__badges { display: flex; } }
.hero__badge {
	background: rgba(255,255,255,.95);
	color: var(--ink);
	padding: 1.1rem 1.4rem;
	border-radius: var(--radius);
	backdrop-filter: blur(8px);
	box-shadow: var(--sh-pop);
	display: flex; flex-direction: column; gap: .3rem;
	min-width: 150px;
}
.hero__badge--muted { background: rgba(20,20,20,.85); color: #fff; }
.hero__badge-num { font-family: var(--font-display); font-size: 2rem; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.hero__badge-num span { font-size: 1.2rem; opacity: .6; margin-left: .05em; }
.hero__badge-tick { font-size: 1.6rem; line-height: 1; color: var(--bg); }
.hero__badge--muted .hero__badge-tick { color: #fff; }
.hero__badge-label { font-size: .78rem; text-transform: uppercase; letter-spacing: var(--ls-tight); color: var(--muted); line-height: 1.4; }
.hero__badge--muted .hero__badge-label { color: rgba(255,255,255,.7); }

/* =========================================================
   HOME §  Trust marquee (auto-scroll credentials strip)
   ========================================================= */
.trust-marquee {
	background: var(--ink);
	color: var(--bg);
	padding: 1.3rem 0;
	overflow: hidden;
	position: relative;
	border-block: 1px solid rgba(255,255,255,.08);
}
.trust-marquee::before, .trust-marquee::after {
	content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.trust-marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.trust-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }
.trust-marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.trust-marquee:hover .trust-marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__row {
	display: flex; align-items: center; gap: 2.5rem;
	list-style: none; margin: 0; padding: 0 1.5rem;
	flex-shrink: 0;
}
.marquee__item {
	display: inline-flex; align-items: center; gap: .8rem;
	font-size: .9rem; font-weight: 500; letter-spacing: .04em;
	white-space: nowrap;
	color: rgba(255,255,255,.9);
	text-transform: uppercase;
}
.marquee__dot { color: var(--yellow); font-size: .7rem; }
.marquee__label { color: rgba(255,255,255,.92); }

/* =========================================================
   HOME §  How it works (4 numbered cards + dashed connector)
   ========================================================= */
/* HOW IT WORKS — box + huge coloured numeral + corner icon badge */
.how-it-works { background: var(--bg); position: relative; overflow: hidden; }
.how-it-works::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(45% 40% at 90% 10%, var(--yellow-soft), transparent 65%),
		radial-gradient(35% 35% at 5% 90%, rgba(10,10,10,.03), transparent 65%);
}
.how-it-works > .container { position: relative; z-index: 1; }

.how-steps {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 2.5rem 1.75rem; grid-template-columns: 1fr;
	position: relative;
}
@media (min-width: 700px)  { .how-steps { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; } }
@media (min-width: 1024px) { .how-steps { grid-template-columns: repeat(4, 1fr); gap: 2.25rem 1.5rem; } }

/* Dashed connector between boxes on desktop, aligned to box center */
.how-steps::before {
	content: '';
	position: absolute;
	top: 90px;
	left: 12%; right: 12%;
	height: 1px;
	background: repeating-linear-gradient(to right, rgba(10,10,10,.22) 0, rgba(10,10,10,.22) 6px, transparent 6px, transparent 14px);
	z-index: 0;
	display: none;
}
@media (min-width: 1024px) { .how-steps::before { display: block; } }

.how-step {
	position: relative; z-index: 1;
	text-align: center;
	display: flex; flex-direction: column; align-items: center;
	gap: 1.25rem;
}

/* Visual anchor box */
.how-step__box {
	position: relative;
	width: 180px; height: 180px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-2xl);
	box-shadow: var(--sh-card);
	display: grid; place-items: center;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.how-step:hover .how-step__box {
	transform: translateY(-6px);
	box-shadow: var(--sh-pop);
	border-color: var(--yellow);
}

/* Huge coloured numeral */
.how-step__num {
	font-family: var(--font-display);
	font-size: clamp(6rem, 8vw, 8.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.05em;
	color: var(--yellow);
	transition: transform .25s var(--ease);
}
.how-step:hover .how-step__num { transform: scale(1.06); }

/* Dark icon badge, floating on the top-right corner */
.how-step__badge {
	position: absolute;
	top: -14px; right: -14px;
	width: 52px; height: 52px;
	background: var(--ink);
	color: var(--yellow);
	border-radius: 14px;
	display: grid; place-items: center;
	box-shadow: var(--sh-cta);
	transition: transform .25s var(--ease);
}
.how-step:hover .how-step__badge { transform: rotate(-6deg) scale(1.08); }
.how-step__badge svg { width: 22px; height: 22px; }

.how-step__title {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -.01em;
}
.how-step__body {
	margin: 0;
	color: var(--ink-soft);
	font-size: .95rem;
	line-height: 1.6;
	max-width: 24ch;
	margin-inline: auto;
}

@media (max-width: 699px) {
	.how-step__box { width: 160px; height: 160px; }
	.how-step__num { font-size: 5.5rem; }
}

/* =========================================================
   HOME §  Stats section (dark)
   ========================================================= */
.stats-section { padding-block: clamp(3rem, 5vw, 4rem); }

/* =========================================================
   HOME §  Why Avalon (2-col image + points + floating badges)
   ========================================================= */
.why-dam { padding-block: clamp(4rem, 7vw, 6rem); }
.why-dam__grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .why-dam__grid { grid-template-columns: 1fr 1.1fr; gap: 5rem; } }
.why-dam__media { position: relative; margin: 0; }
.why-dam__img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-xl); }
.why-dam__floating {
	position: absolute;
	background: var(--white);
	color: var(--ink);
	padding: 1rem 1.3rem;
	border-radius: var(--radius);
	box-shadow: var(--sh-pop);
	display: flex; align-items: center; gap: .8rem;
	font-size: .82rem; line-height: 1.3;
	max-width: 220px;
}
.why-dam__floating--badge { top: 1.5rem; left: -1rem; }
.why-dam__floating--stat  { bottom: 1.5rem; right: -1rem; flex-direction: column; align-items: flex-start; gap: .3rem; text-align: left; }
@media (min-width: 900px) {
	.why-dam__floating--badge { left: -2rem; }
	.why-dam__floating--stat  { right: -2rem; }
}
.why-dam__tick {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	background: var(--yellow); color: var(--ink); border-radius: 50%;
	font-size: 1rem; font-weight: 800; flex-shrink: 0;
}
.why-dam__stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.why-dam__stat-sub { font-size: .78rem; text-transform: uppercase; letter-spacing: var(--ls-tight); color: var(--muted); line-height: 1.3; }

.why-dam__content h2 { margin: .4rem 0 1rem; }
.why-dam__content .lead { margin-bottom: 2rem; }
.why-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
.why-point { display: flex; gap: 1rem; align-items: flex-start; }
.why-point__dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--yellow);
	flex-shrink: 0;
	margin-top: .5rem;
	box-shadow: 0 0 0 4px var(--yellow-soft);
}
.why-point__title { margin: 0 0 .35rem; font-size: 1.1rem; }
.why-point__body { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* =========================================================
   HOME §  Before / After
   ========================================================= */
.ba-section { padding-block: clamp(4rem, 7vw, 6rem); }
.ba-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ba-grid { grid-template-columns: repeat(3, 1fr); } }
.ba-card { background: var(--white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--sh-card); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.ba-card:hover { transform: translateY(-6px); box-shadow: var(--sh-pop); }
.ba-card__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--white); position: relative; }
.ba-card__half { position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden; }
.ba-card__half img { width: 100%; height: 100%; object-fit: cover; }
.ba-card__tag {
	position: absolute; top: .8rem; left: .8rem; z-index: 2;
	background: rgba(0,0,0,.85); color: #fff;
	padding: .35rem .7rem;
	font-size: .68rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: var(--ls-tight);
}
.ba-card__tag--after { background: var(--white); color: var(--ink); }
.ba-card__ph { background: linear-gradient(160deg, #4a4a4a, #2a2a2a); height: 100%; }
.ba-card__ph--clean { background: linear-gradient(160deg, #efeae0, #d9d2c3); }
.ba-card__foot { padding: 1.25rem 1.5rem 1.5rem; }
.ba-card__label { margin: 0 0 .2rem; font-size: 1.1rem; }
.ba-card__caption { margin: 0; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: var(--ls-tight); }

/* =========================================================
   HOME §  Reviews (single-card carousel)
   ========================================================= */
.reviews-section {
	position: relative; overflow: hidden;
	background:
		radial-gradient(60% 70% at 12% 0%, rgba(255,255,255,.06), transparent 65%),
		radial-gradient(55% 65% at 92% 100%, rgba(255,255,255,.04), transparent 65%),
		linear-gradient(160deg, #1a1a1a 0%, var(--bg-deep) 55%, #050505 100%);
	color: var(--accent-ink);
	padding-block: clamp(4rem, 7vw, 6rem);
}
.reviews-section::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image:
		radial-gradient(circle at 22% 28%, rgba(255,255,255,.18) 0 1.2px, transparent 1.6px),
		radial-gradient(circle at 78% 18%, rgba(255,255,255,.16) 0 1.4px, transparent 1.8px),
		radial-gradient(circle at 88% 78%, rgba(255,255,255,.14) 0 1px, transparent 1.4px),
		radial-gradient(circle at 14% 82%, rgba(255,255,255,.16) 0 1.2px, transparent 1.6px);
	background-size: 280px 280px, 320px 320px, 260px 260px, 300px 300px;
	opacity: .5;
}
.reviews-section > .container { position: relative; z-index: 1; }
.reviews-section .section-head h2, .reviews-section .section-head__sub { color: var(--accent-ink); }
.reviews-section .eyebrow { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.2); }

.reviews {
	position: relative;
	max-width: 900px;
	margin-inline: auto;
	padding: 0 3.5rem;
}
.reviews__viewport { overflow: hidden; position: relative; min-height: 280px; }
.reviews__track { list-style: none; margin: 0; padding: 0; position: relative; }
.review-slide {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden;
	transition: opacity .35s var(--ease);
}
.review-slide.is-active { opacity: 1; visibility: visible; position: relative; }
.review-card {
	position: relative;
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--radius-xl);
	padding: 40px 34px 30px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/* Tight, soft lift (negative spread) so the shadow doesn't pool into a
	   weird dark blob against the charcoal section. */
	box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .7);
}
.review-card__mark {
	position: absolute;
	top: 12px; right: 24px;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 700;
	font-size: 90px;
	line-height: 1;
	color: rgba(255,255,255,.18);
	pointer-events: none;
	user-select: none;
}
.review-card__quote {
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	line-height: 1.55;
	color: rgba(255,255,255,.92);
	margin: 0 0 24px;
	quotes: none;
}
.review-card__foot {
	display: flex; align-items: center;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.1);
}
.review-card__avatar {
	display: inline-grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--white); color: var(--ink);
	font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
	flex-shrink: 0;
}
.review-card__name { font-weight: 700; font-size: 15px; }
.review-card__loc { font-size: 12.5px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: var(--ls-tight); }

.reviews__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	color: #fff; font-size: 1.5rem; line-height: 1;
	display: inline-grid; place-items: center;
	transition: background .25s, border-color .25s, transform .25s;
	z-index: 3;
	backdrop-filter: blur(8px);
}
.reviews__arrow:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); transform: translateY(-50%) scale(1.05); }
.reviews__arrow--prev { left: -8px; }
.reviews__arrow--next { right: -8px; }
@media (max-width: 768px) {
	.reviews { padding: 0 2.5rem; }
	.reviews__arrow { width: 44px; height: 44px; }
	.review-card { padding: 32px 24px 24px; }
	.review-card__mark { font-size: 70px; top: 8px; right: 16px; }
}

/* Carousel dots — a real 32px tap target with a pseudo-element dot inside,
   so the visible pill never distorts into an oval regardless of viewport. */
.reviews__dots,
.gallery-carousel__dots {
	display: flex; justify-content: center; align-items: center; gap: 4px;
	list-style: none; padding: 0; margin: 28px 0 0;
}
.reviews__dots li,
.gallery-carousel__dots li { display: flex; list-style: none; }
.reviews__dots button,
.gallery-carousel__dots button {
	width: 32px; height: 32px;
	display: grid; place-items: center;
	background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.reviews__dots button::before,
.gallery-carousel__dots button::before {
	content: ''; display: block;
	width: 8px; height: 8px;
	border-radius: 999px;
	background: rgba(255,255,255,.28);
	transition: width .3s var(--ease), background .3s var(--ease);
}
.reviews__dots button:hover::before,
.gallery-carousel__dots button:hover::before { background: rgba(255,255,255,.55); }
.reviews__dots button.is-active::before,
.gallery-carousel__dots button.is-active::before {
	width: 26px;
	background: var(--yellow);
}

/* =========================================================
   HOME — "A closer look" gallery carousel (light section)
   ========================================================= */
.gallery-carousel {
	background: var(--bg-soft);
	overflow: hidden;
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.gallery-carousel__wrap { position: relative; margin-top: .5rem; }

/* Horizontal scroll-snap filmstrip */
.gallery-carousel__track {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 8px var(--gc-edge, 28px) 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	--gc-edge: max(28px, calc((100vw - var(--container)) / 2 + 28px));
}
.gallery-carousel__track::-webkit-scrollbar { display: none; }
.gallery-carousel__slide {
	flex: 0 0 auto;
	width: clamp(240px, 26vw, 330px);
	scroll-snap-align: center;
	list-style: none;
}

.gallery-card {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--sh-card);
	background: var(--ink);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gallery-card:hover, .gallery-card:focus-visible { transform: translateY(-4px); box-shadow: var(--sh-pop); }
.gallery-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery-card:hover .gallery-card__img { transform: scale(1.06); }
.gallery-card__label {
	position: absolute; inset: auto 0 0 0;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
	padding: 48px 18px 18px;
	color: #fff;
	background: linear-gradient(transparent, rgba(5,6,8,.82));
}
.gallery-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.25; letter-spacing: -.01em; }
.gallery-card__cta {
	display: inline-flex; align-items: center; gap: 5px;
	flex-shrink: 0;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--yellow);
	opacity: 0; transform: translateY(6px);
	transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.gallery-card__cta svg { width: 13px; height: 13px; }
.gallery-card:hover .gallery-card__cta, .gallery-card:focus-visible .gallery-card__cta { opacity: 1; transform: none; }

/* Arrows — dark, on the light section; hidden on touch where users swipe */
.gallery-carousel__arrow {
	position: absolute; top: calc(50% - 12px); transform: translateY(-50%);
	z-index: 3;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--white); color: var(--ink);
	border: 1px solid var(--line);
	display: grid; place-items: center;
	box-shadow: var(--sh-lift);
	transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.gallery-carousel__arrow:hover { background: var(--ink); color: var(--yellow); }
.gallery-carousel__arrow:active { transform: translateY(-50%) scale(.92); }
.gallery-carousel__arrow svg { width: 20px; height: 20px; }
.gallery-carousel__arrow--prev { left: 16px; }
.gallery-carousel__arrow--next { right: 16px; }
.gallery-carousel__arrow[hidden] { display: none; }

/* Dots — dark treatment for the light section (overrides the shared white) */
.gallery-carousel__dots { margin-top: 8px; }
.gallery-carousel__dots button::before { background: rgba(10,10,10,.22); }
.gallery-carousel__dots button:hover::before { background: rgba(10,10,10,.4); }
.gallery-carousel__dots button.is-active::before { background: var(--yellow); }

@media (max-width: 767px) {
	.gallery-carousel { padding-bottom: clamp(2rem, 6vw, 2.75rem); }
	.gallery-carousel__slide { width: clamp(210px, 66vw, 260px); }
	.gallery-carousel__track { gap: 14px; padding: 6px 20px 18px; --gc-edge: 20px; }
	.gallery-carousel__arrow { display: none; }  /* swipe on mobile */
	.gallery-card__cta { opacity: 1; transform: none; } /* no hover on touch */
}

/* =========================================================
   HOME §  Service areas (2-col: content + map)
   ========================================================= */
.areas-section { padding-block: clamp(4rem, 7vw, 6rem); }
.areas-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .areas-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.areas-content h2 { margin: .4rem 0 1rem; }
.areas-pills { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 2rem 0 0; }
.areas-pills { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.areas-pills li { list-style: none; }
.areas-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 14px 9px 12px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
	cursor: default;
}
.areas-pill__icon { width: 14px; height: 14px; color: var(--yellow-deep); transition: color .2s var(--ease), transform .2s var(--ease); flex-shrink: 0; }
.areas-pill:hover {
	background: var(--ink); color: var(--bg); border-color: var(--ink);
	transform: translateY(-2px);
	box-shadow: var(--sh-lift);
}
.areas-pill:hover .areas-pill__icon { color: var(--yellow); transform: scale(1.15); }
.areas-map { aspect-ratio: 4/3; background: var(--bg-soft); overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--sh-pop); }
.areas-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.areas-map__ph { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, var(--bg-soft), var(--bg-soft) 20px, var(--line-soft) 20px, var(--line-soft) 21px); }

/* =========================================================
   HOME §  Final CTA (2-col with social-proof card)
   ========================================================= */
.final-cta {
	position: relative;
	background: var(--ink);
	color: var(--bg);
	padding-block: clamp(4rem, 8vw, 6rem);
	overflow: hidden;
}
.final-cta::before {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(ellipse 60% 80% at 90% 10%, rgba(255,255,255,.06), transparent 60%);
	pointer-events: none;
}
.final-cta__grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) { .final-cta__grid { grid-template-columns: 1.15fr .85fr; gap: 4rem; } }
.final-cta__content h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 3rem); margin: .5rem 0 1rem; }
.final-cta__lead { color: rgba(255,255,255,.9); font-size: 1.15rem; margin-bottom: .5rem; }
.final-cta__body { color: rgba(255,255,255,.7); max-width: 520px; margin-bottom: 2rem; }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin-bottom: 2rem; }
.final-cta__phone { display: inline-flex; flex-direction: column; color: rgba(255,255,255,.75); line-height: 1.2; }
.final-cta__phone span { font-size: .75rem; text-transform: uppercase; letter-spacing: var(--ls-tight); color: rgba(255,255,255,.5); }
.final-cta__phone strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: #fff; }
.final-cta__phone:hover strong { color: var(--bg); text-decoration: underline; text-underline-offset: 4px; }

.final-cta__pills { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
.final-cta__pills li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: rgba(255,255,255,.85); }
.final-cta__tick { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--yellow); color: var(--ink); border-radius: 50%; font-size: .7rem; font-weight: 800; flex-shrink: 0; }

.final-cta__visual { position: relative; min-height: 340px; display: none; }
@media (min-width: 900px) { .final-cta__visual { display: block; } }
.final-cta__badge {
	position: absolute; top: 0; right: 0;
	background: var(--bg);
	color: var(--ink);
	padding: 1.5rem 1.75rem;
	border-radius: var(--radius);
	box-shadow: var(--sh-pop);
	text-align: center;
	transform: rotate(2deg);
	z-index: 2;
}
.final-cta__badge-num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.final-cta__badge-num span { font-size: 1.5rem; opacity: .6; }
.final-cta__badge-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: var(--ls-tight); color: var(--muted); margin-top: .5rem; line-height: 1.3; }

.final-cta__card {
	position: absolute; top: 4rem; left: 0; right: 3rem;
	background: var(--bg);
	color: var(--ink);
	padding: 2rem 1.75rem 1.5rem;
	border-radius: var(--radius);
	box-shadow: var(--sh-pop);
	z-index: 1;
}
.final-cta__card-mark { position: absolute; top: -.4rem; left: 1rem; font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--line); }
.final-cta__card-quote { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.5; font-weight: 400; margin: 0 0 1.25rem; color: var(--ink); }
.final-cta__card-foot { display: flex; align-items: center; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.final-cta__card-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bg); font-family: var(--font-display); font-weight: 500; }
.final-cta__card-name { font-weight: 600; font-size: .95rem; }
.final-cta__card-loc { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: var(--ls-tight); }

.final-cta__chip {
	position: absolute;
	background: rgba(250,247,241,.12);
	color: #fff;
	padding: .6rem 1rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 500;
	display: inline-flex; align-items: center; gap: .5rem;
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.15);
}
.final-cta__chip--licensed { bottom: 3rem; left: 1rem; }
.final-cta__chip--since    { bottom: 0; right: 4rem; }
.final-cta__chip span { color: rgba(255,255,255,.7); }

/* =========================================================
   Reveal-on-scroll (opt-in via [data-reveal])
   ========================================================= */
/* Only hide when JS is present to un-hide it — otherwise a JS failure or a
   crawler without scripting would see permanently blank sections. */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1; transform: none; transition: none; }
	.trust-marquee__track { animation: none; }
}

/* =========================================================
   MOBILE REFINEMENT PASS  (≤767px)
   The desktop rhythm stacks into ~18 screens of scroll on a phone.
   Tighten section padding, pair up 1-col grids, shorten tall media,
   and make sure every control clears a 44px tap target.
   ========================================================= */
@media (max-width: 767px) {

	/* --- Global rhythm: 64px min → 44px --- */
	:root { --section-y: clamp(2.75rem, 7vw, 4rem); }
	.section { padding-block: var(--section-y); }
	.section--intro,
	.section--services,
	.section--featured,
	.how-it-works,
	.why-dam,
	.ba-section,
	.reviews-section,
	.areas-section,
	.sv-rows-section,
	.ct-section,
	.ct-faq-section,
	.ab-story-section { padding-block: clamp(2.75rem, 7vw, 4rem); }
	.section-head { margin-bottom: 2rem; }
	.section-head__sub { font-size: .98rem; }

	/* --- Hero: 1379px → ~740px --- */
	.hero {
		min-height: 0;
		padding-block: clamp(2.5rem, 8vw, 3.5rem) clamp(2.5rem, 8vw, 3.5rem);
	}
	.hero__grid { gap: 28px; }
	/* hero title size comes from --fs-h1 (its own clamp handles mobile) */
	.hero__sub { font-size: 1rem; margin-bottom: 1.25rem; }
	.hero__ctas .btn { flex: 1 1 100%; }
	/* Hide hero buttons on mobile so the quote form is the first thing after
	   the copy — the buttons just push the form below the fold on a phone. */
	.hero__ctas { display: none; }
	.hero__sub { margin-bottom: 0; }
	.quote-card { padding: 22px 20px; border-radius: var(--radius-xl); }
	.quote-card__title { font-size: 1.2rem; }

	/* --- 1-col grids that read better as 2-up --- */
	.how-steps { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
	.how-step__box { width: 100%; max-width: 150px; height: 130px; border-radius: var(--radius-xl); }
	.how-step__num { font-size: 3.6rem; }
	.how-step__badge { width: 42px; height: 42px; top: -10px; right: -10px; border-radius: 12px; }
	.how-step__badge svg { width: 18px; height: 18px; }
	.how-step__title { font-size: 1.05rem; }
	.how-step__body { font-size: .88rem; max-width: none; }

	.stats-strip { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; text-align: left; }
	.stat { padding: 0; }
	.stat__num { font-size: clamp(2rem, 9vw, 2.6rem); }
	.stat__num::before { margin-inline: 0; }
	.stat__label { font-size: .74rem; margin-inline: 0; }

	.ab-credentials__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
	.ab-pillars { grid-template-columns: 1fr 1fr; gap: 14px; }
	.ab-pillar { padding: 22px 18px; }
	.ab-pillar__num { font-size: 3rem; top: 4px; right: 12px; }
	.ab-pillar h4 { font-size: 1rem; }
	.ab-pillar p { font-size: .87rem; }

	/* --- Shorter media so images don't own the screen --- */
	.why-dam__img,
	.ab-story__img { aspect-ratio: 4 / 3; }
	.why-dam__grid,
	.ab-story { gap: 2rem; }
	.sv-row__media,
	.svc-card__media { aspect-ratio: 16 / 10; }
	.fp-card__media { aspect-ratio: 3 / 2; }
	.areas-map { aspect-ratio: 1 / 1; }
	.project-gallery { gap: 10px; }

	/* Floating badges crowd a narrow column — pull them inside the frame */
	.why-dam__floating--badge { top: 10px; left: 10px; }
	.why-dam__floating--stat  { bottom: 10px; right: 10px; }
	.why-dam__floating { padding: 10px 12px; font-size: .74rem; max-width: 160px; }
	.ab-story__badge { padding: 14px 16px; min-width: 0; }
	.ab-story__badge-num { font-size: 1.5rem; }

	/* --- Services rows: 5237px → ~3400px --- */
	.sv-row { padding-block: clamp(2rem, 6vw, 3rem); gap: 1.75rem; }
	.sv-row__title { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
	.sv-row__desc { font-size: .98rem; }
	.sv-row__bullets { gap: 10px; margin-bottom: 1.5rem; }
	.sv-row__bullets li { font-size: .9rem; }
	.sv-row__ph-num { font-size: 3.5rem; bottom: 14px; right: 16px; }
	.sv-row__ph-icon { width: 72px; height: 72px; border-radius: 18px; }
	.sv-row__ph-icon svg { width: 34px; height: 34px; }

	/* --- Cards: trim internal padding --- */
	.svc-card__body { padding: 24px 20px 22px; }
	.svc-card__deco { font-size: 3.2rem; top: 14px; right: 18px; }
	.fp-card__body { padding: 18px 18px 20px; }
	.ba-card__foot { padding: 16px 18px; }
	.ab-mv__card { padding: 26px 22px 24px; }
	.ct-form-wrap { padding: 24px 20px; }
	.ct-info { padding: 24px 20px; }
	/* Meta cards 2-up instead of a 4-high stack */
	.project-meta-cards { gap: 12px; }
	.project-meta-card { flex: 1 1 calc(50% - 6px); padding: 14px 16px; }
	.project-meta-card__label { font-size: 10.5px; letter-spacing: .1em; }
	.project-meta-card__value { font-size: 1rem; }
	.project-meta-rail { margin-top: -2rem; }
	.project-hero { min-height: 0; padding-block: clamp(3rem, 10vw, 4.5rem) clamp(4rem, 12vw, 5.5rem); }
	.project-hero__title { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
	.project-hero__summary { font-size: 1rem; }
	.related-header { margin-bottom: 2rem; }

	/* --- Reviews --- */
	.reviews { padding: 0 2.25rem; }
	.review-card__quote { font-size: 1.02rem; }

	/* --- Final CTA / phone banners stack cleanly --- */
	.final-cta__pills { grid-template-columns: 1fr; }
	.final-cta__actions { gap: 1rem; }
	.ct-phone-banner__inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
	.ct-phone-banner__inner > div:last-child { width: 100%; }
	.ct-phone-banner__inner .btn { flex: 1 1 100%; }

	/* --- Tap targets: everything interactive clears 44px --- */
	.btn--link {
		display: inline-flex; align-items: center;
		min-height: 44px;
		padding-block: 10px;
	}
	.btn--sm { padding: 13px 20px; }
	.project-hero__crumbs a { display: inline-flex; align-items: center; min-height: 34px; }
	.site-footer__list a { min-height: 34px; }
	/* Hero CTAs are hidden on mobile (see below) so the quote form leads;
	   dots already carry a 32px tap target from the base rule. */

	/* --- Nothing below 11px --- */
	.intro-stats__badge-tick { font-size: 11px; }
	.ba-card__tag { font-size: 11px; }
	.fp-card__chip,
	.filter-pill__count,
	.project-meta-card__label,
	.ct-info__badge,
	.quote-card__badge { font-size: 11px; }
}

/* ---------- Utility ---------- */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.divider { display: inline-block; width: 40px; height: 1px; background: currentColor; opacity: .35; margin: 0 .5em; vertical-align: middle; }

/* ============================================================
 * Dial A Mover brand palette — overrides Avalon's cream/yellow.
 * Keeps every relationship (spacing, shadows, radii, type scale);
 * only the colour values change to DAM's blue + gold on white.
 * ============================================================ */
:root {
	--ink:        #03303e;   /* deep teal — from the logo */
	--ink-soft:   #365863;
	--muted:      #5b6b72;
	--line:       #dbe4ee;
	--line-soft:  #eaf0f6;
	--bg:         #ffffff;
	--bg-soft:    #eff2ff;   /* DAM pale-blue tint */
	--bg-deep:    #03303e;
	--white:      #ffffff;
	--accent-ink: #03303e;   /* text on gold buttons */

	--yellow:        #f4b400; /* DAM gold — primary CTA */
	--yellow-bright: #ffc63a;
	--yellow-deep:   #c98f00;
	--yellow-soft:   rgba(244,180,0,.10);
	--yellow-ring:   rgba(244,180,0,.35);

	--blue:      #38b6ff;    /* DAM sky — links / secondary accent */
	--blue-deep: #1b7eae;

	--accent: var(--yellow);
}

/* ============================================================
 * Desktop nav dropdowns (Avalon's menu was flat; DAM needs
 * Services + Locations dropdowns like Tidii). Scoped to
 * .site-nav__list so the mobile drawer keeps static submenus.
 * ============================================================ */
.site-nav__list { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }

/* caret on parents */
.site-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .55;
	transition: transform var(--dur-quick) var(--ease);
}
.site-nav__list .menu-item-has-children:hover > a::after { transform: translateY(0) rotate(225deg); opacity: .9; }

/* the dropdown panel */
.site-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 244px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--sh-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease), visibility var(--dur-quick);
	z-index: 70;
}
/* bridge the 8px gap so hover doesn't drop */
.site-nav__list .menu-item-has-children::before {
	content: "";
	position: absolute;
	top: 100%; left: 0; right: 0; height: 10px;
	display: none;
}
.site-nav__list .menu-item-has-children:hover::before { display: block; }

.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.site-nav__list .sub-menu li { position: relative; }
.site-nav__list .sub-menu a {
	display: block;
	white-space: nowrap;
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	font-size: .95rem;
}
.site-nav__list .sub-menu a:hover { background: var(--yellow-soft); color: var(--ink); }

/* Locations mega-dropdown — 4 columns, right-aligned to stay in viewport */
.site-nav__list .mega--locations > .sub-menu {
	left: auto;
	right: 0;
	width: min(660px, 88vw);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px 6px;
	padding: 12px;
}
.site-nav__list .mega--locations > .sub-menu a { padding: 8px 10px; }

/* Locations mega — wide, flowing into 1–2 lines (overrides the 4-col grid) */
.site-nav__list .mega--locations > .sub-menu {
	left: auto;
	right: 0;
	width: max-content;
	max-width: min(880px, 92vw);
	display: flex;
	flex-wrap: wrap;
	gap: 2px 2px;
	grid-template-columns: none;
}
.site-nav__list .mega--locations > .sub-menu li { flex: 0 0 auto; }
.site-nav__list .mega--locations > .sub-menu a { white-space: nowrap; }

/* Locations mega — VERTICAL columns (fills top-to-bottom, not across).
   Overrides the earlier horizontal flex layout. */
.site-nav__list .mega--locations > .sub-menu {
	display: block;
	column-count: 2;
	column-gap: 10px;
	width: 380px;
	max-width: 92vw;
	grid-template-columns: none;
	flex-wrap: nowrap;
}
.site-nav__list .mega--locations > .sub-menu li {
	display: block;
	break-inside: avoid;
}

/* ============================================================
 * Dial A Mover — brand corrections
 * Accent: BLUE (not gold). Header: white. Footer: dark navy.
 * ============================================================ */
:root {
	--yellow:        #38b6ff;              /* accent base — DAM sky blue */
	--yellow-bright: #5ec4ff;
	--yellow-deep:   #1b7eae;
	--yellow-soft:   rgba(56,182,255,.10);
	--yellow-ring:   rgba(56,182,255,.35);
	--accent:        var(--yellow);
	--accent-ink:    #ffffff;              /* white text on blue */
}

/* Header — white, not cream */
.site-header { background: rgba(255,255,255,.94); border-bottom-color: var(--line); }
.site-header.is-scrolled { background: rgba(255,255,255,.98); border-bottom-color: var(--line); }

/* Footer — dark navy (NOT blue), light text */
.site-footer { background: var(--bg-deep); color: rgba(255,255,255,.72); }
.site-footer__heading { color: #ffffff; }
.site-footer__tagline,
.site-footer__list a,
.site-footer__contact,
.site-footer__contact span { color: rgba(255,255,255,.75); }
.site-footer__contact a { color: rgba(255,255,255,.90); }
.site-footer__list a:hover,
.site-footer__contact a:hover { color: #ffffff; }
.site-footer__col--contact {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
}
.site-footer__trust { border-top-color: rgba(255,255,255,.12); border-bottom-color: rgba(255,255,255,.12); }
.site-footer__trust span { color: rgba(255,255,255,.82); }
.site-footer__bar { border-top-color: rgba(255,255,255,.12); }
.site-footer__bar p { color: rgba(255,255,255,.58); }
.site-footer__bar a { color: rgba(255,255,255,.72); border-bottom-color: rgba(255,255,255,.3); }
.site-footer__bar a:hover { color: #ffffff; border-bottom-color: #ffffff; }
/* social icons on dark */
.site-footer__social a { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.15); }
.site-footer__social a:hover { background: var(--accent); color: var(--accent-ink); }

/* Dark background = BLACK/charcoal, never navy or blue.
   Blue stays accent-only. */
:root { --bg-deep: #16181c; }
.site-footer { background: #16181c; }

/* Footer: LIGHT (final) — per client, background is light, never navy/dark.
   Blue stays accent-only. Overrides the earlier dark-footer attempts. */
.site-footer { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); color: var(--ink-soft); }
.site-footer__heading { color: var(--ink); }
.site-footer__tagline { color: var(--ink-soft); }
.site-footer__list a { color: var(--ink-soft); }
.site-footer__list a:hover { color: var(--ink); }
.site-footer__contact, .site-footer__contact span { color: var(--ink-soft); }
.site-footer__contact a { color: var(--ink); }
.site-footer__col--contact { background: var(--white); border: 1px solid var(--line); }
.site-footer__trust { border-top-color: var(--line); border-bottom-color: var(--line); }
.site-footer__trust span { color: var(--ink-soft); }
.site-footer__bar { border-top-color: var(--line); }
.site-footer__bar p { color: var(--muted); }
.site-footer__bar a { color: var(--muted); border-bottom-color: rgba(10,10,10,.3); }
.site-footer__bar a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.site-footer__social a { background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line); }
.site-footer__social a:hover { background: var(--accent); color: var(--accent-ink); }

/* Get in touch card — fix cramped phone/email spacing + white-on-hover bug */
.site-footer__col--contact .site-footer__address {
	font-style: normal;
	line-height: 1.6;
	margin: 0 0 16px;
}
.site-footer__col--contact .site-footer__contact {
	margin: 0 0 20px;
	line-height: 1.4;
}
.site-footer__col--contact .site-footer__contact a {
	display: inline-block;
	color: var(--ink);
	padding: 3px 0;
}
.site-footer__col--contact .site-footer__contact a:hover {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Primary CTA button — blue with WHITE text (renamed from btn--yellow) */
.btn--blue { color: #ffffff; border-color: var(--yellow); }
.btn--blue:hover, .btn--blue:focus-visible { color: #ffffff; }

/* ---- Suburb typeahead ---- */
.dam-lf__ac { position: relative; }

.dam-lf__ac-list {
	position: absolute;
	z-index: 40;
	top: calc(100% + .35rem);
	left: 0;
	right: 0;
	max-height: 17rem;
	overflow-y: auto;
	margin: 0;
	padding: .3rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 18px 44px -14px rgba(3, 48, 62, .4);
}
.dam-lf__ac-list[hidden] { display: none; }

.dam-lf__ac-item {
	padding: .6rem .75rem;
	font-size: .95rem;
	color: var(--ink);
	border-radius: 9px;
	cursor: pointer;
}
.dam-lf__ac-item:hover,
.dam-lf__ac-item.is-active {
	background: rgba(56,182,255,.10);
	color: var(--blue-deep);
}

/* Portaled typeahead: the list is moved to <body> to escape the hero's
   overflow:hidden clip, so it must position against the viewport. */
.dam-lf__ac-list--portal {
	position: fixed;
	top: 0;
	left: 0;
	right: auto;
	z-index: 9999;
}

/* ============================================================
 * /get-a-quote/ page
 * ============================================================ */
.quote-page { padding: clamp(3rem,6vw,5.5rem) 0; background: #f3ede1; }
.quote-page__inner { width: min(100%, 1076px); margin-inline: auto; }
.quote-page__head { text-align: center; margin-bottom: 2rem; }
.quote-page__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); margin: 0 0 .5rem; }
.quote-page__title { margin: 0 0 .6rem; }
.quote-page__intro { color: var(--muted); max-width: 60ch; margin: 0 auto; }
.quote-page__card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	box-shadow: var(--sh-card);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}
.quote-form--full .quote-field { margin-bottom: 1.1rem; }
.quote-form--full .quote-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .quote-form--full .quote-field--row { grid-template-columns: 1fr; } }
.quote-msg { margin: .75rem 0 0; text-align: center; font-size: .92rem; }
.quote-msg.is-error { color: #b32e2a; font-weight: 600; }
.quote-done { text-align: center; padding: 1.5rem .5rem; }
.quote-done__tick { width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 999px; background: var(--blue); color: #fff; font-size: 1.6rem; display: grid; place-items: center; }
.quote-done h3 { margin: 0 0 .5rem; }
.quote-done p { color: var(--muted); margin: 0; }
.quote-page__callout { text-align: center; margin-top: 1.5rem; color: var(--muted); }
.quote-page__callout a { font-weight: 700; color: var(--blue-deep); }

/* Honeypot — visually removed (bots fill it, humans never see it) */
.dam-lf__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- /get-a-quote/ hero ---- */
.qhero { padding: clamp(2.5rem,5vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem); background: #fff; }
.qhero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
@media (max-width: 900px) { .qhero__grid { grid-template-columns: 1fr; } }
.qhero__title { margin: 0 0 1rem; }
.qhero__sub { color: var(--ink-soft); max-width: 52ch; margin: 0 0 1.5rem; font-size: 1.08rem; }
.qhero__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 1.25rem; padding: 0; }
.qhero__badges li { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; color: var(--ink); }
.qhero__badges svg { color: var(--blue); flex: 0 0 auto; }
.qhero__reviews { display: flex; flex-wrap: wrap; gap: 1rem; }
.qhero__review { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; background: var(--white); border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; }
.qhero__review svg { color: var(--blue); }
.qhero__review strong { font-size: 1.05rem; }
.qhero__stars { color: #f5a623; letter-spacing: 1px; }
.qhero__review-src { color: var(--muted); }
.qhero__media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--sh-lift); }

/* ---- quote form structure ---- */
.quote-subhead { margin: 1.5rem 0 .75rem; font-size: 1.05rem; }
.quote-form--full .quote-field--row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .quote-form--full .quote-field--row3 { grid-template-columns: 1fr; } }
.quote-toggle { display: inline-flex; align-items: center; gap: .6rem; margin: 1.25rem 0 .5rem; font-weight: 600; cursor: pointer; }
.quote-toggle input { width: 18px; height: 18px; accent-color: var(--blue); }
.quote-more { padding-top: .5rem; }
.quote-sublabel { margin: 0 0 .6rem; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.quote-checks { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.1rem; }
.quote-check { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.quote-check input { width: 18px; height: 18px; accent-color: var(--blue); }

/* Dark sections use charcoal, never teal/navy (--ink is teal). */
.stats, .reviews, .final-cta, .section--dark { background: var(--bg-deep) !important; }

/* Service card with photo (matches live) */
.svc-card--photo { overflow: hidden; padding-top: 0; }
.svc-card__media { margin: -1px -1px 0; aspect-ratio: 16 / 10; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.svc-card--photo:hover .svc-card__media img { transform: scale(1.05); }
.svc-card--photo .svc-card__icon { width: 44px; height: 44px; margin-top: -32px; position: relative; background: var(--white); border-radius: 12px; box-shadow: var(--sh-card); display: grid; place-items: center; }
.svc-card--photo .svc-card__icon svg { width: 22px; height: 22px; color: var(--blue); }
.svc-card--photo .svc-card__deco { display: none; }

/* Service photo cards — icon overlay top-left, number before the name */
.svc-card--photo .svc-card__media { position: relative; }
.svc-card--photo .svc-card__icon {
	position: absolute;
	top: 12px; left: 12px;
	margin: 0;
	width: 42px; height: 42px;
	background: var(--white);
	border-radius: 11px;
	box-shadow: 0 4px 12px rgba(3,48,62,.18);
	display: grid; place-items: center;
	z-index: 2;
}
.svc-card--photo .svc-card__icon svg { width: 22px; height: 22px; color: var(--blue); }
.svc-card--photo .svc-card__body { padding-top: 1.4rem; }
.svc-card--photo h3 { display: flex; align-items: baseline; gap: .1rem; }
.svc-card__num {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--blue);
	margin-right: .55rem;
}

/* ---- Service card fixes (icon contrast, button hover, number size, title link) ---- */
/* 1. Icon badge: white with a strong blue icon at rest; blue with white icon on hover */
.svc-card--photo .svc-card__icon { background: #ffffff !important; color: var(--blue-deep) !important; transform: none !important; }
.svc-card--photo .svc-card__icon svg { color: var(--blue-deep); }
.svc-card--photo:hover .svc-card__icon { background: var(--blue) !important; color: #ffffff !important; }
.svc-card--photo:hover .svc-card__icon svg { color: #ffffff; }

/* 2. CTA button text stays WHITE on hover */
.svc-card__cta:hover, .svc-card:hover .svc-card__cta { color: #ffffff !important; }
.svc-card__cta:hover svg { color: #ffffff; }

/* 3. Number smaller than the heading */
.svc-card--photo h3 { align-items: center; }
.svc-card__num { font-size: .72em; }

/* 4. Service-name link (descriptive SEO anchor) */
.svc-card__title-link { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
.svc-card__title-link:hover { color: var(--blue-deep); }

/* How-it-works — fit the grid + connector to the actual step count (was hardcoded 4) */
@media (min-width: 1024px) {
	.how-steps--3 { grid-template-columns: repeat(3, 1fr) !important; }
	.how-steps--3::before { left: 16.66%; right: 16.66%; }
	.how-steps--2 { grid-template-columns: repeat(2, 1fr) !important; }
	.how-steps--2::before { left: 25%; right: 25%; }
	.how-steps--1::before { display: none; }
}

/* =========================================================
   HOME §  New live-match sections (2026-08-28)
   Announcement bar · dual-CTA row · why-cares · CTA banners
   · founder story · blog strip · bottom quote form
   ========================================================= */

/* ---- Announcement bar (above header) ---- */
.announce-bar {
	background: var(--bg-deep);
	color: #fff;
	font-size: .82rem;
	letter-spacing: .04em;
}
.announce-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .55rem 0;
	text-align: center;
}
.announce-bar__stars { color: #f5a623; letter-spacing: 1px; flex: 0 0 auto; }
.announce-bar__text { font-weight: 600; text-transform: uppercase; }
@media (max-width: 560px) {
	.announce-bar { font-size: .72rem; }
	.announce-bar__text { text-transform: none; letter-spacing: .02em; }
}

/* ---- Dual CTA row (Book Move Now + Get a Quote [+ phone]) ---- */
.dam-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem 1.1rem;
	margin-top: 2rem;
}
.dam-cta-row__phone {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.15;
	text-decoration: none;
	margin-left: .25rem;
}
.dam-cta-row__phone span { font-size: .78rem; color: var(--muted); }
.dam-cta-row__phone strong { font-size: 1.15rem; color: var(--ink); letter-spacing: -.01em; }
.section--dark .dam-cta-row__phone span { color: rgba(255,255,255,.7); }
.section--dark .dam-cta-row__phone strong { color: #fff; }

/* ---- Why choose us — "Looking for a fast removalist that cares?" ---- */
.why-cares__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 900px) { .why-cares__grid { grid-template-columns: .95fr 1.05fr; } }
.why-cares__media { position: relative; margin: 0; }
.why-cares__img {
	width: 100%;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
	border-radius: var(--radius-xl);
	box-shadow: var(--sh-lift);
	display: block;
}
.why-cares__img--ph {
	background: linear-gradient(135deg, var(--bg-soft), #e7edf1);
	position: relative;
}
.why-cares__img--ph::after {
	content: "Dial A Mover";
	position: absolute; inset: 0;
	display: grid; place-items: center;
	color: var(--blue-deep); font-weight: 700; letter-spacing: .02em; opacity: .5;
}
.why-cares__badge {
	position: absolute;
	right: -14px; bottom: -18px;
	background: var(--blue);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 1rem 1.2rem;
	box-shadow: var(--sh-lift);
	text-align: center;
	line-height: 1.1;
}
.why-cares__badge-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; display: block; }
.why-cares__badge-num span { font-size: 1.1rem; vertical-align: super; }
.why-cares__badge-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
@media (max-width: 560px) { .why-cares__badge { right: 12px; padding: .8rem 1rem; } }

.why-cares__sub { color: var(--ink-soft); font-size: 1.08rem; margin: .5rem 0 1.5rem; max-width: 46ch; }
.why-cares__list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 620px) { .why-cares__list { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; } }
.why-cares__item { display: flex; gap: .7rem; align-items: flex-start; }
.why-cares__tick {
	flex: 0 0 auto;
	width: 26px; height: 26px;
	border-radius: 999px;
	background: var(--yellow-soft);
	color: var(--blue-deep);
	display: grid; place-items: center;
	margin-top: 1px;
}
.why-cares__item-text { display: flex; flex-direction: column; }
.why-cares__item-text strong { color: var(--ink); font-weight: 600; font-size: 1rem; }
.why-cares__item-sub { color: var(--muted); font-size: .86rem; margin-top: .1rem; }

/* ---- CTA banners (charcoal, centered) ---- */
.cta-banner { position: relative; overflow: hidden; }
.cta-banner__deco {
	position: absolute; inset: 0;
	background:
		radial-gradient(60% 120% at 15% 0%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 60%),
		radial-gradient(50% 120% at 100% 100%, color-mix(in srgb, var(--yellow) 10%, transparent), transparent 55%);
	pointer-events: none;
}
.cta-banner__inner { position: relative; z-index: 1; max-width: 820px; margin-inline: auto; text-align: center; }
.cta-banner__heading { margin: .8rem 0 1rem; }
.cta-banner__lead { color: #fff; font-size: 1.2rem; font-weight: 600; margin: 0 0 1rem; }
.cta-banner__body { color: rgba(255,255,255,.78); font-size: 1.02rem; margin: 0 auto; max-width: 66ch; }
.cta-banner .dam-cta-row { justify-content: center; }

/* ---- Founder story ---- */
.story__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 900px) { .story__grid { grid-template-columns: 1fr 1.1fr; } }
.story__media { position: relative; margin: 0; }
.story__img {
	width: 100%;
	aspect-ratio: 4 / 3.6;
	object-fit: cover;
	border-radius: var(--radius-xl);
	box-shadow: var(--sh-lift);
	display: block;
}
.story__img--ph { background: linear-gradient(135deg, var(--bg-soft), #e7edf1); min-height: 320px; }
.story__est {
	position: absolute;
	left: -14px; top: 22px;
	background: var(--white);
	color: var(--ink);
	border-radius: var(--radius);
	padding: .7rem 1rem;
	box-shadow: var(--sh-lift);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	line-height: 1.1;
	text-align: center;
}
.story__est strong { display: block; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.01em; color: var(--blue-deep); }
@media (max-width: 560px) { .story__est { left: 10px; } }
.story__heading { margin: .6rem 0 1rem; }
.story__pull {
	border-left: 3px solid var(--blue);
	margin: 0 0 1.4rem;
	padding: .2rem 0 .2rem 1.1rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ink);
	font-style: italic;
}
.story__prose p { color: var(--ink-soft); margin: 0 0 1rem; }
.story__call { color: var(--ink-soft); margin: 0 0 1.2rem; }
.story__call a { font-weight: 700; color: var(--blue-deep); text-decoration: none; }
.story__sign { margin: 0 0 .5rem; }
.story__sign-name { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.story__sign-role { display: block; color: var(--muted); font-size: .9rem; }

/* ---- Blog strip — "Moving Tips and Tricks" ---- */
.blog-tips__grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 720px) { .blog-tips__grid { grid-template-columns: repeat(3, 1fr); } }
.tip-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--sh-card);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tip-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.tip-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.tip-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.tip-card:hover .tip-card__img { transform: scale(1.05); }
.tip-card__img--ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--bg-soft), #e7edf1); }
.tip-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem; flex: 1; }
.tip-card__date { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.tip-card__title { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.tip-card__title a { color: var(--ink); text-decoration: none; }
.tip-card__title a:hover { color: var(--blue-deep); }
.tip-card__excerpt { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; flex: 1; }
.tip-card__more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--blue-deep); text-decoration: none; }
.tip-card__more svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.tip-card__more:hover svg { transform: translateX(3px); }
.blog-tips__foot { text-align: center; margin-top: 2.5rem; }

/* ---- Bottom quote form (charcoal band, white card) ---- */
.quote-bottom { position: relative; overflow: hidden; }
.quote-bottom__deco {
	position: absolute; inset: 0;
	background: radial-gradient(55% 120% at 85% 0%, color-mix(in srgb, var(--yellow) 14%, transparent), transparent 60%);
	pointer-events: none;
}
.quote-bottom__inner { position: relative; z-index: 1; max-width: 780px; margin-inline: auto; }
.quote-bottom__head { text-align: center; margin-bottom: 1.8rem; }
.quote-bottom__title { margin: .7rem 0 .6rem; }
.quote-bottom__sub { color: rgba(255,255,255,.75); max-width: 56ch; margin: 0 auto; }
.quote-bottom__card {
	background: var(--white);
	border-radius: var(--radius-xl);
	box-shadow: var(--sh-lift);
	padding: clamp(1.4rem, 3vw, 2.5rem);
}
.quote-bottom__card .quote-subhead { color: var(--ink); }

/* CTA banner — light (blue-tinted) variant, so two banners in a row differ */
.cta-banner--light { background: linear-gradient(180deg, color-mix(in srgb, var(--yellow) 10%, transparent), var(--bg-soft)); }
.cta-banner--light .cta-banner__deco {
	background: radial-gradient(60% 120% at 15% 0%, color-mix(in srgb, var(--yellow) 18%, transparent), transparent 60%);
}
.cta-banner--light .cta-banner__heading { color: var(--ink); }
.cta-banner--light .cta-banner__lead { color: var(--ink); }
.cta-banner--light .cta-banner__body { color: var(--ink-soft); }

/* CTA banner — image-backed (full-bleed photo + dark scrim). The homepage's
   single conversion moment; reads differently from the contained cards above. */
.cta-banner--photo { position: relative; overflow: hidden; }
.cta-banner--photo .cta-banner__bg { position: absolute; inset: 0; z-index: 0; }
.cta-banner--photo .cta-banner__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-banner--photo .cta-banner__scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(180deg, rgba(15,17,20,.72), rgba(15,17,20,.82)),
		radial-gradient(60% 120% at 15% 0%, rgba(56,182,255,.20), transparent 60%);
}
.cta-banner--photo .cta-banner__inner { position: relative; z-index: 2; }
.cta-banner--photo .cta-banner__lead { color: #fff; }
.cta-banner--photo .cta-banner__body { color: rgba(255,255,255,.85); }

/* =========================================================
   HOME §  Live-order refinements (2026-08-28)
   why-cares photo overhang · feature-split (Move-with-trust)
   ========================================================= */

/* why-cares photo sits ~28px taller than the content column (overhangs top and
   bottom) on desktop. Both columns stretch to the same row height and the
   CONTENT is inset with padding, so the photo (filling the full height) ends up
   taller than the text. No absolute image — a replaced <img> won't stretch to
   top/bottom and would blow its height out. Mobile keeps the plain image. */
@media (min-width: 900px) {
	.why-cares__grid { align-items: center; }
	/* Photo a touch taller than the text column, overhanging ~30px top & bottom.
	   A fixed portrait-ish ratio keeps it controlled (the stretch approach hit a
	   percentage-height cycle that blew the row out). */
	.why-cares__img { aspect-ratio: 1 / 1.01; }
	.why-cares__img--ph { aspect-ratio: 1 / 1.01; }
}

/* Feature split — photo + text content section (Move with someone you can trust) */
.feature-split__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 900px) {
	.feature-split__grid { grid-template-columns: 1.02fr .98fr; }
	.feature-split--img-right .feature-split__media  { order: 2; }
	.feature-split--img-right .feature-split__content { order: 1; }
}
.feature-split__media { margin: 0; }
.feature-split__img {
	width: 100%;
	aspect-ratio: 4 / 3.1;
	object-fit: cover;
	border-radius: var(--radius-xl);
	box-shadow: var(--sh-lift);
	display: block;
}
.feature-split__img--ph { background: linear-gradient(135deg, var(--bg-soft), #e7edf1); min-height: 320px; }
.feature-split__heading { margin: .6rem 0 1rem; }
.feature-split__lead { font-size: 1.18rem; font-weight: 600; color: var(--ink); margin: 0 0 1rem; }
.feature-split__body { color: var(--ink-soft); font-size: 1.02rem; margin: 0 0 .5rem; max-width: 54ch; }
.feature-split--dark .feature-split__lead { color: #fff; }
.feature-split--dark .feature-split__body { color: rgba(255,255,255,.82); }

/* Dark CTA banner — subtle grain texture over the charcoal (relocation banner) */
.cta-banner__inner { position: relative; z-index: 1; }
.cta-banner__deco { z-index: 0; }
.cta-banner--dark::after {
	content: "";
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='dam-grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23dam-grain)'/%3E%3C/svg%3E");
	/* Normal blend (not overlay) so the light noise specks read against the
	   near-black charcoal — overlay would just stay dark. */
	background-size: 240px 240px;
	opacity: .16;
}

/* =========================================================
   HOME §  Reviews — native "powered by Google" grid (2026-08-29)
   ========================================================= */
.reviews-agg {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: .6rem .8rem;
	margin: -1rem 0 2.5rem;
}
.review-stars { color: #fbbc05; letter-spacing: 1px; }
.reviews-agg__score { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: #fff; }
.reviews-agg .review-stars { font-size: 1.25rem; }
.reviews-agg__by { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.72); font-size: .95rem; font-weight: 600; }
.reviews-agg__by svg { vertical-align: middle; }
.reviews-agg__count { color: rgba(255,255,255,.55); font-size: .9rem; }
@media (max-width: 540px) { .reviews-agg__count { flex-basis: 100%; text-align: center; } }

.reviews-grid__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 20px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .reviews-grid__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .reviews-grid__list { grid-template-columns: repeat(3, 1fr); } }

.review-tile {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 22px 22px 24px;
	box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .75);
	display: flex; flex-direction: column; gap: 14px;
}
.review-tile__top { display: flex; align-items: center; gap: 12px; }
.review-tile__avatar {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
	display: grid; place-items: center;
	color: #fff; font-weight: 700; font-size: 1.05rem; font-family: var(--font-display);
}
.review-tile__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.review-tile__name { font-weight: 700; color: var(--ink); font-size: .98rem; }
.review-tile__id .review-stars { font-size: .95rem; }
.review-tile__g { flex: 0 0 auto; }
.review-tile__quote {
	margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.6;
	display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.reviews-grid__foot { text-align: center; margin-top: 2.5rem; }
.reviews-grid__foot .btn { display: inline-flex; align-items: center; gap: .55rem; }

/* =========================================================
   FAQ PAGE — native <details> accordion + FAQPage schema
   ========================================================= */
.page-hero--compact.page-hero--no-image { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.page-hero--compact { min-height: auto; }

.faq-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.faq-wrap { max-width: 840px; margin-inline: auto; }
.faq-list { list-style: none; margin: 0 0 2.75rem; padding: 0; display: grid; gap: 14px; }

.faq-item details {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--sh-card);
	overflow: hidden;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item details[open] {
	border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
	box-shadow: var(--sh-lift);
}
.faq-q {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; gap: 16px;
	padding: 20px 22px;
	font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
	color: var(--ink);
	transition: color .18s var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover, details[open] > .faq-q { color: var(--blue-deep); }
.faq-q__text { flex: 1; }
.faq-q__icon { flex: 0 0 auto; color: var(--blue-deep); transition: transform .28s var(--ease); }
.faq-item details[open] .faq-q__icon { transform: rotate(180deg); }
.faq-a { padding: 0 22px 22px; }
.faq-a p { margin: 0; color: var(--ink-soft); line-height: 1.7; }
.faq-q:focus-visible { outline: 0; box-shadow: var(--ring); border-radius: var(--radius-lg); }

.faq-cta {
	text-align: center;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	padding: clamp(2rem, 4vw, 3rem);
}
.faq-cta__title { margin: 0 0 .5rem; }
.faq-cta__sub { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 1.5rem; }
.faq-cta .dam-cta-row { justify-content: center; }

/* =========================================================
   Inner-page hero — breadcrumb + mini quick-quote form
   ========================================================= */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: .85rem; margin-bottom: .35rem; }
.breadcrumb a { color: rgba(255,255,255,.72); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: #fff; text-decoration: underline; }
.breadcrumb__sep { color: rgba(255,255,255,.45); }
.breadcrumb__current { color: rgba(255,255,255,.95); font-weight: 600; }

.page-hero__quote {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
	margin-top: 1.75rem; max-width: 720px;
	background: rgba(255,255,255,.10);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.20);
	border-radius: var(--radius-lg);
	padding: 16px;
}
.page-hero__quote-field { flex: 1 1 190px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page-hero__quote label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.page-hero__quote input {
	width: 100%; padding: 12px 14px; border-radius: 10px;
	border: 1px solid rgba(255,255,255,.25);
	background: rgba(255,255,255,.94); color: var(--ink);
	font: inherit; font-size: .95rem;
}
.page-hero__quote input::placeholder { color: var(--muted); }
.page-hero__quote input:focus { outline: 0; border-color: #fff; box-shadow: 0 0 0 4px var(--yellow-ring); }
.page-hero__quote-btn { flex: 0 0 auto; }
@media (max-width: 560px) { .page-hero__quote-field { flex-basis: 100%; } .page-hero__quote-btn { width: 100%; } }

/* =========================================================
   CONTACT PAGE — form card + call banner (native rebuild)
   ========================================================= */
.ct-form-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	box-shadow: var(--sh-card);
	padding: clamp(1.4rem, 3vw, 2.2rem);
}
.ct-info__block h3 { margin: 0 0 .25rem; font-size: 1rem; }
.ct-call { position: relative; overflow: hidden; }
.ct-call__deco {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(60% 120% at 12% 0%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 60%);
}
.ct-call__inner {
	position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.ct-call__title { margin: .7rem 0 .4rem; }
.ct-call__sub { color: rgba(255,255,255,.78); margin: 0; }
@media (max-width: 700px) { .ct-call__inner { flex-direction: column; align-items: flex-start; } }

/* =========================================================
   INNER PAGES — migrated article content (service/location)
   ========================================================= */
.inner-content { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: #fff; }
/* Stacked/prose section sits on a warm cream so it reads as a distinct
   section from the white side-by-side one above it. (DAM's --bg-soft token is
   a near-white pale blue, so an explicit cream is used here.) */
.inner-content--tint { background: #f3ede1; }
.inner-content__wrap { max-width: 820px; margin-inline: auto; }
.inner-content__wrap > h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 2.5rem 0 1rem; }
.inner-content__wrap > h2:first-child { margin-top: 0; }
.inner-content__wrap > h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin: 2rem 0 .75rem; }
.inner-content__wrap > p { margin: 0 0 1.2rem; color: var(--ink-soft); line-height: 1.75; }
.inner-content__wrap > ul { margin: 0 0 1.4rem; padding-left: 1.25rem; }
.inner-content__wrap > ul > li { margin: 0 0 .5rem; color: var(--ink-soft); line-height: 1.65; }

/* Inner pages — alternating text/photo section rows */
.inner-content .svc-split {
	display: grid; gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: 1fr; align-items: stretch;
	margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}
.inner-content .svc-split:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
	.inner-content .svc-split { grid-template-columns: 1fr 1fr; }
	.inner-content .svc-split--reverse .svc-split__media { order: 2; }
	/* Photo matches the height of the copy beside it (never ends short) */
	.inner-content .svc-split__media { height: 100%; }
	/* Landscape photos stretched tall crop to their middle (often just sky) —
	   bias the crop downward so the crew/truck stays in frame. */
	.inner-content .svc-split__media img { height: 100%; aspect-ratio: auto; min-height: 360px; max-height: 620px; object-position: center 62%; }
	.inner-content .svc-split__media { display: flex; }
	/* Photo fills the row; the copy sits vertically centred against it */
	.inner-content .svc-split__text { align-self: center; }
}
.svc-split__media { margin: 0; }
.svc-split__media img {
	width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover;
	border-radius: var(--radius-xl); box-shadow: var(--sh-lift); display: block;
}
.svc-split__text > h2:first-child { margin-top: 0; }
.svc-split__text h2 { font-size: var(--fs-h2); line-height: var(--lh-head, 1.12); margin: 0 0 1rem; }
.svc-split__text h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin: 1.5rem 0 .5rem; }
.svc-split__text p { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.7; }
.svc-split__text ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.svc-split__text li { margin: 0 0 .5rem; color: var(--ink-soft); line-height: 1.6; }

/* Inner pages — long-form section rendered as a centred article */
.inner-prose { max-width: 860px; margin-inline: auto; }
.inner-prose__media { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.inner-prose__media img {
	width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover;
	border-radius: var(--radius-xl); box-shadow: var(--sh-lift); display: block;
}
.inner-prose__text > h2:first-child { margin-top: 0; }
.inner-prose__text h2 { font-size: var(--fs-h2); line-height: var(--lh-head, 1.12); margin: 0 0 1rem; }
.inner-prose__text h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin: 2rem 0 .6rem; }
.inner-prose__text p { margin: 0 0 1.15rem; color: var(--ink-soft); line-height: 1.8; }
.inner-prose__text ul, .inner-prose__text ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.inner-prose__text li { margin: 0 0 .5rem; color: var(--ink-soft); line-height: 1.7; }

/* Inner pages — designed "moving process" stepper */
.inner-process__intro {
	max-width: 720px; margin: .9rem auto 0;
	color: var(--ink-soft); line-height: 1.75;
}
.proc-steps {
	list-style: none; margin: clamp(2.25rem, 4vw, 3.25rem) 0 0; padding: 0;
	display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: 1fr;
}
.proc-step {
	position: relative; isolation: isolate; overflow: hidden;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
	border-radius: var(--radius-xl, 20px);
	padding: clamp(1.5rem, 2.4vw, 2rem);
	box-shadow: 0 20px 44px -30px rgba(13, 13, 13, .45);
	display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
	transition: transform .2s ease, box-shadow .2s ease;
}
.proc-step:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -28px rgba(13, 13, 13, .5); }
/* faint ghost number watermark */
.proc-step::after {
	content: counter(step, decimal-leading-zero); counter-increment: step;
	position: absolute; z-index: -1; right: -.35rem; bottom: -1.6rem;
	font-family: var(--font-head, inherit); font-weight: 900;
	font-size: clamp(5rem, 11vw, 8rem); line-height: 1;
	color: color-mix(in srgb, var(--yellow) 12%, transparent);
	pointer-events: none;
}
.proc-steps { counter-reset: step; }
.proc-step__num {
	width: 3rem; height: 3rem; flex: none; border-radius: 999px;
	display: grid; place-items: center;
	font-family: var(--font-head, inherit); font-weight: 800; font-size: 1.2rem;
	color: #fff; background: var(--yellow);
	box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--yellow) 70%, transparent);
}
.proc-step__title { margin: .25rem 0 .5rem; font-size: clamp(1.12rem, 1.6vw, 1.32rem); }
.proc-step__text { margin: 0; color: var(--ink-soft); line-height: 1.7; }

@media (min-width: 820px) {
	.proc-steps--3 { grid-template-columns: repeat(3, 1fr); }
	.proc-steps--4 { grid-template-columns: repeat(4, 1fr); }
	/* stack the badge above the copy in column mode */
	.proc-steps--3 .proc-step,
	.proc-steps--4 .proc-step { grid-template-columns: 1fr; gap: 1.15rem; }
	/* connector line linking the badges across the row */
	.proc-steps--3 .proc-step:not(:last-child)::before,
	.proc-steps--4 .proc-step:not(:last-child)::before {
		content: ""; position: absolute; z-index: 1;
		top: calc(clamp(1.5rem, 2.4vw, 2rem) + 1.5rem);
		right: calc(-1 * clamp(1rem, 2.5vw, 1.75rem) - 1px);
		width: clamp(1rem, 2.5vw, 1.75rem); height: 2px;
		background: color-mix(in srgb, var(--yellow) 45%, transparent);
	}
}

/* ============================================================
   BLOG — index, archives, search, single (modelled on infra)
   ============================================================ */
.blog-hero .page-hero__intro { max-width: 640px; }

/* 2-col body: articles + sidebar */
.blog-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.blog-layout { display: grid; gap: clamp(2rem, 4vw, 3.25rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .blog-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.blog-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 560px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .blog-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Post card */
.post-card { background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: var(--radius-xl, 20px); overflow: hidden; box-shadow: 0 18px 40px -30px rgba(13,13,13,.4); transition: transform .2s ease, box-shadow .2s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -28px rgba(13,13,13,.5); }
.post-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.post-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; }
.post-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.post-card:hover .post-card__img { transform: scale(1.04); }
.post-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 30%, transparent); }
.post-card__cat { position: absolute; left: .8rem; top: .8rem; background: var(--yellow); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px; }
.post-card__body { padding: clamp(1.1rem, 2vw, 1.4rem); display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.post-card__title { font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.25; margin: 0; }
.post-card__excerpt { margin: 0; color: var(--ink-soft); line-height: 1.6; font-size: .95rem; }
.post-card__meta { margin-top: auto; display: flex; gap: .5rem; align-items: center; color: var(--ink-soft); font-size: .82rem; }

/* Sidebar */
.blog-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 6rem; }
@media (max-width: 979px) { .blog-sidebar { position: static; } }
.blog-widget { background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: var(--radius-lg, 16px); padding: 1.3rem; }
.blog-widget__title { font-size: 1.05rem; margin: 0 0 .9rem; }
.blog-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.blog-recent a { display: flex; gap: .75rem; align-items: center; color: inherit; text-decoration: none; }
.blog-recent__thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--bg-soft); }
.blog-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-recent__meta { display: flex; flex-direction: column; gap: .15rem; }
.blog-recent__meta strong { font-size: .9rem; line-height: 1.3; font-weight: 600; }
.blog-recent__meta span { font-size: .78rem; color: var(--ink-soft); }
.blog-recent a:hover strong { color: var(--yellow); }
.blog-cats { list-style: none; margin: 0; padding: 0; }
.blog-cats li + li { border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.blog-cats a { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; color: inherit; text-decoration: none; font-size: .92rem; }
.blog-cats a:hover { color: var(--yellow); }
.blog-cats__count { font-size: .78rem; color: var(--ink-soft); background: var(--bg-soft); border-radius: 999px; padding: .1rem .55rem; }
.blog-widget--cta { background: var(--bg-deep); color: #fff; text-align: center; }
.blog-widget--cta .blog-widget__title { color: #fff; }
.blog-widget--cta p { color: rgba(255,255,255,.8); font-size: .92rem; margin: 0 0 1rem; }
.blog-widget__tel { display: block; margin-top: .7rem; color: #fff; font-weight: 700; text-decoration: none; }

/* Pagination */
.blog-pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.blog-pagination .page-numbers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.blog-pagination .page-numbers li a, .blog-pagination .page-numbers li span { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); text-decoration: none; font-weight: 600; }
.blog-pagination .page-numbers li .current { background: var(--yellow); border-color: var(--yellow); color: #fff; }
.blog-pagination .page-numbers li a:hover { border-color: var(--yellow); color: var(--yellow); }
.blog-empty { text-align: center; padding: clamp(2.5rem, 6vw, 5rem) 0; }
.blog-empty p { color: var(--ink-soft); margin: .5rem 0 1.5rem; }

/* Single post */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; background: transparent; }
.reading-progress__bar { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .1s linear; }
.post-hero .post-hero__cat { display: inline-flex; align-items: center; white-space: nowrap; margin-bottom: .6rem; }
/* Meta reads on the dark photo hero */
.post-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; color: rgba(255,255,255,.82); font-size: .92rem; margin-top: 1rem; }
.post-hero__meta span[aria-hidden] { color: rgba(255,255,255,.5); }
.post-hero__rt { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.82); }
.post-hero__rt svg { opacity: .85; }
/* Featured image sits in its own clean WHITE band with padding above & below */
.post-feature { margin-top: 0; padding-block: clamp(2rem, 4vw, 3.5rem); background: #fff; }
.post-feature__wrap { margin: 0; border-radius: var(--radius-xl, 20px); overflow: hidden; box-shadow: var(--sh-lift); }
.post-feature__img { width: 100%; height: auto; max-height: 520px; object-fit: cover; display: block; }
.post-section { padding-block: clamp(2.5rem, 5vw, 4rem); }
.post-shell { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .post-shell { grid-template-columns: 56px minmax(0, 760px); justify-content: center; gap: 2.5rem; } }
.post-share { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
@media (min-width: 900px) { .post-share { flex-direction: column; align-items: flex-start; position: sticky; top: 6rem; align-self: start; } }
.post-share__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.post-share__btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); transition: all .2s ease; }
.post-share__btn:hover { background: var(--yellow); border-color: var(--yellow); color: #fff; }
.post-prose { max-width: 760px; }
.post-prose > * { margin: 0 0 1.15rem; }
/* Blog article headings follow the Customizer sizes (Design → Sizes) */
.post-prose h2 { font-size: var(--fs-h2); margin: 2.2rem 0 .9rem; line-height: var(--lh-head, 1.15); }
.post-prose h3 { font-size: var(--fs-h3); margin: 1.8rem 0 .7rem; line-height: var(--lh-head, 1.2); }
.post-prose h4 { font-size: var(--fs-h4); margin: 1.5rem 0 .6rem; line-height: var(--lh-head, 1.25); }
.post-prose p, .post-prose li { color: var(--ink-soft); line-height: 1.8; }
.post-prose ul, .post-prose ol { padding-left: 1.3rem; }
.post-prose li { margin: 0 0 .5rem; }
.post-prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg, 14px); }
.post-prose a { color: var(--yellow); text-underline-offset: 2px; }
.post-prose blockquote { border-left: 4px solid var(--yellow); padding: .3rem 0 .3rem 1.2rem; margin-inline: 0; font-style: italic; color: var(--ink); }
.post-byline { max-width: 760px; margin: clamp(2rem, 4vw, 3rem) auto 0; display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.3rem; background: var(--bg-soft); border-radius: var(--radius-lg, 16px); }
.post-byline__avatar { border-radius: 999px; flex: none; }
.post-byline__body strong { display: block; font-size: 1.1rem; margin: .15rem 0; }
.post-byline__body p { margin: .3rem 0 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.related-posts .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* ============================================================
   STICKY QUOTE CTA — right-edge tab (desktop) + bottom bar (mobile)
   ============================================================ */
.dam-sticky__tab {
	position: fixed; right: 0; top: 50%; transform: translateY(-50%);
	z-index: 90;
	display: flex; flex-direction: column; align-items: center; gap: .5rem;
	padding: 1rem .55rem;
	background: var(--yellow); color: #fff; text-decoration: none;
	border-radius: 16px 0 0 16px;
	box-shadow: -8px 12px 34px -12px rgba(0,0,0,.45);
	animation: dam-sticky-pulse 2.6s ease-in-out infinite;
	transition: padding-right .2s ease, background .2s ease;
}
.dam-sticky__tab:hover, .dam-sticky__tab:focus-visible {
	background: var(--yellow-deep, #1b7eae); padding-right: .85rem; color: #fff;
	animation-play-state: paused;
}
.dam-sticky__tab-icon { display: grid; place-items: center; }
.dam-sticky__tab-text {
	writing-mode: vertical-rl; transform: rotate(180deg);
	font-family: var(--font-head, inherit); font-weight: 800;
	font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
	white-space: nowrap;
}
@keyframes dam-sticky-pulse {
	0%, 100% { box-shadow: -8px 12px 34px -12px rgba(0,0,0,.45), 0 0 0 0 rgba(56,182,255,.55); }
	50%      { box-shadow: -8px 12px 34px -12px rgba(0,0,0,.45), 0 0 0 12px rgba(56,182,255,0); }
}

/* Mobile bottom bar — hidden on desktop */
.dam-sticky__bar { display: none; }

@media (max-width: 767px) {
	.dam-sticky__tab { display: none; }
	.dam-sticky__bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
		display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
		padding: .5rem calc(.5rem + env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) calc(.5rem + env(safe-area-inset-left));
		background: rgba(255,255,255,.97); backdrop-filter: blur(6px);
		box-shadow: 0 -8px 24px -10px rgba(0,0,0,.3);
		border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
	}
	.dam-sticky__barbtn {
		display: flex; align-items: center; justify-content: center; gap: .4rem;
		padding: .85rem .5rem; border-radius: 12px; text-decoration: none;
		font-weight: 800; font-size: .98rem;
	}
	.dam-sticky__barbtn--call {
		background: #fff; color: var(--ink);
		border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
	}
	/* Pin the colours through hover/focus/active — the global `a:hover{color:var(--accent)}`
	   would otherwise turn the label blue-on-blue (invisible), and on touch the
	   hover state sticks after a tap. */
	.dam-sticky__barbtn--quote,
	.dam-sticky__barbtn--quote:hover,
	.dam-sticky__barbtn--quote:focus,
	.dam-sticky__barbtn--quote:focus-visible,
	.dam-sticky__barbtn--quote:active { background: var(--yellow); color: #fff; }
	.dam-sticky__barbtn--call,
	.dam-sticky__barbtn--call:hover,
	.dam-sticky__barbtn--call:focus,
	.dam-sticky__barbtn--call:focus-visible,
	.dam-sticky__barbtn--call:active { background: #fff; color: var(--ink); }
	.dam-sticky__barbtn--quote svg { animation: dam-sticky-nudge 1.8s ease-in-out infinite; }
	/* clear the bar so it never covers the footer's last line */
	body { padding-bottom: 68px; }
}
@keyframes dam-sticky-nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
	.dam-sticky__tab, .dam-sticky__barbtn--quote svg { animation: none; }
}

/* ============================================================
   PRICING — three truck/crew tiers, Medium highlighted
   ============================================================ */
.pricing__grid {
	display: grid; gap: clamp(1rem, 2.5vw, 1.5rem);
	grid-template-columns: 1fr; align-items: stretch;
	max-width: 1120px; margin-inline: auto;
}
@media (min-width: 860px) { .pricing__grid { grid-template-columns: repeat(3, 1fr); align-items: center; } }

.price-card {
	position: relative; display: flex; flex-direction: column;
	background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
	border-radius: var(--radius-xl, 20px); padding: clamp(1.5rem, 2.6vw, 2rem);
	box-shadow: 0 18px 44px -30px rgba(13,13,13,.4);
}
.price-card__name { font-size: clamp(1.15rem, 1.7vw, 1.35rem); margin: 0 0 .25rem; letter-spacing: .01em; }
.price-card__crew { margin: 0 0 1rem; color: var(--ink-soft); font-size: .95rem; }
.price-card__price { margin: 0; display: flex; align-items: baseline; gap: .35rem; }
.price-card__price strong { font-family: var(--font-head, inherit); font-weight: 800; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1; color: var(--ink); }
.price-card__price span { color: var(--ink-soft); font-size: .92rem; font-weight: 600; }
.price-card__cap { margin: .5rem 0 0; color: var(--muted, var(--ink-soft)); font-size: .88rem; font-weight: 600; letter-spacing: .01em; }
.price-card__incl {
	display: inline-flex; align-items: center; gap: .4rem; margin: 1rem 0 0;
	background: color-mix(in srgb, var(--yellow) 14%, transparent); color: var(--yellow-deep, #1b7eae);
	font-weight: 700; font-size: .84rem; padding: .35rem .7rem; border-radius: 999px;
}
.price-card__incl svg { color: var(--yellow); }
.price-card__best { margin: 1.4rem 0 .5rem; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.price-card__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.price-card__list li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); font-size: .93rem; line-height: 1.45; }
.price-card__list li::before {
	content: ""; position: absolute; left: 0; top: .35em; width: .85rem; height: .5rem;
	border-left: 2.4px solid var(--yellow); border-bottom: 2.4px solid var(--yellow);
	transform: rotate(-45deg);
}
.price-card__cta { margin-top: auto; }

/* Most Popular — elevated, blue frame + flag */
.price-card--popular {
	border: 2px solid var(--yellow);
	box-shadow: 0 28px 60px -28px color-mix(in srgb, var(--yellow) 55%, rgba(13,13,13,.5));
}
@media (min-width: 860px) { .price-card--popular { transform: scale(1.045); z-index: 2; } }
.price-card__flag {
	position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
	background: var(--yellow); color: #fff; font-family: var(--font-head, inherit);
	font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
	padding: .35rem .9rem; border-radius: 999px; white-space: nowrap;
	box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--yellow) 60%, transparent);
}

.pricing__note {
	max-width: 760px; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0; text-align: center;
	color: var(--ink-soft); font-size: .95rem; line-height: 1.6;
}

/* Pricing page — "what's included" strip */
.pricing-incl { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.pricing-incl__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.25rem; max-width: 900px; margin-inline: auto;
}
.pricing-incl__list li {
	display: inline-flex; align-items: center; gap: .55rem;
	background: var(--bg-soft); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
	border-radius: 999px; padding: .6rem 1.1rem; font-weight: 600; font-size: .95rem; color: var(--ink);
}
.pricing-incl__list svg { color: var(--yellow); flex: none; }

/* Inner pages — explicit alternating grounds (assigned in template-inner.php).
   Placed last so they win over .inner-content / .section--tint / .inner-content--tint. */
.inner-gnd-white { background: #ffffff; }
.inner-gnd-cream { background: #f2ede2; }

/* Reviews page — light lead band (breaks the dark hero → dark grid adjacency) */
.reviews-lead { padding-block: clamp(2rem, 4vw, 3rem); }
.reviews-lead__text {
	max-width: 720px; margin: 0 auto; text-align: center;
	font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.6; color: var(--ink);
}

/* Mobile nav — accordion submenus (collapsed by default) */
#mobile-nav .menu-item-has-children { position: relative; }
.mobile-nav__expander {
	position: absolute; top: 0; right: 0; width: 3rem; height: 3.2rem;
	display: grid; place-items: center; background: transparent; border: 0;
	color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mobile-nav__expander svg { transition: transform .25s ease; }
#mobile-nav .menu-item-has-children.is-open > .mobile-nav__expander svg { transform: rotate(180deg); }
#mobile-nav .sub-menu[hidden] { display: none; }
#mobile-nav .menu-item-has-children > a { padding-right: 3rem; }

/* ============================================================
   PAGE HERO — 2-column split (content + quote card) on inner pages
   ============================================================ */
.page-hero--split { min-height: auto; align-items: stretch; padding-block: clamp(4.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 4.5rem); }
.page-hero__grid {
	position: relative; z-index: 3;
	display: grid; grid-template-columns: 1.02fr .98fr;
	gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
@media (max-width: 980px) { .page-hero__grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); } }
.page-hero__content { min-width: 0; }
.page-hero__content > * + * { margin-top: 1rem; }
.page-hero__content h1 { margin: .6rem 0 .4rem; }
.page-hero__lead { color: rgba(255,255,255,.85); }

/* USPs */
.page-hero__usps { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.page-hero__usps li { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; font-size: 1rem; }
.page-hero__usps svg { color: var(--yellow); flex: none; }

/* Google / Facebook review chips */
.page-hero__reviews { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.ph-review {
	display: inline-flex; align-items: center; gap: .45rem;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
	backdrop-filter: blur(6px); border-radius: 999px; padding: .45rem .85rem;
	color: #fff; font-size: .95rem;
}
.ph-review strong { font-weight: 800; }
.ph-review__stars { color: #f5b301; letter-spacing: 1px; font-size: .95rem; }
.ph-review__src { color: rgba(255,255,255,.72); font-size: .85rem; }
.ph-review svg { flex: none; color: #fff; }

/* Right column holds the shared glass quote card */
.page-hero__form { min-width: 0; }
.page-hero__form .quote-card { margin: 0; width: 100%; }
@media (max-width: 980px) {
	.page-hero__reviews { justify-content: flex-start; }
	.page-hero--split .page-hero__bg {
		-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.4) 100%);
		        mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.4) 100%);
	}
}

/* Shield the quote card's own typography from the hero's generic p/heading rules
   (the split hero nests the card inside .page-hero, whose `.page-hero p{color:#fff}`
   was bleeding into the card's sub-line + note). Restores the homepage look. */
.page-hero .quote-card__title { color: var(--ink); font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.2; max-width: none; }
.page-hero .quote-card__sub   { color: var(--ink-soft); font-size: .93rem; max-width: none; }
.page-hero .quote-form__note  { color: var(--muted); font-size: .78rem; max-width: none; }
.page-hero .quote-card label  { color: var(--ink-soft); }
/* Review chip rating number — bright + readable on the dark hero chip */
.ph-review strong { color: #fff; font-weight: 800; }
/* Linked review chips (Google / Facebook) */
a.ph-review { text-decoration: none; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .15s ease; }
a.ph-review:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.42); transform: translateY(-1px); }
/* Blog single — blurred featured-image hero background (the crisp image shows below) */
.post-hero .page-hero__bg img { filter: blur(9px) brightness(.92); transform: scale(1.12); }

/* Slim contextual mid-page CTA (one per long page) */
.inline-cta { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.inline-cta__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap;
	background: color-mix(in srgb, var(--yellow) 10%, #fff);
	border: 1px solid color-mix(in srgb, var(--yellow) 32%, transparent);
	border-radius: var(--radius-xl, 20px);
	padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.25rem, 3vw, 2rem);
}
.inline-cta__text {
	margin: 0; flex: 1 1 320px; min-width: 0;
	font-size: clamp(1rem, 1.6vw, 1.12rem); font-weight: 600; line-height: 1.5; color: var(--ink);
}
.inline-cta__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.inline-cta__phone { display: flex; flex-direction: column; line-height: 1.2; color: var(--ink); }
.inline-cta__phone span { font-size: .72rem; color: var(--ink-soft); }
.inline-cta__phone strong { font-size: 1rem; font-weight: 800; }
.inline-cta__phone:hover strong, .inline-cta__phone:focus-visible strong { color: var(--yellow-deep, #1b7eae); }
@media (max-width: 640px) { .inline-cta__bar { flex-direction: column; align-items: flex-start; } }