/*
 * Elevare base styles.
 *
 * Deliberately minimal: typography, layout primitives and the few components
 * the theme renders itself (header, footer, catalog grid, product page).
 * Anything built in Elementor brings its own styling, so nothing here uses
 * !important and no rule targets .elementor-* markup.
 */

/* Brand tokens from the DZ Studio brandbook (Jan 2026). The three Pantone
   values are confirmed by the logo SVGs: VERDE #2a312d = Pantone 447C,
   GELO #b4aea8 = 401C, and 4244C #846a54. The warm ground #e3e0de was signed
   off on 16/10 and matches the web mockup on brandbook p.31.

   #846a54 reaches only 3.8:1 on the ground, so it is a fill colour for
   buttons and large display type, never body text. #b4aea8 is 1.7:1 and is
   therefore borders and decoration only.

   Type: Encode Sans Expanded stands in for New Science Extended (titles),
   Archivo for Rig Sans (body). Both are free; the brand faces are licensed. */
:root {
	--elevare-page: #e3e0de;
	--elevare-surface: #ffffff;
	--elevare-surface-alt: #ece9e7;
	--elevare-ink: #2a312d;
	--elevare-ink-soft: #575c56;
	--elevare-line: #c6c1bb;
	--elevare-rule: #b4aea8;
	--elevare-accent: #2a312d;
	--elevare-accent-ink: #ffffff;
	--elevare-accent-warm: #846a54;
	--elevare-radius: 2px;
	--elevare-container: 1240px;
	--elevare-gap: 1.5rem;
	--elevare-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", sans-serif;
	--elevare-font-display: "Encode Sans Expanded", var(--elevare-font);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	/* .bleed uses 100vw to escape the container; clip keeps that from adding a
	   horizontal scrollbar, and unlike hidden it does not break sticky. */
	overflow-x: clip;
	font-family: var(--elevare-font);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--elevare-ink);
	background: var(--elevare-page);
	-webkit-font-smoothing: antialiased;
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--elevare-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

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

h1,
.page-title,
.product__title {
	text-transform: uppercase;
}

h1 {
	font-size: clamp(1.9rem, 4vw, 2.75rem);
}

h2 {
	font-size: clamp(1.45rem, 2.6vw, 1.9rem);
}

/* ---------- Accessibility ---------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 0.6rem 1rem;
	clip-path: none;
	background: var(--elevare-surface);
	border-radius: var(--elevare-radius);
	box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
}

:focus-visible {
	outline: 2px solid var(--elevare-accent);
	outline-offset: 2px;
}

/* ---------- Layout ---------- */

.container {
	width: 100%;
	max-width: var(--elevare-container);
	margin-inline: auto;
	padding-inline: 1rem;
}

/* Breaks a full-bleed band out of .container, for shortcodes dropped into
   page content. */
.bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.site-main {
	padding-block: 3rem;
}

/* Content + sidebar grid. Collapses to one column when the sidebar is empty
   (body.has-no-sidebar) or on narrow screens. */
.site-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 3rem;
	align-items: start;
}

.has-no-sidebar .site-layout {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 960px) {
	.site-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

.site-main--full {
	padding-block: 0;
}

/* Archive banners meet the header; spacing belongs inside the catalog. */
.site-main--catalog {
	padding-block: 0;
}

.site-main--catalog > .container {
	padding-top: 2rem;
	padding-bottom: 4rem;
}

.tax-elv_collection .site-footer,
.tax-elv_tone .site-footer {
	margin-top: 0;
}

@media (max-width: 782px) {
	.site-main--catalog > .container {
		padding-top: 1.5rem;
		padding-bottom: 3rem;
	}
}

/* ---------- Header ---------- */

.site-header {
	border-bottom: 1px solid var(--elevare-line);
	background: var(--elevare-surface);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--elevare-gap);
	min-height: 72px;
}

.site-title {
	margin: 0;
	font-size: 1.25rem;
}

.site-title a {
	color: inherit;
	text-decoration: none;
}

.site-description {
	margin: 0;
	font-size: 0.85rem;
	color: var(--elevare-ink-soft);
}

.custom-logo {
	display: block;
	max-height: 48px;
	width: auto;
}

.main-navigation ul {
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation a {
	color: var(--elevare-ink);
	text-decoration: none;
	font-size: 0.95rem;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--elevare-accent);
}

.main-navigation .sub-menu {
	position: absolute;
	display: none;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0.9rem 1.1rem;
	background: var(--elevare-surface);
	border: 1px solid var(--elevare-line);
	border-radius: var(--elevare-radius);
	box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

.main-navigation li {
	position: relative;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	display: flex;
}

.nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--elevare-line);
	border-radius: var(--elevare-radius);
	cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	background: var(--elevare-ink);
	transform: translateX(-50%);
	content: "";
}

.nav-toggle__bar {
	top: 50%;
	transform: translate(-50%, -50%);
}

.nav-toggle__bar::before {
	top: -6px;
}

.nav-toggle__bar::after {
	top: 6px;
}

@media (max-width: 782px) {
	.nav-toggle {
		display: block;
	}

	.main-navigation {
		display: none;
		flex-basis: 100%;
	}

	.main-navigation.is-open {
		display: block;
	}

	.site-header__inner {
		flex-wrap: wrap;
		padding-block: 0.75rem;
	}

	.main-navigation ul {
		flex-direction: column;
		gap: 0.75rem;
		padding-block: 1rem;
	}

	.main-navigation .sub-menu {
		position: static;
		display: flex;
		border: 0;
		box-shadow: none;
		padding-left: 1rem;
	}
}

/* ---------- Entries ---------- */

.page-header {
	margin-bottom: 2.5rem;
}

.page-title {
	margin-bottom: 0.25rem;
}

.entry-list {
	display: grid;
	gap: 2.5rem;
}

.entry--summary {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: var(--elevare-gap);
	align-items: start;
}

.entry--summary .entry__thumb img {
	border-radius: var(--elevare-radius);
	display: block;
}

.entry__title {
	margin-bottom: 0.3rem;
}

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

.entry__meta {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	color: var(--elevare-ink-soft);
}

.entry__sep {
	margin-inline: 0.4rem;
}

.entry__content > * + * {
	margin-top: 1.1rem;
}

.entry__media img {
	border-radius: var(--elevare-radius);
}

@media (max-width: 640px) {
	.entry--summary {
		grid-template-columns: 1fr;
	}
}

/* ---------- Catalog ---------- */

.catalog-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.catalog-filter:last-of-type {
	margin-bottom: 2.5rem;
}

.catalog-filter__label {
	margin-right: 0.5rem;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.catalog-filter__item {
	padding: 0.4rem 0.9rem;
	font-size: 0.9rem;
	color: var(--elevare-ink);
	text-decoration: none;
	background: var(--elevare-surface-alt);
	border: 1px solid var(--elevare-line);
	border-radius: 999px;
}

.catalog-filter__item.is-active {
	color: var(--elevare-accent-ink);
	background: var(--elevare-accent);
	border-color: var(--elevare-accent);
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns, 4), minmax(0, 1fr));
	gap: var(--elevare-gap);
}

@media (max-width: 960px) {
	.product-grid {
		grid-template-columns: repeat(min(var(--grid-columns, 4), 3), minmax(0, 1fr));
	}
}

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

.product-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.product-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--elevare-radius);
	background: var(--elevare-surface-alt);
	aspect-ratio: 4 / 5;
}

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

.product-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--elevare-surface-alt), var(--elevare-line));
}

.product-card__badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	padding: 0.2rem 0.55rem;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--elevare-surface);
	border-radius: 999px;
}

.product-card__body {
	padding-top: 0.75rem;
}

.product-card__title {
	margin: 0 0 0.2rem;
	font-size: 0.98rem;
	font-weight: 600;
}

.product-card__code {
	margin: 0;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--elevare-ink-soft);
}

/* ---------- Single color ---------- */

.breadcrumb {
	margin-bottom: 1.5rem;
	font-size: 0.85rem;
	color: var(--elevare-ink-soft);
}

.breadcrumb a {
	color: inherit;
}

.breadcrumb__sep {
	margin-inline: 0.4rem;
}

.product--single {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

.product__media img,
.product__media-placeholder {
	width: 100%;
	border-radius: var(--elevare-radius);
}

.product__media-placeholder {
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, var(--elevare-surface-alt), var(--elevare-line));
}

.product__title {
	margin-bottom: 0.4rem;
}

.product__description {
	grid-column: 1 / -1;
}

.product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.related-products {
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--elevare-line);
}

@media (max-width: 782px) {
	.product--single {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* ---------- Buttons & forms ---------- */

.button,
button,
input[type="submit"] {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	font: inherit;
	font-weight: 600;
	color: var(--elevare-ink);
	text-decoration: none;
	cursor: pointer;
	background: var(--elevare-surface-alt);
	border: 1px solid var(--elevare-line);
	border-radius: var(--elevare-radius);
}

.button--primary {
	color: var(--elevare-accent-ink);
	background: var(--elevare-accent);
	border-color: var(--elevare-accent);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.85rem;
	font: inherit;
	color: inherit;
	background: var(--elevare-surface);
	border: 1px solid var(--elevare-line);
	border-radius: var(--elevare-radius);
}

.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 420px;
}

/* ---------- Sidebar & widgets ---------- */

.widget-area {
	display: grid;
	gap: 2rem;
	padding-block: 3rem;
}

@media (max-width: 960px) {
	.widget-area {
		padding-top: 0;
		border-top: 1px solid var(--elevare-line);
	}
}

.widget__title {
	font-size: 1rem;
	margin-bottom: 0.6rem;
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

/* ---------- Footer ---------- */

.site-footer {
	margin-top: 4rem;
	padding-block: 3rem 1.5rem;
	font-size: 0.9rem;
	background: var(--elevare-surface-alt);
	border-top: 1px solid var(--elevare-line);
}

.site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 2rem;
	padding-bottom: 2rem;
}

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--elevare-line);
}

.site-footer__credit {
	margin: 0;
	color: var(--elevare-ink-soft);
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-navigation a {
	color: var(--elevare-ink-soft);
	text-decoration: none;
}

/* ---------- Pagination & comments ---------- */

.pagination,
.post-navigation {
	margin-top: 3rem;
}

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

.pagination .page-numbers {
	padding: 0.4rem 0.8rem;
	text-decoration: none;
	border: 1px solid var(--elevare-line);
	border-radius: var(--elevare-radius);
}

.pagination .page-numbers.current {
	color: var(--elevare-accent-ink);
	background: var(--elevare-accent);
	border-color: var(--elevare-accent);
}

.comments-area {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--elevare-line);
}

.comment-list {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin: 1.5rem 0 0 1.5rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1.5rem;
}

/* ---------- Alignment helpers for editor content ---------- */

.alignwide {
	max-width: min(100%, 1320px);
	margin-inline: auto;
}

.alignfull {
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption-text,
figcaption {
	font-size: 0.85rem;
	color: var(--elevare-ink-soft);
}


/* ---------- Catalog additions ---------- */

.page-subtitle {
	max-width: 46ch;
	margin: 0;
	color: var(--elevare-ink-soft);
}

.product__collection a {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
	text-decoration: none;
}

.product__code {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	color: var(--elevare-ink-soft);
}

.badge {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.25rem 0.7rem;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--elevare-line);
	border-radius: 999px;
}

.badge--silica {
	color: #1b7f4a;
	border-color: currentColor;
}

.spec-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.65rem 1.5rem;
	margin: 1.5rem 0 2rem;
	padding-top: 1.5rem;
	font-size: 0.92rem;
	border-top: 1px solid var(--elevare-line);
}

.spec-list dt {
	color: var(--elevare-ink-soft);
}

.spec-list dd {
	margin: 0;
}

.spec-list__size {
	display: block;
}

.spec-list__size + .spec-list__size {
	margin-top: 0.35rem;
}

.spec-list__size small {
	color: var(--elevare-ink-soft);
}

/* ---------- Language switcher ---------- */

.language-switcher {
	display: flex;
	gap: 0.15rem;
	margin-left: auto;
	margin-right: 1.5rem;
}

.language-switcher__item {
	padding: 0.25rem 0.5rem;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--elevare-ink-soft);
	text-decoration: none;
	border-radius: 4px;
}

.language-switcher__item.is-active {
	color: var(--elevare-ink);
	background: var(--elevare-surface-alt);
}

@media (max-width: 782px) {
	.language-switcher {
		margin-right: 0.75rem;
	}
}

/* ---------- Brand mark ---------- */

.site-title--logo {
	margin: 0;
	line-height: 0;
}

.site-title--logo a {
	display: inline-block;
}

.site-title--logo img {
	display: block;
	width: auto;
	height: 52px;
}

@media (max-width: 782px) {
	.site-title--logo img {
		height: 42px;
	}
}

/* The footer sits on the warm ground, so the dark mark is correct there too. */
.site-footer .site-title--logo img {
	height: 46px;
}

/* ---------- Footer brand block ---------- */

.site-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2rem 3rem;
	padding-bottom: 2rem;
}

.site-footer__signature {
	flex: 1 1 260px;
	margin: 0;
	font-family: var(--elevare-font-display);
	font-size: 0.82rem;
	font-weight: 300;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.site-footer__address {
	flex: 0 1 320px;
	margin: 0;
	font-style: normal;
	line-height: 1.8;
}

.site-footer__address a {
	color: inherit;
}

/* =====================================================================
   DESIGN SYSTEM — the three revision rounds, brought into the theme.
   Rules recorded in section 05 of the style guide:
     1. every stone image carries a Gelo hairline
     2. image-led sections sit on Verde
     3. text over an image always sits on a scrim
     4. motion is hover only (decisions #16, #17)
   ===================================================================== */

.frame {
	border: 1px solid var(--elevare-rule);
}

.on-dark {
	background: var(--elevare-ink);
	color: #ffffff;
}

.on-dark .frame {
	border-color: #4a534c;
}

.on-dark a {
	color: #ffffff;
}

.on-dark .muted {
	color: var(--elevare-rule);
}

/* ---------- motion: hover only ---------- */

.zoom {
	overflow: hidden;
}

.zoom img {
	transition: transform 700ms cubic-bezier(.2, .6, .2, 1);
}

.card {
	transition: transform 380ms ease;
}

.card:hover .zoom img,
.zoom:hover img {
	transform: scale(1.045);
}

.card:hover {
	transform: translateY(-4px);
}

.card .arrow {
	opacity: 0;
	transform: translateX(-6px);
	transition: transform 320ms ease, opacity 320ms ease;
}

.card:hover .arrow {
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.zoom img,
	.card,
	.card .arrow {
		transition: none;
	}
}

/* ---------- editorial block 1: full-bleed close-up band ---------- */

.material-band {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 380px;
	aspect-ratio: 1800 / 540;
	overflow: hidden;
	border-block: 1px solid var(--elevare-rule);
}

.material-band__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The close-ups run from near-black (Carrara Shadow) to near-white, and
   this text is dark ink. Measured on the darkest one, the old gradient
   left the credit line at 3.02:1. The plateau now covers the whole text
   block rather than fading through it. */
.material-band__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(227, 224, 222, 0.97) 0%,
		rgba(227, 224, 222, 0.95) 24%,
		rgba(227, 224, 222, 0.55) 42%,
		rgba(227, 224, 222, 0) 70%);
}

.material-band__body {
	position: relative;
	width: 100%;
	padding: 0 3.5rem 3rem;
}

.material-band__title {
	margin: 0 0 0.6rem;
	font-family: var(--elevare-font-display);
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	font-weight: 300;
	line-height: 1.06;
	text-transform: uppercase;
	max-width: 22ch;
}

.material-band__credit {
	margin: 0;
	font-family: var(--elevare-font-display);
	font-size: 0.68rem;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

/* ---------- "In this space": one wide render, one tall one offset ---------- */

.rooms-band {
	padding: 5rem 3.5rem;
}

.rooms-band__title {
	margin: 0 0 0.5rem;
	font-family: var(--elevare-font-display);
	font-size: clamp(1.4rem, 2.4vw, 1.75rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.rooms-band__text {
	margin: 0 0 2rem;
	max-width: 58ch;
	font-size: 0.95rem;
}

.rooms {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: flex-start;
}

.rooms__wide {
	flex: 2 1 480px;
	min-width: 0;
	aspect-ratio: 16 / 10;
}

.rooms__tall {
	flex: 1 1 240px;
	min-width: 0;
	aspect-ratio: 3 / 4;
	margin-top: 2.75rem;
}

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

/* Stacked, the offset only pushes the second image away from the first. */
@media (max-width: 782px) {
	.rooms__tall {
		margin-top: 0;
	}
}

/* ---------- editorial block 2: tall collection panel ---------- */

.panel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 1rem;
}

/* Below the breakpoint the panels wrap on their own; above it the shortcode's
   columns attribute decides, so a page can ask for a tighter or wider row. */
@media (min-width: 64rem) {
	.panel-grid {
		grid-template-columns: repeat(var(--panel-columns, 4), minmax(0, 1fr));
	}
}

.panel {
	display: block;
	text-decoration: none;
	color: inherit;
}

.panel__media {
	display: block;
	position: relative;
	aspect-ratio: 62 / 88;
	background: var(--elevare-surface-alt);
}

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

/* Keep every part of the stone visible; the caption sits below its image. */
.panel__caption {
	display: block;
	padding-top: 1rem;
	color: var(--elevare-ink);
}

.panel__name {
	display: block;
	margin: 0 0 0.35rem;
	font-family: var(--elevare-font-display);
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

.panel__count {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.panel__text {
	display: block;
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--elevare-ink-soft);
}

/* ---------- editorial block 3: image-backed call to action ---------- */

.cta-band {
	position: relative;
	padding: 6.5rem 3.5rem;
	background: var(--elevare-ink);
	color: #ffffff;
	overflow: hidden;
}

.cta-band__image,
.cta-band__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.cta-band__image {
	object-fit: cover;
}

.cta-band__scrim {
	background: linear-gradient(100deg,
		rgba(42, 49, 45, 0.96) 0%,
		rgba(42, 49, 45, 0.94) 42%,
		rgba(42, 49, 45, 0.74) 100%);
}

.cta-band__body {
	position: relative;
	max-width: 60ch;
}

.cta-band__title {
	margin: 0 0 0.9rem;
	font-family: var(--elevare-font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
	font-weight: 400;
	line-height: 1.12;
	text-transform: uppercase;
}

.cta-band__text {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #d7d3cf;
}

.cta-band__credit {
	margin: 0 0 1.9rem;
	font-family: var(--elevare-font-display);
	font-size: 0.62rem;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--elevare-rule);
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.cta-band .button--primary {
	background: #ffffff;
	color: var(--elevare-ink);
	border-color: #ffffff;
}

.cta-band .button--ghost {
	background: transparent;
	color: #ffffff;
	border: 1px solid #8d908a;
}

/* ---------- editorial block 4: staggered image trio ---------- */

.trio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	align-items: start;
}

.trio__item {
	display: block;
	color: inherit;
	text-decoration: none;
}

.trio__item:nth-child(2) {
	margin-top: 2.5rem;
}

.trio__media {
	display: block;
	aspect-ratio: 3 / 4;
	background: #1f2521;
}

.trio__item:nth-child(2) .trio__media {
	aspect-ratio: 2 / 3;
}

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

.trio__space {
	display: block;
	margin: 0.9rem 0 0.15rem;
	font-family: var(--elevare-font-display);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.trio__name {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--elevare-font-display);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.trio__code {
	letter-spacing: 0.1em;
}

@media (max-width: 782px) {
	.trio__item:nth-child(2) {
		margin-top: 0;
	}

	.material-band__body,
	.cta-band {
		padding-inline: 1.25rem;
	}

	.cta-band {
		padding-block: 3.5rem;
	}
}

/* ---------- the cut motif ---------- */

.cut-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.45;
}

/* =====================================================================
   HOME PAGE — sitemap rows 7 to 13
   Section padding matches the artboards: 3.5rem at the sides, so the
   full-bleed bands and the padded sections line up down the page.
   ===================================================================== */

.button--outline {
	color: var(--elevare-ink);
	background: transparent;
	border-color: var(--elevare-ink);
}

.on-dark .button--outline {
	color: #ffffff;
	border-color: #8d908a;
}

/* ---------- hero ---------- */

.site-main--home {
	padding-block: 0;
}

/* The home page ends in a full-bleed CTA, so it meets the footer directly. */
.home .site-footer {
	margin-top: 0;
}

.hero {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	min-height: 41rem;
}

.hero__body {
	position: relative;
	flex: 1 1 30rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4.75rem 3.5rem 4.25rem;
}

.hero__eyebrow {
	margin: 0 0 1.4rem;
	font-family: var(--elevare-font-display);
	font-size: 0.69rem;
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.hero__title {
	margin: 0 0 1.5rem;
	font-family: var(--elevare-font-display);
	font-size: clamp(2.2rem, 4.6vw, 3.125rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	max-width: 17ch;
}

.hero__text {
	margin: 0 0 2.25rem;
	font-size: 1.125rem;
	line-height: 1.6;
	max-width: 46ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.hero__media {
	position: relative;
	flex: 1 1 35rem;
	min-width: 0;
	min-height: 26rem;
}

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

/* ---------- swatch strip ---------- */

.swatch-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
	padding: 1.4rem 3.5rem;
	background: var(--elevare-surface);
	border-block: 1px solid var(--elevare-line);
}

.swatch-strip__count {
	font-family: var(--elevare-font-display);
	font-size: 0.69rem;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.swatch-strip__items {
	display: flex;
	gap: 0.625rem;
}

.swatch {
	display: block;
	flex: 0 0 auto;
	width: 4rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--elevare-rule);
	border-radius: 0;
	background: var(--elevare-surface-alt);
	overflow: hidden;
}

.swatch[aria-pressed="true"] {
	outline: 2px solid var(--elevare-ink);
	outline-offset: 3px;
}

.swatch:focus-visible {
	outline: 3px solid var(--elevare-ink);
	outline-offset: 4px;
}

.swatch-strip__selection {
	font-size: 0.8rem;
	color: var(--elevare-ink-soft);
}

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

.swatch-strip__link {
	margin-left: auto;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* ---------- intro ---------- */

.intro {
	padding: 6rem 3.5rem;
	text-align: center;
}

.intro__lede {
	margin: 0 auto 1.75rem;
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	line-height: 1.55;
	max-width: 58ch;
}

.link-caps {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- section heads ---------- */

.home-section {
	padding: 0 3.5rem 6rem;
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1.25rem;
	margin-bottom: 2.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--elevare-line);
}

.section-head--dark {
	border-bottom-color: #4a534c;
}

.section-head__title {
	margin: 0;
	font-family: var(--elevare-font-display);
	font-size: clamp(1.5rem, 2.8vw, 1.875rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.section-head__text {
	margin: 0;
	font-size: 0.95rem;
}

.section-head__link {
	margin-left: auto;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* ---------- why Elevare ---------- */

.why {
	display: flex;
	flex-wrap: wrap;
	background: var(--elevare-surface);
	border-block: 1px solid var(--elevare-line);
}

.why__media {
	position: relative;
	flex: 1 1 26rem;
	min-width: 0;
	min-height: 27.5rem;
}

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

.why__body {
	flex: 1 1 35rem;
	min-width: 0;
	padding: 5rem 3.5rem;
}

.reasons {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.reason {
	display: flex;
	gap: 1.5rem;
	padding: 1.4rem 0;
	border-top: 1px solid var(--elevare-line);
}

.reason__num {
	flex: 0 0 auto;
	padding-top: 0.25rem;
	font-family: var(--elevare-font-display);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.1em;
	color: var(--elevare-accent-warm);
}

.reason__body {
	display: block;
}

.reason__title {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 1rem;
	font-weight: 600;
}

.reason__text {
	display: block;
	font-size: 0.94rem;
	line-height: 1.6;
}

/* ---------- in use ---------- */

.in-use {
	padding: 5.5rem 3.5rem 6rem;
}

/* ---------- a full-width breather between the text sections ---------- */

.breather {
	aspect-ratio: 1600 / 620;
	max-height: 35rem;
	overflow: hidden;
	border-block: 1px solid var(--elevare-rule);
}

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

/* ---------- who we supply ---------- */

.audiences {
	padding: 5.5rem 3.5rem;
}

.audiences__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--elevare-line);
}

.audiences__item {
	padding: 1.625rem 1.25rem;
	font-family: var(--elevare-font-display);
	font-size: 0.94rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-right: 1px solid var(--elevare-line);
}

/* The first cell lines up with the heading above it, and the last rule
   would otherwise dangle at the edge of the row. */
.audiences__item:first-child {
	padding-left: 0;
}

.audiences__item:last-child {
	border-right: 0;
}

/* ---------- certifications ---------- */

.certifications {
	padding: 0 3.5rem 5.5rem;
}

.certifications__title {
	margin: 0 0 1.4rem;
	font-family: var(--elevare-font-display);
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.certifications__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr));
	gap: 1rem;
}

.certifications__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5.75rem;
	background: var(--elevare-surface);
	border: 1px solid var(--elevare-line);
}

.certifications__placeholder {
	font-size: 0.69rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.certifications__note {
	margin: 0.875rem 0 0;
	font-size: 0.82rem;
	color: var(--elevare-ink-soft);
}

/* The credit line carries an optional link beside it. */
.material-band__credit {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem 1.125rem;
}

@media (max-width: 782px) {
	.hero__body,
	.why__body,
	.in-use,
	.audiences,
	.intro {
		padding-inline: 1.25rem;
	}

	.home-section,
	.certifications {
		padding-inline: 1.25rem;
	}

	.swatch-strip,
	.rooms-band,
	.cta-band,
	.material-band__body {
		padding-inline: 1.25rem;
	}

	.swatch-strip {
		gap: 1rem;
	}

	.swatch-strip__items {
		gap: 0.5rem;
	}

	.audiences__item {
		border-right: 0;
		border-bottom: 1px solid var(--elevare-line);
	}
}

/* =====================================================================
   ABOUT PAGE — sitemap row 19
   Numbered sections in a two-column rhythm: the label holds the left
   track, the prose the right, so the page reads as a document.
   ===================================================================== */

.about-hero {
	padding: 5rem 3.5rem 3.5rem;
	border-bottom: 1px solid var(--elevare-line);
}

.about-hero__title {
	margin: 0 0 1rem;
	font-family: var(--elevare-font-display);
	font-size: clamp(2rem, 4.2vw, 2.875rem);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	max-width: 24ch;
}

.about-hero__text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	max-width: 56ch;
	color: var(--elevare-ink-soft);
}

.about-section {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	gap: 1.5rem 3.5rem;
	padding: 3.5rem 3.5rem;
	border-bottom: 1px solid var(--elevare-line);
}

.about-section__label {
	margin: 0;
	font-family: var(--elevare-font-display);
	font-size: 0.69rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
	white-space: pre;
}

.about-section__body {
	max-width: 68ch;
}

.about-section__body > p {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.about-section__body > p:last-child {
	margin-bottom: 0;
}

/* Specificity rather than !important, which this file keeps for the
   screen-reader utility alone. */
.about-section__body > p.note {
	margin-top: 1.75rem;
	padding-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--elevare-ink-soft);
	border-top: 1px dashed var(--elevare-rule);
}

.about-address {
	margin: 1.25rem 0;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.85;
}

/* ---------- the image pair that breaks the text run ---------- */

.image-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
	gap: 1.25rem;
	padding: 3.5rem;
}

.image-pair__item {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.image-pair__item:nth-child(2) {
	aspect-ratio: 3 / 4;
	margin-top: 2.5rem;
}

.image-pair__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- the six brandbook keywords ---------- */

.keywords {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--elevare-line);
}

.keywords__item {
	padding: 1.25rem 1rem 1.25rem 0;
	font-family: var(--elevare-font-display);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--elevare-line);
}

/* ---------- safer for everyone ---------- */

.safer {
	position: relative;
	padding: 5.5rem 3.5rem;
	overflow: hidden;
}

.safer__image,
.safer__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.safer__image {
	object-fit: cover;
	display: block;
}

.safer__scrim {
	background: linear-gradient(100deg,
		rgba(42, 49, 45, 0.96) 0%,
		rgba(42, 49, 45, 0.92) 46%,
		rgba(42, 49, 45, 0.72) 100%);
}

.safer__body {
	position: relative;
	max-width: 62ch;
}

.safer__text {
	margin: 1.25rem 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: #d7d3cf;
}

.safer__fact {
	margin: 0;
	font-family: var(--elevare-font-display);
	font-size: 0.72rem;
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

@media (max-width: 782px) {
	.about-hero,
	.about-section,
	.safer,
	.image-pair {
		padding-inline: 1.25rem;
	}

	.about-section {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.image-pair__item:nth-child(2) {
		margin-top: 0;
	}
}

/* =====================================================================
   CONTACT, THANK YOU AND THE LEGAL DOCUMENTS
   Rows 3, 4, 20, 21 and 22. These sit inside .container rather than
   running full bleed: they are documents and forms, not display pages.
   ===================================================================== */

.contact-header,
.legal-header {
	max-width: 62ch;
	margin-bottom: 2.5rem;
}

.contact-header__title,
.legal-header__title {
	margin: 0 0 0.75rem;
	font-family: var(--elevare-font-display);
	font-size: clamp(1.9rem, 3.6vw, 2.5rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.contact-header__text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--elevare-ink-soft);
}

.legal-header__meta {
	margin: 0;
	font-size: 0.875rem;
	color: var(--elevare-ink-soft);
}

/* ---------- contact: form beside the details ---------- */

.contact {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: start;
	margin-bottom: 5rem;
}

.contact__form {
	min-width: 0;
	padding: 2.5rem;
	background: var(--elevare-surface);
	border: 1px solid var(--elevare-line);
}

.request-form__legend {
	width: 100%;
	margin-bottom: 0.875rem;
	font-family: var(--elevare-font-display);
	font-size: 0.69rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.request-form__types,
.request-form__fields {
	margin: 0;
	padding: 0;
	border: 0;
}

.request-form__types {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: 2rem;
}

.request-type {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.125rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: var(--elevare-surface);
	border: 1px solid var(--elevare-line);
	border-radius: var(--elevare-radius);
	cursor: pointer;
}

.request-type.is-selected {
	background: var(--elevare-page);
	border-color: var(--elevare-ink);
}

/* The radio itself is redundant once the label reads as a chip, but it stays
   in the markup and in the tab order for anyone not seeing the chip. */
.request-type input {
	margin: 0;
}

.request-form__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.25rem;
}

.request-field {
	margin: 0;
	min-width: 0;
}

.request-field--wide {
	grid-column: 1 / -1;
}

.request-field label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.request-field__req {
	color: var(--elevare-accent-warm);
}

.request-form__actions {
	grid-column: 1 / -1;
	margin: 0.5rem 0 0;
}

/* Disabled while this is a preview: it must not read as a working control. */
.request-form__fields[disabled] .button,
.request-form__types[disabled] .request-type {
	opacity: 0.55;
	cursor: default;
}

.request-form__note {
	margin: 1.75rem 0 0;
	padding-top: 1.125rem;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--elevare-ink-soft);
	border-top: 1px dashed var(--elevare-rule);
}

/* ---------- contact: the details column ---------- */

.contact__details {
	min-width: 0;
}

.contact__name {
	margin: 0 0 1.125rem;
	font-family: var(--elevare-font-display);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.contact__address {
	margin: 0 0 1.75rem;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.85;
}

.contact__map {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: var(--elevare-surface-alt);
	border: 1px solid var(--elevare-line);
}

.contact__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.contact__map-placeholder {
	margin: 0;
	font-size: 0.82rem;
	text-align: center;
	color: var(--elevare-ink-soft);
}

.contact__browse {
	margin: 1.75rem 0 0;
}

/* ---------- legal documents ---------- */

.legal {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: start;
	margin-bottom: 5rem;
}

.legal__toc {
	position: sticky;
	top: 1.5rem;
	min-width: 0;
}

.legal__toc-title {
	margin: 0 0 0.875rem;
	font-family: var(--elevare-font-display);
	font-size: 0.69rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.legal__toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal__toc-item a {
	display: block;
	padding: 0.625rem 0;
	font-size: 0.875rem;
	text-decoration: none;
	border-top: 1px solid var(--elevare-line);
}

.legal__doc {
	min-width: 0;
	max-width: 68ch;
	padding: 3rem;
	background: var(--elevare-surface);
	border: 1px solid var(--elevare-line);
}

.legal__notice {
	margin-bottom: 2.25rem;
	padding: 1.125rem 1.25rem;
	border: 1px dashed var(--elevare-rule);
}

.legal__notice-label {
	margin: 0 0 0.5rem;
	font-size: 0.69rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #74450d;
}

.legal__notice-text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
}

.legal__content h2 {
	margin: 2rem 0 0.625rem;
	font-family: var(--elevare-font-display);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	scroll-margin-top: 1.5rem;
}

.legal__content h2:first-child {
	margin-top: 0;
}

.legal__content p {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.75;
}

.legal__contact {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--elevare-line);
}

.legal__contact h2 {
	margin: 0 0 0.625rem;
	font-family: var(--elevare-font-display);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.legal__contact address {
	margin: 0;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.8;
}

/* ---------- thank you ---------- */

.thanks {
	max-width: 56ch;
	padding: 4.5rem 0 6rem;
}

.thanks__eyebrow {
	margin: 0 0 1rem;
	font-family: var(--elevare-font-display);
	font-size: 0.69rem;
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.thanks__title {
	margin: 0 0 1rem;
	font-family: var(--elevare-font-display);
	font-size: clamp(1.75rem, 3.4vw, 2.375rem);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.thanks__text {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.thanks__note {
	margin: 0 0 2rem;
	font-size: 0.82rem;
	color: var(--elevare-ink-soft);
}

.thanks__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

@media (max-width: 960px) {
	.contact,
	.legal {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.legal__toc {
		position: static;
	}
}

@media (max-width: 782px) {
	.contact__form,
	.legal__doc {
		padding: 1.5rem;
	}
}

/* =====================================================================
   FOOTER — sitemap row 2, brought into line with the design
   Brand column plus Browse / Legal / Follow, on white.
   ===================================================================== */

.site-footer {
	background: var(--elevare-surface);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: 3rem;
	padding-bottom: 2.75rem;
}

/* Stacked inside its own column now, not a row of its own. */
.site-footer__brand {
	display: block;
	min-width: 0;
	padding-bottom: 0;
}

.site-footer__signature {
	margin-bottom: 1rem;
}

.site-footer__address {
	flex: none;
}

.site-footer__column {
	min-width: 0;
}

.site-footer__heading {
	margin: 0 0 0.875rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 2.1;
}

.site-footer__list a {
	color: inherit;
}

.site-footer__social {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 0.625rem;
}

.social-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--elevare-ink-soft);
	border: 1px solid var(--elevare-line);
	border-radius: var(--elevare-radius);
}

.site-footer__sample {
	margin: 0;
	font-size: 0.75rem;
	color: var(--elevare-ink-soft);
}

@media (max-width: 960px) {
	.site-footer__grid {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
		gap: 2rem;
	}
}

/* =====================================================================
   GUTTERS — align the container with the full-bleed bands
   The artboards are 1440 wide with 56px side padding and no centred
   max-width. A 1240px container left the header and the documents 60px
   inside the bands below them, which reads as a misalignment. These
   match at the design width and up to the cap; past the cap the bands
   keep going and the container centres, which is the intended behaviour
   on displays the design never covered.
   ===================================================================== */

.container {
	max-width: 1536px;
	padding-inline: 3.5rem;
}

@media (max-width: 782px) {
	.container {
		padding-inline: 1.25rem;
	}
}

/* ---------- header ---------- */

/* The design runs logo, then nav, then the button pushed to the right.
   space-between would spread four children evenly instead — but only above
   the breakpoint: below it the nav collapses and the toggle takes the right
   edge, which space-between already does. */
@media (min-width: 783px) {
	.site-header__inner {
		justify-content: flex-start;
	}

	.site-header__inner .main-navigation {
		margin-left: 1.75rem;
	}

	.site-header__cta {
		margin-left: auto;
	}
}

@media (max-width: 782px) {
	/* Logo left, toggle right, button on its own row underneath. */
	.nav-toggle {
		margin-left: auto;
	}

	.site-header__cta {
		order: 3;
		width: 100%;
		margin-left: 0;
		text-align: center;
	}
}

/* =====================================================================
   PRODUCT RESOURCES, SLAB DISCLAIMER, COLLECTION BANNER
   The remaining pieces of CollectionsDesign and ProductDesign.
   ===================================================================== */

.product__resources {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--elevare-line);
}

.product__resources-title {
	margin: 0 0 0.75rem;
	font-family: var(--elevare-font-display);
	font-size: 0.69rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

.product__downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product__downloads a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	background: var(--elevare-surface);
	border: 1px solid var(--elevare-line);
	border-radius: var(--elevare-radius);
}

.product__downloads a:hover {
	border-color: var(--elevare-ink);
}

.product__download-meta {
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--elevare-ink-soft);
}

.product__resources-note {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	color: var(--elevare-ink-soft);
}

/* The slab-variation notice. Every competitor carries one; it is the line a
   fabricator is told to read before ordering. */
.product__disclaimer {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	font-size: 0.82rem;
	line-height: 1.65;
	color: var(--elevare-ink-soft);
	border-top: 1px solid var(--elevare-line);
}

/* ---------- banner on a collection's own page ---------- */

.collection-banner {
	position: relative;
	aspect-ratio: 1800 / 520;
	min-height: 15rem;
	max-height: 26rem;
	overflow: hidden;
	border-bottom: 1px solid var(--elevare-rule);
}

.collection-banner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Fades into the page so the heading below it does not sit on a hard edge. */
.collection-banner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(227, 224, 222, 0.85) 0%,
		rgba(227, 224, 222, 0.25) 42%,
		rgba(227, 224, 222, 0) 72%);
}

/* The "All surfaces" heading the page content supplies above the grid.
   Excludes the legal documents: their own h2 rule has the same specificity
   and sits earlier in the file, so this would otherwise win and give every
   clause heading a border and 3rem of space. */
.entry__content:not(.legal__content) > h2 {
	margin: 3rem 0 1.5rem;
	padding-bottom: 1.125rem;
	font-family: var(--elevare-font-display);
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--elevare-line);
}

/* =====================================================================
   PRODUCT GALLERY — slab, close-up, in situ
   Switching is a :checked sibling selector, so it works with JavaScript
   off. Four slides is the most the library produces, so the pairs are
   written out rather than generated.
   ===================================================================== */

.gallery {
	min-width: 0;
}

/* Off-screen rather than display:none, so the radios stay focusable and the
   arrow keys still move through the group. */
.gallery__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
}

.gallery__main {
	position: relative;
	background: var(--elevare-surface-alt);
}

.gallery__slide {
	display: none;
	margin: 0;
}

.gallery__slide img {
	width: 100%;
	height: auto;
	display: block;
}

.gallery__pill {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.375rem 0.8rem;
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--elevare-surface);
	border: 1px solid var(--elevare-rule);
	border-radius: 999px;
}

.gallery__radio:nth-of-type(1):checked ~ .gallery__main .gallery__slide:nth-of-type(1),
.gallery__radio:nth-of-type(2):checked ~ .gallery__main .gallery__slide:nth-of-type(2),
.gallery__radio:nth-of-type(3):checked ~ .gallery__main .gallery__slide:nth-of-type(3),
.gallery__radio:nth-of-type(4):checked ~ .gallery__main .gallery__slide:nth-of-type(4) {
	display: block;
}

.gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.875rem, 1fr));
	gap: 0.625rem;
	margin-top: 0.625rem;
}

.gallery__thumb {
	display: block;
	min-height: 44px;
	cursor: pointer;
	border: 1px solid var(--elevare-line);
}

.gallery__thumb-image {
	display: block;
	line-height: 0;
}

.gallery__thumb-image img {
	width: 100%;
	height: auto;
	display: block;
}

.gallery__thumb-caption {
	display: block;
	padding: 0.4375rem 0.25rem;
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--elevare-ink-soft);
}

.gallery__radio:nth-of-type(1):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(1),
.gallery__radio:nth-of-type(2):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(2),
.gallery__radio:nth-of-type(3):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(3),
.gallery__radio:nth-of-type(4):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(4) {
	border-color: var(--elevare-ink);
}

/* The focus ring belongs on the thumb, since the radio itself is off-screen. */
.gallery__radio:nth-of-type(1):focus-visible ~ .gallery__thumbs .gallery__thumb:nth-of-type(1),
.gallery__radio:nth-of-type(2):focus-visible ~ .gallery__thumbs .gallery__thumb:nth-of-type(2),
.gallery__radio:nth-of-type(3):focus-visible ~ .gallery__thumbs .gallery__thumb:nth-of-type(3),
.gallery__radio:nth-of-type(4):focus-visible ~ .gallery__thumbs .gallery__thumb:nth-of-type(4) {
	outline: 2px solid var(--elevare-ink);
	outline-offset: 2px;
}

.page-header__count {
	margin: 0.75rem 0 0;
	font-family: var(--elevare-font-display);
	font-size: 0.72rem;
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--elevare-ink-soft);
}

/* =====================================================================
   FIX: aspect-ratio bands were deriving their WIDTH from min-height
   At 375px the vein band came out 1267px wide (380px × 1800/540) and
   body text was clipped rather than wrapped, which overflow-x: clip
   then hid. An explicit width keeps the inline size definite, and below
   the breakpoint the ratio is dropped so min-height alone sets height —
   1800/540 is only 112px tall at phone width.
   ===================================================================== */

.material-band,
.collection-banner,
.breather,
.cta-band,
.rooms-band,
.safer {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 782px) {
	.material-band,
	.collection-banner,
	.breather {
		aspect-ratio: auto;
		min-height: 15rem;
	}

	.material-band__title {
		font-size: clamp(1.6rem, 7vw, 2.2rem);
	}

	.material-band__credit {
		flex-direction: column;
		gap: 0.35rem;
	}
}

/* =====================================================================
   THE REQUEST FORM, AS FLUENT FORMS RENDERS IT
   The plugin brings its own markup, so the designed field set is
   reproduced by styling its classes rather than by rebuilding it. Scoped
   to .contact__form, the column this theme puts the form in, rather than
   to a class from the plugin's layout settings: Fluent Forms does not put
   that one on the form element. Other forms keep the plugin's own look.
   ===================================================================== */

.contact__form .ff-el-group {
	margin-bottom: 1.25rem;
}

.contact__form .ff-el-input--label label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--elevare-ink);
}

.contact__form .ff-el-is-required.asterisk-right label::after {
	content: " *";
	color: var(--elevare-accent-warm);
}

.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font: inherit;
	color: inherit;
	background: var(--elevare-surface);
	border: 1px solid var(--elevare-line);
	border-radius: var(--elevare-radius);
}

.contact__form input:focus-visible,
.contact__form textarea:focus-visible {
	outline: 2px solid var(--elevare-ink);
	outline-offset: 1px;
}

/* Fluent Forms uses this wrapper for both text fields and request options. */
.contact__form .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

/* Everything except the chooser is a single full-width control. */
.contact__form .ff-el-input--content > input,
.contact__form .ff-el-input--content > textarea {
	flex: 1 1 100%;
}

/* Equal columns keep the request options aligned instead of wrapping 3 + 1. */
.contact__form .ff-el-input--content:has(input[name="request_type"]) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.contact__form .ff-el-form-check-inline {
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	background: var(--elevare-surface);
	border: 1px solid var(--elevare-line);
	border-radius: var(--elevare-radius);
	cursor: pointer;
}

/* Beat the plugin's per-option margins; the grid owns all spacing. */
.contact__form .ff-el-group .ff-el-input--content > .ff-el-form-check-inline {
	margin: 0;
}

/* Read the radio itself so prefilled and keyboard selections look the same. */
.contact__form .ff-el-form-check-inline:has(input:checked) {
	background: var(--elevare-surface-alt);
	border-color: var(--elevare-ink);
}

.contact__form .ff-el-form-check-inline:focus-within {
	border-color: var(--elevare-ink);
	outline: 2px solid var(--elevare-ink);
	outline-offset: 1px;
}

.contact__form .ff-btn-submit {
	padding: 0.85rem 1.75rem;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--elevare-accent-ink);
	background: var(--elevare-accent);
	border: 1px solid var(--elevare-accent);
	border-radius: var(--elevare-radius);
	cursor: pointer;
}

.contact__form .ff-el-group .ff-el-form-check-inline label.ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0.625rem 0.75rem;
	font-weight: inherit;
	cursor: pointer;
}

.contact__form input[name="request_type"] {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin: 0;
	top: 0;
	accent-color: var(--elevare-ink);
}

@media (max-width: 480px) {
	.contact__form .ff-el-input--content:has(input[name="request_type"]) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.contact__form .error,
.contact__form .ff-el-is-error input,
.contact__form .ff-el-is-error textarea {
	border-color: #8c2f1f;
}

.contact__form .text-danger,
.contact__form .error-text {
	margin-top: 0.3rem;
	font-size: 0.8rem;
	color: #8c2f1f;
}

/* =====================================================================
   COOKIE NOTICE — sitemap row 6
   ===================================================================== */

.cookie-notice {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	padding: 1.25rem 1.5rem;
	background: var(--elevare-ink);
	color: #ffffff;
	border-top: 1px solid #4a534c;
}

.cookie-notice[hidden] {
	display: none;
}

.cookie-notice__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	max-width: 1536px;
	margin-inline: auto;
}

.cookie-notice__text {
	flex: 1 1 24rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #d7d3cf;
}

.cookie-notice__text a {
	color: #ffffff;
}

.cookie-notice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0;
}

.cookie-notice .button--outline {
	color: #ffffff;
	border-color: #8d908a;
}

.cookie-notice .button--primary {
	color: var(--elevare-ink);
	background: #ffffff;
	border-color: #ffffff;
}

@media (max-width: 782px) {
	.cookie-notice__actions {
		width: 100%;
	}

	.cookie-notice__actions .button {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* =====================================================================
   INTERACTION
   Every control answered the pointer with nothing before this: only the
   nav and the image cards had a hover state. Decision #18 asks for
   gentle motion on hover, so each is a colour or border change over
   ~180ms, with the image zoom left as the one larger movement.

   #6b5544 is the link hover: measured 5.31:1 on the warm ground, 6.98:1
   on white and 5.78:1 on the alt surface, so it holds on every surface
   the theme uses. Terra #846a54 does not — 3.83:1 on the ground.
   ===================================================================== */

a {
	transition: color 180ms ease, text-decoration-color 180ms ease;
}

a:hover {
	color: #6b5544;
}

/* Cards keep their text colour while the image and arrow respond to hover.
   Only reset the anchor, so captions keep their own surface colours. */
a.card:hover,
.card a:hover {
	color: inherit;
}

.on-dark a:not(.card):not(.button):hover,
.cta-band a:not(.card):not(.button):hover,
.safer a:not(.card):not(.button):hover {
	color: #ffffff;
	text-decoration: underline;
}

/* Links that read as labels rather than prose underline on hover, so the
   pointer gets an answer that a colour shift alone does not give. */
.link-caps,
.section-head__link,
.swatch-strip__link,
.breadcrumb a,
.site-footer__list a,
.legal__toc-item a,
.product__collection a {
	text-decoration: none;
}

.link-caps:hover,
.section-head__link:hover,
.swatch-strip__link:hover,
.breadcrumb a:hover,
.site-footer__list a:hover,
.legal__toc-item a:hover,
.product__collection a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- buttons ---------- */

.button,
button,
input[type="submit"],
.contact__form .ff-btn-submit {
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button:hover,
.contact__form .ff-btn-submit:hover {
	border-color: var(--elevare-ink);
}

.button--primary:hover,
.contact__form .ff-btn-submit:hover {
	background: #3b443e;
	border-color: #3b443e;
	color: var(--elevare-accent-ink);
}

.button--outline:hover {
	background: var(--elevare-ink);
	color: var(--elevare-accent-ink);
}

.on-dark .button--outline:hover,
.cookie-notice .button--outline:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #ffffff;
	color: #ffffff;
}

.cta-band .button--primary:hover {
	background: var(--elevare-page);
	border-color: var(--elevare-page);
	color: var(--elevare-ink);
}

.cta-band .button--ghost:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #ffffff;
}

/* ---------- image-led controls ---------- */

.swatch,
.gallery__thumb,
.contact__form .ff-el-form-check-inline,
.product__downloads a {
	transition: border-color 180ms ease, background-color 180ms ease;
}

.swatch:hover,
.gallery__thumb:hover,
.contact__form .ff-el-form-check-inline:hover {
	border-color: var(--elevare-ink);
}

/* The caption lifts with the card rather than sitting still under a
   moving image. */
.panel__caption,
.trio__space,
.trio__name {
	transition: transform 380ms ease;
}

.card:hover .panel__caption {
	transform: translateY(-2px);
}

/* The arrow was reserving its space while invisible, which left a gap in
   the middle of the caption. It now expands from nothing. */
.card .arrow {
	display: inline-block;
	max-width: 0;
	overflow: hidden;
	transition: transform 320ms ease, opacity 320ms ease, max-width 320ms ease;
}

.card:hover .arrow {
	max-width: 2em;
}

/* A touch screen never hovers, so the arrow would simply never appear.
   Show it outright there instead. */
@media (hover: none) {
	.card .arrow {
		max-width: 2em;
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	a,
	.button,
	button,
	input[type="submit"],
	.swatch,
	.gallery__thumb,
	.panel__caption,
	.trio__space,
	.trio__name,
	.contact__form .ff-btn-submit,
	.contact__form .ff-el-form-check-inline,
	.product__downloads a {
		transition: none;
	}
}