/*
 * Latch'd — Front page (homepage) styles.
 *
 * Loaded only on is_front_page() (see functions.php). Everything is scoped under
 * .home and derives from the brand + scale tokens in main.css — no hardcoded
 * brand colours, fonts, or magic-number spacing. Small component dimensions
 * (dot/frame sizes) use rem literals, matching the PDP/lookbook convention.
 * Mobile-first: base rules are mobile, min-width queries scale up.
 *
 * Discipline: the page holds ONE tonal shift (the sage newsletter band) and ONE
 * motion moment (the hero copy fade-up). Everything else is whitespace + hairlines.
 */

/* Let the full-bleed newsletter band break the container without a scrollbar.
   (clip, not hidden, so nothing becomes a scroll container.) */
html {
	overflow-x: clip;
}

.site-main.home {
	--home-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	padding-block: 0;
}

/* Calm but purposeful rhythm: enough air for the premium tone without leaving
   the next piece of content beyond an empty screen. */
.site-main.home > section + section {
	margin-top: clamp(var(--space-2xl), 7vw, 5rem);
}

/* Shared eyebrow — the established tracked, sage, uppercase idiom. (The hero has
   NO eyebrow: over the bright café image a small tracked label cannot clear AA
   without dimming the warm subject, so the hero leads straight with the headline —
   tighter, and it keeps the bright-and-airy image intact. The eyebrow idiom still
   labels the trust / story / maternity sections on the calm field below.) */
.home-story__eyebrow,
.home-range__eyebrow,
.home-anatomy__eyebrow {
	margin: 0 0 var(--space-md);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-sage-text);
}

/* ============================================================
   Collection overview — all launch product types at a glance.
   The shared card component supplies resilient real/placeholder product data;
   this section owns only its placement and quieter homepage treatment.
   ============================================================ */
.home-range__head {
	max-width: 42rem;
	margin: 0 auto var(--space-xl);
	text-align: center;
}

.home-range__title,
.home-anatomy__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 500;
	line-height: 1.1;
}

.home-range__lead,
.home-anatomy__lead {
	max-width: 52ch;
	margin: var(--space-sm) auto 0;
	color: var(--ink-soft);
	line-height: 1.65;
}

.home-range__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-xl) var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-range .shop-card__body {
	align-items: flex-start;
	text-align: left;
}

.home-range .shop-card__descriptor {
	align-items: flex-start;
	flex-wrap: wrap;
}

.home-range .shop-card__cta {
	justify-content: flex-start;
	padding-inline: 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--line-strong);
	border-radius: 0;
	color: var(--color-ink);
}

.home-range .shop-card__cta:hover,
.home-range .shop-card__cta:focus-visible {
	background: transparent;
	border-color: var(--color-sage-text);
	color: var(--color-sage-text);
}

@media (min-width: 48rem) {
	.home-range__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(var(--space-md), 2.5vw, var(--space-xl));
	}
}

/* Shared quiet arrow link (translateX on hover — the established idiom). */
.home-story__arrow {
	display: inline-block;
	margin-left: var(--space-2xs);
	transition: transform 200ms var(--home-ease);
}

/* ============================================================
   Hero — full-bleed lifestyle image (the café/public nursing frame).
   The media fills a strong above-the-fold slot; a legibility scrim + the copy
   sit over it. Built so a silent <video> drops into the same slot with no markup
   change (see latchd_home_hero_media). ONE motion moment: the copy fade-up.

   Legibility is engineered, not assumed: the SHORT headline is composed to sit
   entirely within the naturally dark left zone, so crisp white clears AA with no
   text-shadow. A LOCAL grounding vignette (bottom band / bottom-left ellipse)
   darkens only that copy corner — never the lit face/window/sweater — see the
   per-glyph contrast reported at build. Scrim tones derive from --color-ink.
   ============================================================ */
.home-hero {
	position: relative;
	/* Viewport-centred break-out — the proven full-bleed pattern used by the
	   maternity/trust bands. The solid header now sits ABOVE the hero (in flow),
	   so the image starts directly below the header stack, not under it. */
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-inline: -50vw;
	margin-top: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Fill the first screen (Cartier-style): the viewport MINUS the header stack it
	   now sits below, so the image dominates the fold. --topbar-h collapses to 0
	   when the announcement bar is dismissed, so the hero reclaims that space with
	   no gap. */
	min-height: calc(100vh - var(--topbar-h) - var(--nav-h));
	min-height: calc(100svh - var(--topbar-h) - var(--nav-h)); /* mobile browser chrome-aware */
	overflow: hidden;
	isolation: isolate; /* own stacking context for the media/scrim/copy layers */
	background: var(--color-ink); /* base tone behind the image while it loads */
}

/* Media layer — the still or film, filling the slot behind everything. */
.home-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* The still is served via <picture>; let its <img> size against the hero box
   (an inline <picture> would leave height:100% unresolved, so object-fit could
   never engage and the image would overflow at its natural ratio). */
.home-hero__media picture {
	display: contents;
}

.home-hero__media-el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The mobile source is portrait art direction, so a centred crop holds the
	   mother, baby, and the deliberately dark copy ground together. */
	object-position: 50% 50%;
}

/* NOTE: there is no top scrim on the hero. The header is now SOLID and sits above
   the image (not over it), so nothing at the top of the photo needs darkening for
   nav legibility. Only the copy-grounding `::after` (below) remains. */

/* Copy scrim — a LOCAL grounding, not a global dim. The photograph is already
   bright and warm, and its bottom-left (café shelving + wooden table) is the
   naturally darkest, warmest zone — so the copy is grounded exactly there and the
   overlay fades to FULLY transparent before it reaches the mother's lit face or
   the right-hand window (both stay at 0% overlay = full brightness).

   Mobile base: a short bottom band over the lower frame (the copy sits
   near-full-width here). It is transparent by ~66% up, so the face — around 75%
   up — keeps its light. Desktop swaps this for a bottom-left ellipse (see the
   60rem query) since the copy there is a left column, not a full-width block.
   Depth is tuned for AA over the copy; extent is kept local by the stop
   positions — the darkness never creeps outward to buy contrast. Verified
   against real pixels (ratios reported at build). */
.home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--color-ink) 80%, transparent) 0%,
		color-mix(in srgb, var(--color-ink) 70%, transparent) 18%,
		color-mix(in srgb, var(--color-ink) 54%, transparent) 34%,
		color-mix(in srgb, var(--color-ink) 36%, transparent) 46%,
		color-mix(in srgb, var(--color-ink) 16%, transparent) 56%,
		transparent 66%
	);
}

/* Copy — bottom-anchored, left-aligned, centred to the container. Sits above the
   scrim, in white; the short headline is composed to stay in the dark zone. */
.home-hero__copy {
	position: relative;
	z-index: 2;
	width: min(100% - 2rem, var(--container));
	margin-inline: auto;
	/* Anchored LOW: on mobile the mother fills the frame and her lit sweater sits
	   mid-height, so the block is pulled down to ride the darker lower zone (arm /
	   chair / table under the bottom-band vignette) rather than poking up over the
	   sweater. This bottom offset is the composition lever that lets the headline
	   clear AA per-glyph WITHOUT dimming the protected sweater. Desktop restores a
	   roomier offset in the 60rem query (its copy is a left column over the dark
	   café corner and has AA margin to spare). */
	padding-block: 0 var(--space-xs);
	color: var(--color-white);
}

/* Headline — short enough to live ENTIRELY within the dark left zone, so crisp
   white clears AA with NO text-shadow (the old halo read as a grey smudge over
   the now-bright photo). Narrow measure + hard-left lines keep every glyph off
   the lit sweater/window; the block is bottom-anchored and short (two lines +
   one sub-line), so it rides low in the deepest part of the grounding vignette.
   Per-glyph contrast is verified against the real pixels (reported at build). */
.home-hero__title {
	margin: 0 0 var(--space-sm);
	max-width: 15ch;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--step-3);
	line-height: 1.1;
	letter-spacing: 0.005em;
	color: var(--color-white);
}

.home-hero__title-line {
	display: block;
}

/* The antithesis: line two set in italic — same opaque crisp white, still AA —
   so "Noticed nowhere." recedes by TYPE, not by translucency or motion. This is
   the static echo of the retired Vanishing Line; do NOT make it see-through. */
.home-hero__title-echo {
	font-style: italic;
	font-weight: 400;
}

/* Sub-line — the fuller promise, quiet and secondary. A warm off-white
   (--ink-on-dark, still comfortably AA), smaller, sitting lower in the vignette
   than the headline. Narrow measure holds it in the dark zone too. */
.home-hero__subline {
	margin: 0 0 var(--space-md);
	max-width: 34ch;
	font-size: var(--step-0);
	line-height: 1.5;
	color: var(--ink-on-dark);
}

.home-hero__actions {
	display: flex;
	align-items: center;
}

/* One decisive commercial action. Storytelling continues in its own editorial
   beat below instead of competing with the hero's primary path. */
.home-hero__cta {
	min-height: 3.25rem;
}

/* ---- Entrance (the single motion moment) ----
   One orchestrated fade-up on load: headline → sub-line → CTAs. Pure CSS, so it
   runs with or without JS; gated to prefers-reduced-motion: no-preference, so
   reduced-motion users get the copy immediately, fully legible, no movement. It
   animates the COPY, not the media, so it never fights the real hero <video>. */
@media (prefers-reduced-motion: no-preference) {
	.home-hero__title-line,
	.home-hero__subline,
	.home-hero__actions {
		animation: home-hero-rise 720ms var(--home-ease) both;
	}

	.home-hero__title-lead { animation-delay: 120ms; }
	.home-hero__title-echo { animation-delay: 260ms; }
	.home-hero__subline    { animation-delay: 400ms; }
	.home-hero__actions    { animation-delay: 520ms; }
}

@keyframes home-hero-rise {
	from { opacity: 0; transform: translateY(0.7rem); }
	to   { opacity: 1; transform: none; }
}

/* ============================================================
   Assurance strip — desktop-only spec plate. Hidden by default so mobile flows
   straight from hero to colourways; desktop opts into a slim, bordered credential
   row beneath the hero.
   ============================================================ */
.home-assurance {
	display: none;
}

@media (min-width: 48em) {
	.site-main.home > .home-assurance {
		margin-top: var(--space-lg);
	}

	.home-assurance {
		display: block;
		border-block: 1px solid var(--line);
	}

	.home-assurance__list {
		list-style: none;
		width: min(100% - 2rem, var(--container));
		margin: 0 auto;
		padding: var(--space-sm) 0;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.home-assurance__item {
		display: grid;
		gap: var(--space-3xs);
		padding-inline: clamp(var(--space-md), 4vw, var(--space-2xl));
		text-align: center;
	}

	.home-assurance__item + .home-assurance__item {
		border-left: 1px solid var(--line);
	}

	.home-assurance__label,
	.home-assurance__mark {
		display: block;
		text-transform: uppercase;
	}

	.home-assurance__label {
		color: var(--color-sage-text);
		font-size: var(--step--2);
		letter-spacing: 0.18em;
		line-height: 1;
	}

	.home-assurance__mark {
		color: var(--color-ink);
		font-size: var(--step--1);
		letter-spacing: 0.12em;
		line-height: 1.35;
	}
}

/* ============================================================
   Header note: the homepage no longer overlays the hero. The `.site-banner` is
   SOLID warm-white (stone) and sticky, sitting ABOVE the hero exactly like every
   other page (see main.css). The old transparent-over-hero system — `--overlay`
   fixed positioning, the white-chrome fills, the nav `::before` scrim and the
   `.is-solid` scroll swap — was removed here: with no nav text over the photo, the
   navbar has no legibility stake in the image, so the scrim is gone entirely. The
   hero's OWN copy grounding (`.home-hero::after`) stays — the headline still sits
   on the image. See the a11y note in the theme CLAUDE.md.
   ============================================================ */

/* ============================================================
   Colourway carousel — the merchandising beat. A calm, swipeable colour story
   that REPLACED the featured-cover section. Cohesion by REUSE: the 4:5 branded
   frame (story/PDP/lookbook idiom), Playfair names, ink price, the tracked sage
   eyebrow, the quiet arrow-link. The heading + controls sit in the container; the
   scroll ROW breaks out full-bleed (the proven hero breakout) so cards peek to
   the true screen edge — the one signature gesture. NO badges, NO sale/urgency,
   NO strikethrough: a colour story, not a discount grid.
   ============================================================ */
.site-main.home > .home-colourways {
	margin-top: clamp(var(--space-xl), 6vw, var(--space-2xl));
}

.home-colourways__head {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"eyebrow  eyebrow"
		"title    title"
		"controls viewall";
	justify-content: center;
	align-items: center;
	column-gap: var(--space-md);
	row-gap: var(--space-xs);
	margin-bottom: var(--space-xl);
	text-align: center;
}

.home-colourways__eyebrow {
	grid-area: eyebrow;
	margin: 0;
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-sage-text);
}

.home-colourways__title {
	grid-area: title;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--step-4);
	line-height: 1.05;
}

/* Arrows — hairline circle buttons (progressive enhancement; hidden until JS
   confirms it can page). The [hidden] override is required: a class `display`
   would otherwise beat the UA `[hidden]{display:none}` at equal specificity. */
.home-colourways__controls {
	grid-area: controls;
	display: inline-flex;
	gap: var(--space-2xs);
}

.home-colourways__controls[hidden] {
	display: none;
}

.home-colourways__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--color-ink);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.home-colourways__arrow:hover:not(:disabled) {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--ink-on-dark);
}

.home-colourways__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.home-colourways__arrow-glyph {
	inline-size: 1.2rem;
	block-size: 1.2rem;
	display: block;
}

/* Quiet secondary path to the full colour story. */
.home-colourways__viewall {
	grid-area: viewall;
	display: inline-flex;
	align-items: center;
	justify-self: center;
	min-height: 44px;
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	color: var(--ink-soft);
	transition: color 160ms var(--home-ease);
}

.home-colourways__viewall:hover,
.home-colourways__viewall:focus-visible {
	color: var(--color-sage-text);
}

.home-colourways__arrow-link {
	display: inline-block;
	margin-left: var(--space-2xs);
	transition: transform 200ms var(--home-ease);
}

.home-colourways__viewall:hover .home-colourways__arrow-link,
.home-colourways__viewall:focus-visible .home-colourways__arrow-link {
	transform: translateX(0.25rem);
}

/* The scrollable row — full-bleed so cards run to the screen edge and the next
   one peeks. --edge aligns the first card with the container content gutter, so
   the row lines up with the heading above it. */
.home-colourways__viewport {
	--edge: max(1rem, (100vw - var(--container)) / 2);
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--edge);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox — the arrows + peek already signal scroll */
}

.home-colourways__viewport::-webkit-scrollbar {
	display: none;
}

.home-colourways__track {
	display: flex;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	padding-inline: var(--edge);
	list-style: none;
}

.home-colourways__item {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	inline-size: min(60vw, 14rem);
	scroll-snap-align: start;
}

.home-colourways__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	text-decoration: none;
	color: var(--color-ink);
}

/* 4:5 branded frame — the story/PDP/lookbook idiom. */
.home-colourways__frame {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	transition: border-color 180ms var(--home-ease);
}

.home-colourways__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms var(--home-ease);
}

.home-colourways__card:hover .home-colourways__frame,
.home-colourways__card:focus-visible .home-colourways__frame {
	border-color: var(--line-strong);
}

.home-colourways__card:hover .home-colourways__img {
	transform: scale(1.03);
}

.home-colourways__meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.home-colourways__name {
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.15;
	transition: color 160ms var(--home-ease);
}

.home-colourways__card:hover .home-colourways__name {
	color: var(--color-sage-text);
}

/* Price — ink, quiet. Real per-colourway price_html (store currency, AED). */
.home-colourways__price {
	font-size: var(--step-0);
	color: var(--color-ink);
}

.home-colourways__add {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 44px;
	margin-top: var(--space-sm);
	padding: var(--space-2xs) 0;
	border-top: 1px solid var(--line-strong);
	color: var(--color-ink);
	font-size: var(--step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 160ms var(--home-ease), border-color 160ms var(--home-ease);
}

.home-colourways__add:hover,
.home-colourways__add:focus-visible {
	color: var(--color-sage-text);
	border-color: var(--color-sage-text);
}

.home-colourways__add.is-disabled {
	color: var(--ink-soft);
	border-color: var(--line);
	cursor: default;
}

@media (min-width: 48em) {
	.home-colourways__item {
		inline-size: 12rem;
	}
}

/* ============================================================
   Storytelling carousel (.home-stories) — the editorial beat.
   One full-width slide at a time (large ~square image → tracked-caps heading →
   quiet two-line description → centred "Shop →" link with a short underline
   rule). Nav = thin GOLD-highlighted line-SEGMENTS (not dots) flanked by
   circular chevron arrows. Native scroll-snap makes it swipeable with no JS;
   arrows + segments are progressive enhancement (home.js). Reuses the site's
   hairline-circle arrow idiom + the 4:5/branded-frame vocabulary — no new tokens.
   ============================================================ */
.site-main.home > .home-stories {
	margin-top: clamp(var(--space-xl), 8vw, var(--space-2xl));
}

.home-stories__carousel {
	position: relative;
}

/* The scrollable row — one full-width slide visible; the next is fully off-screen
   (single-slide, not a peeking row). The row breaks out FULL-BLEED (100vw) so each
   slide's image runs edge to edge like Cartier's editorial blocks. Native
   swipe/scroll works with no JS. */
.home-stories__track {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	inline-size: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-inline: -50vw;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* the segments + arrows already signal position */
}

.home-stories__track::-webkit-scrollbar {
	display: none;
}

.home-stories__slide {
	flex: 0 0 100vw;
	inline-size: 100vw;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* Each slide: a full-bleed editorial image with the caption contained beneath. */
.home-stories__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
	margin: 0;
}

/* Full-bleed image, edge to edge (no border/radius — Cartier's images bleed to
   the screen edge). Portrait on mobile, wide landscape on desktop; correct aspect
   for real lifestyle photography, which drops into the same slot. object-fit
   crops so the box is never letterboxed. */
.home-stories__frame {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	max-block-size: 82svh;
	overflow: hidden;
	background: var(--surface-raised);
}

.home-stories__frame picture,
.home-anatomy__figure picture,
.home-story__frame picture {
	display: contents;
}

.home-stories__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* The caption is re-contained (the image bleeds full width, the words don't):
   a centred, readable column with a gutter so text never touches the edge. */
.home-stories__caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	max-inline-size: 34rem;
	margin-inline: auto;
	padding-inline: var(--space-lg);
	text-align: center;
}

.home-stories__heading {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--step-2);
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.home-stories__desc {
	margin: 0;
	font-size: var(--step-0);
	line-height: 1.55;
	color: var(--ink-soft);
}

/* "Shop →" text link with a short underline RULE beneath the text (Cartier's
   "Find out more" idiom — the rule sits under the words, not text-decoration). */
.home-stories__link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 44px;
	justify-content: center;
	text-decoration: none;
	color: var(--color-ink);
}

.home-stories__link-text {
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.home-stories__link-arrow {
	display: inline-block;
	margin-left: var(--space-3xs);
	transition: transform 200ms var(--home-ease);
}

.home-stories__link-rule {
	display: block;
	inline-size: 2.25rem;
	block-size: 1px;
	background: var(--color-ink);
	transition: inline-size 200ms var(--home-ease), background 200ms var(--home-ease);
}

.home-stories__link:hover .home-stories__link-arrow,
.home-stories__link:focus-visible .home-stories__link-arrow {
	transform: translateX(0.25rem);
}

.home-stories__link:hover .home-stories__link-rule,
.home-stories__link:focus-visible .home-stories__link-rule {
	inline-size: 3.5rem;
	background: var(--color-sage-text);
}

/* NAV — segments centred, arrows flanking. Hidden until home.js confirms it can
   drive the carousel; the [hidden] override beats a class `display` at equal
   specificity, mirroring the colourway arrows. */
.home-stories__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

.home-stories__nav[hidden] {
	display: none;
}

/* Circular chevron buttons — same hairline-circle spec as the colourway arrows. */
.home-stories__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--color-ink);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.home-stories__arrow:hover:not(:disabled) {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--ink-on-dark);
}

.home-stories__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.home-stories__arrow-glyph {
	inline-size: 1.2rem;
	block-size: 1.2rem;
	display: block;
}

/* Progress = thin horizontal LINE-SEGMENTS, one per slide, side by side. The
   active segment is GOLD; inactive are pale (--line). Each is a real button with
   a 44px tap target; the visible line is the inner fill. */
.home-stories__progress {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
}

.home-stories__segment {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: clamp(1.75rem, 7vw, 2.75rem);
	block-size: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.home-stories__segment-fill {
	display: block;
	inline-size: 100%;
	block-size: 2px;
	background: var(--line);
	transition: background 200ms var(--home-ease), block-size 200ms var(--home-ease);
}

.home-stories__segment.is-active .home-stories__segment-fill {
	background: var(--color-gold);
	block-size: 3px;
}

.home-stories__segment:hover:not(.is-active) .home-stories__segment-fill {
	background: var(--line-strong);
}

@media (min-width: 48em) {
	.home-stories__heading {
		font-size: var(--step-3);
	}

	/* Wide, cinematic landscape image edge to edge (Cartier's desktop editorial
	   proportion). Capped so it stays a band, not a full-screen hero. */
	.home-stories__frame {
		aspect-ratio: 16 / 9;
		max-block-size: 78svh;
	}
}

@media (min-width: 60rem) {
	.home-hero {
		/* Complete the first-screen composition: the in-flow header and hero now
		   resolve to one viewport, so the primary action remains visible on common
		   laptop heights. The image stays dominant without forcing a discovery scroll. */
		min-height: calc(100vh - var(--topbar-h) - var(--nav-h));
		min-height: calc(100svh - var(--topbar-h) - var(--nav-h));
	}

	.home-hero__media-el {
		/* Dedicated landscape art direction already reserves the left third for
		   copy and holds the mother + baby on the right; keep its intended frame. */
		object-position: 50% 50%;
	}

	/* Desktop copy is a LEFT COLUMN, so the grounding becomes a bottom-left ellipse
	   instead of a full-width band. Anchored just past the bottom-left corner, it
	   darkens only the copy corner and is fully transparent by ~72% of its radius —
	   which lands left of the mother's face (~62% across, high in frame) and well
	   left of the window (right edge). Both keep 0% overlay = full brightness. The
	   ellipse is tall on the LEFT to cover the eyebrow at the top of the block, but
	   its horizontal falloff keeps it off the face/window regardless of height. */
	.home-hero::after {
		background: radial-gradient(
			/* Raised + deepened LEFT ellipse (was 118% 96%, ending at 72%): the longer
			   two-line lead ("Feed with confidence." wraps, vs the old one-line "Nurse
			   anywhere.") makes the copy block taller, so its TOP line ("Feed with")
			   climbs out of the café corner over a bright mid-frame patch and fell to
			   3.8:1. The ellipse is grown TALLER on the left (108% height radius, ink
			   carried out to the 74% stop) so the grounding reaches that upper line too.
			   It stays anchored bottom-left at 8% x with the SAME horizontal falloff, so
			   it is still fully transparent before the mother's face (~54% across) and
			   the window (~85%+) — verified Δluminance 0.000 (measure.mjs). Do NOT widen
			   the horizontal anchor/radius to buy contrast — that dims the protected
			   face/window. */
			118% 108% at 8% 116%,
			color-mix(in srgb, var(--color-ink) 80%, transparent) 0%,
			color-mix(in srgb, var(--color-ink) 70%, transparent) 26%,
			color-mix(in srgb, var(--color-ink) 52%, transparent) 46%,
			color-mix(in srgb, var(--color-ink) 34%, transparent) 62%,
			color-mix(in srgb, var(--color-ink) 12%, transparent) 74%,
			transparent 84%
		);
	}

	/* Desktop stays at --step-3, NOT bigger: the block is bottom-anchored, so a
	   larger headline climbs UP out of the dark café corner and over the lit
	   window/sweater (measured: --step-4 dropped line-one glyphs to ~2:1). At
	   --step-3 both short lines ride low, hard-left, over the dark zone and clear
	   AA per-glyph. Measure fits the longer line ("Noticed nowhere.") without wrap. */
	.home-hero__title {
		font-size: var(--step-3);
		max-width: 15ch;
		line-height: 1.1;
	}

	.home-hero__subline {
		font-size: var(--step-0);
		max-width: 32ch;
		margin-bottom: var(--space-lg);
	}

	/* Desktop copy is a left column over the dark café corner (AA margin to
	   spare), so it can sit with more breathing room above the bottom edge. */
	.home-hero__copy {
		padding-block: 0 var(--space-lg);
	}
}

/* ============================================================
   Cover anatomy — the single signature product-detail moment. The numbered
   list is information, not decoration; it maps confirmed facts to the future
   annotated product photograph without depending on that asset today.
   ============================================================ */
.home-anatomy {
	padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl));
	border-block: 1px solid var(--line-warm);
}

.home-anatomy__head {
	max-width: 42rem;
	margin-bottom: var(--space-xl);
}

.home-anatomy__lead {
	margin-inline: 0;
}

.home-anatomy__layout {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
}

.home-anatomy__figure {
	margin: 0;
	max-width: 24rem;
	justify-self: center;
	background: var(--surface-raised);
	border: 1px solid var(--line);
}

.home-anatomy__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.home-anatomy__notes {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--line);
}

.home-anatomy__note {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: var(--space-md);
	padding-block: var(--space-lg);
	border-top: 1px solid var(--line);
}

.home-anatomy__number {
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-style: italic;
	color: var(--color-gold);
}

.home-anatomy__note h3 {
	margin: 0 0 var(--space-2xs);
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 500;
}

.home-anatomy__note p {
	margin: 0;
	max-width: 40ch;
	color: var(--ink-soft);
	line-height: 1.6;
}

@media (min-width: 60rem) {
	.home-anatomy__layout {
		grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1fr);
		gap: clamp(var(--space-xl), 7vw, var(--space-3xl));
	}

	.home-anatomy__figure {
		max-width: 28rem;
	}
}

/* ============================================================
   Brand-story moment (lookbook "offset" idiom)
   ============================================================ */
.home-story {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

.home-story__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}

.home-story__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-story__title {
	margin: 0 0 var(--space-md);
	max-width: 18ch;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--step-3);
	line-height: 1.1;
}

.home-story__body {
	margin: 0 0 var(--space-lg);
	max-width: 46ch;
	color: var(--ink-soft);
	font-size: var(--step-0);
	line-height: 1.7;
}

/* One quiet path out of the story; the section does not repeat the shop action
   already carried by the hero, product shelf and sticky mobile bar. */
.home-story__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-lg);
}

.home-story__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* touch target — the label alone was ~21px tall */
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	color: var(--color-ink);
	transition: color 160ms var(--home-ease);
}

.home-story__link:hover,
.home-story__link:focus-visible {
	color: var(--color-sage-text);
}

.home-story__link:hover .home-story__arrow,
.home-story__link:focus-visible .home-story__arrow {
	transform: translateX(0.25rem);
}

/* Mobile (single-column) refinements:
   (1) De-bulk the story frame by SCALING IT DOWN (a centred, width-capped card),
   NOT by cropping its height — the ratio stays a true portrait 4:5, consistent
   with the hero/feature/lookbook/PDP, so the founder photo lands shaped right.
   (2) Give the story link a full-width, hairline-divided row with a clear target. */
@media (max-width: 59.99rem) {
	.home-story__frame {
		max-width: min(80vw, 19rem);
		margin-inline: auto;
	}

	.home-story__links {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-top: var(--space-md);
		border-bottom: 1px solid var(--line);
	}

	.home-story__link {
		justify-content: space-between;
		min-height: 52px;
		border-top: 1px solid var(--line);
	}
}

@media (min-width: 60rem) {
	.home-story {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
		gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
		align-items: center;
	}

	.home-story__copy {
		align-self: center;
	}

	.home-story__title {
		font-size: var(--step-4);
	}
}

/* ============================================================
   Newsletter — the one tonal shift (full-bleed sage band)
   ============================================================ */
.home-newsletter {
	/* Viewport-centred break-out (same proven pattern as the PDP reveal band /
	   lookbook bleed): centres against the viewport regardless of the container. */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-inline: -50vw;
	/* The section-rhythm margin can't apply to a full-bleed element via the
	   > section + section rule cleanly, so set the top gap explicitly too. */
	margin-top: clamp(var(--space-2xl), 7vw, 5rem);
	padding-block: clamp(var(--space-2xl), 7vw, var(--space-3xl));
	background: var(--color-sage);
}

.home-newsletter__inner {
	width: min(100% - 2rem, 44rem);
	margin-inline: auto;
	text-align: center;
}

.home-newsletter__logo {
	display: block;
	width: min(11rem, 46vw);
	height: auto;
	margin: 0 auto var(--space-lg);
}

.home-newsletter__title {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--step-3);
	line-height: 1.12;
}

.home-newsletter__lead {
	margin: 0 auto var(--space-xl);
	max-width: 42ch;
	color: color-mix(in srgb, var(--color-ink) 78%, var(--color-sage));
	font-size: var(--step-0);
	line-height: 1.65;
}

/* Newsletter provider is unconfirmed; this is the integration-ready UI slot. */
.home-newsletter__form {
	width: min(100%, 30rem);
	margin-inline: auto;
	text-align: left;
}

.home-newsletter__label {
	display: block;
	margin-bottom: var(--space-2xs);
	font-size: var(--step--1);
	letter-spacing: 0.04em;
	color: var(--color-ink);
}

.home-newsletter__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.home-newsletter__input {
	flex: 1 1 auto;
	min-height: 3.25rem;
}

.home-newsletter__submit {
	min-height: 3.25rem;
	white-space: nowrap;
	/* The ink hairline keeps the deep-sage action distinct against the softer
	   sage field while the fill remains part of the brand palette. */
	border-color: var(--color-ink);
}

.home-newsletter__note {
	margin: var(--space-sm) 0 0;
	font-size: var(--step--1);
	color: color-mix(in srgb, var(--color-ink) 66%, var(--color-sage));
}

@media (min-width: 40rem) {
	.home-newsletter__row {
		flex-direction: row;
		align-items: stretch;
	}

	.home-newsletter__submit {
		flex: 0 0 auto;
	}
}

/* ============================================================
   Sticky buy bar (Tier 2 #5B) — MOBILE ONLY, JS-revealed, non-load-bearing.
   A slim, restrained, persistent "Shop the cover" that appears once the hero is
   scrolled past and hides the moment the footer enters view (so it NEVER covers
   the footer), and never shows on desktop or without JS. Deliberately minimal —
   a heavy bar reads cheap. Reveal is gated by .is-enabled (home.js adds it on
   mobile) + .is-visible (an IntersectionObserver toggles it); `visibility` keeps
   it out of the tab/AT order while hidden. Slide snaps under the global
   reduced-motion catch-all in main.css. Sits below the header (z 50).
   ============================================================ */
.home-buybar {
	display: none;
	position: fixed;
	inset: auto 0 0 0;
	z-index: 40;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-2xs) clamp(var(--space-sm), 4vw, var(--space-md));
	padding-bottom: calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px));
	background: color-mix(in srgb, var(--surface-page) 90%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--line-strong);
	box-shadow: 0 -8px 24px -20px rgba(0, 0, 0, 0.45);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 260ms var(--home-ease), visibility 260ms;
}

@media (max-width: 47.99rem) {
	.home-buybar.is-enabled {
		display: flex;
	}
}

.home-buybar.is-visible {
	transform: translateY(0);
	visibility: visible;
}

.home-buybar__info {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.home-buybar__name {
	font-family: var(--font-display);
	font-size: var(--step-0);
	color: var(--color-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.home-buybar__price {
	font-size: var(--step--1);
	color: var(--ink-soft);
}

/* Compact the shared .button for the slim bar (keeps its ink fill, hover and
   two-tone focus ring; only the size shrinks). */
.home-buybar__cta {
	min-height: 44px;
	padding: 0 var(--space-md);
	font-size: var(--step--1);
	white-space: nowrap;
	flex: 0 0 auto;
}

.home-buybar__cta-arrow {
	margin-left: var(--space-2xs);
}

/* ============================================================
   Reduced motion — the hero copy is already legible-static; quiet the rest
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	/* The hero copy entrance is gated to no-preference, so it is already absent
	   here — the headline, sub-line and CTAs render immediately, fully legible. */
	.home-colourways__img,
	.home-colourways__frame,
	.home-colourways__name,
	.home-colourways__arrow,
	.home-colourways__arrow-link,
	.home-colourways__viewall,
	.home-story__arrow,
	.home-story__link {
		transition: none;
	}
}