/* OtterMove site styles. Plain CSS.
   Colours, fonts and sizes come from theme.json. */

/* Keyboard focus: always visible. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.wp-element-button:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--wp--preset--color--otter-brown);
	outline-offset: 3px;
}

/* Links keep their underline; hover makes it heavier. */
a:hover {
	text-decoration-thickness: 2px;
}

/* Readable line length for running text. */
.wp-block-post-content p {
	max-width: 65ch;
}

/* Commute and Explore sections: heading, text and buttons share one left edge,
   the left edge of the 1200px wide column (the same edge as the header logo
   and the footer text). WordPress centres every child of a constrained group
   with auto margins marked !important, so the left margin is set here with
   !important too. The right margin stays auto, so a line-length cap shortens
   the right side only. (The hero has its own rules further down.) */
.om-commute > :not(.alignfull):not(.alignleft):not(.alignright),
.om-explore > :not(.alignfull):not(.alignleft):not(.alignright) {
	max-width: var(--wp--style--global--wide-size);
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
	text-align: left;
}

.om-commute > p:not(.alignfull):not(.alignleft):not(.alignright),
.om-explore > p:not(.alignfull):not(.alignleft):not(.alignright) {
	max-width: 65ch;
}

/* Logo: scales with the screen, keeps its shape, reserves its space. */
.om-logo {
	margin: 0;
}

.om-logo img {
	display: block;
	width: clamp(140px, 40vw, 220px);
	height: auto;
	aspect-ratio: 1655 / 318;
}

/* Header and footer: tidy gaps. */
.om-header {
	row-gap: var(--wp--preset--spacing--30);
}

.om-footer p {
	margin: 0;
}

/* Spacing between page sections. */
.om-commute > * + *,
.om-explore > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Jump links land below the header, not under it. */
.om-commute,
.om-explore {
	scroll-margin-top: var(--wp--preset--spacing--60);
}

/* ==========================================================================
   HERO (Stage 2B): an immersive, full-width scene. The headline, supporting
   line and buttons are the editable blocks from Pages > Home, layered over
   the calm left side of the picture. The picture and the cream wash behind
   the text are decorative theme art drawn on .om-hero::before and
   .om-hero::after (no alt text, no words inside them).
   ========================================================================== */

/* Tunable values: each is a one-line edit. */
.om-hero {
	--om-hero-ratio: 2;                   /* desktop hero box shape: width divided by height (2 = twice as wide as tall) */
	--om-hero-min-height: 34rem;          /* desktop hero never shorter than this */
	--om-hero-max-height: 56rem;          /* desktop hero never taller than this */
	--om-hero-art-pos: 100% 60%;          /* desktop picture position; x at 100% so a narrow window only trims the left side */
	--om-hero-fade-top: 14%;              /* how far down the top of the scene melts into the cream header area */
	--om-hero-fade-bottom: 18%;           /* how far up the bottom of the scene melts into the cream page */
	--om-hero-wash-core: 90%;             /* cream wash opacity at its centre */
	--om-hero-wash-mid: 78%;              /* cream wash opacity 45% of the way out */
	--om-hero-wash-w: 52%;                /* wash width */
	--om-hero-wash-h: 70%;                /* wash height */
	--om-hero-wash-x: 14%;                /* wash centre, across */
	--om-hero-wash-y: 50%;                /* wash centre, down */
	--om-hero-art-ratio-mobile: 1.15;     /* phone picture shape (width / height) */
	--om-hero-fade-top-mobile: 18%;       /* phone picture top fade */
	--om-hero-art-radius-mobile: 1.75rem; /* phone picture corner radius */
	--om-hero-text-soft: #7A4A2B;         /* supporting line colour below 900px only; 6.92:1 on cream */
	--om-hero-lede-size: clamp(1.125rem, 1.15vw + 0.4rem, 1.5rem);   /* supporting line size: about 23px at a 1440px window, 18px minimum, 24px maximum */
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
}

/* Keep the hero content inside the same 1200px column and left edge as the
   header logo: the page padding plus half of any space beyond 1200px. */
.wp-block-group.om-hero {
	padding-left: calc(var(--wp--style--root--padding-left) + max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)));
	padding-right: calc(var(--wp--style--root--padding-right) + max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)));
}

/* Every direct child: undo WordPress's centring (auto margins, 720px cap). */
.om-hero > :not(.alignfull):not(.alignleft):not(.alignright) {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left;
}

/* Vertical spacing between the text blocks uses margins. */
.om-hero > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.om-hero .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Headline: very heavy, tightly set, balanced lines. */
.om-hero h1 {
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* PROVISIONAL accent bar: delete this one rule to remove the mustard bar. */
.om-hero h1::before {
	content: "";
	display: block;
	width: 44px;
	height: 5px;
	margin-block-end: var(--wp--preset--spacing--40);
	border-radius: 999px;
	background: var(--wp--preset--color--mustard);
}

/* Supporting line: normal weight, short lines. Softer brown on cream below
   900px; full otter brown over the picture at 900px and wider (see below). */
.om-hero > p:not(.alignfull):not(.alignleft):not(.alignright) {
	max-width: 40ch;
	/* !important is needed because WordPress's font-size preset class on the
	   paragraph (.has-large-font-size) is itself !important. */
	font-size: var(--om-hero-lede-size) !important;
	line-height: 1.5;
	font-weight: 400;
	color: var(--om-hero-text-soft);
}

/* Second button: outlined. The first button is the default brown button from
   theme.json. Both have a 2px border so they are exactly the same height. */
.om-hero .wp-block-button:nth-child(2) .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--otter-brown);
	border: 2px solid var(--wp--preset--color--otter-brown);
}

.om-hero .wp-block-button:nth-child(2) .wp-block-button__link:hover,
.om-hero .wp-block-button:nth-child(2) .wp-block-button__link:active {
	background-color: var(--wp--preset--color--otter-brown);
	color: var(--wp--preset--color--cream);
}

.om-hero::before,
.om-hero::after {
	content: "";
}

/* Below 900px: stacked. Text on cream first, then the picture. Only the
   887px picture is requested here. */
@media (max-width: 899.98px) {
	.om-hero::after {
		display: none;
	}

	.om-hero::before {
		position: static;
		order: 99;
		align-self: stretch;
		display: block;
		aspect-ratio: var(--om-hero-art-ratio-mobile);
		margin-top: var(--wp--preset--spacing--50);
		background-image: url("../images/hero-immersive-mobile-887.webp");
		background-size: cover;
		background-position: 100% 60%;
		background-repeat: no-repeat;
		border-radius: 0 var(--om-hero-art-radius-mobile) var(--om-hero-art-radius-mobile) var(--om-hero-art-radius-mobile);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--om-hero-fade-top-mobile));
		mask-image: linear-gradient(to bottom, transparent 0, #000 var(--om-hero-fade-top-mobile));
	}
}

/* 900px and wider: the picture fills the whole hero, edge to edge. Its top
   melts into the cream header area and its bottom into the cream page. A soft
   cream wash sits between the picture and the text so the words stay readable.
   Only the 1774px picture is requested here. */
@media (min-width: 900px) {
	/* The height follows the screen width (shape from --om-hero-ratio), kept
	   between the min and max. This is done with a height, not aspect-ratio
	   plus min/max-height, because that combination can widen or narrow the
	   box and push the page sideways. */
	.om-hero {
		min-height: clamp(var(--om-hero-min-height), calc(100vw / var(--om-hero-ratio)), var(--om-hero-max-height));
		justify-content: center;
	}

	/* WordPress writes the group's top and bottom padding inline, so this
	   needs !important to win. */
	.wp-block-group.om-hero {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.om-hero::before {
		position: absolute;
		inset: 0;
		z-index: -2;
		/* Second regeneration of the hero (foreground corner bushes removed).
		   The previous hero, hero-immersive-1774.webp, is kept for rollback. */
		background-image: url("../images/hero-immersive-v2-1774.webp");
		background-size: cover;
		background-position: var(--om-hero-art-pos);
		background-repeat: no-repeat;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--om-hero-fade-top), #000 calc(100% - var(--om-hero-fade-bottom)), transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 var(--om-hero-fade-top), #000 calc(100% - var(--om-hero-fade-bottom)), transparent 100%);
	}

	.om-hero::after {
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background: radial-gradient(
			ellipse var(--om-hero-wash-w) var(--om-hero-wash-h) at var(--om-hero-wash-x) var(--om-hero-wash-y),
			color-mix(in srgb, var(--wp--preset--color--cream) var(--om-hero-wash-core), transparent) 0,
			color-mix(in srgb, var(--wp--preset--color--cream) var(--om-hero-wash-mid), transparent) 45%,
			transparent 100%
		);
	}

	/* Text column. */
	.om-hero > :not(.alignfull):not(.alignleft):not(.alignright) {
		max-width: min(100%, 34rem);
	}

	.om-hero > p:not(.alignfull):not(.alignleft):not(.alignright) {
		max-width: 34ch;
		color: var(--wp--preset--color--otter-brown);
	}

	.om-hero .wp-block-button:nth-child(2) .wp-block-button__link {
		background-color: color-mix(in srgb, var(--wp--preset--color--cream) 55%, transparent);
	}
}

/* ==========================================================================
   LEGACY (kept for reference; the homepage v2 markup does not use these
   classes). CAPSULES (Stage 3A): Commute and Explore as two soft cards. Home page only:
   every rule starts with body.home. The picture in each card is decorative
   theme art drawn on ::after (no alt text, no words inside it).
   1024px and up: side by side, text left, picture right, the row pulled up
   over the hero's faded bottom edge. 560 to 1023px: stacked, each card still
   text left and picture right (from 900px the Commute card alone climbs over
   the hero's faded bottom edge). Under 560px: stacked, each card vertical
   (heading, picture, text) with the whole picture showing.
   ========================================================================== */

/* Tunable values: each is a one-line edit. */
body.home .wp-block-post-content {
	--om-cap-radius: 2rem;                 /* card corner radius */
	--om-cap-radius-sm: 1.25rem;           /* picture corner radius on phones */
	--om-cap-art-w: 45%;                   /* picture width, as a share of the card (560px and up) */
	--om-cap-overlap: 2.5rem;              /* how far the row climbs over the hero's faded bottom (900px and up) */
	--om-cap-gap: var(--wp--preset--spacing--30);   /* gap between the cards */
	--om-cap-min-height: 14.5rem;          /* card minimum height (about 232px); text can make it taller */
	--om-cap-pad-x: var(--wp--preset--spacing--50); /* card side padding */
	--om-cap-pad-y: var(--wp--preset--spacing--40); /* card top and bottom padding */
	--om-cap-text-gap: var(--wp--preset--spacing--30); /* space between the text and the picture */
	--om-cap-art-pos-commute: 8% 70%;      /* Commute picture position inside its panel (keeps all three otters in view, clear of the fade, down to 900px) */
	--om-cap-art-pos-explore: 80% 65%;     /* Explore picture position inside its panel (keeps the kayak and paddle clear of the fade) */
	--om-cap-fade-commute: min(12%, 2rem); /* Commute picture's soft left-edge fade: 12% of its width, never wider than 2rem (the otters sit close to the edge, so it stays short) */
	--om-cap-fade-explore: min(20%, 4rem); /* Explore picture's soft left-edge fade: 20% of its width, never wider than 4rem (the kayaker is well to the right) */
	--om-cap-h2-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);   /* card heading size */
	--om-cap-text-size: 1rem;              /* card text size */
	--om-cap-shadow: 0 0.5rem 1.75rem rgba(86, 39, 14, 0.12);   /* gentle shadow */
	/* Pictures are set here so a later image carousel can swap the Explore
	   picture by changing one value. */
	--om-cap-commute-art: url("../images/capsule-commute-family-1774.webp");
	--om-cap-explore-art: url("../images/capsule-explore-kayak-1774.webp");
}

/* The page content becomes a grid. Every block spans the full row unless it
   is placed below, so the hero and any block added later are unaffected. */
body.home .wp-block-post-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, min(100%, var(--wp--style--global--wide-size))) minmax(0, 1fr);
}

body.home .wp-block-post-content > * {
	grid-column: 1 / -1;
}

body.home .wp-block-post-content > .om-commute,
body.home .wp-block-post-content > .om-explore {
	grid-column: 2;
}

body.home .wp-block-post-content > .om-commute {
	grid-row: 2;
}

body.home .wp-block-post-content > .om-explore {
	grid-row: 3;
}

/* The cards. Margins are reset because WordPress pulls full-width blocks out
   by the page padding. */
body.home .om-commute,
body.home .om-explore {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	max-width: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	border-radius: var(--om-cap-radius);
	box-shadow: var(--om-cap-shadow);
	padding-left: var(--om-cap-pad-x);
	padding-right: var(--om-cap-pad-x);
	/* WordPress writes the top and bottom padding inline, so !important. */
	padding-top: var(--om-cap-pad-y) !important;
	padding-bottom: var(--om-cap-pad-y) !important;
}

body.home .wp-block-post-content > .om-explore {
	margin-bottom: var(--wp--preset--spacing--50);
}

body.home .om-commute > h2,
body.home .om-explore > h2 {
	font-size: var(--om-cap-h2-size);
	line-height: 1.1;
}

body.home .om-commute > p,
body.home .om-explore > p {
	font-size: var(--om-cap-text-size);
	line-height: 1.5;
}

/* The picture. */
body.home .om-commute::after,
body.home .om-explore::after {
	content: "";
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: cover;
}

body.home .om-commute::after {
	background-image: var(--om-cap-commute-art);
	background-position: var(--om-cap-art-pos-commute);
}

body.home .om-explore::after {
	background-image: var(--om-cap-explore-art);
	background-position: var(--om-cap-art-pos-explore);
}

/* 560px and up: text left, picture right, flush to the card's right, top and
   bottom edges and clipped by its rounded corners. A short soft fade blends
   the picture's left edge into the card. */
@media (min-width: 560px) {
	body.home .om-commute,
	body.home .om-explore {
		min-height: var(--om-cap-min-height);
		padding-right: calc(var(--om-cap-art-w) + var(--om-cap-text-gap));
	}

	body.home .om-commute::after,
	body.home .om-explore::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: var(--om-cap-art-w);
		/* Eased (smoothstep-like) fade, so the join between the text area and the
		   picture looks gradual. Its length is --om-cap-fade, set for each card below. */
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			rgba(0, 0, 0, 0.028) calc(var(--om-cap-fade) * 0.1),
			rgba(0, 0, 0, 0.156) calc(var(--om-cap-fade) * 0.25),
			rgba(0, 0, 0, 0.352) calc(var(--om-cap-fade) * 0.4),
			rgba(0, 0, 0, 0.5) calc(var(--om-cap-fade) * 0.5),
			rgba(0, 0, 0, 0.648) calc(var(--om-cap-fade) * 0.6),
			rgba(0, 0, 0, 0.844) calc(var(--om-cap-fade) * 0.75),
			rgba(0, 0, 0, 0.972) calc(var(--om-cap-fade) * 0.9),
			#000 var(--om-cap-fade)
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			rgba(0, 0, 0, 0.028) calc(var(--om-cap-fade) * 0.1),
			rgba(0, 0, 0, 0.156) calc(var(--om-cap-fade) * 0.25),
			rgba(0, 0, 0, 0.352) calc(var(--om-cap-fade) * 0.4),
			rgba(0, 0, 0, 0.5) calc(var(--om-cap-fade) * 0.5),
			rgba(0, 0, 0, 0.648) calc(var(--om-cap-fade) * 0.6),
			rgba(0, 0, 0, 0.844) calc(var(--om-cap-fade) * 0.75),
			rgba(0, 0, 0, 0.972) calc(var(--om-cap-fade) * 0.9),
			#000 var(--om-cap-fade)
		);
	}

	body.home .om-commute::after {
		--om-cap-fade: var(--om-cap-fade-commute);
	}

	body.home .om-explore::after {
		--om-cap-fade: var(--om-cap-fade-explore);
	}
}

/* Under 560px: each card is vertical. Heading, then the whole picture (the
   picture's own 2:1 shape, nothing cropped), then the text. */
@media (max-width: 559.98px) {
	body.home .wp-block-post-content {
		--om-cap-pad-x: var(--wp--preset--spacing--40);
	}

	body.home .om-commute > *,
	body.home .om-explore > * {
		order: 3;
	}

	body.home .om-commute > h2,
	body.home .om-explore > h2 {
		order: 1;
	}

	body.home .om-commute::after,
	body.home .om-explore::after {
		order: 2;
		display: block;
		aspect-ratio: 2 / 1;
		margin-block: var(--wp--preset--spacing--30);
		border-radius: var(--om-cap-radius-sm);
		background-position: center;
	}
}

/* 900px to 1023px: the cards stay stacked (each still text left, picture
   right), but the immersive hero is in use from 900px, so the first card
   (Commute) climbs over the hero's faded bottom edge. Explore keeps the
   normal gap below Commute. */
@media (min-width: 900px) and (max-width: 1023.98px) {
	body.home .wp-block-post-content > .om-commute {
		margin-top: calc(var(--om-cap-overlap) * -1);
	}
}

/* 1024px and up: the two cards sit side by side in one row, centred in the
   same 1200px column as the header logo, and climb over the hero's faded
   bottom edge. */
@media (min-width: 1024px) {
	body.home .wp-block-post-content {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, calc((min(100%, var(--wp--style--global--wide-size)) - var(--om-cap-gap)) / 2))
			var(--om-cap-gap)
			minmax(0, calc((min(100%, var(--wp--style--global--wide-size)) - var(--om-cap-gap)) / 2))
			minmax(0, 1fr);
	}

	body.home .wp-block-post-content > .om-commute {
		grid-column: 2;
		grid-row: 2;
		margin-top: calc(var(--om-cap-overlap) * -1);
	}

	body.home .wp-block-post-content > .om-explore {
		grid-column: 4;
		grid-row: 2;
		margin-top: calc(var(--om-cap-overlap) * -1);
	}

	body.home .wp-block-post-content > .om-commute {
		margin-bottom: var(--wp--preset--spacing--50);
	}
}

/* Wide screens have room, so the Commute picture can sit further left. */
@media (min-width: 1200px) {
	body.home .wp-block-post-content {
		--om-cap-art-pos-commute: 2% 70%;
	}
}

/* ==========================================================================
   LEGACY (kept for reference; the homepage v2 template has no post-content
   block, so these layers no longer render). FOREGROUND FOLIAGE (Stage 3B): soft, out-of-focus leaves at the lower left
   and lower right of the card row, so it feels as if we look past nearby
   leaves into the scene. Home page only (body.home). Two decorative theme
   pictures drawn on the ::before (left) and ::after (right) of the Home
   page's content block. They scroll with the page, sit in front of the cards,
   take no clicks and take no space. The pictures are unblurred originals: all
   the blur and depth of field below is CSS. A mask keeps the leaves off the
   card text and dissolves their flat bottom edge.
   ========================================================================== */

/* Tunable values: each is a one-line edit. These are starting values to be
   judged on the real render, not locked decisions. */
body.home .wp-block-post-content {
	--om-fol-blur: 7px;                    /* depth-of-field blur (1024px and up) */
	--om-fol-opacity: 0.9;                 /* leaf opacity */
	--om-fol-brightness: 1;                /* below 1 darkens the leaves slightly */
	--om-fol-w: clamp(14rem, 26vw, 26rem); /* width of each leaf picture (1024px and up) */
	--om-fol-shift: 0px;                   /* extra distance the picture sits beyond the screen edge */
	--om-fol-drop: calc(var(--wp--preset--spacing--50) + 0.5rem);   /* how far the bottom sits below the content block (stays above the footer text) */
	--om-fol-fade: 32%;                    /* bottom dissolve, as a share of the picture's height */
	--om-fol-fade-top: 22%;                /* top dissolve, as a share of the picture's height */
	--om-fol-into: 2rem;                   /* below the text line, how far up into a card's lower edge the leaves may spread inward */
	/* Distance from the screen edge to the card row (the 1200px column). */
	--om-fol-row: max(var(--wp--preset--spacing--40), calc((100vw - var(--wp--style--global--wide-size)) / 2));
	/* How far in from the screen edge the leaves reach before they have dissolved:
	   left stops short of the card text, right stops short of the kayak. */
	--om-fol-reach-l: calc(var(--om-fol-row) + var(--wp--preset--spacing--50) - 1.25rem);
	--om-fol-reach-r: calc(var(--om-fol-row) + 1.25rem);
	/* Pictures. */
	--om-fol-left-art: url("../images/foliage-left-1448.webp");
	--om-fol-right-art: url("../images/foliage-right-1448.webp");
	position: relative;
	overflow-x: clip;
}

body.home .wp-block-post-content::before,
body.home .wp-block-post-content::after {
	/* How far the picture's outer edge sits beyond the screen edge: at least
	   4 times the blur, so the blurred edge is never seen. */
	--om-fol-out: calc(var(--om-fol-blur) * 4 + var(--om-fol-shift));
	/* Eased (smoothstep-like) bottom dissolve. */
	--om-fol-mask-v: linear-gradient(
		to bottom,
		#000 calc(100% - var(--om-fol-fade)),
		rgba(0, 0, 0, 0.972) calc(100% - var(--om-fol-fade) * 0.9),
		rgba(0, 0, 0, 0.844) calc(100% - var(--om-fol-fade) * 0.75),
		rgba(0, 0, 0, 0.648) calc(100% - var(--om-fol-fade) * 0.6),
		rgba(0, 0, 0, 0.5) calc(100% - var(--om-fol-fade) * 0.5),
		rgba(0, 0, 0, 0.352) calc(100% - var(--om-fol-fade) * 0.4),
		rgba(0, 0, 0, 0.156) calc(100% - var(--om-fol-fade) * 0.25),
		rgba(0, 0, 0, 0.028) calc(100% - var(--om-fol-fade) * 0.1),
		transparent 100%
	);
	/* Eased top dissolve. */
	--om-fol-mask-t: linear-gradient(
		to bottom,
		transparent 0,
		rgba(0, 0, 0, 0.028) calc(var(--om-fol-fade-top) * 0.1),
		rgba(0, 0, 0, 0.156) calc(var(--om-fol-fade-top) * 0.25),
		rgba(0, 0, 0, 0.352) calc(var(--om-fol-fade-top) * 0.4),
		rgba(0, 0, 0, 0.5) calc(var(--om-fol-fade-top) * 0.5),
		rgba(0, 0, 0, 0.648) calc(var(--om-fol-fade-top) * 0.6),
		rgba(0, 0, 0, 0.844) calc(var(--om-fol-fade-top) * 0.75),
		rgba(0, 0, 0, 0.972) calc(var(--om-fol-fade-top) * 0.9),
		#000 var(--om-fol-fade-top)
	);
	/* Low band: along the bottom (below the text line) the leaves may spread
	   inward past the reach. The card's bottom edge is the drop plus the
	   content block's bottom margin up from the picture's bottom. */
	--om-fol-low: calc(var(--om-fol-drop) + var(--wp--preset--spacing--50) + var(--om-fol-into));
	--om-fol-mask-b: linear-gradient(
		to bottom,
		transparent calc(100% - var(--om-fol-low)),
		#000 calc(100% - var(--om-fol-low) + 0.9rem)
	);
	content: "";
	position: absolute;
	z-index: 2;
	bottom: calc(var(--om-fol-drop) * -1);
	width: var(--om-fol-w);
	aspect-ratio: 1448 / 1086;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: var(--om-fol-opacity);
	filter: blur(var(--om-fol-blur)) brightness(var(--om-fol-brightness));
	-webkit-mask-composite: source-in, source-in, source-over, source-over;
	mask-composite: intersect, intersect, add, add;
}

body.home .wp-block-post-content::before {
	left: calc(var(--om-fol-out) * -1);
	background-image: var(--om-fol-left-art);
	/* Inner side: eased fade to nothing at the reach, measured from the screen edge. */
	--om-fol-mask-h: linear-gradient(
		to right,
		#000 calc(var(--om-fol-out) + var(--om-fol-reach-l) * 0.35),
		rgba(0, 0, 0, 0.972) calc(var(--om-fol-out) + var(--om-fol-reach-l) * 0.41),
		rgba(0, 0, 0, 0.844) calc(var(--om-fol-out) + var(--om-fol-reach-l) * 0.51),
		rgba(0, 0, 0, 0.648) calc(var(--om-fol-out) + var(--om-fol-reach-l) * 0.61),
		rgba(0, 0, 0, 0.5) calc(var(--om-fol-out) + var(--om-fol-reach-l) * 0.675),
		rgba(0, 0, 0, 0.352) calc(var(--om-fol-out) + var(--om-fol-reach-l) * 0.74),
		rgba(0, 0, 0, 0.156) calc(var(--om-fol-out) + var(--om-fol-reach-l) * 0.84),
		rgba(0, 0, 0, 0.028) calc(var(--om-fol-out) + var(--om-fol-reach-l) * 0.94),
		transparent calc(var(--om-fol-out) + var(--om-fol-reach-l))
	);
	-webkit-mask-image: var(--om-fol-mask-v), var(--om-fol-mask-t), var(--om-fol-mask-h), var(--om-fol-mask-b);
	mask-image: var(--om-fol-mask-v), var(--om-fol-mask-t), var(--om-fol-mask-h), var(--om-fol-mask-b);
}

body.home .wp-block-post-content::after {
	right: calc(var(--om-fol-out) * -1);
	background-image: var(--om-fol-right-art);
	--om-fol-mask-h: linear-gradient(
		to left,
		#000 calc(var(--om-fol-out) + var(--om-fol-reach-r) * 0.35),
		rgba(0, 0, 0, 0.972) calc(var(--om-fol-out) + var(--om-fol-reach-r) * 0.41),
		rgba(0, 0, 0, 0.844) calc(var(--om-fol-out) + var(--om-fol-reach-r) * 0.51),
		rgba(0, 0, 0, 0.648) calc(var(--om-fol-out) + var(--om-fol-reach-r) * 0.61),
		rgba(0, 0, 0, 0.5) calc(var(--om-fol-out) + var(--om-fol-reach-r) * 0.675),
		rgba(0, 0, 0, 0.352) calc(var(--om-fol-out) + var(--om-fol-reach-r) * 0.74),
		rgba(0, 0, 0, 0.156) calc(var(--om-fol-out) + var(--om-fol-reach-r) * 0.84),
		rgba(0, 0, 0, 0.028) calc(var(--om-fol-out) + var(--om-fol-reach-r) * 0.94),
		transparent calc(var(--om-fol-out) + var(--om-fol-reach-r))
	);
	-webkit-mask-image: var(--om-fol-mask-v), var(--om-fol-mask-t), var(--om-fol-mask-h), var(--om-fol-mask-b);
	mask-image: var(--om-fol-mask-v), var(--om-fol-mask-t), var(--om-fol-mask-h), var(--om-fol-mask-b);
}

/* 1024px and up, wide screens: the page column stops at 1200px, so the margin
   beside it grows with the screen. The leaf pictures grow with that margin
   (never past 44rem, so the 1448px pictures are never enlarged on a 2x screen) so the leaves still reach in toward the lower outer
   corners of the cards. Their height stays about what it is at 1440px: the
   picture's top is cropped away (the top fade dissolves the cut), so a wide
   screen gets a wider, not a taller, cluster and the leaves never climb into
   the hero. At 1440px and narrower this changes nothing. */
@media (min-width: 1024px) {
	body.home .wp-block-post-content {
		--om-fol-w: clamp(14rem, max(26vw, calc(var(--om-fol-row) * 1.48 + 12rem)), 44rem);
		--om-fol-h: min(calc(var(--om-fol-w) * 0.75), 17.5rem);
		--om-fol-ramp: 2.5rem;                 /* how gradually the leaves fade in over a card's lower edge */
		/* Colour: the leaves are lit by the same soft, warm morning light as the
		   hero's cream-washed edges, so they are lighter and less saturated than
		   the pictures themselves. */
		--om-fol-opacity: 0.82;
		--om-fol-brightness: 1.2;
		--om-fol-saturate: 0.75;               /* 1 = the picture's own colour, 0 = grey */
		--om-fol-contrast: 1;                  /* below 1 softens the light-to-dark range (it also turns the leaves grey-green, so it stays at 1) */
	}

	body.home .wp-block-post-content::before,
	body.home .wp-block-post-content::after {
		height: var(--om-fol-h);
		background-size: 100% auto;
		filter: blur(var(--om-fol-blur)) brightness(var(--om-fol-brightness)) saturate(var(--om-fol-saturate)) contrast(var(--om-fol-contrast));
		/* The low band's top edge, eased over --om-fol-ramp instead of a short
		   straight ramp, so no line shows where the leaves start over a card. */
		--om-fol-mask-b: linear-gradient(
			to bottom,
			transparent calc(100% - var(--om-fol-low)),
			rgba(0, 0, 0, 0.028) calc(100% - var(--om-fol-low) + var(--om-fol-ramp) * 0.1),
			rgba(0, 0, 0, 0.156) calc(100% - var(--om-fol-low) + var(--om-fol-ramp) * 0.25),
			rgba(0, 0, 0, 0.352) calc(100% - var(--om-fol-low) + var(--om-fol-ramp) * 0.4),
			rgba(0, 0, 0, 0.5) calc(100% - var(--om-fol-low) + var(--om-fol-ramp) * 0.5),
			rgba(0, 0, 0, 0.648) calc(100% - var(--om-fol-low) + var(--om-fol-ramp) * 0.6),
			rgba(0, 0, 0, 0.844) calc(100% - var(--om-fol-low) + var(--om-fol-ramp) * 0.75),
			rgba(0, 0, 0, 0.972) calc(100% - var(--om-fol-low) + var(--om-fol-ramp) * 0.9),
			#000 calc(100% - var(--om-fol-low) + var(--om-fol-ramp))
		);
	}

	body.home .wp-block-post-content::before {
		background-position: left bottom;
	}

	body.home .wp-block-post-content::after {
		background-position: right bottom;
	}
}

/* Under 1024px: a smaller, more restrained treatment, using the 724px pictures. */
@media (max-width: 1023.98px) {
	body.home .wp-block-post-content {
		--om-fol-blur: 4px;
		--om-fol-opacity: 0.88;
		--om-fol-w: clamp(9rem, 22vw, 14rem);
		--om-fol-into: 1.25rem;
		--om-fol-left-art: url("../images/foliage-left-724.webp");
		--om-fol-right-art: url("../images/foliage-right-724.webp");
	}
}

/* Under 560px: smaller again, tucked in the corners just below the last card. */
@media (max-width: 559.98px) {
	body.home .wp-block-post-content {
		--om-fol-blur: 3px;
		--om-fol-w: 7rem;
		--om-fol-into: 0.5rem;
	}
}

/* ==========================================================================
   HOMEPAGE V2 (Stage 1): one vertical scroll, Welcome, Commute, Explore, App
   invitation, then the footer. Home page only (body.home). The markup is in
   patterns/homepage.php. Sizes taken from the approved references are written
   as shares of the page width (vw), so they keep the reference proportions:
   "ref-d" = the desktop reference (1103px wide), "ref-m" = the mobile reference
   (347px wide). Sizes the references do not show are marked PROPOSED.
   The older hero, capsule and foliage blocks above are LEGACY: the v2 markup
   does not use their classes, so they do nothing on the homepage.
   ========================================================================== */

body.home {
	--om-pad: clamp(1.25rem, 5.5vw, 7rem);           /* side margin shared by logo, text and footer: ref-d 59/1103 = 5.4%, ref-m 21/347 = 6% */
	--om-cream: #FCF7ED;                              /* page cream (theme cream) */
	--om-sage: #EEEDD7;                               /* Explore sage: ref-m sample, equals the existing capsule-explore token */
	--om-footer-band: #F4EBDD;                        /* footer band: sampled from both references */
	--om-ink: var(--wp--preset--color--otter-brown);
	--om-ink-soft: #7A4A2B;                           /* existing soft brown, 6.9:1 on cream */
	--om-mustard: var(--wp--preset--color--mustard);
	--om-tile-w: clamp(5.75rem, 7.4vw, 8.25rem);      /* PROPOSED (not in the references): five tiles must fit the Commute column */
	--om-tile-gap: clamp(0.5rem, 0.9vw, 1rem);        /* PROPOSED */
	/* Icon-led tiles. Each SVG is a 64-unit square with the glyph filling 48 units (75%) of it. */
	--om-icon-base: 0.90667;                          /* SVG box as a share of the white tile's shorter side: puts the glyph at 68% of that side (0.68 / 0.75) */
	--om-icon-scale: 1;                               /* uniform scale of all nine icons; the one place it changes is the 1024px+ query below */
	--om-optical-routes: 1.06;                        /* Routes reads small beside the others */
	--om-optical-nature: 0.9;                         /* the leaf reads large */
	--om-optical-nocturnal: 0.9;                      /* the crescent reads large */
	--om-optical-nbhd: calc(1.10 * 1.15);             /* the wide two-house artwork: 1.10 (original optical size) x 1.15 (Explore balance) */
	--om-nbhd-cap: calc(0.8 / 0.75);                  /* the houses are never wider than 80% of the tile: SVG box at 106.7% of the tile width (glyph = 75% of the box) */
	--om-tile-label-gap: 6px;                         /* white tile to label */
	padding-left: 0;
	padding-right: 0;
}

/* The page is full width: no theme gaps between header, sections and footer. */
body.home .wp-site-blocks {
	position: relative;
}

body.home .wp-site-blocks > *,
body.home main > * {
	margin-block: 0;
}

/* ---- Header: floats over the top of the Welcome art, as in both references. */
body.home .wp-site-blocks > header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
}

body.home .wp-site-blocks > header > .wp-block-group {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

body.home .om-header {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: clamp(0.9rem, 1.9vw, 1.6rem) var(--om-pad);
	flex-wrap: nowrap;
}

body.home .om-logo img {
	width: clamp(8.5rem, 42.9vw, 14rem);              /* ref-m: logo 149/347 = 42.9% of width */
}

body.home .om-header .wp-block-navigation {
	gap: 0;
}

body.home .om-header .wp-block-navigation__container {
	gap: clamp(1rem, 4.5vw, 1.75rem);
	flex-wrap: nowrap;
}

body.home .om-header .wp-block-navigation-item__content {
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--om-ink);
}

/* ---- Scenes (Welcome, Commute, Explore): text, then the picture (stacked on phones and tablets). */
body.home .om-scene {
	--wash-rgb: 252 247 237;
	--wash-a: 0.92;
	--wash-dir: to right;
	--wash-solid: 22%;
	--wash-end: 60%;
	--fade-top: 0%;
	--fade-bottom: 9%;
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--om-cream);
	scroll-margin-top: 0;                             /* the header is not fixed: nothing to clear once scrolled */
}

body.home .om-scene__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	padding-left: var(--om-pad);
	padding-right: var(--om-pad);
}

body.home .om-scene__art {
	display: block;
	margin: 0;
	/* Soft vertical fade of the picture into the page cream (eased). */
	-webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.156) calc(var(--fade-top) * 0.25), rgb(0 0 0 / 0.5) calc(var(--fade-top) * 0.5), rgb(0 0 0 / 0.844) calc(var(--fade-top) * 0.75), #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), rgb(0 0 0 / 0.844) calc(100% - var(--fade-bottom) * 0.75), rgb(0 0 0 / 0.5) calc(100% - var(--fade-bottom) * 0.5), rgb(0 0 0 / 0.156) calc(100% - var(--fade-bottom) * 0.25), rgb(0 0 0 / 0) 100%);
	mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.156) calc(var(--fade-top) * 0.25), rgb(0 0 0 / 0.5) calc(var(--fade-top) * 0.5), rgb(0 0 0 / 0.844) calc(var(--fade-top) * 0.75), #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), rgb(0 0 0 / 0.844) calc(100% - var(--fade-bottom) * 0.75), rgb(0 0 0 / 0.5) calc(100% - var(--fade-bottom) * 0.5), rgb(0 0 0 / 0.156) calc(100% - var(--fade-bottom) * 0.25), rgb(0 0 0 / 0) 100%);
}

body.home .om-scene__art img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Type. Desktop sizes are ref-d proportions; phone sizes are ref-m proportions. */
body.home .om-eyebrow,
body.home .om-cue {
	margin: 0;
	font-size: clamp(0.6875rem, 2.8vw, 0.75rem);      /* ref-m: cap height 6/347; floored for legibility */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--om-ink);
}

body.home .om-h1 {
	margin: 0;
	font-size: clamp(1.75rem, 8.4vw, 3.25rem);        /* ref-m: about 29px of 347 */
	line-height: 1.15;
	color: var(--om-ink);
}

body.home .om-h2 {
	margin: 0;
	font-size: clamp(1.6rem, 7.8vw, 3rem);            /* ref-m: about 27 to 29px of 347 */
	line-height: 1.15;
	color: var(--om-ink);
}

body.home .om-lede {
	margin: 0;
	max-width: none;
	font-size: clamp(0.9375rem, 3.9vw, 1.2rem);       /* ref-m: about 13px of 347, floored at 15px */
	line-height: 1.55;
	color: var(--om-ink);
}

/* Mustard capsule label (Commute, Explore): PROPOSED size, same class for both. */
body.home .om-capsule {
	display: inline-block;
	margin: 0;
	padding: 0.32em 1em;
	border-radius: 999px;
	background: var(--om-mustard);
	color: var(--om-ink);
	font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

/* Status pills: text only, not links, not pressable. PROPOSED size. */
body.home .om-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.home .om-pill {
	margin: 0;
	padding: 0.55em 1.1em;
	border: 1px solid rgb(86 39 14 / 0.28);
	border-radius: 999px;
	background: rgb(252 247 237 / 0.82);
	color: var(--om-ink);
	font-size: clamp(0.8125rem, 3.5vw, 0.9375rem);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: default;
}

/* Icon tiles: one component for Commute (5) and Explore (4). PROPOSED size.
   Icon-led: the white tile (.om-tile__icon) holds only the icon, and the label sits
   beneath it, outside the white. Each icon is a decorative SVG background (the visible
   label is the accessible name), centred. Its background-size is
   base x optical factor x scale (see the --om-icon-* and --om-optical-* properties). */
body.home .om-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--om-tile-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.home .om-tile {
	display: flex;
	flex-direction: column;
	gap: var(--om-tile-label-gap);
	width: var(--om-tile-w);
	margin: 0;
	padding: 0;
	color: var(--om-ink);
}

body.home .om-tile[data-icon="routes"] { --om-icon-optical: var(--om-optical-routes); }
body.home .om-tile[data-icon="nature"] { --om-icon-optical: var(--om-optical-nature); }
body.home .om-tile[data-icon="nocturnal"] { --om-icon-optical: var(--om-optical-nocturnal); }
body.home .om-tile[data-icon="neighbourhoods"] { --om-icon-optical: var(--om-optical-nbhd); }

body.home .om-tile__icon {
	--om-tile-aspect: 1;                              /* tile width / tile height; 2 for the phone Explore tiles */
	display: block;
	flex: none;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 1.1rem;
	background-color: #FFFFFF;
	box-shadow: 0 0.25rem 0.9rem rgb(86 39 14 / 0.08);
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto calc(var(--om-icon-base) * var(--om-icon-optical, 1) * var(--om-icon-scale) * 100%);   /* square SVG: height decides, width follows */
}

body.home .om-tile[data-icon="bus"] .om-tile__icon { background-image: url("../images/icons/icon-bus.svg"); }
body.home .om-tile[data-icon="mrt"] .om-tile__icon { background-image: url("../images/icons/icon-mrt.svg"); }
body.home .om-tile[data-icon="routes"] .om-tile__icon { background-image: url("../images/icons/icon-routes.svg"); }
body.home .om-tile[data-icon="walk"] .om-tile__icon { background-image: url("../images/icons/icon-walking.svg"); }
body.home .om-tile[data-icon="arrivals"] .om-tile__icon { background-image: url("../images/icons/icon-arrivals.svg"); }
body.home .om-tile[data-icon="nature"] .om-tile__icon { background-image: url("../images/icons/icon-nature.svg"); }
body.home .om-tile[data-icon="nostalgia"] .om-tile__icon { background-image: url("../images/icons/icon-nostalgia.svg"); }
body.home .om-tile[data-icon="neighbourhoods"] .om-tile__icon { background-image: url("../images/icons/icon-neighbourhoods.svg"); }
body.home .om-tile[data-icon="nocturnal"] .om-tile__icon { background-image: url("../images/icons/icon-nocturnal.svg"); }
/* The two-house artwork is wide: whatever the factors say, it is capped at 80% of the tile width. */
body.home .om-tile[data-icon="neighbourhoods"] .om-tile__icon {
	background-size: auto min(calc(var(--om-icon-base) * var(--om-icon-optical) * var(--om-icon-scale) * 100%), calc(var(--om-nbhd-cap) * var(--om-tile-aspect) * 100%));
}

/* The label is as wide as the column pitch (tile plus gap) so a long word can use the gap. */
body.home .om-tile__label {
	width: calc(100% + var(--om-tile-gap));
	margin-inline: calc(var(--om-tile-gap) / -2);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

body.home .om-line {
	display: block;
}

body.home .om-closing {
	display: none;
	margin: 0;
	font-weight: 700;
	color: var(--om-ink);
}

/* ---- Phones and tablets (under 1024px): stacked, ref-m. ------------------- */
@media (max-width: 1023.98px) {
	body.home .om-header .wp-block-navigation {
		justify-content: flex-end;
	}

	/* Welcome: text on cream, then the picture strip; the pills overlap the strip's top fade, the cue sits low on the strip. */
	body.home .om-scene--welcome .om-scene__inner {
		position: static;                               /* so the scroll cue is positioned against the whole section */
		padding-top: min(26.2vw, 9rem);                 /* ref-m: eyebrow at 91/347; capped so tablets are not given a tall empty band */
	}

	body.home .om-scene--welcome .om-h1 {
		text-wrap: balance;                             /* ref-m breaks "There’s an otter / way to get around." */
	}

	body.home .om-pill {
		font-size: clamp(0.75rem, 3.1vw, 0.875rem);
		padding: 0.5em 0.95em;
	}

	body.home .om-scene--welcome .om-eyebrow,
	body.home .om-scene--welcome .om-h1,
	body.home .om-scene--welcome .om-lede {
		position: relative;
		z-index: 2;
	}

	body.home .om-scene--welcome .om-eyebrow {
		margin-bottom: 6.9vw;                           /* ref-m: eyebrow to H1 */
	}

	body.home .om-scene--welcome .om-lede {
		margin-top: 6vw;                                /* ref-m: H1 to paragraph */
	}

	body.home .om-scene--welcome .om-pills {
		position: relative;
		z-index: 3;
		margin-top: 13vw;                               /* ref-m: paragraph to pills */
		margin-bottom: -8vw;                            /* pills overlap the strip's faded top, as in ref-m */
	}

	body.home .om-scene--welcome {
		--fade-top: 14%;
		--fade-bottom: 12%;
	}

	body.home .om-cue {
		position: absolute;
		left: var(--om-pad);
		bottom: 3.5vw;                                  /* ref-m: cue on the strip, near its bottom */
		z-index: 3;
		text-decoration: none;
	}

	body.home .om-scene--commute .om-scene__inner,
	body.home .om-scene--explore .om-scene__inner {
		padding-top: 2.3vw;
		padding-bottom: 4vw;
	}

	body.home .om-scene--commute .om-capsule,
	body.home .om-scene--explore .om-capsule {
		margin-bottom: 6vw;
	}

	body.home .om-scene--commute .om-h2,
	body.home .om-scene--explore .om-h2 {
		max-width: 19ch;
	}

	body.home .om-scene--commute .om-lede,
	body.home .om-scene--explore .om-lede {
		margin-top: 7.5vw;
	}

	body.home .om-scene--commute .om-tiles,
	body.home .om-scene--explore .om-tiles {
		margin-top: 8.5vw;
	}

	/* Commute and (on tablets) Explore: five-tile pitch, but never wider than the desktop tile (8.25rem). One value, so the two rows' tiles are identical at every width. */
	body.home .om-tiles {
		--om-tile-w: min(8.25rem, calc((100% - 4 * var(--om-tile-gap)) / 5));
	}

	body.home .om-tiles--commute {
		flex-wrap: nowrap;
	}

	/* The last label stays at least 24px above the photo strip that follows. 4vw is the section's bottom padding; the Commute strip adds a 2vw top margin. */
	body.home .om-tiles--commute {
		margin-bottom: max(0px, calc(24px - 6vw));
	}

	body.home .om-tiles--explore {
		margin-bottom: max(0px, calc(24.5px - 4vw));   /* the half pixel covers the 15px label's line-box rounding */
	}

	/* Tablets (768px and up): labels at the desktop size for 1440px. */
	@media (min-width: 768px) {
		body.home .om-tile__label {
			font-size: 13px;
		}
	}

	/* Phones (under 768px), Explore two by two as in ref-m: the white tile is 2:1 with the label beneath it; the label is a fixed size. */
	@media (max-width: 767.98px) {
		body.home .om-tiles--explore {
			--om-tile-w: calc((100% - var(--om-tile-gap)) / 2);
		}

		body.home .om-tiles--explore .om-tile__icon {
			--om-tile-aspect: 2;
			aspect-ratio: 2 / 1;
		}

		body.home .om-tiles--explore .om-tile__label {
			font-size: 0.9rem;
		}

		@media (min-width: 412px) {
			body.home .om-tiles--explore .om-tile__label {
				font-size: 0.9375rem;
			}
		}
	}

	/* Single-word last lines ("companion." at 767 and 768px, "Nocturnal." at 360px) */
	body.home .om-scene--commute .om-lede,
	body.home .om-scene--explore .om-lede {
		text-wrap: pretty;
	}

	body.home .om-scene--commute .om-scene__art {
		--fade-top: 14%;
		--fade-bottom: 12%;
		margin-top: 2vw;
	}

	/* Explore: sage panel behind the text and tiles, cream behind the strip, as in ref-m. */
	body.home .om-scene--explore {
		background: var(--om-cream);
	}

	body.home .om-scene--explore .om-scene__inner {
		background: linear-gradient(to bottom, var(--om-sage) 0, var(--om-sage) calc(100% - 7.5vw), var(--om-cream) 100%);
	}

	body.home .om-scene--explore .om-scene__art {
		--fade-top: 14%;
		--fade-bottom: 12%;
		background: linear-gradient(to bottom, var(--om-sage), var(--om-cream));
	}

	/* Closing area: the App invitation and the footer read as one cream section (headline, badges, then logo, links and small print). */
	body.home .om-app {
		box-sizing: border-box;
		padding: 9vw var(--om-pad) 0;
		background: var(--om-cream);
	}

	body.home .om-app .om-h2 {
		font-size: clamp(1.6rem, 6.8vw, 2.6rem);
	}

	body.home .om-app .om-pills {
		margin-top: 4vw;
	}

	body.home .om-footer {
		padding: 8vw var(--om-pad) 7vw;
	}
}

/* ---- Desktop (1024px and up): full-width scene behind the text, ref-d. ---- */
@media (min-width: 1024px) {
	body.home .om-header .wp-block-navigation {
		padding: 0 clamp(1.1rem, 1.9vw, 1.9rem);
		border-radius: 999px;
		background: rgb(252 247 237 / 0.8);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}

	body.home .om-header .wp-block-navigation__container {
		gap: clamp(1.5rem, 2.4vw, 2.5rem);
		padding-block: clamp(0.8rem, 1.45vw, 1.2rem);
	}

	body.home .om-header .wp-block-navigation-item__content {
		font-size: clamp(0.9375rem, 1.22vw, 1.1rem);
	}

	body.home .om-logo img {
		width: clamp(11rem, 16.4vw, 16rem);             /* ref-d: logo 181/1103 = 16.4% */
	}

	body.home .om-scene {
		min-height: calc(100vw * 0.52);                 /* ref-d: each scene is 573/1103 = 0.520 of the width */
		isolation: isolate;
		justify-content: flex-start;
		overflow: hidden;
	}

	body.home .om-scene__art {
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	body.home .om-scene__art img {
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;                       /* ref-d: scene centre-cropped (offset 34 to 37 of 64 to 75 px spare) */
	}

	body.home .om-scene::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(var(--wash-dir), rgb(var(--wash-rgb) / var(--wash-a)) 0, rgb(var(--wash-rgb) / var(--wash-a)) var(--wash-solid), rgb(var(--wash-rgb) / calc(var(--wash-a) * 0.972)) calc(var(--wash-solid) + (var(--wash-end) - var(--wash-solid)) * 0.1), rgb(var(--wash-rgb) / calc(var(--wash-a) * 0.844)) calc(var(--wash-solid) + (var(--wash-end) - var(--wash-solid)) * 0.25), rgb(var(--wash-rgb) / calc(var(--wash-a) * 0.648)) calc(var(--wash-solid) + (var(--wash-end) - var(--wash-solid)) * 0.4), rgb(var(--wash-rgb) / calc(var(--wash-a) * 0.5)) calc(var(--wash-solid) + (var(--wash-end) - var(--wash-solid)) * 0.5), rgb(var(--wash-rgb) / calc(var(--wash-a) * 0.352)) calc(var(--wash-solid) + (var(--wash-end) - var(--wash-solid)) * 0.6), rgb(var(--wash-rgb) / calc(var(--wash-a) * 0.156)) calc(var(--wash-solid) + (var(--wash-end) - var(--wash-solid)) * 0.75), rgb(var(--wash-rgb) / calc(var(--wash-a) * 0.028)) calc(var(--wash-solid) + (var(--wash-end) - var(--wash-solid)) * 0.9), rgb(var(--wash-rgb) / 0) var(--wash-end));
	}

	body.home .om-eyebrow,
	body.home .om-cue {
		font-size: clamp(0.6875rem, 1.03vw, 0.9375rem); /* ref-d: cap height 8/1103 */
	}

	body.home .om-h1 {
		font-size: clamp(2.5rem, 4.35vw, 4.75rem);      /* ref-d: about 48px of 1103 */
	}

	body.home .om-h2 {
		font-size: clamp(2rem, 4vw, 4.25rem);           /* ref-d: about 41 to 47px of 1103 */
	}

	body.home .om-lede {
		font-size: clamp(0.9375rem, 1.45vw, 1.3rem);    /* ref-d: about 15.5px of 1103 */
	}

	body.home .om-capsule {
		font-size: clamp(0.8125rem, 1.05vw, 1rem);
	}

	body.home .om-pill {
		font-size: clamp(0.8125rem, 1vw, 0.9375rem);
	}

	/* Icon tiles: the whole icon system is 5% smaller than the tested size on desktop; the label sits 8px beneath the tile. */
	body.home {
		--om-icon-scale: 0.95;
		--om-tile-label-gap: 8px;
	}

	body.home .om-tile__label {
		font-size: clamp(11.5px, calc(13px + (100vw - 1440px) * 0.002247), 14px);   /* 13px at 1440, 14px at 1885, never under 11.5px */
	}

	/* Welcome: text left. ref-d: eyebrow at y 130 of 573, H1 167, paragraph 299, pills 425, cue 496. */
	body.home .om-scene--welcome {
		--wash-a: 0.94;
		--wash-solid: 40%;                              /* solid right through the text column (it ends at about 43%) */
		--wash-end: 66%;                                /* then hands over to the picture sooner (was 72%) */
		--fade-bottom: 12%;
	}

	body.home .om-scene--welcome .om-scene__inner {
		width: calc(43vw + var(--om-pad));
		padding-top: 11.8vw;
		padding-right: 0;
	}

	/* Welcome headline and paragraph widths scale with their own type (em), so the
	   line breaks hold at every desktop width. "There’s an otter way" is 9.45em
	   wide and "There’s an otter way to" 10.67em, so 10.1em always breaks after
	   "way". The paragraph is held to 28em (about 580px at 1440px): that sets it on
	   three even lines with no single-word last line from 1024px to 2560px. */
	body.home .om-scene--welcome .om-h1 {
		max-width: 10.1em;
	}

	body.home .om-scene--welcome .om-lede {
		max-width: 28em;
		text-wrap: pretty;
	}

	body.home .om-scene--welcome .om-eyebrow {
		margin-bottom: 2.3vw;
	}

	body.home .om-scene--welcome .om-lede {
		margin-top: 2.4vw;
	}

	body.home .om-scene--welcome .om-pills {
		margin-top: 5.8vw;
	}

	body.home .om-scene--welcome .om-cue {
		display: inline-block;
		margin-top: 2.4vw;
		text-decoration: none;
	}

	/* Commute: text right. ref-d: eyebrow at y 60 of 573 below the section top, H2 95, paragraph 256, tiles 394. */
	body.home .om-scene--commute {
		--wash-dir: to left;
		--wash-a: 0.94;
		--wash-solid: 44%;
		--wash-end: 76%;
		--fade-top: 9%;
		--fade-bottom: 9%;
	}

	body.home .om-scene--commute .om-scene__inner {
		width: max(calc(40vw + var(--om-pad)), calc(5 * var(--om-tile-w) + 4 * var(--om-tile-gap) + var(--om-pad)));
		margin-left: auto;
		padding-top: 5.4vw;
		padding-left: 0;
	}

	body.home .om-scene--commute .om-capsule,
	body.home .om-scene--explore .om-capsule {
		margin-bottom: 2.1vw;
	}

	body.home .om-scene--commute .om-h2 {
		max-width: 18ch;
	}

	/* Commute and Explore paragraphs: 27.5em wide (about 570px at 1440px and wider),
	   chosen by measurement: from 1024px to 2560px both set on three lines with a last
	   line of at least four words, with or without text-wrap: pretty (Firefox). */
	body.home .om-scene--commute .om-lede,
	body.home .om-scene--explore .om-lede {
		margin-top: 2.6vw;
		max-width: 27.5em;
		text-wrap: pretty;
	}

	body.home .om-scene--commute .om-tiles {
		margin-top: 5.2vw;
	}

	/* Explore: text left. ref-d: eyebrow 1209 (63 below the section top), H2 101, paragraph 232, tiles 347, closing line 495. */
	body.home .om-scene--explore {
		--wash-rgb: 246 244 226;
		--wash-a: 0.93;
		--wash-solid: 38%;
		--wash-end: 74%;
		--fade-top: 9%;
		--fade-bottom: 9%;
	}

	body.home .om-scene--explore .om-scene__inner {
		width: calc(43vw + var(--om-pad));
		padding-top: 5.7vw;
		padding-right: 0;
		background: none;
	}

	body.home .om-scene--explore .om-scene__art {
		background: none;
	}

	body.home .om-scene--explore .om-tiles {
		margin-top: 4.5vw;
	}

	/* 1024px to 1063px: the closing line would sit under 24px from the section bottom, so the gap above the Explore tile row shrinks (7.2px at 1024px, nothing from 1064px). */
	@media (max-width: 1063.98px) {
		body.home .om-scene--explore .om-tiles {
			margin-top: calc(4.5vw - (1064px - 100vw) * 0.18);
		}
	}

	body.home .om-tiles--explore {
		--om-tile-w: clamp(5.75rem, 7.4vw, 8.25rem);
	}

	body.home .om-scene--explore .om-closing {
		display: block;
		margin-top: 3.3vw;
		font-size: clamp(0.9375rem, 1.45vw, 1.3rem);   /* ref-d: about 16px of 1103 */
	}

	/* Closing area: compact, one cream section (headline, badges side by side, then logo, links and small print). */
	body.home .om-app {
		box-sizing: border-box;
		padding: 3.5vw var(--om-pad) 0;
		background: var(--om-cream);
	}

	body.home .om-app .om-h2 {
		font-size: clamp(1.9rem, 3.3vw, 3.6rem);        /* ref-d: about 35px of 1103 */
	}

	body.home .om-app .om-pills {
		margin-top: 1.4vw;
	}

	body.home .om-footer {
		padding: 3.2vw var(--om-pad) 2.2vw;
	}
}

/* ---- Footer (all widths) ----------------------------------------------- */
body.home .om-footer {
	box-sizing: border-box;
	background: var(--om-cream);                      /* the same cream as the App invitation above: one closing section */
	color: var(--om-ink-soft);
}

body.home .om-footer-logo {
	margin: 0 0 0.9rem;
}

body.home .om-footer-logo img {
	display: block;
	width: clamp(8.5rem, 12.8vw, 12rem);              /* ref-d: logo 141/1103 = 12.8% wide, never under 8.5rem */
	height: auto;
}

body.home .om-footer__line {
	margin: 0;
	color: var(--om-ink-soft);
	line-height: 1.5;
}

body.home .om-footer__line + .om-footer__line {
	margin-top: 0.15rem;
}

/* Smooth jumping only for people who have not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---- Footer navigation (Stage 4B): five static links, used on the home page and every other page ---- */
.om-footer .om-footer-nav {
	margin: 0;                                        /* the logo above it carries the gap */
}

.om-footer .om-footer-nav + .om-footer__line {
	margin-top: 0.6rem;
}

.om-footer .om-footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.om-footer .om-footer-nav li {
	margin: 0;
	padding: 0;
}

.om-footer .om-footer-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--om-ink-soft, #7A4A2B);
	text-decoration-line: underline;
	text-decoration-color: var(--wp--preset--color--mustard);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.2em;
	text-decoration-skip-ink: none;
}

.om-footer .om-footer-nav a:hover {
	text-decoration-thickness: 5px;
}

.om-footer .om-footer-nav a:focus-visible {
	outline: 3px solid var(--wp--preset--color--otter-brown);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--mustard);
}

@media (max-width: 767.98px) {
	.om-footer .om-footer-nav a {
		min-height: 44px;                                 /* touch target */
	}

	/* Phones: three links, then two. */
	.om-footer .om-footer-nav ul {
		display: grid;
		grid-template-columns: repeat(3, max-content);
		column-gap: clamp(1.25rem, 6vw, 2rem);
		justify-content: start;
	}
}

/* Too narrow for three across: let the links wrap. */
@media (max-width: 299.98px) {
	.om-footer .om-footer-nav ul {
		display: flex;
	}
}

/* ---- Homepage phone order (Stage 4B refinement) ------------------------------------------------
   In the markup the Welcome, Commute and Explore picture comes first, so on phones (under 768px) each chapter
   reads picture, title, content. Tablets (768 to 1023px) keep text-then-picture by ordering the picture
   last; desktops lay the picture behind the text, so order does nothing there. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	body.home .om-scene--welcome .om-scene__art,
	body.home .om-scene--commute .om-scene__art,
	body.home .om-scene--explore .om-scene__art {
		order: 1;
	}
}

/* Phones: Explore's picture now leads its panel, so the page cream behind it eases into the sage of the
   panel below (the picture's bottom fade meets sage, not a hard edge), and it keeps Commute's small top gap. */
@media (max-width: 767.98px) {
	body.home .om-scene--explore {
		background: linear-gradient(to bottom, var(--om-cream) 0, var(--om-sage) 56vw, var(--om-sage) 100%);
	}

	body.home .om-scene--explore .om-scene__art {
		margin-top: 2vw;
	}
}

/* ---- Stage 4B final refinements ----------------------------------------------------------------- */

/* Phones: the Welcome picture sits right under the header (the header floats, so the section leaves room for
   it: two header paddings, the logo's height and a little line space). The badges and the scroll cue follow the
   paragraph in the normal flow, so nothing sits on top of the pictures. */
@media (max-width: 767.98px) {
	body.home .om-scene--welcome {
		padding-top: calc(2 * clamp(0.9rem, 1.9vw, 1.6rem) + clamp(8.5rem, 42.9vw, 14rem) * 0.19215 + 0.5rem);
	}

	body.home .om-scene--welcome .om-scene__inner {
		padding-top: 2.3vw;
		padding-bottom: 4vw;
	}

	body.home .om-scene--welcome .om-pills {
		margin-top: 7vw;
		margin-bottom: 0;
	}

	body.home .om-cue {
		position: static;
		display: inline-block;
		margin-top: 7vw;
	}

	/* Footer signature, tighter: the links' own 44px target supplies most of the visible space. */
	body.home .om-footer-logo {
		margin-bottom: 0;
	}

	.om-footer .om-footer-nav + .om-footer__line {
		margin-top: 0;
	}
}

/* Desktop (1024px and up), home page only: the closing section is centred. */
@media (min-width: 1024px) {
	body.home .om-app,
	body.home .om-footer {
		text-align: center;
	}

	body.home .om-app .om-pills,
	body.home .om-footer .om-footer-nav ul {
		justify-content: center;
	}

	body.home .om-footer-logo img {
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---- Stage 4B mobile polish: the closing section is centred on phones (homepage only) ---------------- */
@media (max-width: 767.98px) {
	body.home .om-app,
	body.home .om-footer {
		text-align: center;
	}

	body.home .om-app .om-h2 {
		font-size: clamp(1.75rem, 10.25vw, 2.6rem);     /* about 40px at 390px; balanced if it needs two lines */
		text-wrap: balance;
	}

	body.home .om-app .om-pills {
		justify-content: center;
	}

	body.home .om-footer-logo img {
		margin-left: auto;
		margin-right: auto;
	}

	/* Links: three, then two centred beneath. Six tracks, every link spans two; the second row starts one track in,
	   so its two links sit centred under the gaps of the first row. Below 300px the existing flex wrap takes over. */
	body.home .om-footer .om-footer-nav ul {
		grid-template-columns: repeat(6, auto);
		justify-content: center;
	}

	body.home .om-footer .om-footer-nav li {
		grid-column: span 2;
		justify-self: center;
	}

	body.home .om-footer .om-footer-nav li:nth-child(4) {
		grid-column: 2 / span 2;
	}

	body.home .om-footer .om-footer-nav li:nth-child(5) {
		grid-column: 4 / span 2;
	}
}

/* ---- Stage 4D: the phone Welcome illustration is the finished 1122 x 1185 artwork, shown whole ------------
   The frame is about 30% taller than the old one (1.2307 / 1.30 = 0.9467; the artwork is 0.9468), so object-fit
   only guards against a rounding trim. The soft fade, the top treatment and everything below are unchanged. */
@media (max-width: 767.98px) {
	body.home .om-scene--welcome .om-scene__art img {
		aspect-ratio: 1122 / 1185;
		height: auto;
		object-fit: cover;
		object-position: 50% 50%;
	}
}

/* ---- Stage 9: the phone Welcome hero is a stack of layers (v4b) ------------------------------------------------
   Bottom to top: background, the otter, one foreground bush strip. The box is the whole 941 x 1008 canvas (no trimming)
   and every layer is placed in percentages of it (hero-v4b-layout.json), so it scales with the screen. The otter is drawn
   at 65% of its first (Stage 9) size, close under the bus, and sits 3 canvas px lower than the layout file so the bushes
   fully hide its flat-cut lower edge. It bobs very gently (Stage 9d, CSS only, transform only), DOWNWARD only from that
   rest position: the bush strip hides its cut edge with no spare margin above the rest position. The background and the
   bushes never move. The four pulsing marks were removed. The bush strip is flush with the bottom, so the picture ends
   in a straight edge on the cream panel; it already carries its own softness (no CSS blur).
   Phones (under 768px) show this stack; tablets and desktops keep the single picture above and never download these
   files: each layer is a <picture> whose phone <source> holds the file and whose <img> is a 1 x 1 inline placeholder.
   The old v3 phone pictures stay in the theme for rollback. */
body.home .om-hero4 {
	display: none;
}

@media (max-width: 767.98px) {
	body.home .om-scene--welcome > .om-scene__art {
		display: none;                                  /* its phone source is a 1 x 1 placeholder: nothing is downloaded */
	}

	body.home .om-hero4 {
		display: block;
		--om-hero4-fade-top: 6%;                        /* short soft top, under the header; the bushes end the picture, so no bottom fade */
		position: relative;
		overflow: hidden;
		width: 100%;
		aspect-ratio: 941 / 1008;
		-webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.156) calc(var(--om-hero4-fade-top) * 0.25), rgb(0 0 0 / 0.5) calc(var(--om-hero4-fade-top) * 0.5), rgb(0 0 0 / 0.844) calc(var(--om-hero4-fade-top) * 0.75), #000 var(--om-hero4-fade-top));
		mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.156) calc(var(--om-hero4-fade-top) * 0.25), rgb(0 0 0 / 0.5) calc(var(--om-hero4-fade-top) * 0.5), rgb(0 0 0 / 0.844) calc(var(--om-hero4-fade-top) * 0.75), #000 var(--om-hero4-fade-top));
	}

	body.home .om-hero4__layer {
		position: absolute;
		display: block;
		margin: 0;
	}

	body.home .om-hero4__layer img {
		display: block;
		width: 100%;
		height: auto;
	}

	body.home .om-hero4__bg {
		left: 0;
		top: 0;
		width: 100%;
	}

	body.home .om-hero4__otter {
		left: 54.198%;
		top: 57.441%;
		width: 45.369%;
	}

	body.home .om-hero4__bush {
		left: 0;
		bottom: 0;
		width: 100%;
	}
}

/* Only the otter moves (a very gentle bob), and only for people who have not asked for less motion. The rest position is
   also the highest one: the bob only goes down, because the bush strip hides the otter's cut edge with no spare margin above it. */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
	@keyframes om-hero4-bob {
		0%, 100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(2.2%);                    /* of the otter's own height: about 3 px on a 390px phone */
		}
	}

	body.home .om-hero4__otter {
		will-change: transform;
		animation: om-hero4-bob 3.6s ease-in-out infinite;
	}
}

/* ---- Stage 6B typography trial: homepage phones (under 768px). Sizes only; no layout change. ---------------- */
@media (max-width: 767.98px) {
	body.home .om-lede {
		font-size: 1.1875rem;                             /* supporting paragraphs: 19px */
	}

	body.home .om-eyebrow,
	body.home .om-cue {
		font-size: 0.75rem;                               /* never below 12px */
	}

	body.home .om-tiles--commute .om-tile__label {
		font-size: 0.75rem;                               /* never below 12px */
	}

	body.home .om-header .wp-block-navigation-item__content {
		font-size: 1.0625rem;                             /* 17px */
	}

	body.home .om-footer .om-footer-nav a {
		font-size: 1rem;                                  /* 16px */
	}
}

/* ---- Stage 6B typography trial: iPad landscape only (touch). Not matched by phones, iPad portrait or a mouse desktop. ---- */
@media (min-width: 1024px) and (max-width: 1400px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
	body.home .om-lede,
	body.home .om-scene--explore .om-closing {
		font-size: clamp(1.1rem, 1.585vw, 1.3rem);        /* about 18.7px at 1180, 20.8px (the desktop maximum) at 1366 */
	}

	body.home .om-header .wp-block-navigation-item__content {
		font-size: max(1.0625rem, 1.22vw);                /* 17px minimum */
	}

	body.home .om-eyebrow,
	body.home .om-cue {
		font-size: max(0.8125rem, 1.03vw);                /* 13px minimum */
	}

	body.home .om-tile__label {
		font-size: max(13px, clamp(11.5px, calc(13px + (100vw - 1440px) * 0.002247), 14px));   /* 13px minimum */
	}

	/* Commute section only: label, headline and paragraph sit further from the picture; the icon tiles stay put.
	   Shift = min(2vw, 28px) from 1180px up, rising smoothly to 44px at 1062px and below. Negative right margin keeps each width. */
	body.home .om-scene--commute .om-capsule,
	body.home .om-scene--commute .om-h2,
	body.home .om-scene--commute .om-lede {
		margin-left: clamp(min(2vw, 28px), 234.8px - 17.9vw, 44px);
		margin-right: calc(-1 * clamp(min(2vw, 28px), 234.8px - 17.9vw, 44px));
	}
}