/* =========================================================================
   Shudhta homepage.
   Same section architecture as the reference layout, rebuilt on the brand
   palette. Scoped under .home so it cannot collide with the shop or product
   stylesheets. Card styling lives in shudhta-card.css.
   COLOUR LAW: white and neutral greys only; every hue is a palette token.
   ========================================================================= */

.sh.home {
	--font-display: "Cormorant Garamond", "EB Garamond", "Iowan Old Style",
		"Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--font-body: "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system,
		"Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	--paper: #fff;
	--muted: #6f6f6f;
	--muted-soft: #8a8a8a;
	--near-black: #1a1a1a;

	--gutter: 24px;
	--section: 96px;

	font-family: var(--font-body);
	color: var(--ink);
	background: var(--paper);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: clip;
}

.home :where(*, *::before, *::after) {
	box-sizing: border-box;
}
.home :where(p, h1, h2, h3, ul, ol, li, figure, blockquote) {
	margin: 0;
	padding: 0;
}
.home :where(ul, ol) {
	list-style: none;
}
.home :where(a) {
	color: inherit;
	text-decoration: none;
}
.home :where(img) {
	display: block;
	max-width: 100%;
}
.home :where(a, button):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.home .sh-wrap {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hm-sec {
	margin-top: var(--section);
}

/* --- SECTION HEADING MOTIF ------------------------------------------- */

.hm-head {
	text-align: center;
}
.hm-eyebrow {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
}
.hm-head-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.hm-rule {
	flex: 1 1 auto;
	max-width: 150px;
	height: 1px;
	background: var(--line);
}
.hm-spark {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--accent);
}
.hm-spark svg {
	width: 11px;
	height: 11px;
	display: block;
}
.hm-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(22px, 3vw, 32px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}
.hm-head--dark .hm-eyebrow {
	color: var(--line);
}
.hm-head--dark .hm-title {
	color: var(--paper);
}
.hm-head--dark .hm-rule {
	background: var(--band-soft);
}

/* --- 1. PROMISE TICKER ----------------------------------------------- */

.hm-ticker,
.hm-assure {
	overflow: hidden;
	width: 100%;
}
.hm-ticker {
	background: var(--wash);
	border-block: 1px solid var(--line);
}
.hm-ticker-track,
.hm-assure-track {
	display: flex;
	width: max-content;
	animation: hm-scroll 46s linear infinite;
}
.hm-assure-track {
	animation-duration: 60s;
}
.hm-ticker:hover .hm-ticker-track,
.hm-assure:hover .hm-assure-track {
	animation-play-state: paused;
}
.hm-ticker-run,
.hm-assure-run {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
.hm-ticker-run li {
	display: flex;
	align-items: center;
	padding: 10px 0;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}
.hm-ticker-run li::after {
	content: "·";
	margin: 0 26px;
	color: var(--accent);
}

@keyframes hm-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* Exactly one copy of the list, so the loop is seamless. */
		transform: translateX(-50%);
	}
}

/* --- 2. HERO ---------------------------------------------------------- */

.hm-hero {
	position: relative;
	isolation: isolate;
}
.hm-slide {
	position: relative;
	min-height: clamp(420px, 56vw, 620px);
	display: grid;
	align-items: center;
}
.hm-slide[hidden] {
	display: none;
}
.hm-slide-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
/* A directional scrim, so the copy stays legible over any ridgeline. */
.hm-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgb(255 255 255 / 92%) 0%,
		rgb(255 255 255 / 78%) 38%,
		rgb(255 255 255 / 20%) 68%,
		rgb(255 255 255 / 4%) 100%
	);
}
.hm-slide-inner {
	width: 100%;
}
.hm-slide-copy {
	max-width: 46ch;
	padding-block: 56px;
}
.hm-slide-eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 18px;
}
.hm-slide-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(34px, 5vw, 62px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--ink);
}
.hm-slide-body {
	margin-top: 18px;
	max-width: 40ch;
	color: var(--ink);
}
.hm-slide-note {
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}

.hm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin-top: 28px;
	padding: 0 30px;
	border-radius: 4px;
	border: 1px solid var(--band);
	background: var(--band);
	color: var(--paper);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease,
		border-color 0.15s ease;
}
.home .hm-btn:hover {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.hm-btn--light {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}
.home .hm-btn--light:hover {
	background: transparent;
	border-color: var(--paper);
	color: var(--paper);
}

.hm-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
}
.home .hm-arrow:hover {
	border-color: var(--ink);
}
.hm-arrow svg {
	width: 20px;
	height: 20px;
}
.hm-arrow--prev {
	left: 16px;
}
.hm-arrow--next {
	right: 16px;
}

.hm-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.hm-dot {
	width: 30px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: var(--line);
	cursor: pointer;
}
.hm-dot.is-active {
	background: var(--ink);
}

/* --- 3. ASSURANCE MARQUEE -------------------------------------------- */

.hm-assure {
	background: var(--soft);
	border-bottom: 1px solid var(--line);
}
.hm-assure-run li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 34px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}
.hm-assure-mark {
	color: var(--accent);
	display: inline-flex;
}
.hm-assure-mark svg {
	width: 17px;
	height: 17px;
	display: block;
}

/* --- 4. SHOP BY CATEGORY --------------------------------------------- */

.hm-cat-row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px;
	margin-top: 44px;
}
.hm-cat a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.hm-cat-disc {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 156px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--soft);
	border: 1px solid var(--line);
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.hm-cat a:hover .hm-cat-disc {
	border-color: var(--accent);
	transform: translateY(-3px);
}
.hm-cat-disc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hm-cat-mark {
	font-size: 22px;
	color: var(--muted-soft);
}
.hm-cat-name {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
}

/* --- 5 & 7. PRODUCT ROWS --------------------------------------------- */

.hm-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 44px;
	align-items: stretch;
}

/* --- 6. MID BANNER ---------------------------------------------------- */

.hm-banner {
	position: relative;
	isolation: isolate;
	margin-top: var(--section);
	min-height: clamp(360px, 42vw, 520px);
	display: grid;
	align-items: center;
}
.hm-banner-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.hm-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		rgb(0 0 0 / 62%) 0%,
		rgb(0 0 0 / 42%) 48%,
		rgb(0 0 0 / 12%) 100%
	);
}
.hm-banner-inner {
	width: 100%;
	padding-block: 56px;
}
.hm-banner-eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--paper);
	opacity: 0.85;
}
.hm-banner-title {
	margin-top: 14px;
	max-width: 20ch;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(30px, 4.2vw, 52px);
	line-height: 1.06;
	color: var(--paper);
}
.hm-banner-body {
	margin-top: 16px;
	max-width: 42ch;
	color: var(--paper);
	opacity: 0.9;
}

/* --- 8. TRUST BADGES -------------------------------------------------- */

.hm-trust {
	margin-top: var(--section);
	padding-block: 56px;
	background: var(--wash);
}
.hm-trust-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	text-align: center;
}
.hm-trust-disc {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0 auto 16px;
	border-radius: 50%;
	border: 1px solid var(--accent);
	color: var(--accent);
}
.hm-trust-disc svg {
	width: 24px;
	height: 24px;
}
.hm-trust-title {
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1.25;
	color: var(--ink);
}
.hm-trust-detail {
	margin-top: 8px;
	font-size: 14px;
	color: var(--muted);
}

/* --- 9. IN THEIR WORDS ------------------------------------------------ */

.hm-words {
	margin-top: var(--section);
	padding-block: 72px 80px;
	background: var(--band);
}
.hm-words-row {
	display: flex;
	gap: 20px;
	margin-top: 44px;
	padding-inline: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.hm-words-row::-webkit-scrollbar {
	display: none;
}
.hm-word {
	flex: 0 0 clamp(260px, 26vw, 320px);
	scroll-snap-align: start;
	background: var(--band-soft);
	border: 1px solid var(--band-soft);
	border-radius: 6px;
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hm-word-stars {
	color: var(--paper);
	letter-spacing: 0.14em;
	font-size: 13px;
}
.hm-word-quote {
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.45;
	color: var(--paper);
}
.hm-word-who {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.hm-word-name {
	font-size: 13px;
	color: var(--paper);
}
.hm-word-meta {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--line);
}

/* --- RESPONSIVE ------------------------------------------------------- */

@media (max-width: 1100px) {
	.hm-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.hm-cat-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
	.hm-trust-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.sh.home {
		--section: 60px;
		--gutter: 16px;
	}
	.hm-grid {
		/* Two small cards let people compare; one giant card makes
		   browsing feel long. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.hm-cat-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hm-title {
		white-space: normal;
	}
	.hm-rule {
		max-width: 30px;
	}
	.hm-slide-copy {
		padding-block: 40px;
	}
	/* On a phone the scrim runs top-to-bottom, because the copy sits over
	   the whole frame rather than in a left column. */
	.hm-slide::before {
		background: linear-gradient(
			180deg,
			rgb(255 255 255 / 90%) 0%,
			rgb(255 255 255 / 74%) 55%,
			rgb(255 255 255 / 30%) 100%
		);
	}
	/* The arrows sat on top of the hero copy at this width. Touch has swipe,
	   and the dots below are real, keyboard-reachable controls, so the arrows
	   are the right thing to drop rather than the text. */
	.hm-arrow {
		display: none;
	}
	.hm-dots {
		bottom: 14px;
	}
	.hm-dot {
		width: 34px;
		height: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hm-ticker-track,
	.hm-assure-track {
		animation: none;
		/* Without the loop, show the first copy from the start. */
		transform: none;
	}
	.hm-cat-disc,
	.hm-btn {
		transition: none;
	}
	.hm-cat a:hover .hm-cat-disc {
		transform: none;
	}
}

/* The product-row widget exposes a column count, so an editor can change the
   grid from the Elementor panel without touching CSS. */
.hm-grid {
	grid-template-columns: repeat(var(--hm-cols, 4), minmax(0, 1fr));
}
@media (max-width: 1100px) {
	.hm-grid {
		grid-template-columns: repeat(min(var(--hm-cols, 4), 3), minmax(0, 1fr));
	}
}
@media (max-width: 700px) {
	.hm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- ELEMENTOR PARAGRAPH OVERRIDE ------------------------------------
   Elementor ships `.elementor-widget-container p { color: inherit }` at
   specificity 0,1,1, which outranks a bare class (0,1,0). Every paragraph
   that carried its own colour was silently repainted to the inherited ink —
   the banner's eyebrow and body dropped to 2.83:1 on the dark image. These
   re-assert the intended colours at a weight Elementor cannot outrank. */
.home .hm-banner-eyebrow,
.home .hm-banner-body {
	color: var(--paper);
}
.home .hm-slide-note,
.home .hm-trust-detail {
	color: var(--muted);
}

/* --- IMAGE-ONLY HERO --------------------------------------------------
   Artwork that already contains its own headline, trust marks and button.
   No scrim (it would wash the artwork out), no min-height (the image sets
   its own aspect), and the whole banner is the link. */
.hm-slide--plain {
	min-height: 0;
	display: block;
}
.hm-slide--plain::before {
	content: none;
}
.hm-slide-plain-link {
	display: block;
}
.hm-slide-plain-img {
	width: 100%;
	height: auto;
	display: block;
}

/* A 2.33:1 banner is only ~160px tall on a phone, which shrinks any text baked
   into it past legibility. With no dedicated mobile artwork supplied, crop to a
   taller box anchored left, where the headline, the trust marks and the button
   live. Supplying a mobile image in the widget removes the need for this. */
@media (max-width: 700px) {
	.hm-slide-plain-img--crop {
		aspect-ratio: 3 / 2;
		object-fit: cover;
		object-position: left center;
	}
}