/* ==========================================================================
   Reset + base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--wh-cream-bg);
	color: var(--wh-ink);
	font-family: var(--wh-sans);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--wh-burgundy); text-decoration: none; transition: color .12s ease, background-color .12s ease, border-color .12s ease; }
a:hover { color: var(--wh-burgundy-hover); }

button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, dl { margin: 0; }

::selection { background: var(--wh-burgundy); color: var(--wh-cream-bg); }

.wh-skip-link { position: absolute; left: -9999px; }
.wh-skip-link:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 1000; }

.wh-container {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 0 var(--wh-side-padding);
}

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

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.wh-kicker {
	font-family: var(--wh-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wh-burgundy);
	line-height: 1.6;
}

.wh-kicker--muted { color: var(--wh-caption); }
.wh-kicker--warm { color: var(--wh-on-dark-accent-warm); }

.wh-serif { font-family: var(--wh-serif); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.wh-btn {
	display: inline-block;
	font-family: var(--wh-sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 15px 30px;
	border: none;
	cursor: pointer;
	text-align: center;
	line-height: 1.2;
	border-radius: 0;
	box-shadow: none;
}

.wh-btn--primary {
	background: var(--wh-burgundy);
	color: var(--wh-cream-bg);
}
.wh-btn--primary:hover { background: var(--wh-burgundy-hover); color: var(--wh-cream-bg); }

.wh-btn--cream {
	background: var(--wh-cream-bg);
	color: var(--wh-burgundy-hover);
}
.wh-btn--cream:hover { background: #fff; color: var(--wh-burgundy-hover); }

.wh-btn--outline-dark {
	border: 1px solid var(--wh-hairline-warm);
	color: var(--wh-burgundy-hover);
	background: transparent;
}
.wh-btn--outline-dark:hover { border-color: var(--wh-burgundy); color: var(--wh-burgundy-hover); }

.wh-btn--outline-light {
	border: 1px solid rgba(231, 214, 196, 0.5);
	color: var(--wh-on-dark-logo);
	background: transparent;
}
.wh-btn--outline-light:hover { background: rgba(250, 247, 240, 0.1); color: var(--wh-on-dark-heading); }

.wh-btn--sm { padding: 13px 18px; font-size: 12px; }
.wh-btn--reserve { padding: 11px 22px; font-size: 12px; letter-spacing: 0.04em; }
.wh-btn--full { display: block; width: 100%; }

/* ==========================================================================
   Changeover-mode notice banner + placeholder hero
   ========================================================================== */

.wh-notice {
	position: relative;
	z-index: 70;
	background: var(--wh-burgundy);
	color: var(--wh-cream-bg);
}
.wh-notice__inner {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 12px var(--wh-side-padding);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	text-align: center;
}
.wh-notice__text {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}
.wh-notice__phone {
	font-size: 13px;
	font-weight: 600;
	color: var(--wh-cream-bg);
	border-bottom: 1px solid rgba(250, 247, 240, 0.4);
	padding-bottom: 1px;
}
.wh-notice__phone:hover { color: var(--wh-cream-bg); border-bottom-color: var(--wh-cream-bg); }

/* During changeover mode the transparent-over-hero effect gets in the
   way of the notice banner (the absolute header sits behind the notice
   when the WP admin bar or a wrapped notice line changes the notice's
   effective height). Stack the header naturally below the notice and
   paint the same burgundy so the notice + header read as one continuous
   band; the Reserve/Call button gets an outline treatment so it still
   pops against the burgundy backdrop. Reverts to transparent-overlay
   automatically when changeover mode is OFF. */
.wh-header--changeover.wh-header--transparent {
	position: relative;
	top: auto;
	background: var(--wh-burgundy);
	border-bottom: 1px solid rgba(250, 247, 240, 0.15);
}
.wh-header--changeover.wh-header--transparent .wh-logo,
.wh-header--changeover.wh-header--transparent .wh-nav__link {
	color: var(--wh-cream-bg);
}
.wh-header--changeover.wh-header--transparent .wh-btn--reserve {
	background: transparent;
	color: var(--wh-cream-bg);
	border: 1px solid rgba(250, 247, 240, 0.5);
}
.wh-header--changeover.wh-header--transparent .wh-btn--reserve:hover {
	background: rgba(250, 247, 240, 0.12);
	color: var(--wh-cream-bg);
	border-color: var(--wh-cream-bg);
}
/* Also drop the notice's own bottom border so the two flow into each
   other without a visible seam. */
.wh-header--changeover + * { /* no-op safety */ }
.wh-notice + .wh-header--changeover.wh-header--transparent { border-top: 0; }

/* Changeover placeholder for WC pages */
.wh-changeover-hero {
	background: var(--wh-cream-alt);
	border-bottom: 1px solid var(--wh-hairline);
}
.wh-changeover-hero__inner {
	padding: 96px var(--wh-side-padding) 104px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.wh-changeover-hero__title {
	font-family: var(--wh-serif);
	font-size: 44px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--wh-ink);
	max-width: 780px;
	text-wrap: balance;
}
.wh-changeover-hero__lede {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--wh-body);
	max-width: 620px;
	text-wrap: pretty;
}
.wh-changeover-hero__cta { padding: 18px 36px; font-size: 15px; letter-spacing: 0.05em; margin-top: 8px; }
.wh-changeover-hero__meta {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--wh-hairline);
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	color: var(--wh-body);
	max-width: 620px;
}
.wh-changeover-hero__meta p { margin: 0; }
.wh-changeover-hero__meta strong { font-weight: 600; color: var(--wh-ink); }

@media (max-width: 900px) {
	.wh-changeover-hero__inner { padding: 64px var(--wh-side-padding) 72px; }
	.wh-changeover-hero__title { font-size: 32px; }
	.wh-changeover-hero__lede { font-size: 15px; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.wh-header {
	z-index: 60;
}

.wh-header__inner {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 22px var(--wh-side-padding);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 28px;
}

.wh-logo {
	font-family: var(--wh-serif);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.1;
	flex-shrink: 0;
}
.wh-logo--image {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
/* Same size on every page — navigating from home to any interior page
   (and back) shouldn't jump the logo. 60px reads well over the hero
   without dominating and still fits the sticky nav on other pages. */
.wh-logo--image img {
	display: block;
	height: 60px;
	width: auto;
	max-width: 280px;
	/* Universal safety cap — the header logo can never exceed this,
	   regardless of the source image's natural dimensions, media
	   queries, or any WooCommerce/plugin CSS trying to expand it. */
	max-height: 60px !important;
	object-fit: contain;
}
.wh-footer__brand-name--image {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.wh-footer__brand-name--image img {
	display: block;
	height: 80px;
	width: auto;
	max-width: 260px;
}
@media (max-width: 900px) {
	.wh-logo--image img { height: 44px; max-width: 220px; }
	.wh-footer__brand-name--image img { height: 60px; }
}

/* Mobile nav drawer: at ≤900px (covers phones and small tablets), the
   horizontal nav becomes a dropdown panel that reveals when the
   hamburger is tapped. Was 700px but some phones report a wider
   viewport (especially larger Androids in some browser modes), so 900
   catches everything.
   `!important` on the display swaps beats source-order tie-breaks with
   the base .wh-nav-toggle / .wh-nav-wrap rules that appear later. */
@media (max-width: 900px) {
	.wh-nav-toggle { display: inline-flex !important; margin-left: auto; }
	.wh-header__inner { padding: 12px 16px; gap: 12px; }

	/* Firmer logo cap on real phone widths so a wide light-variant
	   wordmark can't push nav off-screen or overlap the hamburger. */
	.wh-logo--image img { height: 38px !important; max-height: 38px !important; max-width: 200px !important; width: auto !important; }

	/* Turn the horizontal nav into a slide-down drawer */
	.wh-nav-wrap {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--wh-cream-bg);
		border-top: 1px solid var(--wh-hairline);
		border-bottom: 1px solid var(--wh-hairline);
		padding: 8px 0 16px;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		display: none !important;
		z-index: 100;
	}
	[data-wh-nav-open="true"] .wh-nav-wrap { display: flex !important; }

	.wh-nav {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}
	.wh-nav > li { width: 100%; }
	.wh-nav__link,
	.wh-header--transparent .wh-nav__link,
	.wh-header--solid .wh-nav__link {
		display: block;
		padding: 16px 20px;
		font-size: 16px;
		border-bottom: 1px solid var(--wh-hairline);
		color: var(--wh-ink) !important;
	}

	.wh-nav-wrap .wh-btn--reserve {
		margin: 12px 20px 0;
		padding: 14px 20px;
		font-size: 13px;
		text-align: center;
	}
	.wh-header--transparent .wh-nav-wrap .wh-btn--reserve {
		background: var(--wh-burgundy);
		color: var(--wh-cream-bg);
		border: none;
	}

	/* Header itself needs relative positioning on mobile so the absolutely-
	   positioned drawer sits below it. */
	.wh-header { position: relative; }
	.wh-header--transparent { position: absolute; }
}

.wh-nav-wrap {
	display: flex;
	gap: 28px;
	align-items: center;
}

/* Mobile nav toggle — hidden on desktop, replaces the horizontal nav on ≤700px */
.wh-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	color: currentColor;
	-webkit-tap-highlight-color: transparent;
}
.wh-nav-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform .18s ease, opacity .18s ease;
	transform-origin: center;
}
.wh-nav-toggle[aria-expanded="true"] .wh-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wh-nav-toggle[aria-expanded="true"] .wh-nav-toggle__bar:nth-child(2) { opacity: 0; }
.wh-nav-toggle[aria-expanded="true"] .wh-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.wh-header--transparent .wh-nav-toggle { color: var(--wh-on-dark-logo); }
.wh-header--solid       .wh-nav-toggle { color: var(--wh-ink); }
.wh-nav {
	display: flex;
	gap: 28px;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.wh-nav > li { list-style: none; margin: 0; padding: 0; }

.wh-nav__link {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

/* Home: transparent header over hero */
.wh-header--transparent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}
.wh-header--transparent .wh-logo,
.wh-header--transparent .wh-nav__link {
	color: var(--wh-on-dark-logo);
}
.wh-header--transparent .wh-nav__link:hover {
	color: var(--wh-on-dark-heading);
}
.wh-header--transparent .wh-btn--reserve {
	border: 1px solid rgba(231, 214, 196, 0.5);
	color: var(--wh-on-dark-logo);
	background: transparent;
}
.wh-header--transparent .wh-btn--reserve:hover {
	background: rgba(250, 247, 240, 0.1);
	color: var(--wh-on-dark-heading);
}

/* All other pages: sticky solid header */
.wh-header--solid {
	position: sticky;
	top: 0;
	background: rgba(250, 247, 240, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wh-hairline);
}
.wh-header--solid .wh-logo { color: var(--wh-ink); }
.wh-header--solid .wh-nav__link { color: var(--wh-body-alt); }
.wh-header--solid .wh-nav__link:hover,
.wh-header--solid .wh-nav__link.current-menu-item,
.wh-header--solid .wh-nav__link.current_page_item { color: var(--wh-burgundy); }
.wh-header--solid .wh-btn--reserve {
	background: var(--wh-burgundy);
	color: var(--wh-cream-bg);
}
.wh-header--solid .wh-btn--reserve:hover { background: var(--wh-burgundy-hover); color: var(--wh-cream-bg); }

/* ==========================================================================
   Trust / certification band (above footer)
   ========================================================================== */

/* Sits directly on the dark footer background — no cream box. The
   badge itself provides the visual pop (it's a colorful shield);
   caption text picks up the footer's cream body color. */
.wh-trust {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 0 var(--wh-side-padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.wh-trust__kicker { color: var(--wh-on-dark-footer-mute); }
.wh-trust__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px 40px;
}
.wh-trust__item,
.wh-trust__link {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 520px;
	text-align: left;
	color: var(--wh-on-dark-body-warm);
	text-decoration: none;
}
.wh-trust__link:hover .wh-trust__caption { color: var(--wh-on-dark-heading); }
/* Doubled selector to beat WooCommerce's `.woocommerce img` (specificity
   011) which sets height:auto; max-width:100% on every image inside
   WC-rendered pages. Without this, the badge PNG blows up to fill its
   flex item on product/shop/cart pages. */
.wh-trust .wh-trust__img,
.wh-trust__item .wh-trust__img {
	display: block;
	height: 80px;
	width: auto;
	max-width: 110px;
	object-fit: contain;
	flex-shrink: 0;
}
.wh-trust__caption {
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--wh-on-dark-body-warm);
	max-width: 380px;
	margin: 0;
}
@media (max-width: 900px) {
	.wh-trust__list { gap: 20px 28px; }
	.wh-trust__item, .wh-trust__link { flex-direction: column; text-align: center; gap: 12px; max-width: 320px; }
	.wh-trust .wh-trust__img,
	.wh-trust__item .wh-trust__img { height: 68px; max-width: 100px; }
	.wh-trust__caption { text-align: center; max-width: 280px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.wh-footer {
	background: var(--wh-darkest);
	color: var(--wh-on-dark-body-warm);
}
/* When a trust badge is present, reserve top padding on the footer so
   the badge card gets breathing room. Also reduce the cols top padding
   so the vertical rhythm stays balanced instead of doubling up. */
.wh-footer--with-trust { padding-top: 48px; }
.wh-footer--with-trust .wh-footer__cols { padding-top: 40px; }
.wh-footer__cols {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 56px var(--wh-side-padding) 28px;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 48px;
}
.wh-footer__brand-name {
	font-family: var(--wh-brand);
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
	color: var(--wh-on-dark-heading);
	letter-spacing: 0.01em;
	/* No image variant uploaded → render "Windhaven Farm" as text in the
	   brand's own font (Moabhoers) instead of falling back to Newsreader. */
}
.wh-footer__brand-blurb {
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--wh-on-dark-muted-cool);
	max-width: 300px;
}
.wh-footer__socials {
	display: flex;
	gap: 18px;
	padding-top: 4px;
}
.wh-footer__social-link {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wh-on-dark-accent);
}
.wh-footer__col-title {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wh-on-dark-footer-mute);
}
.wh-footer__col-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wh-footer__col-link {
	font-size: 13.5px;
	font-weight: 300;
	color: var(--wh-on-dark-body-warm);
}
.wh-footer__col-link:hover { color: var(--wh-on-dark-heading); }
.wh-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wh-footer__bottom {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 20px var(--wh-side-padding) 40px;
	border-top: 1px solid rgba(217, 199, 180, 0.15);
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 11px;
	font-weight: 300;
	color: var(--wh-on-dark-footer-mute);
}

/* ==========================================================================
   Home > Hero
   ========================================================================== */

.wh-hero {
	position: relative;
	background: var(--wh-darkest);
	min-height: 660px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.wh-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.92;
	z-index: 0;
}
.wh-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(27, 15, 18, 0.62) 0%, rgba(27, 15, 18, 0.1) 34%, rgba(27, 15, 18, 0.9) 100%);
	z-index: 1;
}
.wh-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 0 var(--wh-side-padding) 46px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	flex-wrap: wrap;
}
.wh-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 520px;
}
.wh-hero__kicker {
	color: var(--wh-on-dark-accent-warm);
	/* Subtle dark shadow keeps the tan legible where the hero photo shows
	   bright sky / cloud areas behind it. */
	text-shadow: 0 1px 3px rgba(27, 15, 18, 0.6);
}
/* Hero title + lede sit on the same variable-background photo — give them
   the same protection so they read cleanly on cloud areas. */
.wh-hero__title,
.wh-hero__lede { text-shadow: 0 1px 3px rgba(27, 15, 18, 0.55); }
.wh-hero__title {
	font-family: var(--wh-serif);
	font-size: 56px;
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--wh-on-dark-heading);
	text-wrap: balance;
}
.wh-hero__lede {
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--wh-on-dark-body);
	max-width: 450px;
	text-wrap: pretty;
}
.wh-hero__card {
	background: var(--wh-cream-bg);
	padding: 24px 26px;
	min-width: 265px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wh-hero__card-kicker {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wh-caption);
}
.wh-hero__card-title {
	font-family: var(--wh-serif);
	font-size: 25px;
	font-weight: 500;
	line-height: 1.15;
}
.wh-hero__card-note {
	font-size: 12.5px;
	font-weight: 300;
	color: var(--wh-body);
	line-height: 1.65;
}
.wh-hero__card-cta {
	background: var(--wh-burgundy);
	color: var(--wh-cream-bg);
	padding: 13px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-top: 6px;
}
.wh-hero__card-cta:hover { background: var(--wh-burgundy-hover); color: var(--wh-cream-bg); }

/* ==========================================================================
   Home > Stats band
   ========================================================================== */

.wh-stats {
	border-bottom: 1px solid var(--wh-hairline);
}
.wh-stats__grid {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 36px var(--wh-side-padding);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.wh-stat {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.wh-stat__value {
	font-family: var(--wh-serif);
	font-size: 30px;
	font-weight: 400;
	color: var(--wh-burgundy);
	line-height: 1;
}
.wh-stat__label {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wh-caption);
	line-height: 1.6;
}

/* ==========================================================================
   Home > Story + shelf split
   ========================================================================== */

.wh-story-shelf {
	/* Constrain the split section to the same container width as
	   everything else on the page — the dark panel + shelf read as a
	   bordered card inline with the rest, not a full-bleed band. */
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 56px var(--wh-side-padding);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.wh-story {
	background: var(--wh-dark-panel);
	color: var(--wh-on-dark-body);
	padding: 56px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}
.wh-story__title {
	font-family: var(--wh-serif);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--wh-on-dark-heading);
	max-width: 420px;
	text-wrap: balance;
}
.wh-story__body {
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--wh-on-dark-body-warm);
	max-width: 430px;
	text-wrap: pretty;
}
.wh-story__link {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wh-on-dark-accent);
	border-bottom: 1px solid rgba(232, 201, 166, 0.45);
	padding-bottom: 4px;
	align-self: flex-start;
	margin-top: 4px;
}
.wh-story__link:hover { color: var(--wh-on-dark-heading); }

.wh-shelf {
	background: var(--wh-cream-alt);
	padding: 40px 44px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wh-hairline);
	border-left: 0;
}
.wh-shelf__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 16px;
}
.wh-shelf__see {
	font-size: 12px;
	font-weight: 600;
}
.wh-shelf__row {
	display: flex;
	gap: 18px;
	align-items: center;
	padding: 18px 0;
	border-top: 1px solid var(--wh-hairline);
	color: var(--wh-ink);
}
.wh-shelf__row:hover { background: var(--wh-burgundy-tint); color: var(--wh-ink); }
.wh-shelf__img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	background: var(--wh-image-bg);
	flex-shrink: 0;
}
.wh-shelf__meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}
.wh-shelf__name {
	font-family: var(--wh-serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
}
.wh-shelf__note {
	font-size: 12.5px;
	font-weight: 300;
	color: var(--wh-muted);
	line-height: 1.55;
}
.wh-shelf__tag {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wh-burgundy);
	white-space: nowrap;
}
.wh-shelf__cta {
	background: var(--wh-burgundy);
	color: var(--wh-cream-bg);
	padding: 15px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-top: 24px;
}
.wh-shelf__cta:hover { background: var(--wh-burgundy-hover); color: var(--wh-cream-bg); }

/* ==========================================================================
   Home > Steps
   ========================================================================== */

.wh-steps {
	border-bottom: 1px solid var(--wh-hairline);
}
.wh-steps__inner {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 72px var(--wh-side-padding);
}
.wh-steps__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	flex-wrap: wrap;
	margin-bottom: 42px;
}
.wh-steps__head-left {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wh-steps__title {
	font-family: var(--wh-serif);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.wh-steps__head-note {
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--wh-body);
	max-width: 360px;
	text-wrap: pretty;
}
.wh-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--wh-hairline);
	border: 1px solid var(--wh-hairline);
}
.wh-step {
	background: var(--wh-cream-bg);
	padding: 32px 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wh-step__n {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wh-caption);
}
.wh-step__title {
	font-family: var(--wh-serif);
	font-size: 23px;
	font-weight: 500;
}
.wh-step__body {
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--wh-body);
	text-wrap: pretty;
}

/* ==========================================================================
   Home > How we raise it
   ========================================================================== */

.wh-raise {
	border-bottom: 1px solid var(--wh-hairline);
}
.wh-raise__inner {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 72px var(--wh-side-padding);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.wh-raise__figure {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.wh-raise__img {
	width: 100%;
	aspect-ratio: 1.1;
	object-fit: cover;
}
.wh-raise__caption {
	font-size: 11px;
	font-weight: 400;
	color: var(--wh-caption);
	line-height: 1.7;
}
.wh-raise__copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.wh-raise__title {
	font-family: var(--wh-serif);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.wh-raise__p {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--wh-body);
	text-wrap: pretty;
}
.wh-raise__link {
	font-size: 13px;
	font-weight: 600;
	border-bottom: 1px solid var(--wh-hairline-warm);
	padding-bottom: 3px;
	align-self: flex-start;
}

/* ==========================================================================
   Home > Closing CTA
   ========================================================================== */

.wh-closing {
	position: relative;
	background: var(--wh-darkest);
	overflow: hidden;
}
.wh-closing__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	z-index: 0;
}
.wh-closing__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(27, 15, 18, 0.6), rgba(27, 15, 18, 0.85));
	z-index: 1;
}
.wh-closing__inner {
	position: relative;
	z-index: 2;
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 84px var(--wh-side-padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}
.wh-closing__title {
	font-family: var(--wh-serif);
	font-size: 40px;
	font-weight: 400;
	color: var(--wh-on-dark-heading);
	max-width: 640px;
	line-height: 1.15;
	text-wrap: balance;
}
.wh-closing__lede {
	font-size: 14px;
	font-weight: 300;
	color: var(--wh-on-dark-body);
	max-width: 480px;
	line-height: 1.75;
}
.wh-closing__buttons {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 8px;
}

/* ==========================================================================
   Shop (Provisions)
   ========================================================================== */

.wh-shop {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 56px var(--wh-side-padding) 96px;
}
.wh-shop__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 640px;
	margin-bottom: 46px;
}
.wh-shop__h1 {
	font-family: var(--wh-serif);
	font-size: 52px;
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.05;
}
.wh-shop__lede {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--wh-body);
	text-wrap: pretty;
}
.wh-shop__list {
	display: flex;
	flex-direction: column;
}
.wh-shop-row {
	display: grid;
	grid-template-columns: 200px 1fr 250px;
	gap: 36px;
	align-items: center;
	padding: 32px 0;
	border-top: 1px solid var(--wh-hairline);
}
.wh-shop-row__img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	background: var(--wh-image-bg);
}
.wh-shop-row__meta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.wh-shop-row__title-line {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.wh-shop-row__name {
	font-family: var(--wh-serif);
	font-size: 30px;
	font-weight: 500;
	color: var(--wh-ink);
	line-height: 1.1;
}
.wh-shop-row__name:hover { color: var(--wh-burgundy); }
.wh-shop-row__tag {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wh-cream-bg);
	padding: 5px 11px;
	line-height: 1.4;
}
.wh-shop-row__blurb {
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--wh-body);
	max-width: 540px;
	text-wrap: pretty;
}
.wh-shop-row__price-rail {
	display: flex;
	flex-direction: column;
	gap: 9px;
	border-left: 1px solid var(--wh-hairline);
	padding-left: 30px;
}
.wh-shop-row__price {
	font-family: var(--wh-serif);
	font-size: 25px;
	font-weight: 500;
	color: var(--wh-burgundy);
	line-height: 1.1;
}
.wh-shop-row__price-note {
	font-size: 11px;
	font-weight: 400;
	color: var(--wh-caption);
	line-height: 1.65;
}

/* FAQ */
.wh-faqs {
	margin-top: 64px;
	border-top: 1px solid var(--wh-ink);
	padding-top: 48px;
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 56px;
}
.wh-faqs__side {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wh-faqs__title {
	font-family: var(--wh-serif);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
}
.wh-faqs__ask {
	font-size: 13px;
	font-weight: 600;
	margin-top: 8px;
	border-bottom: 1px solid var(--wh-hairline-warm);
	padding-bottom: 3px;
	align-self: flex-start;
}
.wh-faqs__list {
	display: flex;
	flex-direction: column;
}
.wh-faq {
	border-top: 1px solid var(--wh-hairline);
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.wh-faq__q {
	font-family: var(--wh-serif);
	font-size: 19px;
	font-weight: 500;
}
.wh-faq__a {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--wh-body);
	text-wrap: pretty;
}

/* ==========================================================================
   Single product
   ========================================================================== */

.wh-product {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 36px var(--wh-side-padding) 96px;
}
.wh-product__back {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wh-caption);
	display: inline-block;
	margin-bottom: 28px;
}
.wh-product__back:hover { color: var(--wh-burgundy); }
.wh-product__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}
.wh-product__figure {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.wh-product__img {
	width: 100%;
	aspect-ratio: 4 / 4.4;
	object-fit: cover;
	background: var(--wh-image-bg);
}
.wh-product__caption {
	font-size: 11px;
	color: var(--wh-caption);
	line-height: 1.7;
}
.wh-product__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.wh-product__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-bottom: 1px solid var(--wh-ink);
	padding-bottom: 24px;
}
.wh-product__title {
	font-family: var(--wh-serif);
	font-size: 48px;
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.05;
}
.wh-product__long {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--wh-body);
	text-wrap: pretty;
}
/* Breed comparison — sits full-width below the product grid so each
   cell has real room for descriptive text (not just short phrases). */
.wh-compare-section {
	margin-top: 72px;
	max-width: var(--wh-max-width);
}
.wh-compare-section__title {
	font-family: var(--wh-serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wh-ink);
	margin-bottom: 20px;
}
.wh-compare {
	width: 100%;
	border-collapse: collapse;
	background: var(--wh-cream-alt);
	border: 1px solid var(--wh-hairline);
	font-family: var(--wh-sans);
	table-layout: fixed;
}
.wh-compare th,
.wh-compare td {
	padding: 22px 28px;
	text-align: left;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wh-body);
	border-bottom: 1px solid var(--wh-hairline);
	vertical-align: top;
	text-wrap: pretty;
}
/* Data columns — the two breeds. Equal width, each generous. */
.wh-compare thead th[scope="col"],
.wh-compare tbody td { width: 34%; }
.wh-compare thead th:first-child,
.wh-compare tbody th[scope="row"] { width: 18%; }

.wh-compare thead th {
	font-family: var(--wh-serif);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--wh-burgundy);
	padding-top: 22px;
	padding-bottom: 18px;
	background: transparent;
}
.wh-compare tbody th[scope="row"] {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wh-caption);
	background: transparent;
	line-height: 1.5;
}
.wh-compare tbody tr:last-child th,
.wh-compare tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 720px) {
	.wh-compare-section { margin-top: 48px; }
	.wh-compare { table-layout: auto; }
	.wh-compare th,
	.wh-compare td { padding: 14px 14px; font-size: 13.5px; line-height: 1.55; }
	.wh-compare thead th { font-size: 16px; padding-top: 16px; padding-bottom: 12px; }
	.wh-compare thead th[scope="col"],
	.wh-compare tbody td { width: auto; }
	.wh-compare thead th:first-child,
	.wh-compare tbody th[scope="row"] { width: 24%; }
}

.wh-specs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--wh-hairline);
	border: 1px solid var(--wh-hairline);
}
.wh-spec {
	background: var(--wh-cream-bg);
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wh-spec__v {
	font-family: var(--wh-serif);
	font-size: 22px;
	font-weight: 500;
	color: var(--wh-burgundy);
	line-height: 1.15;
}
.wh-spec__k {
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wh-caption);
	line-height: 1.55;
}
.wh-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wh-options__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wh-caption);
}
.wh-options__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wh-option {
	border: 1px solid var(--wh-hairline-option);
	background: var(--wh-cream-alt);
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	cursor: pointer;
}
.wh-option[data-selected="true"] {
	border: 2px solid var(--wh-burgundy);
	background: var(--wh-selected-bg);
	padding: 19px 23px;
}
.wh-option__title {
	font-family: var(--wh-serif);
	font-size: 21px;
	font-weight: 500;
}
.wh-option__detail {
	font-size: 13px;
	font-weight: 300;
	color: var(--wh-body);
	line-height: 1.55;
}
.wh-option__price {
	font-family: var(--wh-serif);
	font-size: 20px;
	font-weight: 500;
	color: var(--wh-burgundy);
	white-space: nowrap;
}
.wh-purchase {
	background: var(--wh-dark-panel);
	padding: 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.wh-purchase__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}
.wh-purchase__label {
	font-size: 14px;
	font-weight: 300;
	color: var(--wh-on-dark-body-warm);
}
.wh-purchase__amount {
	font-family: var(--wh-serif);
	font-size: 34px;
	font-weight: 400;
	color: var(--wh-on-dark-heading);
}
.wh-purchase__divider {
	height: 1px;
	background: rgba(201, 169, 140, 0.3);
}
.wh-purchase__label--muted {
	font-size: 13px;
	color: var(--wh-on-dark-muted);
}
.wh-purchase__later {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--wh-on-dark-accent);
	text-align: right;
	line-height: 1.65;
	max-width: 300px;
}
.wh-purchase__cta {
	background: var(--wh-cream-bg);
	color: var(--wh-burgundy-hover);
	padding: 15px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-top: 4px;
	border: none;
	cursor: pointer;
}
.wh-purchase__cta:hover { background: #fff; color: var(--wh-burgundy-hover); }
.wh-purchase__fine {
	font-size: 10.5px;
	font-weight: 400;
	color: var(--wh-on-dark-muted);
	text-align: center;
	line-height: 1.7;
}
.wh-notes {
	display: flex;
	flex-direction: column;
}
.wh-note {
	border-top: 1px solid var(--wh-hairline);
	padding: 18px 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.wh-note__k {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wh-burgundy);
}
.wh-note__v {
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--wh-body);
	text-wrap: pretty;
}

/* ==========================================================================
   Article layout (Our Farm)
   ========================================================================== */

.wh-article-head {
	max-width: 820px;
	margin: 0 auto;
	padding: 72px var(--wh-side-padding) 52px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.wh-article-head__h1 {
	font-family: var(--wh-serif);
	font-size: 52px;
	font-weight: 400;
	letter-spacing: -0.018em;
	line-height: 1.06;
	text-wrap: balance;
}
.wh-article-head__lede {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--wh-body);
	text-wrap: pretty;
}
.wh-hero-image-band {
	/* Match the article-body width above/below so the image sits inside
	   the same column as the text, not full-bleed across the page. */
	max-width: 820px;
	margin: 0 auto;
	padding: 0 var(--wh-side-padding);
}
.wh-hero-image-band__img {
	display: block;
	width: 100%;
	max-height: 620px;
	object-fit: contain;
	/* Match the page cream, not the darker image-frame cream — so a
	   transparent-background logo/photo blends into the page seamlessly
	   instead of showing a visible box around it. */
	background: var(--wh-cream-bg);
}
.wh-article-body {
	max-width: 820px;
	margin: 0 auto;
	padding: 56px var(--wh-side-padding) 72px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.wh-article-body p {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--wh-body-alt);
	text-wrap: pretty;
}
.wh-pullquote {
	margin: 8px 0;
	padding: 28px 34px;
	background: var(--wh-quote-bg);
	border-left: 3px solid var(--wh-burgundy);
}
.wh-pullquote p {
	font-family: var(--wh-serif);
	font-size: 24px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
	color: var(--wh-burgundy-hover);
	text-wrap: pretty;
}
.wh-article-buttons {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 16px;
}
.wh-article-buttons .wh-btn { padding: 14px 28px; }

/* ==========================================================================
   Finishing statement (How We Farm) — question-shaped H2 so answer engines
   can quote directly against "grass fed / grass finished" questions.
   ========================================================================== */

.wh-finishing {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 var(--wh-side-padding) 56px;
}
.wh-finishing__title {
	font-family: var(--wh-serif);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wh-ink);
	margin: 0 0 16px;
}
.wh-finishing__lede {
	font-size: 20px;
	line-height: 1.4;
	color: var(--wh-ink);
	margin: 0 0 20px;
}
.wh-finishing__lede strong { font-weight: 500; }
.wh-finishing__body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--wh-ink);
	margin: 0 0 16px;
}
@media (max-width: 900px) {
	.wh-finishing__title { font-size: 26px; }
	.wh-finishing__lede { font-size: 18px; }
}

/* ==========================================================================
   Practices (How We Farm)
   ========================================================================== */

.wh-practices {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 0 var(--wh-side-padding) 84px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--wh-hairline);
	border: 1px solid var(--wh-hairline);
}
.wh-practice {
	background: var(--wh-cream-bg);
	display: grid;
	grid-template-columns: 360px 1fr;
	align-items: stretch;
}
.wh-practice__img {
	width: 100%;
	height: 100%;
	min-height: 250px;
	object-fit: cover;
	background: var(--wh-image-bg);
}
.wh-practice__body {
	padding: 40px 48px;
	display: flex;
	flex-direction: column;
	gap: 13px;
	justify-content: center;
}
.wh-practice__title {
	font-family: var(--wh-serif);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
}
.wh-practice__body-text {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--wh-body);
	max-width: 620px;
	text-wrap: pretty;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.wh-contact {
	max-width: var(--wh-max-width);
	margin: 0 auto;
	padding: 64px var(--wh-side-padding) 96px;
}
.wh-contact__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 660px;
	margin-bottom: 48px;
}
.wh-contact__h1 {
	font-family: var(--wh-serif);
	font-size: 50px;
	font-weight: 400;
	letter-spacing: -0.018em;
	line-height: 1.06;
}
.wh-contact__lede {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--wh-body);
	text-wrap: pretty;
}
.wh-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 60px;
	align-items: start;
}
.wh-contact__rows {
	display: flex;
	flex-direction: column;
}
.wh-contact-row {
	border-top: 1px solid var(--wh-hairline);
	padding: 22px 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.wh-contact-row__k {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wh-burgundy);
}
.wh-contact-row__v {
	font-family: var(--wh-serif);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.35;
}
.wh-contact-row__note {
	font-size: 13.5px;
	font-weight: 300;
	color: var(--wh-body);
	line-height: 1.7;
}

/* Form */
.wh-form {
	border: 1px solid var(--wh-hairline);
	background: var(--wh-cream-alt);
	padding: 38px 40px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.wh-form__title {
	font-family: var(--wh-serif);
	font-size: 27px;
	font-weight: 500;
}
.wh-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.wh-form__field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.wh-form__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wh-caption);
}
.wh-form__input,
.wh-form__select {
	border: none;
	border-bottom: 1px solid var(--wh-hairline-mid);
	background: transparent;
	padding: 10px 2px;
	font-size: 15px;
	color: var(--wh-ink);
	outline: none;
	border-radius: 0;
}
.wh-form__input:focus,
.wh-form__select:focus,
.wh-form__textarea:focus {
	border-color: var(--wh-burgundy);
}
.wh-form__textarea {
	border: 1px solid var(--wh-hairline-mid);
	background: transparent;
	padding: 12px;
	font-size: 15px;
	color: var(--wh-ink);
	outline: none;
	resize: vertical;
	border-radius: 0;
	font-family: inherit;
}
.wh-form__submit {
	background: var(--wh-burgundy);
	color: var(--wh-cream-bg);
	border: none;
	padding: 15px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	cursor: pointer;
	border-radius: 0;
}
.wh-form__submit:hover { background: var(--wh-burgundy-hover); }
.wh-form__status {
	margin: 0;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid var(--wh-hairline);
	background: var(--wh-cream-bg);
}
.wh-form__status--ok {
	color: #234A2E;
	border-color: rgba(35, 74, 46, 0.3);
	background: #EBF3EE;
}
.wh-form__status--err {
	color: var(--wh-burgundy-hover);
	border-color: rgba(110, 38, 55, 0.35);
	background: #F7EDEE;
}
.wh-form__errors {
	margin: 0;
	padding: 0 0 0 18px;
	color: var(--wh-burgundy-hover);
	font-size: 13px;
}

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

@media (max-width: 900px) {
	.wh-hero { min-height: 640px; }
	.wh-hero__title { font-size: 44px; }
	/* Reserve top padding for the transparent header so the hero kicker
	   can't tuck under the logo on narrow viewports where the copy is
	   tall enough to fill the whole hero. */
	.wh-hero__inner { padding-top: 90px; padding-bottom: 36px; }
	/* Kicker is long ("CENTRAL MINNESOTA · SECOND GENERATION") — tight
	   letter-spacing on narrow screens keeps it on one line without
	   clipping the right edge. */
	.wh-hero__kicker { letter-spacing: 0.15em; font-size: 9.5px; }
	/* On mobile the hero title + lede shift lower in the frame and often
	   land over cloud/sky bands where the desktop overlay is barely tinted.
	   Darken the overlay mid-band and thicken the text-shadow so the copy
	   stays readable regardless of which slice of sky it lands on. */
	.wh-hero__overlay {
		background: linear-gradient(180deg,
			rgba(27, 15, 18, 0.55) 0%,
			rgba(27, 15, 18, 0.45) 40%,
			rgba(27, 15, 18, 0.85) 100%);
	}
	.wh-hero__title,
	.wh-hero__lede { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75); }
	.wh-hero__lede { color: #fff; }
	.wh-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; padding: 32px var(--wh-side-padding); }
	.wh-story-shelf { grid-template-columns: 1fr; padding: 32px var(--wh-side-padding); }
	.wh-story { padding: 40px 32px; }
	.wh-shelf { padding: 32px 28px; border-left: 1px solid var(--wh-hairline); border-top: 0; }
	.wh-steps__grid { grid-template-columns: 1fr; }
	.wh-raise__inner { grid-template-columns: 1fr; padding: 56px var(--wh-side-padding); gap: 32px; }
	.wh-raise__title, .wh-story__title, .wh-steps__title { font-size: 30px; }
	.wh-closing__title { font-size: 30px; }
	.wh-shop__h1, .wh-article-head__h1, .wh-contact__h1 { font-size: 38px; }
	.wh-shop-row { grid-template-columns: 1fr; gap: 20px; }
	.wh-shop-row__img { width: 100%; height: auto; aspect-ratio: 1; }
	.wh-shop-row__price-rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--wh-hairline); padding-top: 18px; }
	.wh-faqs { grid-template-columns: 1fr; gap: 24px; }
	.wh-product__grid { grid-template-columns: 1fr; gap: 32px; }
	.wh-product__figure { position: static; }
	.wh-product__title { font-size: 36px; }
	.wh-practice { grid-template-columns: 1fr; }
	.wh-practice__img { min-height: 220px; }
	.wh-contact__grid { grid-template-columns: 1fr; gap: 40px; }
	.wh-footer__cols { grid-template-columns: 1fr; gap: 32px; padding-top: 44px; }
	.wh-footer__brand-blurb { max-width: none; }
	.wh-header__inner { padding: 16px 20px; gap: 16px; }
	.wh-nav { gap: 16px; }
	.wh-nav__link { font-size: 12px; }
	.wh-btn--reserve { padding: 9px 14px; font-size: 11px; }
}