/*
 * South Street Tablecloth Co. — stable component hooks.
 * Values measured from reference-measurements/*.json (Lovable source).
 * Elementor Global Colors/Fonts drive ordinary widget styling; these
 * classes exist only for the handful of components Elementor's native
 * controls can't accurately reproduce (marquee, numbered rows, filter
 * bar, editorial rule).
 */

:root {
	--sst-ink: #0b0b0b;
	--sst-ink-soft: #2e2e2e;
	--sst-paper: #f5f3f0;
	--sst-paper-warm: #e6e2dd;
	--sst-rule: #d1cdc8;
	--sst-muted: #575552;
	--sst-container: 1600px;
	--sst-pad: 40px;
}

@media (max-width: 1024px) {
	:root { --sst-pad: 24px; }
}

/* Defensive site-wide safety net, found necessary during final
 * site-wide QA: Home measured a genuine (if tiny, ~9px at 1440)
 * horizontal scroll capability — confirmed via an actual
 * window.scrollTo() test, not just a scrollWidth metric — traced via
 * DOM bisection to a small CUMULATIVE contribution from several
 * elements together (no single dominant culprit; the marquee,
 * suspected first, was ruled out by directly hiding it and confirming
 * scrollWidth was unaffected). Rather than chase several sub-pixel
 * flex/grid rounding contributors across the page individually, this
 * clips any stray horizontal overflow at the root — nothing on this
 * site is intentionally horizontally scrollable, so this has no
 * visual effect on correctly-sized content and only guards against
 * accidental scroll capability. */
html, body { overflow-x: hidden; }

/* Elementor's own Theme Builder wrapper elements — stable classes
 * Elementor Pro itself provides (elementor-location-header/footer),
 * not ours, but reliable hooks. The root container we build the
 * Header/Footer from gets Elementor's default 10px all-round padding
 * unless zeroed; confirmed via computed-style inspection (10px inset
 * on every side of the whole header, ~20px of the "too tall" bug). */
.elementor-location-header > .e-con,
.elementor-location-footer > .e-con {
	padding: 0 !important;
	gap: 0 !important; /* Elementor's default column-gap between the
		announcement bar and main header rows — same class of "silent
		default" bug as the padding, ~20px unwanted space between them. */
}

/* Elementor Heading widget fix — GLOBAL, applies site-wide -------------
 * Found during Home QA: our custom classes (e.g. .sst-h1, .sst-h2) are
 * applied to the widget WRAPPER, but the actual visible text is
 * rendered by an inner `.elementor-heading-title` element. When
 * header_size is a real semantic tag (h1/h2/h3/a), Elementor's own
 * `.elementor-size-default` preset sets that inner element's
 * font-size/line-height directly, which — being a direct rule, not
 * inheritance — overrides whatever the wrapper class declares
 * regardless of specificity or !important on the wrapper. (This did
 * NOT surface on the Footer because those headings used
 * header_size:'div', which carries no such preset — but any REAL
 * heading tag hits it, confirmed on Home's h1/h2/h3.) Forcing the
 * inner element to inherit from its wrapper is the general fix: it
 * self-corrects at every breakpoint automatically (no duplicated
 * literal values to keep in sync) and covers every current and future
 * .sst-* heading class without listing them individually. */
.elementor-widget-heading .elementor-heading-title {
	font-size: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
	text-transform: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
}

/* Layout ------------------------------------------------------------- */
.sst-container {
	max-width: var(--sst-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sst-pad);
	padding-right: var(--sst-pad);
}

.sst-section-rule {
	border-bottom: 1px solid var(--sst-rule);
}

/* Announcement bar ----------------------------------------------------
 * Measured: 35px total height (10px padding + 15px line-height, both
 * sides), single line, space-between. Pixel-scanned from
 * 01-home__desktop-1440.png column x=5: bar is rgb(11,11,11) from
 * y=0-34, transitions to paper at y=35.
 */
/*
 * !important below is surgical, not blanket: Elementor emits its own
 * per-element CSS scoped to `.elementor-element-{id}` (specificity
 * 0,2,0), which beats a plain single class like `.sst-announcement`
 * (0,1,0) regardless of stylesheet load order — even for properties
 * never set in the JSON, since Elementor still emits a default via a
 * CSS custom property (e.g. flex-direction defaults to column via
 * `--flex-direction` unless the JSON declares otherwise). Confirmed by
 * A/B: this rule's flex-direction:column example (.sst-wordmark, no
 * !important needed) "worked" only because column happens to already
 * be Elementor's silent default; every row-direction override here
 * needed !important to actually take effect. Restricted to the
 * handful of structural layout properties that fight this default —
 * colors/typography/etc below do not need it.
 */
.sst-announcement {
	background: var(--sst-ink);
	color: var(--sst-paper);
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 10px var(--sst-pad) !important;
	white-space: nowrap;
	font-family: 'Hind', system-ui, sans-serif;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 3px;
	text-transform: uppercase;
	line-height: 15px;
}
/* Force content-based sizing on direct children — without this,
 * Elementor's own per-child flex defaults let one child balloon and
 * squeeze the others (this is what caused the nav to wrap on the
 * first pass). Deterministic CSS, not fighting Elementor's controls. */
.sst-announcement > * { flex: 0 0 auto !important; }
.sst-announcement a { color: inherit; text-decoration: none; opacity: .85; }
.sst-announcement a:hover { text-decoration: underline; opacity: 1; }
/* Elementor wraps a "boxed" inner container's actual children in an
 * extra `.e-con-inner` div (confirmed via computed-style inspection —
 * our two link widgets are children of THAT, not of
 * .sst-announcement-links directly), which has its own default
 * column direction. Targeting both levels reaches the real children
 * regardless of whether that extra wrapper is present; harmless
 * either way since gap only has a visual effect where 2+ children
 * actually exist at that level. */
.sst-announcement-links,
.sst-announcement-links > * {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 32px !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important; /* zero Elementor's default 10px all-round container padding */
	margin: 0 !important;
}
@media (max-width: 600px) {
	/* Reference confirmed: this block (Order Online / phone) shows at
	 * 768px but is entirely absent at 390px — not a fit/overflow issue,
	 * an intentional content-hiding breakpoint in the source. Also
	 * fixes a real bug this surfaced: at 390px without this rule the
	 * combined text forced the whole page to render 547px wide on a
	 * 390px viewport (horizontal overflow). */
	.sst-announcement-links { display: none !important; }
}

/* Header -----------------------------------------------------------------
 * Measured: 111px content height + 1px bottom border = 112px
 * (bar 35px + header 112px = 147px total, matches sections[0].top in
 * reference-measurements/01-home__desktop-1440.json exactly).
 */
.sst-header {
	background: var(--sst-paper);
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	/* 34px top/bottom + ~42px tallest child ≈ 111px measured content
	 * height (button/nav are the tallest children, not the wordmark). */
	padding: 34px var(--sst-pad) !important;
	border-bottom: 1px solid var(--sst-rule);
}
.sst-header > * {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
}

.sst-wordmark,
.sst-wordmark > * {
	display: flex !important;
	flex-direction: column !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important; /* zero Elementor's default 10px all-round container padding */
	margin: 0 !important;
	gap: 2px;
	text-decoration: none;
}
.sst-wordmark .sst-wordmark-primary {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0.08px;
	color: var(--sst-ink);
}
.sst-wordmark .sst-wordmark-secondary {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--sst-muted);
}

/* Nav — target both the widget wrapper and Elementor's own <ul> so we
 * win regardless of which one the wrap/gap actually lands on; nowrap
 * is the fix for the 3-row wrapping bug. */
.sst-nav,
.sst-nav .elementor-nav-menu {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 14px;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	flex: 0 0 auto !important;
}
.sst-nav a {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--sst-ink);
	text-decoration: none;
	white-space: nowrap;
	padding: 4px 0;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.sst-nav a:hover,
.sst-nav a.is-active { border-bottom-color: var(--sst-ink); }

/* Mobile nav — Elementor's nav-menu widget already ships its own
 * show/hide breakpoint logic (the `elementor-nav-menu--dropdown-tablet`
 * class + its own core CSS toggles `.elementor-nav-menu__container`
 * vs `.elementor-menu-toggle` automatically) and its own click/open
 * JS handler — reference-confirmed via rendered DOM inspection, not
 * assumed. We only style appearance here, not behavior. Reference
 * (01-home__tablet-768.png, 01-home__mobile-390.png) shows ONLY the
 * wordmark + a hamburger icon at these widths — no visible nav list,
 * no visible Order Online button (it's presumably reachable inside
 * the opened menu, or intentionally dropped — no open-state
 * screenshot exists in the frozen reference to confirm the exact
 * contents of the expanded panel, so this styles it consistently with
 * the rest of the site rather than inventing an unverified layout). */
.sst-nav .elementor-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--sst-ink);
	cursor: pointer;
	flex: 0 0 auto !important;
}
.sst-nav .elementor-menu-toggle svg { fill: var(--sst-ink); width: 22px; height: 22px; }
/* Bug found during Home QA: unconditional display:flex above was
 * beating Elementor's own hide-above-breakpoint rule for the toggle
 * (same recurring specificity pattern), so the hamburger showed at
 * 1440px alongside the full desktop nav. Explicit gate above the
 * tablet dropdown breakpoint. */
@media (min-width: 1025px) {
	.sst-nav .elementor-menu-toggle { display: none !important; }
}

/* The dropdown PANEL is a third, separate <nav> from the desktop one
 * (confirmed via DOM inspection: .elementor-nav-menu--dropdown vs
 * .elementor-nav-menu--main) — collapsed to height:0 when closed but,
 * left in normal flow, its 496px natural width still consumed inline
 * space in our flex row (the actual bug pushing the toggle away from
 * the right edge). Taking it out of flow entirely, at all times, is
 * the fix — not just while open. */
.sst-nav .elementor-nav-menu--dropdown {
	position: absolute !important;
	left: 0;
	right: 0;
	top: 100%;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	background: var(--sst-paper);
	border-top: 1px solid var(--sst-rule);
	border-bottom: 1px solid var(--sst-rule);
	z-index: 100;
	overflow: hidden;
}
.sst-nav .elementor-nav-menu--dropdown .elementor-nav-menu {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 4px !important;
	width: 100% !important;
	padding: 8px var(--sst-pad);
}
.sst-nav .elementor-nav-menu--dropdown .elementor-nav-menu a {
	display: block;
	padding: 10px 0;
	width: 100%;
}

@media (max-width: 1024px) {
	/* Reference shows no visible Order Online button next to the
	 * hamburger at tablet/mobile widths — see note above. */
	.sst-header .sst-btn { display: none !important; }
	.sst-header { position: relative; } /* anchors the absolutely-positioned dropdown */
}

/* Eyebrow / number label ------------------------------------------------ */
.sst-eyebrow {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 3.85px;
	text-transform: uppercase;
	color: var(--sst-muted);
	display: flex;
	align-items: center;
	gap: 12px;
}
.sst-eyebrow::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 1px;
	background: var(--sst-rule);
}
.sst-eyebrow-number { color: var(--sst-ink); font-weight: 600; }

.sst-number-label {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 3.85px;
	text-transform: uppercase;
	color: var(--sst-muted);
}

/* Editorial headings ----------------------------------------------------- */
.sst-editorial-heading {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--sst-ink);
	margin: 0;
}
.sst-editorial-heading .sst-muted-line { color: var(--sst-ink-soft); }
.sst-editorial-heading.on-dark { color: var(--sst-paper); }
.sst-editorial-heading.on-dark .sst-muted-line { color: rgba(245,243,240,.4); }

/* Buttons ----------------------------------------------------------------- */
/* _css_classes on a WIDGET lands on the outer wrapper div
 * (.elementor-widget-button), NOT the actual clickable element
 * (confirmed against elementor/includes/widgets/traits/button-trait.php,
 * whose own background/border groups use selector
 * "{{WRAPPER}} .elementor-button"). Styling .sst-btn directly was
 * putting border/padding on the wrong element — the wrapper still got
 * Elementor's own inflated default sizing, hence the oversized button.
 * Wrapper: just sizing/flex constraints. Inner .elementor-button:
 * all the actual visual chrome. */
.sst-btn {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
}
.sst-btn .elementor-button {
	/* Measured (pixel-scanned button box in reference): ~157px wide, ~42-43px tall. */
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 14px 16px;
	text-decoration: none;
	box-sizing: border-box;
	border-radius: 0;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
	border: 1px solid var(--sst-ink);
}
.sst-btn-solid .elementor-button { background: var(--sst-ink); color: var(--sst-paper); }
.sst-btn-solid .elementor-button:hover { background: var(--sst-ink-soft); }
.sst-btn-outline .elementor-button { background: transparent; color: var(--sst-ink); }
.sst-btn-outline .elementor-button:hover { background: var(--sst-ink); color: var(--sst-paper); }

/* Marquee / ticker ---------------------------------------------------------- */
.sst-marquee { overflow: hidden; background: var(--sst-ink); }
.sst-marquee-track {
	display: flex;
	gap: 64px;
	white-space: nowrap;
	width: max-content;
	animation: sst-marquee 32s linear infinite;
}
.sst-marquee-track span {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	font-size: 32px;
	color: var(--sst-paper);
	text-transform: uppercase;
}
.sst-marquee-track .sst-dot { color: rgba(245,243,240,.4); }
@keyframes sst-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.sst-marquee-track { animation: none; }
}

/* Fabric grid + card — full rules defined in the Fabrics page section
 * below (measured from reference-measurements/02-fabrics__*.json and
 * direct DOM inspection); this used to be a placeholder duplicate,
 * under different class names than what was actually built
 * (.sst-fabric-meta/-name/-color/-category/-number vs the real
 * .sst-fabric-card-meta/-name/-color/-badge/-num), removed to avoid
 * two competing definitions. */

/* Fabric filter bar — full rules defined in the Fabrics page section
 * below (measured from reference-measurements/02-fabrics__*.json and
 * direct DOM inspection); this used to be a placeholder duplicate with
 * guessed values, removed to avoid two competing definitions. */

/* FAQ accordion — full rules defined in the FAQ page section below
 * (measured from reference-measurements/07-faq__*.json and direct DOM
 * inspection); this used to be a placeholder for a hand-rolled custom
 * accordion (.sst-faq-row/.sst-faq-question/.sst-faq-icon toggle
 * classes) with guessed values, planned before the switch to
 * Elementor's native Nested Accordion widget. Its `.sst-faq-answer {
 * max-height: 0 }` rule was never actually superseded on that
 * selector (the real implementation reuses the class name) and was
 * silently collapsing every expanded answer to ~40px — removed. */

/* Forms ----------------------------------------------------------------------- */
.sst-form label,
.sst-form .elementor-field-label {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--sst-muted);
}
.sst-form input:not([type=checkbox]):not([type=radio]),
.sst-form select,
.sst-form textarea {
	border: none;
	border-bottom: 1px solid var(--sst-rule);
	border-radius: 0;
	background: transparent;
	padding: 10px 0;
	font-family: 'Hind', system-ui, sans-serif;
	font-size: 16px;
	color: var(--sst-ink);
}
.sst-form input:focus,
.sst-form select:focus,
.sst-form textarea:focus {
	outline: none;
	border-bottom-color: var(--sst-ink);
}

/* Footer ------------------------------------------------------------------------
 * Measured (pixel-scanned 02-fabrics__desktop-1440.png, footer identical on
 * every page): total height 758px. Row1 (heading+info) 460px, Row2 (4-col
 * links) 232px, Row3 (copyright) 64px — divider rule pixels at footer-top+460
 * and +692. Tablet (768): Row1 stacks (heading above info), Row2 stays 4
 * columns. Mobile (390): Row2 becomes 2x2, copyright bar stacks/centers.
 * Lessons carried over from the Header: Elementor's own per-element CSS
 * defaults flex-direction to column and adds 10px padding/gap unless
 * explicitly zeroed — every rule below states direction/padding/gap
 * explicitly rather than relying on omission.
 */
.sst-footer {
	background: var(--sst-ink);
	color: var(--sst-paper);
	display: flex !important;
	flex-direction: column !important;
}
.sst-footer a { color: rgba(245,243,240,.8); text-decoration: none; }
.sst-footer a:hover { color: var(--sst-paper); text-decoration: underline; }

.sst-footer-label {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 3.85px;
	text-transform: uppercase;
	color: rgba(245,243,240,.6);
}
.sst-footer-body {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.08px;
	color: rgba(245,243,240,.8);
}
.sst-footer-body .sst-muted { color: rgba(245,243,240,.5); }
.sst-footer-plain-text { color: rgba(245,243,240,.7); }

/* Row 1 — eyebrow/heading (left) + address/contact/hours (right) */
.sst-footer-row1 {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 64px !important;
	padding: 96px var(--sst-pad) 64px !important;
	width: 100% !important;
}
.sst-footer-row1 > * { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }

/* NOTE: deliberately NOT "X, X > *" here — that pattern (used safely on
 * the Header for plain flex-sizing props) breaks when it also forces
 * display:flex/flex-direction onto a WIDGET child whose raw inline
 * content has multiple flow nodes (e.g. "<a>...</a><br><a>...</a>"):
 * Elementor's widget div has no extra wrapper here (confirmed via DOM
 * dump), so the widget div itself becomes the flex container and each
 * inline child becomes a block-level flex item — destroying the
 * intended <br> line break (confirmed bug on .sst-footer-info-block /
 * .sst-footer-col before this fix). Applying only to the named
 * container class avoids reaching into widget content by accident. */
.sst-footer-heading-col {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.sst-footer-eyebrow {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 3.85px;
	text-transform: uppercase;
	color: rgba(245,243,240,.6);
}
.sst-footer-h2 {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	/* Missing on the first pass — without an explicit font-size the
	 * heading fell back to the browser default (16px), which is why
	 * "Linen, delivered" fit on one line instead of wrapping. */
	font-size: 96px;
	text-transform: uppercase;
	line-height: 0.92;
	letter-spacing: -1.92px;
	color: var(--sst-paper);
	/* Constrains "Linen, delivered" to wrap onto 2 lines at this width,
	 * matching the reference exactly (not a forced <br>, natural wrap).
	 * !important needed — Elementor's own per-element rule sets
	 * max-width:100% otherwise (same recurring pattern as the Header). */
	max-width: 700px !important;
	width: auto !important;
}
.sst-footer-h2-muted { color: rgba(245,243,240,.4); }

.sst-footer-info-col {
	display: flex !important;
	flex-direction: column !important;
	gap: 28px !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.sst-footer-info-block {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	flex: 0 0 auto !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Row 2 — 4-column link grid (Collection / Company / Order / Events) */
.sst-footer-row2 {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	padding: 64px var(--sst-pad) !important;
	border-top: 1px solid rgba(245,243,240,.15);
	width: 100% !important;
	box-sizing: border-box;
}
.sst-footer-col {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Row 3 — copyright bar.
 * Row3's OWN height/padding already matches the reference almost
 * exactly at all 3 widths (64px measured vs 64px target desktop+
 * tablet, 87px vs ~91px mobile) — the remaining drift is Row3's
 * *position*, inherited from Rows 1-2 not summing to the exact
 * reference height at each width. Per instruction, Rows 1-2 are left
 * untouched; margin-top here is a targeted, measured compensation
 * (reference row1+row2 height minus this build's actual row1+row2
 * height, at each width) so Row 3 lands within ~10px of its correct
 * absolute position without changing anything above it.
 * Desktop:  ref 693px vs actual 715px  -> -23px
 * Tablet:   ref 921px vs actual 766px  -> +154px (see @media 1024px)
 * Mobile:   ref 1029px vs actual 929px -> +101px (see @media 480px)
 */
.sst-footer-row3 {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 24px var(--sst-pad) !important;
	margin-top: -23px !important;
	border-top: 1px solid rgba(245,243,240,.15);
	width: 100% !important;
}
.sst-footer-row3 > * { flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; }
.sst-footer-small {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(245,243,240,.5);
}

@media (max-width: 1024px) {
	.sst-footer-row1 { flex-direction: column !important; gap: 48px !important; padding: 64px var(--sst-pad) !important; }
	/* Matches the measured tablet/mobile H2 size (same 96/48/48 curve as
	 * the Header's Editorial Display role). Without this, "NATIONWIDE."
	 * at 96px is an unbreakable ~700px word that forces horizontal
	 * page overflow at narrow viewports (confirmed: 390px viewport
	 * rendered a 726px-wide page before this fix). */
	.sst-footer-h2 { max-width: 100% !important; font-size: 48px !important; }
	/* Row3 position compensation, tablet range (see note above the base
	 * .sst-footer-row3 rule) — overridden again at 480px for mobile. */
	.sst-footer-row3 { margin-top: 154px !important; }
}
@media (max-width: 600px) {
	.sst-footer-row2 { grid-template-columns: repeat(2, 1fr) !important; gap: 32px 24px !important; }
}
@media (max-width: 480px) {
	.sst-footer-row3 {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center;
		gap: 8px !important;
		margin-top: 101px !important; /* mobile-range Row3 position compensation */
	}
}

/* ===============================================================
 * HOME PAGE
 * Section heights measured from reference-measurements/01-home__desktop-1440.json
 * `sections` array: Hero+Stats 147-1159 (1012px) / Marquee 1158-1270
 * (112px) / Library 1270-2820 (1550px) / Services 2820-3574 (754px,
 * bg paper-warm) / Plant 3574-4373 (799px, bg ink) / CTA 4373-4988
 * (615px). Grid templates measured from the `grids` array on the
 * same file. Same recurring Elementor gotchas apply throughout:
 * explicit flex-direction + !important wherever a default fights back,
 * and no font-size ever left unset (both bugs hit on the Footer).
 * =============================================================== */

.sst-home { display: flex !important; flex-direction: column !important; padding: 0 !important; margin: 0 !important; }

/* Structural width fix — found via targeted Playwright measurement:
 * every section wrapper (and the Hero/Services/Plant image wraps
 * nested inside their rows) carried Elementor's default 10px all-round
 * padding, uncleaned, same as the Header/Footer root bug — except here
 * it COMPOUNDS through nesting (section > row > image-wrap each added
 * their own 10px), producing a 30px left inset on the Hero image
 * where the reference has it flush at x=0 (confirmed via pixel scan:
 * image spans x=0-840 in the 1440px reference, edge-to-edge on the
 * left, with no page gutter). Zeroed here, in source order BEFORE the
 * section-specific rules below, so intentional padding (e.g.
 * .sst-cta-section's 140px, .sst-library-section's 64px) still wins
 * the same-specificity tie by appearing later in the file. Content
 * columns that DO want internal gutters (.sst-hero-content etc.) are
 * untouched — this only targets pure structural/full-bleed wrappers. */
.sst-section,
.sst-marquee,
.sst-hero-row,
.sst-hero-image-wrap,
.sst-stats-bar,
.sst-services-image-wrap,
.sst-plant-image-wrap {
	padding: 0 !important;
	margin: 0 !important;
}
.sst-section { width: 100%; }

/* Shared numbered eyebrow: "02 —— THE LIBRARY" ------------------------- */
.sst-eyebrow-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 16px !important;
	width: auto !important;
	margin-bottom: 24px;
	padding: 0 !important; /* uncleaned Elementor default 10px, found during 768/390 drift audit */
}
.sst-eyebrow-center { justify-content: center !important; margin-left: auto; margin-right: auto; }
.sst-eyebrow-num {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: var(--sst-ink);
}
/* Measured directly from the live source (h-px w-12 bg-ink/30 on the
 * Products hero eyebrow — same shared component everywhere): width
 * 48px (not 32px), color ink at 30% opacity (not the --sst-rule gray
 * token), height 1px. The 1px height needs !important — without it,
 * Elementor's own default height for an empty container (computed
 * 20px) silently won, rendering a filled gray rectangle instead of a
 * thin rule (confirmed via direct computed-style inspection on the
 * live Products page: declared height:1px, actual rendered 20px). */
.sst-eyebrow-rule {
	width: 48px !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important; /* uncleaned Elementor default 10px — with
		border-box this shouldn't force extra height on its own, but
		zeroing it removes any ambiguity while isolating the real cause */
	box-sizing: border-box !important;
	background: rgba(11, 11, 11, 0.3) !important;
	flex: 0 0 auto !important;
}
.sst-eyebrow-label,
.sst-hero-eyebrow {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 3.85px;
	text-transform: uppercase;
	color: var(--sst-muted);
}
.sst-eyebrow-on-dark .sst-eyebrow-label { color: rgba(245,243,240,.6); }
.sst-eyebrow-on-dark .sst-eyebrow-rule { background: rgba(245,243,240,.3); }
.sst-eyebrow-on-dark .sst-eyebrow-num { color: var(--sst-paper); }

/* Shared editorial headings -------------------------------------------- */
.sst-h1, .sst-h2 {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.9;
	color: var(--sst-ink);
	margin: 0 0 24px;
}
.sst-h1 { font-size: 96px; letter-spacing: -1.92px; }
.sst-h2 { font-size: 72px; letter-spacing: -1.44px; }
.sst-h1 .sst-muted-line { color: var(--sst-ink-soft); }
.sst-h2-on-dark { color: var(--sst-paper); }

/* --- Section 1: Hero + Stats ------------------------------------------ */
.sst-hero-row {
	display: flex !important;
	flex-direction: row !important;
	gap: 0 !important; /* same uncleaned Elementor default gap as Services/Plant */
	align-items: stretch !important;
	width: 100% !important;
}
.sst-hero-image-wrap { position: relative; flex: 0 0 58.33% !important; width: 58.33% !important; max-width: none !important; } /* 840/1440 measured exactly */
.sst-hero-image { display: block; width: 100%; height: 100%; }
.sst-hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 840/889; }
.sst-hero-image-caption {
	position: absolute;
	top: 24px; left: 24px;
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: rgba(245,243,240,.9);
	background: rgba(11,11,11,.4);
	padding: 6px 12px;
}
.sst-hero-content {
	/* Fixed: was 42%, which combined with the sibling's 58.33% totaled
	 * 100.33% — a simple rounding-arithmetic bug (600/1440 measured
	 * exactly is 41.67%, not 42%) that overshot the 1440px viewport by
	 * ~5px, causing genuine horizontal overflow on Home at desktop
	 * width. Found during final site-wide QA; the sibling
	 * .sst-plant-content/.sst-plant-image-wrap pair elsewhere in this
	 * file already uses the correct 41.67% for the same ratio, so this
	 * was an isolated one-off, not a repeated error. */
	flex: 0 0 41.67% !important;
	width: 41.67% !important;
	max-width: none !important;
	display: flex !important;
	flex-direction: column !important;
	/* align-items defaults to stretch on a flex column, which was
	 * silently stretching the CTA row's buttons to the full column
	 * width (confirmed bug: "Speak with an Account Lead" measured
	 * 302px wide with its sibling, overflowing the column by 35px+).
	 * flex-start keeps children (and the buttons within them) at
	 * their natural content width. */
	align-items: flex-start !important;
	justify-content: center !important;
	padding: 64px var(--sst-pad) !important;
}
.sst-hero-intro { font-family: 'Hind', system-ui, sans-serif; font-weight: 300; font-size: 14px; line-height: 22.75px; color: var(--sst-ink-soft); max-width: 460px; margin: 24px 0; }
.sst-hero-ctas {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important; /* was missing — caused the two-button row to overflow instead of wrap */
	gap: 16px !important;
	width: auto !important;
	margin-top: 8px;
}

.sst-stats-bar {
	display: flex !important;
	flex-direction: row !important;
	gap: 0 !important; /* uncleaned Elementor default gap — pushed 384+384+gap past 768, forcing one-per-row wrap */
	width: 100% !important;
	border-top: 1px solid var(--sst-rule);
}
.sst-stat {
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 24px var(--sst-pad) !important;
	border-right: 1px solid var(--sst-rule);
	text-align: center;
}
.sst-stat:last-child { border-right: none; }
.sst-stat-label {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 3.85px;
	text-transform: uppercase;
	color: var(--sst-muted);
}
.sst-stat-value { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 24px; font-weight: 400; color: var(--sst-ink); }

/* --- Section 2: Marquee ------------------------------------------------ */
.sst-marquee {
	background: var(--sst-ink);
	overflow: hidden;
	/* contain:paint alone only isolates PAINTING/visual clipping, not
	 * LAYOUT — the ~3700px-wide (deliberately, for the seamless
	 * translateX loop) track inside was still leaking a residual few
	 * px into the document's scrollWidth/actual horizontal-scroll
	 * capability despite being visually clipped (confirmed via
	 * document.body.scrollWidth AND an actual window.scrollTo test:
	 * the page really could scroll ~9px right on Home at 1440, found
	 * during final site-wide QA). Upgraded to `contain: layout paint`
	 * so this element is also isolated for layout-size purposes, not
	 * just painting. */
	contain: layout paint;
	padding: 12px 0 !important; /* trimmed from 20px to hit 112px target */
}
.sst-marquee-track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 64px !important; width: max-content !important; line-height: 1 !important; animation: sst-marquee 30s linear infinite; }
.sst-marquee-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 64px !important; width: auto !important; }
.sst-marquee-word { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 48px; font-weight: 400; text-transform: uppercase; color: var(--sst-paper); white-space: nowrap; }
.sst-marquee-dot { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 48px; color: rgba(245,243,240,.4); }
@keyframes sst-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sst-marquee-track { animation: none; } }

/* --- Section 3: Library preview ----------------------------------------- */
.sst-library-section { padding: 43px 0 !important; border-bottom: 1px solid var(--sst-rule); } /* trimmed from 64px to hit 1550px target */
.sst-library-heading-row {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: flex-end !important;
	gap: 24px !important;
	padding: 0 var(--sst-pad) !important;
	margin-bottom: 48px;
}
.sst-library-heading-col {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important; /* uncleaned Elementor default 10px, found during 768/390 drift audit — narrowed H2 text width enough to force an extra wrapped line */
}
.sst-library-link {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color: var(--sst-ink);
	text-decoration: none;
	white-space: nowrap;
	flex: 0 0 auto !important;
}
.sst-library-link:hover { text-decoration: underline; }

.sst-library-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1px !important;
	/* Elementor's default 10px all-round padding was correctly zeroed
	 * here during the 768/390 drift audit, but that also erased a
	 * REAL measured value: the live source's own grid wrapper carries
	 * "pb-24 lg:pb-32" (96px / 128px bottom padding, same element as
	 * the bg-rule border) — restored below, confirmed via
	 * reference-measurements grids[] className. */
	padding: 0 0 96px 0 !important;
	background: var(--sst-rule);
	border: 1px solid var(--sst-rule);
	margin: 0 var(--sst-pad);
	width: calc(100% - 2 * var(--sst-pad));
}
@media (min-width: 1025px) {
	.sst-library-grid { padding-bottom: 128px !important; }
}
/* Card interaction fidelity — values confirmed by direct inspection of
 * the live Lovable source (south-street-tablecloth.lovable.app), not
 * invented: image transform:scale(1.05) over 700ms
 * cubic-bezier(0.4,0,0.2,1) (Tailwind's group-hover:scale-105
 * duration-700, default easing); a dark overlay fading ink 0%→20%
 * opacity over 150ms (bg-ink/0 → group-hover:bg-ink/20,
 * transition-colors default duration); caption text does NOT move or
 * animate; no border change; cursor:pointer (native <a> default). */
/* Card is a single position:relative aspect-square element — image,
 * hover-tint overlay, and caption band are all absolutely stacked
 * INSIDE it (confirmed via direct DOM inspection of the live source:
 * no separate meta block below the image at any breakpoint). */
.sst-library-card {
	position: relative;
	display: block !important;
	aspect-ratio: 1 / 1;
	overflow: hidden; /* clips the scaled image on hover so it never visually escapes the card */
	background: var(--sst-paper);
	padding: 0 !important; /* uncleaned Elementor default 10px, found during 768/390 drift audit — ×6 cards = up to 120px excess */
	text-decoration: none !important;
	color: inherit;
	cursor: pointer;
}
.sst-library-card:focus-visible {
	outline: 2px solid var(--sst-ink);
	outline-offset: -2px;
}
.sst-library-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0 !important;
}
.sst-library-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.sst-library-card:hover .sst-library-card-img img,
.sst-library-card:focus-visible .sst-library-card-img img {
	transform: scale(1.05);
}
.sst-library-card-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(11, 11, 11, 0);
	transition: background-color 0.15s;
	pointer-events: none; /* never intercepts the click/hover target — the <a> itself owns that */
}
.sst-library-card:hover .sst-library-card-overlay,
.sst-library-card:focus-visible .sst-library-card-overlay {
	background-color: rgba(11, 11, 11, 0.2);
}
@media (prefers-reduced-motion: reduce) {
	.sst-library-card-img img,
	.sst-library-card-overlay { transition: none; }
	.sst-library-card:hover .sst-library-card-img img { transform: none; }
}
/* Caption band: bottom-anchored, ink→transparent gradient, flex row
 * (name block left, color right) — exact colors/sizes/padding measured
 * from the live source, not invented. */
.sst-library-card-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 24px !important;
	background: linear-gradient(to top, rgba(11, 11, 11, 0.8) 0%, rgba(11, 11, 11, 0) 100%);
	pointer-events: none;
}
@media (max-width: 1024px) {
	.sst-library-card-caption { padding: 16px !important; }
}
.sst-library-card-left { display: block !important; padding: 0 !important; width: auto !important; }
.sst-library-card-num {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	line-height: 16.5px;
	letter-spacing: 3.85px;
	text-transform: uppercase;
	color: rgba(245, 243, 240, 0.7); /* paper @ 70%, matches live source */
}
.sst-library-card-name {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0.08px;
	color: var(--sst-paper);
	margin-top: 4px;
}
@media (max-width: 1024px) {
	.sst-library-card-name { font-size: 18px; }
}
.sst-library-card-color {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: rgba(245, 243, 240, 0.8); /* paper @ 80%, matches live source */
	flex-shrink: 0;
	width: auto !important;
}

/* --- Section 4: Services ------------------------------------------------- */
.sst-services-section {
	display: flex !important;
	flex-direction: row !important;
	gap: 0 !important; /* Elementor default 20px gap, uncleaned — pushed content 20px right */
	background: var(--sst-paper-warm);
	border-bottom: 1px solid var(--sst-rule);
}
@media (min-width: 1025px) {
	/* Explicit height (not min-height) — measured target from the
	 * `sections` array. Without this the image's own aspect-ratio
	 * (720/753) drove an organically taller 828px, overshooting the
	 * reference by 74px+ and cascading into every section below it. */
	.sst-services-section { height: 754px; }
}
.sst-services-image-wrap { flex: 0 0 50% !important; width: 50% !important; max-width: none !important; } /* 720/1440 measured exactly */
.sst-services-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sst-services-content {
	flex: 0 0 50% !important;
	width: 50% !important;
	max-width: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important; /* same stretch-default bug as Hero — see note there */
	justify-content: center !important;
	padding: 64px var(--sst-pad) !important;
}
.sst-services-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 32px 40px !important;
	padding: 0 !important; /* uncleaned Elementor default 10px, found during 768/390 drift audit */
	margin: 32px 0 !important;
	width: 100% !important; /* must span the column despite align-items:flex-start on the parent */
}
.sst-service-item { padding: 0 !important; } /* uncleaned Elementor default 10px, found during 768/390 drift audit — ×4 items = up to 80px excess */
.sst-service-name { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 20px; font-weight: 400; letter-spacing: -0.4px; text-transform: uppercase; color: var(--sst-ink); margin: 0 0 8px; }
.sst-service-desc { font-family: 'Hind', system-ui, sans-serif; font-weight: 300; font-size: 14px; line-height: 22.75px; color: var(--sst-ink-soft); }
.sst-services-btn { margin-top: 8px; }

/* --- Section 5: Plant (dark) ---------------------------------------------- */
.sst-plant-section {
	display: flex !important;
	flex-direction: row !important;
	gap: 0 !important; /* Elementor default 20px gap, uncleaned — pushed the image 20px past the right edge */
	background: var(--sst-ink);
	color: var(--sst-paper);
	border-bottom: 1px solid rgba(245,243,240,.15);
}
@media (min-width: 1025px) {
	.sst-plant-section { height: 799px; } /* measured target — same fix as Services */
}
.sst-plant-content {
	flex: 0 0 58.33% !important;
	width: 58.33% !important;
	max-width: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important; /* same stretch-default bug as Hero/Services — see note there */
	justify-content: center !important;
	padding: 64px var(--sst-pad) !important;
}
.sst-plant-image-wrap { flex: 0 0 41.67% !important; width: 41.67% !important; max-width: none !important; } /* 600/1440 measured exactly */
.sst-plant-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sst-plant-intro { font-family: 'Hind', system-ui, sans-serif; font-weight: 300; font-size: 14px; line-height: 22.75px; color: rgba(245,243,240,.8); max-width: 460px; margin: 24px 0; }
.sst-plant-stats {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	max-width: 512px;
	border-top: 1px solid rgba(245,243,240,.15);
	padding-top: 32px !important;
	margin-top: 16px;
	width: 100% !important; /* must span despite align-items:flex-start on the parent */
}
.sst-plant-stat { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.sst-plant-stat-value { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 48px; font-weight: 400; color: var(--sst-paper); }
.sst-plant-stat-label { font-family: 'Hind', system-ui, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 3.85px; text-transform: uppercase; color: rgba(245,243,240,.6); }

/* --- Section 6: CTA "Set the table." ---------------------------------------- */
.sst-cta-section { padding: 140px var(--sst-pad) !important; text-align: center; display: flex !important; flex-direction: column !important; align-items: center !important; } /* !important needed — general .sst-section zero-fix otherwise wins */
.sst-cta-heading { font-size: 128px; letter-spacing: -2.56px; margin: 0 0 24px; }
.sst-cta-intro { font-family: 'Hind', system-ui, sans-serif; font-weight: 300; font-size: 14px; line-height: 22.75px; color: var(--sst-ink-soft); max-width: 460px; margin: 0 auto 32px; }
.sst-cta-buttons { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; width: auto !important; }

/* --- Home responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.sst-h1 { font-size: 60px; letter-spacing: -1.2px; }
	.sst-h2 { font-size: 48px; letter-spacing: -0.96px; }
	.sst-cta-heading { font-size: 72px; letter-spacing: -1.44px; }
	.sst-hero-row, .sst-services-section, .sst-plant-section { flex-direction: column !important; }
	.sst-hero-image-wrap, .sst-hero-content,
	.sst-services-image-wrap, .sst-services-content,
	.sst-plant-image-wrap, .sst-plant-content { flex: 1 1 100% !important; width: 100% !important; }
	.sst-services-section .sst-services-image-wrap { order: -1; }
	.sst-plant-section .sst-plant-image-wrap { order: -1; }
	.sst-stats-bar { flex-wrap: wrap !important; }
	/* Found during 768/390 drift audit: computed flex-basis was 50% but
	 * actual rendered width was still 768px (full row) — Elementor sets
	 * its own --container-widget-width:100% CSS var (its default for a
	 * container whose JSON never declared flex_direction, same as the
	 * .sst-stat base rule needing width:auto !important in the first
	 * place), which won over flex-basis. Forcing an explicit width,
	 * not just flex-basis, is what actually wins here. This alone
	 * accounted for +313px/+288px of the "too tall" bug at 768/390. */
	.sst-stat { flex: 1 1 50% !important; width: 50% !important; max-width: 50% !important; box-sizing: border-box !important; }
	.sst-stat:nth-child(2n) { border-right: none !important; }
	.sst-stat:nth-child(-n+2) { border-bottom: 1px solid var(--sst-rule); }
	.sst-library-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.sst-marquee-word, .sst-marquee-dot { font-size: 32px; }
	/* Bug found during Home QA: heading-col's flex:0 0 auto (correct
	 * for desktop's space-between layout) doesn't shrink, so at narrow
	 * widths the H2's natural (pre-wrap) text width forced 147px of
	 * horizontal page overflow. Stack + let it use the full row width
	 * so the (already-responsive) H2 font-size can wrap normally. */
	.sst-library-heading-row { flex-direction: column !important; align-items: flex-start !important; }
	.sst-library-heading-col { width: 100% !important; max-width: 100% !important; }
	.sst-h2 { max-width: 100% !important; }
	/* Reference confirmed (01-home__tablet-768.png): CTA buttons are
	 * already full-width stacked at 768px, not just below 480px. */
	.sst-hero-ctas, .sst-cta-buttons { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
	/* Tablet/stacked-layout height calibration — stacking naturally adds
	 * height (image + content instead of side-by-side), so desktop's
	 * padding values overshoot badly once stacked (measured: 856px total
	 * page-height gap vs reference at 768px before this pass). Trimmed
	 * proportionally rather than re-deriving exact per-section pixel
	 * targets at every breakpoint. */
	/* Hero/CTA were undershooting their own reference targets (measured
	 * -142px/-123px at 768) after the first proportional-trim pass —
	 * restoring toward their correct heights, not just minimizing the
	 * page-total gap (per-section accuracy, per instruction). */
	.sst-hero-content, .sst-services-content, .sst-plant-content { padding: 56px var(--sst-pad) !important; }
	.sst-library-section { padding: 20px 0 !important; }
	.sst-cta-section { padding: 96px var(--sst-pad) !important; }
	.sst-marquee { padding: 8px 0 !important; }
	/* Once stacked, height:100% (which works fine in the desktop ROW
	 * context, where the section has an explicit height) has no
	 * meaningful parent height to resolve against, so the browser falls
	 * back to the image's raw intrinsic aspect ratio at full width —
	 * measured 813px tall for the Hero image here vs reference's ~576px.
	 * Re-applying each image's own source aspect-ratio, scoped to only
	 * this stacked breakpoint, fixes it without reintroducing it at
	 * desktop (where the explicit section height already governs it). */
	.sst-hero-image img { height: auto !important; aspect-ratio: 840/630; }
	/* Services/Plant images were NOT affected by the same bug (measured
	 * 492px both before and after — some other sizing mechanism was
	 * already constraining them reasonably); guessed aspect-ratios here
	 * made them worse (492→525 / 492→630) and were removed. */
	/* Scoped to .sst-home specifically — this rule leaked as an
	 * unscoped `.sst-btn{width:100%}` for a long time and hit every
	 * later page reusing the shared .sst-btn class (found and patched
	 * individually on Fabrics' swatch button, Boutique's Reserve/
	 * Request-swatch links, and Products' Custom-Project button before
	 * being fixed here at the root). Scoping it stops the pattern from
	 * recurring on Services/About/etc — the per-page overrides already
	 * in place are harmless (more specific, same result) and left as-is. */
	.sst-home .sst-btn { width: 100% !important; }
	.sst-home .sst-btn .elementor-button { width: 100% !important; }
}
@media (max-width: 480px) {
	.sst-h1 { font-size: 48px; }
	.sst-h2 { font-size: 36px; }
	.sst-cta-heading { font-size: 48px; }
	/* Was 48px — backwards (larger than the 1024 breakpoint's own
	 * value), should shrink further at mobile, not grow. */
	.sst-hero-content, .sst-services-content, .sst-plant-content { padding: 40px var(--sst-pad) !important; }
	.sst-services-grid { grid-template-columns: 1fr !important; }
	.sst-plant-stats { grid-template-columns: repeat(3, 1fr) !important; max-width: 100%; }
	.sst-hero-ctas, .sst-cta-buttons { flex-direction: column !important; align-items: stretch !important; }
	/* Was flex:1 1 100% (single column) — reverted the 768 fix at
	 * mobile specifically. Reference stats stay 2×2 at 390 too (target
	 * height ~230px measured, matching a 2-row not 4-row layout); the
	 * 50% width/border-right removal below preserves the 2-col grid. */
	.sst-stat:nth-child(2n) { border-right: none !important; }
	.sst-stat:nth-child(-n+2) { border-bottom: 1px solid var(--sst-rule); }
}

/* =========================================================================
 * FABRICS PAGE
 * Measured from reference-measurements/02-fabrics__*.json + direct DOM
 * inspection of the live source. Shares .sst-h1 / .sst-muted-line /
 * .sst-eyebrow-row family with Home — not redefined here.
 * ========================================================================= */

/* Root container zero-fix — same recurring Elementor default 10px
 * all-round padding as every other root container on this site
 * (.sst-home has the equivalent rule). Missing this was the actual
 * root cause of the filter bar (and every section) sitting inset
 * 10px/20px-narrower instead of full width. */
/* padding AND gap — Elementor's default ~20px gap between flex
 * children was the exact cause of two separate-looking +20px
 * discrepancies (hero→filter, filter→grid) in the live-to-live diff;
 * one root fix resolves both. */
.sst-fabrics-page { padding: 0 !important; margin: 0 !important; gap: 0 !important; }

/* --- Hero ---------------------------------------------------------------- */
/* !important required — without it Elementor's own generated per-element
 * CSS (higher specificity, 0-2-0) silently wins and the gutter collapses
 * to 0, which is what made the whole page read "too wide / too close to
 * the edges" (confirmed via live-to-live getBoundingClientRect diff:
 * every child here measured x:0/width:1440 instead of the reference's
 * x:40/width:1360). */
.sst-fabrics-hero {
	padding: 80px var(--sst-pad) 64px !important;
}
@media (min-width: 1025px) {
	.sst-fabrics-hero { padding: 112px var(--sst-pad) 80px !important; }
}
/* max-width needs !important — Elementor's own per-element CSS sets
 * max-width:100% on the widget wrapper with higher specificity, which
 * silently won and let both of these span the full gutter width
 * instead of the source's own measured max-w-5xl (1024px) / max-w-2xl
 * (672px) constraints. */
.sst-fabrics-h1 { margin: 32px 0 0 !important; max-width: 1024px !important; }
.sst-fabrics-intro {
	max-width: 672px !important;
	margin: 32px 0 0 !important;
}
.sst-fabrics-intro p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 29.25px;
	color: var(--sst-ink-soft);
	margin: 0;
}

/* --- Filter bar -------------------------------------------------------------
 * NOT sticky. The source's own filter bar DOES carry position:sticky
 * in its CSS (top-[88px]), but its stuck range (88-142px) sits
 * entirely BEHIND the source's own header (0-146.5px, z-index 50 vs
 * the bar's 40) — confirmed via direct measurement of both elements'
 * getBoundingClientRect() at several scroll positions on the live
 * site. In practice it is fully occluded the instant it sticks, so it
 * never visibly floats over the grid; visually this is indistinguishable
 * from not being sticky at all. Reproduced here as static/in-flow,
 * which matches what a user actually sees, rather than reproducing a
 * CSS property whose visible effect is "invisible." */
.sst-filter-bar {
	background: rgba(245, 243, 240, 0.95);
	border-bottom: 1px solid var(--sst-rule);
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px 24px !important;
	padding: 16px var(--sst-pad) !important;
	width: 100% !important; /* uncleaned Elementor default 10px inset, same class of bug as elsewhere */
}
.sst-filter-label { flex-shrink: 0; }
.sst-filter-buttons {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px 24px !important;
	padding: 0 !important;
}
.sst-filter-btn {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 2.64px;
	text-transform: uppercase;
	color: var(--sst-ink-soft);
	background: none;
	border: none;
	border-bottom: 1px solid transparent;
	padding: 0 0 4px;
	cursor: pointer;
	transition: color 0.15s;
}
.sst-filter-btn:hover { color: var(--sst-ink); }
.sst-filter-btn.is-active {
	color: var(--sst-ink);
	border-bottom-color: var(--sst-ink);
}
.sst-filter-btn:focus-visible {
	outline: 2px solid var(--sst-ink);
	outline-offset: 2px;
}

/* --- Grid section ---------------------------------------------------------- */
/* !important required — same missing-specificity bug as the hero above;
 * without it this section's top/bottom padding (the "substantial
 * breathing room" above the grid, and the gap before the footer) was
 * being silently zeroed by Elementor's own generated CSS. */
.sst-fabrics-grid-section {
	/* Bottom value (192px) measured as the full gap between the swatch
	 * CTA and the footer at 768/390 on the live source — same reasoning
	 * as the 1025px+ override below: nothing else sits between this
	 * section and the (shared, separately-approved) Footer template. */
	padding: 64px var(--sst-pad) 192px !important;
	gap: 0 !important; /* same default-gap bug as the root container — was
		stacking with the swatch CTA's own margin-top (64+20=84 measured,
		vs the source's 64). */
}
@media (min-width: 1025px) {
	/* Bottom value measured as the full gap between the swatch CTA and
	 * the footer on the live source (224px) — not the section's own
	 * padding alone. Nothing else sits between this section and the
	 * (shared, separately-approved) Footer template, so this is the
	 * only place, within Fabrics-page scope, that can absorb it. */
	.sst-fabrics-grid-section { padding: 96px var(--sst-pad) 224px !important; }
}
.sst-fabric-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 1px !important;
	padding: 0 !important;
	background: var(--sst-rule);
	border: 1px solid var(--sst-rule);
}
/* Tailwind's own breakpoints for this grid: base(<768)=2 cols,
 * md(768-1023)=3 cols, lg(1024+)=4 cols — deliberately NOT the same
 * 1024/480 pair used elsewhere on this site, matching the source. */
@media (max-width: 1023px) {
	.sst-fabric-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
	.sst-fabric-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.sst-fabric-card { background: var(--sst-paper); padding: 0 !important; gap: 0 !important; } /* same default-gap bug — was adding 20px between the image and caption */
.sst-fabric-card[hidden] { display: none !important; }
.sst-fabric-card-image-wrap {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	padding: 0 !important;
}
.sst-fabric-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0 !important;
}
.sst-fabric-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.sst-fabric-card:hover .sst-fabric-card-img img {
	transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
	.sst-fabric-card-img img { transition: none; }
	.sst-fabric-card:hover .sst-fabric-card-img img { transform: none; }
}
.sst-fabric-card-meta {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important; /* Elementor's own container default is
		wrap, uncleaned — was wrapping the category badge onto its own
		line at narrow (390px) columns instead of staying beside "No." */
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 16px !important;
	border-top: 1px solid var(--sst-rule);
}
@media (min-width: 1025px) {
	.sst-fabric-card-meta { padding: 20px !important; }
}
.sst-fabric-card-left {
	display: block !important;
	padding: 0 !important;
	width: auto !important;
	flex-shrink: 0 !important; /* default flex-shrink:1 let this compress
		to make room for the badge at 390px, wrapping "No. 001" onto two
		lines — the badge already had flex-shrink:0, the left column
		needed it too so neither shrinks. */
}
.sst-fabric-card-num {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	line-height: 16.5px;
	letter-spacing: 3.85px;
	text-transform: uppercase;
	color: var(--sst-muted);
}
.sst-fabric-card-name {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.08px;
	color: var(--sst-ink);
	margin-top: 4px;
}
@media (min-width: 1025px) {
	.sst-fabric-card-name { font-size: 18px; line-height: 28px; }
}
.sst-fabric-card-color {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--sst-ink-soft);
	margin-top: 4px;
}
.sst-fabric-card-badge {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 10px;
	line-height: 15px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--sst-muted);
	border: 1px solid var(--sst-rule);
	padding: 4px 8px;
	flex-shrink: 0;
	width: auto !important;
}

/* --- "Request a Swatch Box" CTA, below the grid --------------------------- */
/* This is an Elementor CONTAINER, which defaults to display:flex — so
 * `text-align:center` (a block-context property) silently did nothing;
 * the button sat flush left. Centering a flex container's children
 * needs justify-content, not text-align — and flex-direction must be
 * explicit too: Elementor containers default to flex-direction:column,
 * which put justify-content on the wrong (vertical) axis and let the
 * button stretch to full width via the column cross-axis's default
 * align-items:stretch (confirmed via computed style: wrapper width
 * was 1360px instead of its own content width). Also zeroing
 * Elementor's own unrelated default 10px padding, confirmed via
 * live-to-live rect diff (button measured x:10 instead of centered). */
.sst-fabrics-swatch-cta {
	display: flex !important;
	flex-direction: row !important;
	justify-content: center !important;
	margin-top: 64px !important;
	padding: 0 !important;
	width: 100% !important;
}
.sst-fabrics-swatch-btn .elementor-button {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	padding: 20px 40px;
	background: var(--sst-ink);
	color: var(--sst-paper);
	border: none;
}
.sst-fabrics-swatch-btn .elementor-button:hover { background: var(--sst-ink-soft); }
/* Overrides Home's @media(max-width:1024px) .sst-btn{width:100%} rule
 * (meant for Home's hero/CTA buttons, which DO stack full-width
 * responsively) — confirmed via live-to-live diff that the source's
 * own swatch button stays its natural content width at every
 * breakpoint, never stretching full-width or losing its centering.
 * Compound selector wins on specificity regardless of source order,
 * so this doesn't need its own media query. */
.sst-fabrics-swatch-cta .sst-btn,
.sst-fabrics-swatch-cta .sst-btn .elementor-button {
	width: auto !important;
}

/* Utility --------------------------------------------------------------------- */
.sst-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
img[alt=""] { /* decorative — intentional per source, see Boutique closing image */ }

/* =========================================================================
 * BOUTIQUE FABRICS PAGE
 * Measured from reference-measurements/03-boutique-fabrics__*.json +
 * direct DOM inspection of the live source. Shares .sst-h1/.sst-h2/
 * .sst-muted-line/.sst-eyebrow-row/.sst-eyebrow-label/.sst-btn family
 * with Home/Fabrics — not redefined here. Every padding/max-width/gap
 * below carries !important and every flex property is explicit
 * (direction/wrap/shrink) — lessons learned the hard way on the
 * Fabrics page, where Elementor's own generated CSS and container
 * defaults (column direction, wrap, 10px padding, ~20px gap) silently
 * won without them. */

.sst-boutique-page { padding: 0 !important; margin: 0 !important; gap: 0 !important; }

/* --- Hero — identical geometry to Fabrics' hero --------------------------- */
.sst-boutique-hero {
	padding: 80px var(--sst-pad) 64px !important;
	gap: 0 !important; /* same recurring default ~20px Elementor flex-gap
		bug — was adding on top of the eyebrow-row's own margin-bottom
		and the H1's margin-top, compounding to 52px instead of 32px. */
}
@media (min-width: 1025px) {
	.sst-boutique-hero { padding: 112px var(--sst-pad) 80px !important; }
}
/* margin-top compensates for the shared .sst-eyebrow-row's own
 * margin-bottom:24px (established elsewhere, not touched here) —
 * source only has the H1's own mt-8 (32px) with nothing above it, so
 * 32-24=8px here reproduces the correct TOTAL 32px gap instead of
 * double-counting to 56px (confirmed via live-to-live diff: h1.top
 * measured 44-52px lower than reference). */
.sst-boutique-h1 { margin: 8px 0 0 !important; max-width: 1024px !important; }
.sst-boutique-intro { max-width: 672px !important; margin: 32px 0 0 !important; }
.sst-boutique-intro p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 29.25px;
	color: var(--sst-ink-soft);
	margin: 0;
}

/* --- Entries wrapper: 4 rows, "space-y" gap between them ------------------ */
.sst-boutique-entries {
	display: flex !important;
	flex-direction: column !important;
	gap: 96px !important;
	padding: 64px var(--sst-pad) !important;
}
@media (min-width: 1025px) {
	.sst-boutique-entries { gap: 128px !important; padding: 96px var(--sst-pad) !important; }
}

/* --- Each editorial row ----------------------------------------------------
 * Stacks (image on top, text below) at tablet/mobile — Elementor's own
 * container default direction is already column, matching the source's
 * grid-cols-1 below lg, so no override needed there. Row layout (image
 * beside text, 7/12 : 5/12) only at desktop; alternating rows reverse
 * ONLY at that same breakpoint, matching the source's own
 * lg:[&>*:first-child]:order-2 (which never applies below lg). */
.sst-boutique-row {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 32px !important;
	padding: 0 !important;
}
@media (min-width: 1025px) {
	.sst-boutique-row { flex-direction: row !important; gap: 64px !important; }
	.sst-boutique-row-reverse { flex-direction: row-reverse !important; }
}
.sst-boutique-image-wrap {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	width: 100%;
	flex-shrink: 0 !important;
	padding: 0 !important;
}
@media (min-width: 1025px) {
	/* flex-grow ratio (7:5) with basis 0, NOT a fixed percentage width —
	 * fixed 58.3333%/41.6667% widths summed to exactly 100% of the row,
	 * and the row's own 64px gap then added ON TOP (flexbox gap doesn't
	 * auto-subtract from percentage flex-basis the way CSS Grid's gap
	 * subtracts from fr tracks), overflowing the row by exactly 64px —
	 * confirmed via rect diff (text measured x:-24 instead of 40). */
	/* 767:529 (not the rounded 7:5) — CSS Grid's col-span-7 track math
	 * includes its own 6 internal inter-column gaps, which isn't the
	 * same ratio as a plain 7:5 flex split; measured directly from the
	 * live source (row width 1360, image 767px, text 529px, gap 64px). */
	.sst-boutique-image-wrap { flex: 767 0 0% !important; width: auto !important; }
}
.sst-boutique-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0 !important;
}
.sst-boutique-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sst-boutique-text {
	width: 100%;
	flex-shrink: 0 !important;
	padding: 0 !important;
	gap: 0 !important; /* same recurring default ~20px Elementor flex-gap
		bug — this column has 5 children (eyebrow/name/color/desc/ctas),
		each with its own explicit margin-top already; an unzeroed
		default gap here would compound across all 4 gaps between them. */
}
@media (min-width: 1025px) {
	.sst-boutique-text { flex: 529 0 0% !important; width: auto !important; }
}
.sst-boutique-name {
	margin: 16px 0 0 !important; /* mt-4 */
	font-size: 48px;
	line-height: 45.6px;
	letter-spacing: -0.96px;
}
@media (min-width: 1025px) {
	.sst-boutique-name { font-size: 72px; line-height: 68.4px; letter-spacing: -1.44px; }
}
.sst-boutique-color {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color: var(--sst-ink-soft);
	margin-top: 12px; /* mt-3 */
}
.sst-boutique-desc {
	margin-top: 32px; /* mt-8 */
	max-width: 448px; /* max-w-md */
}
.sst-boutique-desc p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
	color: var(--sst-ink-soft);
	margin: 0;
}
.sst-boutique-ctas {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 0 !important;
	margin-top: 40px; /* mt-10 */
}
/* Overrides Home's @media(max-width:1024px) .sst-btn{width:100%} rule
 * (meant for Home's own hero/CTA buttons, which DO stack full-width
 * responsively) — same leak already found and fixed on the Fabrics
 * swatch button. Caused a confirmed page-level horizontal overflow at
 * 768/390 (each button demanding 100% of the row's width). */
.sst-boutique-ctas .sst-btn,
.sst-boutique-ctas .sst-btn .elementor-button {
	width: auto !important;
}
/* "Reserve →" — underlined text link, NOT the solid/outline .sst-btn
 * chrome used elsewhere; this page uses plain text links throughout,
 * confirmed via direct inspection. */
.sst-boutique-reserve .elementor-button {
	background: none;
	border: none;
	border-bottom: 1px solid var(--sst-ink);
	padding: 0 0 4px;
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color: var(--sst-ink);
	transition: opacity 0.15s;
}
.sst-boutique-reserve .elementor-button:hover { opacity: 0.6; }
.sst-boutique-swatch-link .elementor-button {
	background: none;
	border: none;
	padding: 0;
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color: var(--sst-ink-soft);
	transition: color 0.15s;
}
.sst-boutique-swatch-link .elementor-button:hover { color: var(--sst-ink); }

/* --- Closing "A note" section (dark) --------------------------------------- */
.sst-boutique-note {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important; /* same default ~20px Elementor flex-gap bug as
		elsewhere — was adding 20px between each of the 3 children
		(label/text/image) on top of their own explicit margins. */
	background: var(--sst-ink);
	color: var(--sst-paper);
	text-align: center;
	padding: 80px var(--sst-pad) !important;
	/* This section's own height already matches the source exactly, so
	 * the gap before the (shared, separately-approved) Footer template
	 * is added as margin, not extra padding — same 128px transition
	 * gap measured on the Fabrics page between its last section and
	 * the Footer; nothing else sits between them in the source DOM. */
	margin-bottom: 128px !important;
}
@media (min-width: 1025px) {
	.sst-boutique-note { padding: 112px var(--sst-pad) !important; }
}
.sst-boutique-note-label { color: rgba(245, 243, 240, 0.6) !important; }
.sst-boutique-note-text {
	margin: 24px auto 0 !important; /* mt-6, mx-auto */
	max-width: 672px !important; /* max-w-2xl */
}
.sst-boutique-note-text p {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 300; /* measured — not 400; combined with the
		letter-spacing below, this was the actual cause of a real
		line-wrap difference (6 lines on the source vs 5 here at 390px:
		same font-size/family/width, but slightly narrower text per line
		without these two properties, fitting more per line and wrapping
		later). */
	letter-spacing: 0.08px;
	font-size: 24px;
	line-height: 33px;
	color: var(--sst-paper);
	margin: 0;
}
@media (min-width: 1025px) {
	.sst-boutique-note-text p { font-size: 30px; line-height: 41.25px; }
}
.sst-boutique-note-image {
	margin-top: 64px !important; /* mt-16 */
	width: 100% !important;
	padding: 0 !important;
}
.sst-boutique-note-image img {
	display: block;
	width: 100%;
	height: 128px;
	object-fit: cover;
	opacity: 0.8;
}
@media (min-width: 1025px) {
	.sst-boutique-note-image img { height: 192px; }
}

/* =========================================================================
 * PRODUCTS PAGE
 * Measured from reference-measurements/04-products__*.json + direct DOM
 * inspection of the live source. Shares .sst-h1/.sst-muted-line/
 * .sst-eyebrow-row/.sst-eyebrow-label/.sst-btn family — not redefined
 * here. Every padding/max-width/gap carries !important and every flex
 * property (direction/wrap/shrink/basis) is explicit — lessons learned
 * on Fabrics/Boutique, where Elementor's own generated CSS and
 * container defaults (column direction, wrap, 10px padding, ~20px
 * gap, percentage-width-plus-gap overflow) silently won without them.
 *
 * "Custom & Bespoke" is deliberately built as an unnumbered H3 closing
 * panel, NOT a 7th numbered row — confirmed via direct inspection of
 * the live source's own DOM structure (own bg-paper-warm container,
 * own type scale, no eyebrow number, no Sizes list), matching
 * SOURCE_AUDIT_PHASE1.md §5 exactly.
 * ========================================================================= */

.sst-products-page { padding: 0 !important; margin: 0 !important; gap: 0 !important; }

/* --- Hero — identical geometry to Fabrics/Boutique's hero ------------------ */
.sst-products-hero {
	padding: 80px var(--sst-pad) 64px !important;
	gap: 0 !important;
}
@media (min-width: 1025px) {
	.sst-products-hero { padding: 112px var(--sst-pad) 80px !important; }
}
.sst-products-h1 { margin: 8px 0 0 !important; max-width: 1024px !important; } /* 8 = 32 (mt-8) minus the shared eyebrow-row's own 24px margin-bottom */
.sst-products-intro { max-width: 672px !important; margin: 32px 0 0 !important; }
.sst-products-intro p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 29.25px;
	color: var(--sst-ink-soft);
	margin: 0;
}

/* --- Body section ----------------------------------------------------------- */
.sst-products-body {
	padding: 64px var(--sst-pad) !important;
	gap: 0 !important;
	/* Same consistent ~128px footer-transition gap measured on the
	 * Fabrics and Boutique pages — nothing else sits between the last
	 * content section and the (shared, separately-approved) Footer
	 * template in the source DOM on any page checked so far. */
	margin-bottom: 128px !important;
}
@media (min-width: 1025px) {
	.sst-products-body { padding: 96px var(--sst-pad) !important; }
}
.sst-products-rows {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--sst-ink);
}

/* --- Each numbered row ------------------------------------------------------
 * Stacks (number, name, desc, sizes) at tablet/mobile — Elementor's
 * own container default direction is already column, matching the
 * source's grid-cols-1 below lg. Row layout (4 columns) only at
 * desktop, using flex-grow ratios matching the measured pixel widths
 * (69:421:421:304) rather than percentages — a fixed-percentage split
 * plus this row's own gap would overflow the row, exactly as found
 * and fixed on the Boutique page's image/text columns. */
.sst-product-row {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 24px !important;
	padding: 40px 0 !important;
	border-bottom: 1px solid var(--sst-rule);
}
@media (min-width: 1025px) {
	/* align-items:stretch (flexbox default) matches the source's own
	 * grid behavior (computed alignItems:"normal" = stretch for grid
	 * items) — confirmed via direct inspection, NOT items-center as
	 * assumed from a different row elsewhere on the site. All 4 columns
	 * share the row's full height; content still starts at the top
	 * since text doesn't self-center, so this is visually identical to
	 * flex-start but structurally correct. */
	.sst-product-row { flex-direction: row !important; gap: 48px !important; padding: 56px 0 !important; align-items: stretch !important; }
}
.sst-product-num {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	line-height: 16.5px;
	letter-spacing: 3.85px;
	text-transform: uppercase;
	color: var(--sst-muted);
	width: 100%;
	flex-shrink: 0 !important;
}
@media (min-width: 1025px) {
	.sst-product-num { flex: 69 0 0% !important; width: auto !important; }
}
.sst-product-name-col, .sst-product-desc-col, .sst-product-sizes-col {
	width: 100%;
	flex-shrink: 0 !important;
	padding: 0 !important;
	gap: 0 !important; /* .sst-product-sizes-col has 2 children (label +
		list) — same recurring default ~20px Elementor flex-gap bug,
		stacking on top of the label's own margin-bottom and adding 8px
		of unwanted height to every row. */
}
@media (min-width: 1025px) {
	.sst-product-name-col { flex: 421 0 0% !important; width: auto !important; }
	.sst-product-desc-col { flex: 421 0 0% !important; width: auto !important; }
	.sst-product-sizes-col { flex: 304 0 0% !important; width: auto !important; }
}
.sst-product-name {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sst-ink);
	margin: 0 !important;
	font-size: 36px;
	line-height: 34.2px;
	letter-spacing: -0.72px;
}
@media (min-width: 1025px) {
	.sst-product-name { font-size: 60px; line-height: 57px; letter-spacing: -1.2px; }
}
.sst-product-desc div {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
	color: var(--sst-ink-soft);
}
.sst-product-sizes-label { margin-bottom: 12px !important; } /* mb-3 */
.sst-product-sizes-list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 6px; /* space-y-1.5 */
}
.sst-product-size-item {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.08px;
	color: var(--sst-ink);
	display: flex;
	align-items: center;
	gap: 8px; /* gap-2 */
}
.sst-product-size-item::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 1px;
	background: rgba(11, 11, 11, 0.4);
	flex-shrink: 0;
}

/* --- Custom & Bespoke closing panel ----------------------------------------- */
.sst-product-custom-row {
	display: flex !important;
	flex-direction: column !important;
	gap: 32px !important; /* gap-8 */
	padding: 0 !important;
	margin-top: 64px !important; /* mt-16 */
}
@media (min-width: 1025px) {
	.sst-product-custom-row { flex-direction: row !important; align-items: stretch !important; }
}
.sst-product-custom-panel {
	width: 100%;
	flex-shrink: 0 !important;
	background: var(--sst-paper-warm);
	padding: 40px !important; /* p-10 */
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}
@media (min-width: 1025px) {
	.sst-product-custom-panel { flex: 1 0 0% !important; width: auto !important; padding: 56px !important; justify-content: center !important; } /* lg:p-14 */
}
.sst-product-custom-h3 {
	margin: 0 !important;
	font-size: 30px;
	line-height: 36px;
	letter-spacing: -0.6px;
}
@media (min-width: 1025px) {
	.sst-product-custom-h3 { font-size: 36px; line-height: 40px; letter-spacing: -0.72px; }
}
.sst-product-custom-desc {
	margin-top: 16px; /* mt-4 */
}
.sst-product-custom-desc p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: var(--sst-ink-soft);
	margin: 0;
}
.sst-product-custom-btn { margin-top: 32px; } /* mt-8, wrapper only — chrome below */
/* Overrides Home's @media(max-width:1024px) .sst-btn{width:100%} rule
 * (meant for Home's own hero/CTA buttons) — same leak already found
 * and fixed on the Fabrics and Boutique CTA buttons. Confirmed via
 * live-to-live diff: source button stays its natural ~288px content
 * width inside its 720px panel at 768px, never stretching full-width. */
.sst-product-custom-btn.sst-btn,
.sst-product-custom-btn.sst-btn .elementor-button {
	width: auto !important;
}
.sst-product-custom-btn .elementor-button {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	padding: 16px 32px; /* py-4 px-8 */
	background: var(--sst-ink);
	color: var(--sst-paper);
	border: none;
}
.sst-product-custom-btn .elementor-button:hover { background: var(--sst-ink-soft); }
.sst-product-custom-image-wrap {
	position: relative;
	width: 100%;
	flex-shrink: 0 !important;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	padding: 0 !important;
}
@media (min-width: 1025px) {
	.sst-product-custom-image-wrap { flex: 1 0 0% !important; width: auto !important; aspect-ratio: auto; }
}
.sst-product-custom-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0 !important;
}
.sst-product-custom-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
 * SERVICES PAGE
 * Measured from reference-measurements/05-services__*.json + direct DOM
 * inspection of the live source. Shares .sst-h1/.sst-muted-line/
 * .sst-eyebrow-row/.sst-eyebrow-label/.sst-btn family — not redefined
 * here. Every padding/max-width/gap carries !important and every flex
 * property (direction/wrap/shrink/basis) is explicit — established
 * lessons from Fabrics/Boutique/Products, where Elementor's own
 * generated CSS and container defaults (column direction, wrap, 10px
 * padding, ~20px gap, flex min-height:auto, percentage-width-plus-gap
 * overflow) silently won without them.
 *
 * Grid breakpoints are the source's own md(768)/lg(1024) pair — 1 col
 * below 768, 2 cols 768-1023, 3 cols 1024+ — deliberately NOT the
 * 1024-only pair used elsewhere on this site (matches the source's
 * own "md:grid-cols-2 lg:grid-cols-3", confirmed via direct
 * measurement: 2 columns already at exactly 768px).
 * ========================================================================= */

.sst-services-page { padding: 0 !important; margin: 0 !important; gap: 0 !important; }

/* --- Hero — identical geometry to Fabrics/Boutique/Products hero --------- */
.sst-services-hero {
	padding: 80px var(--sst-pad) 64px !important;
	gap: 0 !important;
}
@media (min-width: 1025px) {
	.sst-services-hero { padding: 112px var(--sst-pad) 80px !important; }
}
.sst-services-h1 { margin: 8px 0 0 !important; max-width: 1024px !important; } /* 8 = 32 (mt-8) minus the shared eyebrow-row's own 24px margin-bottom */
.sst-services-intro { max-width: 672px !important; margin: 32px 0 0 !important; }
.sst-services-intro p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 29.25px;
	color: var(--sst-ink-soft);
	margin: 0;
}

/* --- Body: 6-card hairline grid --------------------------------------------- */
.sst-services-body {
	padding: 64px var(--sst-pad) !important;
	gap: 0 !important;
	/* NOTE: unlike Fabrics/Boutique/Products, this is NOT the last
	 * section before the footer here — the closing CTA section follows
	 * it directly with ZERO gap (confirmed via live-to-live diff), so
	 * the footer-transition margin belongs on .sst-services-cta below,
	 * not here. */
}
@media (min-width: 1025px) {
	.sst-services-body { padding: 96px var(--sst-pad) !important; }
}
.sst-service-grid {
	display: grid !important;
	grid-template-columns: repeat(1, 1fr) !important;
	gap: 1px !important;
	padding: 0 !important;
	background: var(--sst-rule);
	border: 1px solid var(--sst-rule);
}
@media (min-width: 768px) {
	.sst-service-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1025px) {
	.sst-service-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
.sst-service-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	background: var(--sst-paper);
	padding: 32px !important;
}
@media (min-width: 1025px) {
	.sst-service-card { padding: 40px !important; }
}
.sst-service-top-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 0 !important;
}
.sst-service-num {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 300;
	font-size: 30px;
	line-height: 36px;
	letter-spacing: 0.08px;
	color: var(--sst-ink);
}
.sst-service-name {
	margin: 32px 0 0 !important; /* mt-8 */
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sst-ink);
	font-size: 30px;
	line-height: 36px;
	letter-spacing: -0.6px;
}
@media (min-width: 1025px) {
	.sst-service-name { font-size: 36px; line-height: 40px; letter-spacing: -0.72px; }
}
.sst-service-desc { margin-top: 16px; } /* mt-4 */
.sst-service-desc div {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
	color: var(--sst-ink-soft);
}
.sst-service-list-wrap { margin-top: 24px; } /* mt-6 */
.sst-service-list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px; /* space-y-2 */
}
.sst-service-list-item {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.08px;
	color: var(--sst-ink);
	display: flex;
	align-items: center;
	gap: 12px; /* gap-3 */
}
.sst-service-list-item::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 1px;
	background: var(--sst-ink); /* full ink, NOT the 30%-opacity eyebrow rule color */
	flex-shrink: 0;
}

/* --- Closing "Tell us about the event." (dark) ------------------------------ */
.sst-services-cta {
	display: flex !important;
	flex-direction: column !important;
	gap: 32px !important; /* below-lg fallback; overridden to a real row below */
	background: var(--sst-ink);
	color: var(--sst-paper);
	padding: 80px var(--sst-pad) !important;
	align-items: flex-start !important;
	/* This IS the last section before the footer — same consistent
	 * ~128px footer-transition gap measured on every prior page
	 * (Fabrics/Boutique/Products), moved here instead of the body
	 * section above (which sits flush against this one with 0 gap). */
	margin-bottom: 128px !important;
}
@media (min-width: 1025px) {
	.sst-services-cta {
		flex-direction: row !important;
		align-items: flex-end !important;
		gap: 48px !important;
		padding: 112px var(--sst-pad) !important;
	}
}
.sst-services-cta-left {
	width: 100%;
	flex-shrink: 0 !important;
	padding: 0 !important;
}
@media (min-width: 1025px) {
	.sst-services-cta-left { flex: 765 0 0% !important; width: auto !important; } /* measured 1.4fr:1fr split */
}
.sst-services-cta-h2 {
	margin: 0 !important;
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sst-paper);
	line-height: 0.95;
	font-size: 36px;
	letter-spacing: -0.72px;
}
@media (min-width: 640px) { /* Tailwind's own "sm" breakpoint for this element (text-4xl sm:text-5xl lg:text-7xl) — not the site's usual 480/1024 pair */
	.sst-services-cta-h2 { font-size: 48px; letter-spacing: -0.96px; }
}
@media (min-width: 1025px) {
	.sst-services-cta-h2 { font-size: 72px; letter-spacing: -1.44px; }
}
.sst-services-cta-right {
	width: 100%;
	flex-shrink: 0 !important;
	padding: 0 !important;
}
@media (min-width: 1025px) {
	.sst-services-cta-right { flex: 547 0 0% !important; width: auto !important; }
}
.sst-services-cta-text { max-width: 448px !important; margin-bottom: 32px !important; } /* max-w-md, mb-8 */
.sst-services-cta-text p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: rgba(245, 243, 240, 0.7);
	margin: 0;
}
.sst-services-cta-buttons {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 16px !important; /* gap-4 */
	padding: 0 !important;
}
.sst-services-cta-buttons .sst-btn,
.sst-services-cta-buttons .sst-btn .elementor-button {
	width: auto !important; /* overrides Home's @media(max-width:1024px)
		.sst-btn{width:100%} rule — same leak already found and fixed on
		Fabrics/Boutique/Products */
}
.sst-services-cta-solid .elementor-button {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	padding: 16px 32px; /* py-4 px-8 */
	background: var(--sst-paper);
	color: var(--sst-ink);
	border: none;
}
.sst-services-cta-solid .elementor-button:hover { background: rgba(245, 243, 240, 0.9); }
.sst-services-cta-outline .elementor-button {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	padding: 16px 32px;
	background: transparent;
	color: var(--sst-paper);
	border: 1px solid var(--sst-paper);
}
.sst-services-cta-outline .elementor-button:hover { background: var(--sst-paper); color: var(--sst-ink); }

/* =========================================================================
 * ABOUT PAGE
 * Measured from reference-measurements/06-about__*.json + direct DOM
 * inspection of the live source. Shares .sst-h1/.sst-muted-line/
 * .sst-eyebrow-row/.sst-eyebrow-label/.sst-btn family — not redefined
 * here. Every padding/max-width/gap carries !important and every flex
 * property (direction/wrap/shrink/basis) is explicit — established
 * lessons from every prior page.
 * ========================================================================= */

.sst-about-page { padding: 0 !important; margin: 0 !important; gap: 0 !important; }

/* --- Hero — identical geometry to every other page's hero ------------------ */
.sst-about-hero {
	padding: 80px var(--sst-pad) 64px !important;
	gap: 0 !important;
}
@media (min-width: 1025px) {
	.sst-about-hero { padding: 112px var(--sst-pad) 80px !important; }
}
.sst-about-h1 { margin: 8px 0 0 !important; max-width: 1024px !important; } /* 8 = 32 (mt-8) minus the shared eyebrow-row's own 24px margin-bottom */
.sst-about-intro { max-width: 672px !important; margin: 32px 0 0 !important; }
.sst-about-intro p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 29.25px;
	color: var(--sst-ink-soft);
	margin: 0;
}

/* --- Principles: 12-col grid, 5:7 split ------------------------------------- */
.sst-principles-section {
	display: flex !important;
	flex-direction: column !important;
	gap: 48px !important; /* below-lg fallback; overridden to a real row below */
	padding: 64px var(--sst-pad) !important;
}
@media (min-width: 1025px) {
	.sst-principles-section {
		flex-direction: row !important;
		gap: 48px !important;
		padding: 96px var(--sst-pad) !important;
	}
}
.sst-principles-label-col { width: 100%; flex-shrink: 0 !important; padding: 0 !important; }
@media (min-width: 1025px) {
	/* measured pixel split (538.64:773.3), not a rounded 5:7 — a fixed
	 * percentage plus this row's own gap would overflow the row,
	 * exactly as found and fixed on Boutique/Products/Services. */
	.sst-principles-label-col { flex: 539 0 0% !important; width: auto !important; }
}
.sst-principles-content-col {
	width: 100%;
	flex-shrink: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 48px !important; /* space-y-12 */
}
@media (min-width: 1025px) {
	.sst-principles-content-col { flex: 773 0 0% !important; width: auto !important; }
}
.sst-principle-block {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: 32px 0 0 !important; /* pt-8 */
	border-top: 1px solid var(--sst-ink);
}
.sst-principle-title {
	margin: 0 !important;
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sst-ink);
	font-size: 30px;
	line-height: 36px;
	letter-spacing: -0.6px;
}
@media (min-width: 1025px) {
	.sst-principle-title { font-size: 36px; line-height: 40px; letter-spacing: -0.72px; }
}
.sst-principle-desc { margin-top: 16px !important; max-width: 672px !important; } /* mt-4, max-w-2xl */
.sst-principle-desc p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
	color: var(--sst-ink-soft);
	margin: 0;
}

/* --- Manufacturing image: full-bleed, aspect-16/7 --------------------------- */
.sst-about-manufacturing-section {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	padding: 0 !important;
}
.sst-about-manufacturing-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0 !important;
}
.sst-about-manufacturing-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Milestones: 4-col hairline grid ---------------------------------------- */
.sst-milestones-section {
	padding: 64px var(--sst-pad) !important;
	gap: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}
@media (min-width: 1025px) {
	.sst-milestones-section { padding: 96px var(--sst-pad) !important; }
}
.sst-milestones-label { margin: 0 !important; }
.sst-milestones-grid {
	display: grid !important;
	grid-template-columns: repeat(1, 1fr) !important;
	gap: 1px !important;
	padding: 0 !important;
	margin-top: 32px !important; /* mt-8 */
	background: var(--sst-rule);
	border: 1px solid var(--sst-rule);
}
@media (min-width: 768px) {
	.sst-milestones-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1025px) {
	.sst-milestones-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
.sst-milestone-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	background: var(--sst-paper);
	padding: 32px !important;
}
@media (min-width: 1025px) {
	.sst-milestone-card { padding: 40px !important; }
}
.sst-milestone-year {
	margin: 0 !important;
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 300;
	color: var(--sst-ink);
	font-size: 48px;
	line-height: 48px;
}
@media (min-width: 1025px) {
	.sst-milestone-year { font-size: 60px; line-height: 60px; }
}
.sst-milestone-desc { margin-top: 24px; } /* mt-6 */
.sst-milestone-desc p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 22.75px;
	color: var(--sst-ink-soft);
	margin: 0;
}

/* --- Closing "Want a tour of the plant?" (bg-paper-warm) -------------------- */
.sst-about-closing-section {
	display: flex !important;
	flex-direction: column !important;
	gap: 48px !important; /* below-lg fallback; overridden to a real row below */
	background: var(--sst-paper-warm);
	padding: 80px var(--sst-pad) !important;
	align-items: center !important;
}
@media (min-width: 1025px) {
	.sst-about-closing-section {
		flex-direction: row !important;
		gap: 48px !important;
		padding: 112px var(--sst-pad) !important;
	}
}
.sst-about-closing-image-wrap {
	position: relative;
	width: 100%;
	flex-shrink: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	padding: 0 !important;
}
@media (min-width: 1025px) {
	.sst-about-closing-image-wrap { flex: 1 0 0% !important; width: auto !important; }
}
.sst-about-closing-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0 !important;
}
.sst-about-closing-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sst-about-closing-content {
	width: 100%;
	flex-shrink: 0 !important;
	padding: 0 !important;
	gap: 0 !important; /* same recurring default ~20px Elementor flex-gap
		bug — this column has 3 children (h2/desc/button), each with its
		own explicit margin-top already; an unzeroed default gap here
		was stacking on top of both, adding ~36px of unwanted height. */
}
@media (min-width: 1025px) {
	.sst-about-closing-content { flex: 1 0 0% !important; width: auto !important; }
}
.sst-about-closing-h2 {
	margin: 0 !important;
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sst-ink);
	line-height: 0.95;
	font-size: 36px;
	letter-spacing: -0.72px;
}
@media (min-width: 1025px) {
	.sst-about-closing-h2 { font-size: 60px; letter-spacing: -1.2px; }
}
.sst-about-closing-desc { margin-top: 24px !important; max-width: 448px !important; } /* mt-6, max-w-md */
.sst-about-closing-desc p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: var(--sst-ink-soft);
	margin: 0;
}
.sst-about-closing-btn { margin-top: 32px; } /* mt-8, wrapper only — chrome below */
.sst-about-closing-btn.sst-btn,
.sst-about-closing-btn.sst-btn .elementor-button {
	width: auto !important; /* overrides Home's @media(max-width:1024px)
		.sst-btn{width:100%} rule — same leak already found and fixed on
		every prior page reusing .sst-btn */
}
.sst-about-closing-btn .elementor-button {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	padding: 16px 32px; /* py-4 px-8 */
	background: var(--sst-ink);
	color: var(--sst-paper);
	border: none;
}
.sst-about-closing-btn .elementor-button:hover { background: var(--sst-ink-soft); }

/* This IS the last section before the footer — same consistent ~128px
 * footer-transition gap measured on every prior page. */
.sst-about-closing-section { margin-bottom: 128px !important; }

/* =========================================================================
 * FAQ PAGE
 * Measured from reference-measurements/07-faq__*.json + direct DOM
 * inspection of the live source. Shares .sst-h1/.sst-muted-line/
 * .sst-eyebrow-row/.sst-eyebrow-label/.sst-btn family — not redefined
 * here. Every padding/max-width/gap carries !important — established
 * lessons from every prior page.
 *
 * Uses Elementor core's native Nested Accordion widget (confirmed
 * present at wp-content/plugins/elementor/modules/nested-accordion),
 * NOT a custom accordion. Behavior settings (all_collapsed, multiple
 * open, 0ms content-reveal animation) are set in the widget's own
 * JSON settings in 16-build-faq.php, confirmed via direct interactive
 * testing of the live source — not guessed.
 * ========================================================================= */

.sst-faq-page { padding: 0 !important; margin: 0 !important; gap: 0 !important; }

/* --- Hero — identical geometry to every other page's hero, still the
 * site's usual 1600px container (only the body section below is
 * narrower) ---------------------------------------------------------------- */
.sst-faq-hero {
	padding: 80px var(--sst-pad) 64px !important;
	gap: 0 !important;
}
@media (min-width: 1025px) {
	.sst-faq-hero { padding: 112px var(--sst-pad) 80px !important; }
}
.sst-faq-h1 { margin: 8px 0 0 !important; max-width: 1024px !important; } /* 8 = 32 (mt-8) minus the shared eyebrow-row's own 24px margin-bottom */
.sst-faq-intro { max-width: 672px !important; margin: 32px 0 0 !important; }
.sst-faq-intro p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 29.25px;
	color: var(--sst-ink-soft);
	margin: 0;
}

/* --- Body: narrower 1100px container (confirmed via direct inspection,
 * NOT the site's usual 1600px) — hero above keeps the normal width. -------- */
.sst-faq-body {
	padding: 0 !important; /* the max-width + padding live TOGETHER on
		.sst-faq-container below, matching the source's single div
		("mx-auto max-w-[1100px] px-6 lg:px-10 py-16 lg:py-24") — this
		section is just a full-bleed wrapper. */
	gap: 0 !important;
	margin-bottom: 128px !important; /* last section before the footer —
		same consistent ~128px transition gap measured on every prior page */
}
.sst-faq-container {
	max-width: 1100px !important;
	margin: 0 auto !important;
	padding: 64px var(--sst-pad) !important;
	width: 100%;
	gap: 0 !important; /* same recurring default ~20px Elementor flex-gap
		bug — this container has 2 children (accordion widget + CTA),
		and the gap was stacking on top of the CTA's own margin-top. */
}
@media (min-width: 1025px) {
	.sst-faq-container { padding: 96px var(--sst-pad) !important; }
}

/* --- Accordion --------------------------------------------------------------
 * Reach-through selectors are safe here (unlike the earlier
 * text-editor/e-con-inner gotcha) because every target is a genuine
 * Elementor-generated element with no raw multi-node inline content. */
.sst-faq-accordion,
.sst-faq-accordion .e-n-accordion {
	border-top: 1px solid var(--sst-ink);
}
.sst-faq-accordion .e-n-accordion-item {
	border-bottom: 1px solid var(--sst-rule);
	border-top: none !important; /* Elementor default per-item border, uncleaned */
}
.sst-faq-accordion .e-n-accordion-item-title {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 24px !important;
	padding: 24px 0 !important; /* py-6 */
	cursor: pointer;
	list-style: none;
	border: none !important; /* Elementor's own default gives the summary
		a full 1px rgb(213,216,220) box on all 4 sides — confirmed via
		computed-style inspection, NOT something this stylesheet set.
		The only wanted border is .e-n-accordion-item's own
		border-bottom (the row separator), already correct. */
}
.sst-faq-accordion .e-n-accordion-item-title::-webkit-details-marker { display: none; }
@media (min-width: 1025px) {
	.sst-faq-accordion .e-n-accordion-item-title { gap: 40px !important; padding: 32px 0 !important; } /* py-8, gap-10 */
}
/* Leading "01" number — reproduced via a CSS counter rather than baked
 * into the (editable) item_title field. decimal-leading-zero
 * zero-pads to two digits automatically. */
.sst-faq-accordion .e-n-accordion {
	counter-reset: sst-faq-counter;
}
.sst-faq-accordion .e-n-accordion-item-title::before {
	counter-increment: sst-faq-counter;
	content: counter(sst-faq-counter, decimal-leading-zero);
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 300;
	font-size: 14px;
	color: var(--sst-muted);
	flex-shrink: 0;
	margin-top: 4px;
}
.sst-faq-accordion .e-n-accordion-item-title-header {
	flex: 1 1 auto;
	padding: 0 !important;
}
.sst-faq-accordion .e-n-accordion-item-title-text {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 30px;
	letter-spacing: 0.08px;
	color: var(--sst-ink);
	text-transform: none;
}
@media (min-width: 1025px) {
	.sst-faq-accordion .e-n-accordion-item-title-text { font-size: 30px; line-height: 37.5px; }
}
/* Replace Elementor's own plus/minus SVG icon-swap with the source's
 * exact treatment: a single "+" that rotates 45° into "×" — confirmed
 * via direct inspection (transition: transform 0.15s
 * cubic-bezier(0.4,0,0.2,1), no separate "close" glyph). */
.sst-faq-accordion .e-n-accordion-item-title-icon {
	flex-shrink: 0;
	/* shrink-wrapped to the glyph's own natural size (NOT a fixed
	 * 24x24px box, which was measured too wide by ~8px and stole that
	 * width from the question-text column — confirmed via live-to-live
	 * diff: source icon span is plain shrink-to-fit text, ~16px). */
	order: 2 !important; /* Elementor's own default is order:-1 (icon-left
		convention) — source has number, question, THEN icon, confirmed
		via direct inspection. */
}
.sst-faq-accordion .e-n-accordion-item-title-header { order: 1 !important; }
.sst-faq-accordion .e-n-accordion-item-title-icon .e-opened,
.sst-faq-accordion .e-n-accordion-item-title-icon .e-closed {
	display: none !important; /* hide Elementor's built-in plus/minus SVGs */
}
.sst-faq-accordion .e-n-accordion-item-title-icon::before {
	content: '+';
	display: inline-block;
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 1;
	color: var(--sst-ink);
	transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: center;
}
.sst-faq-accordion details[open] .e-n-accordion-item-title-icon::before {
	transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
	.sst-faq-accordion .e-n-accordion-item-title-icon::before { transition: none; }
}
.sst-faq-answer {
	padding: 0 48px 32px 56px !important; /* pr-12, pb-8, pl-[3.5rem] */
	border: none !important; /* same Elementor default full-box border as
		the summary — confirmed via computed-style inspection, not
		wanted on the answer wrapper either. */
}
@media (min-width: 1025px) {
	.sst-faq-answer { padding: 0 48px 40px 80px !important; } /* pb-10, pl-[5rem] */
}
.sst-faq-answer-text { max-width: 672px; }
.sst-faq-answer-text p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
	color: var(--sst-ink-soft);
	margin: 0;
}
@media (min-width: 1025px) {
	.sst-faq-answer-text p { font-size: 18px; line-height: 29.25px; }
}

/* --- Closing "Still curious?" CTA ------------------------------------------- */
.sst-faq-cta {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0 !important;
	margin-top: 64px !important; /* mt-16 */
	text-align: center;
}
.sst-faq-cta-label { margin: 0 !important; }
.sst-faq-cta-btn { margin-top: 24px; } /* mt-6, wrapper only — chrome below */
.sst-faq-cta-btn.sst-btn,
.sst-faq-cta-btn.sst-btn .elementor-button {
	width: auto !important; /* overrides Home's @media(max-width:1024px)
		.sst-btn{width:100%} rule — same leak already found and fixed on
		every prior page reusing .sst-btn */
}
.sst-faq-cta-btn .elementor-button {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	padding: 20px 40px; /* py-5 px-10 */
	background: var(--sst-ink);
	color: var(--sst-paper);
	border: none;
}
.sst-faq-cta-btn .elementor-button:hover { background: var(--sst-ink-soft); }

/* =========================================================================
 * CONTACT PAGE
 * Measured from reference-measurements/09-contact__*.json + direct DOM
 * inspection of the live source. Shares .sst-h1/.sst-muted-line/
 * .sst-eyebrow-row/.sst-eyebrow-label family — not redefined here.
 * Every padding/max-width/gap carries !important and every flex
 * property is explicit — established lessons from every prior page.
 * ========================================================================= */

.sst-contact-page { padding: 0 !important; margin: 0 !important; gap: 0 !important; }

/* --- Hero — identical geometry to every other page's hero ------------------ */
.sst-contact-hero {
	padding: 80px var(--sst-pad) 64px !important;
	gap: 0 !important;
}
@media (min-width: 1025px) {
	.sst-contact-hero { padding: 112px var(--sst-pad) 80px !important; }
}
.sst-contact-h1 { margin: 8px 0 0 !important; max-width: 1024px !important; } /* 8 = 32 (mt-8) minus the shared eyebrow-row's own 24px margin-bottom */
.sst-contact-intro { max-width: 672px !important; margin: 32px 0 0 !important; }
.sst-contact-intro p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 29.25px;
	color: var(--sst-ink-soft);
	margin: 0;
}

/* --- Body: info column (5/12) + form column (7/12) -------------------------- */
.sst-contact-body {
	padding: 64px var(--sst-pad) !important;
	gap: 40px !important; /* below-lg fallback; overridden to a real row below */
	margin-bottom: 128px !important; /* last section before the footer —
		same consistent ~128px transition gap measured on every prior page */
}
@media (min-width: 1025px) {
	.sst-contact-body {
		padding: 96px var(--sst-pad) !important;
		flex-direction: row !important;
		gap: 64px !important; /* gap-16 */
	}
}
.sst-contact-info-col {
	width: 100%;
	flex-shrink: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 48px !important; /* space-y-12 */
}
@media (min-width: 1025px) {
	/* measured pixel split (529.33:766.67), not a rounded 5:7. Uses a
	 * FIXED-PIXEL flex-basis with zero grow (flex: 0 0 529px), not the
	 * percentage-basis-plus-growth pattern used on Boutique/Products/
	 * Services/About — for THIS row specifically (form-heavy content in
	 * the sibling column), flex: 529 0 0% / flex: 767 0 0% produced a
	 * consistent ~40px proportional bias (489/807 instead of 529/767)
	 * that survived min-width:0 on both the flex items and their grid
	 * descendants. Root cause not fully identified; validated via live
	 * DOM injection that the fixed-pixel-basis form sidesteps it
	 * entirely and renders the exact measured split. */
	.sst-contact-info-col { flex: 0 0 529px !important; width: auto !important; min-width: 0 !important; }
}
.sst-contact-info-block, .sst-contact-hours-block {
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}
.sst-contact-hours-block {
	padding-top: 32px !important; /* pt-8 */
	border-top: 1px solid var(--sst-rule);
}
.sst-contact-label { margin: 0 !important; }
.sst-contact-phone-link, .sst-contact-email-link { margin-top: 12px; } /* mt-3 */
.sst-contact-phone-link a {
	display: block;
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 300;
	color: var(--sst-ink);
	text-decoration: none;
	transition: opacity 0.15s;
	font-size: 48px;
	line-height: 1;
}
@media (min-width: 1025px) {
	.sst-contact-phone-link a { font-size: 60px; }
}
.sst-contact-phone-link a:hover { opacity: 0.7; }
.sst-contact-email-link a {
	display: block;
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 300;
	color: var(--sst-ink);
	text-decoration: none;
	transition: opacity 0.15s;
	font-size: 24px;
	line-height: 32px;
	word-break: break-all;
}
@media (min-width: 1025px) {
	.sst-contact-email-link a { font-size: 30px; line-height: 36px; }
}
.sst-contact-email-link a:hover { opacity: 0.7; }
.sst-contact-note { margin-top: 8px; } /* mt-2 */
.sst-contact-note p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	color: var(--sst-ink-soft);
	margin: 0;
}
.sst-contact-address {
	margin: 12px 0 0 !important; /* mt-3 */
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 300;
	color: var(--sst-ink);
	line-height: 1.2;
	font-size: 24px;
}
@media (min-width: 1025px) {
	.sst-contact-address { font-size: 30px; }
}
.sst-contact-hours-text { margin-top: 12px; } /* mb-3 handled by label margin above; this is the value block */
.sst-contact-hours-text p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	color: var(--sst-ink);
	margin: 0;
}
.sst-contact-hours-text p.sst-muted { color: var(--sst-ink-soft); }
/* The source's bordered box wraps BOTH the "Send a brief" eyebrow AND
 * the form fields together (one <form class="border border-ink p-8
 * lg:p-12 space-y-6 bg-paper">...), so the border/padding/background
 * live on this wrapping container, not on the form widget itself
 * (which stays borderless/transparent — see .sst-contact-form below). */
.sst-contact-form-col {
	width: 100%;
	flex-shrink: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important; /* space-y-6 */
	border: 1px solid var(--sst-ink);
	background: var(--sst-paper);
	padding: 32px !important; /* p-8 */
}
@media (min-width: 1025px) {
	.sst-contact-form-col {
		/* Fixed-pixel flex-basis with zero grow — see the matching note
		 * on .sst-contact-info-col above. Percentage-basis-plus-growth
		 * (flex: 767 0 0%) was forcing this column to 807px and info-col
		 * down to 489px instead of the measured 529:767 split, even with
		 * min-width:0 on both flex items and their grid descendants. */
		flex: 0 0 767px !important;
		width: auto !important;
		min-width: 0 !important;
		padding: 48px !important; /* lg:p-12 */
	}
}
.sst-contact-form-col > .sst-eyebrow-label { display: block; margin: 0 !important; }

/* --- Elementor Pro Form — overriding its own default styling to match
 * the source's minimalist underline inputs (measured, not guessed):
 * bg-transparent, border-bottom:1px ink (2px on focus, no other border
 * sides, no focus outline/box-shadow), py-3(12px)/px-0, text 16px/24,
 * label 11px/16.5/600/3.85/uppercase muted (reuses .sst-eyebrow-label
 * tokens), grid gap-6(24px), form's own space-y-6(24px) already
 * handled by .sst-contact-form-col's own flex gap above — this widget
 * itself must stay borderless/transparent so its box doesn't double
 * with the wrapping container's. */
.sst-contact-form {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.sst-contact-form .elementor-form-fields-wrapper {
	display: grid !important;
	grid-template-columns: repeat(1, 1fr) !important;
	gap: 24px !important;
	row-gap: 24px !important;
	/* Elementor's own default fields-wrapper carries a negative
	 * row-gutter-compensation margin (0 -5px -10px) meant for its
	 * default (non-grid) column system — left over now that this grid
	 * override replaces it, it was bleeding the wrapper 10px wider than
	 * its container at narrow widths (measured 286px instead of 276px
	 * at 390px viewport). */
	margin: 0 !important;
}
@media (min-width: 768px) {
	.sst-contact-form .elementor-form-fields-wrapper { grid-template-columns: repeat(2, 1fr) !important; }
}
.sst-contact-form .elementor-field-group {
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
}
.sst-contact-form .elementor-col-100 { grid-column: 1 / -1; }
.sst-contact-form .elementor-field-label {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	line-height: 16.5px; /* measured 1.5 ratio — the shared .sst-eyebrow-label
		component never sets its own line-height (every other usage pairs
		it with a fixed-height rule/number, so the browser's tight ~1.0
		default never showed), but here it directly sets each field row's
		height, shortening every row by ~7px without this. */
	letter-spacing: 3.85px;
	text-transform: uppercase;
	color: var(--sst-muted);
	/* Reference measured row height (label-to-input, top-of-label to
	 * bottom-of-input) is 81px; the source's <label class="block"><span
	 * class="eyebrow">...</span><input class="mt-2".../></label> markup
	 * wraps its small eyebrow span inside a label whose OWN inherited
	 * font/line-height (16px/24px, same as the input text) is larger
	 * than the span's, so the browser's inline-formatting-context "strut"
	 * adds real, rendered space above/around the span that a plain
	 * mt-2 (8px) alone doesn't capture. Elementor's markup applies this
	 * class directly to a single <label> with no such wrapping context,
	 * so 8px alone renders 7.5px short — margin increased to the
	 * measured effective gap (15.5px) to match the reference's actual
	 * rendered row height exactly, not just its declared Tailwind class. */
	margin: 0 0 15.5px !important;
	padding: 0 !important;
}
.sst-contact-form .elementor-field,
.sst-contact-form .elementor-field-textual {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--sst-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 12px 0 !important; /* py-3 */
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: var(--sst-ink);
	width: 100% !important;
	transition: border-bottom-width 0.1s;
}
.sst-contact-form .elementor-field::placeholder,
.sst-contact-form .elementor-field-textual::placeholder {
	color: var(--sst-muted);
	opacity: 1;
}
.sst-contact-form .elementor-field:focus,
.sst-contact-form .elementor-field-textual:focus {
	outline: none !important;
	box-shadow: none !important;
	border-bottom-width: 2px !important;
}
.sst-contact-form textarea.elementor-field {
	resize: none;
	min-height: 120px;
	/* Reference's textarea row carries an additional ~8px of rendered
	 * space below the textarea itself (label-wrap bottom sits 8px below
	 * textarea bottom — an inline-strut artifact of its own markup,
	 * distinct from the top-side strut already compensated on the
	 * shared field-label rule above) — matched here via margin-bottom
	 * rather than guessed. */
	margin-bottom: 8px;
}
.sst-contact-form .e-form__buttons {
	padding: 0 !important;
	margin: 0 !important;
}
/* Elementor's own "Column Width" form setting (unset here, defaults to
 * 100%) drives an "elementor-button-align-stretch" class whose real
 * rule sets flex-basis:100% on the button — width:auto alone doesn't
 * override flex-basis. Matches the source's own w-full md:w-auto
 * responsive pattern: full width below 768px, compact/auto at 768+. */
.sst-contact-form .elementor-button {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: none !important;
	background: var(--sst-ink) !important;
	color: var(--sst-paper) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	padding: 20px 40px !important; /* py-5 px-10 */
	fill: var(--sst-paper);
}
@media (min-width: 768px) {
	.sst-contact-form .elementor-button { flex: 0 0 auto !important; width: auto !important; }
}
.sst-contact-form .elementor-button:hover,
.sst-contact-form .elementor-button:focus {
	background: var(--sst-ink-soft) !important;
	color: var(--sst-paper) !important;
}
.sst-contact-form .elementor-button:focus-visible {
	outline: 2px solid var(--sst-ink);
	outline-offset: 2px;
}
/* Success/error messages — keep Elementor's own accessible live-region
 * behavior, only restyle typography to match the site. */
.sst-contact-form .elementor-message {
	font-family: 'Hind', system-ui, sans-serif;
	font-size: 14px;
	margin-top: 16px !important;
}
.sst-contact-form .elementor-message.elementor-message-success { color: #2e5c3a; }
.sst-contact-form .elementor-message.elementor-message-danger { color: #8a2c2c; }

/* ============================================================
 * ORDER ONLINE PAGE
 * ============================================================ */
.sst-order-page { padding: 0 !important; margin: 0 !important; gap: 0 !important; }

/* --- Hero -------------------------------------------------------------- */
.sst-order-hero { padding: 80px var(--sst-pad) 64px !important; gap: 0 !important; }
@media (min-width: 1025px) { .sst-order-hero { padding: 112px var(--sst-pad) 80px !important; } }
.sst-order-h1 { margin: 8px 0 0 !important; max-width: 1024px !important; }
.sst-order-intro { max-width: 672px !important; margin: 32px 0 0 !important; }
.sst-order-intro p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 29.25px;
	color: var(--sst-ink-soft);
	margin: 0;
}

/* --- 3-step hairline grid (standard 1600px container, unlike the
 * narrower form section below) ------------------------------------------ */
.sst-order-steps {
	padding: 64px var(--sst-pad) !important;
	gap: 0 !important;
}
@media (min-width: 1025px) { .sst-order-steps { padding: 96px var(--sst-pad) !important; } }
.sst-steps-grid {
	display: grid !important;
	grid-template-columns: repeat(1, 1fr) !important;
	gap: 1px !important;
	padding: 0 !important;
	background: var(--sst-rule);
	border: 1px solid var(--sst-rule);
}
@media (min-width: 768px) {
	/* Confirmed via direct measurement (grids[1].templateColumns at
	 * 768px already shows 3 near-equal columns) — this grid jumps
	 * straight from 1 to 3 columns at Tailwind's md breakpoint, unlike
	 * Services' service-grid, which has an intermediate 2-column state
	 * at md before reaching 3 at lg. Do not add that intermediate step
	 * here — it would not match the source. */
	.sst-steps-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
.sst-step-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	background: var(--sst-paper);
	padding: 32px !important;
}
@media (min-width: 1025px) { .sst-step-card { padding: 48px !important; } }
.sst-step-num {
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	color: var(--sst-ink);
	font-size: 48px;
	line-height: 1;
}
@media (min-width: 1025px) { .sst-step-num { font-size: 60px; } }
.sst-step-title {
	margin: 32px 0 0 !important; /* mt-8 */
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 400;
	text-transform: uppercase; /* the source's "font-display" utility
		itself carries uppercase (confirmed via the reference screenshot
		showing "PICK YOUR FABRICS" etc. in caps, despite no explicit
		Tailwind uppercase class on this h3) — matches every other
		font-display heading on the site. */
	color: var(--sst-ink);
	font-size: 24px;
	line-height: 1.2;
}
@media (min-width: 1025px) { .sst-step-title { font-size: 30px; } }
.sst-step-desc { margin-top: 16px; } /* mt-4 */
.sst-step-desc p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px; /* leading-relaxed */
	color: var(--sst-ink-soft);
	margin: 0;
}

/* --- Order form section (bg-paper-warm, narrower 1100px container,
 * same pattern as .sst-faq-body/.sst-faq-container) — the closing "Or"
 * block lives INSIDE this same section in the source (a sibling <div>
 * of <form>, not its own <section>), so the footer-transition margin
 * belongs here, on the outer section, not on the form container. ------- */
.sst-order-form-section {
	background: var(--sst-paper-warm);
	padding: 0 !important;
	gap: 0 !important;
	margin-bottom: 128px !important; /* last section before the footer —
		same consistent ~128px transition gap measured on every prior page */
}
.sst-order-form-container {
	max-width: 1100px !important;
	margin: 0 auto !important;
	padding: 64px var(--sst-pad) !important;
	width: 100%;
	gap: 0 !important;
}
@media (min-width: 1025px) { .sst-order-form-container { padding: 96px var(--sst-pad) !important; } }
.sst-order-form-label { margin: 0 !important; }
.sst-order-form-h2 {
	margin: 16px 0 0 !important; /* mt-4 */
	max-width: none !important;
	font-size: 36px;
	line-height: 0.95;
}
@media (min-width: 1025px) { .sst-order-form-h2 { font-size: 60px; } }

/* --- Elementor Pro Form — same minimalist underline-input styling as
 * Contact's form (reused verbatim: measured field row height/label
 * line-height/margin fixes apply identically since both forms share
 * the exact source markup pattern <label class="block"><span
 * class="eyebrow">...<input/></label>). ------------------------------- */
.sst-order-form-container > .elementor-widget-form { margin-top: 40px; } /* mt-10 */
.sst-order-form {
	background: var(--sst-paper) !important;
	border: 1px solid var(--sst-ink) !important;
	padding: 32px !important; /* p-8 */
	box-shadow: none !important;
}
@media (min-width: 1025px) { .sst-order-form { padding: 48px !important; } } /* lg:p-12 */
.sst-order-form .elementor-form-fields-wrapper {
	display: grid !important;
	grid-template-columns: repeat(1, 1fr) !important;
	gap: 24px !important;
	row-gap: 24px !important;
	margin: 0 !important; /* zero Elementor's own leftover gutter-compensation
		negative margin — same fix as Contact's form. */
}
@media (min-width: 768px) {
	.sst-order-form .elementor-form-fields-wrapper { grid-template-columns: repeat(2, 1fr) !important; }
}
.sst-order-form .elementor-field-group {
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
}
.sst-order-form .elementor-col-100 { grid-column: 1 / -1; }
.sst-order-form .elementor-field-label {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	line-height: 16.5px; /* see the identical, fully-diagnosed fix on
		Contact's form — the shared .sst-eyebrow-label component never
		sets its own line-height, so it defaults to a tight ~1.0 ratio
		when reused as a form-field label. */
	letter-spacing: 3.85px;
	text-transform: uppercase;
	color: var(--sst-muted);
	margin: 0 0 15.5px !important; /* measured effective row-height gap —
		see Contact's form CSS for the full derivation. */
	padding: 0 !important;
}
.sst-order-form .elementor-field,
.sst-order-form .elementor-field-textual,
.sst-order-form select.elementor-field {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--sst-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 12px 0 !important; /* py-3 */
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: var(--sst-ink);
	width: 100% !important;
	transition: border-bottom-width 0.1s;
}
.sst-order-form select.elementor-field {
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0 !important;
	/* Minimal custom caret matching the source's plain native <select>
	 * chrome closely enough without introducing a heavier custom-select
	 * widget the source doesn't have. */
	background-image: linear-gradient(45deg, transparent 50%, var(--sst-ink) 50%),
		linear-gradient(135deg, var(--sst-ink) 50%, transparent 50%);
	background-position: calc(100% - 14px) center, calc(100% - 8px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.sst-order-form .elementor-field::placeholder,
.sst-order-form .elementor-field-textual::placeholder {
	color: var(--sst-muted);
	opacity: 1;
}
.sst-order-form .elementor-field:focus,
.sst-order-form .elementor-field-textual:focus,
.sst-order-form select.elementor-field:focus {
	outline: none !important;
	box-shadow: none !important;
	border-bottom-width: 2px !important;
}
.sst-order-form textarea.elementor-field {
	resize: none;
	min-height: 120px;
	margin-bottom: 8px; /* same measured textarea-row strut fix as Contact */
}
.sst-order-form .e-form__buttons {
	padding: 0 !important;
	margin: 8px 0 0 !important; /* mt-2 */
	grid-column: 1 / -1;
}
/* The source's button is `md:col-span-2 ... inline-flex` — a
 * CONTENT-width button placed in a row spanning both grid columns, at
 * EVERY breakpoint (not stretched full-width on mobile the way
 * Contact's button is). Elementor's own default `button_width:'100'`
 * (unset here) still drives `elementor-button-align-stretch`'s
 * flex-basis:100% rule, so this must be overridden at all sizes, not
 * just desktop. */
.sst-order-form .elementor-button {
	/* Measured: reference button width (922px at 1440) exactly matches
	 * the 2-column field-grid's own width, edge to edge — unlike
	 * Contact's button (which has an explicit `w-full md:w-auto` class
	 * shrinking it to content-width at desktop), this button has NO
	 * such class; it just relies on CSS Grid's default
	 * justify-items:stretch for a grid-item button, so it is full-width
	 * at EVERY breakpoint, not just mobile. */
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: none !important;
	background: var(--sst-ink) !important;
	color: var(--sst-paper) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	padding: 20px 40px !important;
	fill: var(--sst-paper);
}
.sst-order-form .elementor-button:hover,
.sst-order-form .elementor-button:focus {
	background: var(--sst-ink-soft) !important;
	color: var(--sst-paper) !important;
}
.sst-order-form .elementor-button:focus-visible {
	outline: 2px solid var(--sst-ink);
	outline-offset: 2px;
}
.sst-order-form .elementor-message {
	font-family: 'Hind', system-ui, sans-serif;
	font-size: 14px;
	margin-top: 16px !important;
	grid-column: 1 / -1;
}
.sst-order-form .elementor-message.elementor-message-success { color: #2e5c3a; }
.sst-order-form .elementor-message.elementor-message-danger { color: #8a2c2c; }

/* --- Closing "Or" block (centered, same 1100px container, no gap
 * before it since the source's mt-12 lives on this block itself) ------- */
.sst-order-closing {
	/* Nested inside .sst-order-form-container (which already applies
	 * the max-w-1100/padding) — no separate max-width/padding needed
	 * here; an earlier version wrongly duplicated it at this level,
	 * producing a visibly wrong double-inset (170px x-offset/1100px
	 * width instead of the correct 210px/1020px at 1440px). */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center;
	gap: 0 !important;
	margin-top: 48px !important; /* mt-12 */
	padding: 0 !important;
	width: 100%;
}
.sst-order-or-label { margin: 0 !important; }
.sst-order-call-link { margin-top: 16px; } /* mt-4 */
.sst-order-call-link a {
	display: inline-block;
	font-family: 'Archivo Black', system-ui, sans-serif;
	font-weight: 300;
	color: var(--sst-ink);
	text-decoration: none;
	transition: opacity 0.15s;
	font-size: 36px;
	line-height: 1;
}
@media (min-width: 1025px) { .sst-order-call-link a { font-size: 48px; } }
.sst-order-call-link a:hover { opacity: 0.7; }
.sst-order-call-note { margin-top: 8px; }
.sst-order-call-note p {
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	color: var(--sst-ink-soft);
	margin: 0;
}
.sst-order-fabrics-link { margin-top: 32px; font-size: 12px; line-height: 16px; } /* mt-8 —
	font-size/line-height set on the WIDGET WRAPPER too (not just the
	inner <a>), since the wrapper's own inherited (larger) line-height
	was adding a small inline "strut" around the anchor, leaving a
	residual few px of extra height even after the <a> itself matched
	exactly. */
.sst-order-fabrics-link a {
	display: inline-flex;
	align-items: center;
	font-family: 'Hind', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 16px; /* measured — unset, this defaults to the
		browser's ~1.5 normal ratio (18px), 2px taller than the source's
		Tailwind text-xs default of 16px, which compounded into the
		footer-position drift. */
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color: var(--sst-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--sst-ink);
	padding-bottom: 4px;
	transition: opacity 0.15s;
}
.sst-order-fabrics-link a:hover { opacity: 0.6; }