/* ==========================================================================
   Cocina — Kitchen WordPress Theme (Home 3) — static clone
   Design tokens pulled from the theme's real theme.json custom properties
   (app.css) and the RevSlider hero markup — not guessed.
   ========================================================================== */

:root {
	/* Colors (from --wp--preset--color--* in theme.json) */
	--color-heading: #0c1a13;
	--color-base: #ffffff;
	--color-contrast: #000000;
	--color-gray-2: #fdf8f2;
	--color-gray-3: #fbf4ea;
	--color-muted: #6b7177;

	/* Brand colors sampled from the HomeTouch Finishing brush logo */
	--color-brand-pink: #da96a1;
	--color-brand-pink-deep: #c07d89;
	--color-brand-charcoal: #34373c;
	/* Soft blush wash — icon circles and tinted section backgrounds */
	/* Warm grey: quiet supporting label colour, so eyebrows read differently
	   from the pink heading accent. 5.4:1 on white, passes AA. */
	--color-stone: #6f6862;
	/* Neutral light surface — footer and any tinted section band */
	--color-surface-grey: #f2f1f0;
	/* Single button colour sitewide (the dark grey the pill button used) */
	--color-btn: #3b3b3b;
	--color-btn-hover: #2a2a2a;
	/* Primary CTA rose — deepened from the logo pink to clear AA with white text */
	--color-cta: #a35d6a;
	--color-cta-hover: #8d4e5a;
	/* Icon circle tints behind the trust-signal icons */
	--tint-blush: #f8ebee;
	--tint-cream: #fbf8ef;
	--tint-grey: #f2f1f0;
	--tint-sage: #e9efec;
	--color-cat-text: #161616;
	--color-cream-section: #fbf8ef;
	/* Fonts */
	--font-heading: "DM Sans", sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-hero-eyebrow: "Barlow", sans-serif;
	--font-hero-heading: "Teko", sans-serif;
	--font-hero-body: "Roboto", sans-serif;

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

	/* Radius */
	--radius-square: 3px;
	--shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   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;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 1.5rem;
	max-width: var(--wide-size);
	margin: 0 auto;
}
/* Horizontal lockup: brush mark + one-line wordmark.
   Type matches the h4 treatment used by "Beautiful Results" (DM Sans 700, 1.56rem, -0.03em). */
.site-logo {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
	text-decoration: none;
}
.site-logo__mark { display: block; width: 74px; height: auto; }
.site-logo__text {
	white-space: nowrap;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.56rem;
	letter-spacing: -0.03em;
	line-height: 1.1;
}
.site-logo__name { color: var(--color-brand-charcoal); }
.site-logo__word { color: var(--color-brand-pink-deep); }

.site-nav { flex: 1; display: flex; justify-content: center; }
.site-nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-heading);
}
.site-nav__list > li { position: relative; }
.site-nav__list > li > a { padding: 0.5rem 0; display: inline-block; }

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

.site-header__aside { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; }

/* Primary call-to-action. Deliberately the only rose button on the page — the
   dark-grey buttons are secondary actions, this one is the thing we want tapped.
   Rose is darkened to #a35d6a so white text clears 4.5:1 contrast. */
.phone-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1.15rem;
	border-radius: var(--radius-square);
	background: var(--color-cta);
	color: var(--color-base);
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.phone-cta:hover { background: var(--color-cta-hover); transform: translateY(-2px); }
.phone-cta__icon { flex-shrink: 0; }
.phone-cta__text { display: flex; flex-direction: column; line-height: 1.15; }
.phone-cta__label {
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.9;
}
.phone-cta__number {
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ==========================================================================
   Hero (RevSlider reconstructed as static CSS — single slide, no JS carousel)
   ========================================================================== */

.hero {
	position: relative;
	width: 100%;
	height: 745px;
	max-height: 82vh;
	overflow: hidden;
	background: var(--color-gray-3);
}
/* --------------------------------------------------------------------------
   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; }

/* Card geometry measured live from the source theme at 1440px (436x266px, text
   offsets: eyebrow 50px, heading 93px, body 229px from the card top). Anchored
   left rather than right so it sits over the open side of the workshop photo. */
.hero__card {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 436px;
	min-height: 266px;
	background: var(--color-base);
	padding: 50px 56px 40px 65px;
}
.hero__eyebrow {
	font-family: var(--font-hero-eyebrow);
	font-weight: 600;
	font-size: 12px;
	line-height: 25px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-brand-pink);
	margin: 0;
}
.hero__heading {
	font-family: var(--font-hero-heading);
	font-weight: 400;
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: 0;
	color: var(--color-contrast);
	text-transform: uppercase;
	margin: 18px 0 24px;
}
.hero__text {
	font-family: var(--font-hero-body);
	font-size: 15px;
	line-height: 22px;
	color: rgba(0, 0, 0, 0.65);
	margin: 0;
	max-width: 315px;
}

/* ==========================================================================
   Feature trio ("Professional Design" x3)
   ========================================================================== */

.feature-trio__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
}
/* Icons keep their original artwork and intrinsic sizes. A fixed-height first
   row just centres each one in the same vertical slot, so the titles below all
   start on the same line without any icon being scaled. */
.feature-trio__item {
	display: grid;
	grid-template-rows: 118px auto auto;
	justify-items: center;
	align-content: start;
}
/* Tinted disc behind each icon. The circle is a wrapper, so the icon artwork
   inside keeps its own intrinsic size and is never scaled. */
.feature-trio__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	align-self: center;
}
.feature-trio__icon--blush { background: var(--tint-blush); }
.feature-trio__icon--cream { background: var(--tint-cream); }
.feature-trio__icon--sage  { background: var(--tint-sage); }
.feature-trio__icon--grey  { background: var(--tint-grey); }
.feature-trio__item img { align-self: center; }
.feature-trio__item h4 {
	margin: 1.25rem 0 0.75rem;
	min-height: 3.2em; /* reserves two lines so titles AND the copy below stay aligned at every width */
	display: flex;
	align-items: center;
	justify-content: center;
}
.feature-trio__item p { color: #4a4f53; }

/* ==========================================================================
   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; }

/* ==========================================================================
   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; }
.site-nav__list > li > a:hover { color: var(--color-brand-pink-deep); }
.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; }

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

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

@media (max-width: 900px) {
	/* Mobile header: menu · logo · call. Equal 44px rails on both sides keep the
	   lockup optically centred no matter how wide the two controls render. */
	.site-header__inner {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		gap: 0.5rem;
		padding: 1rem 1.25rem;
	}
	.site-nav { order: 1; justify-content: flex-start; }
	.site-logo { order: 2; justify-content: center; }
	.site-header__aside { order: 3; justify-content: flex-end; }

	.site-nav__list { display: none; }
	/* Fills its rail, which also gets the menu button to a 44px tap target. */
	.nav-toggle { display: flex; width: 44px; height: 44px; align-items: center; }
	.nav-toggle span { width: 24px; }
	.site-nav.is-open .site-nav__list {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-base);
		padding: 1rem 1.5rem 1.5rem;
		box-shadow: var(--shadow-natural);
		gap: 0.25rem;
	}
/* Keep the call CTA on mobile — that's where tap-to-call matters most —
	   but collapse it to a 44px icon button so it fits beside the menu. */
	.site-header__aside { gap: 0.75rem; }
	.phone-cta {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}
	.phone-cta__text { display: none; }

	/* Scale the horizontal lockup down so it clears the two controls */
	.site-logo { gap: 0.7rem; }
	.site-logo__mark { width: 56px; }
	.site-logo__text { font-size: 1.2rem; }

	/* On mobile the card stacks under the photo instead of floating over it, so
	   the hero itself must be free to grow. Give the ASPECT to the slider and
	   let it sit in normal flow — pinning a ratio on .hero instead would clip
	   whatever the image didn't leave room for. */
	.hero { height: auto; max-height: none; aspect-ratio: auto; }
	.compare {
		position: relative;
		inset: auto;
		/* 4:3, not portrait: a 3:4 crop of this 1.79 source shows only ~42% of
		   the frame — barely two cabinet doors. 4:3 keeps ~74% of the width, so
		   the whole cabinet run stays readable either side of the divider. */
		aspect-ratio: 4 / 3;
	}
	.compare__img { object-position: 56% center; }
	.compare__label { top: 1rem; font-size: 10px; }
	.compare__label--before { left: 1rem; }
	.compare__label--after { right: 1rem; }
	.compare__handle { width: 44px; height: 44px; }
	.hero__card { position: static; width: 100%; padding: 2rem 1.5rem; }
	.hero__text { max-width: none; }

	.feature-trio__grid,
	.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; }
}

@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; }
	.site-footer__inner { grid-template-columns: 1fr; }

	.site-logo__mark { width: 46px; }
	.site-logo__text { font-size: 1.05rem; }
}

/* Small phones: the lockup can't wrap, so trim it one more notch (and tighten
   the header rails) to keep it clear of the menu and call buttons either side. */
@media (max-width: 400px) {
	.site-header__inner { padding: 1rem; }
	.site-logo { gap: 0.55rem; }
	.site-logo__mark { width: 42px; }
	.site-logo__text { font-size: 1rem; }
}

/* ==========================================================================
   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; }
}