/* Hass - MAIN: every component and section on the site, all breakpoints
   removed to responsive.css.
   Generated by merging the theme's per-section stylesheets.
   Load order is base.css -> main.css -> responsive.css; responsive.css
   is last so its media queries win over everything they override.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */
/* Transparent bar overlaying the dark hero, so all chrome is white. */
.site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 20;
	color: var(--white);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding-block: clamp(1rem, 2.25vw, 36px) 0;
}

/* flex, not inline-flex: an inline-level box adds descender space below the
   logo, which made the brand 98px tall and pushed the nav row 5px off centre. */
.site-header__logo {
	display: flex;
}

.site-header__logo img,
.custom-logo {
	height: clamp(48px, 5.5vw, 88px);
	width: auto;
}

.site-title {
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
}

/* Right-hand group: menu items → hamburger → language, 60px apart (Figma). */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 60px);
}

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: 41px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.108;
	color: inherit;
	white-space: nowrap;
}

.site-nav__menu a:hover {
	color: var(--red);
}

.site-header__lang {
	color: inherit;
	font-family: var(--font-ar);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
}

/* Hamburger — always visible (Figma shows it on desktop too). The bars stay at
   the design's 34x32; the box is padded out to a 44px tap target. */
.nav-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8.5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	height: 1.5px;
	width: 34px;
	background: currentColor;
	border-radius: 255px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

/* ==========================================================================
   Slide-in menu drawer (opened by the hamburger)
   ========================================================================== */
.site-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.site-drawer.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.site-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.site-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(500px, 88vw);
	background: var(--dark);
	border-left: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--white);
	/* Top pad puts the first link's centre at y=196 in the 1600x900 frame. */
	padding: clamp(4.5rem, 18.4vh, 166px) clamp(1.5rem, 4vw, 61px) 2rem;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
}

.site-drawer.is-open .site-drawer__panel {
	transform: translateX(0);
}

/* 33px glyph in the design; padded out to a 44px tap target. */
.site-drawer__close {
	position: absolute;
	top: 14px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--white);
	cursor: pointer;
}

.site-drawer__close svg {
	width: 33px;
	height: 33px;
}

.site-drawer__menu {
	display: flex;
	flex-direction: column;
	font-weight: 400;
	font-size: clamp(1.5rem, 2vw, 32px);
	line-height: 1.865;
	letter-spacing: -0.01em;
	text-transform: capitalize;
}

.site-drawer__menu a {
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.site-drawer__menu a:hover,
.site-drawer__menu a:focus-visible,
.site-drawer__menu .current-menu-item > a {
	opacity: 1;
	color: inherit;
}

/* Lock body scroll while the drawer is open. */
body.is-drawer-open {
	overflow: hidden;
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Reference frame 1600x696 (below the Ready CTA): columns at x=120 y=126,
   newsletter at x=1079, socials at y=467, rule at y=619 (1400 wide, x=100),
   legal bar at y=649. Text boxes are cap-trimmed in the design, so single-line
   items use line-height:0.7em (Poppins' cap height) and the gaps land right. */
.site-footer {
	background: var(--color-bg);
	color: var(--white);
}

.site-footer__inner {
	max-width: calc(1360px + 2 * var(--container-pad));
}

.site-footer__bottom-wrap {
	max-width: calc(1400px + 2 * var(--container-pad));
}

.site-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 3rem;
	padding-top: clamp(3rem, 7.875vw, 126px);
}

.site-footer__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2.5rem 103px;
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.footer-col__heading {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1.25rem, 1.5vw, 24px);
	font-weight: 400;
	line-height: 0.7em;
}

.footer-col__links {
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 0.7em;
}

.footer-col__links a:hover {
	color: var(--red);
}

.footer-contact__label {
	margin: 0;
	text-transform: uppercase;
	line-height: 0.7em;
}

/* Newsletter */
.footer-newsletter {
	flex: 0 1 400px;
}

.newsletter-form {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 51.273px;
	padding-inline: 16.343px;
	border: 1px solid #979797;
}

.newsletter-form input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	color: var(--white);
	font-family: var(--font-body);
	font-size: 16px;
}

.newsletter-form input::placeholder {
	color: #979797;
}

.newsletter-form button {
	background: none;
	border: 0;
	color: var(--white);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25.138px;
	height: 25.138px;
	padding: 0;
	flex: none;
}

/* CF7 newsletter variant: the bordered box wraps just the input row (CF7's <p>),
   so validation messages sit below it. The email fills the row; the submit is the
   same 25px arrow button as the plain form (arrow as a background SVG). */
.newsletter-form--cf7 {
	display: block;
	height: auto;
	padding: 0;
	border: 0;
}

.newsletter-form--cf7 .wpcf7-form > p {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 51.273px;
	margin: 0;
	padding-inline: 16.343px;
	border: 1px solid #979797;
}

.newsletter-form--cf7 br {
	display: none;
}

.newsletter-form--cf7 .wpcf7-form-control-wrap {
	flex: 1;
	min-width: 0;
}

.newsletter-form--cf7 input[type="email"] {
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	color: var(--white);
	font-family: var(--font-body);
	font-size: 16px;
}

.newsletter-form--cf7 input[type="email"]::placeholder {
	color: #979797;
}

.newsletter-form--cf7 input[type="email"]:focus {
	outline: none;
}

.newsletter-form--cf7 .wpcf7-submit {
	flex: none;
	width: 25.138px;
	height: 25.138px;
	padding: 0;
	border: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4 14L14 4M14 4H6M14 4V12' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	background-size: 18px 18px;
	color: transparent;
	font-size: 0;
	cursor: pointer;
}

.newsletter-form--cf7 .wpcf7-spinner {
	display: none;
}

.newsletter-form--cf7 .wpcf7-response-output {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--white);
}

/* Socials — its own block under the columns (y=467), not in the newsletter. */
/* Columns run 126..287.6; the socials heading sits at 467, hence 179.4. */
.footer-socials-block {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
	padding-top: clamp(2.5rem, 11.2vw, 179.4px);
}

.footer-socials__heading {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1.125rem, 1.375vw, 22px);
	font-weight: 400;
	line-height: 0.7em;
}

.footer-socials {
	display: flex;
	gap: 10px;
	opacity: 0.8;
}

.footer-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
}

.footer-socials a:hover {
	background: var(--white);
	color: var(--dark);
}

.footer-socials svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Footer bottom bar */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	align-items: center;
	/* Socials block ends at 562.4; the rule is at 619. */
	margin-top: clamp(2rem, 3.54vw, 56.6px);
	padding-block: 30px 37px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 0.7em;
	opacity: 0.6;
}

/* The copyright's spacing around the "|" is typed by the editor; HTML would
   otherwise collapse it (the design has four spaces each side). */
.site-footer__copy {
	margin: 0;
	white-space: pre-wrap;
}

.site-footer__legal {
	display: flex;
	gap: 56px;
	flex-wrap: wrap;
}

/* Floating WhatsApp */
/* 56px, 88px in from the bottom-right corner of the 1600x900 frame. */
.whatsapp-float {
	position: fixed;
	right: clamp(1rem, 5.5vw, 88px);
	bottom: clamp(1rem, 5.5vw, 88px);
	z-index: 50;
	width: 56px;
	height: 56px;
	border-radius: 50px;
	background: #00c361;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.whatsapp-float svg {
	width: 34px;
	height: 34px;
	fill: currentColor;
}

/* ==========================================================================
   Reusable components
   ========================================================================== */

/* Full-bleed feature banner — ONE component, shared by Kitchens and Wardrobes
   (and reusable on the inner pages: the frames are structurally identical).
   Reference frame 1600x900: title cap-top y=585, desc y=659 w=486, CTA y=741
   h=56, all at x=99.78. Figma offsets Wardrobes' copy to 116.78 — a slip, so
   both use one offset here. */
.feature-banner {
	position: relative;
	/* Width must be explicit: once max-height below clamps the height, the
	   aspect-ratio would otherwise run backwards and shrink the WIDTH to keep
	   16:9, leaving the "full-bleed" banner short of the viewport edge. */
	width: 100%;
	aspect-ratio: 1600 / 900;
	min-height: 420px;
	/* Never taller than the screen — the same rule the heroes use
	   (.section--hero, .page-hero). Without it the 16:9 ratio wins on wide
	   monitors: a 1920-wide viewport makes the banner 1080 tall, so the section
	   overflows the fold and has to be scrolled to be seen whole. Capping lets
	   the background crop horizontally (object-fit: cover) instead. */
	max-height: 100svh;
	overflow: hidden;
	color: var(--white);
}

.feature-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Angled scrim: 1063.266 x 731.894, pinned bottom-left, behind the copy. */
.feature-banner__scrim {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 66.454%;
	height: 81.321%;
	opacity: 0.7;
	background: linear-gradient(219.055deg, rgba(0, 0, 0, 0) 43.316%, rgba(0, 0, 0, 0.81) 81.812%);
	pointer-events: none;
	z-index: 1;
}

/* Copy block spans y=585..797 of 900, so it sits 103 off the bottom. Centred
   content column (1400.44 = the 1600 frame minus the 99.78 gutters) so the copy
   stays in the layout on wide screens instead of hugging the viewport edge. */
.feature-banner__inner {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(1.5rem, 6.4375vw, 103px);
	z-index: 2;
	max-width: calc(1400.44px + 2 * var(--container-pad));
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* The design's one big display title — feature banners AND page heroes.
   line-height = Inter's cap height reproduces Figma's text-box cap trim, so
   the box spans cap-top to baseline exactly (single line). */
.feature-banner__title,
.page-hero__title {
	margin: 0;
	font-family: var(--font-alt);
	font-weight: 600;
	font-size: clamp(2.25rem, 4.594vw, 73.507px);
	letter-spacing: 0.17em;
	text-transform: uppercase;
	line-height: 0.727em;
	color: var(--white);
}

.feature-banner__desc {
	max-width: 486px;
	margin: 16.37px 0 0;
	font-family: var(--font-alt);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
}

.feature-banner__cta {
	margin-top: 46.19px;
}

/* Shared page hero — the 842-tall banner every inner page opens with.
   Reference frame 1600x842: title cap-top y=720 at x=71.69 (aligned to the
   header, not the banners' 99.78). Two 354-tall scrims: one under the header,
   one under the title. */
.page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Every hero on the site is 900px tall, but never taller than the viewport —
	   same rule as the home hero, so the title never lands below the fold on wide
	   or short screens. */
	min-height: min(900px, 100svh);
	overflow: hidden;
	background: var(--color-bg);
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.page-hero__scrim {
	position: absolute;
	left: 0;
	width: 100%;
	height: 42.043%; /* 354 of 842 */
	z-index: 1;
	pointer-events: none;
}

.page-hero__scrim--top {
	top: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}

.page-hero__scrim--bottom {
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62));
}

/* Title column: same 1440 content column and bottom padding as the home hero
   (.hero__inner), so the inner-page hero title sits bottom-left, aligned to the
   content column on every width instead of hugging the viewport edge. */
.page-hero__inner {
	position: relative;
	z-index: 2;
	max-width: calc(1440px + 2 * var(--container-pad));
	padding-top: calc(var(--header-h) + 2rem);
	padding-bottom: clamp(2rem, 5.8vw, 52px);
}

/* ==========================================================================
   Shared CTA band (home "Ready", listing "Download Brochure") — Option 1. Reference frame 1600x519:
   copy column 655 wide at x=200, vertically centred; blocks are gap:42 apart
   measured on CAP-TRIMMED boxes (heading 29 tall, desc 45.53, button 56).
   Decoration: 298x519 flush to the right edge.
   ========================================================================== */

.section--ready {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 519px;
	background: var(--color-bg);
	overflow: hidden;
	/* Full-width hairline separating the CTA from the section above it. The
	   border sits outside the padding box, so it spans the whole viewport width,
	   above the corner decoration. Shared by every page that uses this band. */
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* 298 of 1600, full height, hard right. */
.ready__decoration {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 18.625%;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 100% 100%;
	pointer-events: none;
}

.ready__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.ready__content {
	display: flex;
	flex-direction: column;
	gap: 42px;
	max-width: 655px;
}

/* line-height = Poppins' cap height, which trims the box to 29 as in Figma. */
.ready__heading {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(1.75rem, 2.625vw, 42px);
	line-height: 0.7em;
	letter-spacing: -0.04em;
	color: var(--white);
}

/* Two lines at 28 = 56; Figma trims that to 45.53, hence the negative block
   margins — the gap:42 above must land on the trimmed box, not the line box.
   Width is the 655 column, NOT a fixed box: Figma's text boxes auto-hug their
   copy (551.41 on Home, 631.87 on the listings), so pinning either one would
   reflow the other page's text. */
.ready__desc {
	margin-block: -5.235px;
	max-width: 655px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(1rem, 1.125vw, 18px);
	line-height: 28px;
	color: var(--white);
}

.ready__cta {
	align-self: flex-start;
}

/* Centred intro block — shared by the home page and the detail pages. Only the
   surrounding spacing differs, so that stays in each section's own CSS. */
.intro__heading {
	margin: 0 auto;
	max-width: 1600px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.125vw, 50px);
	line-height: normal;
	letter-spacing: -0.01em;
	color: var(--white);
}

.intro__desc {
	max-width: 968px;
	margin: clamp(1.5rem, 4.25vw, 68px) auto 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1rem, 1.25vw, 20px);
	line-height: normal;
	color: var(--white);
	opacity: 0.8;
}

/* About two-column feature row — ONE layout shared by three About sections
   (The Company, Manufacturing, Driven by Quality); only the image side flips.
   Reference frame: 87px gap, image 584.34x526.912, text column ~540, heading
   Poppins Medium 38/50, description 16px at 80% opacity 13 below. */
/* Looser vertical rhythm than the generic .section (About's Figma frames sit
   ~140-215px apart); About-only, so the home baseline is untouched. */
.about-row {
	padding-block: clamp(3rem, 9.4vw, 150px);
}

.about-row__inner {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5.44vw, 87px);
}

.about-row--reverse .about-row__inner {
	flex-direction: row-reverse;
}

.about-row__text {
	flex: 1 1 0;
	max-width: 540px;
}

.about-row__heading {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 2.375vw, 38px);
	line-height: 1.316; /* 50 / 38 */
	letter-spacing: -0.01em;
	color: var(--white);
}

.about-row__desc {
	margin: 13px 0 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--white);
	opacity: 0.8;
}

.about-row__media {
	flex: 0 0 auto;
	width: min(584.34px, 48.7%);
	aspect-ratio: 584.34 / 526.912;
	overflow: hidden;
}

.about-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Blog post card — shared by the Media feed grid and the related-news sidebar.
   The design frames the whole card (369.5x376.6, faint 0.19 white border) with
   the image inset at the top and the date/title padded inside. Height is fixed
   in the design (376.6); here it's a min so long titles don't clip. */
.post-card {
	display: flex;
	flex-direction: column;
	min-height: 376.6px;
	border: 1px solid rgba(255, 255, 255, 0.19);
}

.post-card__media {
	display: block;
	aspect-ratio: 367.5 / 223.6;
	overflow: hidden;
	border-bottom: 1px solid rgba(255, 255, 255, 0.19);
	background: rgba(255, 255, 255, 0.04);
}

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

.post-card:hover .post-card__media img {
	transform: scale(1.05);
}

/* date sits 18 below the image, title 29.6 below the image top of its block. */
.post-card__date {
	margin: 18px 0 0;
	padding-inline: 22.96px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: var(--white);
	opacity: 0.8;
}

.post-card__title {
	margin: 9.6px 0 22px;
	padding-inline: 22.96px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	color: var(--white);
	opacity: 0.8;
}

.post-card__title a:hover {
	color: var(--red);
	opacity: 1;
}

/* Related-news variant: a horizontal card (image left, text right), no frame. */
.post-card--related {
	flex-direction: row;
	gap: 16px;
	align-items: center;
	min-height: 0;
	border: 0;
}

.post-card--related .post-card__media {
	flex: 0 0 45%;
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.19);
}

.post-card--related .post-card__date {
	margin-top: 0;
	padding-inline: 0;
}

.post-card--related .post-card__title {
	margin: 8px 0 0;
	padding-inline: 0;
	font-size: 16px;
	line-height: 22px;
}

/* ==========================================================================
   Scroll-reveal — one subtle system, applied by assets/js/reveal.js.
   Elements fade in and rise 20px as they enter the viewport, once. The list
   below is the single source of truth for WHAT reveals; reveal.js observes the
   same selectors. Only active with JS (.has-js) and without reduced-motion, so
   content is always visible if either is missing.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.has-js .intro__heading,
	.has-js .intro__desc,
	.has-js .section--stats .stat,
	.has-js .feature-banner__inner,
	.has-js .section--collage .collage,
	.has-js .section--collage .finishes,
	.has-js .openings__body,
	.has-js .openings__media,
	.has-js .awards__heading,
	.has-js .awards__grid .award,
	.has-js .about-row__text,
	.has-js .about-row__media,
	.has-js .about-vision__text,
	.has-js .about-vision__collage,
	.has-js .about-awards__heading,
	.has-js .about-awards__grid .about-award,
	.has-js .ready__content,
	.has-js .feed__grid .post-card,
	.has-js .listing__grid .card,
	.has-js .article__main,
	.has-js .article__aside,
	.has-js .contact__intro,
	.has-js .contact__card,
	.has-js .book-form {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.6s ease-out, transform 0.6s ease-out;
		will-change: opacity, transform;
	}

	/* Doubled class bumps specificity to (0,3,0) so it beats the 3-class hiding
	   selectors above (e.g. .has-js .section--stats .stat) by source order. */
	.has-js .is-revealed.is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* Subtle image zoom on hover, across the content sections below the hero.
   Only on real hover devices and when motion is allowed. The image containers
   already clip (overflow:hidden), so the scale reads as a slow push-in. Card
   media (.card/.post-card) has its own rule with the same feel. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.stat__image img,
	.feature-banner__bg,
	.collage__item img,
	.openings__image img,
	.gallery__item img,
	.about-row__media img,
	.about-vision__photo {
		transition: transform 0.6s ease;
	}

	.stat__image:hover img,
	.feature-banner:hover .feature-banner__bg,
	.collage__item:hover img,
	.openings__image:hover img,
	.gallery__item:hover img,
	.about-row__media:hover img,
	.about-vision__collage:hover .about-vision__photo {
		transform: scale(1.05);
	}
}

/* ==========================================================================
   Shared CF7 form — the dark field look, the Interested-In toggle, and the red
   submit. Used by any page that wraps a CF7 form in .book-form (Book Free
   Design + For Professionals enquiry). Fields 51.273 tall, #919191 border.
   ========================================================================== */
.book-form {
	max-width: 686px;
	margin-inline: auto;
}

.book-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	/* Uniform 25px between every group (the name/phone row is its own group), so
	   the gap is consistent whatever way CF7 wraps the fields into <p>/<div>. */
	gap: 25px;
}

.book-form .wpcf7-form > p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.book-form br {
	display: none;
}

/* Name + phone on one row. CF7 may wrap the two fields in a <p> inside the row,
   so flex that <p> too — works whether the spans are direct children or nested. */
.book-form .book-row,
.book-form .book-row > p {
	display: flex;
	gap: 24.5px;
	margin: 0;
}

.book-form .book-row > p {
	flex: 1;
}

.book-form .book-row .wpcf7-form-control-wrap {
	flex: 1;
	min-width: 0;
}

.book-form .wpcf7-form-control-wrap {
	display: block;
}

.book-form input[type="text"],
.book-form input[type="tel"],
.book-form input[type="email"],
.book-form input[type="date"],
.book-form select,
.book-form textarea {
	width: 100%;
	height: 51.273px;
	border: 1px solid #919191;
	padding: 12.258px 16.343px;
	background: transparent;
	color: var(--white);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: normal;
	border-radius: 0;
	appearance: none;
}

.book-form textarea {
	height: 126px;
	resize: vertical;
}

.book-form input::placeholder,
.book-form textarea::placeholder {
	color: #919191;
}

.book-form input:focus,
.book-form select:focus,
.book-form textarea:focus {
	outline: none;
	border-color: var(--white);
}

.book-form input[type="date"] {
	color: #919191;
}

.book-form input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(0.7);
	cursor: pointer;
}

.book-form input[type="date"]:valid {
	color: var(--white);
}

.book-form .book-interest__label {
	display: block;
	/* No extra margin — the flex gap already spaces it 25px from the toggle,
	   matching every other field gap. */
	margin-bottom: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14.301px;
	line-height: 20.429px;
	color: var(--white);
}

.book-form .wpcf7-radio {
	display: flex;
	gap: 16px;
}

.book-form .wpcf7-list-item {
	position: relative;
	flex: 1;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 47px;
	border: 1px solid #919191;
	transition: border-color 0.2s ease;
}

.book-form .wpcf7-list-item input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.book-form .wpcf7-list-item-label {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1;
	color: #919191;
	pointer-events: none;
	transition: color 0.2s ease;
}

.book-form .wpcf7-list-item:hover,
.book-form .wpcf7-list-item:has(input:checked) {
	border-color: var(--white);
}

.book-form .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label {
	color: var(--white);
	font-weight: 500;
}

.book-form .wpcf7-submit {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 60px 0 38px;
	background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4 14L14 4M14 4H6M14 4V12' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 29px center;
	border: 0;
	color: var(--white);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15.333px;
	line-height: 17.733px;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0;
	transition: opacity 0.2s ease;
}

.book-form .wpcf7-submit:hover {
	opacity: 0.9;
}

.book-form .wpcf7-response-output {
	margin: 8px 0 0;
	padding: 10px 14px;
	font-size: 14px;
	color: var(--white);
}

.book-form .wpcf7-not-valid-tip {
	color: #ffb4a8;
	font-size: 13px;
}
/* ---- sections/about-awards.css ---- */
/* About Awards & Recognitions — centred heading (38px, gap 81) over a row of
   four certification cards. Each card: a white 273x273 badge (logo inset
   241.99x221.24) then title (SemiBold 14/28) + description (Regular 14/21).
   In the 1200 column, 4 cols with 36px gaps == 273px each, so the badge is
   square as designed. */
.about-awards {
	text-align: center;
	padding-top: clamp(3rem, 11vw, 176px);
	padding-bottom: clamp(2rem, 4vw, 64px);
}

.about-awards__heading {
	margin: 0 0 clamp(2.5rem, 5.06vw, 81px);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 2.375vw, 38px);
	line-height: normal;
	letter-spacing: -0.01em;
	color: var(--white);
}

.about-awards__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, 3vw, 36px);
	text-align: left;
}

.about-award {
	display: flex;
	flex-direction: column;
}

.about-award__badge {
	aspect-ratio: 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	border: 0.523px solid rgba(0, 0, 0, 0.43);
	box-shadow: 0 0 14.632px rgba(0, 0, 0, 0.14);
	overflow: hidden;
}

.about-award__badge img {
	width: 88.64%;  /* 241.99 / 273 */
	height: 81.04%; /* 221.24 / 273 */
	object-fit: contain;
}

.about-award__title {
	margin: 36px 0 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 28px;
	color: var(--white);
}

.about-award__desc {
	margin: 22px 0 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 21px;
	color: var(--white);
}
/* ---- sections/about-statement.css ---- */
/* About statement — full-bleed dark image with a centred heading + paragraphs
   and a giant faint watermark behind. Reference frame 1600x900:
   heading cap-top y=232.61 (w1400), subtitle y=375.61 (w989, 20px),
   watermark y=178.61 (130px, rgba(255,255,255,0.18) at 0.7 opacity, w2918). */
.about-statement {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: min(900px, 56.25vw);
	padding-block: clamp(3rem, 6vw, 5rem);
	padding-inline: var(--container-pad);
	overflow: hidden;
	text-align: center;
	color: var(--white);
}

.about-statement__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.about-statement__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
}

.about-statement__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1000px;
}

/* The watermark is anchored to the heading (centred behind it) so it tracks the
   heading wherever the centred block lands. Its natural width overflows and is
   clipped by the section, matching the design's single faint line. */
.about-statement__heading-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.about-statement__watermark {
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(3rem, 8.125vw, 130px);
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.18);
	opacity: 0.7;
	pointer-events: none;
}

.about-statement__heading {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 1400px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.125vw, 50px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--white);
}

.about-statement__desc {
	margin: clamp(1.5rem, 2.68vw, 43px) 0 0;
	max-width: 989px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1rem, 1.25vw, 20px);
	line-height: 1.5;
	color: var(--white);
}

.about-statement__desc p {
	margin: 0;
}

.about-statement__desc p + p {
	margin-top: 1.5em;
}
/* ---- sections/about-vision.css ---- */
/* About Mission & Vision — two stacked text blocks (left) + a layered image
   collage (right). Reference frame: text column 531 at x=200; photo 547.5x774.65;
   red block 486x799 offset +275/-58 behind; beige 558x799 offset +110/+69 behind.
   The accents bleed off the right edge (body has overflow-x:hidden). */
.about-vision {
	padding-block: clamp(3rem, 12vw, 192px);
	/* The red/beige accents bleed past the right edge by design; clip them at the
	   section edge so they never trigger horizontal page scroll (esp. at 393). */
	overflow: clip;
}

.about-vision__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(2rem, 5vw, 80px);
}

.about-vision__text {
	flex: 0 1 531px;
	max-width: 531px;
}

.about-vision__heading {
	margin: 0 0 14px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 2.375vw, 38px);
	line-height: 1.316; /* 50 / 38 */
	letter-spacing: -0.01em;
	color: var(--white);
}

.about-vision__body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--white);
	opacity: 0.8;
}

/* mission→divider 87, divider→vision 90 in the design. */
.about-vision__divider {
	display: block;
	width: 521px;
	max-width: 100%;
	height: 1px;
	margin: clamp(2rem, 5.44vw, 87px) 0;
	background: rgba(255, 255, 255, 0.15);
}

.about-vision__collage {
	position: relative;
	flex: 0 0 auto;
	width: min(547.5px, 46%);
	aspect-ratio: 547.5 / 774.65;
}

.about-vision__photo {
	position: relative;
	z-index: 3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.about-vision__accent {
	position: absolute;
	display: block;
	pointer-events: none;
}

/* Red behind, peeking top-right (paints below beige). */
.about-vision__accent--red {
	z-index: 1;
	background: var(--red);
	left: 50.23%;   /* 275 / 547.5 */
	top: -7.49%;    /* -58 / 774.65 */
	width: 88.77%;  /* 486 / 547.5 */
	height: 103.14%;/* 799 / 774.65 */
}

/* Beige behind, peeking bottom-right (paints above red, below photo). */
.about-vision__accent--beige {
	z-index: 2;
	background: var(--beige);
	left: 20.09%;   /* 110 / 547.5 */
	top: 8.91%;     /* 69 / 774.65 */
	width: 101.92%; /* 558 / 547.5 */
	height: 103.14%;/* 799 / 774.65 */
}
/* ---- sections/book-form.css ---- */
/* ==========================================================================
   Book Free Design booking form — page layout + the time-select's clock icon.
   The shared CF7 field/toggle/submit styling (.book-form ...) now lives in
   base.css, so it is available to any page that uses a .book-form wrapper.
   Reference frame 1600: form 686 wide, centred, on the dark page.
   ========================================================================== */

.section--book {
	background: var(--color-bg);
	/* Hero ends at 842; the form starts at y=991. */
	padding-top: clamp(3rem, 9.3vw, 149px);
	/* Form ends ~1636; the footer starts at 1846. */
	padding-bottom: clamp(3rem, 13.1vw, 210px);
}

/* Time select: clock icon in place of the native arrow (Book only — the
   professional enquiry form has no select). */
.book-form select {
	color: #919191;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23919191' stroke-width='1.5'/%3E%3Cpath d='M12 7v5l3 2' stroke='%23919191' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16.343px center;
	cursor: pointer;
}

.book-form select:focus {
	color: var(--white);
}

.book-form select option {
	background: var(--dark);
	color: var(--white);
}
/* ---- sections/contact-form.css ---- */
/* ==========================================================================
   Contact intro & form — Option 1. Reference frame 1600 (no hero):
   left intro at x=200 y=273 (616 wide), white form card at x=826 y=217
   (625 wide). Header is absolute, so the section clears it with top padding.
   ========================================================================== */

/* The design's two columns span 1251 (616 + 10 + 625), wider than the 1200
   content column and left-anchored at x=200 — so the left gutter is the normal
   container pad while the block itself is 1251 and hugs the left. */
.section--contact {
	background: var(--color-bg);
	/* Form card top sits at y=217; the absolute header is ~124 tall. */
	padding-top: clamp(7rem, 13.5vw, 217px);
	padding-bottom: clamp(3rem, 7.9vw, 127px);
}

.contact {
	display: grid;
	grid-template-columns: 616fr 625fr;
	column-gap: 10px;
	align-items: start;
	/* Left-anchored at the standard x=200 gutter, but 1251 wide (616+10+625),
	   so the form card keeps its design width and slips past the 1200 column. */
	width: min(1251px, 100% - 2 * var(--container-pad));
	margin-left: max(var(--container-pad), calc((100% - 1200px) / 2));
	margin-right: auto;
}

/* ---- Left intro ---- */
.contact__intro {
	display: flex;
	flex-direction: column;
	gap: 33px;
	/* The intro sits 56 below the form card (y=273 vs 217). */
	margin-top: clamp(1.5rem, 3.5vw, 56px);
}

.contact__heading {
	margin: 0;
	max-width: 411px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(2rem, 3.06vw, 49px);
	line-height: 1.327;
	letter-spacing: -0.01em;
	color: var(--white);
}

.contact__details {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 29px;
	color: var(--white);
}

.contact__line {
	margin: 0;
}

/* A blank line between address, phone/email, and hours (as in the design). */
.contact__address {
	margin-bottom: 29px;
}

.contact__hours {
	margin-top: 29px;
}

.contact__details a:hover {
	color: var(--red);
}

/* ---- Form card ---- */
.contact__card {
	background: var(--white);
	border: 1px solid #a4a4a4;
	padding: clamp(2rem, 3.06vw, 49px);
	color: #1a1a1a;
}

.contact__form-heading {
	margin: 0 0 44px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(2rem, 3vw, 48px);
	line-height: 1.02;
	color: #1a1a1a;
}

/* ---- CF7 form, styled to the design ---- */
.contact__form .wpcf7-form > p,
.contact__form .wpcf7-form > .hass-fields {
	margin: 0;
}

/* Kill CF7's auto <br> and stack the fields with an 11px gap. */
.contact__form br {
	display: none;
}

.contact__form .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 11px;
}

.contact__form input[type="text"],
.contact__form input[type="tel"],
.contact__form input[type="email"],
.contact__form textarea {
	width: 100%;
	border: 1.13px solid rgba(42, 42, 42, 0.26);
	padding: 12.258px 16.343px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: normal;
	color: #1a1a1a;
	background: var(--white);
	border-radius: 0;
	appearance: none;
}

.contact__form input::placeholder,
.contact__form textarea::placeholder {
	color: #8f8f8f;
}

.contact__form input:focus,
.contact__form textarea:focus {
	outline: none;
	border-color: var(--red);
}

.contact__form input[type="text"],
.contact__form input[type="tel"],
.contact__form input[type="email"] {
	height: 51.273px;
}

.contact__form textarea {
	height: 126px;
	resize: vertical;
}

/* Submit — the design's red CTA, full width, 44 below the fields. The arrow is
   a background SVG because CF7 renders <input>, which can't hold pseudo/child
   markup; padding-right leaves room so it doesn't sit under the centred text. */
.contact__form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
	margin-top: 33px;
	padding: 0 60px 0 29px;
	background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4 14L14 4M14 4H6M14 4V12' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 29px center;
	border: 0;
	color: var(--white);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15.333px;
	line-height: 17.733px;
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.2s ease;
	border-radius: 0;
}

.contact__form .wpcf7-submit:hover {
	opacity: 0.9;
}

/* CF7 status messages, kept inside the card. */
.contact__form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 10px 14px;
	font-size: 14px;
	border-width: 1px;
}

.contact__form .wpcf7-not-valid-tip {
	color: var(--red);
	font-size: 13px;
}

.contact__form .wpcf7-spinner {
	margin: 0 0 0 12px;
}
/* ---- sections/contact-map.css ---- */
/* ==========================================================================
   Contact map — Option 1. Full-bleed Google Maps embed, 1600x840 at y=1025.
   ========================================================================== */

.section--map {
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	line-height: 0;
	background: #e8e8e8;
}

.map__frame {
	display: block;
	width: 100%;
	/* 840 of 1600 in the reference frame. */
	height: clamp(360px, 52.5vw, 840px);
	border: 0;
}

/* The design's map is muted; desaturate to match without a styled-map API key. */
.section--map.is-grayscale .map__frame {
	filter: grayscale(1) contrast(0.95);
}
/* ---- sections/detail-awards.css ---- */
/* ==========================================================================
   Detail awards — Option 1. Reference frame 1600:
   heading Poppins Medium 38, then four 273x273 white logo boxes spread across
   the 1200 column (gap 36), each with a caption 36 below.
   ========================================================================== */

.section--awards {
	background: var(--color-bg);
	/* Section top 3576; the openings block ends at 3349. */
	padding-top: clamp(3rem, 14.2vw, 227px);
	/* Awards end at 4128; the CTA band starts at 4420. */
	padding-bottom: clamp(3rem, 18.25vw, 292px);
}

.awards {
	display: flex;
	flex-direction: column;
	gap: 81px;
	align-items: center;
}

.awards__heading {
	margin: 0;
	width: 100%;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.375vw, 38px);
	line-height: normal;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--white);
}

.awards__grid {
	display: grid;
	grid-template-columns: repeat(4, 273px);
	justify-content: space-between;
	gap: 36px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.award {
	display: flex;
	flex-direction: column;
	gap: 36px;
	align-items: center;
}

.award__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 273px;
	max-width: 100%;
	aspect-ratio: 1;
	padding: 36px;
	background: var(--white);
	border: 0.523px solid rgba(0, 0, 0, 0.43);
	box-shadow: 0 0 14.632px 0 rgba(0, 0, 0, 0.14);
}

.award__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.award__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
	color: var(--white);
}

.award__title {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 28px;
	/* No transform: the design types most of these uppercase but not the FSC
	   one, so the case belongs to the content, not the CSS. */
}

.award__desc {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 21px;
}
/* ---- sections/detail-gallery.css ---- */
/* ==========================================================================
   Detail gallery & finishes — Option 1. Reference frame 1600:
   collage panel #faf3e9, 1428.6 wide, 25 padding; inner grid 1378.6x597.3 with
   16 gaps — left column 616.879 (one 388.822 image over two 300.44x192.494),
   right column 745.719 full height.
   Finishes row: 1374 wide, 7 cells, gap 22, each 143 tall with a red label.
   ========================================================================== */

.section--collage {
	background: var(--color-bg);
	/* Collage top 1557.55, intro description ends 1383. */
	padding-top: clamp(3rem, 10.9vw, 174px);
}

.collage {
	max-width: 1428.606px;
	margin-inline: auto;
	padding: 25px;
	background: #faf3e9;
}

.collage__grid {
	display: grid;
	/* 616.879 : 745.719 of the 1378.6 inner width. */
	grid-template-columns: 616.879fr 745.719fr;
	grid-template-rows: 388.822fr 192.494fr;
	gap: 16px;
}

.collage__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.29);
}

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

/* Cross-fade when the finish switcher swaps the images (gallery.js). */
.collage__img {
	transition: opacity 0.25s ease;
}

.collage__img.is-fading {
	opacity: 0;
}

/* Large top-left, two small beneath it, one tall down the right. */
.collage__item--1 {
	grid-column: 1;
	grid-row: 1;
}

.collage__item--2,
.collage__item--3 {
	grid-row: 2;
	/* The two small images split the left column, minus the 16 gap. */
	width: calc(50% - 8px);
}

.collage__item--2 {
	grid-column: 1;
	justify-self: start;
}

.collage__item--3 {
	grid-column: 1;
	justify-self: end;
}

.collage__item--4 {
	grid-column: 2;
	grid-row: 1 / span 2;
}

/* ---- Finishes row ---- */
/* Panel bottom 2204.87 -> finishes 2251.36. */
.finishes {
	display: flex;
	gap: 22px;
	max-width: 1374px;
	margin: clamp(1.5rem, 2.9vw, 46.5px) auto 0;
	padding: 0;
	list-style: none;
}

/* Each finish is a button (interactive switcher); the <li> is the flex child. */
.finish-item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}

.finish {
	position: relative;
	/* Tag sits flush at the top-left of the swatch (Figma: flex-col, items-start),
	   overriding the button's default content-centering. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 143px;
	overflow: hidden;
	border: 0.523px solid var(--white);
	box-shadow: 0 0 14.632px 0 rgba(0, 0, 0, 0.14);
	background: var(--dark);
	/* button reset */
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

/* The design marks the current finish with a red border. */
.finish.is-active {
	border: 2px solid var(--red);
	box-shadow: none;
}

.finish:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

.finish__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.finish__label {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: var(--red);
	color: var(--white);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	/* Cap-height line-height reproduces Figma's text-box-trim, so the tag is the
	   design's ~40px tall (14 padding + cap text + 14 padding), not ~62px. */
	line-height: 0.7em;
	letter-spacing: -0.04em;
	white-space: nowrap;
}
/* ---- sections/detail-hero.css ---- */
/* ==========================================================================
   Detail hero — Option 1. Reference frame 1600x900:
   title cap-top y=652 (h=53) at x=71.69 — it shares .page-hero__title's type
   but NOT the page hero's 720 offset — then the two buttons at y=759 h=56.
   Scrims are 354 of 900 here (39.3%), not the page hero's 354 of 842.
   ========================================================================== */

/* Same 354 band, shorter frame. */
.detail-hero .page-hero__scrim {
	height: 39.333%;
}

.detail-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Same rule as the home / page hero: 900px tall, but never past the viewport. */
	min-height: min(900px, 100svh);
	overflow: hidden;
	background: var(--color-bg);
	color: var(--white);
}

.detail-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.detail-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail-hero__slide.is-active {
	opacity: 1;
}

.detail-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Same bottom-left content column as the home / page hero. */
/* Unlike the other heroes this one carries the slider dots underneath, so the
   copy stops higher: buttons end at 823 of the 900 frame, leaving 77 below for
   the dots. The page hero's 52 put the button row level with them and they
   ended up sitting side by side instead of stacked. */
.detail-hero__inner {
	position: relative;
	z-index: 2;
	max-width: calc(1440px + 2 * var(--container-pad));
	padding-top: calc(var(--header-h) + 2rem);
	/* Floor is 56, not the usual 2rem: the dots' 44px tap target sits 4 off the
	   bottom, so anything under 48 puts the button row back on top of them
	   between roughly 600 and 1000px wide. */
	padding-bottom: clamp(56px, 4.8125vw, 77px);
}

/* Title cap-bottom 705 -> buttons 759. */
.detail-hero__title {
	position: static;
	margin-bottom: clamp(1.25rem, 3.375vw, 54px);
}

.detail-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.75rem, 1.25vw, 20px);
}

/* The offset applies to the 44px tap target, not to the dot inside it: 4 here
   puts the visible 8px dot ~26 off the hero bottom, matching the design's 25.
   The old 40 pushed the whole target up level with the button row. */
.detail-hero__dots {
	position: absolute;
	z-index: 3;
	left: 50%;
	transform: translateX(-50%);
	bottom: 4px;
	display: flex;
	gap: 5px;
}

/* 8px dot in a 44px tap target. */
.detail-hero__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.detail-hero__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	transition: background 0.2s ease, transform 0.2s ease;
}

.detail-hero__dot.is-active::before {
	background: var(--white);
	transform: scale(1.25);
}
/* ---- sections/detail-intro.css ---- */
/* ==========================================================================
   Intro on a detail page — Option 1. Reference frame 1600:
   heading y=1120, and the hero ends at 900, so the top pad is 220.
   Typography is shared with the home intro — see base.css.
   ========================================================================== */

.section--detail-intro {
	background: var(--color-bg);
	text-align: center;
	padding-top: clamp(3rem, 13.75vw, 220px);
	/* The generic .section adds 96 top AND bottom. home-intro.css zeroes the
	   bottom, but it isn't loaded here — so zero it again or the collage below
	   lands 96 too low. */
	padding-bottom: 0;
}
/* ---- sections/detail-openings.css ---- */
/* ==========================================================================
   Detail opening systems — Option 1. Reference frame 1600:
   image 725.935x729.175 (1px #a8a8a8 border) + 60 gap + a 610-wide, 677-tall
   column that pushes the heading and the copy/arrows apart.
   ========================================================================== */

.section--openings {
	background: var(--color-bg);
	/* Section top 2620; the finishes row ends at 2394.4. */
	padding-top: clamp(3rem, 14.1vw, 226px);
}

.openings {
	display: flex;
	align-items: center;
	gap: 60px;
	max-width: calc(1396px + 2 * var(--container-pad));
}

.openings__media {
	position: relative;
	flex: 0 1 725.935px;
	aspect-ratio: 725.935 / 729.175;
	border: 1px solid #a8a8a8;
	overflow: hidden;
}

.openings__image {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.openings__image.is-active {
	opacity: 1;
}

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

.openings__body {
	display: flex;
	flex: 0 1 610px;
	flex-direction: column;
	justify-content: space-between;
	align-self: stretch;
	min-height: 677px;
}

.openings__heading {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.125vw, 50px);
	line-height: normal;
	letter-spacing: -0.01em;
	color: var(--white);
}

.openings__foot {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 43px;
}

/* Stack the copies so the section doesn't jump height as you step through. */
.openings__item {
	display: none;
	flex-direction: column;
	gap: 7px;
}

.openings__item.is-active {
	display: flex;
}

.openings__title {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.375rem, 2vw, 32px);
	line-height: normal;
	letter-spacing: -0.01em;
	color: var(--white);
}

.openings__desc {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: normal;
	color: var(--white);
	opacity: 0.8;
}

.openings__nav {
	display: flex;
	gap: 14px;
}

.openings__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--white);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.openings__arrow:hover {
	opacity: 0.7;
}

.openings__arrow--next {
	transform: scaleX(-1);
}

.slider__arrow-icon {
	width: 42px;
	height: 42px;
}
/* ---- sections/home-gallery.css ---- */
/* ==========================================================================
   Gallery — diagonal rotated collage of three animated marquee rows.
   Rows 1 & 3 move left → right, row 2 moves right → left. Seamless loop.
   ========================================================================== */

.section--gallery {
	padding: 0;
}

.gallery {
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	height: clamp(360px, 41vw, 657px);
	background: var(--beige);
	overflow: hidden;
}

.gallery__rows {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-28deg) scale(1.15);
	transform-origin: center;
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: max-content;
}

/* Track holds two identical copies of the row; translating loops it. */
.gallery__track {
	display: flex;
	gap: 32px;
	width: max-content;
	will-change: transform;
	animation: hass-marquee var(--marquee-duration, 40s) linear infinite;
}

/* Row scrolls so content moves right → left. */
.marquee--rtl .gallery__track {
	animation-direction: normal;
}

/* Reverse so content moves left → right. */
.marquee--ltr .gallery__track {
	animation-direction: reverse;
}

@keyframes hass-marquee {
	from {
		transform: translateX(0);
	}
	to {
		/* One copy = half the track minus half a gap (32px/2), so it loops seamlessly. */
		transform: translateX(calc(-50% - 16px));
	}
}

.gallery__item {
	flex: none;
	width: clamp(170px, 18vw, 300px);
	height: clamp(220px, 24vw, 400px);
}

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

.gallery__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.33);
	pointer-events: none;
}

/* Accessibility: stop motion for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.gallery__track {
		animation: none;
	}
}
/* ---- sections/home-hero.css ---- */
/* ==========================================================================
   Hero section — Option 1: full-bleed media, content overlaid bottom-left.
   Reference frame: 1600x900. Header sits on top of this, hence the white text.
   ========================================================================== */

.section--hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Explicit, so the aspect-ratio below can never run backwards and shrink the
	   full-bleed width once max-height clamps the height. */
	width: 100%;
	/* Follow the hero media's own 16:9. The height used to be a flat 900 cap
	   while the width stayed fluid, so the wider the screen the further the box
	   drifted from the video's ratio and the more object-fit: cover had to cut
	   (2560x900 discarded ~37% of the frame). Matching 16:9 makes the crop zero
	   on a 16:9 screen and much smaller everywhere else. */
	aspect-ratio: 16 / 9;
	/* 900/1600 of the reference frame, but never taller than the viewport. */
	min-height: min(900px, 100svh);
	max-height: 100svh;
	overflow: hidden;
	color: var(--white);
	background: var(--dark);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__media img,
.hero__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero copy sits in a 1440 column (x=80 at 1600), NOT the header's 1456 —
   the logo's own padding is what makes the two align visually in the design. */
.hero__inner {
	position: relative;
	z-index: 1;
	max-width: calc(1440px + 2 * var(--container-pad));
	/* 900 - 848 (CTA bottom) in the reference frame. */
	padding-bottom: clamp(2rem, 5.8vw, 52px);
	padding-top: calc(var(--header-h) + 2rem);
}

.hero__heading {
	max-width: 1097px;
	margin: 0;
	font-weight: 400;
	font-size: clamp(1.75rem, 3.06vw, 49px);
	line-height: 1.327;
	letter-spacing: -0.01em;
	color: var(--white);
	/* Honour the line breaks the editor types, as the design is hard-broken. */
	white-space: pre-line;
}

/* 792 - 756 in the reference frame. */
.hero__cta {
	margin-top: clamp(1.5rem, 2.25vw, 36px);
}
/* ---- sections/home-intro.css ---- */
/* ==========================================================================
   Intro tagline — Option 1 home. Reference frame 1600:
   heading y=1083 (hero ends at 900, so the top pad is 183), description y=1226.
   Typography is shared with the detail intro — see base.css.

   Scoped to a --home-intro modifier: pro-intro.php and detail-intro.php reuse
   the bare .section--intro class, and now that every page loads main.css these
   home-only rules (centring, the 183 top pad) would otherwise restyle them.
   ========================================================================== */

.section--home-intro {
	background: var(--color-bg);
	text-align: center;
	padding-top: clamp(3rem, 11.4vw, 183px);
	padding-bottom: 0;
}
/* ---- sections/home-quality.css ---- */
/* ==========================================================================
   Quality — Option 1. Reference frame 1600x900:
   arch 600x660 at x=500 y=120, top corners rounded 300 (a true semicircle),
   heading Poppins Regular 40/50 centred on the section, width 1133.
   The heading reads white outside the arch and #0d0d0d inside it.

   Scroll behaviour: `--p` (0 -> 1, set by assets/js/quality.js) grows the dome
   from the design's arch out to a full-screen background. --p:0 IS the design,
   so no-JS and reduced-motion both land on the static composition.
   ========================================================================== */

.section--quality {
	position: relative;
	background: var(--color-bg);
}

.quality__sticky {
	position: relative;
	aspect-ratio: 1600 / 900;
	min-height: 520px;
	overflow: hidden;
}

/* JS-only: give the section scroll length and pin the frame while it expands. */
.section--quality.is-expand {
	height: 250vh;
}

.section--quality.is-expand .quality__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	aspect-ratio: auto;
	min-height: 0;
}

/* The arch and the mask must be the same shape in the same place — one rule
   drives both, so the mask tracks the dome as it grows. The slashed radius
   keeps the top a real semicircle (300 of 600 wide, 300 of 660 tall) at any
   size, which a flat `300px` would not. */
.quality__arch,
.quality__mask {
	position: absolute;
	left: calc(31.25% * (1 - var(--p, 0)));
	top: calc(13.333% * (1 - var(--p, 0)));
	width: calc(37.5% + 62.5% * var(--p, 0));
	height: calc(73.333% + 26.667% * var(--p, 0));
	border-radius:
		calc(50% * (1 - var(--p, 0))) calc(50% * (1 - var(--p, 0))) 0 0 /
		calc(45.4545% * (1 - var(--p, 0))) calc(45.4545% * (1 - var(--p, 0))) 0 0;
	overflow: hidden;
}

.quality__arch {
	z-index: 0;
}

.quality__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quality__wash {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.5);
	pointer-events: none;
}

.quality__heading {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(1133px, 92vw);
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.5vw, 40px);
	line-height: 1.25;
	text-align: center;
	color: var(--white);
	z-index: 1;
}

/* The centred heading (white + dark mask) fades out as the pill forms. */
.quality__arch ~ .quality__heading,
.quality__mask {
	opacity: calc(1 - var(--pill, 0));
}

/* Sits above the white copy; the arch clip is what limits it to the dome. */
.quality__mask {
	z-index: 2;
	pointer-events: none;
}

.quality__heading--dark {
	color: #0d0d0d;
}

/* Single-line pill at the bottom of the expanded dome. Hidden at rest
   (--pill:0), it fades and rises in as the heading leaves the centre. */
.quality__pill {
	position: absolute;
	left: 50%;
	bottom: clamp(1.5rem, 4vw, 56px);
	transform: translateX(-50%) translateY(calc((1 - var(--pill, 0)) * 24px));
	margin: 0;
	max-width: 92vw;
	padding: 14px 34px;
	background: rgba(0, 0, 0, 0.42);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	white-space: nowrap;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(0.85rem, 1.35vw, 22px);
	line-height: 1.4;
	text-align: center;
	color: var(--white);
	opacity: var(--pill, 0);
	pointer-events: none;
	z-index: 3;
}

/* Reduced motion: no scroll hijack, just the design's static composition. */
@media (prefers-reduced-motion: reduce) {
	.section--quality.is-expand {
		height: auto;
	}

	.section--quality.is-expand .quality__sticky {
		position: relative;
		height: auto;
		aspect-ratio: 1600 / 900;
		min-height: 520px;
	}
}
/* ---- sections/home-stats.css ---- */
/* ==========================================================================
   Stats & images — Option 1. Reference frame 1600 wide:
   grid y=1481 h=621, x=200 w=1200, 3 equal columns, gap 39.
   Middle column puts its image on top; the outer two put it below.
   Watermark band y=2301 h=127.
   ========================================================================== */

.section--stats {
	background: var(--color-bg);
	/* 1481 - 1316 (intro description bottom). */
	padding-top: clamp(2.5rem, 10.3vw, 165px);
	/* 2437 (kitchens) - 2428 (watermark bottom). */
	padding-bottom: 9px;
	overflow: hidden;
}

.stats__grid {
	max-width: calc(1200px + 2 * var(--container-pad));
}

/* The row itself. On desktop it is the 3-column grid; on mobile it becomes a
   horizontal track wider than its window (see the mobile block below). */
.stats__track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 39px;
	align-items: start;
}

.stat {
	display: flex;
	flex-direction: column;
}

.stat__text {
	display: flex;
	flex-direction: column;
	gap: 29px;
	color: var(--white);
}

.stat--image-bottom .stat__text {
	padding: 29px 0 32px;
}

.stat--image-top .stat__text {
	padding: 32px 0 29px;
	order: 2;
}

.stat--image-top .stat__image {
	order: 1;
}

/* Figma trims these line boxes to cap height (text-box-trim), which is what
   makes a column 621 tall rather than 664. Explicit cap-height line-heights
   reproduce that in every browser, not just the ones supporting text-box. */
.stat__value {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(2rem, 3.27vw, 52.34px);
	line-height: 0.7em;
	letter-spacing: -0.04em;
}

.stat__label {
	margin: 0;
	font-family: var(--font-alt);
	font-weight: 400;
	font-size: clamp(0.95rem, 1.125vw, 18px);
	line-height: 0.727em;
}

.stat__image {
	position: relative;
	/* 481 tall in a 374-wide column, in the reference frame. */
	aspect-ratio: 374 / 481;
	border: 1px solid #0d0d0d;
	box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.14);
}

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

/* Deliberately wider than the viewport (2918 at 1600) — the section clips it,
   showing the MIDDLE of the string. text-align:center can't do this: the
   section is a scroll container (overflow:hidden), so Chrome pins inline-start
   overflow and you'd see the start of the string instead. Centre it
   geometrically with max-content + translate so both ends clip equally. */
.stats__watermark {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	margin-top: clamp(3rem, 12.4vw, 199px);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(3.5rem, 8.125vw, 130px);
	line-height: 0.977;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.08);
	opacity: 0.7;
	pointer-events: none;
	user-select: none;
}
/* ---- sections/listing-filters.css ---- */
/* ==========================================================================
   Listing filter bar — Option 1. Reference frame 1600:
   bar y=1087 x=197.5 w=1205 h=56, four controls 270/271 wide at x=0/310/621/931
   (gap 40). Each control is text + icon with a BOTTOM underline only
   (rgba(255,255,255,0.22)) — not a full box. Poppins Medium 15.333/17.733
   uppercase. The selects are progressively enhanced into a themed dropdown
   (assets/js/filters.js); without JS the native select + Filter button work.
   ========================================================================== */

.section--filters {
	background: var(--color-bg);
	/* 1087 - 900 (hero bottom). */
	padding-top: clamp(2rem, 8.5vw, 137px);
}

.filters {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	max-width: calc(1205px + 2 * var(--container-pad));
}

/* The bar and the panel are structural wrappers for the mobile sheet only.
   `display: contents` keeps their children as direct grid items here, so the
   four-across desktop bar above is completely unaffected by them. */
.filters__bar,
.filters__panel {
	display: contents;
}

/* Desktop shows every dropdown already, so the sliders button and the sheet's
   own chrome have no job. */
.filters__toggle,
.filters__panel-head,
.filters__panel-actions,
.filters__backdrop {
	display: none;
}

.filters__field {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 56px;
	padding: 13px 6px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--white);
	transition: border-color 0.2s ease;
}

/* A touch brighter underline when focused within or hovering — soft feedback. */
.filters__field:hover,
.filters__field:focus-within,
.filters__field.is-open {
	border-color: rgba(255, 255, 255, 0.5);
}

.filters__field input,
.filters__field select {
	flex: 1;
	min-width: 0;
	height: 100%;
	background: none;
	border: 0;
	color: inherit;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15.333px;
	line-height: 17.733px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	appearance: none;
	cursor: pointer;
}

.filters__field input {
	cursor: text;
}

.filters__field input::placeholder {
	color: var(--white);
	opacity: 0.85;
	text-transform: uppercase;
}

/* No box outline on focus — the brightened underline (.filters__field:focus-within
   above) is the focus indicator instead. */
.filters__field input:focus,
.filters__field input:focus-visible,
.filters__field select:focus,
.filters__field select:focus-visible,
.filter-dd__toggle:focus,
.filter-dd__toggle:focus-visible {
	outline: none;
}

/* Native dropdown list fallback (no JS): keep it legible on dark. */
.filters__field select option {
	background: var(--dark);
	color: var(--white);
}

.filters__search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	flex: none;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

.filters__search button:hover {
	opacity: 1;
}

.filters__icon {
	width: 20px;
	height: 20px;
}

.filters__caret {
	width: 12px;
	height: 7px;
	flex: none;
	pointer-events: none;
}

/* ==========================================================================
   Themed custom dropdown (assets/js/filters.js). The native select is hidden
   once enhanced; this soft, dark panel takes its place — matching the site's
   luxury feel: deep charcoal, hairline border, soft shadow, gentle fade.
   ========================================================================== */

/* When enhanced, hide the native control; the custom toggle drives the field. */
.filters__select.is-enhanced select,
.filters__select.is-enhanced > .filters__caret,
.filters__select.is-enhanced > label {
	display: none;
}

.filter-dd {
	position: static;
	flex: 1;
	min-width: 0;
}

.filter-dd__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15.333px;
	line-height: 17.733px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: left;
	cursor: pointer;
}

.filter-dd__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.filter-dd__caret {
	width: 12px;
	height: 7px;
	flex: none;
	transition: transform 0.25s ease;
}

.filters__select.is-open .filter-dd__caret {
	transform: rotate(180deg);
}

.filter-dd__panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 40;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #2b2c2e;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
	max-height: 320px;
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.filters__select.is-open .filter-dd__panel {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.filter-dd__option {
	padding: 11px 14px;
	border-radius: 4px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.82);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.filter-dd__option:hover,
.filter-dd__option.is-highlighted {
	/* Warm beige wash — the site's luxury accent. */
	background: rgba(245, 233, 217, 0.09);
	color: var(--white);
}

.filter-dd__option[aria-selected="true"] {
	color: var(--beige);
}

/* The first option clears the filter; set it apart with a hairline. */
.filter-dd__option--all {
	color: rgba(255, 255, 255, 0.55);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px 4px 0 0;
	margin-bottom: 4px;
}

/* While the grid is being fetched (no-reload filtering), soften + lock it. */
.listing.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
/* ---- sections/listing-grid.css ---- */
/* ==========================================================================
   Listing items grid — Option 1. Reference frame 1600:
   grid x=197.5 w=1205, two columns of 580 with a 45 gutter; row pitch 760 for
   a 647-tall card, so the row gap is 113.
   Card: image 580x506, then title, then button — 10 apart (Figma gap:10 on
   cap-trimmed boxes).
   ========================================================================== */

.section--listing {
	background: var(--color-bg);
	/* Grid starts 139 below the filter bar's top (bar is 56 tall). */
	padding-top: 83px;
	/* Grid ends at 3285; the CTA band starts at 3542. */
	padding-bottom: clamp(3rem, 16vw, 257px);
}

.listing {
	max-width: calc(1205px + 2 * var(--container-pad));
}

.listing__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 45px;
	row-gap: 113px;
}

.card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.card__media {
	display: block;
	width: 100%;
	aspect-ratio: 580 / 506;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
}

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

.card:hover .card__media img {
	transform: scale(1.05);
}

/* NOT cap-trimmed in the design (unlike most text here) — the title box really
   is the full 65 line-height, which is what makes the card 647 tall:
   506 + 10 + 65 + 10 + 56. */
.card__title {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(1.5rem, 2vw, 32px);
	line-height: 65px;
	letter-spacing: -0.01em;
	color: var(--white);
}

.card__title a:hover {
	color: var(--red);
}

.listing__empty {
	font-size: 1.125rem;
	opacity: 0.7;
}

.listing__pagination {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: clamp(2.5rem, 5vw, 80px);
	font-size: 1rem;
}

.listing__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.listing__pagination .page-numbers.current,
.listing__pagination .page-numbers:hover {
	background: var(--red);
	border-color: var(--red);
	color: var(--white);
}
/* ---- sections/media-feed.css ---- */
/* ==========================================================================
   Media (blog) feed — Option 1. Reference frame 1600:
   tabs row at ~y=1030, grid x=200 w=1200 y=1146, cards in a 3-col grid with
   67 row gap / 46 column gap. Card 369.5 wide: image ~223.6 tall, then date
   (Poppins 14/20) and title (Poppins Medium 18/24), both at ~23 inset.
   ========================================================================== */

.section--feed {
	background: var(--color-bg);
	/* Hero ends at 842; the tabs sit ~188 below. */
	padding-top: clamp(2.5rem, 11.75vw, 188px);
	padding-bottom: clamp(3rem, 7vw, 6rem);
}

/* ---- Category tabs ---- */
.feed__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 2.9vw, 46px);
	margin-bottom: clamp(2rem, 4.2vw, 67px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding-bottom: 18px;
	font-family: var(--font-body);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.feed__tab {
	position: relative;
	color: rgba(255, 255, 255, 0.6);
	padding-bottom: 18px;
	margin-bottom: -19px;
	transition: color 0.2s ease;
}

.feed__tab:hover {
	color: var(--white);
}

.feed__tab.is-active {
	color: var(--white);
	border-bottom: 2px solid var(--red);
}

/* ---- Card grid ---- */
.feed__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 46px;
	row-gap: 67px;
}

.feed__empty {
	opacity: 0.7;
}

/* ---- Pagination ---- */
.feed .pagination,
.feed .navigation.pagination {
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(2.5rem, 5vw, 80px);
}

.feed .nav-links {
	display: flex;
	gap: 0.5rem;
}

.feed .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 0.95rem;
}

.feed .page-numbers.current,
.feed .page-numbers:hover {
	background: var(--red);
	border-color: var(--red);
	color: var(--white);
}

/* Fade the feed while a tab / page is fetched (no-reload switching). */
.feed.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
/* ---- sections/pro-arch.css ---- */
/* For Professionals arch statement reuses the shared quality-arch component, so
   it loads that component's styles. (Only the heading + media differ per page.) */
/* (home-quality rules are inline below - the old @import is gone) */
/* ---- sections/pro-audience.css ---- */
/* For Professionals "Who We Work With": watermark + heading, a wide image, then
   a two-column row (client-category list left, description right). */
.pro-audience {
	position: relative;
	overflow: clip;
	text-align: center;
}

.pro-audience__head {
	position: relative;
	margin-bottom: clamp(2rem, 3.75vw, 60px);
}

.pro-audience__watermark {
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(3rem, 8.125vw, 130px);
	line-height: 0.3;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.18);
	opacity: 0.7;
	pointer-events: none;
}

.pro-audience__heading {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.125vw, 50px);
	letter-spacing: -0.01em;
	color: var(--white);
}

.pro-audience__media {
	margin-bottom: clamp(2rem, 4vw, 64px);
	overflow: hidden;
	/* Fixed aspect so hover-swapped images never jump the layout. The default
	   image already matches this ratio, so the design is unchanged. */
	aspect-ratio: 1200 / 464;
}

.pro-audience__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.35s ease;
}

.pro-audience__media img.is-fading {
	opacity: 0;
}

.pro-audience__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 80px);
	align-items: center;
	text-align: left;
}

.pro-audience__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Poppins Medium 30, tracking -0.3px, gray inactive / white active. Each line is
   a faint frosted panel with its OWN backdrop-blur, and the lines OVERLAP: the
   next line's panel sits over the bottom of the line behind it and blurs just
   that strip — so each row's top stays crisp and only its bottom shows the blur
   (the design's mechanism), while the top (active) row stays fully sharp. */
.pro-audience__item {
	position: relative;
	height: 1.5em;         /* 45px at 30px; the text sits at the top */
	margin-bottom: -0.6em; /* overlap 18px -> 27px row pitch */
	background: rgba(52, 53, 56, 0.1);
	-webkit-backdrop-filter: blur(1.9px);
	backdrop-filter: blur(1.9px);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.25rem, 1.875vw, 40px);
	line-height: normal;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: rgba(145, 145, 145, 0.38);
}

.pro-audience__item:last-child {
	margin-bottom: 0;
}

/* Default state: the FIRST label is active (white + sharp) — removing the next
   panel's backdrop un-blurs its bottom edge so it reads fully crisp. */
.pro-audience__item.is-active {
	color: var(--white);
}

.pro-audience__item.is-active + .pro-audience__item {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.pro-audience__item {
	cursor: pointer;
	transition: color 0.2s ease;
}

/* Hover: the hovered label turns white; removing the NEXT panel's backdrop-blur
   un-blurs this label's bottom so it reads fully sharp — with no change to any
   other label (the next panel's own look comes from its neighbours, not itself). */
.pro-audience__item:hover {
	color: var(--white);
}

.pro-audience__item:hover + .pro-audience__item {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* While the list is being hovered, the default-active label steps back to the
   inactive gray (and its neighbour re-blurs) unless it is itself the hovered
   one — so only the hovered label is ever white, never two at once. */
.pro-audience__list:hover .pro-audience__item.is-active:not(:hover) {
	color: rgba(145, 145, 145, 0.38);
}

.pro-audience__list:hover .pro-audience__item.is-active:not(:hover) + .pro-audience__item {
	-webkit-backdrop-filter: blur(1.9px);
	backdrop-filter: blur(1.9px);
}

.pro-audience__desc {
	margin: 0;
	max-width: 620px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--white);
	opacity: 0.8;
}
/* ---- sections/pro-banner.css ---- */
/* Technical Resources banner. The shared .feature-banner uses aspect-ratio
   1600/900 (which overflows the viewport on wide screens); this variant caps it
   to the screen height instead, the same rule as the site's heroes.

   Scoped with a modifier rather than a bare .feature-banner: all CSS now ships
   in one stylesheet on every page, so an unscoped override here would also
   reshape the Kitchens and Wardrobes banners on the home page. */
/* Two classes deliberately: responsive.css loads last, and base's
   `@media (max-width: 900px) { .feature-banner { min-height: 560px } }` lives
   there now. At equal specificity that media query would win purely on order
   and squash this variant to 560 on every small screen, so this needs to
   out-specify it rather than rely on source position. */
.feature-banner.feature-banner--fit {
	aspect-ratio: auto;
	min-height: min(900px, 100svh);
}
/* ---- sections/pro-form.css ---- */
/* For Professionals enquiry form (left, reusing .book-form CF7 styles) + a
   contact card (right) with a background image. Reference: form 686 wide, card
   446 wide. */
.pro-form__inner {
	display: flex;
	align-items: stretch;
	gap: clamp(2rem, 5vw, 80px);
}

.pro-form__main {
	flex: 1 1 686px;
	min-width: 0;
}

.pro-form__heading {
	margin: 0 0 clamp(1.5rem, 3.3vw, 53px);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 2.625vw, 42px);
	letter-spacing: -0.01em;
	color: var(--white);
}

/* The Book form centres itself; here it fills the left column (its fields,
   toggle and submit come from the shared .book-form styles in base.css). */
.pro-form__cf7 {
	max-width: none;
	margin: 0;
}

/* ---- Contact card ---- */
.pro-form__card {
	position: relative;
	flex: 0 0 446px;
	max-width: 446px;
	overflow: hidden;
	color: var(--white);
}

.pro-form__card-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.pro-form__card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 18, 18, 0.5) 0%, rgba(18, 18, 18, 0.72) 100%);
	z-index: 1;
}

.pro-form__card-body {
	position: relative;
	z-index: 2;
	padding: clamp(1.75rem, 2.25vw, 36px);
}

.pro-form__card-heading {
	margin: 0 0 clamp(1.75rem, 3.5vw, 56px);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.5rem, 2vw, 32px);
	line-height: 1.25;
	color: var(--white);
}

.pro-form__card-details p {
	margin: 0 0 clamp(1.25rem, 2vw, 28px);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
}

.pro-form__card-details p:last-child {
	margin-bottom: 0;
}

.pro-form__card-details a:hover {
	color: var(--red);
}
/* ---- sections/pro-services.css ---- */
/* Service rows reuse the shared .about-row layout; here we tighten the vertical
   rhythm (rows sit ~130px apart in the design) and add the CTA below the text. */
.pro-service {
	padding-block: clamp(2rem, 4.1vw, 66px);
}

.pro-service__cta {
	margin-top: clamp(1.5rem, 2.4vw, 35px);
}
/* ---- single-post.css ---- */
/* ==========================================================================
   Single blog post (Media Detail) — Option 1. Reference frame 1600:
   no hero banner; content 1200 at x=200, y=222. Article column 737, then a 93
   gap, then a 370 "Related News" sidebar.
   Body copy Inter Light 16/27; title Poppins Medium 38/50; date Poppins 16/20.
   ========================================================================== */

.section--article {
	background: var(--color-bg);
	/* The header is position:absolute (out of flow), so this section starts at
	   y=0 behind it. Clear the header (--header-h) THEN add the design's 98px gap
	   so the title lands at ~222 as in Figma — not 98px from the very top. */
	padding-top: calc(var(--header-h) + clamp(1.5rem, 6.1vw, 98px));
	padding-bottom: clamp(3rem, 7vw, 6rem);
	color: var(--white);
}

.article {
	display: grid;
	grid-template-columns: 737fr 370fr;
	column-gap: 93px;
	align-items: start;
}

/* ---- Article column ---- */
.article__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 32px;
}

.article__date {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	opacity: 0.8;
}

.article__title {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 2.375vw, 38px);
	line-height: 1.315;
	letter-spacing: -0.01em;
}

/* Editor content: paragraphs, inline images and sub-headings. */
.article__body {
	font-family: var(--font-alt);
	font-weight: 300;
	font-size: 16px;
	line-height: 27px;
	color: rgba(255, 255, 255, 0.92);
}

.article__body > :first-child {
	margin-top: 0;
}

.article__body p {
	margin: 0 0 27px;
}

.article__body h2,
.article__body h3,
.article__body h4 {
	margin: 40px 0 16px;
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--white);
}

.article__body h2 {
	font-size: 24px;
}

.article__body h3 {
	font-size: 20px;
}

.article__body img {
	width: 100%;
	height: auto;
	margin: 8px 0 32px;
}

.article__body a {
	color: var(--white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article__body ul,
.article__body ol {
	margin: 0 0 27px;
	padding-left: 1.25rem;
	list-style: revert;
}

.article__body li {
	margin-bottom: 8px;
}

.article__body blockquote {
	margin: 32px 0;
	padding-left: 20px;
	border-left: 2px solid var(--red);
	font-style: italic;
}

/* ---- Related sidebar ---- */
.article__aside-title {
	margin: 0 0 22px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 2.375vw, 38px);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Framed vertical cards (same as the Media feed), 46px apart (Figma pitch 422.6
   over a 376.6-tall card). */
.article__related {
	display: flex;
	flex-direction: column;
	gap: 46px;
}