/* Tessera theme — editorial design system. */

:root {
	--bg: #f7f5f1;
	--bg-deep: #efeae1;
	--ink: #1a1a1a;
	--ink-soft: #4a4a4a;
	--ink-mute: #8a8a85;
	--line: #d9d3c7;
	--accent: #0071bc;
	--accent-soft: #5aadcc;
	--warm: #c9a47a;
	--paper: #ffffff;

	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Cormorant Garamond has been retired: the serif read as a restaurant menu
	   rather than a tile contractor, so the italic accents, leads and quotes
	   moved to Inter and the figures to Archivo. The token is kept, pointing at
	   the body stack, only so that any inline var(--serif) left in page content
	   resolves to something deliberate instead of a browser default serif. */
	--serif: var(--sans);

	/* Headlines and figures. Archivo is a neo-grotesque; at width 62% / weight
	   700 its proportions match the Tessera wordmark (Akzidenz-Grotesk
	   Condensed) measured against the logo artwork. Weight 500 carries the
	   phone number and the contact rows. */
	--display: "Archivo", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
	--display-stretch: 62%;
	--display-weight: 700;

	/* Logo scaling. functions.php injects --logo-height-desktop from the Logo
	   Height option; --logo-height derives from it here so the breakpoint
	   clamps below still win. Never set --logo-height inline. */
	--logo-height-desktop: 104px;
	--logo-height: var(--logo-height-desktop);

	/* Legacy aliases so existing service pages still render. */
	--color-text: var(--ink);
	--color-muted: var(--ink-soft);
	--color-bg: var(--bg);
	--color-accent: var(--accent);
	--color-accent-soft: #e9eef5;
	--color-accent-dark: #005285;
	--color-brand: var(--accent);
	--color-brand-soft: #e9eef5;
	--color-border: var(--line);
	--color-surface: var(--bg-deep);
	--container: 1280px;
	--container-narrow: 920px;
	--font-body: var(--sans);
	--font-display: var(--display);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ----------- TYPOGRAPHY ----------- */
.display {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-weight: var(--display-weight);
	letter-spacing: -0.005em;
	line-height: 1.05;
}

.eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
}

.lead {
	font-family: var(--sans);
	font-size: 1.25rem;
	color: var(--ink-soft);
	line-height: 1.5;
}

h1, h2, h3, h4 {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-weight: var(--display-weight);
	line-height: 1.15;
	letter-spacing: 0;
	margin: 0 0 0.6em;
}

h1 { font-size: 2.75rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }

em { font-style: italic; color: var(--accent); }

/* Accent colour without the italic that <em> carries — for a phrase inside a
   headline that should change colour but not slant. */
.accent { color: var(--accent); }

/* ----------- LAYOUT ----------- */
.container,
.wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}

section.tessera-section { padding: 120px 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ----------- HEADER ----------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(247, 245, 241, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 32px;
	max-width: 1280px;
	margin: 0 auto;
}

.site-branding { display: flex; align-items: center; }

.site-logo-link,
.site-logo-link:hover {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ink);
	text-decoration: none;
}

.logo-mark {
	width: calc(var(--logo-height) * 0.92);
	height: calc(var(--logo-height) * 0.92);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: calc(var(--logo-height) * 0.04);
	flex: 0 0 auto;
}
.logo-mark span { background: var(--ink); border-radius: 1px; }
.logo-mark span.t { background: var(--accent-soft); }

.logo-text {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: calc(var(--logo-height) * 0.42);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ink);
	line-height: 1;
}
.logo-text small {
	display: block;
	font-family: var(--sans);
	font-size: calc(var(--logo-height) * 0.115);
	letter-spacing: 0.3em;
	color: var(--ink-mute);
	text-transform: uppercase;
	font-weight: 500;
	margin-top: calc(var(--logo-height) * 0.06);
}

.site-logo {
	max-height: var(--logo-height);
	width: auto;
}

.site-logo-link { gap: calc(var(--logo-height) * 0.18); }

.site-nav ul {
	display: flex;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16.5px;
	font-weight: 500;
}
.site-nav a {
	color: var(--ink-soft);
	transition: color 0.2s ease;
	font-family: var(--sans);
	display: inline-block;
	padding: 4px 0;
}
.site-nav a:hover,
.site-nav .current-menu-item > a {
	color: var(--accent);
}

/* sub-menu (preserved from previous nav) */
.site-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: -16px;
	min-width: 220px;
	background: var(--paper);
	border: 1px solid var(--line);
	display: none;
	flex-direction: column;
	gap: 0;
	z-index: 20;
}
.site-nav .menu-item-has-children { position: relative; }
.site-nav .sub-menu li { width: 100%; }
.site-nav .sub-menu a { display: block; padding: 8px 16px; white-space: nowrap; }
.site-nav .sub-menu a:hover { background: var(--bg-deep); color: var(--accent); }
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu {
	display: flex;
}

.site-nav-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

/* Hero call-to-action line, in place of the old button pair. It is the only
   action in the hero now, so it carries the weight a button used to. */
.hero-call {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ink);
	margin: 36px 0 40px;
}
.hero-call a {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-weight: 700;
	font-size: 1.9rem;
	color: var(--ink);
	border-bottom: 3px solid var(--accent);
	padding-bottom: 2px;
	transition: color 0.2s ease;
}
.hero-call a:hover { color: var(--accent); }

.phone-link {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--accent);
}
/* Already the accent colour, so hover darkens rather than recolours. */
.phone-link:hover { color: var(--color-accent-dark); }

/* Buttons */
.btn {
	display: inline-block;
	padding: 12px 24px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--bg);
	cursor: pointer;
	transition: all 0.25s ease;
	text-decoration: none;
	border-radius: 0;
}
.btn:hover { background: transparent; color: var(--ink); }

.btn-ghost,
.btn--ghost {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--ink);
}
.btn-ghost:hover,
.btn--ghost:hover { background: var(--ink); color: var(--bg); }

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--line);
	padding: 0;
	cursor: pointer;
	color: var(--ink);
	transition: border-color 0.2s ease, background 0.2s ease;
}
.menu-toggle:hover { border-color: var(--ink); }
.menu-toggle__bars {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}
.menu-toggle__bars span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6px; }
.menu-toggle__bars span:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

/* ----------- HERO ----------- */
/* Element+class, to outrank `section.tessera-section { padding: 120px 0 }`.
   Written as a bare .hero-section this loses on specificity and the hero keeps
   the full 120px, which is what pushed the fold down. */
section.hero-section {
	padding: 44px 0 72px;
	position: relative;
	overflow: hidden;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	align-items: center;
}

.hero-content .eyebrow { margin-bottom: 28px; }

.hero-section h1 {
	/*
	 * Capped so "Houses made into homes." holds one line. The column is fixed
	 * at ~595px above a 1280px viewport while vw keeps growing, so the old
	 * 6vw/5.5rem ceiling produced 88px type — 700px of text in a 595px column.
	 * 4.5rem measures 572px and leaves headroom.
	 */
	font-size: clamp(2.5rem, 5.2vw, 4.5rem);
	/* Tight to the subhead on purpose: the two lines are one thought, so the
	   gap below the headline is smaller than the gap below the pair. */
	margin: 0 0 14px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.015em;
}
.hero-section h1 em { font-style: italic; color: var(--accent); }

.hero-section .lead {
	margin-bottom: 40px;
	max-width: 480px;
}

.hero-actions {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 56px;
	flex-wrap: wrap;
}

.hero-meta {
	display: flex;
	gap: 32px;
	padding-top: 28px;
}
.hero-meta div { display: flex; flex-direction: column; }
.hero-meta strong {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: 2rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1;
}
.hero-meta span {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-top: 6px;
}

/* Shorter than the original 4:5 portrait so the whole hero clears the fold on
   a laptop. The decorative offset frame below is sized off this box. */
.hero-image {
	position: relative;
	aspect-ratio: 1 / 1;
	max-height: 62vh;
	background: var(--bg-deep);
}
.hero-image::before {
	content: "";
	position: absolute;
	inset: -20px -20px 20px 20px;
	border: 1px solid var(--accent);
	z-index: 0;
}
.hero-image .photo-slot {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #c9a47a 0%, #8a7456 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--sans);
	font-style: italic;
}
.hero-image img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.photo-slot::before {
	content: "PHOTO";
	position: absolute;
	top: 16px;
	left: 16px;
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.2em;
	background: rgba(0, 0, 0, 0.5);
	padding: 4px 8px;
	font-style: normal;
	color: #fff;
}

/* ----------- TRUST STRIP ----------- */
.trust-strip {
	background: var(--ink);
	color: var(--bg);
	padding: 28px 0;
}
.trust-strip-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 60px;
	flex-wrap: wrap;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 500;
}
.trust-strip-inner span {
	display: flex;
	align-items: center;
	gap: 12px;
}
.trust-strip-inner span::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--accent-soft);
	border-radius: 50%;
}

/* ----------- SECTION HEADER ----------- */
.section-header {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 80px;
	margin-bottom: 80px;
	align-items: end;
}
.section-header h2 {
	font-size: clamp(2.5rem, 4vw, 3.75rem);
	margin: 0;
}
.section-header p {
	color: var(--ink-soft);
	font-size: 1.05rem;
	max-width: 520px;
	margin: 0;
}

/* ----------- SERVICES ----------- */
.services-section { background: var(--bg); }

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.service-card {
	background: var(--bg);
	padding: 40px 36px 44px;
	position: relative;
	transition: background 0.3s ease;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	display: block;
}
.service-card:hover { background: var(--paper); }

.service-photo {
	aspect-ratio: 4 / 3;
	background: var(--bg-deep);
	margin-bottom: 28px;
	position: relative;
	overflow: hidden;
}
.service-photo .photo-slot {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #d9d3c7 0%, #b8af9e 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sans);
	font-style: italic;
	color: var(--ink-mute);
}
.service-photo img { width: 100%; height: 100%; object-fit: cover; }

.service-num {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: 13px;
	color: var(--accent);
	margin-bottom: 8px;
}

.service-card h3 {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: 1.65rem;
	font-weight: var(--display-weight);
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}
.service-card p {
	font-size: 14px;
	color: var(--ink-soft);
	line-height: 1.6;
	margin: 0;
}
.service-card::after {
	content: "→";
	position: absolute;
	bottom: 32px;
	right: 36px;
	font-size: 18px;
	color: var(--ink-mute);
	transition: all 0.3s ease;
}
.service-card:hover::after {
	color: var(--accent);
	right: 28px;
}

/* Links suspended while the service pages are unfinished — the card is a plain
   block, so drop every affordance that reads as clickable. Rendered by
   tessera_render_service_card_static(). */
.service-card--static { cursor: default; }
.service-card--static:hover { background: var(--bg); }
.service-card--static::after { content: none; }

/* ----------- WHY ----------- */
.why-section { background: var(--bg-deep); }

.why-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px;
	align-items: center;
}

.why-image {
	aspect-ratio: 3 / 4;
	background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
	position: relative;
}
.why-image .photo-slot {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sans);
	font-style: italic;
	color: rgba(255, 255, 255, 0.5);
}
.why-image img { width: 100%; height: 100%; object-fit: cover; }

.why-content .eyebrow { margin-bottom: 24px; }
.why-content h2 {
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	margin: 0 0 32px;
}
.why-content > p {
	font-size: 1.05rem;
	color: var(--ink-soft);
	margin-bottom: 48px;
	max-width: 480px;
}

.why-points {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 0;
	margin: 0;
}
.why-points li {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}
.why-points li:first-child { border-top: none; padding-top: 0; }
.why-points strong {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: 2rem;
	font-weight: 500;
	color: var(--accent);
	line-height: 1;
}
.why-points h3 {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: 1.3rem;
	font-weight: var(--display-weight);
	margin: 0 0 6px;
}
.why-points p {
	font-size: 14px;
	color: var(--ink-soft);
	line-height: 1.6;
	margin: 0;
}

/* ----------- GALLERY ----------- */
.gallery-section { background: var(--bg); }

.gallery-filters {
	display: flex;
	gap: 8px;
	margin-bottom: 48px;
	flex-wrap: wrap;
}
.filter-chip {
	padding: 8px 18px;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink-soft);
	cursor: pointer;
	font-family: var(--sans);
	font-weight: 500;
	transition: all 0.2s ease;
}
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.active {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.gallery-item {
	aspect-ratio: 1 / 1;
	background: var(--bg-deep);
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.gallery-item:nth-child(3n+1) { aspect-ratio: 3 / 4; }
.gallery-item:nth-child(5n+1) { grid-row: span 2; aspect-ratio: 3 / 5; }

.gallery-item .photo-slot {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #c9a47a, #8a7456);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--sans);
	font-style: italic;
	font-size: 14px;
	transition: transform 0.5s ease;
}
.gallery-item:nth-child(2n) .photo-slot { background: linear-gradient(135deg, #4a4a4a, #1a1a1a); }
.gallery-item:nth-child(3n) .photo-slot { background: linear-gradient(135deg, #b8af9e, #8a8478); }
.gallery-item:nth-child(4n) .photo-slot { background: linear-gradient(135deg, #2563a8, #1a3a5a); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-item:hover .photo-slot,
.gallery-item:hover img { transform: scale(1.04); }

.gallery-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	color: #fff;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-caption { opacity: 1; }

.gallery-caption strong {
	font-family: var(--sans);
	font-size: 14px;
	display: block;
	font-weight: 500;
}
.gallery-caption span {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.8;
}

/* ----------- PROCESS ----------- */
.process-section {
	background: var(--ink);
	color: var(--bg);
}
.process-section .eyebrow { color: var(--accent-soft); }
.process-section h2 {
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	color: var(--bg);
	margin: 16px 0 80px;
	max-width: 700px;
}
.process-section h2 em { font-style: italic; color: var(--accent-soft); }

.process-steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	position: relative;
}
.process-steps-grid::before {
	content: "";
	position: absolute;
	top: 28px;
	left: 5%;
	right: 5%;
	height: 1px;
	background: rgba(255, 255, 255, 0.15);
}
.process-step { position: relative; }
.process-step .step-num {
	width: 56px;
	height: 56px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: var(--ink);
	color: var(--accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: 1.4rem;
	margin-bottom: 28px;
	position: relative;
	z-index: 1;
}
.process-step h3 {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: 1.4rem;
	font-weight: var(--display-weight);
	margin: 0 0 12px;
}
.process-step p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.6;
	margin: 0;
}

/* ----------- TESTIMONIALS ----------- */
.testimonials-section .section-header { margin-bottom: 60px; }

.review-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 48px;
}
.review {
	background: var(--paper);
	padding: 40px 36px;
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
}
.review-stars {
	color: var(--warm);
	font-size: 14px;
	letter-spacing: 2px;
	margin-bottom: 20px;
}
.review-quote {
	font-family: var(--sans);
	font-size: 1.15rem;
	line-height: 1.5;
	margin: 0 0 28px;
	flex-grow: 1;
	color: var(--ink);
}
.review-quote p { margin: 0 0 0.75em; }
.review-quote p:last-child { margin-bottom: 0; }
.review-author {
	padding-top: 20px;
	border-top: 1px solid var(--line);
}
.review-author strong {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 500;
	display: block;
}
.review-author span {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-top: 2px;
	display: block;
}

.google-badge {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 16px 28px;
	background: var(--paper);
	border: 1px solid var(--line);
	transition: border-color 0.2s ease, color 0.2s ease;
	text-decoration: none;
}
a.google-badge:hover {
	border-color: var(--accent);
	color: var(--accent);
}
a.google-badge:hover strong { color: var(--accent); }
.google-badge strong {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: 1.5rem;
	color: var(--ink);
	transition: color 0.2s ease;
}
.google-badge span { font-size: 13px; color: var(--ink-soft); }

/* ----------- SERVICE AREA ----------- */
.area-section { background: var(--bg-deep); }

.area-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}
.area-section h2 {
	font-size: clamp(2.25rem, 3.5vw, 3rem);
	margin: 16px 0 24px;
}
.area-section p {
	color: var(--ink-soft);
	margin-bottom: 32px;
	max-width: 480px;
}

.area-towns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 32px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.area-towns li {
	font-family: var(--sans);
	font-size: 1.1rem;
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	gap: 12px;
}
.area-towns li::before {
	content: "";
	width: 4px;
	height: 4px;
	background: var(--accent);
	border-radius: 50%;
}

.area-map {
	aspect-ratio: 4 / 3;
	background: var(--paper);
	border: 1px solid var(--line);
	position: relative;
	overflow: hidden;
}
.area-map svg { width: 100%; height: 100%; }
.area-map img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* OpenStreetMap credit. Required by ODbL — keep it visible. */
.area-map-credit {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--ink-mute);
}
.area-map-credit a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.area-map-credit a:hover { color: var(--accent); }

/* ----------- FAQ ----------- */
.faq-section { background: var(--bg); }

.faq-list {
	max-width: 820px;
	margin: 0 auto;
}
.faq-item {
	border-bottom: 1px solid var(--line);
}
.faq-item:first-child { border-top: 1px solid var(--line); }

.faq-q {
	width: 100%;
	background: none;
	border: none;
	padding: 28px 0;
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: 1.4rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--ink);
	transition: color 0.2s ease;
}
.faq-q:hover { color: var(--accent); }

.faq-q-icon {
	font-family: var(--sans);
	font-size: 1.5rem;
	color: var(--accent);
	font-weight: 300;
	transition: transform 0.3s ease;
}
.faq-item.open .faq-q-icon { transform: rotate(45deg); }

/* A collapsed answer must leave the accessibility tree, not just the viewport.
   max-height:0 hides it visually while leaving its text announced and its links
   in the tab order. The visibility change is delayed by the transition length so
   the collapse animation is unchanged. */
.faq-a {
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease, visibility 0s linear 0.3s;
	color: var(--ink-soft);
	line-height: 1.7;
}
.faq-item.open .faq-a {
	visibility: visible;
	transition: max-height 0.3s ease, padding 0.3s ease, visibility 0s;
	max-height: 600px;
	padding: 0 0 32px;
}

/* ----------- CTA BAND ----------- */
.cta-band {
	background: var(--ink);
	color: var(--bg);
	padding: 100px 0;
	position: relative;
	overflow: hidden;
}
.cta-band::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(90, 173, 204, 0.15) 0%, transparent 60%);
	pointer-events: none;
}

.cta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
}

.cta-band h2 {
	font-size: clamp(2.5rem, 4.5vw, 4rem);
	color: var(--bg);
	margin: 16px 0 24px;
}
.cta-band h2 em { font-style: italic; color: var(--accent-soft); }

.cta-band p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.05rem;
	margin-bottom: 32px;
	max-width: 440px;
}

/* Right-hand column: phone and hours only, centred against the headline.
   The grid already centres it vertically; this keeps it off the far edge on
   wide screens and lets it sit full width once the grid stacks. */
.cta-contact {
	display: flex;
	justify-content: flex-end;
}
.cta-contact .cta-direct { width: 100%; max-width: 430px; }

.cta-direct { display: flex; flex-direction: column; gap: 0; }
.cta-direct a,
.cta-direct > div {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-weight: 500;
	font-size: 1.5rem;
	padding: 20px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	transition: padding 0.3s ease;
}
.cta-direct > :first-child { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.cta-direct a:hover { padding-left: 12px; color: var(--accent-soft); }
.cta-direct a span:first-child,
.cta-direct > div span:first-child {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--sans);
	width: 80px;
	font-weight: 500;
}

.cta-form {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 40px;
	backdrop-filter: blur(10px);
}
.cta-form h3 {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-size: 1.5rem;
	margin: 0 0 24px;
	font-weight: var(--display-weight);
	color: var(--bg);
}
.cta-form .field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 18px;
}
.cta-form .field label {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 500;
}
.cta-form .field input,
.cta-form .field select,
.cta-form .field textarea {
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--bg);
	padding: 10px 0;
	font-family: var(--sans);
	font-size: 15px;
	transition: border-color 0.2s ease;
	border-radius: 0;
}
.cta-form .field input:focus,
.cta-form .field select:focus,
.cta-form .field textarea:focus {
	outline: none;
	border-color: var(--accent-soft);
}
.cta-form .field textarea {
	resize: vertical;
	min-height: 80px;
}
.cta-form .field select option { background: var(--ink); color: var(--bg); }

.btn-submit {
	width: 100%;
	background: var(--accent-soft);
	color: var(--ink);
	border: none;
	padding: 16px;
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	margin-top: 12px;
	transition: background 0.2s ease;
}
.btn-submit:hover { background: var(--bg); }

/* WPForms / Fluent / Gravity inside cta-form: inherit dark styling */
.cta-form .wpforms-field,
.cta-form .frm_form_field,
.cta-form .fluentform .ff-el-group {
	margin-bottom: 18px;
}
.cta-form input[type="text"],
.cta-form input[type="email"],
.cta-form input[type="tel"],
.cta-form select,
.cta-form textarea {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
	color: var(--bg) !important;
	padding: 10px 0 !important;
	font-family: var(--sans) !important;
	border-radius: 0 !important;
}
.cta-form label {
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 11px !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
}
.cta-form button[type="submit"],
.cta-form input[type="submit"] {
	width: 100%;
	background: var(--accent-soft) !important;
	color: var(--ink) !important;
	border: none !important;
	padding: 16px !important;
	font-family: var(--sans) !important;
	font-size: 13px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	border-radius: 0 !important;
}

/* ----------- FOOTER ----------- */
.site-footer {
	background: #0e0e0e;
	color: rgba(255, 255, 255, 0.6);
	padding: 80px 0 32px;
	font-size: 14px;
	margin-top: 0;
	border-top: 0;
}

/* Three columns since the Services list came out: brand, Service Area, Contact. */
.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 60px;
	margin-bottom: 60px;
}

.footer-brand .logo-text { color: var(--bg); }
.footer-brand .logo-text small { color: rgba(255, 255, 255, 0.4); }

.footer-logo-link {
	display: inline-block;
}
.footer-logo {
	display: block;
	height: 140px;
	width: auto;
	max-width: 100%;
}
.footer-brand p {
	margin-top: 20px;
	max-width: 320px;
	line-height: 1.7;
}

.site-footer h2 {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bg);
	margin: 0 0 20px;
	font-weight: 500;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.site-footer ul a {
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.2s ease;
}
.site-footer ul a:hover { color: var(--accent-soft); }

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 32px;
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	flex-wrap: wrap;
	gap: 16px;
}
.footer-bottom .license {
	font-family: var(--sans);
}

/* ----------- PAGE / GENERIC ----------- */
.site-main { padding-bottom: 4rem; }

.page-hero {
	background: var(--bg-deep);
	padding: 80px 0 60px;
	border-bottom: 1px solid var(--line);
}
.page-hero h1 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	margin: 0;
	font-weight: 500;
	text-wrap: pretty;
}
.page-hero h1 em { font-style: italic; color: var(--accent); }
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero .lead {
	margin: 24px 0 0;
	line-height: 1.55;
	text-wrap: pretty;
}

.entry { padding: 60px 0 80px; }
.entry-content { max-width: 100%; margin: 0; }
.entry-content h2,
.entry-content h3 {
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-weight: var(--display-weight);
}
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { text-decoration: none; }

/* ----------- REVEAL ANIM ----------- */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ----------- RESPONSIVE ----------- */
@media (max-width: 1024px) {
	section.tessera-section { padding: 80px 0; }
	/*
	 * The logo height option is a desktop figure (140px on this site). Below
	 * 1024 the nav collapses to a burger and the header is just logo + phone,
	 * so an unclamped logo sets the whole header height. There was no clamp
	 * between 641 and 1024 at all, which is where the header ran ~176px tall.
	 */
	:root { --logo-height: min(var(--logo-height-desktop), 76px); }
	.site-header__inner { padding: 12px 24px; }
	.hero-grid,
	.why-grid,
	.area-grid,
	.cta-grid { grid-template-columns: 1fr; gap: 60px; }
	/* Stacked, so the contact block runs the full width instead of hugging
	   the right edge under the headline. */
	.cta-contact { justify-content: flex-start; }
	.cta-contact .cta-direct { max-width: none; }
	.section-header { grid-template-columns: 1fr; gap: 32px; }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.gallery-grid { grid-template-columns: repeat(3, 1fr); }
	.process-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; }
	.process-steps-grid::before { display: none; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
	.review-grid { grid-template-columns: 1fr; }
	.menu-toggle { display: inline-flex; }

	/* Hide the desktop primary menu and disable hover-submenu behavior. */
	.site-nav > ul { display: none; }
	.site-nav .sub-menu { display: none; }
	.site-nav .menu-item-has-children:hover > .sub-menu,
	.site-nav .menu-item-has-children:focus-within > .sub-menu { display: none; }

	/* Slide-down panel anchored to the bottom of the header. */
	.site-header.menu-open .site-nav > ul {
		display: flex;
		flex-direction: column;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		background: var(--paper);
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
		padding: 4px 0;
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
		z-index: 30;
		font-size: 16px;
	}
	.site-header.menu-open .site-nav > ul > li {
		width: 100%;
		border-top: 1px solid var(--line);
	}
	.site-header.menu-open .site-nav > ul > li:first-child { border-top: 0; }
	.site-header.menu-open .site-nav > ul > li > a {
		display: block;
		padding: 16px 24px;
		font-weight: 500;
		color: var(--ink);
	}
	.site-header.menu-open .site-nav > ul > li > a:hover { color: var(--accent); }

	/* Submenus render inline as an indented sub-list, not an absolute popover. */
	.site-header.menu-open .site-nav .sub-menu {
		display: flex;
		flex-direction: column;
		position: static;
		transform: none;
		min-width: 0;
		background: transparent;
		border: 0;
		padding: 0 0 8px;
		box-shadow: none;
		z-index: auto;
	}
	.site-header.menu-open .site-nav .sub-menu li { width: 100%; border: 0; }
	.site-header.menu-open .site-nav .sub-menu a {
		padding: 10px 24px 10px 40px;
		font-size: 14px;
		color: var(--ink-soft);
		white-space: normal;
	}
	.site-header.menu-open .site-nav .sub-menu a:hover {
		background: var(--bg-deep);
		color: var(--accent);
	}

	body.menu-open { overflow: hidden; }
}

@media (max-width: 640px) {
	.container,
	.wrap { padding: 0 20px; }
	.site-header__inner { padding: 12px 20px; }
	:root { --logo-height: min(var(--logo-height-desktop), 68px); }
	section.tessera-section { padding: 64px 0; }
	.services-grid { grid-template-columns: 1fr; }
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.process-steps-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.hero-meta { flex-wrap: wrap; gap: 20px; }
	.trust-strip-inner { gap: 24px; font-size: 10px; }
	.phone-link { display: none; }
	.area-towns { grid-template-columns: 1fr; }
	.cta-form { padding: 28px 20px; }
}

/* ==========================================================================
   Long-form content components — sections, intros, lists, cards, steps.
   Used by any page with rich body content (about, services, areas, etc.).
   Hero-style leads use the global .lead rule above; .page-hero .lead adds
   hero-only overrides. Body intros use .intro. Sections use .section.
   ========================================================================== */

.intro {
	font-size: 1.075rem;
	color: var(--ink-soft);
	margin-bottom: 2.5rem;
}

.section {
	margin: 3rem 0;
	scroll-margin-top: 90px;
}
.section > h2 {
	margin-top: 0;
	margin-bottom: 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--accent);
	display: inline-block;
	font-family: var(--display);
	font-stretch: var(--display-stretch);
}

.feature-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: grid;
	gap: 0.85rem;
}
.feature-list li {
	position: relative;
	padding-left: 1.75rem;
	line-height: 1.55;
}
.feature-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	background: var(--accent);
	transform: rotate(45deg);
}
.feature-list li strong { color: var(--ink); }

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}
.card {
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 1.5rem 1.5rem;
	border-radius: 0;
	border-left: 3px solid var(--accent);
}
.card h3 {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	font-weight: var(--display-weight);
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	letter-spacing: -0.005em;
}
.card p {
	margin: 0;
	font-size: 0.97rem;
	color: var(--ink-soft);
	line-height: 1.6;
}

.process-steps {
	list-style: none;
	counter-reset: step;
	padding: 0;
	margin: 1.5rem 0;
	display: grid;
	gap: 1rem;
}
.process-steps > li {
	counter-increment: step;
	position: relative;
	padding: 1.1rem 1.25rem 1.1rem 4rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
	line-height: 1.55;
}
.process-steps > li::before {
	content: counter(step);
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-family: var(--display);
	font-stretch: var(--display-stretch);
	font-weight: 500;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spec-callout {
	background: var(--bg-deep);
	border-left: 3px solid var(--accent);
	padding: 1.1rem 1.4rem;
	margin: 1.5rem 0;
	border-radius: 0;
	font-size: 0.97rem;
}
.spec-callout strong { color: var(--accent); }
.spec-callout > p:first-child { margin-top: 0; }
.spec-callout > p:last-child { margin-bottom: 0; }

.page-cta {
	margin-top: 3.5rem;
	padding: 2.5rem 1.75rem;
	background: var(--bg-deep);
	border: 1px solid var(--line);
	border-radius: 0;
	text-align: center;
}
.page-cta h2 {
	margin: 0 0 0.5rem;
	border: 0;
	padding: 0;
	font-size: 1.85rem;
	font-family: var(--display);
	font-stretch: var(--display-stretch);
}
.page-cta p {
	margin: 0 0 1.5rem;
	color: var(--ink-soft);
	font-size: 1.05rem;
}
.page-cta__btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 600px) {
	.process-steps > li { padding-left: 3.5rem; }
	.process-steps > li::before { width: 2rem; height: 2rem; font-size: 0.95rem; left: 0.75rem; }
	.page-cta { padding: 2rem 1.25rem; }
}

/* Search / pagination — minimal */
.search-form { display: flex; gap: 8px; }
.search-field {
	padding: 10px 12px;
	border: 1px solid var(--line);
	background: var(--paper);
	flex: 1;
}
.search-submit {
	padding: 10px 18px;
	background: var(--ink);
	color: var(--bg);
	border: 0;
	cursor: pointer;
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pagination, .nav-links { margin-top: 2rem; }
.page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--line);
	margin-right: 4px;
	color: var(--ink);
}
.page-numbers.current {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}