/* Sialk Carpet — design system B1 “Dark Gold”
   Logical properties only (RTL-safe). Square corners. No shadows except dropdowns. */

/* ---------- Fonts (self-hosted, subset, swap) ---------- */
/* Body fonts (Instrument Sans, Golos Text) use font-display: optional (Phase 6, CLS): if the file is not ready at first
   paint, that page keeps the metric-matched fallback below and the cached font is used from the next page on.
   The Latin subset of Vazirmatn (Latin characters inside AR text) is optional too, so it never re-wraps an AR heading.
   Heading fonts (preloaded) and the Arabic Vazirmatn (headings + body in AR, preloaded) keep swap. */
@font-face { font-family: "Gloock"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gloock-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(../fonts/instrument-sans-latin-wght.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/vazirmatn-arabic-wght.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(../fonts/vazirmatn-latin-wght.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/playfair-display-cyrillic-wght.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/playfair-display-latin-wght.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(../fonts/golos-text-cyrillic-wght.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(../fonts/golos-text-latin-wght.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Metric-matched fallbacks (Phase 6, CLS): while a web font loads, text is set in a local font scaled to the same
   width and line metrics, so nothing reflows when the web font swaps in. Values measured in Chrome with canvas
   measureText on real page text (EN/AR/RU) per weight: size-adjust = web width ÷ fallback width; ascent/descent =
   the web font's font-box metrics ÷ size-adjust. Re-measure (scratch tool fk/measure.mjs) if a font file changes. */
@font-face { font-family: "Gloock Fallback"; src: local("Georgia"); size-adjust: 102.11%; ascent-override: 95.97%; descent-override: 22.52%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 101.48%; ascent-override: 95.58%; descent-override: 24.64%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 98.8%; ascent-override: 98.18%; descent-override: 25.3%; line-gap-override: 0%; }
@font-face { font-family: "Vazirmatn Fallback"; font-weight: 400; src: local("Tahoma"); size-adjust: 92.24%; ascent-override: 111.66%; descent-override: 58.54%; line-gap-override: 0%; }
@font-face { font-family: "Vazirmatn Fallback"; font-weight: 700; src: local("Tahoma Bold"), local("Tahoma-Bold"); size-adjust: 80.5%; ascent-override: 127.95%; descent-override: 67.08%; /* bold = headings: calibrated on AR headings (79–82%), not body text */ line-gap-override: 0%; }
@font-face { font-family: "Playfair Display Fallback"; src: local("Georgia"); size-adjust: 101.2%; ascent-override: 106.72%; descent-override: 24.7%; line-gap-override: 0%; }
@font-face { font-family: "Golos Text Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 104.66%; ascent-override: 93.64%; descent-override: 21.02%; line-gap-override: 0%; }
@font-face { font-family: "Golos Text Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 99.01%; ascent-override: 98.98%; descent-override: 22.22%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
	--c-ink: #16191C;
	--c-charcoal: #23272B;
	--c-panel: #1D2124;
	--c-line: #2C3135;
	--c-gold: #C2963F;
	--c-sand: #F3EEE6;
	--c-turquoise: #1F6B6A;
	--c-clay: #A24B2A;
	--c-muted: #A9AEB3;
	--c-body-dark: #C9C3B8;
	--c-body-light: #3E4247;
	--c-stone: #6E7276;
	--c-stone-2: #8F8A86;
	--c-field: #B9B2A6;
	--c-sep: #4A5056;
	--c-paper-line: #D9CFBF;
	--c-white: #FFFFFF;
	--c-whatsapp: #25D366;        /* floating WhatsApp button only (owner decision) */
	--c-whatsapp-hover: #4BE083;

	--f-display: "Gloock", "Gloock Fallback", Georgia, "Times New Roman", serif;
	--f-body: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--display-weight: 400;
	--lh-h1: 1.04;
	--lh-h: 1.1;
	--lh-body: 1.6;
	--tracking-eyebrow: .2em;
	--case-eyebrow: uppercase;

	--fs-h1: clamp(2.5rem, 1.55rem + 3.2vw, 4rem);
	--fs-h2: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
	--fs-h3: clamp(1.375rem, 1.25rem + .5vw, 1.625rem);
	--fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
	--fs-body: 1.0625rem;
	--fs-small: .875rem;
	--fs-eyebrow: .8125rem;

	--container: 1280px;
	--gutter: 32px;
	--section-y: clamp(56px, 4rem + 2vw, 88px);
	--header-h: 72px;
	--focus: var(--c-gold);
	--shadow-drop: 0 10px 30px rgba(0, 0, 0, .25);
}
@media (max-width: 599px) { :root { --gutter: 16px; } }

/* Per-language type — set on every element that carries a lang attribute, so a nested
   lang="en" block inside an Arabic page gets the Latin fonts back (custom properties inherit). */
[lang]:lang(en) {
	--f-display: "Gloock", "Gloock Fallback", Georgia, "Times New Roman", serif;
	--f-body: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--display-weight: 400;
	--lh-h1: 1.04;
	--lh-h: 1.1;
	--lh-body: 1.6;
	--tracking-eyebrow: .2em;
	--case-eyebrow: uppercase;
	font-family: var(--f-body);
	line-height: var(--lh-body);
}
[lang]:lang(ar) {
	--f-display: "Vazirmatn", "Vazirmatn Fallback", Tahoma, "Segoe UI", sans-serif;
	--f-body: "Vazirmatn", "Vazirmatn Fallback", Tahoma, "Segoe UI", sans-serif;
	--display-weight: 700;
	--lh-h1: 1.3;
	--lh-h: 1.32;
	--lh-body: 1.9;
	--tracking-eyebrow: 0;
	--case-eyebrow: none;
	font-family: var(--f-body);
	line-height: var(--lh-body);
}
[lang]:lang(ru) {
	--f-display: "Playfair Display", "Playfair Display Fallback", Georgia, "Times New Roman", serif;
	--f-body: "Golos Text", "Golos Text Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--display-weight: 400;
	--lh-h1: 1.08;
	--lh-h: 1.12;
	--lh-body: 1.6;
	--tracking-eyebrow: .2em;
	--case-eyebrow: uppercase;
	font-family: var(--f-body);
	line-height: var(--lh-body);
}
/* Language switcher links carry lang="ar|ru|en" for screen readers, but must not pull in that language's web fonts
   (Phase 5: each page downloaded 2–3 extra font files) — they use the current page's font, system fallback for other scripts */
.s-lang a[lang], .s-notice[lang] { font-family: inherit; }
/* Headings: no automatic hyphenation (owner rule) — only ­ placed by hand; a single over-long word may still wrap rather than overflow */
h1, h2, h3, .s-h1, .s-h2, .s-h3, .s-line-card__title, .s-band__title, .s-artcta__title, .s-steps__n, .s-footer__slogan { overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: calc(var(--header-h) + 16px); }
body {
	margin: 0;
	background: var(--c-ink);
	color: var(--c-sand);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.s-locked { overflow: hidden; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; }
a:hover { color: var(--c-gold); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[class], ol[class], nav ul, nav ol, .s-footer ul { list-style: none; padding: 0; margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.screen-reader-text, .s-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* GeneratePress wrappers: let sections run full width */
.site, .site-content, .content-area, .site-main, .inside-article, .entry-content { max-width: none; margin: 0; padding: 0; float: none; width: auto; }
.site-content { display: block; }
.site-main > article { margin: 0; }
.entry-header, .entry-meta, footer.entry-meta { display: none; }

/* Plain page / post content (until Phase 3 templates) */
.page:not(.page-template-templatesstyleguide-php) .entry-content,
.single .entry-content { max-width: 720px; margin-inline: auto; padding: var(--section-y) var(--gutter); }
.entry-content > * + * { margin-block-start: 1.1em; }
.entry-content h2 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: var(--fs-h3); line-height: var(--lh-h); }

/* ---------- Layout ---------- */
.s-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.s-section--ink { background: var(--c-ink); color: var(--c-sand); }
.s-section--panel { background: var(--c-panel); color: var(--c-sand); }
.s-section--sand { background: var(--c-sand); color: var(--c-charcoal); --focus: var(--c-charcoal); }
.s-section--gold { background: var(--c-gold); color: var(--c-ink); --focus: var(--c-ink); }
.s-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.s-grid { display: grid; gap: 20px; }
.s-grid--products { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.s-grid--blog { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; }
@media (max-width: 599px) { .s-grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* ---------- Type ---------- */
.s-h1 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: var(--fs-h1); line-height: var(--lh-h1); }
.s-h2 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: var(--fs-h2); line-height: var(--lh-h); }
.s-h3 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: var(--fs-h3); line-height: var(--lh-h); }
.s-lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-body-dark); max-width: 34em; }
.s-body { font-size: var(--fs-body); line-height: 1.7; color: var(--c-body-dark); }
.s-section--sand .s-body, .s-section--sand .s-lead { color: var(--c-body-light); }
.s-small { font-size: var(--fs-small); }
.s-eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: var(--case-eyebrow); color: var(--c-gold); }
.s-eyebrow--sm { font-size: .75rem; letter-spacing: calc(var(--tracking-eyebrow) / 2); }
.s-eyebrow--clay, .s-section--sand .s-eyebrow { color: var(--c-clay); }
.s-gold { color: var(--c-gold); }
.s-section--sand .s-gold { color: var(--c-clay); }
.s-code { color: var(--c-gold); font-weight: 700; font-family: var(--f-body); unicode-bidi: isolate; }
.s-eyebrow:lang(ar), .s-footer__title:lang(ar) { letter-spacing: 0; text-transform: none; }

/* ---------- Icons ---------- */
.s-icon { flex: none; }
[dir="rtl"] .s-icon--dir { transform: scaleX(-1); }

/* ---------- Buttons ---------- */
.s-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.s-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-block-size: 44px; padding: 16px 26px; border: 1px solid transparent; border-radius: 0;
	font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
	transition: background-color .15s, color .15s, border-color .15s;
}
.s-btn--primary { background: var(--c-gold); color: var(--c-ink); }
.s-btn--primary:hover { background: #D1A653; color: var(--c-ink); }
.s-btn--secondary { border-color: var(--c-sand); color: var(--c-sand); padding-block: 15px; font-weight: 600; }
.s-btn--secondary:hover { background: var(--c-sand); color: var(--c-ink); }
.s-section--sand .s-btn--secondary { border-color: var(--c-charcoal); color: var(--c-charcoal); }
.s-section--sand .s-btn--secondary:hover { background: var(--c-charcoal); color: var(--c-sand); }
.s-btn--dark { background: var(--c-charcoal); color: var(--c-sand); }
.s-btn--dark:hover { background: var(--c-ink); color: var(--c-sand); }
.s-btn--ink { background: var(--c-ink); color: var(--c-sand); padding: 14px 24px; }
.s-btn--ink:hover { background: var(--c-charcoal); color: var(--c-sand); }
.s-btn--outline-ink { border-color: var(--c-ink); color: var(--c-ink); padding-block: 15px; }
.s-btn--outline-ink:hover { background: var(--c-ink); color: var(--c-sand); }
.s-textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; min-block-size: 44px; color: inherit; }
.s-textlink:hover { color: var(--c-gold); }
.s-textlink:hover .s-icon { translate: 3px 0; }
[dir="rtl"] .s-textlink:hover .s-icon { translate: -3px 0; }
.s-textlink .s-icon { transition: translate .15s; }
.s-textlink--light:hover { color: var(--c-clay); }
.s-section--sand .s-textlink:hover { color: var(--c-clay); }

/* ---------- Skip link ---------- */
.s-skip { position: absolute; inset-inline-start: 16px; inset-block-start: -100px; z-index: 1000; background: var(--c-gold); color: var(--c-ink); padding: 12px 18px; font-weight: 700; text-decoration: none; }
.s-skip:focus { inset-block-start: 16px; }

/* ---------- 1. Header ---------- */
.s-header-slot { block-size: var(--header-h); }
.s-header { position: relative; z-index: 100; block-size: var(--header-h); background: var(--c-ink); border-block-end: 1px solid var(--c-line); }
.s-header.is-stuck { position: fixed; inset-inline: 0; inset-block-start: 0; animation: s-drop .2s ease-out; }
.admin-bar .s-header.is-stuck { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .s-header.is-stuck { inset-block-start: 46px; } }
@keyframes s-drop { from { transform: translateY(-100%); } to { transform: none; } }
.s-header__in { block-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.s-logo { display: inline-flex; align-items: center; flex: none; min-block-size: 44px; }
.s-logo__img { block-size: 48px; inline-size: auto; }
.s-logo--footer .s-logo__img { block-size: 72px; }

.s-nav__list { display: flex; align-items: center; gap: 4px; }
.s-nav__item { position: relative; }
.s-nav__link {
	display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding-inline: 12px;
	background: none; border: 0; color: var(--c-sand); font-size: .9375rem; text-decoration: none; white-space: nowrap;
}
.s-nav__link:hover, .s-nav__link[aria-current], .s-nav__item.is-current > .s-nav__link { color: var(--c-gold); }
.s-nav__chev { transition: transform .15s; }
.s-nav__btn[aria-expanded="true"] .s-nav__chev { transform: rotate(180deg); }
.s-nav__sub {
	position: absolute; inset-inline-start: 0; inset-block-start: 100%; min-inline-size: 220px; z-index: 110;
	background: var(--c-charcoal); border: 1px solid var(--c-line); box-shadow: var(--shadow-drop); padding-block: 8px;
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.s-nav__btn[aria-expanded="true"] + .s-nav__sub,
html:not(.js) .s-nav__item:hover > .s-nav__sub,
html:not(.js) .s-nav__item:focus-within > .s-nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.s-nav__sub a { display: block; padding: 11px 18px; text-decoration: none; color: var(--c-sand); font-size: .9375rem; }
.s-nav__sub a:hover, .s-nav__sub a[aria-current] { color: var(--c-gold); background: var(--c-ink); }

.s-header__end { display: flex; align-items: center; gap: 18px; }
.s-header__cta { padding: 11px 20px; font-size: .875rem; }
.s-header__cta-icon, .s-burger { display: none; }

.s-lang ul { display: flex; align-items: center; gap: 0; font-size: .875rem; }
.s-lang li + li::before { content: "·"; color: var(--c-sep); padding-inline: 8px; }
.s-lang a { text-decoration: none; color: var(--c-sand); display: inline-block; padding-block: 12px; }
.s-lang a:hover { color: var(--c-gold); }
.s-lang a.is-current { color: var(--c-gold); font-weight: 700; }

@media (max-width: 1100px) { .s-nav__link { padding-inline: 8px; } .s-header__end { gap: 12px; } }
@media (max-width: 899px) {
	.s-nav, .s-lang--header, .s-header__cta { display: none; }
	.s-header__in { gap: 12px; }
	.s-header__cta-icon, .s-burger {
		display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px;
		border: 0; background: none; color: var(--c-sand);
	}
	.s-header__cta-icon { background: var(--c-gold); color: var(--c-ink); }
	.s-header__cta-icon:hover { color: var(--c-ink); }
	.s-logo__img { block-size: 40px; }
}

/* Mobile drawer */
.s-drawer {
	position: fixed; inset: 0; z-index: 200; background: var(--c-ink); color: var(--c-sand);
	display: flex; flex-direction: column; overflow-y: auto; padding: 12px var(--gutter) 24px;
}
.s-drawer__top { display: flex; align-items: center; justify-content: space-between; border-block-end: 1px solid var(--c-line); padding-block-end: 8px; }
.s-drawer__close { inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--c-sand); }
.s-drawer__nav { flex: 1; }
.s-drawer__nav > ul > li { border-block-end: 1px solid var(--c-line); }
.s-drawer__btn, .s-drawer__link {
	display: flex; align-items: center; justify-content: space-between; inline-size: 100%; min-block-size: 56px;
	background: none; border: 0; padding: 0; color: var(--c-sand); font-size: 1.125rem; font-weight: 600; text-decoration: none; text-align: start;
}
.s-drawer__btn[aria-expanded="true"] .s-icon { transform: rotate(180deg); }
.s-drawer__sub { padding-block-end: 12px; }
.s-drawer__sub a { display: block; padding: 10px 16px; text-decoration: none; color: var(--c-body-dark); }
.s-drawer__sub a:hover { color: var(--c-gold); }
.s-drawer__bottom { display: grid; gap: 12px; padding-block-start: 24px; }

/* ---------- 3. Hero ---------- */
.s-hero__in { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-block: 64px 48px; }
.s-hero__copy { flex: 1 1 500px; min-inline-size: 0; display: flex; flex-direction: column; gap: 26px; }
.s-hero__collage { flex: 1 1 460px; min-inline-size: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.s-hero__img { inline-size: 100%; object-fit: cover; }
.s-hero__img--1 { block-size: 300px; }
.s-hero__img--2 { block-size: 420px; }
.s-hero__img--3 { block-size: 340px; }
/* Whole rug (no crop) inside the slot, on the dark brand ground with a soft light in the centre */
.s-hero__collage--full .s-hero__img { block-size: auto; aspect-ratio: 2 / 3; object-fit: contain; padding: 10px; background: radial-gradient(ellipse at 50% 45%, #2C3135 0%, #1D2124 60%, var(--c-ink) 100%); }
.s-hero__collage--full .s-hero__img--2 { margin-block-end: 64px; }
.s-hero__collage--full .s-hero__img--3 { margin-block-end: 24px; }
@media (max-width: 899px) { .s-hero__collage--full .s-hero__img--2 { margin-block-end: 36px; } .s-hero__collage--full .s-hero__img--3 { margin-block-end: 14px; } }
@media (max-width: 599px) {
	.s-hero__in { padding-block: 40px 32px; gap: 32px; }
	.s-hero__copy, .s-hero__collage { flex-basis: 100%; }
	.s-hero__img--1 { block-size: 180px; } .s-hero__img--2 { block-size: 250px; } .s-hero__img--3 { block-size: 205px; }
}

/* ---------- 4. Quick quote ---------- */
.s-quick { padding-block-end: 72px; }
.s-quick__form { background: var(--c-sand); color: var(--c-charcoal); padding: 24px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; --focus: var(--c-charcoal); }
.s-quick__title { flex: 1 1 100%; font-weight: 700; font-size: 1.125rem; }
.s-quick__form .s-field { flex: 1 1 180px; }
.s-quick__form .s-quick__f--product { flex-basis: 260px; }
.s-quick__form .s-btn { flex: 0 0 auto; }
@media (max-width: 599px) { .s-quick__form .s-btn { flex: 1 1 100%; } }

/* ---------- 18. Form fields ---------- */
.s-field { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; border: 0; padding: 0; margin: 0; }
.s-field > label, .s-field > legend { font-size: .8125rem; font-weight: 600; padding: 0; }
.s-field input:not([type="checkbox"]):not([type="radio"]), .s-field select, .s-field textarea {
	inline-size: 100%; min-block-size: 48px; padding: 12px; border: 1px solid var(--c-field); border-radius: 0;
	background: var(--c-white); color: var(--c-charcoal); font-weight: 400; line-height: 1.4;
}
.s-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .s-field select { block-size: 48px; }
.s-field select { appearance: none; padding-inline-end: 40px; background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323272B' stroke-width='2.25'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; }
[dir="rtl"] .s-field select { background-position: left 12px center; }
.s-field input[type="file"] { padding: 8px; }
.s-field input[type="file"]::file-selector-button { margin-inline-end: 12px; padding: 8px 14px; border: 0; background: var(--c-charcoal); color: var(--c-sand); font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer; }
.s-field input:focus-visible, .s-field select:focus-visible, .s-field textarea:focus-visible { outline: 2px solid var(--c-charcoal); outline-offset: 0; border-color: var(--c-charcoal); }
.s-field.is-error input:not([type="checkbox"]):not([type="radio"]), .s-field.is-error select, .s-field.is-error textarea { border-color: var(--c-clay); border-width: 2px; padding: 11px; }
.s-field__error { color: var(--c-clay); font-size: .8125rem; font-weight: 600; }
.s-req { color: var(--c-clay); margin-inline-start: 2px; }
.s-form--full { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px 20px; padding-block: 8px 24px; }
.s-field--wide { grid-column: 1 / -1; }
.s-options { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.s-check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: .9375rem; min-block-size: 44px; padding-block: 10px; cursor: pointer; }
.s-check input { inline-size: 20px; block-size: 20px; margin: 2px 0 0; accent-color: var(--c-turquoise); flex: none; }
.s-success { display: flex; gap: 14px; align-items: flex-start; background: var(--c-white); border: 1px solid var(--c-paper-line); border-inline-start: 4px solid var(--c-turquoise); padding: 18px 20px; color: var(--c-charcoal); }
.s-success .s-icon { color: var(--c-turquoise); }
.s-success__title { font-weight: 700; }
.s-formdemo { padding-block: 32px; }
/* Lead forms (Phase 4): honeypot off-screen, error summary, Turnstile slot */
.s-hp { position: absolute !important; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.s-form-alert { grid-column: 1 / -1; flex: 1 1 100%; display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; background: var(--c-white); color: var(--c-charcoal); border: 1px solid var(--c-clay); border-inline-start-width: 4px; font-weight: 600; font-size: .9375rem; }
.s-form-alert .s-icon { color: var(--c-clay); flex: none; margin-block-start: 2px; }
.s-form-alert:focus { outline: 2px solid var(--c-charcoal); outline-offset: 2px; }
.s-turnstile { grid-column: 1 / -1; flex: 1 1 100%; min-block-size: 0; }
.s-turnstile:empty { display: none; }
.s-quick__form .s-field { align-self: flex-start; }
.s-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ---------- 5. Stats strip ---------- */
.s-stats { border-block: 1px solid var(--c-line); }
.s-stats__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; padding-block: 26px; }
.s-stats dt { font-size: .8125rem; color: var(--c-muted); }
.s-stats dd { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }

/* ---------- 6. Line cards ---------- */
.s-lines__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px; padding-block: 80px; }
.s-line-card { display: flex; min-block-size: 360px; background: var(--c-charcoal); text-decoration: none; color: var(--c-sand); }
.s-line-card:hover { color: var(--c-sand); }
.s-line-card:hover .s-textlink { color: var(--c-gold); }
.s-line-card__img { inline-size: 42%; block-size: auto; object-fit: cover; flex: none; }
.s-line-card__body { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.s-line-card__top { display: flex; flex-direction: column; gap: 10px; }
.s-line-card__top .s-eyebrow { letter-spacing: calc(var(--tracking-eyebrow) * .6); }
.s-line-card__title { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 2.125rem; line-height: 1.15; }
.s-line-card__desc { font-size: .9375rem; line-height: 1.6; color: var(--c-body-dark); }
@media (max-width: 519px) {
	.s-line-card { flex-direction: column; min-block-size: 0; }
	.s-line-card__img { inline-size: 100%; block-size: 240px; }
}

/* ---------- 7. Wide-width + seam diagram ---------- */
.s-wide__in { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-block: var(--section-y); }
.s-wide__copy { flex: 1 1 420px; min-inline-size: 0; display: flex; flex-direction: column; gap: 20px; }
.s-wide .s-h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: var(--lh-h); }
.s-checks { display: flex; flex-direction: column; gap: 10px; }
.s-checks li { display: flex; gap: 10px; align-items: flex-start; }
.s-checks .s-icon { color: var(--c-turquoise); margin-block-start: .2em; }
.s-seam { flex: 1 1 480px; min-inline-size: 0; background: var(--c-white); border: 1px solid var(--c-paper-line); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.s-seam__title { font-size: .875rem; font-weight: 700; }
.s-seam__row { display: flex; flex-direction: column; gap: 6px; }
.s-seam__label, .s-seam__note { font-size: .8125rem; color: #4A4E53; }
.s-seam__note { font-size: .75rem; }
.s-seam__bar { display: flex; block-size: 56px; border: 2px solid var(--c-charcoal); }
.s-seam__strip { background: var(--c-stone-2); }
.s-seam__strip + .s-seam__strip { border-left: 3px dashed var(--c-sand); } /* physical on purpose: diagram is never mirrored */
.s-seam__strip--clay { background: var(--c-clay); }
.s-seam__strip--5 { flex: 5; } .s-seam__strip--3 { flex: 3; } .s-seam__strip--1 { flex: 1; }
@media (max-width: 599px) { .s-seam { padding: 20px; } .s-wide__in { gap: 32px; } }

/* ---------- 8. Catalog + 9. Product card ---------- */
.s-catalog > .s-container, .s-blog > .s-container { display: flex; flex-direction: column; gap: 28px; padding-block: 80px; }
.s-catalog__count { font-size: var(--fs-small); color: var(--c-muted); margin-block-start: -12px; }
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-chip { display: inline-flex; align-items: center; min-block-size: 44px; padding: 10px 16px; border: 1px solid var(--c-sep); font-size: .875rem; text-decoration: none; color: var(--c-sand); }
.s-chip:hover { border-color: var(--c-gold); color: var(--c-gold); }
.s-chip.is-active { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }
.s-pcard { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--c-sand); }
.s-pcard:hover { color: var(--c-sand); }
.s-pcard:hover .s-pcard__name { color: var(--c-gold); }
.s-pcard__img { inline-size: 100%; block-size: 300px; object-fit: cover; }
.s-pcard__meta { display: flex; justify-content: space-between; gap: 8px; font-size: .8125rem; }
.s-pcard__line { color: var(--c-muted); }
.s-pcard__name { font-size: 1rem; font-weight: 600; }
@media (max-width: 599px) { .s-pcard__img { block-size: 220px; } .s-pcard__meta { flex-direction: column; gap: 2px; } }
.s-img-missing { display: block; inline-size: 100%; block-size: 300px; background: repeating-linear-gradient(45deg, var(--c-charcoal) 0 10px, var(--c-line) 10px 20px); }

/* ---------- 10. Process steps ---------- */
.s-process__in { display: flex; flex-wrap: wrap; gap: 48px; padding-block: 80px; }
.s-process__copy { flex: 1 1 360px; min-inline-size: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.s-steps { flex: 1 1 560px; min-inline-size: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.s-steps__item { background: var(--c-ink); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.s-steps__n { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 2rem; line-height: 1; color: var(--c-gold); }
.s-steps__t { font-size: 1.125rem; font-weight: 700; }
.s-steps__d { font-size: .875rem; line-height: 1.6; color: var(--c-muted); }
@media (max-width: 599px) { .s-steps { grid-template-columns: 1fr; } }

/* ---------- 11. Blog card ---------- */
.s-bcard { display: flex; flex-direction: column; gap: 14px; background: var(--c-ink); border: 1px solid var(--c-line); text-decoration: none; color: var(--c-sand); }
.s-bcard:hover { color: var(--c-sand); border-color: var(--c-gold); }
.s-bcard__img { inline-size: 100%; block-size: 200px; object-fit: cover; }
.s-bcard__body { padding: 0 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.s-bcard__title { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.s-bcard__meta { font-size: .875rem; color: var(--c-muted); }

/* ---------- 12. CTA band ---------- */
.s-band__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-block: 56px; }
.s-band__title { font-family: var(--f-display); font-weight: var(--display-weight); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.2; max-width: 640px; }

/* ---------- 13. Spec table ---------- */
.s-spec { display: grid; border-block-start: 1px solid var(--c-line); }
.s-spec__row { display: grid; grid-template-columns: 140px 1fr; border-block-end: 1px solid var(--c-line); }
.s-spec dt { padding-block: 12px; color: var(--c-muted); }
.s-spec dd { padding-block: 12px; font-weight: 600; }

/* ---------- 14. FAQ ---------- */
.s-faq__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 32px 56px; padding-block: var(--section-y); align-items: start; }
.s-faq__list { border-block-start: 1px solid var(--c-paper-line); }
.s-faq__item { border-block-end: 1px solid var(--c-paper-line); }
.s-faq__q { font: inherit; }
.s-faq__q button { display: flex; inline-size: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; min-block-size: 44px; background: none; border: 0; text-align: start; font-size: 1.0625rem; font-weight: 700; color: var(--c-charcoal); }
.s-faq__q button:hover { color: var(--c-clay); }
.s-faq__q .s-icon { transition: transform .15s; }
.s-faq__q button[aria-expanded="true"] .s-icon { transform: rotate(180deg); }
.s-faq__a { padding-block-end: 18px; color: var(--c-body-light); max-width: 60ch; }

/* ---------- 15. Breadcrumbs ---------- */
.s-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .875rem; color: var(--c-muted); }
.s-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.s-crumbs a { color: var(--c-muted); display: inline-block; padding-block: 12px; }
.s-crumbs a:hover { color: var(--c-gold); }
.s-crumbs [aria-current] { color: var(--c-sand); }
.s-crumbs__sep { color: var(--c-sep); }

/* ---------- 16. Footer ---------- */
.s-footer { background: var(--c-ink); border-block-start: 1px solid var(--c-line); color: var(--c-muted); font-size: .875rem; }
.s-footer > .s-container { display: flex; flex-direction: column; gap: 40px; padding-block: 56px 28px; }
.s-footer__brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.s-footer__slogan { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 1.25rem; color: var(--c-sand); }
.s-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 32px; }
.s-footer__title { font-size: .8125rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: var(--case-eyebrow); color: var(--c-gold); margin-block-end: 8px; }
.s-footer__col a { color: var(--c-body-dark); text-decoration: none; display: inline-block; padding-block: 8px; }
.s-footer__col a:hover { color: var(--c-gold); }
.s-footer__contact li { display: flex; align-items: center; gap: 10px; min-block-size: 40px; color: var(--c-body-dark); }
.s-footer__contact .s-icon { color: var(--c-gold); }
.s-footer__ship { margin-block-start: 12px; color: var(--c-muted); font-size: .8125rem; }
.s-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; border-block-start: 1px solid var(--c-line); padding-block-start: 20px; }
.s-footer__legal { display: flex; gap: 20px; }
.s-footer__legal a { color: var(--c-muted); display: inline-block; padding-block: 12px; }
.s-footer__legal a:hover { color: var(--c-gold); }
.s-footer__linkbtn { background: none; border: 0; padding: 12px 0; font: inherit; color: var(--c-muted); cursor: pointer; }
.s-footer__linkbtn:hover { color: var(--c-gold); }

/* Cookie consent (GA4 only; fixed, so it never shifts the layout) */
.s-consent { position: fixed; inset: auto 0 0; z-index: 60; background: var(--c-charcoal); color: var(--c-sand); border-top: 1px solid var(--c-line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.s-consent__inner { max-width: 1200px; margin: 0 auto; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.s-consent__text { flex: 1 1 420px; margin: 0; font-size: .9375rem; line-height: 1.5; }
.s-consent__text a { color: var(--c-gold); }
.s-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.s-consent .s-btn { padding-block: 10px; }

/* ---------- 17. Floating WhatsApp ---------- */
.s-wa-float {
	position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 90;
	inline-size: 56px; block-size: 56px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--c-whatsapp); color: var(--c-ink); /* ink glyph: ~9:1 on #25D366 (white would be 2:1) */
}
.s-wa-float:hover { background: var(--c-whatsapp-hover); color: var(--c-ink); }
@media (max-width: 599px) { .s-wa-float { inset-inline-end: 16px; inset-block-end: 16px; } }

/* ---------- 19. Notice + placeholder badge (staging only) ---------- */
.s-ph { background: transparent; color: inherit; outline: 1px dashed var(--c-gold); outline-offset: 1px; padding: 0 3px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; }
.s-section--sand .s-ph, .s-seam .s-ph, .s-success .s-ph { outline-color: var(--c-clay); }
.s-notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--c-gold); border-inline-start-width: 4px; background: var(--c-charcoal); color: var(--c-sand); font-size: .9375rem; }
.s-notice .s-icon { color: var(--c-gold); margin-block-start: 2px; }
.s-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: .75rem; font-weight: 700; border: 1px solid currentColor; }
.s-badge--review { color: var(--c-gold); }
.s-badge--staging { color: var(--c-ink); background: var(--c-gold); border-color: var(--c-gold); }

/* ---------- In-article CTA ---------- */
.s-artcta { background: var(--c-charcoal); color: var(--c-sand); padding: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.s-artcta__title { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 1.375rem; }
.s-artcta__text { font-size: .9375rem; color: var(--c-body-dark); }
.s-artcta .s-btn { padding: 12px 18px; font-size: .9375rem; }

/* ---------- Phase 3: inner pages ---------- */
.s-muted { color: var(--c-muted); }
.s-gold-link { color: var(--c-gold); }
.s-notice--sm { padding: 10px 14px; font-size: .875rem; }
.s-notice--light { background: var(--c-white); color: var(--c-charcoal); border-color: var(--c-paper-line); border-inline-start-color: var(--c-clay); }
.s-notice--light .s-icon { color: var(--c-clay); }
/* ---------- Page hero ---------- */
.s-phero__in { display: flex; flex-direction: column; gap: 18px; padding-block: 24px 64px; }
.s-phero__in > .s-crumbs { margin-block-end: 8px; }
.s-phero .s-lead { max-width: 46em; }
.s-specchips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-specchips li { border: 1px solid var(--c-sep); padding: 8px 14px; font-size: .875rem; color: var(--c-body-dark); }
/* ---------- Phase 3: inner pages (continued) ---------- */
.s-why__in { display: flex; flex-direction: column; gap: 20px; padding-block: 0 var(--section-y); max-width: 820px; }
.s-prose { color: var(--c-body-dark); font-size: var(--fs-body); line-height: 1.75; }
.s-prose > * + * { margin-block-start: 1em; }
.s-prose h2 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: clamp(1.625rem, 1.4rem + .8vw, 2rem); line-height: var(--lh-h); color: var(--c-sand); margin-block-start: 1.6em; }
.s-prose h3 { font-size: 1.25rem; font-weight: 700; color: var(--c-sand); margin-block-start: 1.4em; }
.s-prose ul, .s-prose ol { padding-inline-start: 1.4em; }
.s-prose a { color: var(--c-gold); }
.s-prose table { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; }
.s-prose th, .s-prose td { border-block-end: 1px solid var(--c-line); padding: 10px 12px; text-align: start; }
.s-prose figcaption { font-size: .8125rem; color: var(--c-muted); margin-block-start: 6px; }
/* Line-page copy (Phase 5): first H2 sits at the top; the spec table inside the copy keeps its own rhythm */
.s-linecopy .s-why__in { padding-block-start: 8px; }
.s-linecopy .s-prose > h2:first-child { margin-block-start: 0; }
.s-prose .s-spec { margin-block: 4px 8px; font-size: .9375rem; }
.s-prose .s-spec__row { grid-template-columns: 180px 1fr; }
@media (max-width: 599px) { .s-prose .s-spec__row { grid-template-columns: 130px 1fr; } }
.s-prose ol > li + li, .s-prose ul > li + li { margin-block-start: .35em; }
.s-wide--figure .s-wide__in { justify-content: center; }
.s-wide--teaser .s-wide__in { padding-block: 56px; }
.s-wide--teaser .s-wide__copy { max-width: 720px; }
.s-center { text-align: center; padding-block: 8px var(--section-y); }
.s-prose--light { color: var(--c-body-light); }
.s-prose--light h2, .s-prose--light h3 { color: var(--c-charcoal); }
.s-prose--light a { color: var(--c-turquoise); }
.s-prose--light th, .s-prose--light td { border-color: var(--c-paper-line); }
.s-linespec__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 32px 56px; padding-block: var(--section-y); align-items: start; }
.s-spec--light { border-color: var(--c-paper-line); }
.s-spec--light .s-spec__row { border-color: var(--c-paper-line); }
.s-spec--light dt { color: #4A4E53; }
@media (max-width: 599px) { .s-spec__row { grid-template-columns: 120px 1fr; } }

/* Catalog filters, empty state, pagination */
.s-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; padding: 20px; background: var(--c-ink); border: 1px solid var(--c-line); --focus: var(--c-gold); }
.s-filters .s-field { flex: 1 1 180px; }
.s-filters .s-field > label { color: var(--c-muted); }
.s-filters__wide { color: var(--c-sand); }
.s-filters__actions { display: flex; align-items: center; gap: 16px; }
.s-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; border: 1px dashed var(--c-sep); color: var(--c-body-dark); }
.s-pager ul { display: flex; flex-wrap: wrap; gap: 6px; }
.s-pager a, .s-pager span { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; padding-inline: 10px; border: 1px solid var(--c-sep); text-decoration: none; color: var(--c-sand); }
.s-pager a:hover { border-color: var(--c-gold); color: var(--c-gold); }
.s-pager [aria-current] { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); font-weight: 700; }
.s-pager__prev { transform: scaleX(-1); }
[dir="rtl"] .s-pager__prev { transform: none; }

/* ---------- Product page ---------- */
.s-pdp__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-block: 8px 64px; }
.s-pdp__info { display: flex; flex-direction: column; gap: 22px; }
.s-pdp__title { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); }
.s-pdp__btns .s-btn { flex: 1 1 200px; }
.s-pdp__more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 40px; padding-block: 64px; }
.s-pdp__more > div { display: flex; flex-direction: column; gap: 12px; }
.s-similar { display: flex; flex-direction: column; gap: 28px; padding-block: 64px; }
@media (max-width: 899px) { .s-pdp__in { grid-template-columns: 1fr; gap: 28px; } }
.s-gallery { display: flex; gap: 14px; }
.s-gallery__thumbs { display: flex; flex-direction: column; gap: 10px; flex: 0 0 84px; }
.s-gallery__thumb { padding: 0; border: 2px solid transparent; background: none; }
.s-gallery__thumb[aria-pressed="true"] { border-color: var(--c-gold); }
.s-gallery__thumb img { inline-size: 80px; block-size: 100px; object-fit: cover; }
.s-gallery__main { flex: 1; min-inline-size: 0; display: block; cursor: zoom-in; }
.s-gallery__img { inline-size: 100%; block-size: min(640px, 80vh); object-fit: contain; background: var(--c-panel); }
.s-gallery__missing { block-size: 480px; }
@media (max-width: 599px) {
	.s-gallery { flex-direction: column-reverse; }
	.s-gallery__thumbs { flex-direction: row; flex-basis: auto; overflow-x: auto; }
	.s-gallery__thumb img { inline-size: 64px; block-size: 80px; }
	.s-gallery__img { block-size: auto; aspect-ratio: 3 / 4; }
}
.s-zoom { padding: 0; border: 0; background: transparent; max-inline-size: 96vw; max-block-size: 96vh; }
.s-zoom::backdrop { background: rgba(10, 12, 14, .92); }
.s-zoom__img { max-inline-size: 96vw; max-block-size: 92vh; object-fit: contain; }
.s-zoom__close { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-ink); color: var(--c-sand); border: 1px solid var(--c-line); }

/* Design renders, colorways */
.s-pcard__media, .s-gallery__main { position: relative; display: block; }
.s-preview-badge { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; padding: 3px 8px; background: rgba(22, 25, 28, .82); color: var(--c-sand); font-size: .6875rem; font-weight: 600; letter-spacing: .02em; pointer-events: none; }
.s-preview-badge--lg { font-size: .8125rem; padding: 5px 10px; }
.s-gallery-wrap { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; }
.s-gallery__note { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--c-body-dark); }
.s-gallery__note .s-icon { color: var(--c-whatsapp); }
.s-gallery__note a { color: var(--c-sand); }
.s-colorways { display: flex; flex-direction: column; gap: 8px; }
.s-colorways__label { font-size: .875rem; font-weight: 600; }
.s-colorways__list { display: flex; flex-wrap: wrap; gap: 10px; }
.s-swatch { inline-size: 44px; block-size: 44px; padding: 4px; border: 1px solid var(--c-sep); background: none; }
.s-swatch[aria-pressed="true"] { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.s-swatch__chip { display: block; inline-size: 100%; block-size: 100%; }

/* ---------- Phase 3: inner pages (blog, article, rest) ---------- */
/* Blog index + article */
.s-feat { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center; text-decoration: none; color: var(--c-sand); padding-block: 8px 48px; }
.s-feat:hover .s-feat__title { color: var(--c-gold); }
.s-feat__img { inline-size: 100%; block-size: 380px; object-fit: cover; }
.s-feat__body { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 899px) { .s-feat { grid-template-columns: 1fr; } .s-feat__img { block-size: 240px; } }
.s-article__head { display: flex; flex-direction: column; gap: 18px; padding-block: 24px 56px; max-width: 880px; }
.s-article__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .875rem; color: var(--c-muted); }
.s-article__hero img { inline-size: 100%; block-size: clamp(220px, 32vw, 420px); object-fit: cover; margin-block-start: -24px; }
.s-article__in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px; padding-block: 56px; }
.s-toc { flex: 1 1 220px; max-width: 260px; position: sticky; inset-block-start: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 10px; font-size: .9375rem; }
.s-toc__title { font-size: .75rem; font-weight: 700; letter-spacing: calc(var(--tracking-eyebrow) * .6); text-transform: var(--case-eyebrow); color: #4A4E53; }
.s-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.s-toc a { color: var(--c-charcoal); }
.s-article__body { flex: 999 1 560px; min-inline-size: 0; max-width: 720px; font-size: 1.125rem; }
@media (max-width: 899px) { .s-toc { position: static; max-width: none; } }

/* Contact, quote, legal, payment */
.s-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; padding-block: 8px var(--section-y); }
.s-contact__card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; background: var(--c-charcoal); }
.s-contact__card--wa { border-block-start: 3px solid var(--c-whatsapp); }
.s-contact__card a:not(.s-btn) { color: var(--c-sand); } /* buttons keep their own colours (gold button + sand text failed contrast) */
.s-contact__card address { font-style: normal; }
.s-quote { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; padding-block: var(--section-y); align-items: start; }
.s-quote__form { display: flex; flex-direction: column; gap: 16px; }
.s-quote__aside { display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--c-white); border: 1px solid var(--c-paper-line); }
@media (max-width: 899px) { .s-quote { grid-template-columns: 1fr; } }
.s-legal { display: flex; flex-direction: column; gap: 22px; padding-block: var(--section-y); max-width: 820px; }
.s-pay__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 32px 56px; padding-block: var(--section-y); align-items: start; }
.s-pay__body { display: flex; flex-direction: column; gap: 18px; }
.s-line-card--text { min-block-size: 220px; }

/* ---------- Block editor styles (patterns) ---------- */
.wp-block-button.is-style-sialk-primary .wp-block-button__link { background: var(--c-gold); color: var(--c-ink); border-radius: 0; font-weight: 700; padding: 16px 26px; }
.wp-block-button.is-style-sialk-secondary .wp-block-button__link { background: transparent; color: currentColor; border: 1px solid currentColor; border-radius: 0; font-weight: 600; padding: 15px 26px; }
.wp-block-button.is-style-sialk-dark .wp-block-button__link { background: var(--c-charcoal); color: var(--c-sand); border-radius: 0; font-weight: 700; padding: 16px 26px; }
.wp-block-list.is-style-sialk-checks { list-style: none; padding-inline-start: 0; }
.wp-block-list.is-style-sialk-checks li { position: relative; padding-inline-start: 30px; margin-block: 10px; }
.wp-block-list.is-style-sialk-checks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .3em; inline-size: 20px; block-size: 20px; background: var(--c-turquoise); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.wp-block-group.is-style-sialk-dark { background: var(--c-ink); color: var(--c-sand); padding: var(--section-y) var(--gutter); }
.wp-block-group.is-style-sialk-panel { background: var(--c-panel); color: var(--c-sand); padding: var(--section-y) var(--gutter); }
.wp-block-group.is-style-sialk-sand { background: var(--c-sand); color: var(--c-charcoal); padding: var(--section-y) var(--gutter); }
.wp-block-group.is-style-sialk-gold { background: var(--c-gold); color: var(--c-ink); padding: 56px var(--gutter); }
.wp-block-group[class*="is-style-sialk-"] > * { max-width: var(--container); margin-inline: auto; }
.wp-block-heading { font-family: var(--f-display); font-weight: var(--display-weight); line-height: var(--lh-h); }
.editor-styles-wrapper { background: var(--c-ink); color: var(--c-sand); font-family: var(--f-body); }

/* ---------- Style guide page (staging review) ---------- */
.sg-label { background: var(--c-charcoal); border-block: 1px solid var(--c-line); color: var(--c-muted); font-size: .8125rem; }
.sg-label .s-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 10px; }
.sg-label strong { color: var(--c-gold); font-weight: 700; letter-spacing: .06em; }
.sg-block { padding-block: 48px; }
.sg-intro { padding-block: 40px; display: flex; flex-direction: column; gap: 18px; }
.sg-langs { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 14px; }
.sg-swatch { border: 1px solid var(--c-line); }
.sg-swatch__chip { block-size: 72px; }
.sg-swatch__meta { padding: 10px 12px; font-size: .8125rem; display: flex; flex-direction: column; gap: 2px; }
.sg-swatch__meta code { color: var(--c-muted); font-size: .75rem; }
.sg-type { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 24px; }
.sg-type__col { border: 1px solid var(--c-line); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sg-type__tag { font-size: .75rem; color: var(--c-muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.sg-type .s-h1 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); }
.sg-type .s-h2 { font-size: 1.75rem; }
.sg-row { display: flex; flex-wrap: wrap; align-items: stretch; max-width: var(--container); margin-inline: auto; padding-block: 32px; }
.sg-panel { padding: 32px; flex: 1 1 340px; min-inline-size: 0; display: flex; flex-direction: column; gap: 16px; }
.sg-icons { display: flex; flex-wrap: wrap; gap: 24px; color: var(--c-sand); }
.sg-icons span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .75rem; color: var(--c-muted); }
.sg-brand { display: flex; flex-direction: column; gap: 28px; }
.sg-brand__cap { font-size: .875rem; color: var(--c-muted); margin-block-end: 8px; }
.sg-brand__cap strong { color: var(--c-sand); }
.sg-brand__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; block-size: 72px; padding-inline: 24px; border: 1px solid var(--c-line); max-inline-size: 760px; }
.sg-brand__icons { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px; }
.sg-brand__icons figure { display: flex; flex-direction: column; gap: 8px; font-size: .75rem; color: var(--c-muted); }
.sg-brand__icons img { border: 1px solid var(--c-line); }
.sg-product { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 699px) { .sg-product { grid-template-columns: 1fr; } }

/* ---------- Phase 6: media (videos, rooms, gallery video) ---------- */
.s-videos, .s-rooms { padding-block: var(--section-y); }
.s-videos__title, .s-rooms__title { margin-block-end: 28px; }
.s-videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.s-videos--large .s-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-videos--single .s-videos__grid { grid-template-columns: minmax(0, 720px); }
@media (max-width: 899px) { .s-videos__grid, .s-videos--large .s-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 599px) { .s-videos--large .s-videos__grid, .s-videos--single .s-videos__grid { grid-template-columns: 1fr; } }
.s-vtile { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.s-vtile__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-panel); }
.s-videos--large .s-vtile__media, .s-videos--single .s-vtile__media { aspect-ratio: 16 / 10; }
.s-vtile__poster, .s-vtile__loop { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.s-vtile__loop { opacity: 0; transition: opacity .3s; }
.s-vtile__loop[src] { opacity: 1; }
.s-vtile__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.s-vtile__icon { inline-size: 64px; block-size: 64px; border-radius: 50%; background: rgba(22, 25, 28, .72); border: 2px solid var(--c-sand); position: relative; transition: background-color .15s, transform .15s; }
.s-vtile__icon::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 54%; translate: -50% -50%; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--c-sand); }
[dir="rtl"] .s-vtile__icon::after { translate: -50% -50%; inset-inline-start: auto; left: 54%; }
.s-vtile__play:hover .s-vtile__icon, .s-vtile__play:focus-visible .s-vtile__icon { background: var(--c-gold); transform: scale(1.06); }
.s-vtile__cap { font-size: var(--fs-small); color: inherit; }
.s-vtile__cap a { text-decoration: none; color: inherit; }
.s-vtile__cap a:hover { color: var(--c-clay); }
.s-section--ink .s-vtile__cap a:hover { color: var(--c-gold); }
.s-vtile__cap .s-code { margin-inline-end: 6px; }
.s-section--sand .s-vtile__cap .s-code { color: var(--c-clay); } /* gold on sand fails contrast (Lighthouse) */
.s-videos__ask { display: flex; align-items: center; gap: 10px; margin-block-start: 24px; font-weight: 600; }
.s-videos__ask a { color: inherit; }
.s-videos__ask .s-icon { color: var(--c-turquoise); }
.s-videos__more, .s-rooms__more { margin-block-start: 16px; }
.s-vbox { padding: 0; border: 0; background: var(--c-ink); color: var(--c-sand); inline-size: min(96vw, 1100px); max-block-size: 96vh; }
.s-vbox::backdrop { background: rgba(10, 12, 14, .88); }
.s-vbox video { display: block; inline-size: 100%; max-block-size: calc(96vh - 56px); background: #000; }
.s-vbox__title { padding: 12px 16px; font-size: var(--fs-small); margin: 0; }
.s-vbox__close { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 2; inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; background: rgba(22, 25, 28, .8); color: var(--c-sand); border: 0; }
.s-rooms__grid { columns: 2 320px; column-gap: 16px; } /* 2 columns while there are few real room photos (4 today) */
.s-room { margin: 0 0 16px; break-inside: avoid; position: relative; }
.s-room__img { inline-size: 100%; block-size: auto; display: block; }
.s-room__cap { position: absolute; inset-block-end: 8px; inset-inline-start: 8px; padding: 3px 8px; background: rgba(22, 25, 28, .82); font-size: .75rem; }
.s-room__cap a { color: var(--c-sand); text-decoration: none; }
.s-rooms--home .s-rooms__grid { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.s-rooms--home .s-room { margin: 0; }
.s-rooms--home .s-room__img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 899px) { .s-rooms--home .s-rooms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s-gallery__thumb { position: relative; }
.s-gallery__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.s-gallery__play::before { content: ""; inline-size: 30px; block-size: 30px; border-radius: 50%; background: rgba(22, 25, 28, .75); }
.s-gallery__play::after { content: ""; position: absolute; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--c-sand); margin-inline-start: 3px; }
.s-gallery__video { flex: 1; min-inline-size: 0; inline-size: 100%; block-size: min(640px, 80vh); background: #000; object-fit: contain; }
@media (max-width: 599px) { .s-gallery__video { block-size: auto; aspect-ratio: 3 / 4; } }
.s-small { font-size: var(--fs-small); }

/* ---------- Phase 6: landing (large carpets) ---------- */
.s-header--min .s-header__end { display: flex; align-items: center; gap: 12px; }
.s-header .s-lang--min { display: block; } /* the landing has no drawer: the language switch stays visible on phones */
@media (max-width: 599px) { .s-lang--min li + li::before { padding-inline: 5px; } .s-header--min .s-header__end { gap: 8px; } }
.s-btn--wa { background: var(--c-whatsapp); color: var(--c-ink); }
.s-btn--wa:hover { background: var(--c-whatsapp-hover); color: var(--c-ink); }
.s-header--min .s-btn--wa { padding: 10px 16px; min-block-size: 44px; }
@media (max-width: 599px) { .s-header--min .s-btn__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .s-header--min .s-btn--wa { padding: 10px 12px; } .s-header--min .s-logo__img { block-size: 40px; } }
.s-lhero { padding-block: clamp(40px, 3rem + 2vw, 80px); }
.s-lhero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.s-lhero__copy { display: flex; flex-direction: column; gap: 20px; }
.s-lhero__title { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); }
.s-lhero__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-panel); }
@media (max-width: 899px) { .s-lhero__in { grid-template-columns: 1fr; gap: 28px; } }
.s-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; font-size: var(--fs-small); color: var(--c-body-dark); }
.s-trust li { display: flex; gap: 8px; align-items: flex-start; }
.s-trust .s-icon { color: var(--c-gold); flex: none; margin-block-start: .15em; }
@media (max-width: 399px) { .s-trust { grid-template-columns: 1fr; } }
.s-lsizes { padding-block: var(--section-y); }
.s-lsizes__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.s-lsizes__in > div { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 899px) { .s-lsizes__in { grid-template-columns: 1fr; gap: 28px; } }
.s-uses { display: flex; flex-direction: column; gap: 12px; }
.s-uses li { display: flex; gap: 12px; align-items: center; padding-block: 10px; border-block-end: 1px solid var(--c-line); }
.s-uses .s-icon { color: var(--c-gold); flex: none; }
.s-qform { padding-block: var(--section-y); }
.s-qform__in { display: flex; flex-direction: column; gap: 24px; max-inline-size: 900px; }
.s-lcta { border-block-start: 1px solid var(--c-line); }
.s-footer--min .s-footer__minrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: 40px 24px; }
.s-footer--min .s-logo__img { block-size: 48px; }
.s-footer__contact--row { display: flex; flex-wrap: wrap; gap: 4px 24px; }