/*
 * Slab Homepage Design — centralized presentational CSS for the
 * BASE-Collection homepage. Direction: premium jewelry, collector culture,
 * modern streetwear, black/white, subtle royal-blue accent. Bold, cinematic,
 * editorial -- large typography, confident imagery, intentional (not
 * empty) whitespace. No product/pricing/cart logic lives here.
 */

:root {
	--slh-black: #0a0a0a;
	--slh-white: #ffffff;
	--slh-gray-100: #f4f4f4;
	--slh-gray-300: #e2e2e2;
	--slh-gray-500: #8a8a8a;
	--slh-gray-700: #4a4a4a;
	--slh-accent: #2954ff;
	--slh-accent-dark: #1c3fd1;
}

/*
 * Elementor's atomic containers (this Elementor version) expose layout via
 * CSS custom properties (e.g. --flex-direction) consumed by a base rule
 * that targets the container's inner `.e-con-inner` wrapper, not the
 * container element itself -- setting flex_direction in the editor's own
 * container settings did not reliably take effect here. Rather than depend
 * on that internal variable chain, these rules take direct, explicit
 * control of the handful of row/grid layouts this page needs.
 */
/*
 * Two independent quirks of this Elementor version, both worked around
 * below:
 *
 * 1) Elementor scopes its own generated rules as
 *    `.elementor-{postID} .elementor-element.elementor-element-{id}` --
 *    three class selectors (specificity 0,3,0), higher than a plain
 *    two-class override (0,2,0). With both sides !important, Elementor's
 *    higher specificity wins regardless of stylesheet load order.
 *    Repeating our own class ties specificity at three; since this
 *    stylesheet loads after Elementor's generated CSS, the tie goes to us.
 *
 * 2) Whether a nested container's children land directly inside it or
 *    inside an intermediate `.e-con-inner` wrapper is NOT deterministic
 *    for identical settings -- confirmed by re-generating the same JSON
 *    and getting different DOM shapes across saves. Both selector forms
 *    are targeted so the layout holds either way.
 */
/*
 * Grid (not flex) for the 3-across layout: a flex row with three ~31.5%-wide
 * items wrapped whenever the combined width of the cards plus Elementor's
 * own default min-width on its nested "e-child" containers exceeded the
 * available row width, dropping ROSE to its own line even at normal desktop
 * widths. CSS Grid's `1fr` tracks divide the row deterministically instead
 * of depending on each child's own width/min-width computing out correctly,
 * so it can't wrap unintentionally the way the flex version did.
 */
/*
 * .slh-color-grid (and its own section's .e-con-inner wrapper) are flex
 * items of Elementor's atomic container system, which sizes every "e-con"
 * flex child via per-element CSS custom properties (--flex-grow/
 * --flex-shrink/--flex-basis) that default to 0/1/auto. Left at that
 * default, both this element AND its section's own .e-con-inner wrapper
 * shrink to their own tiny shrink-to-fit content width (as little as
 * ~80px) instead of the full section width, starving every grid column
 * beneath them down to near-zero regardless of grid-template-columns.
 * "slh-color-section" is a dedicated class added to the Color Showcase
 * section container specifically so its own .e-con-inner can be targeted
 * here without affecting the (shared, site-wide) .e-con-inner class
 * anywhere else.
 */
.slh-color-section.slh-color-section > .e-con-inner,
.slh-color-grid.slh-color-grid.slh-color-grid {
	flex: 1 1 100% !important;
	width: 100% !important;
	/*
	 * Elementor's "boxed" content-width custom property is resolving to
	 * `min(100%, 80px)` on this specific container (a site kit-level
	 * default rendering incorrectly for this element, unrelated to
	 * anything set on this container itself) -- overridden directly rather
	 * than touching the site-wide kit setting.
	 */
	max-width: 1400px !important;
}

.slh-color-grid.slh-color-grid.slh-color-grid,
.slh-color-grid.slh-color-grid.slh-color-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 2rem !important;
	align-items: start !important;
	width: 100%;
}

/*
 * Same collapse as .slh-color-section/.slh-color-grid above, hitting the
 * Justin section: its own section-level .e-con-inner (which holds the
 * intro copy AND .slh-moment-grid together) collapses to the same broken
 * ~80px, in turn starving .slh-moment-grid's own already-correct
 * max-width: 900px of any real space to use. The display:grid rule below
 * this one was already correct but insufficient alone, since it never
 * restores the collapsed flex-basis/width that caused the near-zero size.
 */
.slh-justin.slh-justin > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 1400px !important;
}

.slh-moment-grid.slh-moment-grid.slh-moment-grid {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 900px !important;
}

.slh-moment-grid.slh-moment-grid,
.slh-moment-grid.slh-moment-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 1.5rem !important;
	width: 100%;
}

.slh-custom.slh-custom,
.slh-custom.slh-custom > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 3.5rem !important;
	align-items: center !important;
	width: 100%;
}

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

.slh-plain-list li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.slh-bullet {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--slh-accent);
	flex-shrink: 0;
	display: inline-block;
}

.slh-section {
	position: relative;
	padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) clamp(1.25rem, 1rem + 2vw, 4rem);
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	overflow: hidden;
}

.slh-builder-section {
	padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	/*
	 * `.slh-section` sets `overflow: hidden` (needed elsewhere to contain
	 * decorative background layers), but that also silently breaks
	 * `position: sticky` on any descendant -- the builder's sticky preview
	 * panel needs a visible-overflow ancestor chain to stick at all.
	 */
	overflow: visible;
}

/*
 * The section immediately after the builder combines its own top padding
 * with the builder's already-reduced bottom padding, stacking into a gap
 * noticeably larger than every other section-to-section transition on the
 * page. Trimmed just at this one seam via an adjacency selector -- every
 * other transition keeps the full .slh-section padding.
 */
.slh-builder-section + .slh-section {
	padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.slh-section--light {
	background: var(--slh-white);
	color: var(--slh-black);
}

.slh-section--dark {
	background: var(--slh-black);
	color: var(--slh-white);
}

.slh-eyebrow-wrap {
	margin-bottom: 1rem;
}

.slh-eyebrow {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--slh-accent);
}

.slh-section--dark .slh-eyebrow {
	color: #6d8bff;
}

.slh-section-heading,
.slh-section-heading-lg,
.slh-hero-heading,
.slh-final-heading {
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}

.slh-section-heading {
	font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.6rem);
	text-align: center;
}

.slh-section-heading-lg {
	font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4.6rem);
}

.slh-hero-heading {
	font-size: clamp(3.4rem, 2.2rem + 5.5vw, 6.8rem);
	margin-bottom: 1.5rem;
	/*
	 * hero-base-collection.webp has bright grading-label content recurring
	 * across all 3 pendants, so no single crop/position fully avoids the
	 * text ever crossing one -- a shadow guarantees legibility regardless
	 * of exactly what's behind it, at any breakpoint.
	 */
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.slh-final-heading {
	font-size: clamp(3rem, 2rem + 5vw, 6rem);
}

.slh-subheading-wrap {
	margin-bottom: 1.25rem;
}

.slh-subheading {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--slh-gray-500);
	margin: 0;
}

.slh-section--dark .slh-subheading {
	color: rgba(255, 255, 255, 0.65);
}

.slh-copy-wrap,
.slh-hero-copy-wrap {
	max-width: 50ch;
	margin-bottom: 1.75rem;
}

.slh-hero-copy-wrap {
	margin-top: -0.25rem;
}

.slh-copy,
.slh-hero-copy {
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
	line-height: 1.55;
	color: var(--slh-gray-500);
	margin: 0 0 0.75rem;
}

.slh-hero-copy {
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}

.slh-section--dark .slh-copy {
	color: rgba(255, 255, 255, 0.72);
}

/* Buttons */

/*
 * Pages 25/26/27 (Custom Design, About, Contact) were last saved with
 * Elementor 4.0.1, vs. 4.1.1 on the homepage -- on that older schema, a
 * regular widget's "css_classes" setting is saved correctly but never
 * makes it into the rendered HTML (confirmed live: containers/sections
 * render css_classes fine on these same pages, only *widgets* don't). The
 * .elementor-element-<id> class Elementor always outputs is used below as
 * a reliable substitute wherever a widget on one of those three pages
 * needs one of these button styles.
 */
.slh-btn-primary a,
.slh-btn-primary .elementor-button,
.elementor-element-a244daa .elementor-button,
.elementor-element-e61ba9d .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--slh-accent) !important;
	color: var(--slh-white) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 1.35rem 2.75rem !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 10px 30px rgba(41, 84, 255, 0.35);
	transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.slh-btn-primary a:hover,
.slh-btn-primary .elementor-button:hover,
.elementor-element-a244daa .elementor-button:hover,
.elementor-element-e61ba9d .elementor-button:hover {
	background: var(--slh-accent-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(41, 84, 255, 0.45);
}

.slh-btn-outline-light a,
.slh-btn-outline-light .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	color: var(--slh-white) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
	border-radius: 8px !important;
	padding: 1.15rem 2.25rem !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

/*
 * Dark-on-light variant of the outline button, for the same style used
 * against a white/light section instead of the hero's dark background
 * (the About page's "Request Custom Design" secondary CTA sits inside a
 * light box, where white-on-white text/border would be invisible).
 */
.elementor-element-78bb653 .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	color: var(--slh-accent) !important;
	border: 1.5px solid var(--slh-accent) !important;
	border-radius: 8px !important;
	padding: 1.15rem 2.25rem !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.elementor-element-78bb653 .elementor-button:hover {
	background: var(--slh-accent) !important;
	color: var(--slh-white) !important;
}

.slh-btn-outline-light a:hover,
.slh-btn-outline-light .elementor-button:hover {
	border-color: var(--slh-white) !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

/* Hero */

.slh-hero {
	color: var(--slh-white);
	display: flex;
	align-items: center;
	/*
	 * hero-base-collection.webp shows all 3 pendants spread edge-to-edge
	 * (unlike the previous hero image, which was framed for a tighter
	 * zoom). A plain cover fit keeps the full width in frame at desktop
	 * widths -- since the hero box is wider (relative to its height) than
	 * the image itself, cover crops only top/bottom, never the pendants
	 * on the sides.
	 */
	background-size: cover !important;
	background-position: center 32% !important;
}

.slh-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/*
	 * Widened and deepened for hero-base-collection.webp: the new photo's
	 * pendants (and their bright card faces) sit further right than the
	 * previous hero image, right where the body copy used to trail off
	 * into a lighter zone. Extending the strong-darkness stop further
	 * right keeps the full text column legible without dimming the
	 * right-most (rose) pendant, which stays the brightest part of the
	 * shot as the visual accent.
	 */
	background:
		radial-gradient(ellipse 60% 70% at 68% 55%, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0) 60%),
		linear-gradient(100deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.74) 38%, rgba(0, 0, 0, 0.38) 58%, rgba(0, 0, 0, 0.08) 85%);
	z-index: 0;
}

/*
 * Elementor's atomic flex containers size each "e-con" child from
 * per-element custom properties that default to flex-grow:0/flex-basis:
 * auto -- left at that default, both the hero's own .e-con-inner wrapper
 * and .slh-hero-content collapse to their own tiny shrink-to-fit width
 * (as little as ~80px), wrapping every word onto its own line and
 * ballooning the section's height. Same root cause already fixed once for
 * the color-showcase section; fixed the identical way here at both
 * affected levels.
 */
.slh-hero > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	/*
	 * Same broken kit-level default hit on the color-showcase section:
	 * this resolves to `max-width: min(100%, 80px)` on its own, capping
	 * every child to 80px regardless of their own flex-basis/width.
	 */
	max-width: 1400px !important;
}

.slh-hero-content {
	position: relative;
	z-index: 1;
	max-width: 720px;
	flex: 1 1 100% !important;
	width: 100% !important;
}

/* Same collapse, a third level deep: .slh-hero-content's own inner wrapper. */
.slh-hero-content > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 720px !important;
}

.slh-brand-line-wrap {
	margin-top: 2.25rem;
}

.slh-brand-line {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.6;
	margin: 0;
}

/* Trust row */

.slh-trust-row .slh-plain-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	margin: 2rem 0 0;
}

.slh-trust-row li {
	font-size: 1rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Builder embed wrapper */

.slh-builder-wrap {
	max-width: 100%;
	margin: 0 auto;
}

/* Color showcase */

.slh-color-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	max-width: 1400px;
	margin: 3rem auto 0;
}

.slh-color-card {
	flex: none !important;
	width: auto !important;
	min-width: 0 !important;
	text-align: center;
}

/*
 * Same kit-level .e-con-inner collapse as documented above, one level
 * deeper: each card's OWN inner wrapper (holding its image/label/copy
 * widgets) collapses independently of the grid-level fix already in place
 * for .slh-color-grid, squeezing the label and caption into a one-word-
 * per-line column at tablet width.
 */
.slh-color-card > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/*
 * The "image" widget's css_classes setting isn't applied to its markup in
 * this Elementor version (confirmed: containers/headings/buttons/html
 * widgets all receive css_classes correctly, image widgets do not), so
 * these target the reliable structural elementor-widget-image class within
 * our already-working parent container class instead.
 */
.slh-color-card .elementor-widget-image {
	width: 100% !important;
}

.slh-color-card .elementor-widget-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.slh-color-card__label {
	font-size: 1.85rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin: 1.5rem 0 0.6rem;
}

.slh-color-card__copy-wrap {
	margin: 0;
}

.slh-color-card__copy {
	font-size: 1.05rem;
	color: var(--slh-gray-500);
	margin: 0;
}

/* Custom jewelry */

.slh-custom {
	display: flex;
	align-items: center;
	gap: 3.5rem;
}

/*
 * Same recurring Elementor atomic-container bug hit elsewhere on this page
 * (see Color Showcase / hero notes): the kit's broken default resolves this
 * section's .e-con-inner max-width to min(100%, 80px) at tablet widths,
 * collapsing both the text column and the image beside it regardless of
 * their own explicit widths below. Found while verifying the tablet layout
 * for the updated copy -- pre-existing, not caused by the copy change, but
 * it made the extra body/bullet lines unreadable, so fixing it here.
 */
.slh-custom > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

.slh-custom-content {
	flex: 1 1 500px !important;
	width: 500px !important;
	max-width: 560px;
}

/* Same collapse, one level deeper: .slh-custom-content's own inner wrapper. */
.slh-custom-content > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 560px !important;
}

/*
 * Balance pass: the text column read as visually light against the strong
 * product photo, so its own rhythm is tightened here (scoped to .slh-custom
 * only -- .slh-eyebrow-wrap/.slh-copy-wrap/.slh-section-heading-lg are
 * shared with the Hero, Justin and Final CTA sections and must stay
 * untouched there).
 */
.slh-custom .slh-eyebrow-wrap {
	margin-bottom: 1.1rem;
}

.slh-custom .slh-section-heading-lg {
	font-size: clamp(2.8rem, 2rem + 3.8vw, 4.8rem);
	margin-bottom: 1.4rem;
}

.slh-custom .slh-copy-wrap {
	margin-bottom: 1.6rem;
}

.slh-custom .slh-copy {
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
	line-height: 1.6;
}

/*
 * The updated body copy is three separate <p> tags in one HTML widget, so
 * they don't get the flex `gap` spacing that separates sibling widgets
 * elsewhere on this page -- and the site-wide Elementor kit style
 * (`.elementor-kit-4 p { margin-block-end: 0 }`) already zeroes out
 * .slh-copy's own bottom margin. This restores a readable break between
 * them without touching .slh-copy globally (used as a single paragraph
 * elsewhere, where this never mattered).
 */
.slh-custom .slh-copy + .slh-copy {
	margin-top: 0.9rem;
}

.slh-custom > .e-con-inner > .elementor-widget-image {
	flex: 1 1 520px !important;
	width: 520px !important;
}

/*
 * max-width raised from 440 to 560 when the section's image switched from a
 * tall portrait product shot (393x952) to a landscape editorial shot
 * (1374x1145, custom-jewelry-section.webp): at the old cap the landscape
 * image rendered short and visually underweight next to the text column.
 * Still no crop/object-fit -- width auto/height auto keeps the full frame
 * (pendant, bail, chain) visible at its native aspect ratio either way.
 */
.slh-custom .elementor-widget-image img {
	width: 100% !important;
	height: auto !important;
	max-width: 560px;
	border-radius: 6px;
	display: block;
	margin: 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.slh-concept-grid .slh-plain-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.2rem 1.75rem;
	margin: 0.75rem 0 2rem;
}

.slh-concept-grid li {
	font-size: 1.05rem;
	font-weight: 600;
}

/* Justin section */

.slh-justin {
	text-align: center;
}

.slh-justin .slh-copy-wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: 62ch;
}

.slh-moment-grid {
	max-width: 900px;
	margin: 1.5rem auto 3rem;
}

.slh-moment-card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/*
 * Same kit-level collapse, one more level deep inside the moment grid:
 * each card's own inner wrapper (holding its photo/label) collapses
 * independently of the grid-level fix already in place above.
 */
.slh-moment-card > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

.slh-moment-card:hover {
	border-color: rgba(255, 255, 255, 0.24);
}

/*
 * Photo tiles (Face Offs, Press Conference): a real photo fills the same
 * card the placeholder tiles use, cropped (never stretched) to the card's
 * existing 4:5 shape, with a dark overlay so the label stays legible over
 * whatever is in the shot. The image widget's own css_classes setting does
 * not apply to its rendered markup in this Elementor version (confirmed
 * elsewhere on this page), so it's targeted structurally instead, matching
 * the same pattern already used for the color-showcase and custom-jewelry
 * images.
 */
.slh-moment-card--photo .elementor-widget-image {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.slh-moment-card--photo .elementor-widget-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

.slh-moment-card--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.6) 100%);
	pointer-events: none;
}

.slh-moment-card--photo .slh-moment-copy {
	position: relative;
	z-index: 2;
}

.slh-moment-copy {
	text-align: center;
}

.slh-moment-label {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}

.slh-moment-pending {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}

/* FAQ */

.slh-faq-section {
	max-width: 980px;
	margin: 0 auto;
}

/*
 * Same kit-level .e-con-inner collapse documented above for Color Showcase
 * -- this section's own inner wrapper (holding the heading and the whole
 * FAQ list) collapses to ~80px at tablet width, squeezing every question
 * into a one-word-per-line column.
 */
.slh-faq-section > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

.slh-faq-wrap {
	margin-top: 2.5rem;
}

.slh-faq-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 3.5rem;
}

.slh-faq-item {
	border-bottom: 1px solid var(--slh-gray-300);
	padding: 1.6rem 0;
}

.slh-faq-question {
	cursor: pointer;
	font-size: 1.2rem;
	font-weight: 700;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.25rem 0;
}

.slh-faq-question::-webkit-details-marker {
	display: none;
}

.slh-faq-question::after {
	content: "+";
	font-size: 1.6rem;
	font-weight: 400;
	color: var(--slh-accent);
	flex-shrink: 0;
}

.slh-faq-item[open] .slh-faq-question::after {
	content: "\2212";
}

.slh-faq-answer p {
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--slh-gray-700);
	margin: 0.85rem 0 0;
}

.slh-faq-more {
	text-align: center;
	margin-top: 2.5rem;
	font-size: 1.05rem;
	color: var(--slh-gray-500);
}

.slh-faq-more a {
	color: var(--slh-accent);
	text-decoration: underline;
}

/* Final CTA */

.slh-final-cta {
	color: var(--slh-white);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slh-final-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.68) 100%);
	z-index: 0;
}

/*
 * Same collapse, at the level between the section and .slh-final-content:
 * the section's own direct .e-con-inner wrapper. Three levels deep in
 * total here -- see .slh-final-content below for the other two.
 */
.slh-final-cta > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

.slh-final-content {
	position: relative;
	z-index: 1;
	max-width: 620px;
	margin: 0 auto;
}

/*
 * Same kit-level collapse documented above, at both levels here:
 * .slh-final-content itself is a flex child of .slh-final-cta, and it has
 * its own nested .e-con-inner holding the heading/copy/button -- both
 * independently collapsed to ~80px at tablet width.
 */
.slh-final-content,
.slh-final-content > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 620px !important;
}

.slh-final-content .slh-copy {
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
}

/* ---------- Tablet ---------- */

@media (min-width: 768px) and (max-width: 1024px) {
	/*
	 * At tablet aspect ratios the hero box is much narrower relative to its
	 * height than hero-base-collection.webp itself, so a cover fit
	 * overflows well past the visible width -- centering it (the desktop
	 * default) crops both outer pendants and lands the middle pendant's
	 * bright card label directly behind the body copy. Shifted left so the
	 * silver + gold pendants anchor the frame and the copy reads against
	 * darker rock instead.
	 */
	.slh-hero {
		background-position: 8% 25% !important;
	}

	/*
	 * At this aspect ratio the text column's own width now spans far enough
	 * that its tail routinely crosses a pendant's bright white grading
	 * label -- text-shadow alone can't fix white-on-white contrast. A
	 * stronger, wider dark wash for this breakpoint only guarantees
	 * legibility without needing to chase an exact crop.
	 */
	.slh-hero::after {
		background:
			radial-gradient(ellipse 60% 70% at 80% 60%, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0) 60%),
			linear-gradient(100deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.82) 55%, rgba(0, 0, 0, 0.55) 78%, rgba(0, 0, 0, 0.2) 100%) !important;
	}


	.slh-color-grid.slh-color-grid.slh-color-grid,
	.slh-color-grid.slh-color-grid.slh-color-grid > .e-con-inner {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.slh-color-card:last-child {
		grid-column: 1 / -1;
		max-width: 380px;
		margin: 0 auto;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	/*
	 * Rebuilt for hero-base-collection.webp -- the old 240%/60%/30% values
	 * were tuned for the previous hero image and, applied to this one,
	 * zoomed in tight enough to crop the silver pendant off-screen
	 * entirely. A moderate zoom keeps at least 2 pendants clearly framed
	 * (all 3 at this width, at any zoom low enough to avoid stretching
	 * text this way, is not practical) with the gold one anchoring the
	 * frame next to the text column.
	 */
	.slh-hero {
		background-size: 160% auto !important;
		background-position: 68% 22% !important;
		min-height: 92vh !important;
	}

	.slh-hero::after {
		background:
			radial-gradient(ellipse 60% 70% at 80% 60%, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0) 60%),
			linear-gradient(100deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 55%, rgba(0, 0, 0, 0.55) 78%, rgba(0, 0, 0, 0.2) 100%) !important;
	}

	.slh-hero-heading {
		font-size: clamp(2.6rem, 2rem + 6vw, 3.6rem);
	}

	.slh-section-heading-lg {
		font-size: clamp(2.2rem, 1.8rem + 4vw, 3rem);
	}

	.slh-section-heading {
		font-size: clamp(1.9rem, 1.6rem + 3vw, 2.6rem);
	}

	.slh-final-heading {
		font-size: clamp(2.4rem, 1.9rem + 5vw, 3.4rem);
	}

	.slh-custom {
		flex-direction: column;
	}

	.slh-custom-content {
		max-width: 100%;
	}

	.slh-concept-grid .slh-plain-list {
		grid-template-columns: 1fr;
	}

	.slh-color-grid.slh-color-grid.slh-color-grid,
	.slh-color-grid.slh-color-grid.slh-color-grid > .e-con-inner {
		grid-template-columns: 1fr !important;
	}

	.slh-faq-list {
		grid-template-columns: 1fr;
	}

	.slh-moment-grid > .e-con-inner {
		gap: 1rem !important;
	}

	.slh-btn-primary a,
	.slh-btn-primary .elementor-button,
	.slh-btn-outline-light a,
	.slh-btn-outline-light .elementor-button {
		width: 100%;
	}
}

/* =====================================================================
 * Secondary pages (Custom Design, About, Contact)
 * These pages keep their own existing Elementor structure -- this is
 * presentation polish only (premium form styling, button-class reuse),
 * scoped to classes added specifically for this pass so nothing here
 * touches the homepage sections above.
 * ===================================================================== */

/* Custom Design: constrain the form to a clean, centered, premium width. */
.slh-custom-form-section {
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1.25rem, 1rem + 2vw, 2rem);
	padding-right: clamp(1.25rem, 1rem + 2vw, 2rem);
}

/* Custom Design: more breathing room between fields, and a premium field
 * treatment (soft border + subtle fill) instead of the bare default
 * Elementor form look. */
.elementor-element-e61ba9d .elementor-field-group {
	margin-bottom: 1.85rem !important;
}

.elementor-element-e61ba9d .elementor-field-group:last-of-type {
	margin-bottom: 2.25rem !important;
}

.elementor-element-e61ba9d .elementor-field-label {
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 0.55rem !important;
	color: var(--slh-black);
}

.elementor-element-e61ba9d .elementor-field-textual {
	border: 1px solid var(--slh-gray-300) !important;
	border-radius: 8px !important;
	background: #fafafa !important;
	padding: 0.95rem 1.1rem !important;
	font-size: 1rem !important;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.elementor-element-e61ba9d .elementor-field-textual:focus {
	border-color: var(--slh-accent) !important;
	background: var(--slh-white) !important;
	outline: none !important;
}

.elementor-element-e61ba9d .elementor-field-type-upload .elementor-button {
	background: var(--slh-white) !important;
	color: var(--slh-black) !important;
	border: 1px solid var(--slh-gray-300) !important;
	box-shadow: none !important;
	text-transform: none !important;
	font-weight: 600 !important;
	padding: 0.75rem 1.5rem !important;
}

/* The homepage .slh-btn-primary rule already restyles the submit button
 * (it targets any .elementor-button inside the class), so it doesn't need
 * a separate rule here -- this just widens it to match the field width
 * and gives it the same generous scale as the fields above it. */
.elementor-element-e61ba9d .elementor-field-group + .elementor-field-group,
.elementor-element-e61ba9d .e-form__buttons {
	margin-top: 0.25rem;
}

.elementor-element-e61ba9d .elementor-button {
	width: 100%;
}

@media (max-width: 767px) {
	.elementor-element-e61ba9d .elementor-field-group,
	.elementor-element-e61ba9d .elementor-field,
	.elementor-element-e61ba9d .elementor-field-textual {
		width: 100% !important;
	}
}

/*
 * Same recurring kit-level .e-con-inner collapse documented throughout
 * this file, found on the Custom Design page (25) at tablet width: the
 * hero text column collapses at two nested levels (its own container and
 * that container's inner wrapper), and the form section's inner wrapper
 * collapses one level below the .slh-custom-form-section fix above,
 * which only reaches the section itself, not its child.
 */
.elementor-element-806d18a > .e-con-inner,
.elementor-element-31fbdf1,
.elementor-element-31fbdf1 > .e-con-inner,
.elementor-element-0ed59f1,
.elementor-element-0ed59f1 > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

.slh-custom-form-section > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/*
 * The About page (26) turned out to have this same collapse at nearly
 * every nesting level -- ~15 distinct containers, several nested 3-4
 * deep. Rather than enumerate each one by its auto-generated ID (as
 * above), this is a blanket fix scoped to the whole page: every .e-con
 * (that's also a flex/grid *child*, i.e. "e-child") and every anonymous
 * .e-con-inner wrapper gets its flex-basis/width/max-width restored.
 * This is safe here because these three properties only control how an
 * element behaves as an ITEM within its OWN parent -- they don't touch
 * how an element lays out ITS OWN children, so a grid container's
 * grid-template-columns (e.g. the 3-across value-point row) is
 * unaffected, and nothing here can conflict with a more specific rule
 * elsewhere since none exists for this page yet.
 */
.elementor-26 .e-con.e-child,
.elementor-26 .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Same blanket fix, same reasoning, for the Contact page (27). */
.elementor-27 .e-con.e-child,
.elementor-27 .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/*
 * One exception to the About page blanket fix above: this specific
 * container (holding the three "value point" cards) uses
 * flex-direction: column, where flex-basis controls an item's HEIGHT,
 * not its width. Forcing flex-basis: 100% there (from the blanket rule)
 * made each card claim the full column height, so flex-wrap pushed the
 * 2nd and 3rd cards into new columns off the right edge of the viewport
 * at mobile width instead of stacking. width: 100% (still !important
 * from the blanket rule above) already does the actual job of preventing
 * the collapse; only flex-basis needs to go back to its default here.
 */
.elementor-element-c4c5f6c > .e-con.e-child {
	flex-basis: auto !important;
	flex-grow: 0 !important;
}