/* ==========================================================================
   Home Touch Finishing — site styles
   ========================================================================== */

:root {
	/* Neutrals */
	--color-heading: #1c1a1d;
	--color-base: #ffffff;
	--color-contrast: #1c1a1d;
	--color-gray-2: #faf7fb;
	--color-gray-3: #f4eef6;
	--color-muted: #6b6570;

	/* Brand — #7f017f is the logo purple, taken from the mark itself. */
	--color-brand: #7f017f;
	--color-brand-deep: #660166;      /* hover / pressed */
	--color-brand-ink: #3d0140;       /* deep aubergine for headings on tint */

	/* Lavender tints, mixed from the brand purple toward white so the whole
	   family stays on one hue instead of drifting pink. */
	--tint-lavender: #ded2e6;         /* the trust-signal band */
	--tint-lavender-deep: #c4addb;    /* accent rule under it */
	--tint-lavender-soft: #f3ecf6;    /* quiet section backgrounds */
	--color-surface-grey: #f3ecf6;

	/* Warm cream — the neutral ground from the brand board. Alternating
	   sections sit on this rather than plain white. */
	--color-cream: #faf6ef;
	--color-cream-deep: #f3ece1;

	/* Legacy aliases kept so existing sections don't need touching. */
	--color-brand-pink: var(--color-brand);
	--color-brand-pink-deep: var(--color-brand-deep);
	--color-brand-charcoal: #1c1a1d;
	--color-stone: #6b6570;
	--color-btn: #7f017f;
	--color-btn-hover: #660166;
	--color-cta: #7f017f;
	--color-cta-hover: #660166;
	--tint-blush: #f3ecf6;
	--tint-cream: #faf6ef;
	--tint-grey: #f3ecf6;
	--tint-sage: #ece4f1;
	--color-cat-text: #3f3a42;
	--color-cream-section: #faf6ef;

	/* Fonts */
	--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-script: "Parisienne", "Snell Roundhand", cursive;
	--font-heading: "Playfair Display", Georgia, serif;
	--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Layout */
	--content-size: 1300px;
	--wide-size: 1650px;

	/* Radius — softly rounded, matching the button on the brand sheet. Shared by
	   the buttons and the quote-form inputs so they stay consistent. */
	--radius-square: 6px;
	--shadow-natural: 6px 6px 9px rgba(28, 26, 29, 0.14);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--color-base);
	color: var(--color-contrast);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: 700;
	margin: 0;
}

h1 { font-size: 4.5rem; letter-spacing: -0.045em; line-height: 1.2; }
h2 { font-size: 2.44rem; letter-spacing: -0.035em; line-height: 1.2; }
h3 { font-size: 1.95rem; letter-spacing: -0.03em; }
h4 { font-size: 1.56rem; letter-spacing: -0.03em; }
h5 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase; }
h6 { font-size: 1rem; letter-spacing: -0.02em; text-transform: uppercase; }

p { margin: 0 0 1.5rem; }
p:last-child { margin-bottom: 0; }

mark {
	background: none;
	color: var(--color-brand-pink-deep);
	font-style: italic;
	font-family: var(--font-heading);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-base);
	color: var(--color-heading);
	padding: 0.75rem 1.25rem;
	z-index: 10000;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.section { padding: 5.06rem 1.5rem; max-width: var(--content-size); margin: 0 auto; }
.section__head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }

.eyebrow {
	color: var(--color-stone);
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 1.125rem;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}
.eyebrow--onimage { color: rgba(255, 255, 255, 0.78); }
/* Beat the more specific `.cta__copy p` / `.process__copy p` body-text colours */
.cta__copy p.eyebrow,
.process__copy p.eyebrow { color: var(--color-stone); }

.ondark { color: var(--color-base); }
.onmark.ondark, h2.ondark mark { color: var(--color-brand-pink); }

/* Buttons — one consistent treatment sitewide: dark-grey rectangle, white text.
   Variants now differ only in padding/width, never in colour or shape. */
.btn {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 500;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	border-radius: var(--radius-square);
	background: var(--color-btn);
	color: var(--color-base);
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); background: var(--color-btn-hover); }

.btn--pill {
	padding: 0.85em 1.75em;
}

.btn--square {
	padding: 0.85em 2em;
	margin-top: 0.5rem;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 100;
	background: var(--color-base);
}
.site-header__inner {
	display: flex;
	align-items: center;
	padding: 1.5rem 2.5rem;
	max-width: var(--wide-size);
	margin: 0 auto;
}

/* Brand lockup: brush mark + two-line serif wordmark, per the brand sheet.
   The second line is set in small caps with wide tracking, which is what gives
   the mark its formal, stationery-like feel. */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
	color: var(--color-heading);
}
.brand__mark { display: block; width: 88px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__line {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.72rem;
	letter-spacing: 0.012em;
	white-space: nowrap;
}
/* Small caps rather than uppercase — on the brand sheet the F of FINISHING
   stands taller than the letters after it, which is what small caps does and
   text-transform cannot. Written "Finishing" in the markup for that reason. */
.brand__line--sub {
	font-size: 1.5rem;
	font-weight: 600;
	font-variant: small-caps;
	font-variant-caps: small-caps;
	text-transform: none;
	letter-spacing: 0.2em;
	margin-top: 0.06em;
}
.brand__llc {
	font-size: 0.52em;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	margin-left: 1.1em;
}
.brand--footer { color: var(--color-heading); }

/* ==========================================================================
   Hero — full-bleed photo, headline over a white scrim on the left
   ========================================================================== */

.hero {
	position: relative;
	width: 100%;
	min-height: 470px;
	height: 57vh;
	max-height: 610px;
	overflow: hidden;
	background: var(--color-gray-3);
}
.hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% center;
}
/* The photo is bright on the right and busy on the left, so the copy needs its
   own ground. A gradient rather than a solid panel keeps the kitchen readable
   right up to the text instead of cutting a hard edge through it. */
.hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.97) 0%,
		rgba(255, 255, 255, 0.93) 26%,
		rgba(255, 255, 255, 0.62) 44%,
		rgba(255, 255, 255, 0) 62%
	);
}
.hero__inner {
	position: relative;
	height: 100%;
	max-width: var(--wide-size);
	margin: 0 auto;
	padding: 0 2.5rem;
	display: flex;
	align-items: center;
}
.hero__copy { max-width: 34rem; }

.hero__heading { margin: 0 0 1.5rem; }
.hero__serif,
.hero__script { display: block; }
.hero__serif {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(2.1rem, 3.9vw, 3.3rem);
	line-height: 1.08;
	letter-spacing: -0.005em;
	color: var(--color-heading);
}
.hero__script {
	font-family: var(--font-script);
	font-weight: 400;
	/* Script faces sit visually smaller than their point size, so this runs a
	   touch larger than the serif line above to read as the same weight. */
	font-size: clamp(2.3rem, 4.3vw, 3.65rem);
	line-height: 1.18;
	color: var(--color-brand);
	margin-top: 0.06em;
}
.hero__text {
	font-family: var(--font-body);
	font-size: 1.02rem;
	line-height: 1.62;
	color: #46414a;
	margin: 0 0 2rem;
	max-width: 24rem;
}

/* Primary call to action — the one solid purple block on the page. */
.btn--brand {
	background: var(--color-brand);
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	padding: 1.15em 2.1em;
	border-radius: var(--radius-square);
}
.btn--brand:hover { background: var(--color-brand-deep); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Before/after compare slider
   --------------------------------------------------------------------------
   --split is the divider's distance from the left edge. The "after" photo sits
   on top and is clipped away to the LEFT of the divider, so pulling the handle
   left wipes the new finish in from the right. Default 50% means the no-JS and
   reduced-motion cases both land on a legible split-screen.
   -------------------------------------------------------------------------- */
.compare {
	--split: 50%;
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.compare__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}
.compare__img--after {
	clip-path: inset(0 0 0 var(--split));
}

/* A real range input drives the whole thing: dragging, click-to-jump, arrow
   keys and screen-reader announcement all come for free. It's transparent —
   the divider below is the visible control. */
.compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	opacity: 0;
	cursor: ew-resize;
	touch-action: pan-y;
}
/* Zero-width thumb on purpose. A range maps its value onto
   [thumbWidth/2, width - thumbWidth/2], so any real thumb width makes the
   visible divider drift away from the cursor — worst at the two ends. With no
   thumb, value% and x% are the same number and the handle tracks the pointer. */
.compare__range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 0;
	height: 100%;
}
.compare__range::-moz-range-thumb {
	width: 0;
	height: 100%;
	border: 0;
	border-radius: 0;
}
.compare__range:focus { outline: none; }

.compare__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--split);
	width: 2px;
	margin-left: -1px;
	background: var(--color-base);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.compare__handle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-base);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* Two chevrons pointing outward, so the handle reads as "drag me both ways". */
.compare__handle::before,
.compare__handle::after {
	content: "";
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}
.compare__handle::before {
	border-right: 8px solid var(--color-brand-pink-deep);
	margin-right: 5px;
}
.compare__handle::after {
	border-left: 8px solid var(--color-brand-pink-deep);
	margin-left: 5px;
}
/* The input is transparent, so focus has to show on the handle instead. */
.compare__range:focus-visible ~ .compare__divider .compare__handle {
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28), 0 0 0 4px var(--color-brand-pink);
}
.compare:hover .compare__handle { transform: scale(1.06); }

.compare__label {
	position: absolute;
	top: 1.5rem;
	font-family: var(--font-hero-eyebrow);
	font-weight: 600;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 0.6em 0.95em;
	border-radius: 2px;
	background: rgba(52, 55, 60, 0.82);
	color: #fff;
	pointer-events: none;
}
.compare__label--before { left: 1.5rem; }
.compare__label--after { right: 1.5rem; }


/* Navigation. The brand sheet's header is logo-only, which worked while this
   was one page; with service pages there has to be a way to reach them. Kept
   quiet — small caps, hairline underline on hover — so the lockup still leads. */
.site-header__inner { justify-content: space-between; gap: 2rem; }

.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 0.83rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-heading);
}
.site-nav__list a {
	display: inline-block;
	padding: 0.4rem 0;
	border-bottom: 1.5px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible { color: var(--color-brand); border-bottom-color: var(--color-brand); }
.site-nav__list a[aria-current="page"] { color: var(--color-brand); border-bottom-color: var(--color-brand); }

/* Tap-to-call. Primary action on a phone, so it stays visible at every width. */
.phone-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--color-brand);
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.85em 1.4em;
	border-radius: var(--radius-square);
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.phone-cta:hover { background: var(--color-brand-deep); transform: translateY(-2px); }
.phone-cta__icon { flex-shrink: 0; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--color-heading); }

/* Positioning line under the hero headline. Part of the <h1> so the page's
   heading carries the business name and location, while the display lines above
   keep the brand sheet's look. */
.hero__positioning {
	display: block;
	margin-top: 1.15rem;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--color-brand-ink);
}

/* ==========================================================================
   Why homeowners choose Abby
   ========================================================================== */

.why { background: var(--color-cream); max-width: none; }
.why__inner { max-width: var(--content-size); margin: 0 auto; }
.why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	margin-top: 3rem;
}
.why__item { text-align: center; }
.why__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--tint-lavender);
	color: var(--color-brand-ink);
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 600;
	margin-bottom: 1.1rem;
}
.why__item h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.why__item p { color: var(--color-cat-text); margin: 0; }

/* Handwritten "by Abby" accent from the brand board. */
.byline {
	display: block;
	font-family: var(--font-script);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--color-brand);
	margin-top: 0.85rem;
}

/* ==========================================================================
   Transformations — before/after sliders
   ========================================================================== */

.transformations { background: var(--color-base); max-width: none; }
.transformations__inner { max-width: var(--content-size); margin: 0 auto; }
.transformations__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem;
	margin-top: 3rem;
}
.transformation__frame {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius-square);
	background: var(--color-cream-deep);
}
.transformation__frame .compare { position: absolute; inset: 0; }
.transformation__caption {
	margin: 1rem 0 0;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--color-cat-text);
}

/* ==========================================================================
   Trust signals — lavender band under the hero
   ========================================================================== */

.trustbar {
	background: var(--tint-lavender);
	border-bottom: 6px solid var(--tint-lavender-deep);
	padding: 1.9rem 1.5rem;
}
.trustbar__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--content-size);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.trustbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 1.5rem;
	color: var(--color-brand-ink);
}
/* Hairline rules between columns, matching the brand sheet. Applied to the
   left edge of every item except the first so the row has no outer borders. */
.trustbar__item + .trustbar__item {
	border-left: 1px solid rgba(61, 1, 64, 0.22);
}
.trustbar__icon {
	width: 38px;
	height: 38px;
	margin-bottom: 0.6rem;
	color: var(--color-brand-ink);
}
.trustbar__label {
	font-family: var(--font-body);
	font-size: 0.94rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	color: var(--color-brand-ink);
	margin: 0;
}

/* ==========================================================================
   Intro ("Make your space exceptional")
   ========================================================================== */

.intro__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}
.intro__copy .lead { font-size: 1.125rem; color: #3f4448; }
.intro__copy h2 { margin: 0.5rem 0 1.5rem; }
.intro__image img { border-radius: 4px; }

.counters {
	display: flex;
	gap: 2.5rem;
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid #e6e4e2;
}
.counter { text-align: left; }
.counter__num {
	font-family: var(--font-heading);
	font-size: 2.75rem;
	font-weight: 700;
	color: var(--color-heading);
	margin: 0;
}

/* ==========================================================================
   Professional Collections (cover image + tilt grid)
   ========================================================================== */

.collections {
	background-size: cover;
	background-position: center;
	position: relative;
	padding: 6.5rem 1.5rem 5rem;
}
.collections::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}
.collections__inner {
	position: relative;
	max-width: var(--content-size);
	margin: 0 auto;
	text-align: left;
}
.collections h2 { margin-bottom: 3rem; }

.collections__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.collections__tile {
	display: block;
	background: var(--color-base);
	overflow: hidden;
	will-change: transform;
}
.collections__tile img { aspect-ratio: 1 / 1; object-fit: cover; }
.collections__tile h6 {
	padding: 1rem;
	margin: 0;
	color: var(--color-heading);
}

/* ==========================================================================
   Process rows (Design Goals / Supply / Installation)
   ========================================================================== */

.process__row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 3rem;
	align-items: center;
	margin-bottom: 5rem;
}
.process__row:last-child { margin-bottom: 0; }
.process__image img { border-radius: 4px; }
.process__title {
	background: linear-gradient(90deg, #fff 0%, rgba(218, 150, 161, 0.14) 100%);
	padding: 2.25rem;
	margin-left: -80px;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	font-size: 1.7rem;
}
.process__copy p { color: #3f4448; }

/* ==========================================================================
   Product grid ("Our most popular kitchens")
   ========================================================================== */

.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 2rem;
}
.product__image {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 3px;
	background: var(--color-gray-2);
}
.product__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1); }
.product__image:hover img { transform: scale(1.06); }
/* Title carries the gap under the image now that the per-card button is gone. */
.product__title { font-size: 1.25rem; margin: 1.15rem 0 0; }
.product__cat { margin-bottom: 0.25rem; }
.product__cat a { color: var(--color-cat-text); font-size: 0.9rem; }

/* ==========================================================================
   CTA ("Sustainable Custom Dreams for Your Kitchen")
   ========================================================================== */

.cta__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 3rem;
	align-items: center;
}
.cta__image { position: relative; border-radius: 4px; overflow: hidden; }
.cta__image img { aspect-ratio: 1 / 1; object-fit: cover; }
.cta__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	text-align: center;
	color: var(--color-base);
	background: rgba(0, 0, 0, 0.76);
	padding: 1.25rem 1rem;
	font-family: var(--font-heading);
	font-size: 1.125rem;
}
.cta__copy .lead { font-size: 1.125rem; color: #3f4448; }
.cta__copy p { color: #3f4448; }

.cta__phone {
	margin: 1rem 0 0;
	font-size: 0.95rem;
	color: var(--color-cat-text);
}
.cta__phone a { color: var(--color-brand); border-bottom: 1px solid currentColor; }

/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}
.gallery__grid figure { margin: 0; overflow: hidden; }
.gallery__grid img { width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 0.4s ease; }
.gallery__grid figure:hover img { transform: scale(1.04); }

.gallery__grid figure.gallery__item--fade { position: relative; }
.gallery__item--fade .gallery__img--reveal {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.4s ease;
}
.gallery__item--fade:hover .gallery__img--reveal { opacity: 1; }
.gallery__hint {
	position: absolute;
	bottom: 0.5rem;
	right: 0.75rem;
	font-size: 0.7rem;
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	padding: 0.2rem 0.55rem;
	border-radius: 3px;
	letter-spacing: 0.02em;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.gallery__item--fade:hover .gallery__hint { opacity: 0; }

/* ==========================================================================
   Trusted / team
   ========================================================================== */

.trusted { background: var(--color-cream-section); max-width: none; padding: 5.4rem 1.5rem; }
.trusted__top {
	max-width: var(--content-size);
	margin: 0 auto 3rem;
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr);
	gap: 2rem;
	align-items: center;
}
.trusted__intro p { color: var(--color-muted); }

.team {
	max-width: var(--content-size);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.team-member { text-align: center; padding: 1.5rem; }
.team-member img { border-radius: 50%; width: 140px; height: 140px; object-fit: cover; margin: 0 auto 1rem; }
.team-member h4 { font-size: 1.15rem; margin-bottom: 0.15rem; }
.team-member p { color: var(--color-muted); font-size: 0.9rem; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* ==========================================================================
   Blog
   ========================================================================== */

.blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}
.post img { border-radius: 3px; aspect-ratio: 16/10; object-fit: cover; margin-bottom: 1rem; }
.post__title { margin-bottom: 0.5rem; font-size: 1.15rem; }
.post__excerpt { font-size: 0.95rem; color: #4a4f53; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--color-surface-grey); }
.site-footer__inner {
	max-width: var(--wide-size);
	margin: 0 auto;
	padding: 4rem 1.5rem;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 2rem;
}
.footer-logo { margin-bottom: 1.5rem; }
.social-links { list-style: none; display: flex; gap: 0.75rem; margin: 0; padding: 0; }
.social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--color-brand-charcoal);
	color: var(--color-base);
	transition: background-color 0.2s ease;
	font-size: 0.75rem;
	font-weight: 700;
}
.social-links a:hover { background: var(--color-brand-pink-deep); }
.social-links svg { display: block; }
.footer-col h6 { margin-bottom: 1rem; }
.footer-col p { margin-bottom: 1.5rem; color: #3f4448; }
.footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }

/* ==========================================================================
   Service pages
   ========================================================================== */

/* Page heroes carry a single long headline rather than the display lockup.
   Height must be driven by the content: .hero sets overflow:hidden, so a fixed
   height clipped the top of the H1 and the bottom of the button. */
.hero--page {
	height: auto;
	min-height: 420px;
	max-height: none;
	display: flex;
	align-items: center;
}
/* .hero--page is a flex container, so .hero__inner would otherwise shrink to
   its content and its `margin: 0 auto` would centre it. Fill the width so the
   copy stays left-aligned like the homepage. */
.hero--page .hero__inner {
	width: 100%;
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}
/* Page copy runs wider than the homepage's, so the scrim has to hold longer
   before it fades or the body text lands on the busy part of the photo. */
.hero--page .hero__scrim {
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.97) 0%,
		rgba(255, 255, 255, 0.95) 38%,
		rgba(255, 255, 255, 0.72) 55%,
		rgba(255, 255, 255, 0) 74%
	);
}
.hero--page .hero__copy { max-width: 38rem; }
.hero__heading--page {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--color-heading);
	margin: 0 0 1.25rem;
	max-width: 26ch;
}

.servicepage { background: var(--color-cream); max-width: none; }
.servicepage__inner {
	max-width: 760px;
	margin: 0 auto;
	display: grid;
	gap: 2.75rem;
}
.servicepage__block h2 { font-size: 1.85rem; margin-bottom: 0.75rem; }
.servicepage__block p { margin: 0; color: var(--color-cat-text); }
.servicepage__block a { color: var(--color-brand); border-bottom: 1px solid currentColor; }

.faqlist { max-width: 760px; margin: 0 auto; display: grid; gap: 1.75rem; }
.faqlist__item { border-top: 1px solid var(--tint-lavender); padding-top: 1.5rem; }
.faqlist dt {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--color-heading);
	margin-bottom: 0.5rem;
}
.faqlist dd { margin: 0; color: var(--color-cat-text); }

/* ==========================================================================
   Closing brand strip + script signature
   ========================================================================== */

.brandstrip {
	background: var(--color-base);
	text-align: center;
	padding: 3rem 1.5rem 2.25rem;
	border-top: 1px solid var(--tint-lavender);
}
.brandstrip__logo {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	max-width: 100%;
	color: var(--color-heading);
	margin-bottom: 1.1rem;
}
.brandstrip__logo img { width: 120px; height: auto; }
.brandstrip__word {
	max-width: 100%;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 3.4vw, 2.3rem);
	font-variant: small-caps;
	font-variant-caps: small-caps;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.brandstrip__llc {
	font-size: 0.46em;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	margin-left: 0.7em;
}
.brandstrip__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-body);
	font-size: 1rem;
	color: #46414a;
	margin: 0;
}
.brandstrip__meta a { color: inherit; }
.brandstrip__meta a:hover { color: var(--color-brand); }
.brandstrip__pipe { color: var(--tint-lavender-deep); }

.signature {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--tint-lavender-deep);
	padding: 1.15rem 1.5rem;
	color: var(--color-brand-ink);
}
.signature__script {
	font-family: var(--font-script);
	font-size: 1.5rem;
	line-height: 1;
}
.signature__llc {
	font-family: var(--font-display);
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	align-self: flex-end;
	padding-bottom: 0.15rem;
}
.signature__mark { width: 46px; height: auto; }

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

@media (max-width: 1100px) {
	.trusted__top { grid-template-columns: 1fr 1fr; }
	.trusted__top .trusted__intro { grid-column: 1 / -1; }

	/* Nav collapses to a toggle; the call button stays because tapping to call
	   is the main thing a phone visitor does. */
	.nav-toggle { display: flex; }
	.site-nav { gap: 0.5rem; }
	.site-nav__list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		background: var(--color-base);
		padding: 1rem 1.5rem 1.5rem;
		box-shadow: var(--shadow-natural);
		font-size: 0.9rem;
	}
	.site-nav.is-open .site-nav__list { display: flex; }
	.phone-cta { padding: 0.7em 0.9em; font-size: 0.72rem; }
	.phone-cta__label { display: none; }
}

@media (max-width: 900px) {
	.site-header__inner { padding: 1.15rem 1.25rem; gap: 0.75rem; }
	.brand__mark { width: 66px; }
	.brand__line { font-size: 1.28rem; }
	.brand__line--sub { font-size: 1rem; letter-spacing: 0.14em; }

	.hero__positioning { font-size: 0.72rem; letter-spacing: 0.11em; }

	.why__grid { grid-template-columns: 1fr; gap: 2rem; }
	.transformations__grid { grid-template-columns: 1fr; gap: 2rem; }

	/* Hero goes portrait-ish and the scrim turns vertical: on a narrow screen a
	   left-to-right fade would either wash out the photo or leave the text on
	   noise, so the copy sits on a solid top band with the kitchen below it. */
	.hero { height: auto; max-height: none; min-height: 0; }
	.hero__photo { position: relative; height: auto; aspect-ratio: 16 / 9; object-position: 58% center; }
	.hero--page { height: auto; max-height: none; min-height: 0; }
	.hero__heading--page { max-width: none; }
	.hero__scrim { display: none; }
	.hero__inner { position: static; padding: 2.5rem 1.5rem 3rem; }
	.hero__copy { max-width: none; }
	.hero__text { max-width: none; }

	.trustbar { padding: 2.25rem 1rem; }
	.trustbar__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
	/* With two columns the "every item but the first" rule would draw a border
	   down the left of the third cell. Reset and target odd/even instead. */
	.trustbar__item + .trustbar__item { border-left: 0; }
	.trustbar__item:nth-child(even) { border-left: 1px solid rgba(61, 1, 64, 0.22); }

	.intro__grid,
	.process__row,
	.cta__grid { grid-template-columns: 1fr; }
	.intro__image { order: -1; }
	.process__title { margin-left: 0; }

	.collections__grid,
	.products,
	.blog__grid { grid-template-columns: repeat(2, 1fr); }
	.gallery__grid { grid-template-columns: repeat(2, 1fr); }

	.team { grid-template-columns: repeat(2, 1fr); }

	.site-footer__inner { grid-template-columns: 1fr 1fr; }

	.brandstrip__meta { flex-direction: column; gap: 0.35rem; }
	.brandstrip__pipe { display: none; }

	/* The wordmark is nowrap on desktop to keep the lockup on one line; on a
	   phone that pushes ~125px past the viewport, so stack it and let it wrap. */
	.brandstrip { padding: 2.5rem 1.25rem 2rem; }
	.brandstrip__logo { flex-direction: column; gap: 0.6rem; }
	.brandstrip__logo img { width: 92px; }
	.brandstrip__word {
		white-space: normal;
		font-size: clamp(1.1rem, 5.6vw, 1.7rem);
		line-height: 1.25;
	}
	.signature__script { font-size: 1.25rem; }
	.signature__mark { width: 38px; }
}

@media (max-width: 560px) {
	.collections__grid,
	.products,
	.blog__grid,
	.gallery__grid { grid-template-columns: 1fr; }
	.counters { flex-direction: column; gap: 1.5rem; }
	.trusted__top { grid-template-columns: 1fr; }
	.team { grid-template-columns: 1fr; }
	.site-footer__inner { grid-template-columns: 1fr; }

	.hero__photo { aspect-ratio: 4 / 3; }
	.brand__mark { width: 54px; }
	.brand__line { font-size: 1.08rem; }
	.phone-cta__number { display: none; }
	.phone-cta { padding: 0.7em; }
	.brand__line--sub { font-size: 0.85rem; }
	.trustbar__label { font-size: 0.82rem; }
}

/* ==========================================================================
   Contact / quote request form
   ========================================================================== */

.contact { background: var(--tint-cream); max-width: none; }
.contact .section__head,
.contact .quote-form { max-width: 720px; margin-left: auto; margin-right: auto; }
.contact__intro { color: #4a4f53; margin-top: 0.75rem; }
.contact__intro a { color: var(--color-cta); font-weight: 600; text-decoration: underline; }

.quote-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
.quote-form__field { margin: 0; display: flex; flex-direction: column; }
.quote-form__field--wide { grid-column: 1 / -1; }
.quote-form__field label {
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-heading);
	margin-bottom: 0.4rem;
}
.quote-form__field label span { color: var(--color-cta); }
.quote-form__field input,
.quote-form__field textarea {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-contrast);
	background: var(--color-base);
	border: 1px solid #ddd8d4;
	border-radius: var(--radius-square);
	padding: 0.75rem 0.9rem;
	width: 100%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.quote-form__field textarea { resize: vertical; }
.quote-form__field input:focus,
.quote-form__field textarea:focus {
	outline: none;
	border-color: var(--color-cta);
	box-shadow: 0 0 0 3px rgba(163, 93, 106, 0.15);
}
.quote-form__field input[aria-invalid="true"],
.quote-form__field textarea[aria-invalid="true"] { border-color: #b3261e; }
.quote-form__error { color: #b3261e; font-size: 0.85rem; margin: 0.35rem 0 0; }

/* Honeypot — hidden from people, still reachable by bots */
.quote-form__botcheck {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

.quote-form__submit { margin-top: 1.5rem; border: 0; cursor: pointer; font-size: 0.9rem; }
.quote-form__submit[disabled] { opacity: 0.6; cursor: default; transform: none; }
.quote-form__status { margin: 1rem 0 0; font-weight: 600; }
.quote-form__status--ok { color: #1c6b3f; }
.quote-form__status--err { color: #b3261e; }

@media (max-width: 560px) {
	.quote-form__grid { grid-template-columns: 1fr; }
}