/* =====================================================================
   Artisan Premades — landing page
   Design system: see /design/designsystem_*.png
   ===================================================================== */

/* ------------------------------- Tokens ---------------------------- */

:root {
	/* Palette */
	--freshwave: #EBF7F5;
	--starkwhite: #FFFFFF;       /* see README: spec listed #0ea5e9 (a blue) */
	--darkpickle: #2C5641;
	--totalpickle: #38733D;
	--duskredmeat: #E04438;
	--mutedsunshine: #FCBC30;
	--obsidian: #181818;
	--freshgreen: #AAD884;
	--gray: #D9D9D9;

	/* Derived */
	--red-deep: #C0372D;          /* CTA hover — darkened duskredmeat */
	--certs-bg: #E3F1EA;          /* certifications band, sampled from comp */
	--muted: #6E6E6E;
	--rule: #E3E3E3;

	/* Type */
	--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-hand: "Nanum Brush Script", "Segoe Script", cursive;

	/* Layout */
	--shell: 1200px;
	--gutter: 24px;
	--header-h: 72px;

	/* How much of the next section stays visible below the hero — enough
	   to signal "there's more", not enough to read. */
	--hero-peek: 92px;

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------- Reset ----------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Anchor links (e.g. /products#shine) ease into place rather than jumping.
   Overridden in the reduced-motion block at the end of this file. */
html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--starkwhite);
	color: var(--obsidian);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 20px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	color: inherit;
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 700;
	margin: 0;
}

.shell {
	width: 100%;
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--obsidian);
	color: var(--starkwhite);
	font-size: 12px;
	font-weight: 700;
}

.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid var(--duskredmeat);
	outline-offset: 3px;
}

/* ---------------------------- Type styles -------------------------- */

.eyebrow {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.eyebrow-light {
	color: rgba(255, 255, 255, 0.7);
}

/* Hand-drawn green stroke in place of a text underline. Drawn as a
   background image so it stretches to the width of whatever word it
   wraps and scales with the headline's font size.
   Source art is 129x8. */
.underline-accent {
	position: relative;
	display: inline-block;
	text-decoration: none;
	padding-bottom: 0.14em;
	background-image: url("/img/herounderline.png");
	background-repeat: no-repeat;
	background-position: center bottom 5px;
	/* 100% auto keeps the stroke's 16:1 proportions — a fixed height
	   would squash the hand-drawn character out of it. */
	background-size: 100% auto;
}

/* Darkpickle marks a link in body copy. text-decoration-color is left at
   its currentColor default so the underline always tracks the text — that
   keeps .text-link-light's underline white on dark grounds instead of
   drawing green-on-green. */
.text-link {
	font-size: 14px;
	color: var(--darkpickle);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.text-link:hover {
	text-decoration: none;
}

.text-link-light {
	color: var(--starkwhite);
}

/* ------------------------------ Buttons ---------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background-color 0.28s var(--ease),
		border-color 0.28s var(--ease),
		color 0.28s var(--ease),
		transform 0.28s var(--ease),
		box-shadow 0.28s var(--ease);
}

/* Shine: a diagonal band of light that crosses the button once on hover.
   It sits parked off the left edge, clipped by the pill, and only
   transitions on the way in so it doesn't sweep back on mouse-out.
   The homepage product cards reuse it on their red body panel. */
.btn,
.product-card-body {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.btn::after,
.product-card-body::after {
	content: "";
	position: absolute;
	top: -20%;
	left: -60%;
	width: 40%;
	height: 140%;
	background: linear-gradient(100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	pointer-events: none;
}

.btn:hover::after {
	left: 130%;
	transition: left 0.7s var(--ease);
}

.btn-sm {
	padding: 10px 20px;
}

.btn-arrow {
	display: inline-block;
	transition: transform 0.28s var(--ease);
}

.btn:hover .btn-arrow {
	transform: translateX(4px);
}

/* Solid red — primary CTA */
.btn-solid {
	background: var(--duskredmeat);
	border-color: var(--duskredmeat);
	color: var(--starkwhite);
}

.btn-solid:hover {
	background: var(--red-deep);
	border-color: var(--red-deep);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(224, 68, 56, 0.28);
}

/* Outline red — fills on hover */
.btn-outline {
	background: transparent;
	border-color: var(--duskredmeat);
	color: var(--duskredmeat);
}

.btn-outline:hover {
	background: var(--duskredmeat);
	color: var(--starkwhite);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(224, 68, 56, 0.24);
}

/* Tertiary — Darkpickle stroke and text, fills Darkpickle on hover.
   Used by "Food Safety & Certifications" and "Careers with Artisan
   Premades"; restyling here covers every button of this type. */
.btn-outline-dark {
	background: transparent;
	border-color: var(--darkpickle);
	color: var(--darkpickle);
}

.btn-outline-dark:hover {
	background: var(--darkpickle);
	border-color: var(--darkpickle);
	color: var(--starkwhite);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(44, 86, 65, 0.26);
}

/* ------------------------ Decorative food parts -------------------- */

.part {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 2;
}

/* ------------------------------ Header ----------------------------- */

.site-header {
	position: relative;
	z-index: 30;
	background: var(--starkwhite);
	border-bottom: 1px solid var(--rule);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 72px;
}

.wordmark {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.primary-nav {
	display: flex;
	align-items: center;
	gap: 32px;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 26px;
}

.nav-link {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;   /* keeps "About Us" / "Food Safety" on one line */
}

/* The underline bar: hover + active states.
   Exact treatment is still being designed — easy to retune here. */
.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--duskredmeat);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s var(--ease);
}

.nav-link:hover::after {
	transform: scaleX(1);
}

.nav-link.is-active::after {
	background: var(--obsidian);
	transform: scaleX(1);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.nav-toggle-bar {
	display: block;
	height: 2px;
	width: 22px;
	margin: 0 auto;
	background: var(--obsidian);
	transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------- Hero ------------------------------ */

/* The hero claims the viewport minus the header, minus a sliver of the
   product section so the page reads as continuing below the fold.
   svh (not vh) so mobile browser chrome doesn't overshoot. */
/* No overflow:hidden — some decorative parts deliberately break past the
   bottom edge into the products band. z-index lifts the hero above
   .products, which follows it in the DOM, so those overhangs stay visible.
   Parts that should be cut off live in .hero-parts-clip instead. */
.hero {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: calc(100svh - var(--header-h) - var(--hero-peek));
	background: var(--freshwave);
	padding: 56px 0 104px;   /* bottom room for the floating controls */
}

.hero-inner {
	position: relative;
	z-index: 5;
	width: 100%;
}

.hero-copy {
	max-width: 600px;   /* room for the audience fork */
}

.hero-title {
	font-size: clamp(42px, 5.4vw, 70px);
	line-height: 0.92;
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}

.hero-lede {
	max-width: 42ch;
	margin: 0 0 22px;
	color: var(--obsidian);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Rotator */

/* Full-bleed background layer — covers the entire hero, edge to edge,
   underneath the scrim and the copy. */
.hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Keeps the headline legible over photography. Opaque enough on the left
   to read against, fully clear by the right so the food is untouched.
   The photos carry near-white copy space on the left, so this reads as
   part of the image rather than a panel laid over it. */
.hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(235, 247, 245, 0.94) 0%,
		rgba(235, 247, 245, 0.88) 22%,
		rgba(235, 247, 245, 0.55) 44%,
		rgba(235, 247, 245, 0.12) 64%,
		rgba(235, 247, 245, 0) 78%
	);
}

.rotator {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.rotator-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.6s var(--ease);
	will-change: opacity;
}

.rotator-slide.is-active {
	opacity: 1;
}

/* cover fills the hero completely at any aspect ratio — no letterboxing,
   no background showing through at the edges. Biased right so the food
   stays in frame while the copy sits over the lighter left side. */
.rotator-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% center;
	transform: scale(1);
	transition: transform 9s linear;
}

/* Slow drift while a slide is showing — "slight movement" per the brief. */
.rotator-slide.is-active img {
	transform: scale(1.055);
}

/* Floats just above the hero's bottom edge at any hero height. */
.hero-controls-shell {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 34px;
	z-index: 6;
}

.rotator-controls {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rotator-arrow {
	border: 0;
	background: transparent;
	padding: 4px 6px;
	font-size: 15px;
	line-height: 1;
	color: var(--obsidian);
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.rotator-arrow:hover {
	opacity: 1;
}

.rotator-dots {
	display: flex;
	align-items: center;
	gap: 9px;
}

.rotator-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1.5px solid var(--obsidian);
	border-radius: 50%;
	background: transparent;
	opacity: 0.45;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.rotator-dot:hover {
	opacity: 0.8;
}

.rotator-dot.is-active {
	background: var(--duskredmeat);
	border-color: var(--duskredmeat);
	opacity: 1;
	transform: scale(1.15);
}

/* Hero decorations, bottom-left cluster.
   Anything inside this box is cut off at the hero's edges. */
.hero-parts-clip {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}

/* Carrots — furthest right, cut off by the green band below. */
.part-hero-a {
	bottom: -27px;
	left: 99px;
	width: 120px;
}

/* Spinach leaf — leftmost, running off the left edge of the page. */
.part-hero-d {
	bottom: 0;
	left: -75px;
	width: 160px;
	/* Natural height at this width is 124.7px (art is 272x212);
	   stretched 20px taller, so this no longer holds its aspect ratio. */
	height: 144.7px;
	transform: rotate(-20deg);
}

/* Onion curls — most foreground, breaking past the green border. */
.part-hero-b {
	z-index: 4;
	bottom: -22px;
	left: 9px;
	width: 85px;
}

/* Cream oval — straddles the hero/products line. */
.part-hero-c {
	z-index: 3;
	bottom: -17px;
	left: 52px;
	width: 47px;
}

/* --------------------------- Product lines ------------------------- */

.products {
	position: relative;
	background: var(--darkpickle);
	color: var(--starkwhite);
	padding: 72px 0 80px;
	overflow: hidden;
}

/* Soft black wash falling from the top edge — just enough to give the
   band some depth without reading as a separate colour. */
.products::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.22) 0%,
		rgba(0, 0, 0, 0.1) 32%,
		rgba(0, 0, 0, 0) 68%
	);
}

.products-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
	gap: 44px;
	align-items: start;
}

.products-title {
	font-size: clamp(30px, 3vw, 38px);
	line-height: 1.05;
	margin-bottom: 16px;
}

.products-lede {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.86);
}

/* Anchor for the decorative parts so they follow the cards, not the page. */
.products-cards {
	position: relative;
}

.products-grid {
	position: relative;
	z-index: 2;   /* above the parts behind it */
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.product-card {
	position: relative;
	z-index: 1;
	transition:
		transform 0.35s var(--ease),
		box-shadow 0.35s var(--ease);
	will-change: transform;
}

/* Row-level lift: hovering anywhere in the grid nudges every card up. */
.products-grid:hover .product-card {
	transform: translateY(-6px);
}

/* Neighbours give way to the card coming forward. Cards after the hovered
   one shift right via the sibling combinator; cards before it need :has(),
   since CSS has no previous-sibling selector. Where :has() is unsupported
   the rule is simply skipped and only the right-hand side shifts. */
.products-grid .product-card:has(~ .product-card:hover) {
	transform: translateY(-6px) translateX(-10px);
}

.products-grid .product-card:hover ~ .product-card {
	transform: translateY(-6px) translateX(10px);
}

/* The hovered card scales from its centre, so it breaks past the top AND
   bottom edges of its neighbours and reads as coming forward. No translate
   here — that would push the growth to one side. The raised z-index lets
   it overlap the cards beside it. */
.products-grid .product-card:hover {
	transform: scale(1.1);
	z-index: 5;
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3);
}

.product-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: var(--obsidian);
	overflow: hidden;
}

.product-card-media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.product-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.55s var(--ease);
}

.product-card:hover .product-card-media img {
	transform: scale(1.06);
}

.product-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 7px;
	padding: 16px 16px 18px;
	background: var(--freshwave);
	transition: background-color 0.35s var(--ease);
}

.product-card-name {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--darkpickle);
	transition: color 0.35s var(--ease);
}

.product-card-desc {
	flex: 1;
	font-size: 12px;
	line-height: 17px;
	color: var(--obsidian);
	transition: color 0.35s var(--ease);
}

.product-card-more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--darkpickle);
	transition: color 0.35s var(--ease);
}

/* The arrow stays red in the default state, per the comp. */
.product-card-more .btn-arrow {
	color: var(--duskredmeat);
	transition: transform 0.28s var(--ease), color 0.35s var(--ease);
}

/* Hover flips the whole card to red with white type. */
.product-card:hover .product-card-body {
	background: var(--duskredmeat);
}

/* Shine sweeps across once the red has mostly filled in. */
.product-card:hover .product-card-body::after {
	left: 130%;
	transition: left 0.8s var(--ease) 0.15s;
}

.product-card:hover .product-card-name,
.product-card:hover .product-card-desc,
.product-card:hover .product-card-more,
.product-card:hover .product-card-more .btn-arrow {
	color: var(--starkwhite);
}

.product-card:hover .btn-arrow {
	transform: translateX(4px);
}

/* Product decorations — positioned against .products-cards and sitting at
   z-index 1, behind the grid, so they peek out from under the card edges. */
.part-prod-a {           /* top-left, behind card 1 */
	z-index: 1;
	top: -30px;
	left: -30px;
	width: 84px;
}

.part-prod-b {           /* top edge, behind cards 3 and 4 */
	z-index: 1;
	top: -39px;
	left: calc(63% + 45px);
	width: 76px;
}

.part-prod-c {           /* bottom-right, behind card 4 */
	z-index: 1;
	bottom: -42px;
	right: -46px;
	width: 88px;
}

/* ------------------------------- Bands ----------------------------- */

.band {
	padding: 40px 0;
}

.band-freshwave {
	background: var(--freshwave);
}

.band-certs {
	background: var(--certs-bg);
}

.band-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 36px;
}

.band-head .eyebrow {
	margin-bottom: 8px;
}

.band-title {
	font-size: clamp(22px, 2.2vw, 27px);
	line-height: 1.12;
}

.band-body {
	margin: 0;
	padding-left: 36px;
	border-left: 1px solid rgba(24, 24, 24, 0.18);
	color: var(--obsidian);
}

.band-action {
	justify-self: end;
}

/* Certification logos — text placeholders until real marks land. */
.cert-logos {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
	flex-wrap: wrap;
}

.cert-logo {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--darkpickle);
	opacity: 0.75;
	padding: 6px 10px;
	border: 1px dashed rgba(44, 86, 65, 0.4);
	border-radius: 4px;
}

/* Standards highlights — line icons in white discs, label underneath.
   Replaced the certification logos on the homepage band. */
.highlights {
	display: flex;
	justify-content: flex-end;
	gap: 28px;
}

.highlight {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 92px;
	text-align: center;
}

.highlight-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--starkwhite);
	color: var(--darkpickle);
	box-shadow: 0 4px 12px rgba(44, 86, 65, 0.1);
}

.highlight-icon svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.highlight-label {
	font-size: 11px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--darkpickle);
}

/* ----------------------------- Who we are -------------------------- */

.who {
	padding: 84px 0;
}

.who-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

.who-media {
	position: relative;
}

.who-media > img:first-child {
	width: 100%;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
}

/* Spinach leaf straddling the photo's bottom-left corner. The source art
   points up-right at ~45deg; the comp sits it closer to horizontal, hence
   the clockwise rotation. Width is a percentage so it scales with the
   photo rather than drifting out of proportion at other breakpoints. */
.part-who {
	bottom: -59px;
	left: -46px;
	width: 33%;
	transform: rotate(252deg);   /* stem points left, tilted down */
}

.who-title {
	font-size: clamp(30px, 3vw, 38px);
	line-height: 1.05;
	margin-bottom: 18px;
}

.who-copy p {
	max-width: 52ch;
	margin: 0 0 16px;
}

.who-copy .btn {
	margin-top: 8px;
}

/* Handwritten check list */
.who-marks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 28px;
	margin-top: 26px;
	font-family: var(--font-hand);
	font-size: 24px;
	line-height: 1.25;
}

.who-marks li {
	position: relative;
	padding-left: 26px;
}

.who-marks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
}

/* ======================= Interior pages ============================ */

/* Page head band — the interior counterpart to the homepage hero. Same
   FreshWave ground and eyebrow/serif pairing, but a fraction of the
   height so it introduces the page without competing with it. */

/* No overflow clipping and a stacking layer of its own, so the leaf
   can hang over the bottom edge and sit above the content below. */
.page-head {
	position: relative;
	z-index: 1;
	background: var(--freshwave);
	padding: 56px 0 52px;
}

/* Random photo behind the title. Set as a background by JS rather than an
   <img> so there's no fallback to double-load above the fold. */
.page-head-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: 72% center;
	background-repeat: no-repeat;
}

/* Same job as the hero scrim: keeps Obsidian type readable over
   photography. FreshWave, not the green CTA gradient — this band belongs
   to the light side of the palette. */
.page-head-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(235, 247, 245, 0.95) 0%,
		rgba(235, 247, 245, 0.9) 30%,
		rgba(235, 247, 245, 0.6) 55%,
		rgba(235, 247, 245, 0.2) 75%,
		rgba(235, 247, 245, 0) 90%
	);
}

.page-head-inner {
	position: relative;
	z-index: 3;
}

.page-title {
	font-size: clamp(34px, 4.4vw, 54px);
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin-bottom: 10px;
}

.page-meta {
	margin: 0;
	color: var(--muted);
}

/* Pinned to the bottom edge and pushed half its height past it, so it
   breaks the border at any band height. */
.part-pagehead {
	z-index: 2;   /* above the scrim, below the title */
	bottom: 0;
	right: 4%;
	width: 84px;
	transform: translateY(50%) rotate(14deg);
}

/* Two-column body: sticky section nav, then content. */

/* The content track is sized to the reading measure rather than stretching
   to fill the shell — a 1fr track left ~270px of dead space to the right of
   the prose. justify-content centres the pair so the leftover is split
   evenly instead of pooling on one side. */
.page-layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 68ch);
	justify-content: center;
	gap: 64px;
	padding-top: 56px;
	padding-bottom: 80px;
	align-items: start;
}

.page-sidebar {
	position: sticky;
	top: 32px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.sidebar-heading {
	margin: 0 0 10px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.sidebar-list li {
	margin-bottom: 7px;
}

.sidebar-list a {
	position: relative;
	display: block;
	padding-left: 12px;
	font-size: 13px;
	color: var(--darkpickle);
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.sidebar-list a:hover {
	border-left-color: var(--gray);
}

/* Current page marked with the red bar, echoing the nav's active state. */
.sidebar-list a.is-active {
	font-weight: 700;
	border-left-color: var(--duskredmeat);
}

.sidebar-aside {
	padding: 18px;
	background: var(--freshwave);
	color: var(--obsidian);
}

.sidebar-aside p {
	margin: 0 0 10px;
}

.sidebar-aside-title {
	font-weight: 700;
	color: var(--obsidian);
}

/* Long-form content */

/* Measure is set by the grid track above; this is just a floor for the
   single-column layout below 900px. */
.prose {
	max-width: 68ch;
}

.prose-lede {
	margin: 0 0 32px;
	font-size: 16px;
	line-height: 26px;
	color: var(--obsidian);
}

/* Headings stay Obsidian — Darkpickle is reserved for link text in body
   copy, so using it on titles would read as clickable. */
.prose h2 {
	margin: 40px 0 12px;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.15;
	color: var(--obsidian);
}

.prose h3 {
	margin: 28px 0 10px;
	font-size: 21px;
	line-height: 1.2;
}

.prose h2:first-child,
.prose h3:first-child {
	margin-top: 0;
}

/* Legal copy runs long, so this leads a little looser than the 14/20
   body spec — same size, more air between lines. */
.prose p,
.prose li {
	line-height: 24px;
}

.prose p {
	margin: 0 0 16px;
}

.prose ul {
	margin: 0 0 16px;
	padding-left: 18px;
	list-style: disc;
}

.prose li {
	margin-bottom: 6px;
}

.prose a:not(.btn) {
	color: var(--darkpickle);
}

/* "Last updated" line on legal pages. Muted #6E6E6E on white is 5.1:1,
   so it passes AA at this size. */
.prose-meta {
	font-size: 13px;
	color: var(--muted);
}

/* Nested lists (privacy policy field list under "forms"). */
.prose ul ul {
	margin: 8px 0 4px;
	list-style: circle;
}

/* Data tables in long-form copy. Row headers carry the category so the
   table still reads row-by-row once it stacks on phones. */
.prose-table {
	width: 100%;
	margin: 8px 0 32px;
	border-collapse: collapse;
	font-size: 13px;
	line-height: 20px;
}

.prose-table th,
.prose-table td {
	padding: 12px 14px 12px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--rule);
}

.prose-table thead th {
	padding-top: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 2px solid var(--obsidian);
}

.prose-table tbody th {
	font-weight: 700;
	color: var(--obsidian);
}

.prose-table th:last-child,
.prose-table td:last-child {
	padding-right: 0;
}

/* Phones: four columns at 68ch don't fit, and a side-scrolling legal
   table hides the retention column. Stack each row as a labelled block. */
@media (max-width: 640px) {
	.prose-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.prose-table,
	.prose-table tbody,
	.prose-table tr,
	.prose-table th,
	.prose-table td {
		display: block;
		width: 100%;
	}

	.prose-table tr {
		padding: 14px 0;
		border-bottom: 1px solid var(--rule);
	}

	.prose-table tbody tr:first-child {
		border-top: 2px solid var(--obsidian);
	}

	.prose-table th,
	.prose-table td {
		padding: 0;
		border: 0;
	}

	.prose-table tbody th {
		margin-bottom: 8px;
	}

	.prose-table td + td,
	.prose-table th + td {
		margin-top: 6px;
	}

	.prose-table td::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--muted);
	}
}

/* ========================== Products page ========================== */

/* Optional line under the page title — /products only, for now. */
.page-lede {
	max-width: 46ch;
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 22px;
}

/* Dark variant of the head band: Darkpickle scrim, white type. */
.page-head-dark {
	background: var(--darkpickle);
	color: var(--starkwhite);
}

.page-head-dark .page-head-scrim {
	background: linear-gradient(
		90deg,
		rgba(44, 86, 65, 0.97) 0%,
		rgba(44, 86, 65, 0.92) 30%,
		rgba(44, 86, 65, 0.6) 52%,
		rgba(44, 86, 65, 0.15) 70%,
		rgba(44, 86, 65, 0) 85%
	);
}

.page-head-dark .eyebrow {
	color: rgba(255, 255, 255, 0.7);
}

/* Long titles (catering) can run past the scrim onto the photo; a soft
   shadow keeps white type legible wherever it lands. */
.page-head-dark .page-title,
.page-head-dark .page-lede {
	text-shadow: 0 1px 14px rgba(20, 40, 30, 0.55);
}

/* Tablet and down: text runs most of the band's width, so carry the
   green further across before letting the photo through. */
@media (max-width: 900px) {
	.page-head-dark .page-head-scrim {
		background: linear-gradient(
			90deg,
			rgba(44, 86, 65, 0.95) 0%,
			rgba(44, 86, 65, 0.88) 60%,
			rgba(44, 86, 65, 0.55) 100%
		);
	}
}

.products-page {
	padding-top: 56px;
	padding-bottom: 88px;
}

/* Jump buttons under the page title ($pageHeadLinks). */
.page-head-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.page-head-links .btn {
	min-width: 84px;
	justify-content: center;
}

/* White stroke and text for dark grounds; fills white on hover. */
.btn-outline-light {
	background: transparent;
	border-color: var(--starkwhite);
	color: var(--starkwhite);
}

.btn-outline-light:hover {
	background: var(--starkwhite);
	color: var(--darkpickle);
}

/* Fills white on hover, so a white shine would vanish — use a faint
   Darkpickle band instead. */
.btn-outline-light::after {
	background: linear-gradient(100deg,
		rgba(44, 86, 65, 0) 0%,
		rgba(44, 86, 65, 0.18) 50%,
		rgba(44, 86, 65, 0) 100%);
}

/* One section per line. scroll-margin keeps the photo strip clear of the
   viewport edge when arriving from a /products#tosti style link. */
.line {
	scroll-margin-top: 24px;
}

.line + .line {
	margin-top: 56px;
	padding-top: 56px;
	border-top: 1px solid var(--gray);
}

.line-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin-bottom: 28px;
}

/* FreshWave tint shows while each photo loads (and stands in for
   any that fail), alternating like the comp's placeholder tiles. */
.line-strip li {
	background: var(--freshwave);
}

.line-strip li:nth-child(even) {
	background: #F4FAF9;
}

.line-strip img {
	width: 100%;
	aspect-ratio: 12 / 13;   /* photos are cropped to 480x520 to match */
	object-fit: cover;
}

.line-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px;
	gap: 40px;
	align-items: start;
}

.line-title {
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.1;
	margin-bottom: 6px;
}

.line-tag {
	margin: 0 0 18px;
}

.line-copy p:last-child {
	margin-bottom: 0;
}

/* No bullet list: the description spans both text columns. */
.line-body-no-points .line-copy {
	grid-column: 1 / 3;
}

.line-points {
	padding-top: 52px;   /* lines the first bullet up with the tagline */
}

.line-points ul {
	list-style: disc;
	padding-left: 18px;
}

.line-points ul + .line-points-head {
	margin-top: 18px;
}

.line-points-head {
	margin: 0 0 6px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.line-points li {
	margin-bottom: 4px;
}

/* Documents card */
.line-docs {
	padding: 24px;
	background: var(--freshwave);
}

.line-docs-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1.5px solid var(--gray);
}

.line-docs-head h3 {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.line-docs-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	color: var(--obsidian);
}

.line-docs-all:hover {
	color: var(--darkpickle);
}

.doc-list li {
	border-bottom: 1.5px solid var(--gray);
}

.doc {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 6px;
	text-decoration: none;
	color: var(--darkpickle);
	transition: background-color 0.2s var(--ease);
}

.doc:hover {
	background: rgba(44, 86, 65, 0.06);
}

.doc-icon {
	flex: none;
}

.doc-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.doc-title {
	font-size: 13px;
	font-weight: 700;
	line-height: 17px;
}

.doc-meta {
	font-size: 12px;
	line-height: 16px;
	color: var(--obsidian);
}

.doc-meta strong {
	color: var(--darkpickle);
}

.doc-dl {
	flex: none;
	transition: transform 0.2s var(--ease);
}

.doc:hover .doc-dl {
	transform: translateY(2px);
}

.line-docs-foot {
	margin: 18px 0 0;
	font-size: 12px;
}

.line-docs-foot a {
	font-weight: 700;
	color: var(--darkpickle);
	text-decoration: none;
}

.line-docs-foot a:hover {
	text-decoration: underline;
}

/* Wide docs card, for a line with many documents (Molly's product
   sheets). Runs full width under the description, and the rows shrink to
   a single line — name, size, download — flowing down newspaper-style
   columns so an alphabetical list still reads top to bottom. */
.line-body-wide-docs {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.line-body-wide-docs.line-body-no-points .line-copy {
	grid-column: 1 / -1;
}

.line-docs-wide {
	grid-column: 1 / -1;
	padding: 20px 24px;
}

.line-docs-count {
	margin-left: 8px;
	font-weight: 500;
	color: var(--muted);
}

.line-docs-wide .doc-list {
	column-width: 230px;
	column-gap: 32px;
}

.line-docs-wide .doc-list li {
	break-inside: avoid;
	border-bottom-width: 1px;
}

.line-docs-wide .doc {
	gap: 10px;
	padding: 9px 4px;
}

.line-docs-wide .doc-icon {
	width: 15px;
	height: 15px;
}

.line-docs-wide .doc-text {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}

.line-docs-wide .doc-title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.line-docs-wide .doc-meta {
	flex: none;
	font-size: 11px;
	color: var(--muted);
}

.line-docs-wide .doc-dl {
	width: 14px;
	height: 14px;
}

.line-docs-wide .line-docs-foot {
	margin-top: 14px;
}

/* Grouped docs (Molly's by category): one row per group, the heading on
   the left and its sheets flowing in columns to the right. The rule sits
   between groups, not between sheets. */
.doc-group {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	column-gap: 24px;
	align-items: start;
	padding: 8px 0;
	border-bottom: 1px solid var(--gray);
}

.doc-group-head {
	margin: 0;
	padding-top: 9px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--obsidian);
}

.line-docs-wide .doc-group .doc-list li {
	border-bottom: 0;
}

.line-docs-wide .doc-group .doc {
	padding: 7px 4px;
}

@media (max-width: 640px) {
	.doc-group {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 14px;
	}

	.doc-group-head {
		padding-top: 0;
	}
}

/* Docs card drops below the two text columns, then everything stacks. */
@media (max-width: 1000px) {
	.line-body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.line-docs {
		grid-column: 1 / -1;
		max-width: 480px;
	}

	.line-docs.line-docs-wide {
		max-width: none;
	}
}

@media (max-width: 640px) {
	/* Five across is too small to read, so wrap into two rows on a
	   six-column grid: two photos on top, three below. All five stay
	   visible and nothing scrolls sideways. */
	.line-strip {
		grid-template-columns: repeat(6, 1fr);
	}

	.line-strip li {
		grid-column: span 2;
	}

	.line-strip li:nth-child(-n+2) {
		grid-column: span 3;
	}

	.line-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.line-points {
		padding-top: 0;
	}

	.line-body-no-points .line-copy {
		grid-column: auto;
	}

	.line-docs {
		max-width: none;
		padding: 20px 16px;
	}
}

/* ========================= Centered form page ====================== */

/* No sidebar here. Full shell width so the menu can run three across;
   the text-entry fieldsets are pulled back to a readable measure with
   .fieldset-narrow rather than stretching the whole way. */
.form-page {
	padding-top: 48px;
	padding-bottom: 80px;
}

.fieldset-narrow {
	max-width: 680px;
}

.form-intro {
	max-width: 680px;
	margin: 0 0 32px;
	color: var(--muted);
}

/* Interior page forms (contact, become a customer) — sit inside .prose. */
.page-form {
	margin: 40px 0;
	padding-top: 32px;
	border-top: 1px solid var(--rule);
}

.page-form h2 {
	margin-top: 0;
}

.field {
	margin-bottom: 16px;
}

.field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.field label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.field-optional {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.field input,
.field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--gray);
	border-radius: 4px;
	background: var(--starkwhite);
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--obsidian);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea {
	resize: vertical;
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--darkpickle);
	box-shadow: 0 0 0 3px rgba(44, 86, 65, 0.12);
}

.form-submit {
	width: 100%;
	justify-content: center;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.form-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Feedback */

.form-errors {
	margin-bottom: 26px;
	padding: 16px 18px;
	border-left: 3px solid var(--duskredmeat);
	background: #FDF1F0;
}

.form-errors p {
	margin: 0 0 8px;
}

.form-errors ul {
	margin: 0;
	padding-left: 18px;
	list-style: disc;
}

.form-errors li {
	margin-bottom: 4px;
}

.form-success {
	padding: 36px 32px;
	background: var(--freshwave);
	text-align: center;
}

.form-success h2 {
	margin: 0 0 12px;
	font-size: 28px;
	line-height: 1.15;
}

.form-success p {
	margin: 0 0 16px;
	color: var(--obsidian);
}

.form-success p:last-child {
	margin-bottom: 0;
}

@media (max-width: 620px) {
	.field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ---------------------------- Get started -------------------------- */

/* No overflow:hidden here — the decorative parts are meant to straddle the
   bottom edge onto the white footer. The background image is inset:0 with
   object-fit:cover so it can't overflow on its own. z-index lifts the band
   (and its parts) above the footer, which follows it in the DOM. */
.cta-band {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 326px;
	color: var(--starkwhite);
	background: var(--darkpickle);
}

.cta-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65% center;
}

/* Darkpickle gradient over the photo, per the comp. */
.cta-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--darkpickle) 0%,
		var(--darkpickle) 32%,
		rgba(44, 86, 65, 0.82) 48%,
		rgba(44, 86, 65, 0.15) 78%,
		rgba(44, 86, 65, 0) 100%
	);
}

/* Height comes from the band's 326px, not from padding here. */
.cta-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 36px;
	padding-bottom: 36px;
}

.cta-title {
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.08;
	margin-bottom: 14px;
}

.cta-lede {
	max-width: 40ch;
	margin: 0 0 26px;
	color: rgba(255, 255, 255, 0.9);
}

/* Shell-aligned layer: left:0 on a child lines up with the CTA copy's left
   edge, so these track the button instead of the viewport.
   1152px = shell 1200 minus the two 24px gutters. */
.cta-parts {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100% - 48px, 1152px);
	z-index: 3;
	pointer-events: none;
}

/* Only this one is clipped — its contents stop at the green/white line. */
.cta-parts-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* #2 — under "customer", cut off by the fold */
.part-cta-a {
	bottom: -60px;
	left: 120px;
	width: 64px;
	transform: rotate(-23deg);
}

/* #1 — leftmost, over the fold */
.part-cta-b {
	bottom: -39px;
	left: 20px;
	width: 78px;
	transform: rotate(260deg);
}

/* #3 — rightmost of the trio, over the fold */
.part-cta-d {
	bottom: -22px;
	left: 169px;
	width: 81.6px;
}

/* Alone on the right, straddling the green/white boundary, sitting above
   the footer's GO button. */
.part-cta-c {
	bottom: -46px;
	right: calc(9% + 20px);
	width: 121.5px;
	z-index: 3;
	transform: rotate(-20deg);
}

/* ------------------------------ Footer ----------------------------- */

/* padding-bottom extends the page to make room for the corner sandwich.
   Tracks the same 30vw the graphic scales on (height is width / 2.1),
   with a little clearance so the legal line never collides with it. */
.site-footer {
	position: relative;
	/* Clips the corner sandwich where it runs past the page edges, so it
	   reads as cropped rather than pushing out a scrollbar. */
	overflow: hidden;
	padding: 64px 0 clamp(120px, 16vw, 230px);
	font-size: 10px;
	line-height: 16px;
}

.footer-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.8fr)) minmax(0, 1.4fr);
	gap: 32px;
	padding-bottom: 40px;
}

.wordmark-footer {
	margin: 0 0 12px;
	font-size: 14px;
}

.footer-blurb {
	margin: 0;
	max-width: 34ch;
	color: var(--muted);
}

.footer-heading {
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.footer-col ul li {
	margin-bottom: 6px;
}

.footer-col a {
	text-decoration: none;
	color: var(--darkpickle);
}

.footer-col a:hover {
	color: var(--obsidian);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer-connect p {
	margin: 0 0 12px;
	color: var(--muted);
}

.signup {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: 260px;
	border: 1px solid var(--gray);
	border-radius: 999px;
	padding: 3px 3px 3px 14px;
	background: var(--starkwhite);
}

.signup input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	font-family: var(--font-body);
	font-size: 10px;
	background: transparent;
}

.signup button {
	flex-shrink: 0;
	border: 0;
	border-radius: 999px;
	padding: 7px 15px;
	background: var(--duskredmeat);
	color: var(--starkwhite);
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s var(--ease);
}

.signup button:hover {
	background: var(--red-deep);
}

.signup-msg {
	margin: 8px 0 0;
	min-height: 14px;
	color: var(--totalpickle);
}

.signup-msg[data-state="error"] {
	color: var(--duskredmeat);
}

.footer-legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
	color: var(--muted);
}

.footer-legal p {
	margin: 0;
}

.footer-legal a {
	color: var(--darkpickle);
}

.footer-legal a:hover {
	text-decoration: none;
}

/* Sits flush in the bottom-right corner of the page. The source art is
   440x210 and already cropped flat along the bottom, so anchoring it at
   bottom:0 reads as bleeding off the page edge.
   The footer's padding-bottom below reserves the room it needs. */
.footer-sandwich {
	position: absolute;
	right: -10px;
	bottom: -70px;
	width: clamp(220px, 30vw, 440px);
	height: auto;
	pointer-events: none;
	user-select: none;
}

/* ============================ Responsive ============================ */

@media (max-width: 1080px) {
	.products-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.products-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.footer-brand,
	.footer-connect {
		grid-column: span 3;
	}
}

/* The image stays a full-bleed background at every width; only the scrim
   and the copy width change. */
@media (max-width: 1000px) {
	.hero-copy {
		max-width: 560px;
	}

	/* Less horizontal room means the copy sits further into the photo,
	   so the scrim has to carry more of the contrast. */
	.hero-scrim {
		background: linear-gradient(
			90deg,
			rgba(235, 247, 245, 0.96) 0%,
			rgba(235, 247, 245, 0.92) 40%,
			rgba(235, 247, 245, 0.7) 72%,
			rgba(235, 247, 245, 0.42) 100%
		);
	}

	.hero-parts-clip,
	.part-hero-a,
	.part-hero-b,
	.part-hero-c,
	.part-hero-d {
		display: none;
	}
}

@media (max-width: 640px) {
	/* Copy spans the full width here, so go near-opaque and let the photo
	   read as a tint behind the text rather than competing with it. */
	.hero-scrim {
		background: linear-gradient(
			180deg,
			rgba(235, 247, 245, 0.95) 0%,
			rgba(235, 247, 245, 0.9) 55%,
			rgba(235, 247, 245, 0.82) 100%
		);
	}
}

@media (max-width: 900px) {
	.band-inner,
	.band-inner-certs {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.band-body {
		padding-left: 0;
		border-left: 0;
	}

	.band-action,
	.cert-logos,
	.highlights {
		justify-self: start;
		justify-content: flex-start;
	}

	.who-inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.who {
		padding: 56px 0;
	}

	/* Sidebar moves above the content and stops sticking. */
	.page-layout {
		grid-template-columns: 1fr;
		gap: 36px;
		padding-top: 40px;
	}

	.page-sidebar {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 32px;
	}

	.part-pagehead {
		width: 60px;
		right: var(--gutter);
	}

	/* Decorations crowd the layout once columns stack. */
	.part-hero-a,
	.part-hero-b,
	.part-hero-c,
	.part-prod-a,
	.part-prod-b,
	.part-prod-c,
	.part-who {
		display: none;
	}
}

/* Nav collapses here rather than at 760px. The full row needs roughly
   970px (wordmark + five items + the Login button); anything between that
   and the old 760px breakpoint left it squeezed enough to wrap two-word
   items. Matches where the hero stacks, so the layout shifts to narrow
   mode in one move. */
@media (max-width: 1000px) {
	.nav-toggle {
		display: flex;
	}

	.primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--gutter) 20px;
		background: var(--starkwhite);
		border-bottom: 1px solid var(--rule);
		box-shadow: 0 14px 24px rgba(0, 0, 0, 0.07);
		display: none;
	}

	.primary-nav.is-open {
		display: flex;
	}

	.nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav-link {
		padding: 13px 0;
		border-bottom: 1px solid var(--rule);
		font-size: 11px;
	}

	.nav-link::after {
		display: none;
	}

	.nav-link.is-active {
		color: var(--duskredmeat);
	}

	.nav-cta {
		margin-top: 16px;
		align-self: flex-start;
	}
}

@media (max-width: 760px) {
	.hero-actions .btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.products-grid {
		grid-template-columns: 1fr;
	}

	/* Single column here, so sideways shoving makes no sense. Touch devices
	   have no real hover either — neutralise the whole set. */
	.products-grid:hover .product-card,
	.products-grid .product-card:has(~ .product-card:hover),
	.products-grid .product-card:hover ~ .product-card {
		transform: none;
	}

	.who-marks {
		grid-template-columns: 1fr;
		font-size: 21px;
	}

	.footer-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-brand,
	.footer-connect {
		grid-column: span 2;
	}

	.cta-inner {
		padding-top: 44px;
		padding-bottom: 48px;
	}

	/* Photo behind the CTA is mostly hidden at this width; keep text legible. */
	.cta-overlay {
		background: linear-gradient(
			90deg,
			var(--darkpickle) 0%,
			rgba(44, 86, 65, 0.92) 70%,
			rgba(44, 86, 65, 0.72) 100%
		);
	}

	.part-cta-a,
	.part-cta-b,
	.part-cta-c,
	.part-cta-d {
		display: none;
	}
}

@media (max-width: 420px) {
	.hero-title {
		font-size: 38px;
	}

	/* The full-size wordmark plus the menu button is ~340px, which
	   pushed the page sideways on the narrowest phones. */
	.header-inner {
		gap: 12px;
	}

	.wordmark {
		font-size: 13px;
		letter-spacing: 0.14em;
	}

	/* Keeps all four product buttons on one row. */
	.page-head-links {
		gap: 6px;
	}

	.page-head-links .btn {
		min-width: 0;
		padding: 8px 12px;
		font-size: 11px;
		letter-spacing: 0.04em;
	}

	.footer-inner {
		grid-template-columns: 1fr;
	}

	.footer-brand,
	.footer-connect {
		grid-column: span 1;
	}
}

/* ---------------------------- Header actions ----------------------- */

/* Wholesale Login is a quiet utility link; the header CTA is the button
   ("Order Catering" or "Become a Customer", see CATERING_ENABLED).
   Existing accounts know where to look; first-time buyers don't. */
.nav-actions {
	display: flex;
	align-items: center;
	gap: 22px;
}

.nav-utility {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: #555;
	white-space: nowrap;
}

.nav-utility:hover {
	color: var(--duskredmeat);
}

/* Narrow-screen copy of the header CTA, outside the drawer. */
.nav-cta-mobile {
	display: none;
}

/* Five nav items plus two actions is a tight row between the collapse and
   ~1180px, so the gaps pull in there. */
@media (min-width: 1001px) and (max-width: 1180px) {
	.header-inner { gap: 16px; }
	.primary-nav  { gap: 18px; }
	.nav-list     { gap: 16px; }
	.nav-actions  { gap: 14px; }
}

/* --------------------------- Hero audience fork -------------------- */

.hero-fork {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--rule);
	border-radius: 8px;
	box-shadow: 0 14px 34px rgba(24, 24, 24, 0.08);
}

.fork-lane {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"label btn"
		"title btn"
		"desc  sub";
	column-gap: 24px;
	align-items: center;
	padding: 20px 22px;
}

.fork-lane + .fork-lane {
	border-top: 1px solid var(--rule);
}

.fork-label {
	grid-area: label;
	margin: 0 0 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--duskredmeat);
}

.fork-title {
	grid-area: title;
	font-size: 26px;
	line-height: 1.05;
}

.fork-desc {
	grid-area: desc;
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 18px;
	color: #4A4A4A;
}

.fork-lane .btn {
	grid-area: btn;
	justify-self: end;
}

.fork-sub {
	grid-area: sub;
	justify-self: end;
	align-self: start;
	margin: 8px 0 0;
	font-size: 11px;
	color: #555;
	text-align: right;
}

.fork-sub .text-link {
	font-size: 11px;
	font-weight: 600;
}

@media (max-width: 1000px) {
	.nav-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav-utility {
		padding: 13px 0;
		border-bottom: 1px solid var(--rule);
		font-size: 11px;
		color: var(--obsidian);
	}

	.nav-cta-desktop {
		display: none;
	}

	.nav-cta-mobile {
		display: inline-flex;
		margin-left: auto;
	}

	.header-inner {
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.fork-lane {
		grid-template-columns: 1fr;
		grid-template-areas: "label" "title" "desc" "btn" "sub";
		padding: 18px;
	}

	.fork-lane .btn {
		justify-self: stretch;
		justify-content: center;
		margin-top: 14px;
	}

	.fork-sub {
		justify-self: start;
		text-align: left;
	}
}

/* Wordmark + header CTA + menu button doesn't fit a phone, so the
   CTA drops to its own full-width row under the wordmark. */
@media (max-width: 520px) {
	.header-inner:has(.nav-cta-mobile) {
		flex-wrap: wrap;
		row-gap: 0;
		padding-top: 8px;
	}

	.nav-cta-mobile {
		order: 3;
		flex: 1 0 100%;
		justify-content: center;
		margin: 0 0 12px;
	}
}

/* --------------------------- Reduced motion ------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}

	.rotator-slide img,
	.rotator-slide.is-active img {
		transform: none;
	}

	.btn::after,
	.product-card-body::after {
		display: none;
	}
}