/*
 * Homepage layout. Loaded only on the front page.
 *
 * Every section is an Elementor container carrying a descriptive class
 * (.site-hero, .section-intro, .collection-grid, .marble-section ...). Layout,
 * type and colour come from these classes and from tokens.css, so the owner
 * edits text, images and links in Elementor without touching code.
 *
 * Order of the page:  1 hero · 2 intro · 3 collections · 4 signature dining
 * tables · 5 marble · 6 travertine · 7 bespoke · 8 craftsmanship · 9 interiors
 * · 10 trade · 11 delivery · 12 trust strip · 13 journal · 14 final call.
 */

/* ======================================================================
   0. Reset Elementor's default container spacing on this page
   ====================================================================== */
body:is(.stone-home, .stone-landing) .e-con {
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--margin-top: 0px;
	--margin-bottom: 0px;
}
body:is(.stone-home, .stone-landing) .e-con .elementor-widget:not(:last-child) { margin-block-end: 0; }
body:is(.stone-home, .stone-landing) .e-con > .elementor-widget { width: auto; min-width: 0; }
body:is(.stone-home, .stone-landing) .elementor-widget-container { margin: 0; padding: 0; }

body:is(.stone-home, .stone-landing) .elementor-heading-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-transform: none;
}
/* Editorial labels: small, spaced, uppercase */
body:is(.stone-home, .stone-landing) .stone-eyebrow .elementor-heading-title,
body:is(.stone-home, .stone-landing) .trust-strip__item .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	line-height: 1.5;
}
body:is(.stone-home, .stone-landing) .elementor-widget-text-editor {
	font-family: var(--font-sans);
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
body:is(.stone-home, .stone-landing) .elementor-widget-text-editor p { margin: 0 0 1em; }
body:is(.stone-home, .stone-landing) .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Shared section frame: fluid vertical rhythm, content centred at 1400px */
body:is(.stone-home, .stone-landing) .site-section {
	position: relative;
	padding-block: var(--section-y);
	padding-inline: max(var(--gutter), calc((100% - var(--container-max)) / 2));
}
body:is(.stone-home, .stone-landing) .site-section--surface { background: var(--color-surface); }
body:is(.stone-home, .stone-landing) .site-section--stone { background: var(--color-stone); }
body:is(.stone-home, .stone-landing) .on-dark {
	background: var(--color-charcoal);
	color: var(--color-on-dark);
}

/* Section headings, same everywhere */
body:is(.stone-home, .stone-landing) .section-title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.015em;
	max-width: 17ch;
	text-wrap: balance;
}
body:is(.stone-home, .stone-landing) .on-dark .section-title { color: var(--color-on-dark); }
body:is(.stone-home, .stone-landing) .stone-eyebrow { padding-bottom: var(--space-3); }
body:is(.stone-home, .stone-landing) .section-text {
	margin-top: var(--space-4);
	max-width: var(--content-max);
	font-size: var(--fs-body-lg);
	line-height: 1.62;
	color: var(--color-text-muted);
}
body:is(.stone-home, .stone-landing) .on-dark .section-text { color: var(--color-on-dark-muted); }
body:is(.stone-home, .stone-landing) .section-actions,
body:is(.stone-home, .stone-landing) .site-hero__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 16px 20px;
	margin-top: var(--space-6);
}
/* Quiet secondary links under a main call to action */
body:is(.stone-home, .stone-landing) .section-links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
	margin-top: var(--space-4);
	font-size: 12px;
}

/* Section header with an action on the right (Signature, Interiors, Journal) */
body:is(.stone-home, .stone-landing) .section-header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4) var(--space-6);
	margin-bottom: var(--space-8);
}
body:is(.stone-home, .stone-landing) .section-header > .elementor-widget-button { flex: none; }
body:is(.stone-home, .stone-landing) .section-header > .e-con { width: auto; flex: 1 1 360px; }
body:is(.stone-home, .stone-landing) .section-header .section-text { margin-top: var(--space-3); }
body:is(.stone-home, .stone-landing) .section-header__copy,
body:is(.stone-home, .stone-landing) .craft-step__body,
body:is(.stone-home, .stone-landing) .final-cta__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* ======================================================================
   1. Hero
   ====================================================================== */
body:is(.stone-home, .stone-landing) .site-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	min-height: clamp(560px, 86vh, 780px);
	min-height: clamp(560px, 86svh, 780px);
	color: var(--color-on-dark);
	background: var(--color-charcoal);
	overflow: hidden;
	isolation: isolate;
}
body:is(.stone-home, .stone-landing) .site-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}
body:is(.stone-home, .stone-landing) .site-hero__media .elementor-widget-container,
body:is(.stone-home, .stone-landing) .site-hero__media a,
body:is(.stone-home, .stone-landing) .site-hero__media picture { display: block; width: 100%; height: 100%; }
body:is(.stone-home, .stone-landing) .site-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 62% 56%;
}
/* Readability: veil at the top (the transparent header sits there), left (copy) and bottom.
   Strengths were chosen by measuring the rendered text against the photograph
   (tools/overlay-contrast.mjs): every text element reaches WCAG AA in its worst areas. */
body:is(.stone-home, .stone-landing) .site-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, rgba(25, 24, 23, 0.66) 0, rgba(25, 24, 23, 0.5) 70px, rgba(25, 24, 23, 0.2) 150px, rgba(25, 24, 23, 0) 230px),
		linear-gradient(to right, rgba(25, 24, 23, 0.66) 0%, rgba(25, 24, 23, 0.5) 34%, rgba(25, 24, 23, 0.24) 54%, rgba(25, 24, 23, 0) 74%),
		linear-gradient(to top, rgba(25, 24, 23, 0.55) 0%, rgba(25, 24, 23, 0.16) 40%, rgba(25, 24, 23, 0) 68%);
	pointer-events: none;
}
body:is(.stone-home, .stone-landing) .site-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 140px;
	padding-bottom: clamp(48px, 9vh, 112px);
	padding-inline: max(var(--gutter), calc((100% - var(--container-max)) / 2));
}
body:is(.stone-home, .stone-landing) .site-hero .stone-eyebrow { padding-bottom: var(--space-3); color: var(--color-on-dark); }
body:is(.stone-home, .stone-landing) .site-hero__title {
	max-width: 10.5ch;
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: 300;
	line-height: var(--lh-display);
	letter-spacing: -0.02em;
	color: var(--color-on-dark);
}
body:is(.stone-home, .stone-landing) .site-hero__text {
	max-width: 520px;
	margin-top: var(--space-4);
	font-size: var(--fs-body-lg);
	line-height: 1.55;
	color: rgba(251, 250, 247, 0.9);
}

@media (min-width: 900px) and (max-width: 1099.98px) {
	body:is(.stone-home, .stone-landing) .site-hero::after {
		background:
			linear-gradient(to bottom, rgba(25, 24, 23, 0.66) 0, rgba(25, 24, 23, 0.5) 70px, rgba(25, 24, 23, 0.2) 150px, rgba(25, 24, 23, 0) 230px),
			linear-gradient(to top, rgba(25, 24, 23, 0.88) 0%, rgba(25, 24, 23, 0.78) 30%, rgba(25, 24, 23, 0.67) 50%, rgba(25, 24, 23, 0.44) 66%, rgba(25, 24, 23, 0.12) 80%, rgba(25, 24, 23, 0) 90%);
	}
}
@media (max-width: 767.98px) {
	body:is(.stone-home, .stone-landing) .site-hero { min-height: max(620px, 92svh); }
	body:is(.stone-home, .stone-landing) .site-hero__content { padding-top: 110px; padding-bottom: 40px; }
	body:is(.stone-home, .stone-landing) .site-hero__title { max-width: none; }
	body:is(.stone-home, .stone-landing) .site-hero__text { font-size: 17px; }
	body:is(.stone-home, .stone-landing) .site-hero__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
	body:is(.stone-home, .stone-landing) .site-hero__actions .elementor-widget-button,
	body:is(.stone-home, .stone-landing) .site-hero__actions .elementor-button { width: 100%; }
}

/* ======================================================================
   2. Intro / brand statement
   ====================================================================== */
body:is(.stone-home, .stone-landing) .section-intro {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--space-3);
	row-gap: var(--space-4);
	padding-block: var(--section-y);
}
body:is(.stone-home, .stone-landing) .section-intro .stone-eyebrow { grid-column: 1 / 4; margin: 0.9em 0 0; padding-bottom: 0; color: var(--color-text-muted); }
body:is(.stone-home, .stone-landing) .section-intro__title {
	grid-column: 4 / 12;
	font-family: var(--font-display);
	font-size: clamp(30px, 1rem + 2.2vw, 54px);
	font-weight: 300;
	line-height: 1.03;
	letter-spacing: -0.018em;
	max-width: 17ch;
}
body:is(.stone-home, .stone-landing) .section-intro__text {
	grid-column: 4 / 9;
	margin-top: var(--space-4);
	font-size: var(--fs-body-lg);
	line-height: 1.65;
	color: var(--color-text-muted);
}
body:is(.stone-home, .stone-landing) .section-intro__link { grid-column: 4 / 9; justify-self: start; }
@media (max-width: 899.98px) {
	body:is(.stone-home, .stone-landing) .section-intro { display: block; }
	body:is(.stone-home, .stone-landing) .section-intro .stone-eyebrow { margin: 0; padding-bottom: var(--space-3); }
	body:is(.stone-home, .stone-landing) .section-intro__text { margin-top: var(--space-4); }
	body:is(.stone-home, .stone-landing) .section-intro__link { margin-top: var(--space-4); }
}

/* ======================================================================
   3. Collections: one large image and two stacked
   ====================================================================== */
body:is(.stone-home, .stone-landing) .section-collections { padding-top: 0; }
body:is(.stone-home, .stone-landing) .collection-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	grid-auto-rows: clamp(260px, 29vw, 440px);
	gap: var(--space-3);
}
body:is(.stone-home, .stone-landing) .collection-card {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--color-stone);
	color: var(--color-on-dark);
	isolation: isolate;
}
body:is(.stone-home, .stone-landing) .collection-card--dining { grid-row: span 2; }
body:is(.stone-home, .stone-landing) .collection-card__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}
body:is(.stone-home, .stone-landing) .collection-card__media .elementor-widget-container { height: 100%; }
body:is(.stone-home, .stone-landing) .collection-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 1.4s var(--ease);
}
body:is(.stone-home, .stone-landing) .collection-card:hover .collection-card__media img { transform: scale(1.035); }
body:is(.stone-home, .stone-landing) .collection-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(25, 24, 23, 0.84) 0%, rgba(25, 24, 23, 0.72) 28%, rgba(25, 24, 23, 0.5) 48%, rgba(25, 24, 23, 0.14) 64%, rgba(25, 24, 23, 0) 74%);
	pointer-events: none;
}
body:is(.stone-home, .stone-landing) .collection-card__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(20px, 2.4vw, 36px);
}
body:is(.stone-home, .stone-landing) .collection-card .stone-eyebrow { padding-bottom: 8px; opacity: 0.9; }
body:is(.stone-home, .stone-landing) .collection-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.01em;
	padding-bottom: var(--space-2);
}
/* The whole card is one link: stretch the CTA's hit area */
body:is(.stone-home, .stone-landing) .collection-card .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}
body:is(.stone-home, .stone-landing) .collection-card .elementor-widget-button { position: static; }
body:is(.stone-home, .stone-landing) .collection-card .elementor-button { position: static; }

/* Tablets and phones: photograph first, caption beneath in dark type on ivory. A caption
   laid over a bright photograph cannot be guaranteed legible on a card this small
   (it fills most of the card), so it never sits on the picture below 1100px. */
@media (max-width: 1099.98px) {
	body:is(.stone-home, .stone-landing) .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--space-3); }
	body:is(.stone-home, .stone-landing) .collection-card,
	body:is(.stone-home, .stone-landing) .collection-card--dining {
		grid-row: auto;
		display: flex;
		flex-direction: column;
		overflow: visible;
		background: transparent;
		color: var(--color-text);
		isolation: auto;
	}
	body:is(.stone-home, .stone-landing) .collection-card::after { display: none; }
	body:is(.stone-home, .stone-landing) .collection-card__media {
		position: relative;
		inset: auto;
		z-index: auto;
		aspect-ratio: 4 / 5;
		overflow: hidden;
		background: var(--color-stone);
	}
	body:is(.stone-home, .stone-landing) .collection-card__content { position: static; padding: var(--space-3) 0 0; }
	body:is(.stone-home, .stone-landing) .collection-card .stone-eyebrow { opacity: 1; color: var(--color-text-muted); }
	body:is(.stone-home, .stone-landing) .collection-card__title { padding-bottom: var(--space-1); }
	/* The button style never wraps; in a narrow column the label must (it overflowed the screen at 768px) */
	body:is(.stone-home, .stone-landing) .collection-card .elementor-button { white-space: normal; text-align: left; line-height: 1.5; padding-block: 8px; }
}
@media (max-width: 767.98px) {
	body:is(.stone-home, .stone-landing) .collection-grid { grid-template-columns: 1fr; gap: var(--space-6); }
	body:is(.stone-home, .stone-landing) .collection-card__media { aspect-ratio: 4 / 3; }
	body:is(.stone-home, .stone-landing) .collection-card--dining .collection-card__media { aspect-ratio: 4 / 5; }
}

/* ======================================================================
   4. Signature dining tables
   ====================================================================== */
body:is(.stone-home, .stone-landing) .section-signature .signature-products { width: 100%; }
/* Three pieces on a phone: one column, so the third one is not left alone on a second row (the pieces are shown larger too). */
@media (max-width: 479.98px) {
	body:is(.stone-home, .stone-landing) .section-signature .product-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
	body:is(.stone-home, .stone-landing) .section-signature .product-grid--picks-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ======================================================================
   5. Marble: a large image on the left, a second one overlapping it,
      text on the right
   ====================================================================== */
body:is(.stone-home, .stone-landing) .marble-section {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--space-3);
	align-items: center;
}
body:is(.stone-home, .stone-landing) .marble-section__media {
	grid-column: 1 / 8;
	position: relative;
	display: block;
	padding-bottom: clamp(32px, 6vw, 88px);
}
body:is(.stone-home, .stone-landing) .marble-section__image { margin: 0; overflow: hidden; background: var(--color-stone); }
body:is(.stone-home, .stone-landing) .marble-section__image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
body:is(.stone-home, .stone-landing) .marble-section__media > .marble-section__image--primary { width: 70%; aspect-ratio: 4 / 5; }
body:is(.stone-home, .stone-landing) .marble-section__media > .marble-section__image--secondary {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 44%;
	aspect-ratio: 1 / 1;
	box-shadow: 0 0 0 clamp(6px, 1vw, 12px) var(--color-background);
}
body:is(.stone-home, .stone-landing) .marble-section__copy {
	grid-column: 9 / 13;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
@media (max-width: 1099.98px) {
	body:is(.stone-home, .stone-landing) .marble-section__copy { grid-column: 8 / 13; }
}
@media (max-width: 899.98px) {
	body:is(.stone-home, .stone-landing) .marble-section { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-8); }
	body:is(.stone-home, .stone-landing) .marble-section__media > .marble-section__image--primary { width: 78%; }
	body:is(.stone-home, .stone-landing) .marble-section__media > .marble-section__image--secondary { width: 46%; }
}

/* ======================================================================
   6. Travertine: text on the left, two arched images on the right
      (a different rhythm from Marble)
   ====================================================================== */
body:is(.stone-home, .stone-landing) .travertine-section {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--space-3);
	align-items: center;
}
body:is(.stone-home, .stone-landing) .travertine-section__copy {
	grid-column: 1 / 6;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
body:is(.stone-home, .stone-landing) .travertine-section__images {
	grid-column: 7 / 13;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
}
body:is(.stone-home, .stone-landing) .travertine-section__image { margin: 0; overflow: hidden; background: var(--color-stone); }
body:is(.stone-home, .stone-landing) .travertine-section__image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
body:is(.stone-home, .stone-landing) .travertine-section__image--detail { aspect-ratio: 3 / 4; }
body:is(.stone-home, .stone-landing) .travertine-section__image--lifestyle { aspect-ratio: 4 / 5; margin-top: clamp(48px, 9vw, 140px); }
@media (max-width: 899.98px) {
	body:is(.stone-home, .stone-landing) .travertine-section { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-8); }
	body:is(.stone-home, .stone-landing) .travertine-section__images { grid-template-columns: 1fr 1fr; }
	body:is(.stone-home, .stone-landing) .travertine-section__image--lifestyle { margin-top: var(--space-6); }
}

/* ======================================================================
   7. Bespoke: a large atmospheric photograph with the copy over it
   ====================================================================== */
body:is(.stone-home, .stone-landing) .bespoke-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: clamp(480px, 66vh, 660px);
	overflow: hidden;
	isolation: isolate;
}
body:is(.stone-home, .stone-landing) .bespoke-section__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}
body:is(.stone-home, .stone-landing) .bespoke-section__media .elementor-widget-container { height: 100%; }
body:is(.stone-home, .stone-landing) .bespoke-section__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
body:is(.stone-home, .stone-landing) .bespoke-section::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to right, rgba(25, 24, 23, 0.82) 0%, rgba(25, 24, 23, 0.64) 40%, rgba(25, 24, 23, 0.3) 62%, rgba(25, 24, 23, 0) 82%),
		linear-gradient(to top, rgba(25, 24, 23, 0.5) 0%, rgba(25, 24, 23, 0) 55%);
	pointer-events: none;
}
body:is(.stone-home, .stone-landing) .bespoke-section__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 560px;
}
body:is(.stone-home, .stone-landing) .bespoke-section .stone-eyebrow { color: var(--color-on-dark); }
body:is(.stone-home, .stone-landing) .bespoke-section .section-text { color: rgba(251, 250, 247, 0.9); }
/* Below 1100px the copy would cover most of the photograph: stack them instead */
@media (max-width: 1099.98px) {
	body:is(.stone-home, .stone-landing) .bespoke-section { display: block; min-height: 0; padding: 0; }
	body:is(.stone-home, .stone-landing) .bespoke-section::after { display: none; }
	body:is(.stone-home, .stone-landing) .bespoke-section > .bespoke-section__media {
		position: relative;
		inset: auto;
		z-index: auto;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
	body:is(.stone-home, .stone-landing) .bespoke-section__copy { max-width: none; padding: var(--space-6) var(--gutter) var(--space-8); }
}
@media (max-width: 767.98px) {
	body:is(.stone-home, .stone-landing) .bespoke-section > .bespoke-section__media { aspect-ratio: 4 / 5; }
}

/* ======================================================================
   8. Craftsmanship: six stages, a photograph and a short caption each
   ====================================================================== */
body:is(.stone-home, .stone-landing) .craft-section .section-header { margin-bottom: var(--space-8); }
body:is(.stone-home, .stone-landing) .craft-steps {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-3);
}
body:is(.stone-home, .stone-landing) .craft-step { display: flex; flex-direction: column; }
body:is(.stone-home, .stone-landing) .craft-step__media {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-stone);
}
body:is(.stone-home, .stone-landing) .craft-step__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 1.4s var(--ease);
}
body:is(.stone-home, .stone-landing) .craft-step:hover .craft-step__media img { transform: scale(1.04); }
body:is(.stone-home, .stone-landing) .craft-step__body { padding-top: var(--space-3); }
body:is(.stone-home, .stone-landing) .craft-step__number {
	padding-bottom: 6px;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--color-accent);
}
body:is(.stone-home, .stone-landing) .craft-step__title {
	font-family: var(--font-display);
	font-size: clamp(22px, 1rem + 0.5vw, 27px);
	font-weight: 400;
	line-height: 1.1;
	padding-bottom: 8px;
}
body:is(.stone-home, .stone-landing) .craft-step__text { font-size: 14.5px; line-height: 1.55; color: var(--color-text-muted); }
@media (max-width: 1099.98px) {
	body:is(.stone-home, .stone-landing) .craft-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-6); }
}
/* Phones: one swipeable row instead of six stacked blocks (keeps the section short) */
@media (max-width: 767.98px) {
	body:is(.stone-home, .stone-landing) .craft-steps {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 14px;
		/* Run to both screen edges so the next card is cut by the screen, not 20 px before it.
		   Elementor's full-width container sets width: 100%, which the negative margins alone do not widen. */
		width: calc(100% + var(--gutter) * 2);
		max-width: none;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	body:is(.stone-home, .stone-landing) .craft-steps::-webkit-scrollbar { display: none; }
	body:is(.stone-home, .stone-landing) .craft-steps > .craft-step { flex: 0 0 66%; width: 66%; min-width: 0; scroll-snap-align: start; }
	body:is(.stone-home, .stone-landing) .craft-step__text { max-width: 30ch; }
}

/* ======================================================================
   9. Interiors: an asymmetrical pair of photographs
   ====================================================================== */
body:is(.stone-home, .stone-landing) .spaces-gallery__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--space-3);
	align-items: start;
}
body:is(.stone-home, .stone-landing) .gallery-item {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--color-stone);
}
body:is(.stone-home, .stone-landing) .gallery-item .elementor-widget-container,
body:is(.stone-home, .stone-landing) .gallery-item figure { height: 100%; margin: 0; }
body:is(.stone-home, .stone-landing) .gallery-item img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.4s var(--ease); }
body:is(.stone-home, .stone-landing) .gallery-item:hover img { transform: scale(1.03); }
body:is(.stone-home, .stone-landing) .gallery-item--1 { grid-column: 1 / 9; aspect-ratio: 4 / 3; }
body:is(.stone-home, .stone-landing) .gallery-item--2 { grid-column: 9 / 13; aspect-ratio: 3 / 4; margin-top: clamp(40px, 9vw, 150px); }
body:is(.stone-home, .stone-landing) .gallery-item .widget-image-caption {
	position: absolute;
	left: 14px;
	bottom: 12px;
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-on-dark);
	text-shadow: 0 1px 14px rgba(25, 24, 23, 0.45);
	z-index: 1;
}
/* Captions stay readable on bright photos (measured: AA in the worst 5 % of pixels from 375 to 1920 px;
   the earlier, lighter veil dropped to 4.37:1 at 768 px) */
body:is(.stone-home, .stone-landing) .gallery-item::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 44%;
	background: linear-gradient(to top, rgba(25, 24, 23, 0.62), rgba(25, 24, 23, 0.26) 55%, rgba(25, 24, 23, 0));
	pointer-events: none;
}
@media (max-width: 767.98px) {
	body:is(.stone-home, .stone-landing) .spaces-gallery__grid { display: flex; flex-direction: column; gap: 12px; }
	body:is(.stone-home, .stone-landing) .gallery-item--1 { aspect-ratio: 4 / 3; }
	body:is(.stone-home, .stone-landing) .spaces-gallery__grid > .gallery-item--2 { aspect-ratio: 1 / 1; width: 72%; align-self: flex-end; margin-top: 0; }
}

/* ======================================================================
   10. Trade (dark)
   ====================================================================== */
body:is(.stone-home, .stone-landing) .trade-section {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--space-3);
	row-gap: var(--space-8);
	align-items: start;
}
body:is(.stone-home, .stone-landing) .trade-section__copy { grid-column: 1 / 7; display: flex; flex-direction: column; align-items: flex-start; }
body:is(.stone-home, .stone-landing) .trade-section__list { grid-column: 8 / 13; align-self: end; }
body:is(.stone-home, .stone-landing) .benefit-list { list-style: none; margin: 0; padding: 0; }
body:is(.stone-home, .stone-landing) .benefit-list li {
	padding: 16px 0;
	border-top: 1px solid var(--color-border-dark);
	font-size: var(--fs-body);
	line-height: 1.4;
}
body:is(.stone-home, .stone-landing) .benefit-list li:last-child { border-bottom: 1px solid var(--color-border-dark); }
@media (max-width: 899.98px) {
	body:is(.stone-home, .stone-landing) .trade-section { display: block; }
	body:is(.stone-home, .stone-landing) .trade-section__list { margin-top: var(--space-8); }
}

/* ======================================================================
   11. International delivery
   ====================================================================== */
body:is(.stone-home, .stone-landing) .delivery-section {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--space-3);
	align-items: center;
	padding-bottom: var(--section-y-sm);
}
body:is(.stone-home, .stone-landing) .delivery-section__copy { grid-column: 1 / 7; display: flex; flex-direction: column; align-items: stretch; }
body:is(.stone-home, .stone-landing) .delivery-section__copy .section-actions { align-self: flex-start; }
body:is(.stone-home, .stone-landing) .delivery-list-wrap { width: 100%; max-width: 560px; }
body:is(.stone-home, .stone-landing) .delivery-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; width: 100%; max-width: 560px; }
body:is(.stone-home, .stone-landing) .delivery-list li {
	padding: 14px 0;
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-body);
	line-height: 1.4;
}
body:is(.stone-home, .stone-landing) .delivery-list li:last-child { border-bottom: 1px solid var(--color-border); }

/* Destinations panel (the target markets) */
body:is(.stone-home, .stone-landing) .delivery-panel {
	grid-column: 8 / 13;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: clamp(28px, 3.4vw, 56px);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
}
body:is(.stone-home, .stone-landing) .delivery-panel .stone-eyebrow { padding-bottom: var(--space-4); color: var(--color-text-muted); }
body:is(.stone-home, .stone-landing) .delivery-panel__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
body:is(.stone-home, .stone-landing) .delivery-panel__list li {
	padding: 13px 0;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-display);
	font-size: clamp(25px, 1.1rem + 0.9vw, 34px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
body:is(.stone-home, .stone-landing) .delivery-panel__note { margin-top: var(--space-3); font-size: 14.5px; color: var(--color-text-muted); }
/* While the section is stacked (below 900px) the panel is as wide as the page: seven names
   would make a very tall list, so they sit in two columns */
@media (max-width: 899.98px) {
	body:is(.stone-home, .stone-landing) .delivery-panel { padding: 26px 22px 24px; }
	body:is(.stone-home, .stone-landing) .delivery-panel .stone-eyebrow { padding-bottom: var(--space-2); }
	/* Two columns: seven names in four short rows instead of a tall single list */
	body:is(.stone-home, .stone-landing) .delivery-panel__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
	body:is(.stone-home, .stone-landing) .delivery-panel__list li { padding: 10px 0; font-size: clamp(22px, 3.4vw, 28px); }
	body:is(.stone-home, .stone-landing) .delivery-panel__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 899.98px) {
	body:is(.stone-home, .stone-landing) .delivery-section { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-8); }
}

/* ======================================================================
   12. Trust strip: plain words, no badges
   ====================================================================== */
body:is(.stone-home, .stone-landing) .section-trust { padding-block: var(--space-6); }
body:is(.stone-home, .stone-landing) .trust-strip {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-3);
	padding-block: var(--space-6);
	border-block: 1px solid var(--color-border);
}
body:is(.stone-home, .stone-landing) .trust-strip__item {
	padding-left: var(--space-3);
	border-left: 1px solid var(--color-border);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--color-text);
}
@media (max-width: 899.98px) {
	body:is(.stone-home, .stone-landing) .trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-4); }
}
@media (max-width: 479.98px) {
	body:is(.stone-home, .stone-landing) .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body:is(.stone-home, .stone-landing) .trust-strip__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ======================================================================
   13. Journal
   ====================================================================== */
body:is(.stone-home, .stone-landing) .section-journal .journal-list { width: 100%; }

/* ======================================================================
   14. Final call to action
   ====================================================================== */
body:is(.stone-home, .stone-landing) .final-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-block: var(--section-y);
}
body:is(.stone-home, .stone-landing) .final-cta .section-title { font-size: clamp(30px, 1rem + 2.2vw, 52px); max-width: 18ch; }
body:is(.stone-home, .stone-landing) .final-cta .section-text { color: #3d3934; } /* 7:1 on the stone background */
body:is(.stone-home, .stone-landing) .final-cta .section-actions { margin-top: var(--space-6); }
/* Desktop: the question on the left, the answer and the button on the right */
@media (min-width: 900px) {
	body:is(.stone-home, .stone-landing) .final-cta__copy {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--space-3);
		align-items: end;
		width: 100%;
	}
	body:is(.stone-home, .stone-landing) .final-cta__copy > .elementor-widget-heading { grid-column: 1 / 7; grid-row: 1 / 3; }
	body:is(.stone-home, .stone-landing) .final-cta__copy > .elementor-widget-text-editor { grid-column: 8 / 13; grid-row: 1; margin-top: 0; align-self: end; }
	body:is(.stone-home, .stone-landing) .final-cta__copy > .section-actions { grid-column: 8 / 13; grid-row: 2; margin-top: var(--space-4); }
	body:is(.stone-home, .stone-landing) .final-cta .section-text :is(.elementor-widget-container, p) { max-width: 42ch; }
}

/* ======================================================================
   15. Measure (maximum text width)
   Elementor pins every widget to max-width: 100% with a very specific rule,
   so the measure is set on what the widget contains: the heading, the
   paragraphs, or the inner container when Elementor outputs one.
   ====================================================================== */
body:is(.stone-home, .stone-landing) .site-hero__title :is(.elementor-widget-container, .elementor-heading-title) { max-width: 17ch; }
body:is(.stone-home, .stone-landing) .site-hero__text :is(.elementor-widget-container, p) { max-width: 520px; }
body:is(.stone-home, .stone-landing) .section-title :is(.elementor-widget-container, .elementor-heading-title) { max-width: 17ch; }
body:is(.stone-home, .stone-landing) .section-text :is(.elementor-widget-container, p) { max-width: var(--content-max); }
body:is(.stone-home, .stone-landing) .section-intro__title :is(.elementor-widget-container, .elementor-heading-title) { max-width: 28ch; }
body:is(.stone-home, .stone-landing) .craft-step__text :is(.elementor-widget-container, p) { max-width: 28ch; }
body:is(.stone-home, .stone-landing) .final-cta .section-title :is(.elementor-widget-container, .elementor-heading-title) { max-width: 18ch; }
body:is(.stone-home, .stone-landing) .delivery-list-wrap :is(.elementor-widget-container, ul) { max-width: 560px; }
body:is(.stone-home, .stone-landing) .section-header .section-title :is(.elementor-widget-container, .elementor-heading-title) { max-width: 22ch; }
@media (max-width: 767.98px) {
	body:is(.stone-home, .stone-landing) .site-hero__title :is(.elementor-widget-container, .elementor-heading-title) { max-width: none; }
	body:is(.stone-home, .stone-landing) .section-title :is(.elementor-widget-container, .elementor-heading-title) { max-width: 20ch; }
	body:is(.stone-home, .stone-landing) .section-intro__title :is(.elementor-widget-container, .elementor-heading-title) { max-width: none; }
}

/* ======================================================================
   16. Phone refinements
   ====================================================================== */
@media (max-width: 767.98px) {
	/* Stronger veil under the hero copy: the text sits over pale travertine */
	body:is(.stone-home, .stone-landing) .site-hero::after {
		background:
			linear-gradient(to bottom, rgba(25, 24, 23, 0.66) 0, rgba(25, 24, 23, 0.5) 50px, rgba(25, 24, 23, 0.2) 110px, rgba(25, 24, 23, 0) 170px),
			linear-gradient(to top, rgba(25, 24, 23, 0.88) 0%, rgba(25, 24, 23, 0.78) 30%, rgba(25, 24, 23, 0.67) 50%, rgba(25, 24, 23, 0.44) 66%, rgba(25, 24, 23, 0.12) 80%, rgba(25, 24, 23, 0) 90%);
	}
	/* Buttons: full width, stacked, equal. Text links stay inline. */
	body:is(.stone-home, .stone-landing) .section-actions { flex-direction: column; align-items: stretch; }
	body:is(.stone-home, .stone-landing) .section-actions .elementor-widget-button,
	body:is(.stone-home, .stone-landing) .section-actions .elementor-button { width: 100%; }
	body:is(.stone-home, .stone-landing) .section-actions .stone-btn--text .elementor-button { width: auto; }
	body:is(.stone-home, .stone-landing) .delivery-section__copy .section-actions { align-self: stretch; }
	body:is(.stone-home, .stone-landing) .section-links { margin-top: var(--space-3); }
	body:is(.stone-home, .stone-landing) .section-header { margin-bottom: var(--space-6); }
}

/* ======================================================================
   17. Image framing per slot
   Every image widget on the page also carries a "slot-{name}" class, so the
   crop of each photo can be tuned here without touching Elementor. Replacing
   an image in Elementor keeps these framings; adjust the matching rule if a
   new photo needs another crop. Each photograph is used once, at (almost)
   full frame: no deep crops.
   ====================================================================== */
body:is(.stone-home, .stone-landing) .slot-hero img { object-position: 56% 60%; }
body:is(.stone-home, .stone-landing) .slot-collection-dining img { object-position: 46% 62%; }
body:is(.stone-home, .stone-landing) .slot-collection-coffee img { object-position: 50% 64%; }
body:is(.stone-home, .stone-landing) .slot-collection-console img { object-position: 50% 62%; }
body:is(.stone-home, .stone-landing) .slot-marble-closeup img { object-position: 50% 50%; }
body:is(.stone-home, .stone-landing) .slot-marble-table img { object-position: 38% 60%; }
body:is(.stone-home, .stone-landing) .slot-travertine-detail img { transform: scale(1.4); transform-origin: 48% 66%; }
body:is(.stone-home, .stone-landing) .slot-travertine-lifestyle img { object-position: 38% 55%; }
body:is(.stone-home, .stone-landing) .slot-bespoke img { object-position: 50% 64%; }
body:is(.stone-home, .stone-landing) .slot-gallery-1 img { object-position: 42% 60%; }
body:is(.stone-home, .stone-landing) .slot-gallery-2 img { object-position: 50% 62%; }
@media (max-width: 767.98px) {
	/* the phone hero is the portrait crop (640 x 1024): it is cut around the vase, so centre it */
	body:is(.stone-home, .stone-landing) .slot-hero img { object-position: 50% 56%; }
	body:is(.stone-home, .stone-landing) .slot-bespoke img { object-position: 38% 62%; }
}

/* ======================================================================
   18. Finishing details
   ====================================================================== */
/* Editorial eyebrow: a small eight-point star before the label (not inside image cards) */
body:is(.stone-home, .stone-landing) .stone-eyebrow .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-right: 12px;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: var(--motif-star-mask) center / contain no-repeat;
	mask: var(--motif-star-mask) center / contain no-repeat;
	opacity: 0.85;
}
body:is(.stone-home, .stone-landing) .collection-card .stone-eyebrow .elementor-heading-title::before,
body:is(.stone-home, .stone-landing) .delivery-panel .stone-eyebrow .elementor-heading-title::before { display: none; }

/* Hero: a slow, thin scroll cue on the right edge (decorative) */
body:is(.stone-home, .stone-landing) .site-hero::before {
	content: "";
	position: absolute;
	right: max(var(--gutter), calc((100% - var(--container-max)) / 2));
	bottom: clamp(48px, 9vh, 112px);
	width: 1px;
	height: 72px;
	background: linear-gradient(to bottom, rgba(251, 250, 247, 0.9) 0 50%, rgba(251, 250, 247, 0.25) 50% 100%);
	background-size: 100% 200%;
	animation: stone-scroll-cue 2.8s var(--ease) infinite;
	pointer-events: none;
}
@keyframes stone-scroll-cue {
	0% { background-position: 0 100%; }
	100% { background-position: 0 -100%; }
}
@media (max-width: 899.98px) { body:is(.stone-home, .stone-landing) .site-hero::before { display: none; } }

/* ======================================================================
   19. Moroccan touch (restrained)
   Quiet details drawn from zellige tilework and Moroccan architecture:
   the eight-point star before each label (section 18), a star lattice behind
   two sections, and arched images. No clip-art, no extra requests: the
   motifs are tiny inline SVGs defined in tokens.css. To remove them, delete
   this section and the star rule above.
   ====================================================================== */
/* Star lattice, faded in from the right, behind the dark Trade section */
body:is(.stone-home, .stone-landing) .trade-section { overflow: hidden; isolation: isolate; }
body:is(.stone-home, .stone-landing) .trade-section::before {
	content: "";
	position: absolute;
	inset: 0 0 0 38%;
	z-index: -1;
	background: var(--motif-lattice-light);
	background-size: 57px 57px;
	opacity: 0.075;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
	mask-image: linear-gradient(to right, transparent 0%, #000 55%);
	pointer-events: none;
}

/* The same lattice, very faint, across the final call to action */
body:is(.stone-home, .stone-landing) .final-cta { overflow: hidden; isolation: isolate; }
body:is(.stone-home, .stone-landing) .final-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--motif-lattice);
	background-size: 57px 57px;
	background-position: center;
	opacity: 0.1;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);
	pointer-events: none;
}

/* Arched images: the round arch of Moroccan doorways and windows */
body:is(.stone-home, .stone-landing) .travertine-section__image { border-radius: 999px 999px 0 0; }

/* Anchor links land below the sticky header */
html { scroll-padding-top: 88px; }

/* A home section that has nothing to show yet (no published piece, no published article) is left out, not shown empty. */
body.stone-home .section-signature:not(:has(.product-grid)),
body.stone-home .section-journal:not(:has(.journal-grid)) { display: none; }

/* ======================================================================
   15. Client words (shown only when real statements are entered in Customize > Client words)
   ====================================================================== */
body:is(.stone-home, .stone-landing) .voices__title {
	margin: 0 0 var(--space-6);
	max-width: 17ch;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
body:is(.stone-home, .stone-landing) .voices__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
body:is(.stone-home, .stone-landing) .voices__item figure { display: flex; flex-direction: column; height: 100%; margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
body:is(.stone-home, .stone-landing) .voices__item blockquote { margin: 0; padding: 0; border: 0; }
body:is(.stone-home, .stone-landing) .voices__item blockquote p { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 1rem + 0.6vw, 26px); font-weight: 300; line-height: 1.38; }
body:is(.stone-home, .stone-landing) .voices__item figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-3); }
body:is(.stone-home, .stone-landing) .voices__name { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
body:is(.stone-home, .stone-landing) .voices__role { font-size: var(--fs-small); color: var(--color-text-muted); }
@media (min-width: 900px) {
	body:is(.stone-home, .stone-landing) .voices__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
	body:is(.stone-home, .stone-landing) .voices__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
	body:is(.stone-home, .stone-landing) .voices__list--1 { max-width: 62ch; }
}

/* ======================================================================
   19. Image pack (2026-10-14): four collections, material tiles, split bespoke, craft note, captions, hero on phones
   The pictures are generated illustrations: their caption sits on the picture, small and quiet (never a banner).
   ====================================================================== */

/* Caption of a generated picture */
body:is(.stone-home, .stone-landing) .material-tile__media { position: relative; }
body:is(.stone-home, .stone-landing) .site-hero__media .widget-image-caption,
body:is(.stone-home, .stone-landing) .collection-card__media .widget-image-caption,
body:is(.stone-home, .stone-landing) .material-tile__media .widget-image-caption,
body:is(.stone-home, .stone-landing) .bespoke-section__media .widget-image-caption {
	position: absolute;
	right: 10px;
	top: 10px;
	margin: 0;
	padding: 3px 8px;
	background: rgba(25, 24, 23, 0.6);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.3;
	border-radius: 2px;
}
body:is(.stone-home, .stone-landing) .site-hero__media .widget-image-caption { top: auto; bottom: 12px; right: max(var(--gutter), 12px); }
body:is(.stone-home, .stone-landing) .craft-note-wrap { margin-top: var(--space-2); }
body:is(.stone-home, .stone-landing) .craft-note { margin: 0; font-size: 12.5px; letter-spacing: 0.04em; color: var(--color-text-muted); }

/* Hero: focal point of the concept picture, a lighter local veil, the picture whole on phones */
body:is(.stone-home, .stone-landing) .slot-hero img { object-position: 58% 58%; }
body:is(.stone-home, .stone-landing) .site-hero::after {
	background:
		linear-gradient(to bottom, rgba(25, 24, 23, 0.5) 0, rgba(25, 24, 23, 0.32) 70px, rgba(25, 24, 23, 0) 190px),
		linear-gradient(to right, rgba(25, 24, 23, 0.5) 0%, rgba(25, 24, 23, 0.34) 30%, rgba(25, 24, 23, 0) 58%),
		linear-gradient(to top, rgba(25, 24, 23, 0.55) 0%, rgba(25, 24, 23, 0.22) 34%, rgba(25, 24, 23, 0) 62%);
}
@media (min-width: 900px) and (max-width: 1099.98px) {
	body:is(.stone-home, .stone-landing) .site-hero::after {
		background:
			linear-gradient(to bottom, rgba(25, 24, 23, 0.5) 0, rgba(25, 24, 23, 0.32) 70px, rgba(25, 24, 23, 0) 190px),
			linear-gradient(to top, rgba(25, 24, 23, 0.7) 0%, rgba(25, 24, 23, 0.46) 34%, rgba(25, 24, 23, 0.12) 62%, rgba(25, 24, 23, 0) 78%);
	}
}
@media (max-width: 899.98px) {
	body:is(.stone-home, .stone-landing) .site-hero { display: block; min-height: 0; }
	body:is(.stone-home, .stone-landing) .site-hero__media { position: relative; inset: auto; z-index: auto; aspect-ratio: 16 / 9; }
	body:is(.stone-home, .stone-landing) .site-hero__media .elementor-widget-container,
	body:is(.stone-home, .stone-landing) .site-hero__media .elementor-image { height: 100%; }
	body:is(.stone-home, .stone-landing) .site-hero::after {
		height: 170px;
		inset: 0 0 auto 0;
		background: linear-gradient(to bottom, rgba(25, 24, 23, 0.5) 0, rgba(25, 24, 23, 0.22) 90px, rgba(25, 24, 23, 0) 170px);
	}
	body:is(.stone-home, .stone-landing) .site-hero__content { padding-top: var(--space-6); padding-bottom: var(--space-6); }
	body:is(.stone-home, .stone-landing) .site-hero__media .widget-image-caption { bottom: 8px; top: auto; right: 8px; }
}
/* On a phone the transparent header covers the top of the picture: a taller frame keeps the whole table in view below it. */
@media (max-width: 599.98px) {
	body:is(.stone-home, .stone-landing) .site-hero__media { aspect-ratio: 4 / 3; }
}

/* Four collections: dining large on the left, three stacked on the right (two columns, then one on phones) */
body:is(.stone-home, .stone-landing) .collection-grid--four { grid-auto-rows: clamp(200px, 20vw, 300px); }
body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card--dining { grid-row: span 3; }
body:is(.stone-home, .stone-landing) .slot-collection-dining img { object-position: 50% 55%; }
body:is(.stone-home, .stone-landing) .slot-collection-coffee img { object-position: 50% 55%; }
body:is(.stone-home, .stone-landing) .slot-collection-console img { object-position: 50% 55%; }
body:is(.stone-home, .stone-landing) .slot-collection-side img { object-position: 50% 50%; }
@media (max-width: 1099.98px) {
	body:is(.stone-home, .stone-landing) .collection-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
	body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card--dining { grid-row: auto; }
	body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card__media { aspect-ratio: 3 / 2; }
}
@media (max-width: 767.98px) {
	body:is(.stone-home, .stone-landing) .collection-grid--four { grid-template-columns: 1fr; }
	body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card__media,
	body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card--dining .collection-card__media { aspect-ratio: 3 / 2; }
}

/* Shop by material */
body:is(.stone-home, .stone-landing) .section-materials .section-header { margin-bottom: var(--space-6); }
body:is(.stone-home, .stone-landing) .material-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
body:is(.stone-home, .stone-landing) .material-tile { display: flex; flex-direction: column; }
body:is(.stone-home, .stone-landing) .material-tile__media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-stone); }
body:is(.stone-home, .stone-landing) .material-tile__media .elementor-widget-container,
body:is(.stone-home, .stone-landing) .material-tile__media .elementor-image { height: 100%; }
body:is(.stone-home, .stone-landing) .material-tile__media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
body:is(.stone-home, .stone-landing) .material-tile__body { padding-top: var(--space-3); }
body:is(.stone-home, .stone-landing) .material-tile__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; line-height: 1.05; padding-bottom: var(--space-2); }
body:is(.stone-home, .stone-landing) .material-tile__text { font-size: 15px; line-height: 1.55; color: var(--color-text-muted); padding-bottom: var(--space-3); }
body:is(.stone-home, .stone-landing) .material-tile .section-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
@media (max-width: 899.98px) {
	body:is(.stone-home, .stone-landing) .material-tiles { grid-template-columns: 1fr; gap: var(--space-6); }
	body:is(.stone-home, .stone-landing) .material-tile__media { aspect-ratio: 3 / 2; }
}

/* Bespoke: the picture beside the copy, on the light background */
body:is(.stone-home, .stone-landing) .bespoke-section--split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 5vw, 80px);
	min-height: 0;
	overflow: visible;
	isolation: auto;
	color: var(--color-text);
}
body:is(.stone-home, .stone-landing) .bespoke-section--split::after { display: none; }
body:is(.stone-home, .stone-landing) .bespoke-section--split .bespoke-section__media { position: relative; inset: auto; z-index: auto; aspect-ratio: 3 / 2; overflow: hidden; }
body:is(.stone-home, .stone-landing) .bespoke-section--split .bespoke-section__media .elementor-widget-container,
body:is(.stone-home, .stone-landing) .bespoke-section--split .bespoke-section__media .elementor-image { height: 100%; }
body:is(.stone-home, .stone-landing) .bespoke-section--split .bespoke-section__copy { max-width: 520px; padding: 0; }
body:is(.stone-home, .stone-landing) .bespoke-section--split .stone-eyebrow { color: var(--color-text-muted); }
body:is(.stone-home, .stone-landing) .bespoke-section--split .section-text { color: var(--color-text-muted); }
body:is(.stone-home, .stone-landing) .slot-bespoke img { object-position: 50% 50%; }
@media (max-width: 899.98px) {
	body:is(.stone-home, .stone-landing) .bespoke-section--split { display: block; padding: 0; }
	body:is(.stone-home, .stone-landing) .bespoke-section--split .bespoke-section__media { width: 100%; }
	body:is(.stone-home, .stone-landing) .bespoke-section--split .bespoke-section__copy { max-width: none; padding: var(--space-6) var(--gutter) var(--space-8); }
}

/* Craft pictures: focal points from the pack manifest */
body:is(.stone-home, .stone-landing) .slot-craft-stone-selection img { object-position: 50% 45%; }
body:is(.stone-home, .stone-landing) .slot-craft-wet-cutting img,
body:is(.stone-home, .stone-landing) .slot-craft-hand-finishing img,
body:is(.stone-home, .stone-landing) .slot-craft-quality-inspection img,
body:is(.stone-home, .stone-landing) .slot-craft-export-crating img,
body:is(.stone-home, .stone-landing) .slot-craft-zellige-assembly img,
body:is(.stone-home, .stone-landing) .slot-craft-metal-finishing img { object-position: 50% 50%; }
body:is(.stone-home, .stone-landing) .slot-craft-edge-shaping img { object-position: 55% 50%; }

/* A picture with a caption is wrapped by Elementor in a <figure>: it must fill its frame like the bare picture did */
body:is(.stone-home, .stone-landing) :is(.site-hero__media, .collection-card__media, .material-tile__media, .bespoke-section__media) :is(figure, .wp-caption) { height: 100%; margin: 0; }

/* ======================================================================
   20. Phones: a shorter home page (2026-10-23)
   The four collections in two columns; the signature pieces and the three materials in one swipeable row each (the next card is cut
   by the edge of the screen, which shows that the row scrolls). Same pattern as the craft steps above.
   ====================================================================== */
@media (max-width: 767.98px) {
	body:is(.stone-home, .stone-landing) .collection-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) 12px; }
	body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card__media,
	body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card--dining .collection-card__media { aspect-ratio: 4 / 5; }
	body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card__content { padding-top: 12px; }
	body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card .stone-eyebrow { font-size: 10.5px; letter-spacing: 0.12em; padding-bottom: 4px; }
	body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card__title { font-size: 22px; line-height: 1.1; }
	body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card .elementor-button { font-size: 11px; letter-spacing: 0.1em; }
	body:is(.stone-home, .stone-landing) .collection-grid--four .collection-card__media .widget-image-caption { max-width: calc(100% - 16px); font-size: 9.5px; line-height: 1.3; white-space: normal; }

	body:is(.stone-home, .stone-landing) .section-signature .product-grid,
	body:is(.stone-home, .stone-landing) .material-tiles {
		display: flex;
		--flex-direction: row;
		flex-direction: row; /* the material tiles are an Elementor container, which sets a column */
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 14px;
		width: calc(100% + var(--gutter) * 2);
		max-width: none;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	body:is(.stone-home, .stone-landing) .section-signature .product-grid::-webkit-scrollbar,
	body:is(.stone-home, .stone-landing) .material-tiles::-webkit-scrollbar { display: none; }
	body:is(.stone-home, .stone-landing) .section-signature .product-grid > *,
	body:is(.stone-home, .stone-landing) .material-tiles > .material-tile { flex: 0 0 78%; width: 78%; min-width: 0; scroll-snap-align: start; }
	body:is(.stone-home, .stone-landing) .material-tile__media { aspect-ratio: 1 / 1; }
	body:is(.stone-home, .stone-landing) .material-tile .section-links { gap: var(--space-2); }
}