/*
 * HamiNest — main stylesheet
 *
 * 1. Fonts             8. Hero               15. Forms and notices
 * 2. Tokens            9. Page heading band  16. Contact details
 * 3. Base             10. Homepage sections  17. Footer
 * 4. Typography       11. Product cards      18. Editor content
 * 5. Layout           12. Catalogue          19. Socials, cursor, bars
 * 6. Buttons, badges  13. Product page       20. Motion
 * 7. Header and nav   14. Blog and search    21. Print
 *
 * Colour rule from the brand board: light text only ever sits on Teal Waters (or the
 * deeper teal). Never put Morning Mist text on Spring Meadow or Glacial Sky.
 */

/* 1. Fonts ------------------------------------------------------------------
 * WordPress also prints these from theme.json; same files, so browsers download once.
 */
@font-face {
	font-family: "DM Serif Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Serif Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-serif-display-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens ----------------------------------------------------------------- */
:root {
	/* Brand board colours (overridden from Customize › Colours). */
	--hn-teal: #204654;
	--hn-mist: #f7f9e1;
	--hn-meadow: #caffa6;
	--hn-sky: #a9e0f1;

	/* Derived tones. All text pairs checked at WCAG AA or better. */
	--hn-deep: color-mix(in srgb, var(--hn-teal) 78%, #000);          /* footer, menu panel */
	--hn-ink: var(--hn-teal);                                          /* body text on light */
	--hn-ink-soft: color-mix(in srgb, var(--hn-teal) 80%, var(--hn-mist)); /* secondary text, 5.4:1 */
	--hn-mist-soft: color-mix(in srgb, var(--hn-mist) 80%, var(--hn-teal)); /* secondary text on teal, 6.7:1 */
	--hn-paper: color-mix(in srgb, var(--hn-mist) 55%, #fff);          /* form fields, raised panels */
	--hn-line: color-mix(in srgb, var(--hn-teal) 18%, transparent);    /* hairlines on light */
	--hn-line-dark: color-mix(in srgb, var(--hn-mist) 22%, transparent);
	--hn-error: #9b2c1d;                                               /* 7:1 on Morning Mist */
	--hn-focus: var(--hn-teal);

	--hn-font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hn-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;

	/* Type scale (major third, 19px body for older readers). */
	--hn-step--1: 1rem;
	--hn-step-0: 1.1875rem;
	--hn-step-1: 1.4375rem;
	--hn-step-2: clamp(1.625rem, 1.4rem + 0.8vw, 1.875rem);
	--hn-step-3: clamp(2rem, 1.6rem + 1.6vw, 2.625rem);
	--hn-step-4: clamp(2.375rem, 1.7rem + 2.8vw, 3.75rem);
	--hn-step-5: clamp(2.75rem, 1.5rem + 5vw, 5.75rem);

	--hn-gutter: clamp(1rem, 4vw, 2.5rem);
	--hn-max: 1240px;
	--hn-measure: 66ch;
	--hn-section: clamp(4rem, 3rem + 5vw, 7.5rem);
	--hn-header-h: 4.5rem;

	--hn-radius-pill: 999px;
	--hn-radius-soft: 28px;      /* pads, product images */
	--hn-radius-panel: clamp(24px, 4vw, 48px); /* bands */
	--hn-radius-field: 12px;

	--hn-shadow: 0 24px 48px -28px color-mix(in srgb, var(--hn-deep) 70%, transparent);
	--hn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 960px) {
	:root {
		--hn-header-h: 5.25rem;
	}
}

/* 3. Base ------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--hn-header-h) + 1.5rem);
}

body {
	margin: 0;
	background: var(--hn-mist);
	color: var(--hn-ink);
	font-family: var(--hn-font-body);
	font-size: var(--hn-step-0);
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 0.14em;
}

:focus-visible {
	outline: 3px solid var(--hn-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--hn-meadow);
	color: var(--hn-teal);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--hn-meadow);
	color: var(--hn-teal);
	font-weight: 700;
	border-radius: var(--hn-radius-pill);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

.site-main:focus {
	outline: none;
}

/* Dark contexts: everything inside switches to light text and meadow buttons. */
.site-header,
.hero,
.page-hero,
.contact-band,
.site-footer {
	--hn-focus: var(--hn-meadow);
	--btn-bg: var(--hn-meadow);
	--btn-fg: var(--hn-teal);
	--btn-bg-hover: var(--hn-mist);
	--btn-line: color-mix(in srgb, var(--hn-mist) 70%, transparent);
	--btn-line-fg: var(--hn-mist);
	--btn-line-hover: color-mix(in srgb, var(--hn-mist) 12%, transparent);
	color: var(--hn-mist);
}

/* 4. Typography ------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	font-family: var(--hn-font-display);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

h1 {
	font-size: var(--hn-step-4);
	line-height: 1.04;
	letter-spacing: -0.012em;
}

h2 {
	font-size: var(--hn-step-3);
}

h3 {
	font-size: var(--hn-step-2);
}

h4 {
	font-size: var(--hn-step-1);
}

p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 700;
}

.text-link {
	display: inline-block;
	padding-block: 0.6rem;
	font-weight: 700;
	text-decoration-color: var(--hn-teal);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* 5. Layout ----------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--hn-max) + 2 * var(--hn-gutter));
	margin-inline: auto;
	padding-inline: max(var(--hn-gutter), env(safe-area-inset-left)) max(var(--hn-gutter), env(safe-area-inset-right));
}

.section {
	padding-block: var(--hn-section);
}

.section-head {
	display: grid;
	gap: 1rem 4rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head__title {
	margin: 0;
	font-size: var(--hn-step-4);
}

.section-head__text {
	max-width: 46ch;
	color: var(--hn-ink-soft);
}

@media (min-width: 900px) {
	.section-head {
		grid-template-columns: 1fr 1fr;
		align-items: end;
	}
}

/* 6. Buttons, links, badges, chips ------------------------------------------ */
.hn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3rem;
	padding: 0.7rem 1.6rem;
	border: 2px solid transparent;
	border-radius: var(--hn-radius-pill);
	font-family: var(--hn-font-body);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--hn-ease);
}

.hn-button:hover {
	text-decoration: none;
}

.hn-button:active {
	transform: translateY(1px);
}

.hn-button--primary {
	background: var(--btn-bg, var(--hn-teal));
	color: var(--btn-fg, var(--hn-mist));
}

.hn-button--primary:hover {
	background: var(--btn-bg-hover, var(--hn-deep));
}

.hn-button--secondary {
	background: transparent;
	border-color: var(--btn-line, var(--hn-teal));
	color: var(--btn-line-fg, var(--hn-teal));
}

.hn-button--secondary:hover {
	background: var(--btn-line-hover, color-mix(in srgb, var(--hn-teal) 8%, transparent));
}

/* Contact action icons (drawn with CSS so the plugin's markup stays theme-neutral). */
.hn-button[data-hn-action]::before {
	content: "";
	flex: none;
	width: 1.25em;
	height: 1.25em;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.hn-button[data-hn-action="form"] {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h14v15H5z'/%3E%3Cpath d='M8.5 9h7M8.5 12.5h7M8.5 16h4'/%3E%3C/svg%3E");
}

.hn-button[data-hn-action="sms"] {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5h15v10.5H10l-5.5 4z'/%3E%3Cpath d='M8.5 10.5h.01M12 10.5h.01M15.5 10.5h.01'/%3E%3C/svg%3E");
}

.hn-button[data-hn-action="whatsapp"] {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 0-7.3 12.8L3.5 20.5l4.3-1.1A8.5 8.5 0 1 0 12 3.5z'/%3E%3Cpath d='M9 8.6c0 3.3 3 6.3 6.3 6.3l.9-1.6-2-.9-.8.8a4.5 4.5 0 0 1-2.7-2.7l.8-.8-.9-2z'/%3E%3C/svg%3E");
}

.hn-button[data-hn-action="call"] {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 3.5h2.6l1.4 3.9-1.9 1.3a10.8 10.8 0 0 0 6.4 6.4l1.3-1.9 3.9 1.4v2.6a2.3 2.3 0 0 1-2.5 2.3A15.2 15.2 0 0 1 4.5 6a2.3 2.3 0 0 1 2.3-2.5z'/%3E%3C/svg%3E");
}

.hn-button[data-hn-action="email"] {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E");
}

.hn-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.badge {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.2rem 0.8rem;
	border-radius: var(--hn-radius-pill);
	background: var(--hn-sky);
	color: var(--hn-teal);
	font-size: var(--hn-step--1);
	font-weight: 700;
	line-height: 1.5;
}

.badge--available {
	background: var(--hn-meadow);
}

.badge--unavailable {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--hn-line);
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chips li {
	padding: 0.35rem 0.9rem;
	border-radius: var(--hn-radius-pill);
	background: var(--hn-paper);
	box-shadow: inset 0 0 0 1.5px var(--hn-line);
	font-size: var(--hn-step--1);
}

/* 7. Header and navigation -------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--hn-teal);
	transition: box-shadow 0.3s ease;
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.site-header.is-scrolled {
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--hn-header-h);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.5rem;
	text-decoration: none;
}

.brand__mark {
	width: auto;
	height: 2.25rem;
}

.brand__logo {
	width: auto;
	max-height: 3.25rem;
}

.brand__name {
	font-family: var(--hn-font-display);
	font-size: 1.625rem;
	line-height: 1;
	letter-spacing: 0.005em;
}

.site-nav .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav .menu a {
	display: flex;
	align-items: center;
	min-height: 3rem;
	text-decoration: none;
	font-weight: 700;
}

.site-nav__toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.5rem 1rem;
	border: 2px solid var(--btn-line);
	border-radius: var(--hn-radius-pill);
	background: transparent;
	color: var(--hn-mist);
	font: 700 1.0625rem/1 var(--hn-font-body);
	cursor: pointer;
}

.site-nav__icon-close,
.site-nav.is-open .site-nav__icon-open {
	display: none;
}

.site-nav.is-open .site-nav__icon-close {
	display: block;
}

@media (max-width: 959.98px) {
	.js .site-nav__toggle {
		display: inline-flex;
	}

	.js .site-nav__panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--hn-header-h));
		max-height: calc(100dvh - var(--hn-header-h));
		overflow-y: auto;
		padding: 0.5rem var(--hn-gutter) 2rem;
		background: var(--hn-deep);
		box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.7);
	}

	.js .site-nav.is-open .site-nav__panel {
		display: block;
	}

	.site-nav .menu a {
		min-height: 3.5rem;
		font-size: 1.25rem;
		border-bottom: 1px solid var(--hn-line-dark);
	}

	.site-nav__cta {
		width: 100%;
		margin-top: 1.5rem;
	}

	/* Without JavaScript the menu simply wraps under the logo. */
	html:not(.js) .site-header__inner {
		flex-wrap: wrap;
	}

	html:not(.js) .site-nav .menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.25rem;
	}

	html:not(.js) .site-nav .menu a {
		border: 0;
		font-size: 1.0625rem;
	}
}

@media (min-width: 960px) {
	.site-nav__panel {
		display: flex;
		align-items: center;
		gap: 2rem;
	}

	.site-nav .menu {
		display: flex;
		gap: 1.75rem;
	}

	.site-nav .menu a {
		position: relative;
	}

	.site-nav .menu a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0.6rem;
		height: 2px;
		background: var(--hn-meadow);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s var(--hn-ease);
	}

	.site-nav .menu a:hover::after,
	.site-nav .menu [aria-current]::after,
	.site-nav .menu .current-menu-item > a::after {
		transform: scaleX(1);
	}
}

/* 8. Hero ------------------------------------------------------------------- */
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(60% 70% at 78% 40%, color-mix(in srgb, var(--hn-sky) 22%, transparent), transparent 70%),
		var(--hn-teal);
}

/* Fern pattern, as on the brand board. Decoration only. */
.hero__pattern,
.page-hero__pattern,
.contact-band__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hn-mist);
	opacity: 0.055;
	-webkit-mask: url("../images/fern-tile.svg") 0 0 / 280px repeat;
	mask: url("../images/fern-tile.svg") 0 0 / 280px repeat;
	pointer-events: none;
}

.hero__inner {
	display: grid;
	gap: 3rem;
	align-items: center;
	padding-top: clamp(3rem, 7vw, 6rem);
	padding-bottom: clamp(6rem, 12vw, 10rem);
}

.hero__title {
	max-width: 11ch;
	margin-bottom: 0.4em;
	font-size: var(--hn-step-5);
	line-height: 1;
	letter-spacing: -0.02em;
}

.hero__text {
	max-width: 36ch;
	color: var(--hn-mist-soft);
	font-size: var(--hn-step-1);
	line-height: 1.5;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

/* The folded pads: three quilted pads stacked like fresh laundry. */
.hero__stack {
	position: relative;
	width: min(100%, 30rem);
	aspect-ratio: 5 / 4;
	justify-self: center;
}

.pad {
	position: absolute;
	inset: 0;
	border-radius: var(--hn-radius-soft);
}

.pad--3 {
	background: linear-gradient(160deg, color-mix(in srgb, var(--hn-meadow) 85%, #fff), var(--hn-meadow));
	transform: translate(-5%, 9%) rotate(-7deg);
	box-shadow: var(--hn-shadow);
}

.pad--2 {
	background: linear-gradient(160deg, color-mix(in srgb, var(--hn-sky) 80%, #fff), var(--hn-sky));
	transform: translate(4%, 4%) rotate(4deg);
	box-shadow: var(--hn-shadow);
}

.pad--1,
.quilt {
	/* Quilting: two sets of diagonal stitch lines and a dashed binding stitch. */
	background-color: var(--hn-mist);
	background-image:
		repeating-linear-gradient(45deg, transparent 0 26px, color-mix(in srgb, var(--hn-teal) 9%, transparent) 26px 27.5px),
		repeating-linear-gradient(-45deg, transparent 0 26px, color-mix(in srgb, var(--hn-teal) 9%, transparent) 26px 27.5px),
		linear-gradient(160deg, #fff 0%, transparent 60%);
}

.pad--1 {
	transform: rotate(-1.5deg);
	box-shadow:
		0 40px 70px -40px rgba(0, 0, 0, 0.55),
		inset 0 0 0 8px color-mix(in srgb, var(--hn-teal) 6%, transparent),
		inset 0 -14px 24px -16px color-mix(in srgb, var(--hn-teal) 30%, transparent);
	overflow: hidden;
}

.pad--1::before,
.quilt::before {
	content: "";
	position: absolute;
	inset: 16px;
	border: 2px dashed color-mix(in srgb, var(--hn-teal) 22%, transparent);
	border-radius: calc(var(--hn-radius-soft) - 12px);
	pointer-events: none;
	z-index: 1;
}

.pad__photo {
	position: absolute;
	inset: 28px;
	width: calc(100% - 56px);
	height: calc(100% - 56px);
	object-fit: cover;
	border-radius: calc(var(--hn-radius-soft) - 16px);
}

/* A woven label sewn into the edge of the top pad. */
.pad__label {
	position: absolute;
	right: 0;
	bottom: 18%;
	z-index: 2;
	padding: 0.5rem 1rem 0.5rem 0.9rem;
	border-radius: 6px 0 0 6px;
	background: var(--hn-teal);
	color: var(--hn-mist);
	font-family: var(--hn-font-display);
	font-size: 1.0625rem;
	line-height: 1;
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hn-meadow) 35%, transparent);
}

/* Soft double wave where the hero meets the page; drifts gently with full animation. */
.hero__waves {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(48px, 8vw, 110px);
	overflow: hidden;
	pointer-events: none;
}

.hero__wave {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 200%;
	max-width: none;
	height: 100%;
}

.hero__wave--back {
	fill: color-mix(in srgb, var(--hn-sky) 55%, var(--hn-teal));
	opacity: 0.6;
	transform: translateX(-25%) translateY(-14%);
}

.hero__wave--front {
	fill: var(--hn-mist);
}

/* Drifting fern sprigs (decoration). */
.hero__fern {
	position: absolute;
	z-index: -1;
	width: clamp(70px, 9vw, 140px);
	aspect-ratio: 1 / 2;
	background: var(--hn-meadow);
	opacity: 0.12;
	-webkit-mask: url("../images/fern.svg") center / contain no-repeat;
	mask: url("../images/fern.svg") center / contain no-repeat;
	pointer-events: none;
}

.hero__fern--1 {
	top: 12%;
	left: 46%;
	rotate: -24deg;
}

.hero__fern--2 {
	bottom: 18%;
	left: -2%;
	rotate: 32deg;
	width: clamp(90px, 12vw, 180px);
}

.hero__fern--3 {
	top: 6%;
	right: 4%;
	rotate: 150deg;
	opacity: 0.08;
}

.pad-layer {
	position: absolute;
	inset: 0;
	transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

@media (min-width: 960px) {
	.hero__inner {
		grid-template-columns: 7fr 5fr;
		min-height: calc(min(90vh, 900px) - var(--hn-header-h));
		min-height: calc(min(90svh, 900px) - var(--hn-header-h));
	}

	.hero__stack {
		justify-self: end;
		width: 100%;
	}
}

@media (max-width: 959.98px) {
	.hero__stack {
		width: min(82%, 24rem);
		margin-bottom: 1rem;
	}
}

/* Phones on their side: keep the headline from filling the screen. */
@media (max-height: 520px) and (orientation: landscape) {
	.hero__title {
		font-size: clamp(2.25rem, 10vh, 3.25rem);
	}

	.hero__inner {
		padding-top: 2rem;
	}
}

/* 9. Page heading band (inner pages) ---------------------------------------- */
.page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem);
	background: var(--hn-teal);
	border-radius: 0 0 var(--hn-radius-panel) var(--hn-radius-panel);
}

.page-hero__title {
	max-width: 22ch;
	margin: 0;
	font-size: var(--hn-step-4);
}

.page-hero__text,
.page-hero__meta {
	max-width: 52ch;
	margin-top: 1rem;
	color: var(--hn-mist-soft);
	font-size: var(--hn-step-1);
	line-height: 1.5;
}

.page-hero__meta {
	font-size: var(--hn-step-0);
}

.breadcrumbs {
	margin-bottom: 1.5rem;
	font-size: var(--hn-step--1);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-inline: 0.6rem;
	opacity: 0.6;
}

.page-hero .breadcrumbs,
.page-hero .breadcrumbs a {
	color: var(--hn-mist-soft);
}

/* 10. Homepage sections ----------------------------------------------------- */

/* Introduction: big name statement beside the explanation. */
.intro__inner {
	display: grid;
	gap: 1.5rem 4rem;
}

.intro__title {
	margin: 0;
	font-size: var(--hn-step-4);
	max-width: 14ch;
}

.intro__body {
	max-width: 52ch;
	font-size: var(--hn-step-1);
	line-height: 1.55;
}

.intro__body .text-link {
	font-size: var(--hn-step-0);
}

.intro__media img {
	border-radius: var(--hn-radius-soft);
}

.intro__media {
	margin: 0;
}

@media (min-width: 900px) {
	.intro__inner {
		grid-template-columns: 6fr 5fr;
		align-items: start;
	}

	.intro--photo .intro__inner {
		grid-template-columns: 5fr 4fr 3fr;
	}

	.intro__body {
		padding-top: 0.9rem;
	}
}

.products-highlight {
	padding-top: 0;
}

.products-highlight__more {
	margin-top: 3rem;
}

/* Who we help: Glacial Sky band, as on the brand board. */
.audiences {
	background: var(--hn-sky);
	border-radius: var(--hn-radius-panel);
	margin-inline: clamp(0px, 2vw, 1.5rem);
}

.audiences__title {
	margin-bottom: 2.5rem;
	font-size: var(--hn-step-4);
}

.audiences__list {
	display: grid;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.audience__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background: var(--hn-mist);
}

.audience__icon .icon {
	width: 1.75rem;
	height: 1.75rem;
}

.audience__title {
	margin-bottom: 0.4em;
	font-size: var(--hn-step-2);
}

@media (min-width: 900px) {
	.audiences__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}

	.audience {
		padding-inline: 2.5rem;
		border-left: 1.5px solid color-mix(in srgb, var(--hn-teal) 22%, transparent);
	}

	.audience:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

/* How ordering works: a real sequence, joined by a stitched line. */
.steps__title {
	margin-bottom: 2.5rem;
	font-size: var(--hn-step-4);
}

.steps__list {
	display: grid;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.step {
	position: relative;
	counter-increment: step;
	padding-top: 4.75rem;
}

.step::before {
	content: counter(step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--hn-meadow);
	color: var(--hn-teal);
	font-family: var(--hn-font-display);
	font-size: 1.75rem;
	line-height: 1;
}

.step__title {
	font-size: var(--hn-step-2);
	margin-bottom: 0.4em;
}

.step p {
	max-width: 34ch;
}

@media (min-width: 900px) {
	.steps__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 3rem;
	}

	.step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 1.75rem;
		left: 4.5rem;
		right: -2rem;
		border-top: 2px dashed color-mix(in srgb, var(--hn-teal) 30%, transparent);
	}
}

.home-extra {
	padding-top: 0;
}

/* Closing band and product help band. */
.contact-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0 clamp(0px, 2vw, 1.5rem) clamp(2.5rem, 5vw, 4rem);
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--hn-teal);
	border-radius: var(--hn-radius-panel);
}

.contact-band__inner {
	display: grid;
	gap: 2rem 4rem;
	align-items: center;
}

.contact-band h2 {
	font-size: var(--hn-step-4);
	max-width: 16ch;
}

.contact-band p {
	color: var(--hn-mist-soft);
	font-size: var(--hn-step-1);
	max-width: 40ch;
}

@media (min-width: 900px) {
	.contact-band__inner {
		grid-template-columns: 1fr auto;
	}

	.contact-band__actions {
		flex-direction: column;
		align-items: stretch;
		min-width: 18rem;
	}
}

/* Empty state: no products yet. */
.empty-state {
	display: grid;
	gap: 2rem;
	align-items: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	border-radius: var(--hn-radius-panel);
	background: var(--hn-paper);
	box-shadow: inset 0 0 0 1.5px var(--hn-line);
}

.empty-state__art {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--hn-radius-soft);
}

.empty-state__body {
	max-width: 46ch;
	font-size: var(--hn-step-1);
}

.empty-state__body .hn-actions {
	margin-top: 1.5rem;
	font-size: var(--hn-step-0);
}

.empty-state--plain {
	background: none;
	box-shadow: none;
	padding: 0;
}

@media (min-width: 800px) {
	.empty-state:not(.empty-state--plain) {
		grid-template-columns: 2fr 3fr;
	}
}

/* 11. Product cards --------------------------------------------------------- */
.product-grid,
.post-grid {
	display: grid;
	gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.product-grid,
	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.product-grid,
	.post-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.product-card,
.post-card {
	position: relative;
	height: 100%;
}

.product-card__media,
.post-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 5 / 4;
	border-radius: var(--hn-radius-soft);
	background: var(--hn-sky);
}

.product-card__image,
.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--hn-ease);
}

.product-card:hover .product-card__image,
.post-card:hover .post-card__media img {
	transform: scale(1.035);
}

.product-card__media .quilt {
	position: absolute;
	inset: 0;
	border-radius: 0;
}

/* Availability sits on the photo so titles line up across the row. */
.product-card__media .badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	margin: 0;
	box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.5);
}

.product-card__body,
.post-card__body {
	padding-top: 1.25rem;
}

.product-card__title,
.post-card__title {
	margin: 0 0 0.4em;
	font-size: var(--hn-step-2);
}

.product-card__link,
.post-card__link {
	text-decoration: none;
}

/* The title link covers the whole card. */
.product-card__link::after,
.post-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--hn-radius-soft);
}

.product-card__link:focus-visible,
.post-card__link:focus-visible {
	outline: none;
}

.product-card__link:focus-visible::after,
.post-card__link:focus-visible::after {
	outline: 3px solid var(--hn-focus);
	outline-offset: 6px;
}

.product-card__summary,
.post-card__excerpt {
	color: var(--hn-ink-soft);
}

.product-card__more {
	margin-top: 0.9rem;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.product-card:hover .product-card__more {
	text-decoration-color: var(--hn-meadow);
	text-decoration-thickness: 4px;
}

/* Quilted placeholder for products without photos. */
.quilt {
	position: relative;
	background-color: var(--hn-sky);
	overflow: hidden;
	border-radius: var(--hn-radius-soft);
}

.quilt__fern {
	position: absolute;
	inset: 18% 30%;
	background: var(--hn-teal);
	opacity: 0.16;
	-webkit-mask: url("../images/fern.svg") center / contain no-repeat;
	mask: url("../images/fern.svg") center / contain no-repeat;
}

/* 12. Catalogue ------------------------------------------------------------- */
.catalogue {
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.filter {
	margin-bottom: 2.5rem;
}

.filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.filter a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.4rem 1.1rem;
	border-radius: var(--hn-radius-pill);
	box-shadow: inset 0 0 0 2px var(--hn-line);
	font-weight: 700;
	text-decoration: none;
}

.filter a:hover {
	box-shadow: inset 0 0 0 2px var(--hn-teal);
}

.filter a[aria-current] {
	background: var(--hn-teal);
	color: var(--hn-mist);
	box-shadow: none;
}

.pagination {
	margin-top: 3.5rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 3rem;
	min-height: 3rem;
	padding-inline: 0.9rem;
	border-radius: var(--hn-radius-pill);
	box-shadow: inset 0 0 0 2px var(--hn-line);
	font-weight: 700;
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--hn-teal);
	color: var(--hn-mist);
	box-shadow: none;
}

/* 13. Product page ---------------------------------------------------------- */
.product > .container:first-child {
	padding-top: 1.75rem;
}

.product__top {
	display: grid;
	gap: 2.5rem 4.5rem;
	padding-bottom: var(--hn-section);
}

@media (min-width: 960px) {
	.product__top {
		grid-template-columns: 7fr 5fr;
		align-items: start;
	}

	.product__summary {
		position: sticky;
		top: calc(var(--hn-header-h) + 2rem);
	}
}

.product__title {
	font-size: var(--hn-step-4);
	margin-bottom: 0.35em;
}

.product__lead {
	font-size: var(--hn-step-1);
	line-height: 1.5;
	color: var(--hn-ink-soft);
}

.product__sizes {
	margin-top: 2rem;
}

.product__sizes-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-family: var(--hn-font-body);
	font-size: var(--hn-step-0);
	font-weight: 700;
}

.product__enquire {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1.5px solid var(--hn-line);
}

.product__actions .hn-button--primary {
	flex: 1 1 100%;
	min-height: 3.5rem;
	font-size: 1.1875rem;
}

.product__note {
	margin-top: 1.25rem;
	color: var(--hn-ink-soft);
	font-size: var(--hn-step--1);
}

/* Gallery */
.gallery__main {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--hn-radius-soft);
	background: var(--hn-paper);
	box-shadow: inset 0 0 0 1.5px var(--hn-line);
}

.gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.gallery__thumb {
	display: block;
	width: 5rem;
	height: 5rem;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: inset 0 0 0 2px var(--hn-line);
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery__thumb:hover,
.gallery__thumb[aria-current="true"] {
	opacity: 1;
}

.gallery__thumb[aria-current="true"] {
	outline: 3px solid var(--hn-teal);
	outline-offset: 3px;
}

.gallery--empty .quilt {
	aspect-ratio: 1 / 1;
}

/* Details */
.product__details {
	display: grid;
	gap: 2rem 5rem;
	padding-bottom: var(--hn-section);
}

@media (min-width: 960px) {
	.product__details--toc {
		grid-template-columns: 3fr 9fr;
	}

	.product__toc {
		position: sticky;
		top: calc(var(--hn-header-h) + 2rem);
		align-self: start;
	}
}

.product__toc-title {
	margin-bottom: 0.75rem;
	font-weight: 700;
}

.product__toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--hn-line);
}

.product__toc a {
	display: block;
	padding: 0.45rem 0 0.45rem 1rem;
	margin-left: -2px;
	border-left: 2px solid transparent;
	text-decoration: none;
}

.product__toc a:hover,
.product__toc a[aria-current="true"] {
	border-left-color: var(--hn-teal);
	font-weight: 700;
}

.product__sections {
	max-width: 50rem;
}

.product-section {
	padding-block: 2.25rem;
	border-top: 1.5px solid var(--hn-line);
}

.product-section:first-child {
	padding-top: 0;
	border-top: 0;
}

.product-section__title {
	font-size: var(--hn-step-3);
}

.tick-list {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tick-list li {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}

.tick-list .icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0.3rem;
	border-radius: 50%;
	background: var(--hn-meadow);
	stroke-width: 2.5;
}

.spec-table {
	width: 100%;
	border-collapse: collapse;
}

.spec-table th,
.spec-table td {
	padding: 1rem 1rem 1rem 0;
	border-bottom: 1.5px solid var(--hn-line);
	text-align: left;
	vertical-align: top;
}

.spec-table th {
	width: 38%;
	font-weight: 700;
}

.related {
	padding-top: 0;
}

.related__title {
	font-size: var(--hn-step-3);
	margin-bottom: 2rem;
}

/* 14. Blog, posts and search ------------------------------------------------ */
.post-card__meta {
	margin-bottom: 0.5rem;
	color: var(--hn-ink-soft);
	font-size: var(--hn-step--1);
}

.post-card__media + .post-card__body {
	padding-top: 1.25rem;
}

.page-body {
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.page-body__image {
	margin: 0 0 2.5rem;
}

.page-body__image img {
	border-radius: var(--hn-radius-soft);
}

.post-nav-wrap .nav-links {
	display: grid;
	gap: 1rem;
	padding-block: 2rem var(--hn-section);
	border-top: 1.5px solid var(--hn-line);
	max-width: 720px;
	margin-inline: auto;
}

.post-navigation a {
	display: block;
	text-decoration: none;
}

.post-nav__label {
	display: block;
	color: var(--hn-ink-soft);
	font-size: var(--hn-step--1);
}

.post-nav__title {
	font-family: var(--hn-font-display);
	font-size: var(--hn-step-1);
}

@media (min-width: 700px) {
	.post-nav-wrap .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		text-align: right;
	}
}

.search-again {
	max-width: 36rem;
	margin-bottom: 3rem;
}

.comments-wrap {
	max-width: calc(720px + 2 * var(--hn-gutter));
	padding-bottom: var(--hn-section);
}

.comments__list {
	padding-left: 1.25rem;
}

.not-found__inner {
	display: grid;
	gap: 3rem;
}

.not-found__links a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.not-found__links {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--hn-step-1);
	font-weight: 700;
}

@media (min-width: 800px) {
	.not-found__inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* 15. Forms and notices ----------------------------------------------------- */
.hn-form,
.comment-form {
	display: grid;
	gap: 1.5rem;
	max-width: 40rem;
}

.hn-form__intro,
.hn-form__privacy {
	color: var(--hn-ink-soft);
	font-size: var(--hn-step--1);
}

.hn-field label,
.hn-fieldset legend,
.comment-form label,
.search-form__label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 700;
}

.hn-fieldset {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.hn-fieldset legend {
	margin-bottom: 0.25rem;
	padding: 0;
	font-family: var(--hn-font-display);
	font-size: var(--hn-step-1);
	font-weight: 400;
}

.hn-field__hint {
	margin: -0.15rem 0 0.5rem;
	color: var(--hn-ink-soft);
	font-size: var(--hn-step--1);
}

.hn-fieldset > .hn-field__hint {
	margin: -0.6rem 0 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.75rem 1rem;
	border: 2px solid color-mix(in srgb, var(--hn-teal) 55%, transparent);
	border-radius: var(--hn-radius-field);
	background: var(--hn-paper);
	color: var(--hn-ink);
	font: inherit;
	font-size: max(1.0625rem, 16px);
	line-height: 1.4;
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--hn-focus);
	outline-offset: 2px;
	border-color: var(--hn-teal);
}

.hn-field--error input,
.hn-field--error textarea,
[aria-invalid="true"] {
	border-color: var(--hn-error);
	border-width: 3px;
}

.hn-field__error {
	margin: 0 0 0.5rem;
	color: var(--hn-error);
	font-weight: 700;
}

.hn-field--error {
	padding-left: 1rem;
	border-left: 4px solid var(--hn-error);
}

.hn-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hn-notice {
	margin-bottom: 2rem;
	padding: 1.5rem 1.75rem;
	border-radius: 18px;
	background: var(--hn-paper);
	box-shadow: inset 0 0 0 2px var(--hn-line);
}

.hn-notice:focus {
	outline: 3px solid var(--hn-focus);
	outline-offset: 3px;
}

.hn-notice--success {
	background: color-mix(in srgb, var(--hn-meadow) 55%, var(--hn-mist));
	box-shadow: none;
}

.hn-notice--error {
	box-shadow: inset 6px 0 0 var(--hn-error), inset 0 0 0 2px color-mix(in srgb, var(--hn-error) 40%, transparent);
}

.hn-notice__title {
	margin: 0 0 0.5rem;
	font-size: var(--hn-step-2);
}

.hn-notice ul {
	margin: 0;
	padding-left: 1.25rem;
}

.hn-notice--error a {
	color: var(--hn-error);
	font-weight: 700;
}

.search-form__row {
	display: flex;
	gap: 0.5rem;
}

.search-form__button .icon {
	width: 1.25rem;
	height: 1.25rem;
}

@media (max-width: 479.98px) {
	.search-form__button span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}
}

/* 16. Contact details (shortcode) -------------------------------------------- */
.hn-contact-block {
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--hn-radius-soft);
	background: var(--hn-sky);
	margin-bottom: 2.5rem;
}

.hn-contact-heading {
	margin-top: 0;
	font-size: var(--hn-step-2);
}

.hn-contact-details {
	display: grid;
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.hn-contact-details__row dt {
	font-size: var(--hn-step--1);
	font-weight: 700;
}

.hn-contact-details__row dd a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.hn-contact-details__row dd {
	margin: 0;
	font-size: var(--hn-step-1);
	overflow-wrap: anywhere;
}

.hn-contact-block .hn-actions {
	flex-direction: column;
	align-items: stretch;
}

/* 17. Footer ---------------------------------------------------------------- */
.site-footer {
	position: relative;
	background: var(--hn-deep);
	color: var(--hn-mist-soft);
}

.site-footer__hills {
	display: block;
	width: 100%;
	height: clamp(70px, 12vw, 180px);
	background: var(--hn-mist);
}

.hills-far {
	fill: color-mix(in srgb, var(--hn-teal) 75%, var(--hn-sky));
}

.hills-mid {
	fill: var(--hn-teal);
}

.hills-near {
	fill: var(--hn-deep);
}

.hills-river {
	stroke: var(--hn-meadow);
	stroke-width: 2.5;
	opacity: 0.7;
	vector-effect: non-scaling-stroke;
}

.site-footer__inner {
	display: grid;
	gap: 2.5rem 4rem;
	padding-block: 2rem 3.5rem;
}

@media (min-width: 900px) {
	.site-footer__inner {
		grid-template-columns: 5fr 3fr 4fr;
	}
}

.site-footer__name {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	color: var(--hn-mist);
	font-family: var(--hn-font-display);
	font-size: 2rem;
	line-height: 1;
}

.site-footer__mark {
	width: auto;
	height: 2.5rem;
	border-radius: 6px;
}

.site-footer__brand p {
	max-width: 36ch;
}

.site-footer__heading {
	margin-bottom: 1rem;
	color: var(--hn-mist);
	font-family: var(--hn-font-body);
	font-size: var(--hn-step-0);
	font-weight: 700;
}

.site-footer .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .menu a,
.site-footer__link,
.site-footer .hn-contact-details a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	color: var(--hn-mist);
}

.site-footer .hn-contact-details dt {
	color: var(--hn-mist-soft);
}

.site-footer .hn-contact-details dd {
	font-size: var(--hn-step-0);
}

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-block: 1.5rem calc(2rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--hn-line-dark);
	font-size: var(--hn-step--1);
}

.site-footer__base a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--hn-mist);
}

.site-footer__base p {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	margin: 0;
}

/* 18. Editor content -------------------------------------------------------- */
.entry-content > * {
	max-width: 720px;
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: 1100px;
}

.entry-content > .alignfull {
	max-width: none;
}

.entry-content > * + * {
	margin-top: 1.25em;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > h2,
.entry-content .wp-block-column > h2:not(:first-child) {
	margin-top: 2.25em;
	font-size: var(--hn-step-3);
}

.entry-content > h3 {
	margin-top: 1.75em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

.entry-content li + li {
	margin-top: 0.5em;
}

.entry-content img {
	border-radius: 20px;
}

.entry-content a:not(.hn-button):not(.wp-block-button__link) {
	font-weight: 700;
}

.is-style-lead,
.entry-content > p:first-child.is-style-lead {
	font-size: var(--hn-step-1);
	line-height: 1.5;
	color: var(--hn-ink-soft);
}

.is-style-panel {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--hn-radius-soft);
	background: var(--hn-sky);
}

.entry-content blockquote {
	padding-left: 1.5rem;
	border-left: 4px solid var(--hn-teal);
	font-family: var(--hn-font-display);
	font-size: var(--hn-step-2);
	line-height: 1.3;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	padding: 0.75rem;
	border-bottom: 1.5px solid var(--hn-line);
	text-align: left;
}

/* FAQ: core Details block. */
.wp-block-details {
	border-top: 1.5px solid var(--hn-line);
	padding-block: 0.25rem;
}

.wp-block-details + .wp-block-details {
	margin-top: 0;
}

.wp-block-details:last-of-type {
	border-bottom: 1.5px solid var(--hn-line);
}

.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.5rem;
	padding-block: 0.75rem;
	font-weight: 700;
	font-size: var(--hn-step-1);
	cursor: pointer;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background:
		linear-gradient(var(--hn-teal), var(--hn-teal)) center / 12px 2px no-repeat,
		linear-gradient(var(--hn-teal), var(--hn-teal)) center / 2px 12px no-repeat,
		var(--hn-meadow);
	transition: transform 0.25s var(--hn-ease);
}

.wp-block-details[open] summary::after {
	background:
		linear-gradient(var(--hn-teal), var(--hn-teal)) center / 12px 2px no-repeat,
		var(--hn-meadow);
}

.wp-block-details > :not(summary) {
	padding-bottom: 1rem;
	max-width: 62ch;
}

.wp-block-columns {
	gap: 2.5rem 4rem;
}

.wp-block-button__link {
	min-height: 3rem;
	padding: 0.7rem 1.6rem;
	border-radius: var(--hn-radius-pill);
	background: var(--hn-teal);
	color: var(--hn-mist);
	font-weight: 700;
}

.has-teal-background-color {
	--hn-focus: var(--hn-meadow);
}

/* 19. New components: socials, progress bar, mobile enquiry bar, notes ------- */

/* Scroll progress: a thin meadow line along the bottom of the header. */
.scroll-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	overflow: hidden;
	pointer-events: none;
}

.scroll-progress__bar {
	display: block;
	height: 100%;
	background: var(--hn-meadow);
	transform: scaleX(var(--progress, 0));
	transform-origin: left;
	opacity: 0;
}

.hn-motion-full .scroll-progress__bar,
.hn-motion-subtle .scroll-progress__bar {
	opacity: 1;
}

/* Header settles into a compact state once the page scrolls (transform only). */
.site-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hn-deep);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.site-header.is-scrolled::after {
	opacity: 1;
}

.brand {
	transform-origin: left center;
	transition: transform 0.35s var(--hn-ease);
}

.site-header.is-scrolled .brand {
	transform: scale(0.9);
}

/* Social links. */
.socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.socials__link {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--btn-line, color-mix(in srgb, var(--hn-teal) 40%, transparent));
	color: inherit;
	transition: transform 0.25s var(--hn-ease), background-color 0.25s ease, color 0.25s ease;
}

.socials__link .icon {
	width: 1.375rem;
	height: 1.375rem;
}

.socials__link:hover {
	transform: translateY(-3px);
	background: var(--hn-meadow);
	color: var(--hn-teal);
	box-shadow: none;
}

.site-footer .socials__link {
	color: var(--hn-mist);
}

.site-footer .socials__link:hover {
	color: var(--hn-teal);
}

.contact-socials {
	margin-top: 3rem;
}

.contact-socials h2 {
	font-size: var(--hn-step-2);
}

/* Slim side bar: only on screens wide enough that it sits in the empty margin. */
.social-rail {
	display: none;
}

@media (min-width: 1440px) and (hover: hover) {
	.social-rail {
		display: block;
		position: fixed;
		left: 0.75rem;
		top: 50%;
		z-index: 40;
		translate: 0 -50%;
		--hn-focus: var(--hn-teal);
	}

	.socials--rail {
		flex-direction: column;
		margin: 0;
		padding: 0.4rem;
		border-radius: var(--hn-radius-pill);
		background: color-mix(in srgb, var(--hn-mist) 92%, transparent);
		box-shadow: var(--hn-shadow), inset 0 0 0 1.5px var(--hn-line);
	}

	.socials--rail .socials__link {
		box-shadow: none;
		color: var(--hn-teal);
	}
}

/* Product page: "Good to know" notes. */
.notes-list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1.5px solid var(--hn-line);
}

.notes-list li {
	padding-block: 1rem;
	border-bottom: 1.5px solid var(--hn-line);
}

.notes-list__label {
	display: block;
	margin-bottom: 0.2rem;
}

/* Mobile sticky enquiry bar (product pages). Shown only while the main buttons are
 * off screen, and the page gets matching bottom padding so nothing is covered. */
.mobile-enquire {
	display: none;
}

@media (max-width: 767.98px) {
	.single-hn_product {
		padding-bottom: calc(5rem + env(safe-area-inset-bottom));
	}

	.mobile-enquire {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 45;
		padding: 0.75rem var(--hn-gutter) calc(0.75rem + env(safe-area-inset-bottom));
		background: var(--hn-teal);
		box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.6);
		--hn-focus: var(--hn-meadow);
		--btn-bg: var(--hn-meadow);
		--btn-fg: var(--hn-teal);
		--btn-bg-hover: var(--hn-mist);
		transform: translateY(110%);
		transition: transform 0.35s var(--hn-ease);
	}

	html:not(.js) .mobile-enquire,
	.mobile-enquire.is-visible {
		transform: none;
	}

	.mobile-enquire .hn-button {
		width: 100%;
		min-height: 3.25rem;
	}
}

/* Ripple (added by motion.js on primary buttons). */
.hn-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.hn-ripple {
	position: absolute;
	z-index: -1;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.22;
	pointer-events: none;
	transform: scale(0);
	animation: hn-ripple 0.65s ease-out forwards;
}

@keyframes hn-ripple {
	to {
		transform: scale(40);
		opacity: 0;
	}
}

/* Custom cursor (motion.js). Desktop mouse only; text fields keep the system cursor. */
.hn-cursor-dot,
.hn-cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.hn-cursor-dot {
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: var(--hn-teal);
	box-shadow: 0 0 0 2px var(--hn-mist);
}

.hn-cursor-ring {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 2px solid var(--hn-teal);
	color: var(--hn-teal);
	font: 700 0.75rem/1 var(--hn-font-body);
}

.hn-cursor-ring__label {
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.2s ease, transform 0.25s var(--hn-ease);
}

.hn-cursor-ring__inner {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid currentColor;
	transition: transform 0.3s var(--hn-ease), background-color 0.3s ease, opacity 0.2s ease;
}

.hn-cursor-ring {
	border: 0;
}

.has-custom-cursor .hn-cursor-dot.is-active,
.has-custom-cursor .hn-cursor-ring.is-active {
	opacity: 1;
}

.hn-cursor-ring.is-dark,
.hn-cursor-dot.is-dark {
	color: var(--hn-meadow);
}

.hn-cursor-dot.is-dark {
	background: var(--hn-meadow);
	box-shadow: 0 0 0 2px var(--hn-teal);
}

.hn-cursor-ring.is-link .hn-cursor-ring__inner {
	transform: scale(1.5);
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.hn-cursor-ring.is-view .hn-cursor-ring__inner {
	transform: scale(2);
	background: var(--hn-teal);
	border-color: var(--hn-teal);
}

.hn-cursor-ring.is-view {
	color: var(--hn-mist);
}

.hn-cursor-ring.is-view .hn-cursor-ring__label {
	opacity: 1;
	transform: scale(1);
}

.hn-cursor-ring.is-pressed .hn-cursor-ring__inner {
	transform: scale(0.7);
}

.hn-cursor-ring.is-text {
	opacity: 0 !important;
}

.has-custom-cursor,
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor summary,
.has-custom-cursor label,
.has-custom-cursor [role="button"] {
	cursor: none;
}

.has-custom-cursor input,
.has-custom-cursor textarea,
.has-custom-cursor select,
.has-custom-cursor [contenteditable] {
	cursor: auto;
}

/* 20. Motion -----------------------------------------------------------------
 * Three levels, set in Customize › Animation and cursor (class on <html>):
 *   .hn-motion-full    everything below
 *   .hn-motion-subtle  gentle fades only
 *   .hn-motion-off     nothing
 * The visitor's "reduce motion" setting always wins and turns everything off.
 * Only transform and opacity are animated. Content is never hidden without JavaScript.
 */
@media (prefers-reduced-motion: no-preference) {
	html.hn-motion-full,
	html.hn-motion-subtle {
		scroll-behavior: smooth;
	}

	/* Page transitions (cross-document view transitions, where supported). */
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: hn-page-out 0.28s ease both;
	}

	::view-transition-new(root) {
		animation: hn-page-in 0.45s var(--hn-ease) both;
	}

	.hn-motion-off::view-transition-old(root),
	.hn-motion-off::view-transition-new(root) {
		animation: none;
	}

	/* Scroll reveals: motion.js adds .reveal, then .is-in when visible.
	 * --i staggers siblings. Nothing is hidden unless JavaScript is running. */
	.js.hn-motion-full .reveal {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.7s var(--hn-ease), transform 0.8s var(--hn-ease);
		transition-delay: calc(var(--i, 0) * 90ms);
	}

	.js.hn-motion-subtle .reveal {
		opacity: 0;
		transition: opacity 0.6s ease;
		transition-delay: calc(var(--i, 0) * 60ms);
	}

	.js.hn-motion-full .reveal.is-in,
	.js.hn-motion-subtle .reveal.is-in {
		opacity: 1;
		transform: none;
	}

	/* Hero headline: words rise from behind a mask, one after another. */
	.hn-motion-full .split-word {
		display: inline-block;
		overflow: hidden;
		vertical-align: top;
		padding-bottom: 0.08em;
		margin-bottom: -0.08em;
	}

	.hn-motion-full .split-word > span {
		display: inline-block;
		transform: translateY(105%);
		animation: hn-word 0.9s var(--hn-ease) both;
		animation-delay: calc(0.15s + var(--w, 0) * 0.08s);
	}

	.hn-motion-full .hero__text,
	.hn-motion-full .hero__actions {
		animation: hn-rise 0.9s var(--hn-ease) both;
		animation-delay: 0.55s;
	}

	.hn-motion-full .hero__actions {
		animation-delay: 0.7s;
	}

	.hn-motion-subtle .hero__copy {
		animation: hn-fade 0.8s ease both;
	}

	/* Hero pads: laid down one by one, then float gently. */
	.hn-motion-full .pad--3 {
		animation: hn-lay-3 1s var(--hn-ease) 0.2s both, hn-float 7s ease-in-out 1.2s infinite alternate;
	}

	.hn-motion-full .pad--2 {
		animation: hn-lay-2 1s var(--hn-ease) 0.38s both, hn-float 8s ease-in-out 1.4s infinite alternate-reverse;
	}

	.hn-motion-full .pad--1 {
		animation: hn-lay-1 1.05s var(--hn-ease) 0.56s both, hn-float 6s ease-in-out 1.6s infinite alternate;
	}

	.hn-motion-full .pad-layer {
		transition: transform 0.6s var(--hn-ease);
	}

	/* Fern sprigs drift; the fern pattern on teal sections slowly moves. */
	.hn-motion-full .hero__fern--1 {
		animation: hn-drift-a 18s ease-in-out infinite alternate;
	}

	.hn-motion-full .hero__fern--2 {
		animation: hn-drift-b 22s ease-in-out infinite alternate;
	}

	.hn-motion-full .hero__fern--3 {
		animation: hn-drift-a 26s ease-in-out infinite alternate-reverse;
	}

	.hn-motion-full .hero__pattern,
	.hn-motion-full .page-hero__pattern,
	.hn-motion-full .contact-band__pattern {
		top: -280px;
		animation: hn-pattern 90s linear infinite;
	}

	/* The wave edge rolls slowly. */
	.hn-motion-full .hero__wave--front {
		animation: hn-wave 28s linear infinite;
	}

	.hn-motion-full .hero__wave--back {
		animation: hn-wave-back 40s linear infinite;
	}

	/* Header and buttons. */
	.hn-motion-full .hn-button {
		transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, translate 0.35s var(--hn-ease), transform 0.2s var(--hn-ease);
	}

	/* Product cards: lift, tilt (set by motion.js) and a fade-in as images load. */
	.hn-motion-full .product-card {
		transition: transform 0.45s var(--hn-ease);
	}

	.hn-motion-full .product-card:hover {
		transform: translateY(-6px);
	}

	.hn-motion-full .product-card__media {
		transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
		transition: transform 0.5s var(--hn-ease), box-shadow 0.4s ease;
	}

	.hn-motion-full .product-card:hover .product-card__media {
		box-shadow: var(--hn-shadow);
	}

	.js.hn-motion-full .product-card__image,
	.js.hn-motion-full .post-card__media img,
	.js.hn-motion-subtle .product-card__image {
		opacity: 0;
		transition: opacity 0.6s ease, transform 0.6s var(--hn-ease);
	}

	.js.hn-motion-full .is-loaded,
	.js.hn-motion-subtle .is-loaded {
		opacity: 1;
	}

	/* "How ordering works": the stitched line draws in, numbers pop. */
	.js.hn-motion-full .steps__list .step::after {
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.9s var(--hn-ease);
		transition-delay: calc(0.3s + var(--i, 0) * 0.25s);
	}

	.js.hn-motion-full .steps__list .step::before {
		transform: scale(0.3);
		opacity: 0;
		transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
		transition-delay: calc(var(--i, 0) * 0.25s);
	}

	.js.hn-motion-full .steps__list.is-in .step::after {
		transform: scaleX(1);
	}

	.js.hn-motion-full .steps__list.is-in .step::before {
		transform: none;
		opacity: 1;
	}

	/* Social icons fade in, one after another. */
	.hn-motion-full .socials li {
		animation: hn-rise 0.6s var(--hn-ease) both;
		animation-delay: calc(0.4s + var(--i, 0) * 70ms);
	}

	/* Gallery thumbnails. */
	.hn-motion-full .gallery__thumb {
		transition: opacity 0.2s ease, transform 0.25s var(--hn-ease);
	}

	.hn-motion-full .gallery__thumb:hover {
		transform: translateY(-3px);
	}
}

/* Lighter on phones and tablets: no floating, drifting or rolling layers. */
@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px), (prefers-reduced-motion: no-preference) and (hover: none) {
	.hn-motion-full .pad--1,
	.hn-motion-full .pad--2,
	.hn-motion-full .pad--3 {
		animation-iteration-count: 1, 0;
	}

	.hn-motion-full .hero__fern,
	.hn-motion-full .hero__wave--back,
	.hn-motion-full .hero__pattern,
	.hn-motion-full .page-hero__pattern,
	.hn-motion-full .contact-band__pattern {
		animation: none;
	}

	.hn-motion-full .product-card:hover {
		transform: none;
	}
}

@keyframes hn-word {
	to {
		transform: none;
	}
}

@keyframes hn-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@keyframes hn-fade {
	from {
		opacity: 0;
	}
}

@keyframes hn-page-out {
	to {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@keyframes hn-page-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@keyframes hn-lay-3 {
	from {
		opacity: 0;
		transform: translate(-5%, -14%) rotate(-14deg);
	}
}

@keyframes hn-lay-2 {
	from {
		opacity: 0;
		transform: translate(4%, -18%) rotate(10deg);
	}
}

@keyframes hn-lay-1 {
	from {
		opacity: 0;
		transform: translateY(-22%) rotate(-6deg);
	}
}

@keyframes hn-float {
	from {
		translate: 0 0;
	}

	to {
		translate: 0 -10px;
	}
}

@keyframes hn-drift-a {
	from {
		translate: 0 0;
	}

	to {
		translate: 30px -40px;
	}
}

@keyframes hn-drift-b {
	from {
		translate: 0 0;
	}

	to {
		translate: -24px 36px;
	}
}

@keyframes hn-pattern {
	to {
		transform: translateY(280px);
	}
}

@keyframes hn-wave {
	to {
		transform: translateX(-50%);
	}
}

@keyframes hn-wave-back {
	from {
		transform: translateX(-25%) translateY(-14%);
	}

	to {
		transform: translateX(-75%) translateY(-14%);
	}
}

/* Reduce motion: switch everything off, show everything. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	.reveal,
	.split-word > span,
	.product-card__image {
		opacity: 1 !important;
		transform: none !important;
	}

	.hn-cursor-dot,
	.hn-cursor-ring {
		display: none !important;
	}
}

.hn-motion-off *,
.hn-motion-off *::before,
.hn-motion-off *::after {
	animation: none !important;
	transition: none !important;
}

/* 21. Print ----------------------------------------------------------------- */
@media print {
	.site-header,
	.site-footer,
	.hero__stack,
	.hero__waves,
	.mobile-enquire,
	.social-rail,
	.contact-band,
	.gallery__thumbs,
	.product__toc,
	.skip-link {
		display: none !important;
	}

	body,
	.hero,
	.page-hero {
		background: #fff !important;
		color: #000 !important;
	}
}