/* ============================================================
   AVA FRONTPAGE EXTRAS — sections B–G
   Material Warmth design system. Loaded only on the AVA Landing
   template, so selectors target their classes directly so they
   also match inside the block editor iframe.
   ============================================================ */

/* ------------------------------------------------------------
   Shared primitives
   ------------------------------------------------------------ */

.ava-eyebrow {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay);
	margin: 0 0 var(--space-sm);
}

.ava-eyebrow--on-clay {
	color: var(--warm-white);
}

.ava-eyebrow--on-ink {
	color: var(--clay-light);
}

.ava-section-heading {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--ink);
	margin: 0 0 var(--space-md);
}

.ava-section-heading--on-clay {
	color: var(--warm-white);
}

.ava-section-heading--on-ink {
	color: var(--warm-white);
}

.ava-section-lead {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: 400;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 60ch;
	margin: 0 0 var(--space-lg);
}

.ava-section-lead--on-clay {
	color: oklch(0.95 0.020 65);
}

.ava-grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--space-md);
	margin: 0;
	align-items: stretch;
}

/* Cards in .ava-grid-3 stretch to fill their grid cell so heights
   equalize across the row regardless of text length. */
.ava-grid-3 > .ava-challenge-card,
.ava-grid-3 > .ava-feature-item,
.ava-grid-3 > .ava-benefit-item {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.ava-card-title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 var(--space-xs);
}

.ava-card-desc {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--ink-soft);
	margin: 0;
	max-width: 48ch;
}

/* ------------------------------------------------------------
   B. CHALLENGE — clay background, darker clay cards
   ------------------------------------------------------------ */

.ava-challenge {
	background-color: var(--clay);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
}

.ava-challenge-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ava-challenge .ava-section-lead--on-clay,
.ava-challenge .ava-section-lead {
	color: oklch(0.95 0.020 65);
	max-width: 56ch;
}

.ava-challenge-card {
	background-color: oklch(0.50 0.10 42 / 0.45);
	border: 1px solid oklch(0.72 0.07 48 / 0.25);
	padding: var(--space-md);
	margin: 0;
}

.ava-challenge-card .ava-card-title {
	color: var(--warm-white);
	font-weight: 900;
}

.ava-challenge-card .ava-card-desc {
	color: oklch(0.92 0.020 60);
}

/* ------------------------------------------------------------
   C. BEFORE / AFTER — split panels + pull quote band
   ------------------------------------------------------------ */

.ava-before-after-frontpage {
	background-color: var(--linen);
	margin: 0;
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
}

.ava-ba-header {
	max-width: 1200px;
	margin: 0 auto var(--space-lg);
	padding: 0;
}

.ava-ba-columns {
	max-width: 1200px;
	margin: 0 auto;
	gap: var(--space-lg);
	align-items: stretch;
}

@media (max-width: 900px) {
	.ava-ba-columns {
		flex-wrap: wrap;
	}
}

.ava-ba-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.ava-ba-card {
	padding: var(--space-md) var(--space-md);
	margin: 0;
	display: flex;
	flex-direction: column;
}

.ava-ba-card--before {
	background-color: var(--ink);
}

.ava-ba-card--after {
	background-color: var(--linen-mid);
}

.ava-ba-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 var(--space-sm);
}

.ava-ba-label--before {
	color: var(--clay-light);
}

.ava-ba-label--after {
	color: var(--clay);
}

.ava-ba-card--before .ava-ba-quote {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-style: italic;
	line-height: 1.6;
	color: oklch(0.90 0.020 60);
	max-width: 48ch;
	margin: 0;
}

.ava-ba-card--after .ava-ba-quote {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-style: italic;
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 48ch;
	margin: 0;
}

.ava-ba-pull-col {
	display: flex;
	flex-direction: column;
}

.ava-ba-pull {
	background-color: var(--clay);
	padding: var(--space-lg);
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ava-ba-pull-quote {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--warm-white);
	max-width: 32ch;
	margin: 0 0 var(--space-md);
}

.ava-ba-pull-cite {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: oklch(0.95 0.020 65);
	margin: 0 0 var(--space-md);
}

.ava-ba-cta {
	margin: 0;
}

.ava-ba-cta .wp-block-button > .wp-block-button__link.wp-element-button {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.85em 2em;
	border-radius: 0;
	transition:
		background-color 0.3s var(--ease-out-quart),
		transform 0.3s var(--ease-out-quart);
}

.ava-ba-cta .wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button {
	background-color: var(--ink);
	color: var(--warm-white);
	border: none;
}

.ava-ba-cta .wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button:hover,
.ava-ba-cta .wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button:focus-visible {
	background-color: var(--clay-deep);
	transform: translateY(-2px);
	outline: none;
}

/* ------------------------------------------------------------
   D. WHAT IS AVA — linen background, simple feature grid
   ------------------------------------------------------------ */

.ava-what-is-ava {
	background-color: var(--linen);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
}

.ava-what-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ava-feature-item {
	background-color: var(--warm-white);
	border-top: 3px solid var(--clay);
	padding: var(--space-md);
	margin: 0;
}

.ava-feature-item .ava-card-title {
	color: var(--ink);
}

/* ------------------------------------------------------------
   E. BENEFITS — linen-mid, alternating rhythm
   ------------------------------------------------------------ */

.ava-benefits {
	background-color: var(--linen-mid);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
}

.ava-benefits-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ava-benefit-item {
	background-color: var(--linen);
	padding: var(--space-md);
	margin: 0;
	border-top: 3px solid var(--clay);
	border-radius: 0;
}

.ava-benefit-item .ava-card-title {
	color: var(--ink);
	font-size: var(--text-xl);
	font-weight: 900;
}

.ava-benefit-item .ava-card-desc {
	color: var(--ink-soft);
}

/* ------------------------------------------------------------
   F. FAQ — native <details><summary> accordion
   ------------------------------------------------------------ */

.ava-faq {
	background-color: var(--linen);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
}

.ava-faq-inner {
	max-width: 900px;
	margin: 0 auto;
}

.ava-faq-list {
	margin-top: var(--space-md);
	/* Kill the wp:group is-layout-flow auto block-gap so siblings sit flush
	   against each other and every closed accordion has the same height.
	   Without this, item 1 (first-child, margin-top:0) reads shorter than
	   items 2+ (which inherit a margin-block-start of --theme-content-spacing). */
	--theme-content-spacing: 0;
	--wp--style--block-gap: 0;
}

.ava-faq-item {
	border-top: 1px solid var(--linen-dark);
	padding: 0;
}

.ava-faq-item:last-child {
	border-bottom: 1px solid var(--linen-dark);
}

.ava-faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-sm) 0;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.01em;
	line-height: 1.3;
	transition: color 0.2s var(--ease-out-quart);
}

/* Override default wp:details inner spacing so closed rows are
   compact and only the summary contributes to row height. */
.ava-faq-item {
	margin: 0;
	padding: 0;
}

.ava-faq-item > *:not(summary) {
	margin-top: 0;
}

/* When a FAQ row is closed, force-hide every inner block-level child
   (wp:paragraph wrappers, etc.) so wp-block-details doesn't leak any
   inner padding/margin into the closed row's height — keeps the last
   item flush against its bottom border. */
.ava-faq-item:not([open]) > *:not(summary) {
	display: none;
}

.ava-faq-item summary::-webkit-details-marker {
	display: none;
}

.ava-faq-item summary::after {
	content: '+';
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 400;
	color: var(--clay);
	line-height: 1;
	flex-shrink: 0;
	transition: transform 0.2s var(--ease-out-quart);
}

.ava-faq-item[open] summary::after {
	content: '−';
}

.ava-faq-item summary:hover,
.ava-faq-item summary:focus-visible {
	color: var(--clay-deep);
	outline: none;
}

/* The answer is itself a wp:paragraph (no inner wrapper), so the wrapper
   styling and the type styling collapse onto the same element. */
.ava-faq-item .ava-faq-answer {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--ink-soft);
	margin: 0 0 var(--space-sm);
	max-width: 65ch;
	padding: 0 0 var(--space-md) var(--space-md);
	border-left: 3px solid var(--clay-light);
}

/* ------------------------------------------------------------
   PRODUCT (frontpage summary) — minimal layout for the simplified
   summary inside .product-section. The .product-section, .product-inner,
   .product-label, .product-heading rules live in produkt.css and still
   apply (clay-deep frame + warm-white heading). These additions style
   the new lead paragraph, summary image, and CTA on that background.
   ------------------------------------------------------------ */

.product-section .product-lead {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: 1.6;
	color: oklch(0.92 0.020 65);
	max-width: 60ch;
	margin: var(--space-md) 0 var(--space-lg);
}

.product-section .product-summary-image {
	margin: 0 0 var(--space-lg);
	max-width: 1100px;
}

.product-section .product-summary-image img {
	width: 100%;
	height: auto;
	display: block;
}

.product-section .product-cta {
	margin: 0;
}

/* ------------------------------------------------------------
   PRODUCT SUMMARY GRID — front-page Produktet section uses a
   2-column split: text/CTA on the left, hotspot image on the right.
   On /produkt the .product-section uses .product-layout instead, so
   this rule only matches when .product-summary-grid is present.
   ------------------------------------------------------------ */

.product-section .product-summary-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl);
	align-items: center;
}

@media (max-width: 860px) {
	.product-section .product-summary-grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}
}

.product-section .product-summary-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.product-section .product-summary-text > .product-header,
.product-section .product-summary-text > .product-lead,
.product-section .product-summary-text > .product-cta {
	margin: 0;
}

/* ------------------------------------------------------------
   PRODUCT HOTSPOT IMAGE — placeholder photo with numbered markers
   pointing at product features. Tooltips show on hover/focus.
   Editor can move each .product-hotspot--N by editing the
   per-marker top/left rules below; copy lives in the markup.
   ------------------------------------------------------------ */

.product-section .product-hotspot-image {
	position: relative;
	margin: 0;
	max-width: none;
	width: 100%;
}

.product-hotspot-image > .wp-block-image,
.product-hotspot-image > figure {
	margin: 0;
}

.product-hotspot-image img {
	width: 100%;
	height: auto;
	display: block;
}

.product-hotspot {
	position: absolute;
	z-index: 2;
	margin: 0;
}

/* Per-marker positions calibrated to ava-product.jpg (3/4 view of the
   booth, white background). Adjust if the image is replaced. */
.product-hotspot--1 { top: 18%; left: 42%; }  /* Vægpaneler — top of back panel */
.product-hotspot--2 { top: 58%; left: 50%; }  /* Bordhøjde — desk inside */
.product-hotspot--3 { top: 46%; left: 78%; }  /* Spejlvendt indgang — entry opening */
.product-hotspot--4 { top: 72%; left: 34%; }  /* Personlig tilpasning — front interior */

.product-hotspot-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 50%;
	background: var(--clay);
	color: var(--warm-white);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-sm);
	border: 2px solid var(--warm-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	transition: transform 0.25s var(--ease-out-quart),
		background-color 0.25s var(--ease-out-quart);
	max-width: none;
}

.product-hotspot:hover .product-hotspot-marker,
.product-hotspot:focus-within .product-hotspot-marker {
	transform: scale(1.15);
	background: var(--clay-light);
}

/* Pulsing halo so the markers read as interactive without copy. */
.product-hotspot-marker::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--clay);
	opacity: 0.55;
	animation: product-hotspot-pulse 2s var(--ease-out-quart) infinite;
	pointer-events: none;
}

@keyframes product-hotspot-pulse {
	0%   { transform: scale(1);   opacity: 0.55; }
	70%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.product-hotspot-marker::before {
		animation: none;
	}
}

.product-hotspot-info {
	position: absolute;
	bottom: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 260px;
	padding: var(--space-sm) var(--space-md);
	background: var(--ink);
	color: var(--warm-white);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s var(--ease-out-quart);
	z-index: 3;
	text-align: left;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.product-hotspot-info::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--ink);
}

.product-hotspot:hover .product-hotspot-info,
.product-hotspot:focus-within .product-hotspot-info {
	opacity: 1;
	pointer-events: auto;
}

.product-hotspot-title {
	margin: 0 0 0.25em;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--warm-white);
	line-height: 1.25;
}

.product-hotspot-desc {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	line-height: 1.55;
	color: oklch(0.85 0.02 60);
}

/* On narrow viewports the absolute hotspots can fall off the image's
   reduced height — clamp the info box width and shrink markers. */
@media (max-width: 600px) {
	.product-hotspot-marker {
		width: 30px;
		height: 30px;
		font-size: var(--text-xs);
	}
	.product-hotspot-info {
		max-width: 200px;
	}
}

.product-section .product-cta .wp-block-button > .wp-block-button__link.wp-element-button {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.85em 2em;
	border-radius: 0;
	transition:
		background-color 0.3s var(--ease-out-quart),
		color 0.3s var(--ease-out-quart),
		border-color 0.3s var(--ease-out-quart),
		transform 0.3s var(--ease-out-quart);
}

.product-section .product-cta .wp-block-button.is-style-ink > .wp-block-button__link.wp-element-button {
	background-color: var(--ink);
	color: var(--warm-white);
	border: 2px solid var(--ink);
}

.product-section .product-cta .wp-block-button.is-style-ink > .wp-block-button__link.wp-element-button:hover,
.product-section .product-cta .wp-block-button.is-style-ink > .wp-block-button__link.wp-element-button:focus-visible {
	background-color: var(--warm-white);
	color: var(--ink);
	border-color: var(--warm-white);
	transform: translateY(-2px);
	outline: none;
}

/* ------------------------------------------------------------
   G. CLOSING CTA — ink full-bleed
   ------------------------------------------------------------ */

.ava-frontpage-closing-cta {
	background-color: var(--ink);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
	position: relative;
	overflow: hidden;
}

.ava-frontpage-closing-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 80% 50%,
		oklch(0.40 0.08 42 / 0.4) 0%,
		transparent 65%
	);
	pointer-events: none;
}

.ava-frontpage-closing-cta-inner {
	position: relative;
	max-width: 720px;
	margin: 0 auto 0 0;
}

.ava-frontpage-closing-cta-body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.7;
	color: oklch(0.72 0.025 52);
	max-width: 55ch;
	margin: 0 0 var(--space-lg);
}

.ava-frontpage-closing-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: 0;
}

.ava-frontpage-closing-cta-buttons .wp-block-button > .wp-block-button__link {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.85em 2em;
	border-radius: 0;
	transition:
		background-color 0.3s var(--ease-out-quart),
		border-color 0.3s var(--ease-out-quart),
		color 0.3s var(--ease-out-quart),
		transform 0.3s var(--ease-out-quart);
}

.ava-frontpage-closing-cta-buttons .wp-block-button.is-style-fill > .wp-block-button__link {
	background-color: var(--clay);
	color: var(--warm-white);
	border: none;
}

.ava-frontpage-closing-cta-buttons .wp-block-button.is-style-fill > .wp-block-button__link:hover,
.ava-frontpage-closing-cta-buttons .wp-block-button.is-style-fill > .wp-block-button__link:focus-visible {
	background-color: var(--clay-deep);
	transform: translateY(-2px);
	outline: none;
}

.ava-frontpage-closing-cta-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--warm-white);
	border: 2px solid oklch(0.94 0.025 60 / 0.5);
	padding: 0.80em 1.9em;
}

.ava-frontpage-closing-cta-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.ava-frontpage-closing-cta-buttons .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var(--warm-white);
	color: var(--warm-white);
	transform: translateY(-2px);
	outline: none;
}

/* ============================================================
   MOCKUP SECTIONS — added when frontpage was combined
   ============================================================ */

/* ------------------------------------------------------------
   PROOF STRIP — clay band, 4-up stat grid
   ------------------------------------------------------------ */

/* Proof strip sits between two darker bands (clay challenge above,
   linen what-is-ava below). Use --linen-mid for a clear tonal break
   from the deep clay challenge directly above. */
.proof-strip {
	background-color: var(--linen-mid);
	padding: var(--space-xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
}

.proof-inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* On the linen background the eyebrow + heading should render in
   their default ink/clay tones — strip the on-clay modifier just
   in case any old markup still uses it. */
.proof-strip .ava-eyebrow--on-clay {
	color: var(--clay);
}

.proof-strip .ava-section-heading--on-clay {
	color: var(--ink);
}

.proof-intro {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--ink);
	max-width: 52ch;
	margin: 0 0 var(--space-lg);
	line-height: 1.3;
}

.proof-facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}

@media (max-width: 700px) {
	.proof-facts {
		grid-template-columns: 1fr;
	}
}

.proof-fact {
	background-color: var(--warm-white);
	padding: var(--space-md);
	border: 1px solid var(--linen-dark);
	margin: 0;
}

.proof-fact-text {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 400;
	color: var(--ink-soft);
	line-height: 1.6;
	margin: 0 0 0.6em;
}

.proof-fact-text strong {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 900;
	display: block;
	color: var(--clay-deep);
	line-height: 1.1;
	margin-bottom: 0.2em;
}

.proof-fact-source {
	font-size: var(--text-xs);
	color: var(--ink-muted);
	font-style: italic;
	margin: 0;
}

/* ------------------------------------------------------------
   METHOD SECTION — linen background, two-column
   ------------------------------------------------------------ */

.method-section {
	background-color: var(--linen-mid);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
}

/* Single-column variant — used on /case where there's no companion image. */
.method-section--narrow .method-inner {
	grid-template-columns: 1fr;
	max-width: 760px;
}

/* On the front page, .sylvester directly follows .ava-benefits (both
   default to linen-mid in their own files), so override to linen here
   to keep adjacent sections visually distinct. /case has no .ava-benefits
   so its .sylvester keeps the linen-mid treatment from case.css. */
.ava-benefits + .sylvester,
.ava-benefits + .sylvester .sylvester-text {
	background-color: var(--linen);
}

.method-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

@media (max-width: 860px) {
	.method-inner {
		grid-template-columns: 1fr;
	}
}

.method-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay);
	margin: 0 0 var(--space-sm);
}

.method-heading {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ink);
	margin: 0 0 var(--space-md);
}

.method-body {
	font-size: var(--text-base);
	color: var(--ink-soft);
	line-height: 1.75;
	margin: 0 0 var(--space-md);
}

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

.method-pillar {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
}

.method-pillar-num {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 900;
	color: var(--clay);
	line-height: 1;
	min-width: 3.25rem;
	margin-top: 0.05em;
	white-space: nowrap;
}

.method-pillar-title {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--ink);
	margin: 0;
}

/* Description sits tight under its title — no gap. */
.method-pillar .method-pillar-desc {
	font-size: var(--text-sm);
	color: var(--ink-muted);
	max-width: 48ch;
	margin: 0;
}

.method-image-side {
	position: relative;
}

.method-image-wrap {
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: var(--linen-dark);
}

.method-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.method-image-caption {
	margin: var(--space-xs) 0 0;
	font-size: var(--text-xs);
	color: var(--ink-muted);
	font-style: italic;
}

/* ------------------------------------------------------------
   MID-CTA — linen-mid band, headline + button
   ------------------------------------------------------------ */

.mid-cta {
	background-color: var(--linen-mid);
	padding: var(--space-xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

.mid-cta-text {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ink);
	max-width: 38ch;
	margin: 0;
}

.mid-cta-text span {
	color: var(--clay);
}

.mid-cta-buttons {
	margin: 0;
}

.mid-cta-buttons .wp-block-button > .wp-block-button__link {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.85em 2em;
	border-radius: 0;
	background-color: var(--clay);
	color: var(--warm-white);
	border: none;
	transition:
		background-color 0.3s var(--ease-out-quart),
		transform 0.3s var(--ease-out-quart);
}

.mid-cta-buttons .wp-block-button > .wp-block-button__link:hover,
.mid-cta-buttons .wp-block-button > .wp-block-button__link:focus-visible {
	background-color: var(--clay-deep);
	transform: translateY(-2px);
	outline: none;
}

/* ------------------------------------------------------------
   DISTRIBUTOR SECTION — linen, single column
   ------------------------------------------------------------ */

.distributor-section {
	background-color: var(--linen);
	padding: var(--space-xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
	border-top: 1px solid var(--linen-dark);
}

.distributor-inner {
	max-width: 900px;
	margin: 0 auto 0 0;
}

.distributor-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay);
	margin: 0 0 var(--space-sm);
}

.distributor-body {
	font-size: var(--text-base);
	color: var(--ink-soft);
	line-height: 1.75;
	margin: 0;
}

/* ------------------------------------------------------------
   CASE CARD — linen-mid band linking to full case
   ------------------------------------------------------------ */

.case-card {
	background-color: var(--linen-mid);
	padding: var(--space-lg) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
}

.case-card-inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.case-card-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--clay);
	margin: 0 0 0.4em;
}

.case-card-heading {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
	margin: 0;
}

.case-card-desc {
	font-size: var(--text-sm);
	color: var(--ink-muted);
	margin: 0.4em 0 0;
}