/*
 * Maison Woodcraft — component stylesheet
 * ---------------------------------------------------------------------------
 * Every block below is a direct CSS conversion of an original React component
 * (original-source/src/components/*.tsx and src/pages/*.tsx). The Tailwind
 * utilities used in the original markup are translated literally so spacing,
 * type scale, colours, radii and hover states stay identical.
 */

/* =========================================================================
 * Buttons — components/Button.tsx + WhatsAppButton.tsx
 * ====================================================================== */

.mw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: var(--mw-radius-pill);
	padding: 0.75rem 1.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	font-weight: 500;
	border: 1px solid transparent;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, filter 0.3s ease;
	cursor: pointer;
	text-align: center;
}

.mw-btn--primary {
	background-color: var(--mw-espresso);
	color: var(--mw-ivory);
	border-color: var(--mw-espresso);
}

.mw-btn--primary:hover,
.mw-btn--primary:focus-visible {
	background-color: var(--mw-walnut-dark);
	border-color: var(--mw-walnut-dark);
	color: var(--mw-ivory);
}

.mw-btn--secondary {
	background-color: transparent;
	color: var(--mw-ivory);
	border-color: rgba(247, 243, 236, 0.7);
}

.mw-btn--secondary:hover,
.mw-btn--secondary:focus-visible {
	background-color: var(--mw-ivory);
	color: var(--mw-espresso);
}

.mw-btn--outline {
	background-color: transparent;
	color: var(--mw-espresso);
	border-color: var(--mw-espresso-30);
}

.mw-btn--outline:hover,
.mw-btn--outline:focus-visible {
	border-color: var(--mw-espresso);
	background-color: var(--mw-espresso);
	color: var(--mw-ivory);
}

.mw-btn--ghost {
	background-color: var(--mw-bronze);
	color: var(--mw-espresso);
	border-color: var(--mw-bronze);
}

.mw-btn--ghost:hover,
.mw-btn--ghost:focus-visible {
	background-color: var(--mw-bronze-light);
	color: var(--mw-espresso);
}

.mw-btn--whatsapp {
	background-color: var(--mw-whatsapp);
	color: #fff;
	border-color: var(--mw-whatsapp);
	gap: 0.5rem;
}

.mw-btn--whatsapp svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.mw-btn--whatsapp:hover,
.mw-btn--whatsapp:focus-visible {
	filter: brightness(0.95);
	color: #fff;
}

/* Header call-to-action (Header.tsx: px-6 py-2.5) */
.mw-btn--header {
	padding: 0.625rem 1.5rem;
}

/* Form submit (GetQuote.tsx / Contact.tsx: px-8 py-3.5) */
.mw-btn--form {
	padding: 0.875rem 2rem;
	align-self: flex-start;
}

/* Mobile menu buttons (px-6 py-3) */
.mw-btn--menu {
	padding: 0.75rem 1.5rem;
}

/* Call button in the mobile menu (border-espresso/30, transparent) */
.mw-btn--call {
	background-color: transparent;
	color: var(--mw-espresso);
	border-color: var(--mw-espresso-30);
}

.mw-btn--call:hover,
.mw-btn--call:focus-visible {
	border-color: var(--mw-espresso);
	background-color: var(--mw-espresso);
	color: var(--mw-ivory);
}

.mw-btn:focus-visible {
	outline: 2px solid var(--mw-bronze);
	outline-offset: 2px;
}

.mw-btn-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

@media (min-width: 640px) {
	.mw-btn-row {
		flex-direction: row;
		align-items: center;
	}
}

.mw-btn-row--center {
	align-items: center;
	justify-content: center;
}

.mw-tiwt {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-walnut-dark);
	font-weight: 500;
	transition: gap 0.3s ease, color 0.3s ease;
}

.mw-tiwt:hover {
	gap: 0.75rem;
	color: var(--mw-bronze);
}

/* =========================================================================
 * Header — components/Header.tsx
 * ====================================================================== */

.mw-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
	background-color: transparent;
	border-bottom: 1px solid transparent;
}

.mw-header.is-solid {
	background-color: var(--mw-ivory-95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom-color: var(--mw-stone-dark-60);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.mw-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.mw-logo {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.mw-logo__name {
	font-family: var(--mw-font-serif);
	font-size: 1.5rem;
	letter-spacing: 0.025em;
	color: var(--mw-ivory);
	transition: color 0.3s ease;
}

.mw-logo__tag {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	margin-top: 0.125rem;
	color: var(--mw-champagne);
	transition: color 0.3s ease;
}

.mw-header.is-solid .mw-logo__name {
	color: var(--mw-espresso);
}

.mw-header.is-solid .mw-logo__tag {
	color: var(--mw-bronze);
}

@media (min-width: 640px) {
	.mw-logo__name {
		font-size: 1.7rem;
	}

	.mw-logo__tag {
		font-size: 11px;
	}
}

/* Logo image (custom logo support) — sits next to the wordmark */
.mw-logo__media img {
	max-height: 3rem;
	width: auto;
}

.mw-nav {
	display: none;
}

@media (min-width: 1024px) {
	.mw-nav {
		display: flex;
		align-items: center;
		gap: 2rem;
	}
}

.mw-nav__link {
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-ivory-90);
	transition: color 0.3s ease;
}

.mw-nav__link:hover,
.mw-nav__link:focus-visible {
	color: var(--mw-champagne);
}

.mw-header.is-solid .mw-nav__link {
	color: var(--mw-espresso-light);
}

.mw-header.is-solid .mw-nav__link:hover,
.mw-header.is-solid .mw-nav__link:focus-visible {
	color: var(--mw-walnut-dark);
}

.mw-nav__link.is-active {
	color: var(--mw-champagne);
	font-weight: 500;
}

.mw-header.is-solid .mw-nav__link.is-active {
	color: var(--mw-walnut-dark);
	font-weight: 500;
}

/* Dropdown / submenu support (wp_nav_menu) */
.mw-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 13rem;
	background: #fff;
	border: 1px solid var(--mw-stone-dark-60);
	border-radius: var(--mw-radius-xl);
	box-shadow: var(--mw-shadow-card);
	padding: 0.75rem;
	display: none;
	z-index: 50;
}

.mw-nav li {
	position: relative;
}

.mw-nav li:hover > .sub-menu,
.mw-nav li:focus-within > .sub-menu {
	display: block;
}

.mw-nav .sub-menu .mw-nav__link {
	display: block;
	padding: 0.5rem 0.75rem;
	color: var(--mw-espresso-light);
	border-radius: 0.5rem;
}

.mw-nav .sub-menu .mw-nav__link:hover {
	background: var(--mw-stone);
	color: var(--mw-walnut-dark);
}

.mw-header__cta {
	display: none;
}

@media (min-width: 1024px) {
	.mw-header__cta {
		display: block;
	}
}

.mw-burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	width: 2.5rem;
	height: 2.5rem;
	background: none;
	border: 0;
	padding: 0;
	color: var(--mw-ivory);
	transition: color 0.3s ease;
}

@media (min-width: 1024px) {
	.mw-burger {
		display: none;
	}
}

.mw-header.is-solid .mw-burger {
	color: var(--mw-espresso);
}

.mw-burger__line {
	display: block;
	height: 1.5px;
	width: 1.5rem;
	background-color: currentColor;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.mw-burger.is-open .mw-burger__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.mw-burger.is-open .mw-burger__line:nth-child(2) {
	opacity: 0;
}

.mw-burger.is-open .mw-burger__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.mw-mobile-menu {
	display: none;
	background-color: var(--mw-ivory);
	border-top: 1px solid var(--mw-stone-dark-60);
	padding: 1.5rem;
	flex-direction: column;
	gap: 1.25rem;
	max-height: calc(100vh - 4.5rem);
	overflow-y: auto;
}

@media (min-width: 1024px) {
	.mw-mobile-menu {
		display: none !important;
	}
}

.mw-mobile-menu.is-open {
	display: flex;
}

.mw-mobile-menu__list a {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-espresso-light);
}

.mw-mobile-menu__list .is-active > a,
.mw-mobile-menu__list .current-menu-item > a {
	color: var(--mw-walnut-dark);
	font-weight: 500;
}

.mw-mobile-menu__list li + li {
	margin-top: 1.25rem;
}

.mw-mobile-menu__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: 0.5rem;
}

.mw-mobile-menu .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-left: 1rem;
	margin-top: 0.75rem;
}

/* Body offset when there is no hero behind the fixed header */
.mw-header--solid-by-default {
	background-color: var(--mw-ivory-95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom-color: var(--mw-stone-dark-60);
}

body.mw-header-over-hero .mw-main {
	padding-top: 0;
}

body:not(.mw-header-over-hero) .mw-main {
	padding-top: 4.75rem;
}

/* =========================================================================
 * Hero — pages/Home.tsx (hero) and components/PageHero.tsx
 * ====================================================================== */

.mw-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.mw-hero__media,
.mw-hero__media img {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.mw-hero__overlay {
	position: absolute;
	inset: 0;
}

.mw-hero__inner {
	position: relative;
	z-index: 10;
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
}

/* Home hero: h-screen min-h-[640px] */
.mw-hero--home {
	height: 100vh;
	min-height: 640px;
}

.mw-hero--home .mw-hero__overlay {
	background-image: linear-gradient(to bottom, var(--mw-espresso-70), var(--mw-espresso-45), var(--mw-espresso-80));
}

.mw-hero--home .mw-hero__inner {
	padding-bottom: 6rem;
}

.mw-hero__eyebrow {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.35em;
	color: var(--mw-champagne);
	margin-bottom: 1.25rem;
}

.mw-hero__title {
	font-size: 2.25rem;
	line-height: 1.08;
	color: var(--mw-ivory);
	max-width: 48rem;
}

.mw-hero__text {
	margin-top: 1.5rem;
	max-width: 36rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--mw-ivory-85);
}

.mw-hero__actions {
	margin-top: 2.25rem;
}

@media (min-width: 640px) {
	.mw-hero--home .mw-hero__inner {
		padding-bottom: 7rem;
	}

	.mw-hero__eyebrow {
		font-size: 0.875rem;
	}

	.mw-hero__title {
		font-size: 3.75rem;
	}

	.mw-hero__text {
		font-size: 1.125rem;
	}
}

@media (min-width: 768px) {
	.mw-hero__title {
		font-size: 4.5rem;
	}
}

/* Interior page hero: h-[60vh] min-h-[420px] with bottom-aligned copy */
.mw-hero--page {
	height: 60vh;
	min-height: 420px;
}

.mw-hero--short {
	height: 50vh;
	min-height: 380px;
}

.mw-hero--compact {
	height: 46vh;
	min-height: 340px;
}

.mw-hero--page .mw-hero__overlay {
	background-image: linear-gradient(to bottom, var(--mw-espresso-70), var(--mw-espresso-50), var(--mw-espresso-70));
}

.mw-hero--page .mw-hero__inner {
	gap: 1rem;
	padding-bottom: 3.5rem;
	max-width: 56rem;
}

.mw-hero--page .mw-hero__title {
	font-size: 2.25rem;
	line-height: 1.25;
	max-width: 48rem;
}

.mw-hero--page .mw-hero__text {
	font-size: 1rem;
	max-width: 42rem;
	margin-top: 0;
	color: var(--mw-ivory-85);
}

@media (min-width: 640px) {
	.mw-hero--page .mw-hero__inner {
		padding-bottom: 4rem;
	}

	.mw-hero--page .mw-hero__title {
		font-size: 3rem;
	}

	.mw-hero--page .mw-hero__text {
		font-size: 1.125rem;
	}
}

@media (min-width: 768px) {
	.mw-hero--page .mw-hero__title {
		font-size: 3.75rem;
	}
}

@media (min-width: 1024px) {
	.mw-hero--page .mw-hero__inner {
		max-width: var(--mw-container);
	}
}

/* =========================================================================
 * Section heading — components/SectionHeading.tsx
 * ====================================================================== */

.mw-heading {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 42rem;
	text-align: left;
	align-items: flex-start;
}

.mw-heading--center {
	text-align: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}

.mw-heading__eyebrow {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	font-weight: 500;
	color: var(--mw-bronze);
}

.mw-heading__title {
	font-size: 1.875rem;
	line-height: 1.25;
	color: var(--mw-espresso);
}

.mw-heading__text {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
}

.mw-heading--light .mw-heading__eyebrow {
	color: var(--mw-champagne);
}

.mw-heading--light .mw-heading__title {
	color: var(--mw-ivory);
}

.mw-heading--light .mw-heading__text {
	color: var(--mw-ivory-80);
}

@media (min-width: 640px) {
	.mw-heading__title {
		font-size: 2.25rem;
	}
}

@media (min-width: 768px) {
	.mw-heading__title {
		font-size: 2.75rem;
	}
}

/* =========================================================================
 * Trust strip — components/TrustStrip.tsx
 * ====================================================================== */

.mw-trust {
	background-color: var(--mw-stone);
	border-top: 1px solid var(--mw-stone-dark-60);
	border-bottom: 1px solid var(--mw-stone-dark-60);
}

.mw-trust__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.mw-trust__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	justify-content: center;
	text-align: center;
}

.mw-trust__icon {
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	color: var(--mw-walnut);
}

.mw-trust__label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--mw-espresso);
}

@media (min-width: 640px) {
	.mw-trust__label {
		font-size: 0.95rem;
	}
}

@media (min-width: 1024px) {
	.mw-trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.mw-trust__item {
		justify-content: flex-start;
		text-align: left;
	}
}

/* =========================================================================
 * Cards — ServiceCard.tsx, ProjectCard.tsx, kitchen styles, wardrobe types,
 * interior woodwork categories (all share the same card shell)
 * ====================================================================== */

.mw-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--mw-radius-2xl);
	border: 1px solid var(--mw-stone-dark-50);
	background-color: #fff;
	transition: box-shadow 0.5s ease;
	height: 100%;
}

.mw-card:hover,
.mw-card:focus-within {
	box-shadow: var(--mw-shadow-card);
}

.mw-card__media {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	height: 16rem; /* h-64 — service cards */
}

.mw-card--project .mw-card__media {
	height: 18rem; /* h-72 */
}

.mw-card--style .mw-card__media {
	height: 14rem; /* h-56 */
}

.mw-card--category .mw-card__media {
	height: 13rem; /* h-52 */
}

.mw-card__media img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.mw-card:hover .mw-card__media img,
.mw-card:focus-within .mw-card__media img {
	transform: scale(1.05);
}

.mw-card__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	border-radius: var(--mw-radius-pill);
	background-color: var(--mw-ivory-90);
	padding: 0.25rem 0.75rem;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-walnut-dark);
	font-weight: 500;
}

.mw-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.75rem;
}

.mw-card--project .mw-card__body {
	gap: 0.5rem;
	padding: 1.5rem;
}

.mw-card--style .mw-card__body,
.mw-card--category .mw-card__body {
	padding: 1.5rem;
}

.mw-card__title {
	font-size: 1.5rem;
	color: var(--mw-espresso);
}

.mw-card--project .mw-card__title,
.mw-card--style .mw-card__title {
	font-size: 1.25rem;
}

.mw-card--category .mw-card__title {
	font-size: 1.125rem;
}

.mw-card__meta {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-bronze);
}

.mw-card__text {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
	flex: 1 1 auto;
}

.mw-card__link {
	margin-top: 0.5rem;
	align-self: flex-start;
}

/* Two column text block extras (extra paragraph + floating inset image) */
.mw-split__text-copy {
	margin-top: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
	max-width: 36rem;
}

.mw-split__media {
	position: relative;
}

.mw-split__inset {
	display: none;
}

@media (min-width: 640px) {
	.mw-split__inset {
		display: block;
		position: absolute;
		bottom: -2rem;
		left: -2rem;
		width: 10rem;
		height: 10rem;
		border-radius: var(--mw-radius-2xl);
		overflow: hidden;
		border: 8px solid var(--mw-ivory);
		box-shadow: var(--mw-shadow-card);
		z-index: 2;
	}

	.mw-split__inset img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
}

/* Small uppercase note under a heading (home testimonials) */
.mw-note {
	margin-top: 0.75rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-bronze);
}

/* Card panel used for the materials availability note */
.mw-panel--note {
	border-radius: var(--mw-radius-2xl);
	border: 1px solid var(--mw-stone-dark-60);
	background-color: #fff;
	padding: 2rem;
}

@media (min-width: 640px) {
	.mw-panel--note {
		padding: 2.5rem;
	}
}

.mw-panel--note .mw-panel__title {
	margin-bottom: 0.75rem;
}

.mw-panel__text {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
	max-width: 48rem;
}

/* =========================================================================
 * Testimonials — components/TestimonialCard.tsx
 * ====================================================================== */

.mw-testimonial {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	border-radius: var(--mw-radius-2xl);
	border: 1px solid var(--mw-stone-dark-50);
	background-color: #fff;
	padding: 2rem;
	height: 100%;
}

.mw-testimonial__quote-icon {
	height: 1.75rem;
	width: 1.75rem;
	color: var(--mw-bronze-light);
	fill: currentColor;
}

.mw-testimonial__quote {
	font-size: 0.95rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
	font-style: italic;
	flex: 1 1 auto;
}

.mw-testimonial__footer {
	padding-top: 0.5rem;
	border-top: 1px solid var(--mw-stone-dark-40);
}

.mw-testimonial__name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--mw-espresso);
}

.mw-testimonial__location {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-bronze);
	margin-top: 0.125rem;
}

/* =========================================================================
 * Process timeline — components/ProcessTimeline.tsx + pages/Process.tsx
 * ====================================================================== */

.mw-process {
	position: relative;
}

.mw-process__line {
	display: none;
	position: absolute;
	top: 2rem; /* top-8 — aligned with the centre of the 16/h-16 badge */
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--mw-stone-dark-60);
}

.mw-process__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

.mw-process__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mw-process__number {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4rem;
	width: 4rem;
	border-radius: var(--mw-radius-pill);
	background-color: var(--mw-espresso);
	color: var(--mw-ivory);
	font-family: var(--mw-font-serif);
	font-size: 1.25rem;
}

.mw-process__title {
	font-size: 1.25rem;
	color: var(--mw-espresso);
}

.mw-process__text {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
}

@media (min-width: 640px) {
	.mw-process__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.mw-process__line {
		display: block;
	}

	.mw-process__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

/* Vertical variant — pages/Process.tsx */
.mw-process--vertical {
	position: relative;
}

.mw-process--vertical .mw-process__track {
	display: none;
	position: absolute;
	left: 2rem;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 1px;
	background-color: var(--mw-stone-dark-60);
}

.mw-process--vertical .mw-process__list {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.mw-process--vertical .mw-process__step {
	flex-direction: row;
	gap: 1.5rem;
}

.mw-process--vertical .mw-process__number {
	height: 4rem;
	width: 4rem;
	flex-shrink: 0;
}

.mw-process--vertical .mw-process__body {
	padding-top: 0.75rem;
}

.mw-process--vertical .mw-process__title {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.mw-process--vertical .mw-process__text {
	max-width: 36rem;
}

@media (min-width: 640px) {
	.mw-process--vertical .mw-process__track {
		display: block;
	}

	.mw-process--vertical .mw-process__step {
		gap: 2rem;
	}
}

/* =========================================================================
 * Feature grid — "Why Clients Choose Us" + About "Our Approach"
 * ====================================================================== */

.mw-features {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 2.5rem;
	row-gap: 3rem;
}

.mw-features__item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border-top: 1px solid var(--mw-stone-dark-60);
	padding-top: 1.5rem;
}

.mw-features__title {
	font-size: 1.25rem;
	color: var(--mw-espresso);
}

.mw-features__text {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
}

/* Dark ("light") variant used on espresso backgrounds */
.mw-features--light .mw-features__item {
	border-top-color: rgba(247, 243, 236, 0.15);
}

.mw-features--light .mw-features__title {
	color: var(--mw-champagne);
}

.mw-features--light .mw-features__text {
	color: var(--mw-ivory-70);
}

/* Numbered variant — pages/About.tsx philosophy list */
.mw-features--numbered .mw-features__item {
	flex-direction: row;
	gap: 1.25rem;
	border-top: 0;
	padding-top: 0;
}

.mw-features__index {
	font-family: var(--mw-font-serif);
	font-size: 1.875rem;
	color: var(--mw-bronze);
	flex-shrink: 0;
	line-height: 1.1;
}

.mw-features__content {
	display: flex;
	flex-direction: column;
}

.mw-features__content .mw-features__title {
	margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
	.mw-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 3rem;
	}
}

@media (min-width: 1024px) {
	.mw-features--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================================================
 * Feature list (bullet points) — kitchen/wardrobe feature lists
 * ====================================================================== */

.mw-checklist {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1.5rem;
	row-gap: 1rem;
}

.mw-checklist--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mw-checklist__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: var(--mw-espresso);
}

.mw-checklist__dot {
	height: 0.375rem;
	width: 0.375rem;
	border-radius: 50%;
	background-color: var(--mw-bronze);
	flex-shrink: 0;
}

@media (min-width: 640px) {
	.mw-checklist--two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================================
 * Materials & finishes swatches — data/content.ts materialCategories
 * ====================================================================== */

.mw-swatches {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.mw-swatch-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border-radius: var(--mw-radius-2xl);
	background-color: #fff;
	border: 1px solid var(--mw-stone-dark-50);
	padding: 1.5rem;
	height: 100%;
}

.mw-swatches--compact .mw-swatch-card {
	gap: 0.75rem;
	padding: 1.25rem;
}

.mw-swatch-card__swatch {
	height: 7rem;
	width: 100%;
	border-radius: var(--mw-radius-xl);
	background-image: linear-gradient(to bottom right, #d8c9ab, #b79c72);
}

.mw-swatches--compact .mw-swatch-card__swatch {
	height: 5rem;
}

.mw-swatch-card__title {
	font-size: 1.25rem;
	color: var(--mw-espresso);
}

.mw-swatches--compact .mw-swatch-card__title {
	font-size: 0.875rem;
	font-weight: 500;
}

.mw-swatch-card__text {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
}

.mw-swatches__note {
	margin-top: 2rem;
	font-size: 0.75rem;
	color: rgba(74, 64, 56, 0.8);
	max-width: 42rem;
}

.mw-swatches__link {
	margin-top: 1.5rem;
	display: inline-flex;
}

@media (min-width: 640px) {
	.mw-swatches {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mw-swatches--compact {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.mw-swatches {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =========================================================================
 * Gallery grid — Kitchen/Wardrobe galleries (first tile spans 2 x 2)
 * ====================================================================== */

.mw-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.mw-gallery__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--mw-radius-2xl);
	aspect-ratio: 1 / 1;
	display: block;
}

.mw-gallery__item img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.mw-gallery__item:hover img,
.mw-gallery__item:focus-visible img {
	transform: scale(1.05);
}

.mw-gallery__item--feature img {
	height: 100%;
}

@media (min-width: 640px) {
	.mw-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mw-gallery__item--feature {
		grid-column: span 2;
		grid-row: span 2;
		aspect-ratio: auto;
	}
}

@media (min-width: 1024px) {
	.mw-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================================================
 * FAQ accordion — pages/Kitchens.tsx + pages/Wardrobes.tsx
 * ====================================================================== */

.mw-faq {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mw-faq__item {
	border-radius: var(--mw-radius-2xl);
	border: 1px solid var(--mw-stone-dark-50);
	background-color: #fff;
	overflow: hidden;
}

.mw-faq__question {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	text-align: left;
	background: none;
	border: 0;
	color: var(--mw-espresso);
}

.mw-faq__question-text {
	font-weight: 500;
	color: var(--mw-espresso);
	font-family: var(--mw-font-sans);
}

.mw-faq__icon {
	font-size: 1.25rem;
	color: var(--mw-bronze);
	flex-shrink: 0;
	line-height: 1;
}

.mw-faq__answer {
	padding: 0 1.5rem 1.25rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
}

.mw-faq__answer[hidden] {
	display: none;
}

/* =========================================================================
 * CTA section — components/CTASection.tsx
 * ====================================================================== */

.mw-cta {
	position: relative;
	overflow: hidden;
	background-color: var(--mw-espresso);
}

.mw-cta__media {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	opacity: 0.25;
}

.mw-cta__overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to right, var(--mw-espresso), rgba(43, 36, 29, 0.95), var(--mw-espresso-80));
}

.mw-cta__inner {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.5rem;
	padding-top: 5rem;
	padding-bottom: 5rem;
	max-width: 64rem;
}

.mw-cta__title {
	font-size: 1.875rem;
	color: var(--mw-ivory);
	max-width: 42rem;
	line-height: 1.25;
}

.mw-cta__text {
	color: var(--mw-ivory-75);
	max-width: 36rem;
	line-height: 1.625;
}

.mw-cta__actions {
	padding-top: 0.5rem;
	justify-content: center;
	align-items: center;
}

@media (min-width: 640px) {
	.mw-cta__inner {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}

	.mw-cta__title {
		font-size: 2.25rem;
	}
}

@media (min-width: 768px) {
	.mw-cta__title {
		font-size: 3rem;
	}
}

/* =========================================================================
 * Footer — components/Footer.tsx
 * ====================================================================== */

.mw-footer {
	background-color: var(--mw-charcoal);
	color: var(--mw-ivory-90);
}

.mw-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.mw-footer__col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mw-footer__brand {
	font-family: var(--mw-font-serif);
	font-size: 1.5rem;
	color: var(--mw-ivory);
}

.mw-footer__blurb {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-ivory-60);
	max-width: 20rem;
}

.mw-footer__social {
	display: flex;
	gap: 1rem;
	padding-top: 0.5rem;
}

.mw-footer__social a {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-ivory-60);
	transition: color 0.3s ease;
}

.mw-footer__social a:hover {
	color: var(--mw-champagne);
}

.mw-footer__heading {
	font-family: var(--mw-font-sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--mw-champagne);
	font-weight: 500;
}

.mw-footer__list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.mw-footer__list a,
.mw-footer__list li {
	font-size: 0.875rem;
	color: var(--mw-ivory-70);
	transition: color 0.3s ease;
}

.mw-footer__list a:hover {
	color: var(--mw-ivory);
}

.mw-footer__hours {
	font-size: 0.75rem;
	color: var(--mw-ivory-50);
}

.mw-footer__bottom {
	border-top: 1px solid rgba(247, 243, 236, 0.1);
}

.mw-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	font-size: 0.75rem;
	color: var(--mw-ivory-50);
	text-align: center;
}

@media (min-width: 640px) {
	.mw-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mw-footer__bottom-inner {
		flex-direction: row;
		text-align: left;
	}
}

@media (min-width: 1024px) {
	.mw-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =========================================================================
 * Floating WhatsApp button — components/WhatsAppButton.tsx (floating)
 * ====================================================================== */

.mw-whatsapp-float {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.5rem;
	width: 3.5rem;
	border-radius: var(--mw-radius-pill);
	background-color: var(--mw-whatsapp);
	color: #fff;
	box-shadow: var(--mw-shadow-float);
	transition: transform 0.3s ease;
}

.mw-whatsapp-float:hover,
.mw-whatsapp-float:focus-visible {
	transform: scale(1.05);
	color: #fff;
}

.mw-whatsapp-float svg {
	height: 1.75rem;
	width: 1.75rem;
	fill: currentColor;
}

@media print {
	.mw-whatsapp-float,
	.mw-header {
		display: none;
	}
}

/* =========================================================================
 * Forms — pages/GetQuote.tsx and pages/Contact.tsx
 * ====================================================================== */

.mw-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.mw-form--contact {
	gap: 1.25rem;
	margin-top: 2rem;
}

.mw-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.mw-form__grid--contact {
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.mw-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mw-form__full {
	grid-column: 1 / -1;
}

.mw-label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-espresso-light);
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.mw-input {
	width: 100%;
	border-radius: var(--mw-radius-xl);
	border: 1px solid var(--mw-stone-dark-60);
	background-color: #fff;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	font-family: inherit;
	color: var(--mw-espresso);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.mw-input::placeholder {
	color: rgba(74, 64, 56, 0.5);
}

.mw-input:focus {
	outline: none;
	border-color: var(--mw-bronze);
	box-shadow: 0 0 0 2px var(--mw-bronze-40);
}

textarea.mw-input {
	resize: vertical;
	min-height: 8rem;
}

select.mw-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234a4038' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1rem;
	padding-right: 2.5rem;
}

input[type="file"].mw-input {
	padding: 0.75rem 1rem;
}

input[type="file"].mw-input::file-selector-button {
	margin-right: 1rem;
	border: 0;
	border-radius: var(--mw-radius-pill);
	background-color: var(--mw-stone);
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-espresso);
	font-family: inherit;
	cursor: pointer;
}

.mw-form__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding-top: 0.25rem;
}

.mw-radio {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--mw-espresso);
}

.mw-radio input {
	accent-color: var(--mw-bronze);
	width: 1rem;
	height: 1rem;
}

.mw-form__note {
	font-size: 0.75rem;
	color: rgba(74, 64, 56, 0.8);
}

.mw-form__message {
	border-radius: var(--mw-radius-xl);
	padding: 1rem 1.25rem;
	font-size: 0.875rem;
	display: none;
}

.mw-form__message.is-visible {
	display: block;
}

.mw-form__message--success {
	background-color: rgba(169, 129, 79, 0.12);
	border: 1px solid var(--mw-bronze-40);
	color: var(--mw-espresso);
}

.mw-form__message--error {
	background-color: rgba(163, 61, 61, 0.08);
	border: 1px solid rgba(163, 61, 61, 0.35);
	color: #7c2d2d;
}

.mw-form.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

.mw-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Success panel — GetQuote.tsx / Contact.tsx */
.mw-form-success {
	border-radius: var(--mw-radius-2xl);
	border: 1px solid var(--mw-stone-dark-60);
	background-color: #fff;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mw-form-success--compact {
	margin-top: 2rem;
	padding: 2rem;
}

.mw-form-success__title {
	font-size: 1.875rem;
	color: var(--mw-espresso);
}

.mw-form-success--compact .mw-form-success__title {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.mw-form-success__text {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
}

.mw-form-success__actions {
	padding-top: 0.5rem;
}

/* =========================================================================
 * Contact / aside information boxes
 * ====================================================================== */

.mw-panel {
	border-radius: var(--mw-radius-2xl);
	border: 1px solid var(--mw-stone-dark-60);
	background-color: #fff;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mw-panel--stone {
	background-color: var(--mw-stone);
	gap: 1.25rem;
}

.mw-panel__title {
	font-size: 1.25rem;
	color: var(--mw-espresso);
}

.mw-panel__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: var(--mw-espresso-light);
}

.mw-panel__list a:hover {
	color: var(--mw-espresso);
}

.mw-panel__row {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	color: var(--mw-espresso-light);
}

.mw-panel__social {
	display: flex;
	gap: 1.25rem;
	font-size: 0.875rem;
	color: var(--mw-espresso-light);
}

.mw-panel__social a {
	text-transform: capitalize;
}

.mw-panel__social a:hover {
	color: var(--mw-espresso);
}

.mw-panel__actions {
	padding-top: 0.5rem;
}

.mw-aside-stack {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.mw-map {
	overflow: hidden;
	border-radius: var(--mw-radius-2xl);
	border: 1px solid var(--mw-stone-dark-60);
	height: 16rem;
}

.mw-map iframe,
.mw-map img {
	height: 100%;
	width: 100%;
	border: 0;
	display: block;
}

/* Get a quote layout: 1.4fr / 1fr on desktop */
.mw-quote-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

@media (min-width: 1024px) {
	.mw-quote-layout {
		grid-template-columns: 1.4fr 1fr;
	}
}

.mw-contact-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3.5rem;
}

@media (min-width: 1024px) {
	.mw-contact-layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================================
 * Projects — filter pills, modal, single project
 * ====================================================================== */

.mw-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

.mw-filter {
	border-radius: var(--mw-radius-pill);
	padding: 0.5rem 1.25rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	border: 1px solid var(--mw-stone-dark-50);
	background-color: #fff;
	color: var(--mw-espresso-light);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.mw-filter:hover {
	border-color: var(--mw-espresso);
}

.mw-filter.is-active {
	background-color: var(--mw-espresso);
	color: var(--mw-ivory);
	border-color: var(--mw-espresso);
}

/* Modal (Projects.tsx "View Project" dialog) */
.mw-modal {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--mw-espresso-80);
	padding: 2rem 1rem;
}

.mw-modal[hidden] {
	display: none;
}

.mw-modal__dialog {
	position: relative;
	max-width: 48rem;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	border-radius: var(--mw-radius-2xl);
	background-color: var(--mw-ivory);
}

.mw-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.25rem;
	width: 2.25rem;
	border-radius: var(--mw-radius-pill);
	border: 0;
	background-color: var(--mw-ivory-90);
	color: var(--mw-espresso);
	font-size: 1.125rem;
	line-height: 1;
}

.mw-modal__media {
	height: 18rem;
	overflow: hidden;
	border-top-left-radius: var(--mw-radius-2xl);
	border-top-right-radius: var(--mw-radius-2xl);
}

.mw-modal__media img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.mw-modal__body {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mw-modal__category {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-bronze);
	font-weight: 500;
}

.mw-modal__title {
	font-size: 1.875rem;
	color: var(--mw-espresso);
}

.mw-modal__location {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-espresso-light);
}

.mw-modal__text {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
}

.mw-modal__materials {
	padding-top: 0.75rem;
	border-top: 1px solid var(--mw-stone-dark-40);
}

.mw-modal__materials-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-bronze);
	margin-bottom: 0.25rem;
}

.mw-modal__materials-text {
	font-size: 0.875rem;
	color: var(--mw-espresso-light);
}

@media (min-width: 640px) {
	.mw-modal__media {
		height: 24rem;
	}
}

body.mw-modal-open {
	overflow: hidden;
}

/* Single project */
.mw-project-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

@media (min-width: 1024px) {
	.mw-project-layout {
		grid-template-columns: 1.6fr 1fr;
	}
}

.mw-project-meta {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	border-radius: var(--mw-radius-2xl);
	border: 1px solid var(--mw-stone-dark-60);
	background-color: #fff;
	padding: 2rem;
}

.mw-project-meta__row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.mw-project-meta__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-bronze);
}

.mw-project-meta__value {
	font-size: 0.875rem;
	color: var(--mw-espresso-light);
}

.mw-project-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 3rem;
}

.mw-project-gallery a {
	display: block;
	overflow: hidden;
	border-radius: var(--mw-radius-2xl);
	aspect-ratio: 4 / 3;
}

.mw-project-gallery img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.mw-project-gallery a:hover img {
	transform: scale(1.05);
}

.mw-project-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--mw-radius-2xl);
	aspect-ratio: 4 / 3;
	margin-bottom: 2.5rem;
}

.mw-project-hero img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

@media (min-width: 640px) {
	.mw-project-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================================================
 * Lightbox (gallery viewer)
 * ====================================================================== */

.mw-lightbox {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--mw-espresso-80);
	padding: 2rem;
}

.mw-lightbox[hidden] {
	display: none;
}

.mw-lightbox img {
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	border-radius: var(--mw-radius-2xl);
	box-shadow: var(--mw-shadow-float);
}

.mw-lightbox__close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	height: 2.5rem;
	width: 2.5rem;
	border: 0;
	border-radius: var(--mw-radius-pill);
	background-color: var(--mw-ivory-90);
	color: var(--mw-espresso);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

/* =========================================================================
 * 404 — pages/NotFound.tsx
 * ====================================================================== */

.mw-404 {
	display: flex;
	min-height: 60vh;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: 6rem 1.25rem;
	text-align: center;
}

.mw-404__eyebrow {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--mw-bronze);
}

.mw-404__title {
	font-size: 2.25rem;
	color: var(--mw-espresso);
}

.mw-404__text {
	max-width: 28rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
}

@media (min-width: 640px) {
	.mw-404__title {
		font-size: 3rem;
	}
}

/* =========================================================================
 * Blog / archive fallbacks (not part of the original site, styled on-brand)
 * ====================================================================== */

.mw-archive-header {
	background-color: var(--mw-stone);
	border-bottom: 1px solid var(--mw-stone-dark-60);
	padding-top: 4rem;
	padding-bottom: 4rem;
	margin-top: 0;
}

.mw-archive-header__title {
	font-size: 2.25rem;
	color: var(--mw-espresso);
}

.mw-archive-header__text {
	margin-top: 1rem;
	color: var(--mw-espresso-light);
	max-width: 42rem;
}

.mw-archive-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 640px) {
	.mw-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.mw-archive-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.mw-pagination {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 3rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.mw-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: var(--mw-radius-pill);
	border: 1px solid var(--mw-stone-dark-50);
	color: var(--mw-espresso-light);
}

.mw-pagination .page-numbers.current,
.mw-pagination .page-numbers:hover {
	background-color: var(--mw-espresso);
	border-color: var(--mw-espresso);
	color: var(--mw-ivory);
}

/* =========================================================================
 * Theme admin screens
 * ====================================================================== */

.mw-admin .mw-admin-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 20px 24px;
	max-width: 900px;
	margin: 16px 0;
}

.mw-admin .mw-admin-card h2 {
	margin-top: 0;
}

.mw-admin .mw-admin-status {
	list-style: disc;
	padding-left: 20px;
}

.mw-admin .mw-admin-status li {
	margin-bottom: 4px;
}

.mw-admin .ok {
	color: #1e7c3a;
	font-weight: 600;
}

.mw-admin .warn {
	color: #a35c00;
	font-weight: 600;
}

.mw-admin .err {
	color: #b32d2e;
	font-weight: 600;
}

/* =========================================================================
 * Small additions: list blocks, gallery/process column variants, search form
 * ====================================================================== */

.mw-split__list {
	margin-top: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
}

.mw-split__list-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	border-left: 2px solid var(--mw-bronze-light);
	padding-left: 1rem;
}

.mw-split__list-title {
	font-family: var(--mw-font-serif);
	font-size: 1.125rem;
	color: var(--mw-espresso);
}

.mw-split__list-text {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--mw-espresso-light);
}

.mw-checklist__title {
	font-family: var(--mw-font-serif);
	font-size: 1.5rem;
	color: var(--mw-espresso);
	margin-bottom: 1.25rem;
}

.mw-cta__eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--mw-bronze-light);
	margin-bottom: 0.75rem;
}

.mw-gallery--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mw-gallery--three {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mw-gallery--four {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.mw-gallery--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mw-gallery--four {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.mw-process--three .mw-process__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 640px) {
	.mw-process--two .mw-process__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mw-image-plain img {
	border-radius: var(--mw-radius-2xl);
	width: 100%;
	height: auto;
}

.mw-searchform {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 32rem;
	margin-top: 1rem;
}

.mw-searchform .mw-input {
	flex: 1 1 12rem;
}

/* =========================================================================
 * Two column media + text blocks
 * ====================================================================== */

.mw-split__text-copy {
	margin-top: 1.5rem;
	max-width: 36rem;
	font-size: 0.875rem;
	line-height: 1.75;
	color: var(--mw-espresso-light);
}

.mw-split__media {
	position: relative;
}

.mw-split__inset {
	display: none;
}

@media (min-width: 640px) {
	.mw-split__inset {
		display: block;
		position: absolute;
		bottom: -2rem;
		left: -2rem;
		height: 10rem;
		width: 10rem;
		overflow: hidden;
		border: 4px solid var(--mw-ivory);
		border-radius: var(--mw-radius-2xl);
		box-shadow: var(--mw-shadow-card);
	}

	.mw-split__inset img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
}

/* Small uppercase note under a section heading (home testimonials) */
.mw-note {
	margin-top: 0.75rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--mw-bronze);
}

/* Panel used for the materials availability note */
.mw-panel--note {
	border-radius: var(--mw-radius-2xl);
	border: 1px solid var(--mw-stone-dark-60);
	background-color: #fff;
	padding: 2rem;
}

@media (min-width: 640px) {
	.mw-panel--note {
		padding: 2.5rem;
	}
}

.mw-panel__text {
	max-width: 48rem;
	font-size: 0.875rem;
	line-height: 1.75;
	color: var(--mw-espresso-light);
}

/* =========================================================================
 * Lightbox (used by the galleries and single project gallery)
 * ====================================================================== */

.mw-lightbox {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background-color: rgba(43, 36, 29, 0.92);
}

.mw-lightbox[hidden] {
	display: none;
}

.mw-lightbox img {
	max-height: 88vh;
	max-width: 100%;
	width: auto;
	border-radius: var(--mw-radius-2xl);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.mw-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	height: 2.5rem;
	width: 2.5rem;
	border: 0;
	border-radius: 999px;
	background-color: var(--mw-ivory);
	color: var(--mw-espresso);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}




/* =========================================================================
 * Forms — fields, messages, success panel (pages/GetQuote.tsx, Contact.tsx)
 * ====================================================================== */

.mw-form-success {
	border-radius: var(--mw-radius-2xl);
	border: 1px solid var(--mw-stone-dark-60);
	background-color: #fff;
	padding: 2rem;
}

@media (min-width: 640px) {
	.mw-form-success {
		padding: 2.5rem;
	}
}

.mw-form-success__title {
	font-family: var(--mw-font-serif);
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--mw-espresso);
	margin-bottom: 0.75rem;
}

.mw-form-success__text {
	font-size: 0.875rem;
	line-height: 1.75;
	color: var(--mw-espresso-light);
	max-width: 36rem;
}

.mw-form-success--compact {
	padding: 1.75rem;
}

.mw-form-success--compact .mw-form-success__title {
	font-size: 1.375rem;
}

.mw-field__error {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: #b3261e;
}

.mw-form.is-busy {
	opacity: 0.75;
	pointer-events: none;
}

.mw-file-hint {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--mw-espresso-light);
	opacity: 0.75;
}

.mw-form__description {
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.75;
	color: var(--mw-espresso-light);
	max-width: 42rem;
}

/* =========================================================================
 * Small helpers used by the theme's markup helpers and widgets
 * ====================================================================== */

/* Images inserted by mw_image_html() */
.mw-img {
	display: block;
	width: 100%;
	height: auto;
}

.mw-frame .mw-img,
.mw-card__media .mw-img,
.mw-hero__media.mw-img,
.mw-gallery__item .mw-img {
	height: 100%;
	object-fit: cover;
}

.mw-hero__media.mw-img {
	position: absolute;
	inset: 0;
}

/* Button rows rendered by the Elementor button widget */
.mw-btn-row--inline {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Service card (components/ServiceCard.tsx) */
.mw-card--service .mw-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

/* FAQ question wrapper */
.mw-faq__heading {
	margin: 0;
}

/* Required mark on form labels */
.mw-required {
	color: var(--mw-bronze);
}

/* Hidden template used to build the AJAX success panel */
.mw-form__whatsapp-template[hidden] {
	display: none;
}

/* Single project content */
.mw-project-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mw-prose-content {
	margin-top: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.85;
	color: var(--mw-espresso-light);
}

.mw-prose-content > * + * {
	margin-top: 1rem;
}

.mw-prose-content h2,
.mw-prose-content h3 {
	font-family: var(--mw-font-serif);
	color: var(--mw-espresso);
}

/* Swatch tile that shows a photograph instead of a colour */
.mw-swatch-card__swatch--image {
	padding: 0;
}

.mw-swatch-card__swatch--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}




/* =====================================================
   MAISON WOODCRAFT FOOTER - FINAL LAYOUT + SOCIAL ICONS
   ===================================================== */

.mw-footer {
    width: 100%;
    background: #292a28;
    color: #d8d1c6;
    overflow: hidden;
}

.mw-footer .mw-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Main footer grid */
.mw-footer__grid {
    display: grid;
    grid-template-columns:
        minmax(230px, 1.25fr)
        minmax(150px, 0.85fr)
        minmax(230px, 1.2fr)
        minmax(260px, 1.25fr);
    gap: 55px;
    align-items: start;
    padding: 65px 7.5% 60px;
}

/* Columns */
.mw-footer__col {
    min-width: 0;
}

/* Brand */
.mw-footer__brand {
    display: inline-block;
    color: #f3eee6;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none;
}

.mw-footer__logo {
    margin-bottom: 24px;
}

.mw-footer__logo img {
    max-width: 220px;
    height: auto;
}

.mw-footer__blurb {
    max-width: 360px;
    margin: 25px 0 0;
    color: #bdb7ae;
    font-size: 16px;
    line-height: 1.85;
}

/* Footer headings */
.mw-footer__heading {
    margin: 3px 0 25px;
    color: #d8bd91;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Lists */
.mw-footer__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mw-footer__list li {
    margin: 0 0 15px;
    padding: 0;
    color: #c8c1b7;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.mw-footer__list li:last-child {
    margin-bottom: 0;
}

.mw-footer__list a {
    color: #c8c1b7;
    text-decoration: none;
    transition: color 0.25s ease;
}

.mw-footer__list a:hover {
    color: #d8bd91;
}

/* Contact */
.mw-footer__hours {
    line-height: 1.65 !important;
}

/* =====================================================
   SOCIAL ICONS
   ===================================================== */

.mw-footer__social {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 32px;
    padding: 0 !important;
}

/* Social link */
.mw-footer__social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(216, 189, 145, 0.65) !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #d8bd91 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

/* Font Awesome icon */
.mw-footer__social-link i {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #d8bd91 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-style: normal !important;
}

/* Hide any accidental text */
.mw-footer__social-link .mw-footer__social-name,
.mw-footer__social-link .mw-footer__social-arrow {
    display: none !important;
}

/* Hover */
.mw-footer__social-link:hover {
    background: #d8bd91 !important;
    border-color: #d8bd91 !important;
    color: #292a28 !important;
    transform: translateY(-2px);
}

.mw-footer__social-link:hover i {
    color: #292a28 !important;
}

/* Accessibility text */
.mw-footer .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =====================================================
   BOTTOM BAR
   ===================================================== */

.mw-footer__bottom {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mw-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 22px 7.5%;
    box-sizing: border-box;
}

.mw-footer__bottom-inner p {
    margin: 0;
    color: #99958f;
    font-size: 14px;
    line-height: 1.5;
}

/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1100px) {
    .mw-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 45px 35px;
        padding-left: 5%;
        padding-right: 5%;
    }

    .mw-footer__bottom-inner {
        padding-left: 5%;
        padding-right: 5%;
    }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {
    .mw-footer__grid {
        grid-template-columns: 1fr;
        gap: 38px;
        padding: 45px 24px 40px;
    }

    .mw-footer__brand {
        font-size: 27px;
    }

    .mw-footer__blurb {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.75;
    }

    .mw-footer__heading {
        margin-bottom: 17px;
    }

    .mw-footer__list li {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .mw-footer__social {
        margin-top: 25px;
        gap: 10px !important;
    }

    .mw-footer__social-link {
        flex-basis: 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
    }

    .mw-footer__social-link i {
        font-size: 15px !important;
    }

    .mw-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 20px 24px;
    }

    .mw-footer__bottom-inner p {
        font-size: 13px;
    }
}