/* =============================================================================
   Sustainable Ply — Block style aggregator
   Phase 2.

   Each custom block in the `sustainable-ply-blocks` plugin ships its own
   `style.css` registered via `block.json` `"style"` field. WordPress loads
   per-block CSS only when that block appears on the page (per-block code-split).

   This file holds cross-block utility rules that are not specific to any
   single block, plus a few empty-state and disclaimer classes that the
   render.php files reference. Keeping them here (rather than duplicating
   inside every block's style.css) ensures consistent typography and spacing
   for empty / pending / compliance states across the whole site.

   Block-specific layout (e.g. spec-table column widths, circular-network
   item grid) lives inside the per-block style.css in the plugin.
   ============================================================================= */

/* --------------------------------------------------------------------------- */
/* Page content wrapper (Phase B — content lifted into post_content).           */
/* core/post-content defaults to `display:flow-root`, which forms a block       */
/* formatting context and CONTAINS the trailing margin-bottom of the last       */
/* page section (the frame-pad gutter). When the same sections rendered as      */
/* direct children of <main> that trailing margin collapsed away, so the BFC    */
/* would add an unwanted ~frame-pad gap before the footer. This theme uses no   */
/* floats, so a plain block display restores the original margin-collapse and   */
/* keeps the post_content render pixel-identical to the old pattern render.     */
/* --------------------------------------------------------------------------- */

.wp-block-post-content {
	display: block;
}

/* --------------------------------------------------------------------------- */
/* Hairline divider between consecutive block-output sections                   */
/* --------------------------------------------------------------------------- */

.sp-block-section + .sp-block-section {
	border-top: 1px solid var(--color-border);
	margin-top: var(--sp-2xl);
	padding-top: var(--sp-2xl);
}

/* --------------------------------------------------------------------------- */
/* Block-wide container wrapper                                                 */
/* --------------------------------------------------------------------------- */

.sp-block-container {
	max-width: var(--layout-content-size);
	margin-inline: auto;
	padding-inline: var(--sp-2xl);
}

@media (max-width: 600px) {
	.sp-block-container {
		padding-inline: var(--sp-md);
	}
}

/* =============================================================================
   Hero — Home (FINDING-003)
   ============================================================================= */

/* Hero — Move 1 explicit 58/42 split.
   Left 58% solid ink-900 holds copy. Right 42% holds the cardboard photograph
   at full strength with no scrim. A 1px warm-clay vertical hairline sits at
   the seam. Chapter numeral 01 (Fraunces italic) anchors bottom-left at 8%
   opacity behind everything.                                                  */
/* Hero outer wrapper sits inside an inset frame.                              */
.sp-hero-home {
	background: var(--color-text);
	color: var(--color-bg);
	min-height: clamp(360px, 50vh, 520px);
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 58fr 42fr;
	align-items: stretch;
	max-width: var(--layout-wide-size);
	margin-inline: var(--layout-frame-pad);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
	margin-top: var(--layout-frame-pad);
}

/* Desktop-only specificity bump — locks the 2-col grid against WP's
   is-layout-flow after the wp:group refactor. Scoped to min-width:901px so
   the @900 mobile rule below wins on phones (otherwise the bento collapses
   into a tiny corner stamp, as reported 2026-06-29).                        */
@media (min-width: 901px) {
	.sp-hero-home.wp-block-group {
		display: grid;
		grid-template-columns: 58fr 42fr;
		grid-template-rows: 1fr;
		align-items: stretch;
	}
}

@media (max-width: 600px) {
	.sp-hero-home {
		border-radius: var(--radius-md, 12px);
		width: calc(100% - 2 * 12px);
		margin-top: 12px;
	}
}

/* The vertical hairline at the split. */
.sp-hero-home::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 58%;
	width: 1px;
	background: var(--color-accent);
	opacity: 0.42;
	pointer-events: none;
	z-index: 2;
}

.sp-hero-home__copy {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 6vw, 112px) clamp(32px, 5vw, 96px);
	max-width: 760px;
	position: relative;
	z-index: 1;
}

/* Bento triptych replaces the single hero photo — one tall feature image on top
   and two equal-width supporting images underneath. Reads as a small editorial
   contact-sheet of where the panels go.
   Flexbox layout (not CSS Grid) — Safari has known bugs with fr rows +
   align-self: stretch on grid children. Flex column with % heights renders
   reliably in every browser. Reported 2026-07-04 (bento tiles overlapping
   on desktop Safari and iPad).                                              */
.sp-hero-home__bento {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 14px);
	padding: clamp(16px, 2vw, 28px);
	position: relative;
	z-index: 1;
	height: 100%;
	min-height: 100%;
	box-sizing: border-box;
}

.sp-hero-home__bento-tile {
	object-fit: cover;
	border-radius: var(--radius-md, 12px);
	display: block;
	min-height: 0;
	min-width: 0;
}

.sp-hero-home__bento-tile--lg {
	width: 100%;
	flex: 3 1 0;
	height: auto;
}

.sp-hero-home__bento-row {
	display: flex;
	gap: clamp(8px, 1vw, 14px);
	flex: 2 1 0;
	min-height: 0;
	width: 100%;
}

.sp-hero-home__bento-tile--sm {
	flex: 1 1 0;
	height: 100%;
	min-height: 0;
	min-width: 0;
}

/* Single-image variant — imageMode: "single" on the hero-home block.
   render.php only outputs the lg tile, so there's no row to hide. lg
   naturally fills the whole flex column. */
.sp-hero-home--single .sp-hero-home__bento-tile--lg {
	flex: 1 1 100%;
}

/* Mobile + iPad (≤1024px): drop the SM row entirely and let the large tile
   fill the bento area alone. Matches the client's preference and sidesteps
   any residual Safari bento layout quirks at narrow widths.               */
@media (max-width: 1024px) {
	.sp-hero-home__bento-row {
		display: none !important;
	}
	.sp-hero-home__bento-tile--lg {
		flex: 1 1 100%;
	}
}

/* Desktop-only: bento sits in the right column of the 2-col hero grid and
   stretches to full row height. Scoped to min-width:901px so the mobile
   @900 rule below can move the bento into row 2 without fighting specificity. */
@media (min-width: 901px) {
	.sp-hero-home > .sp-hero-home__bento {
		grid-column: 2;
		min-height: 100%;
		align-self: stretch;
	}
}

.sp-hero-home__icon {
	bottom: clamp(-24px, -1.5vw, -8px);
	left: clamp(8px, 2vw, 32px);
	color: var(--color-bg);
	width: clamp(200px, 26vw, 340px);
	height: clamp(200px, 26vw, 340px);
}

/* Hairline corner mark — kept from earlier version, repositioned for the
   right-column photo area now that the photo is unscrimmed.
   R4 Move U: draws in from 0 length to full 40px on initial page load over
   1.2s (after the hero text reveal completes around 1.5s).                   */
.sp-hero-home::before {
	content: '';
	position: absolute;
	top: clamp(96px, 8vw, 128px);
	right: clamp(16px, 2vw, 32px);
	width: 40px;
	height: 40px;
	border-top: 1px solid rgba(247, 247, 241, 0.5);
	border-right: 1px solid rgba(247, 247, 241, 0.5);
	pointer-events: none;
	z-index: 3;
}

@media (prefers-reduced-motion: no-preference) {
	.sp-hero-home::before {
		animation: sp-hero-bracket-draw 1200ms cubic-bezier(0.22, 1, 0.36, 1) 1400ms both;
	}
}

@keyframes sp-hero-bracket-draw {
	from {
		width: 0;
		height: 0;
		opacity: 0;
	}
	30% { opacity: 0.5; }
	to {
		width: 40px;
		height: 40px;
		opacity: 1;
	}
}

/* R4 Move U — subtle "Scroll" hint at hero bottom, in the dark column. */
.sp-hero-home__eyebrow {
	color: var(--color-accent);
	margin-bottom: clamp(20px, 2.5vw, 40px);
}

/* Hero text staggered intro reveal (R4 Move R).
   Each element fades and slides up with a 120ms step. Total ~960ms.
   Cubic-bezier ease-out-quart matches the rest of the site's motion lexicon.
   prefers-reduced-motion: all elements appear at their final positions
   without animation.                                                          */
@media (prefers-reduced-motion: no-preference) {
	.sp-hero-home__eyebrow,
	.sp-hero-home__headline,
	.sp-hero-home__subheadline,
	.sp-hero-home__ctas {
		opacity: 0;
		transform: translateY(20px);
		animation: sp-hero-intro 640ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.sp-hero-home__eyebrow      { animation-delay: 360ms; }
	.sp-hero-home__headline     { animation-delay: 480ms; }
	.sp-hero-home__subheadline  { animation-delay: 720ms; }
	.sp-hero-home__ctas         { animation-delay: 920ms; }
}

@keyframes sp-hero-intro {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sp-hero-home__headline {
	font-family: var(--wp--preset--font-family--fraunces);
	/* Headline was clamp(30px, 6vw, 92px) — at 1440px viewport that resolved to
	   ~86px, which is too large for the new (longer) client headline
	   "Lightweight structural panels with a reclaimed cardboard core." Drop
	   the max to ~72px so words like "structural" and "panels" fit on the same
	   line at desktop without breaking. Phone @media below overrides further. */
	font-size: clamp(30px, 5.2vw, 76px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--color-bg);
	margin: 0;
	font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 400;
	/* Allow long words to wrap rather than overflow, but NEVER hyphenate on
	   desktop (looked like "pan-els" / "card-board" with the new copy). The
	   phone-only @media query re-enables hyphens:auto as a last resort. */
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: manual;
	-webkit-hyphens: manual;
}

.sp-hero-home__headline em {
	font-style: italic;
	font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 400;
	color: var(--color-accent);
	font-weight: 400;
}

.sp-hero-home__subheadline {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(15px, 1.5vw, 22px);
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.5;
	color: rgba(247, 247, 241, 0.78);
	max-width: 52ch;
	margin: clamp(20px, 2vw, 32px) 0 clamp(32px, 4vw, 56px) 0;
	overflow-wrap: break-word;
}

.sp-hero-home__subheadline strong {
	color: var(--color-bg);
	font-weight: 600;
}

.sp-hero-home__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
}

/* Hero CTAs on dark — invert the monochrome system: cream-on-ink default,
   inverts to ink-on-cream on hover.                                          */
.sp-hero-home__ctas .wp-element-button {
	background: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-bg);
}

@media (prefers-reduced-motion: no-preference) {
	.sp-hero-home__ctas .wp-element-button {
		transition:
			background 200ms cubic-bezier(0.22, 1, 0.36, 1),
			color 200ms cubic-bezier(0.22, 1, 0.36, 1),
			border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}

.sp-hero-home__ctas .wp-element-button:hover,
.sp-hero-home__ctas .wp-element-button:focus-visible {
	background: transparent;
	color: var(--color-bg);
	border-color: var(--color-bg);
}

/* R4 Move S — primary CTA arrow slide on hover.
   Replace the literal "→" character in the button label with a styled
   inline-flex pseudo-element so the arrow can transition independently.
   The button still ships the visible character for no-JS / no-CSS fallback;
   CSS hides the literal arrow and shows the pseudo on hover-capable devices. */
.sp-hero-home__ctas .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sp-hero-home__ctas .wp-element-button::after {
	content: '→';
	display: inline-block;
	transform: translateX(0);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
	font-weight: 400;
}

/* Only the PRIMARY CTA (first child) gets the arrow — outline button stays
   text-only. Native core/button puts the is-style-outline class on the
   .wp-block-button WRAPPER, so the exclusion targets the wrapper, not the <a>. */
.sp-hero-home__ctas .wp-block-button:not(.is-style-outline) .wp-element-button::after {
	content: '→';
}

.sp-hero-home__ctas .wp-block-button.is-style-outline .wp-element-button::after {
	content: '';
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.sp-hero-home__ctas .wp-element-button:hover::after,
	.sp-hero-home__ctas .wp-element-button:focus-visible::after {
		transform: translateX(6px);
	}
}

.sp-hero-home__ctas .is-style-outline.wp-element-button,
.sp-hero-home__ctas a.is-style-outline {
	background: transparent;
	color: var(--color-bg);
	border: 1px solid rgba(247, 247, 241, 0.5);
}

.sp-hero-home__ctas .is-style-outline.wp-element-button:hover,
.sp-hero-home__ctas a.is-style-outline:hover {
	background: var(--color-bg);
	color: var(--color-text);
	border-color: var(--color-bg);
}

/* Remove the cover-block's dim span — we own the background entirely.       */
.sp-hero-home > .wp-block-cover__background {
	display: none;
}

.sp-hero-home .wp-block-cover__inner-container {
	max-width: var(--layout-content-size);
	margin-inline: auto;
	padding-inline: var(--sp-2xl);
	padding-block: var(--sp-4xl);
	width: 100%;
}

/* Hairline corner mark — subtle bracket in top-right of hero, like a
   technical drawing reference mark.                                            */
.sp-hero-home::before {
	content: '';
	position: absolute;
	top: var(--sp-xl);
	right: var(--sp-xl);
	width: 32px;
	height: 32px;
	border-top: 1px solid rgba(247, 247, 241, 0.4);
	border-right: 1px solid rgba(247, 247, 241, 0.4);
	pointer-events: none;
}

/* Eyebrow label — small, uppercase, tracked.                                  */
.sp-hero-home__eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
	color: var(--color-accent);
	margin: 0 0 var(--sp-xl) 0;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-sm);
}

.sp-hero-home__eyebrow::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--color-accent);
	display: inline-block;
}

.sp-hero-home__headline {
	color: var(--color-bg) !important;
	/* Was max-width:18ch — too tight for the new longer client headline
	   ("Lightweight structural panels with a reclaimed cardboard core."). At
	   28ch the headline fills its column without artificial hard-wrap. */
	max-width: 28ch;
	margin: 0;
}

/* Phone — tighten headline so it never overflows the hero card. The default
   clamp() above bottoms at 30px; below ~360px we want it smaller still, and
   we drop max-width so it fills the available width before wrapping. */
@media (max-width: 480px) {
	.sp-hero-home__headline {
		font-size: clamp(26px, 8vw, 38px);
		max-width: none;
		line-height: 1.05;
		/* Phone-only — allow hyphenation as a last resort for very long words on
		   narrow viewports. Desktop keeps natural word-boundary wrapping. */
		hyphens: auto;
	}
	.sp-hero-home__subheadline {
		font-size: 15px;
		max-width: none;
	}
	.sp-hero-home__copy {
		padding: 32px 20px 36px !important;
	}
}

.sp-hero-home__subheadline {
	color: rgba(247, 247, 241, 0.86);
	max-width: 56ch;
	font-weight: 400;
	line-height: 1.5;
}

.sp-hero-home__subheadline strong {
	color: var(--color-bg);
	font-weight: 600;
}

.sp-hero-home__ctas {
	gap: var(--sp-md) !important;
}

.sp-hero-home__ctas .wp-block-button__link {
	font-size: var(--wp--preset--font-size--base);
	padding-block: var(--sp-md);
	padding-inline: var(--sp-xl);
	font-weight: 500;
}

/* Secondary outline button — light border on dark hero.                       */
.sp-hero-home__ctas .is-style-outline .wp-block-button__link {
	color: var(--color-bg);
	border: 1px solid rgba(247, 247, 241, 0.6);
	background: transparent;
}

.sp-hero-home__ctas .is-style-outline .wp-block-button__link:hover,
.sp-hero-home__ctas .is-style-outline .wp-block-button__link:focus-visible {
	border-color: var(--color-bg);
	background: rgba(247, 247, 241, 0.08);
}

@media (max-width: 900px) {
	/* Mobile: single column. Copy on top, bento triptych below at a 4:3 aspect
	   ratio so the three tiles keep their relative proportions but the hero
	   never overshoots the viewport.                                         */
	.sp-hero-home {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		min-height: auto;
	}
	/* Header-to-hero gap on mobile is now handled by WP's own block-gap
	   between <main> and the preceding template-part (restored by the
	   --wp--preset--spacing--2xl var shim in global.css). The explicit
	   padding-top that used to live here was stacking on top of that gap
	   and pushing the hero too far from the nav. Removed 2026-07-05.       */
	.sp-hero-home::after {
		display: none;
	}
	.sp-hero-home__copy {
		grid-column: 1;
		grid-row: 1;
		padding: clamp(40px, 8vw, 64px) clamp(20px, 5vw, 32px);
		max-width: none;
	}
	.sp-hero-home__bento {
		grid-column: 1;
		grid-row: 2;
		aspect-ratio: 4 / 3;
		padding: clamp(10px, 2.5vw, 16px);
	}
	.sp-hero-home::before {
		display: none;
	}
	.sp-hero-home__icon {
		width: clamp(140px, 28vw, 220px);
		height: clamp(140px, 28vw, 220px);
		bottom: -16px;
		left: 8px;
	}
}

/* Very narrow phones — stack the 3 bento tiles vertically as a single
   column so individual tiles stay readable rather than getting cropped.    */
@media (max-width: 480px) {
	.sp-hero-home__bento {
		aspect-ratio: auto;
		grid-template-columns: 1fr;
		grid-template-rows: 4fr 3fr 3fr;
		min-height: 380px;
	}
	.sp-hero-home__bento-tile--lg {
		grid-column: 1;
		grid-row: 1;
	}
	.sp-hero-home__bento-tile--sm:nth-of-type(2) {
		grid-column: 1;
		grid-row: 2;
	}
	.sp-hero-home__bento-tile--sm:nth-of-type(3) {
		grid-column: 1;
		grid-row: 3;
	}
}

/* =============================================================================
   Audience Split — Move 3 vertical mirror + chapter 03
   Left panel: image TOP / copy BOTTOM. Right panel: copy TOP / image BOTTOM.
   Right column margin-top: 88px so the two panels are physically offset.
   Chapter numeral 03 sits in the LEFT GUTTER.
   ============================================================================= */

.sp-audience-split {
	padding-block: clamp(96px, 11vw, 160px) !important;
	padding-inline: clamp(24px, 4vw, 64px);
	position: relative;
	overflow: hidden;
	max-width: var(--layout-wide-size);
	margin-inline: auto !important;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
	background: var(--color-bg);
}

.sp-audience-split::before {
	content: none;
	position: absolute;
	top: 8%;
	left: clamp(-32px, -1.5vw, -8px);
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 300;
	font-variation-settings: 'opsz' 144, 'SOFT' 70, 'wght' 300;
	font-size: clamp(220px, 26vw, 380px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--color-accent);
	opacity: 0.1;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* The audience-split and testimonial-row section blocks render core/columns
   markup, but as custom blocks they don't pull in the core columns stylesheet,
   so .wp-block-columns has no flex. Supply the same layout core/columns would:
   flex with equal columns above 782px, stacked below. */
.sp-audience-split .wp-block-columns,
.sp-testimonial-row .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
}

.sp-audience-split .wp-block-column,
.sp-testimonial-row .wp-block-column {
	flex-grow: 1;
	flex-basis: 100%;
	min-width: 0;
}

@media (min-width: 782px) {
	.sp-audience-split .wp-block-columns,
	.sp-testimonial-row .wp-block-columns {
		flex-wrap: nowrap;
	}
	.sp-audience-split .wp-block-column,
	.sp-testimonial-row .wp-block-column {
		flex-basis: 0;
	}
}

.sp-audience-split .wp-block-columns {
	margin: 0 auto;
	max-width: 1320px;
	gap: clamp(40px, 5vw, 96px) !important;
	position: relative;
	z-index: 1;
	align-items: start;
}

/* Strip the per-card chrome — audience-split is editorial, not cards.         */
.sp-audience-split .sp-audience-split__panel {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	transform: none !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(24px, 3vw, 48px) !important;
}

/* Right panel offset down for the asymmetric mirror.                          */
.sp-audience-split .sp-audience-split__panel:last-of-type {
	margin-top: clamp(48px, 6vw, 120px) !important;
	flex-direction: column-reverse !important;
}

@media (max-width: 781px) {
	.sp-audience-split .sp-audience-split__panel:last-of-type {
		margin-top: 0 !important;
		flex-direction: column !important;
	}
}

.sp-audience-split__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-surface);
	position: relative;
	width: 100%;
	border-radius: var(--radius-lg, 20px);
}

.sp-audience-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.85) contrast(1.02);
}

/* The wp:html figure inside the panel is its own block-level node; the
   panel above is flex-column so order is image then text by default; the
   second panel uses flex-direction: column-reverse to swap.                  */

.sp-audience-split__eyebrow {
	font-size: var(--wp--preset--font-size--xs) !important;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
	color: var(--color-accent);
	margin: 0 0 var(--sp-md) 0 !important;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-sm);
}

.sp-audience-split__eyebrow::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--color-accent);
	display: inline-block;
}

.sp-audience-split__heading {
	font-family: var(--wp--preset--font-family--fraunces) !important;
	font-size: clamp(36px, 4vw, 64px) !important;
	font-weight: 400 !important;
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	letter-spacing: -0.02em !important;
	line-height: 1.0 !important;
	margin: 0 0 var(--sp-md) 0 !important;
	max-width: 16ch;
	color: var(--color-text);
}

.sp-audience-split__body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(16px, 1.3vw, 19px) !important;
	font-weight: 400;
	line-height: 1.55 !important;
	max-width: 44ch;
	margin: 0 0 var(--sp-lg) 0 !important;
	color: var(--color-text-muted);
}

/* Wrapper for non-image content within a panel (eyebrow + h2 + body + cta).   */
.sp-audience-split__panel > .sp-eyebrow,
.sp-audience-split__panel > h2,
.sp-audience-split__panel > p,
.sp-audience-split__panel > .wp-block-buttons {
	margin: 0 !important;
}

.sp-audience-split__panel > .wp-block-buttons {
	margin-block-start: var(--sp-md) !important;
}

/* Placeholder tag — small ribbon below figure to flag Phase 3 imagery.       */
.sp-placeholder-tag {
	font-size: var(--wp--preset--font-size--xs);
	font-style: italic;
	color: var(--color-text-muted);
	background: var(--color-surface);
	display: inline-block;
	padding: 2px 6px;
	position: absolute;
	top: var(--sp-sm);
	left: var(--sp-sm);
	border: 1px solid var(--color-border);
	letter-spacing: 0.02em;
}

/* =============================================================================
   Testimonial Row — Move 6 chapter numeral 06 + Fraunces heading
   ============================================================================= */

.sp-testimonial-row {
	padding-block: clamp(48px, 6vw, 80px) !important;
	padding-inline: clamp(24px, 4vw, 64px);
	background: transparent;
	position: relative;
	overflow: hidden;
	max-width: var(--layout-wide-size);
	margin-inline: auto !important;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
}

.sp-testimonial-row::before {
	content: none;
	position: absolute;
	top: 10%;
	left: clamp(-32px, -1.5vw, -8px);
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 300;
	font-variation-settings: 'opsz' 144, 'SOFT' 70, 'wght' 300;
	font-size: clamp(220px, 26vw, 380px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--color-accent);
	opacity: 0.1;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.sp-testimonial-row > * {
	position: relative;
	z-index: 1;
}

.sp-testimonial-row__heading {
	font-family: var(--wp--preset--font-family--fraunces) !important;
	font-size: clamp(40px, 5vw, 80px) !important;
	font-weight: 400 !important;
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	letter-spacing: -0.02em !important;
	line-height: 1.0 !important;
	margin: 0 0 clamp(24px, 3vw, 40px) 0 !important;
	max-width: 18ch;
	color: var(--color-text) !important;
}

/* Eyebrow above the testimonial heading.                                       */
.sp-testimonial-row__heading::before {
	content: '—— Trade voices';
	display: block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 500;
	color: var(--color-accent);
	margin-bottom: var(--sp-lg);
	letter-spacing: 0.18em;
}

/* Testimonial grid — auto-fit so 3 fit desktop-wide, 4+ wrap to new rows,
   2 stack on tablet, 1 per row on mobile. Client can add unlimited
   testimonials via the block editor. */
.sp-testimonial-row .wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: 0 !important;
	border-top: 1px solid var(--color-border);
}

.sp-testimonial-row .sp-testimonial-card {
	background: transparent !important;
	border: 0 !important;
	border-right: 1px solid var(--color-border) !important;
	border-bottom: 1px solid var(--color-border) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	transform: none !important;
	padding: clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 32px) !important;
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
	min-height: 0;
}

.sp-testimonial-row .sp-testimonial-card:last-child {
	border-right: 0 !important;
}

@media (max-width: 781px) {
	.sp-testimonial-row .sp-testimonial-card {
		border-right: 0 !important;
	}
}

.sp-testimonial-card__quote {
	font-size: var(--wp--preset--font-size--md) !important;
	font-style: normal !important;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text);
	margin: 0;
	position: relative;
	padding-left: var(--sp-md);
}

.sp-testimonial-card__quote::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 2px;
	height: calc(100% - 0.6em);
	background: var(--color-accent);
}

.sp-testimonial-card__author {
	font-size: var(--wp--preset--font-size--sm) !important;
	color: var(--color-text-muted);
	font-weight: 500;
	margin: auto 0 0 var(--sp-md);
	letter-spacing: 0.02em;
}

/* =============================================================================
   Editorial Quote — Move 5 full-bleed pull-quote spread + chapter 05
   ============================================================================= */

.sp-editorial-quote {
	background: var(--color-text);
	color: var(--color-bg);
	padding-block: clamp(128px, 14vw, 224px);
	padding-inline: clamp(24px, 4vw, 64px);
	position: relative;
	overflow: hidden;
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
}

.sp-editorial-quote__icon {
	bottom: -8%;
	right: clamp(-24px, -1vw, -8px);
	color: var(--color-bg);
	width: clamp(240px, 28vw, 400px);
	height: clamp(240px, 28vw, 400px);
}

.sp-editorial-quote__inner {
	max-width: 1320px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 64px);
}

.sp-editorial-quote__eyebrow {
	color: var(--color-accent);
	margin: 0;
}

.sp-editorial-quote__eyebrow::before {
	color: var(--color-accent);
}

.sp-editorial-quote__quote {
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 400;
	font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 400;
	font-size: clamp(40px, 5.6vw, 96px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--color-bg);
	margin: 0;
	max-width: 22ch;
}

.sp-editorial-quote__quote p {
	margin: 0;
}

/* Word-level italic emphasis inside the pull-quote. Reproduces the old
   .font-display-italic SOFT-30 axis on the bare <em> so the quote can be a
   native, editable paragraph without carrying a class on the <em>. */
.sp-editorial-quote__quote em {
	font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 400;
}

.sp-editorial-quote__quote::before {
	content: open-quote;
	color: var(--color-accent);
	font-feature-settings: 'liga';
}

.sp-editorial-quote__quote::after {
	content: close-quote;
	color: var(--color-accent);
}

.sp-editorial-quote__cite {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-inline-start: auto;
	text-align: right;
	max-width: 60ch;
}

.sp-editorial-quote__cite-name {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-bg);
}

.sp-editorial-quote__cite-role {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(247, 247, 241, 0.6);
}

@media (max-width: 781px) {
	.sp-editorial-quote__cite {
		margin-inline-start: 0;
		text-align: left;
	}
}

/* =============================================================================
   Logo Bar — "Companies We've Collaborated With" (v0.2, per client 2026-06-29)
   Heading + subtitle over a responsive monochrome logo grid.
   ============================================================================= */

.sp-logo-bar {
	display: block !important;
	padding-block: clamp(40px, 6vw, 80px) !important;
	background: transparent;
	position: relative;
	z-index: 1;
	max-width: var(--layout-wide-size);
	margin-inline: auto !important;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
}

.sp-logo-bar__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 48px);
}

.sp-logo-bar__head {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 0.8vw, 12px);
	max-width: 640px;
	margin-inline: auto;
}

.sp-logo-bar__heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 400;
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	color: var(--color-text);
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 0;
}

.sp-logo-bar__heading em {
	font-style: italic;
	color: var(--color-accent);
}

.sp-logo-bar__subtitle {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(15px, 1.2vw, 17px);
	color: var(--color-text-muted);
	line-height: 1.5;
	margin: 0;
}

.sp-logo-bar__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(20px, 3vw, 48px) clamp(16px, 2.5vw, 40px);
	align-items: center;
	justify-items: center;
}

@media (max-width: 900px) {
	.sp-logo-bar__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.sp-logo-bar__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: clamp(16px, 4vw, 24px);
	}
}

.sp-logo-bar__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 64px;
}

.sp-logo-bar__logo {
	max-height: 56px;
	max-width: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1) contrast(1.05);
	opacity: 0.72;
	mix-blend-mode: multiply;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.sp-logo-bar__cell:hover .sp-logo-bar__logo,
.sp-logo-bar__cell:focus-within .sp-logo-bar__logo {
	filter: grayscale(0);
	opacity: 1;
}

.sp-logo-bar__logo-text {
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(18px, 1.6vw, 22px);
	color: var(--color-text-muted);
	letter-spacing: -0.01em;
	opacity: 0.72;
}

/* =============================================================================
   Quote CTA — final dark chapter + numeral 07 (Move 6 / chapter rhythm)
   ============================================================================= */

.sp-quote-cta {
	background: var(--color-text) !important;
	padding-block: clamp(128px, 14vw, 224px) !important;
	color: var(--color-bg);
	position: relative;
	overflow: hidden;
	max-width: var(--layout-wide-size);
	margin-inline: auto !important;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
	margin-bottom: var(--layout-frame-pad);
}

.sp-quote-cta::before {
	content: none;
	position: absolute;
	top: 12%;
	left: clamp(-24px, -1vw, -8px);
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 300;
	font-variation-settings: 'opsz' 144, 'SOFT' 70, 'wght' 300;
	font-size: clamp(220px, 26vw, 380px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--color-bg);
	opacity: 0.06;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.sp-quote-cta__inner {
	max-width: 720px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

/* Eyebrow before heading.                                                       */
.sp-quote-cta__heading::before {
	content: '—— Next step';
	display: block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 500;
	color: var(--color-accent);
	margin-bottom: var(--sp-lg);
}

.sp-quote-cta__heading {
	font-family: var(--wp--preset--font-family--fraunces) !important;
	font-size: clamp(48px, 6vw, 96px) !important;
	font-weight: 400 !important;
	font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 400;
	letter-spacing: -0.025em !important;
	line-height: 1.0 !important;
	color: var(--color-bg) !important;
	margin: 0 0 var(--sp-lg) 0;
	max-width: 14ch;
}

.sp-quote-cta__body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(17px, 1.4vw, 20px) !important;
	color: rgba(247, 247, 241, 0.78) !important;
	line-height: 1.55;
	max-width: 52ch;
	margin: 0 auto var(--sp-2xl) auto;
}

.sp-quote-cta__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-md) !important;
}

.sp-quote-cta__ctas .wp-block-button__link {
	font-size: var(--wp--preset--font-size--base);
	padding-block: var(--sp-md);
	padding-inline: var(--sp-xl);
	font-weight: 500;
	background: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-bg);
}

/* Secondary outline button on dark — light border.                            */
.sp-quote-cta__ctas .is-style-outline .wp-block-button__link {
	color: var(--color-bg);
	border: 1px solid rgba(247, 247, 241, 0.5);
	background: transparent;
}

.sp-quote-cta__ctas .is-style-outline .wp-block-button__link:hover,
.sp-quote-cta__ctas .is-style-outline .wp-block-button__link:focus-visible {
	background: var(--color-bg);
	color: var(--color-text);
	border-color: var(--color-bg);
}

/* =============================================================================
   R3 Move J — Process Flow stacking stages
   Four cards stick at progressive top offsets so they stack as user scrolls.
   Each stage stays visible behind the next one. Engineering-grade storytelling.
   ============================================================================= */

.sp-process-flow {
	background: var(--color-bg);
	padding-block: clamp(96px, 12vw, 192px);
	padding-inline: clamp(24px, 4vw, 64px);
	position: relative;
	overflow: visible;
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
}

.sp-process-flow__icon {
	top: 4%;
	right: clamp(-16px, -1vw, -4px);
	width: clamp(200px, 24vw, 340px);
	height: clamp(200px, 24vw, 340px);
}

.sp-process-flow__head {
	max-width: 1320px;
	margin: 0 auto clamp(56px, 7vw, 112px) auto;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-md);
}

.sp-process-flow__eyebrow {
	margin: 0;
}

.sp-process-flow__heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(40px, 5vw, 80px);
	font-weight: 400;
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	color: var(--color-text);
	margin: 0;
	letter-spacing: -0.025em;
	line-height: 1.0;
	max-width: 20ch;
}

.sp-process-flow__heading em {
	font-style: italic;
	font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 400;
	color: var(--color-accent);
}

.sp-process-flow__intro {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(17px, 1.4vw, 20px);
	color: var(--color-text-muted);
	line-height: 1.55;
	max-width: 56ch;
	margin: 0;
}

.sp-process-flow__stages {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 48px);
	position: relative;
	z-index: 1;
}

.sp-process-flow__stage {
	position: sticky;
	min-height: clamp(420px, 64vh, 580px);
	border-radius: var(--radius-lg, 20px);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(28, 26, 23, 0.04);
}

/* Progressive top offsets so each stage stacks slightly below the previous. */
.sp-process-flow__stage--1 { top: clamp(72px, 8vh, 96px); }
.sp-process-flow__stage--2 { top: clamp(92px, 9vh, 116px); background: var(--color-bg); }
.sp-process-flow__stage--3 { top: clamp(112px, 10vh, 136px); background: var(--color-text); color: var(--color-bg); }
.sp-process-flow__stage--4 { top: clamp(132px, 11vh, 156px); background: var(--color-surface); }

/* Mobile: suppress sticky stack — cards flow naturally.                       */
@media (max-width: 900px) {
	.sp-process-flow__stage {
		position: relative;
		top: auto !important;
		min-height: auto;
	}
}

.sp-process-flow__stage-inner {
	padding: clamp(40px, 5vw, 80px);
	display: grid;
	grid-template-columns: 22fr 38fr 40fr;
	gap: clamp(28px, 3.5vw, 56px);
	align-items: start;
	min-height: inherit;
}

@media (max-width: 760px) {
	.sp-process-flow__stage-inner {
		grid-template-columns: 1fr;
		gap: clamp(20px, 3vw, 32px);
		padding: clamp(28px, 4vw, 48px);
	}
}

/* Stage image — third grid column on desktop, full-width on mobile.            */
.sp-process-flow__stage-image {
	margin: 0;
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
	align-self: stretch;
	min-height: 280px;
	background: var(--color-border);
}

.sp-process-flow__stage-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 760px) {
	.sp-process-flow__stage-image {
		min-height: 220px;
		aspect-ratio: 3 / 2;
	}
}

.sp-process-flow__stage-meta {
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
	position: relative;
}

.sp-process-flow__stage-num {
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 300;
	font-variation-settings: 'opsz' 144, 'SOFT' 70, 'wght' 300;
	font-size: clamp(96px, 11vw, 168px);
	color: var(--color-accent);
	letter-spacing: -0.04em;
	line-height: 0.88;
}

.sp-process-flow__stage--3 .sp-process-flow__stage-num,
.sp-process-flow__stage--3 .sp-process-flow__stage-eyebrow {
	color: var(--color-accent);
}

.sp-process-flow__stage--3 .sp-process-flow__stage-icon {
	color: var(--color-accent);
}

.sp-process-flow__stage-eyebrow {
	margin: 0 !important;
}

.sp-process-flow__stage-icon {
	color: var(--color-accent);
	opacity: 0.85;
	margin-top: var(--sp-sm);
}

.sp-process-flow__stage-copy {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.5vw, 36px);
	max-width: 64ch;
}

.sp-process-flow__stage-headline {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 400;
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	letter-spacing: -0.02em;
	line-height: 1.02;
	margin: 0;
	color: inherit;
}

.sp-process-flow__stage-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
	margin: 0;
	color: inherit;
	opacity: 0.92;
	max-width: 60ch;
}

.sp-process-flow__stage--3 .sp-process-flow__stage-body {
	opacity: 0.82;
}

.sp-process-flow__stage-stat {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: var(--sp-lg);
	margin: 0;
	padding-top: clamp(16px, 2vw, 24px);
	border-top: 1px solid var(--color-border);
}

.sp-process-flow__stage--3 .sp-process-flow__stage-stat {
	border-top-color: rgba(247, 247, 241, 0.18);
}

.sp-process-flow__stage-stat dt {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 400;
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	letter-spacing: -0.02em;
	line-height: 1;
	color: inherit;
}

.sp-process-flow__stage-stat dd {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	color: inherit;
	opacity: 0.78;
}

.sp-process-flow__stage-stat dd span {
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	font-size: 14px;
	opacity: 0.85;
}

/* =============================================================================
   R2 Move E — Specified To Make card-stack (CartonLab-inspired)
   ============================================================================= */

.sp-spec-stack {
	/* Transparent so the body's cardboard texture flows through behind the
	   section — cards keep their own solid backgrounds via the figure photos. */
	background: transparent;
	padding-block: clamp(96px, 12vw, 192px);
	padding-inline: clamp(24px, 4vw, 64px);
	position: relative;
	overflow: hidden;
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
}

.sp-spec-stack__chapter {
	position: absolute;
	top: 8%;
	left: clamp(-32px, -1.5vw, -8px);
	font-size: clamp(220px, 26vw, 380px);
	opacity: 0.1;
	z-index: 0;
}

.sp-spec-stack__inner {
	max-width: 1440px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 38fr 62fr;
	gap: clamp(40px, 5vw, 96px);
	align-items: center;
	position: relative;
	z-index: 1;
}

@media (max-width: 900px) {
	.sp-spec-stack__inner {
		grid-template-columns: 1fr;
		gap: clamp(40px, 6vw, 80px);
	}
}

.sp-spec-stack__copy {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.5vw, 40px);
}

.sp-spec-stack__eyebrow {
	margin: 0;
}

.sp-spec-stack__heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(40px, 5vw, 80px);
	font-weight: 400;
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	color: var(--color-text);
	margin: 0;
	letter-spacing: -0.025em;
	line-height: 1.0;
}

.sp-spec-stack__heading em {
	font-style: italic;
	font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 400;
	color: var(--color-accent);
}

.sp-spec-stack__body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
	color: var(--color-text-muted);
	max-width: 42ch;
	margin: 0;
}

.sp-spec-stack__cta {
	align-self: flex-start;
	margin-top: clamp(8px, 1vw, 24px);
}

/* Unequal bento grid — 3 columns x 2 rows, two cards span 2 cols each on
   alternating rows. Reads as a considered editorial layout, not a regular
   gallery. CartonLab-style proportions.                                      */
.sp-spec-stack__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, minmax(220px, 1fr));
	gap: clamp(16px, 2vw, 28px);
	position: relative;
	min-height: clamp(480px, 60vh, 720px);
}

/* Card layout — true unequal bento.                                          */
.sp-spec-stack__card--1 {
	grid-column: 1 / 3;
	grid-row: 1;
}
.sp-spec-stack__card--2 {
	grid-column: 3;
	grid-row: 1 / 3;
}
.sp-spec-stack__card--3 {
	grid-column: 1;
	grid-row: 2;
}
.sp-spec-stack__card--4 {
	grid-column: 2;
	grid-row: 2;
}

@media (max-width: 760px) {
	.sp-spec-stack__cards {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, auto);
		min-height: auto;
	}
	.sp-spec-stack__card--1,
	.sp-spec-stack__card--2,
	.sp-spec-stack__card--3,
	.sp-spec-stack__card--4 {
		grid-column: 1;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}
}

.sp-spec-stack__card {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--color-surface);
	box-shadow:
		0 1px 2px rgba(28, 26, 23, 0.04),
		0 12px 32px rgba(28, 26, 23, 0.08);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg, 20px);
}

@media (prefers-reduced-motion: no-preference) {
	.sp-spec-stack__card {
		transition:
			transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
			z-index 0ms 400ms;
	}
}

/* Bento grid layout means no rotations — the unequal proportions carry the
   considered feel. Slight hover-lift remains.                                */

/* Hover: card lifts subtly, deeper shadow.                                    */
.sp-spec-stack__card:hover,
.sp-spec-stack__card:focus-within {
	transform: translateY(-6px);
	z-index: 5;
	box-shadow:
		0 2px 6px rgba(28, 26, 23, 0.06),
		0 24px 56px rgba(28, 26, 23, 0.14);
	transition:
		transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
		z-index 0ms;
}

.sp-spec-stack__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-spec-stack__card figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: clamp(16px, 2vw, 28px);
	display: flex;
	align-items: baseline;
	gap: var(--sp-md);
	color: var(--color-bg);
	background: linear-gradient(
		180deg,
		rgba(28, 26, 23, 0) 0%,
		rgba(28, 26, 23, 0.72) 100%
	);
}

.sp-spec-stack__card-num {
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 300;
	font-variation-settings: 'opsz' 48, 'SOFT' 50, 'wght' 300;
	font-size: clamp(28px, 2.4vw, 40px);
	color: var(--color-accent);
	letter-spacing: -0.02em;
	line-height: 1;
}

.sp-spec-stack__card-label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(14px, 1.1vw, 17px);
	font-weight: 500;
	color: var(--color-bg);
	letter-spacing: -0.005em;
	line-height: 1.2;
}

/* =============================================================================
   R2 Move H — Framed section rhythm
   Bento framing replaces the previous bleed-through pattern. Each section is
   now an inset rounded rectangle separated by clean kraft-cream gutters.
   The cream paper bg shows BETWEEN sections rather than through them.
   ============================================================================= */

main > * + * {
	margin-top: var(--layout-frame-pad);
}

/* CMN block ships with surface bg in its plugin stylesheet — override here so
   the body cardboard texture flows through behind the partner grid.            */
.sp-circular-network {
	background: transparent !important;
}

/* Bright-yellow accent override for sections on a dark/ink background. Scopes
   --color-accent locally so every italic em, eyebrow, and chapter numeral
   that references the token automatically picks up the yellow without each
   element needing a one-off rule.                                              */
.sp-hero-home,
.sp-quote-cta,
.sp-sustainability-page__hero,
.sp-sustainability-page__closing {
	--color-accent: var(--color-accent-bright);
}

.sp-circular-network,
.sp-spec-stack,
.sp-audience-split,
.sp-applications-grid,
.sp-testimonial-row,
.sp-editorial-quote,
.sp-quote-cta,
.sp-logo-bar,
.sp-applications-page__hero,
.sp-applications-page__cases,
.sp-applications-page__closing,
.sp-about-page__hero,
.sp-about-page__origin,
.sp-about-page__stats,
.sp-about-page__team,
.sp-about-page__mission,
.sp-about-page__location,
.sp-about-page__closing,
.sp-sustainability-page__hero,
.sp-sustainability-page__stats,
.sp-sustainability-page__takeback,
.sp-sustainability-page__methodology,
.sp-sustainability-page__closing,
.sp-takeback-page__hero,
.sp-takeback-page__flow,
.sp-takeback-page__qualifies,
.sp-takeback-page__logistics,
.sp-takeback-page__register,
.sp-takeback-page__cta {
	position: relative;
	z-index: auto;
}

/* =============================================================================
   /applications/ page — scoped sections (hero band, sector case-study grid,
   closing dark CTA). Re-uses .sp-eyebrow, .sp-chapter-numeral, .font-display-italic
   and the global 20px bento radius via --radius-lg.
   ============================================================================= */

/* Hero band — compact (~480px) interior hero with chapter numeral mark.        */
.sp-applications-page__hero {
	background: var(--color-surface);
	padding-block: clamp(96px, 11vw, 152px);
	padding-inline: clamp(24px, 4vw, 64px);
	min-height: 480px;
	display: flex;
	align-items: center;
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
	overflow: hidden;
}

.sp-applications-page__hero-chapter {
	position: absolute;
	top: 6%;
	right: clamp(-24px, -1vw, -8px);
	font-size: clamp(180px, 22vw, 320px);
	opacity: 0.08;
	z-index: 0;
	line-height: 1;
	letter-spacing: -0.04em;
}

.sp-applications-page__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.5vw, 32px);
}

.sp-applications-page__hero-eyebrow {
	margin: 0;
}

.sp-applications-page__hero-headline {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(44px, 5.6vw, 88px);
	font-weight: 400;
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	color: var(--color-text);
	margin: 0;
	letter-spacing: -0.025em;
	line-height: 1.0;
	max-width: 18ch;
}

.sp-applications-page__hero-headline em {
	font-style: italic;
	font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 400;
	color: var(--color-accent);
}

.sp-applications-page__hero-lead {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.55;
	color: var(--color-text-muted);
	max-width: 58ch;
	margin: 0;
}

/* Sector case-study grid — bento radius, hover lift mirroring spec-stack.      */
.sp-applications-page__cases {
	background: var(--color-bg);
	padding-block: clamp(96px, 12vw, 160px);
	padding-inline: clamp(24px, 4vw, 64px);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
	overflow: hidden;
}

.sp-applications-page__cases-inner {
	max-width: 1320px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.sp-applications-page__cases-header {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.8vw, 24px);
	margin-bottom: clamp(48px, 6vw, 80px);
	max-width: 720px;
}

.sp-applications-page__cases-eyebrow {
	margin: 0;
}

.sp-applications-page__cases-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(36px, 4.4vw, 64px);
	font-weight: 400;
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	color: var(--color-text);
	margin: 0;
	letter-spacing: -0.02em;
	line-height: 1.02;
	max-width: 18ch;
}

.sp-applications-page__cases-heading em {
	font-style: italic;
	font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 400;
	color: var(--color-accent);
}

.sp-applications-page__cases-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.55;
	color: var(--color-text-muted);
	max-width: 52ch;
	margin: 0;
}

.sp-applications-page__cases-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2.4vw, 36px);
}

@media (max-width: 760px) {
	.sp-applications-page__cases-grid {
		grid-template-columns: 1fr;
	}
}

.sp-applications-page__case {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg, 20px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow:
		0 1px 2px rgba(28, 26, 23, 0.04),
		0 12px 32px rgba(28, 26, 23, 0.06);
}

@media (prefers-reduced-motion: no-preference) {
	.sp-applications-page__case {
		transition:
			transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}

.sp-applications-page__case:hover,
.sp-applications-page__case:focus-within {
	transform: translateY(-6px);
	box-shadow:
		0 2px 6px rgba(28, 26, 23, 0.06),
		0 24px 56px rgba(28, 26, 23, 0.14);
}

.sp-applications-page__case-media {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-bg);
}

.sp-applications-page__case-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-applications-page__case-body {
	padding: clamp(24px, 2.8vw, 40px);
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
	flex: 1;
}

.sp-applications-page__case-num {
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 300;
	font-variation-settings: 'opsz' 48, 'SOFT' 50, 'wght' 300;
	font-size: clamp(24px, 2vw, 32px);
	color: var(--color-accent);
	letter-spacing: -0.02em;
	line-height: 1;
}

.sp-applications-page__case-label {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(22px, 2vw, 30px);
	font-weight: 400;
	font-variation-settings: 'opsz' 48, 'SOFT' 30, 'wght' 400;
	color: var(--color-text);
	letter-spacing: -0.015em;
	line-height: 1.1;
	margin: 0;
}

.sp-applications-page__case-meta {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(14px, 1vw, 16px);
	color: var(--color-text-muted);
	line-height: 1.5;
	margin: 0;
	max-width: 36ch;
}

.sp-applications-page__case-cta {
	align-self: flex-start;
	margin-top: auto;
	padding-top: var(--sp-sm);
}

/* Closing dark CTA band — mirrors quote-cta surface treatment but distinct.   */
.sp-applications-page__closing {
	background: var(--color-text);
	color: var(--color-bg);
	padding-block: clamp(112px, 13vw, 192px);
	padding-inline: clamp(24px, 4vw, 64px);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
	margin-bottom: var(--layout-frame-pad);
	overflow: hidden;
	text-align: center;
}

.sp-applications-page__closing::before {
	content: 'AP';
	position: absolute;
	top: 10%;
	right: clamp(-24px, -1vw, -8px);
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 300;
	font-variation-settings: 'opsz' 144, 'SOFT' 70, 'wght' 300;
	font-size: clamp(220px, 26vw, 360px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--color-bg);
	opacity: 0.06;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.sp-applications-page__closing-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 2vw, 24px);
}

.sp-applications-page__closing-eyebrow {
	color: var(--color-accent);
	margin: 0;
}

.sp-applications-page__closing-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(44px, 5.6vw, 88px);
	font-weight: 400;
	font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 400;
	color: var(--color-bg);
	letter-spacing: -0.025em;
	line-height: 1.0;
	margin: 0;
	max-width: 16ch;
}

.sp-applications-page__closing-heading em {
	font-style: italic;
	font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 400;
	color: var(--color-accent);
}

.sp-applications-page__closing-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(17px, 1.4vw, 20px);
	color: rgba(247, 247, 241, 0.78);
	line-height: 1.55;
	max-width: 52ch;
	margin: 0 0 var(--sp-md) 0;
}

.sp-applications-page__closing-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
	justify-content: center;
}

.sp-applications-page__closing-primary.wp-element-button {
	background: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-bg);
	padding-block: var(--sp-md);
	padding-inline: var(--sp-xl);
	font-weight: 500;
}

.sp-applications-page__closing-secondary.wp-element-button {
	color: var(--color-bg);
	border: 1px solid rgba(247, 247, 241, 0.5);
	background: transparent;
	padding-block: var(--sp-md);
	padding-inline: var(--sp-xl);
	font-weight: 500;
}

.sp-applications-page__closing-secondary.wp-element-button:hover,
.sp-applications-page__closing-secondary.wp-element-button:focus-visible {
	background: var(--color-bg);
	color: var(--color-text);
	border-color: var(--color-bg);
}

/* =============================================================================
   /take-back/ page — scoped sections (hero band, 4-step flow, qualifies
   2-col, logistics 3-card, batch registration form, dark closing CTA).
   Re-uses .sp-eyebrow, .sp-chapter-numeral, .font-display-italic, .sp-card.
   Pattern: patterns/page-take-back.php
   Template: templates/page-take-back.html
   All rules scoped under .sp-takeback-page__* — no leakage to other pages.
   ============================================================================= */

/* Shared framed-section shell — matches bento rhythm used elsewhere on the
   site. Inset rounded rectangle, cream gutter visible between sections.      */
.sp-takeback-page__hero,
.sp-takeback-page__flow,
.sp-takeback-page__qualifies,
.sp-takeback-page__logistics,
.sp-takeback-page__register,
.sp-takeback-page__cta {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg, 20px);
	padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 64px);
	overflow: hidden;
}

@media (max-width: 600px) {
	.sp-takeback-page__hero,
	.sp-takeback-page__flow,
	.sp-takeback-page__qualifies,
	.sp-takeback-page__logistics,
	.sp-takeback-page__register,
	.sp-takeback-page__cta {
		border-radius: var(--radius-md, 12px);
		width: calc(100% - 2 * 12px);
		padding: clamp(40px, 8vw, 56px) var(--sp-lg);
	}
}

/* --- Hero — Phase 1 C5: dark ink-900 to bookend the dark closing CTA ----- */
.sp-takeback-page__hero {
	background: var(--color-text);
	color: var(--color-bg);
	min-height: 480px;
	display: flex;
	align-items: center;
	margin-top: var(--layout-frame-pad);
	position: relative;
}

.sp-takeback-page__hero .sp-eyebrow,
.sp-takeback-page__hero .sp-eyebrow::before {
	color: var(--color-accent);
}

.sp-takeback-page__hero-heading {
	color: var(--color-bg) !important;
}

.sp-takeback-page__hero-lead {
	color: rgba(247, 247, 241, 0.78) !important;
}

.sp-takeback-page__hero-chapter,
.sp-takeback-page__hero .sp-chapter-numeral {
	color: var(--color-bg);
	opacity: 0.08;
}

.sp-takeback-page__hero-chapter {
	position: absolute;
	top: 50%;
	right: clamp(24px, 5vw, 80px);
	transform: translateY(-50%);
	z-index: 0;
}

.sp-takeback-page__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.sp-takeback-page__hero-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(40px, 5vw, 72px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--color-text);
	margin: 0 0 var(--sp-lg) 0;
}

.sp-takeback-page__hero-heading em {
	color: var(--color-accent);
}

.sp-takeback-page__hero-lead {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.6;
	color: var(--color-text-muted);
	max-width: 60ch;
	margin: 0;
}

/* --- Flow (4-step horizontal with arrows) ---------------------------- */
.sp-takeback-page__flow {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}

.sp-takeback-page__flow-head {
	max-width: 760px;
	margin: 0 0 clamp(32px, 4vw, 56px) 0;
}

.sp-takeback-page__flow-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(32px, 3.8vw, 48px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
}

.sp-takeback-page__flow-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
	align-items: start;
	gap: var(--sp-lg);
}

.sp-takeback-page__step {
	padding: var(--sp-lg);
	background: var(--color-surface);
	border-radius: var(--radius-md, 12px);
	border: 1px solid var(--color-border);
}

.sp-takeback-page__step-num {
	display: block;
	font-size: clamp(36px, 3.2vw, 48px);
	font-weight: 300;
	font-variation-settings: 'opsz' 96, 'SOFT' 50, 'wght' 300;
	color: var(--color-accent);
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0 0 var(--sp-md) 0;
}

.sp-takeback-page__step-headline {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(20px, 1.7vw, 24px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 var(--sp-sm) 0;
	color: var(--color-text);
}

.sp-takeback-page__step-body {
	font-size: 15px;
	line-height: 1.55;
	color: var(--color-text-muted);
	margin: 0;
}

.sp-takeback-page__flow-arrow {
	width: 36px;
	height: 18px;
	color: var(--color-accent);
	align-self: center;
	margin-top: clamp(28px, 3vw, 44px);
	flex-shrink: 0;
}

/* Mobile — stack vertically and rotate arrows 90°. */
@media (max-width: 900px) {
	.sp-takeback-page__flow-grid {
		grid-template-columns: 1fr;
	}
	.sp-takeback-page__flow-arrow {
		transform: rotate(90deg);
		justify-self: center;
		margin: 0;
	}
}

/* --- Qualifies (Accepted / Excluded 2-card grid) --------------------- */
.sp-takeback-page__qualifies {
	background: var(--color-surface);
}

.sp-takeback-page__qualifies-head {
	max-width: 760px;
	margin: 0 0 clamp(32px, 4vw, 56px) 0;
}

.sp-takeback-page__qualifies-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(32px, 3.8vw, 48px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 var(--sp-md) 0;
}

.sp-takeback-page__qualifies-intro {
	font-size: 17px;
	line-height: 1.6;
	color: var(--color-text-muted);
	max-width: 60ch;
	margin: 0;
}

.sp-takeback-page__qualifies-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-xl);
}

@media (max-width: 720px) {
	.sp-takeback-page__qualifies-grid {
		grid-template-columns: 1fr;
	}
}

.sp-takeback-page__qualifies-card {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 3vw, 40px);
}

.sp-takeback-page__qualifies-card--excluded {
	background: var(--color-bg);
}

.sp-takeback-page__qualifies-card-eyebrow {
	margin-bottom: var(--sp-sm);
}

.sp-takeback-page__qualifies-card--excluded .sp-takeback-page__qualifies-card-eyebrow,
.sp-takeback-page__qualifies-card--excluded .sp-takeback-page__qualifies-card-eyebrow::before {
	color: var(--color-text-muted);
}

.sp-takeback-page__qualifies-card-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(22px, 1.9vw, 28px);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 var(--sp-md) 0;
	color: var(--color-text);
}

.sp-takeback-page__qualifies-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-takeback-page__qualifies-list li {
	padding: var(--sp-md) 0;
	border-top: 1px solid var(--color-border);
	font-size: 15px;
	line-height: 1.55;
	color: var(--color-text-muted);
}

.sp-takeback-page__qualifies-list li:first-child {
	border-top: 0;
	padding-top: 0;
}

.sp-takeback-page__qualifies-list strong {
	color: var(--color-text);
	font-weight: 500;
}

/* --- Logistics 3-card grid ------------------------------------------- */
.sp-takeback-page__logistics {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}

.sp-takeback-page__logistics-head {
	max-width: 760px;
	margin: 0 0 clamp(32px, 4vw, 56px) 0;
}

.sp-takeback-page__logistics-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(32px, 3.8vw, 48px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
}

.sp-takeback-page__logistics-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-xl);
}

@media (max-width: 900px) {
	.sp-takeback-page__logistics-grid {
		grid-template-columns: 1fr;
	}
}

.sp-takeback-page__logistics-card {
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

.sp-takeback-page__logistics-num {
	font-size: clamp(28px, 2.4vw, 36px);
	font-weight: 300;
	font-variation-settings: 'opsz' 72, 'SOFT' 50, 'wght' 300;
	color: var(--color-accent);
	line-height: 1;
	letter-spacing: -0.02em;
}

.sp-takeback-page__logistics-card-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(22px, 1.9vw, 28px);
	font-weight: 400;
	line-height: 1.15;
	margin: 0;
	color: var(--color-text);
}

.sp-takeback-page__logistics-card-body {
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 0;
}

.sp-takeback-page__logistics-card-body strong {
	color: var(--color-text);
	font-weight: 500;
}

/* --- Registration form ---------------------------------------------- */
.sp-takeback-page__register {
	background: var(--color-surface);
}

.sp-takeback-page__register-inner {
	max-width: 720px;
	margin: 0 auto;
}

.sp-takeback-page__register-head {
	margin: 0 0 clamp(32px, 4vw, 48px) 0;
	text-align: center;
}

.sp-takeback-page__register-head .sp-eyebrow {
	justify-content: center;
}

.sp-takeback-page__register-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 var(--sp-md) 0;
}

.sp-takeback-page__register-intro {
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
}

.sp-takeback-page__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-lg);
}

@media (max-width: 600px) {
	.sp-takeback-page__form {
		grid-template-columns: 1fr;
	}
}

.sp-takeback-page__field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-xs);
}

/* Honeypot — visually hidden, real submissions leave it blank. */
.sp-takeback-page__field--honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sp-takeback-page__label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.sp-takeback-page__input {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 1.4;
	padding: 14px 16px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, 12px);
	color: var(--color-text);
	width: 100%;
	transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.sp-takeback-page__input::placeholder {
	color: var(--color-text-muted);
	opacity: 0.6;
}

.sp-takeback-page__input:focus,
.sp-takeback-page__input:focus-visible {
	outline: none;
	border-color: var(--color-text);
	box-shadow: 0 0 0 3px rgba(90, 107, 122, 0.45);
	background: var(--color-bg);
}

/* Phase 1 C4 — success / error / loading states for when Fluent Forms wires up.
   Add .sp-takeback-page__form--success / --error / --loading on the <form>
   element to surface the appropriate message. Pure CSS hooks. */

.sp-takeback-page__form-message {
	grid-column: 1 / -1;
	padding: var(--sp-lg);
	border-radius: var(--radius-md, 12px);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 1.5;
	margin-block-end: var(--sp-md);
	display: none;
}

.sp-takeback-page__form--success .sp-takeback-page__form-message--success,
.sp-takeback-page__form--error   .sp-takeback-page__form-message--error,
.sp-takeback-page__form--loading .sp-takeback-page__form-message--loading {
	display: block;
}

.sp-takeback-page__form-message--success {
	background: var(--color-surface);
	border: 1px solid var(--color-accent);
	color: var(--color-text);
}

.sp-takeback-page__form-message--success::before {
	content: '✓ ';
	color: var(--color-accent);
	font-weight: 600;
	margin-right: 6px;
}

.sp-takeback-page__form-message--error {
	background: rgba(192, 57, 43, 0.06);
	border: 1px solid var(--color-destructive);
	color: var(--color-text);
}

.sp-takeback-page__form--loading .sp-takeback-page__submit {
	opacity: 0.6;
	pointer-events: none;
}

.sp-takeback-page__form--loading .sp-takeback-page__submit::after {
	content: ' …';
}

.sp-takeback-page__form-actions {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-sm);
	margin-top: var(--sp-md);
}

.sp-takeback-page__submit {
	background: var(--color-text);
	color: var(--color-bg);
	border: 0;
	border-radius: var(--radius-md, 12px);
	padding: 16px 32px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 160ms ease-out, transform 160ms ease-out;
}

.sp-takeback-page__submit:hover,
.sp-takeback-page__submit:focus-visible {
	background: var(--color-accent);
	color: var(--color-text);
	transform: translateY(-1px);
}

.sp-takeback-page__form-note {
	font-size: 13px;
	color: var(--color-text-muted);
	margin: 0;
	text-align: center;
}

/* --- Closing CTA (dark ink-900) ------------------------------------- */
.sp-takeback-page__cta {
	background: var(--color-text);
	color: var(--color-bg);
	margin-bottom: var(--layout-frame-pad);
}

.sp-takeback-page__cta-inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.sp-takeback-page__cta-eyebrow,
.sp-takeback-page__cta-eyebrow::before {
	color: var(--color-accent);
}

.sp-takeback-page__cta .sp-eyebrow {
	justify-content: center;
}

.sp-takeback-page__cta-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(36px, 4.4vw, 60px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--color-bg);
	margin: 0 0 var(--sp-md) 0;
}

.sp-takeback-page__cta-heading em {
	color: var(--color-accent);
}

.sp-takeback-page__cta-body {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(247, 247, 241, 0.78);
	margin: 0 auto var(--sp-xl) auto;
	max-width: 56ch;
}

.sp-takeback-page__cta-actions {
	display: flex;
	justify-content: center;
	gap: var(--sp-md);
	flex-wrap: wrap;
}

.sp-takeback-page__cta-primary.wp-element-button {
	background: var(--color-bg);
	color: var(--color-text);
	border: 0;
	border-radius: 2px;
	padding-block: var(--sp-md);
	padding-inline: var(--sp-xl);
	font-weight: 500;
	transition: background-color 160ms ease-out, transform 160ms ease-out;
}

.sp-takeback-page__cta-primary.wp-element-button:hover,
.sp-takeback-page__cta-primary.wp-element-button:focus-visible {
	background: var(--color-accent);
	transform: translateY(-1px);
}

.sp-takeback-page__cta-secondary.wp-element-button {
	background: transparent;
	color: var(--color-bg);
	border: 1px solid rgba(247, 247, 241, 0.4);
	border-radius: 2px;
	padding-block: var(--sp-md);
	padding-inline: var(--sp-xl);
	font-weight: 500;
	transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.sp-takeback-page__cta-secondary.wp-element-button:hover,
.sp-takeback-page__cta-secondary.wp-element-button:focus-visible {
	border-color: var(--color-bg);
	background: rgba(247, 247, 241, 0.08);
}

/* =============================================================================
   /about/ page — scoped sections (story hero, two-column origin, stat strip,
   team grid, dark editorial mission quote, location card, closing dark CTA).
   Re-uses .sp-eyebrow, .sp-chapter-numeral, .font-display-italic, .sp-card.
   ============================================================================= */

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

.sp-about-page__hero {
	background-color: var(--color-surface);
	background-image:
		linear-gradient(rgba(237, 231, 219, 0.72), rgba(237, 231, 219, 0.80)),
		url("/wp-content/themes/sustainable-ply/images/product-panel-corner.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-text);
	min-height: clamp(420px, 56vh, 520px);
	padding-block: clamp(96px, 12vw, 160px);
	padding-inline: clamp(24px, 5vw, 96px);
	overflow: hidden;
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	position: relative;
}

.sp-about-page__hero-chapter {
	position: absolute;
	bottom: clamp(-32px, -2vw, -8px);
	right: clamp(8px, 3vw, 48px);
	color: var(--color-accent);
	font-size: clamp(220px, 26vw, 400px);
	z-index: 0;
}

.sp-about-page__hero-inner {
	max-width: 980px;
	margin-inline: auto;
	width: 100%;
	position: relative;
	z-index: 1;
}

.sp-about-page__hero-eyebrow {
	margin: 0 0 var(--sp-lg) 0;
}

.sp-about-page__hero-headline {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 22ch;
	font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 400;
}

.sp-about-page__hero-headline em {
	color: var(--color-accent);
	font-style: italic;
}

/* --- Two-column origin story --------------------------------------------- */

.sp-about-page__origin {
	background: var(--color-bg);
	padding-block: clamp(80px, 10vw, 144px);
	padding-inline: clamp(24px, 4vw, 64px);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
}

.sp-about-page__origin-inner {
	max-width: 1320px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 40fr 60fr;
	gap: clamp(32px, 5vw, 96px);
	align-items: start;
}

@media (max-width: 900px) {
	.sp-about-page__origin-inner {
		grid-template-columns: 1fr;
		gap: var(--sp-3xl);
	}
}

.sp-about-page__origin-copy {
	display: flex;
	flex-direction: column;
	gap: var(--sp-lg);
}

.sp-about-page__origin-eyebrow {
	margin: 0;
}

.sp-about-page__origin-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 18ch;
}

.sp-about-page__origin-heading em {
	color: var(--color-accent);
	font-style: italic;
}

.sp-about-page__origin-body {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 0;
	max-width: 52ch;
}

.sp-about-page__origin-media {
	margin: 0;
}

.sp-about-page__origin-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	filter: saturate(0.9) contrast(1.02);
}

.sp-about-page__origin-caption {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--color-text-muted);
	font-style: italic;
	margin-top: var(--sp-md);
	text-align: right;
}

/* --- Stat strip ---------------------------------------------------------- */

.sp-about-page__stats {
	background: var(--color-bg);
	padding-block: clamp(64px, 8vw, 112px);
	padding-inline: clamp(24px, 4vw, 64px);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-top: 1px solid var(--color-border);
}

.sp-about-page__stats-inner {
	max-width: 1320px;
	margin-inline: auto;
}

.sp-about-page__stats-header {
	margin-bottom: clamp(32px, 4vw, 64px);
	max-width: 60ch;
}

.sp-about-page__stats-eyebrow {
	margin: 0;
}

.sp-about-page__stats-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: var(--sp-md) 0 0 0;
}

.sp-about-page__stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-xl);
}

@media (max-width: 900px) {
	.sp-about-page__stats-grid {
		grid-template-columns: 1fr;
	}
}

.sp-about-page__stat {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	/* Generous padding so the cards read as cards even with short content;
	   min-height locks the trio into a consistent rhythm regardless of
	   per-card text length.                                                  */
	padding: clamp(32px, 3vw, 48px) clamp(28px, 2.5vw, 40px);
	min-height: 240px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
	position: relative;
}

/* Lucide line-icon at the top of each stat card. Slate by default; the small
   numeric eyebrow sits immediately below.                                    */
.sp-about-page__stat-icon {
	color: var(--color-accent);
	margin-bottom: var(--sp-sm);
	flex-shrink: 0;
}

.sp-about-page__stat-num {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* Push label to the bottom of the card so the trio aligns visually.          */
.sp-about-page__stat-label {
	margin-top: auto;
}

.sp-about-page__stat-value {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--color-text);
}

.sp-about-page__stat-value em {
	color: var(--color-accent);
	font-style: italic;
}

.sp-about-page__stat-label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.4;
}

/* --- Team grid ------------------------------------------------------------ */

.sp-about-page__team {
	background: var(--color-surface);
	padding-block: clamp(80px, 10vw, 144px);
	padding-inline: clamp(24px, 4vw, 64px);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg);
}

.sp-about-page__team-inner {
	max-width: 1320px;
	margin-inline: auto;
}

.sp-about-page__team-header {
	max-width: 60ch;
	margin-bottom: clamp(32px, 4vw, 64px);
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

.sp-about-page__team-eyebrow {
	margin: 0;
}

.sp-about-page__team-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0;
}

.sp-about-page__team-heading em {
	color: var(--color-accent);
	font-style: italic;
}

.sp-about-page__team-body {
	font-size: var(--wp--preset--font-size--base);
	color: var(--color-text-muted);
	margin: 0;
	max-width: 56ch;
}

.sp-about-page__team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-xl);
}

@media (max-width: 900px) {
	.sp-about-page__team-grid {
		grid-template-columns: 1fr;
	}
}

.sp-about-page__team-card {
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sp-about-page__team-media {
	margin: 0;
}

.sp-about-page__team-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	filter: saturate(0.9) contrast(1.02);
}

.sp-about-page__team-body-card {
	padding: var(--sp-xl);
	display: flex;
	flex-direction: column;
	gap: var(--sp-sm);
}

.sp-about-page__team-role {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.sp-about-page__team-name {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--color-text);
}

.sp-about-page__team-bio {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.5;
}

/* --- Mission editorial pull-quote ---------------------------------------- */

.sp-about-page__mission {
	background: var(--color-text);
	color: var(--color-bg);
	padding-block: clamp(128px, 14vw, 224px);
	padding-inline: clamp(24px, 4vw, 64px);
	overflow: hidden;
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg);
}

.sp-about-page__mission-chapter {
	position: absolute;
	bottom: -8%;
	left: clamp(-24px, -1vw, -8px);
	color: var(--color-bg);
	opacity: 0.06;
	font-size: clamp(280px, 32vw, 480px);
	z-index: 0;
}

.sp-about-page__mission-inner {
	max-width: 1320px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 64px);
}

.sp-about-page__mission-eyebrow {
	color: var(--color-accent);
	margin: 0;
}

.sp-about-page__mission-eyebrow::before {
	color: var(--color-accent);
}

.sp-about-page__mission-quote {
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 400;
	font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 400;
	font-size: clamp(32px, 4.4vw, 72px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--color-bg);
	margin: 0;
	max-width: 26ch;
}

.sp-about-page__mission-quote p {
	margin: 0;
}

.sp-about-page__mission-quote em {
	color: var(--color-accent);
}

/* --- Location section ---------------------------------------------------- */

.sp-about-page__location {
	background: var(--color-bg);
	padding-block: clamp(80px, 10vw, 144px);
	padding-inline: clamp(24px, 4vw, 64px);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
}

.sp-about-page__location-inner {
	max-width: 1320px;
	margin-inline: auto;
}

.sp-about-page__location-header {
	max-width: 60ch;
	margin-bottom: clamp(32px, 4vw, 64px);
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

.sp-about-page__location-eyebrow {
	margin: 0;
}

.sp-about-page__location-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0;
}

.sp-about-page__location-heading em {
	color: var(--color-accent);
	font-style: italic;
}

.sp-about-page__location-grid {
	display: grid;
	grid-template-columns: 58fr 42fr;
	gap: var(--sp-xl);
	align-items: stretch;
}

@media (max-width: 900px) {
	.sp-about-page__location-grid {
		grid-template-columns: 1fr;
	}
}

.sp-about-page__location-map {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.sp-about-page__location-map-image {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	border: 1px dashed var(--color-border);
}

.sp-about-page__location-map-caption {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--color-text-muted);
	font-style: italic;
	margin-top: var(--sp-md);
}

.sp-about-page__location-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	/* Generous interior padding — matches the about-stats card rhythm.       */
	padding: clamp(32px, 3.5vw, 56px) clamp(28px, 3vw, 44px);
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 2.5vw, 36px);
}

/* Each row is a 2-column flex: icon | (label + value).                       */
.sp-about-page__location-card-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--sp-lg);
}

.sp-about-page__location-card-row + .sp-about-page__location-card-row {
	border-top: 1px solid var(--color-border);
	padding-top: clamp(24px, 2.5vw, 36px);
}

.sp-about-page__location-card-icon {
	color: var(--color-accent);
	flex-shrink: 0;
	margin-top: 2px; /* optical alignment with the small-caps label */
}

.sp-about-page__location-card-text {
	display: flex;
	flex-direction: column;
	gap: var(--sp-sm);
	min-width: 0;
}

.sp-about-page__location-card-label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.sp-about-page__location-card-value {
	font-size: var(--wp--preset--font-size--base);
	color: var(--color-text);
	margin: 0;
	line-height: 1.5;
}

.sp-about-page__location-card-value a {
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.sp-about-page__location-card-value a:hover {
	color: var(--color-accent);
}

/* --- Closing CTA band (dark) --------------------------------------------- */

.sp-about-page__closing {
	background: var(--color-text);
	color: var(--color-bg);
	padding-block: clamp(96px, 12vw, 160px);
	padding-inline: clamp(24px, 4vw, 64px);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg);
	text-align: center;
}

.sp-about-page__closing-inner {
	max-width: 720px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-lg);
	align-items: center;
}

.sp-about-page__closing-eyebrow {
	color: var(--color-accent);
	margin: 0;
}

.sp-about-page__closing-eyebrow::before {
	color: var(--color-accent);
}

.sp-about-page__closing-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--color-bg);
	margin: 0;
}

.sp-about-page__closing-heading em {
	color: var(--wp--preset--color--peach);
	font-style: italic;
}

.sp-about-page__closing-body {
	font-size: var(--wp--preset--font-size--base);
	color: rgba(247, 247, 241, 0.72);
	line-height: 1.55;
	margin: 0;
	max-width: 56ch;
}

.sp-about-page__closing-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
	justify-content: center;
	margin-top: var(--sp-md);
}

.sp-about-page__closing-primary.wp-element-button {
	background: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-bg);
	border-radius: var(--radius-md);
	padding: var(--sp-md) var(--sp-xl);
	font-weight: 500;
}

.sp-about-page__closing-primary.wp-element-button:hover,
.sp-about-page__closing-primary.wp-element-button:focus-visible {
	background: var(--color-accent);
	color: var(--color-text);
	border-color: var(--color-accent);
}

.sp-about-page__closing-secondary.wp-element-button {
	background: transparent;
	color: var(--color-bg);
	border: 1px solid rgba(247, 247, 241, 0.5);
	border-radius: var(--radius-md);
	padding: var(--sp-md) var(--sp-xl);
	font-weight: 500;
}

.sp-about-page__closing-secondary.wp-element-button:hover,
.sp-about-page__closing-secondary.wp-element-button:focus-visible {
	background: var(--color-bg);
	color: var(--color-text);
	border-color: var(--color-bg);
}

/* =============================================================================
   /sustainability/ page — scoped sections (evidence-led hero, by-the-numbers
   bento stat strip, take-back 4-stage flow, methodology accordion, closing
   dark CTA). Re-uses .sp-eyebrow, .sp-chapter-numeral, .font-display-italic
   and the framed-section --radius-lg / --layout-frame-pad treatment. The
   long-form "Where our material comes from" section is the existing
   wp:sustainable-ply-blocks/circular-network block — not styled here.
   ============================================================================= */

/* --- Hero band (~520px) - Phase 1 C5: dark ink to match home + bookend CTA */
.sp-sustainability-page__hero {
	background:
		linear-gradient(rgba(28, 26, 23, 0.86), rgba(28, 26, 23, 0.92)),
		url("/wp-content/themes/sustainable-ply/images/product-edge-stratum.jpg") center / cover no-repeat,
		var(--color-text);
	color: var(--color-bg);
	border-radius: var(--radius-lg);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	min-height: 520px;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding-block: clamp(72px, 9vw, 128px);
	padding-inline: clamp(24px, 5vw, 96px);
	position: relative;
}

.sp-sustainability-page__hero .sp-eyebrow,
.sp-sustainability-page__hero .sp-eyebrow::before {
	color: var(--color-accent);
}

.sp-sustainability-page__hero-headline {
	color: var(--color-bg) !important;
}

.sp-sustainability-page__hero-lead {
	color: rgba(247, 247, 241, 0.78) !important;
}

.sp-sustainability-page__hero-meta {
	border-top-color: rgba(247, 247, 241, 0.18) !important;
}

.sp-sustainability-page__hero-meta-item dt {
	color: rgba(247, 247, 241, 0.6) !important;
}

.sp-sustainability-page__hero-meta-item dd {
	color: var(--color-bg) !important;
}

.sp-sustainability-page__hero .sp-chapter-numeral,
.sp-sustainability-page__hero-chapter {
	color: var(--color-bg);
	opacity: 0.08;
}

@media (max-width: 600px) {
	.sp-sustainability-page__hero {
		border-radius: var(--radius-md);
		width: calc(100% - 24px);
		min-height: 440px;
	}
}

.sp-sustainability-page__hero-chapter {
	position: absolute;
	left: clamp(-32px, -1.5vw, -8px);
	bottom: -8%;
	font-size: clamp(220px, 26vw, 380px);
	z-index: 0;
}

.sp-sustainability-page__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 920px;
}

.sp-sustainability-page__hero-eyebrow {
	margin-bottom: var(--sp-lg);
}

.sp-sustainability-page__hero-headline {
	font-family: var(--wp--preset--font-family--fraunces);
	font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 400;
	font-size: clamp(56px, 8.2vw, 112px);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 0.98;
	color: var(--color-text);
	margin: 0 0 var(--sp-2xl) 0;
	max-width: 14ch;
}

.sp-sustainability-page__hero-accent {
	color: var(--color-accent);
}

.sp-sustainability-page__hero-lead {
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.5;
	color: var(--color-text);
	max-width: 60ch;
	margin: 0 0 var(--sp-2xl) 0;
}

.sp-sustainability-page__hero-meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-xl);
	border-top: 1px solid var(--color-border);
	padding-top: var(--sp-xl);
	max-width: 720px;
	margin: 0;
}

@media (max-width: 700px) {
	.sp-sustainability-page__hero-meta {
		grid-template-columns: 1fr;
		gap: var(--sp-md);
	}
}

.sp-sustainability-page__hero-meta-item dt {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-sm);
}

.sp-sustainability-page__hero-meta-item dd {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-text);
	margin: 0;
	line-height: 1.4;
}

/* --- By the numbers — 4-card bento stat strip ----------------------------- */
.sp-sustainability-page__stats {
	background-color: var(--color-bg);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(72px, 9vw, 128px);
	padding-inline: clamp(16px, 3vw, 48px);
	position: relative;
}

.sp-sustainability-page__stats-inner {
	max-width: 1320px;
	margin-inline: auto;
}

.sp-sustainability-page__stats-head {
	max-width: 720px;
	margin-bottom: clamp(40px, 5vw, 72px);
}

.sp-sustainability-page__stats-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	font-size: clamp(40px, 4.5vw, 72px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0 0 var(--sp-lg) 0;
	color: var(--color-text);
}

.sp-sustainability-page__stats-intro {
	color: var(--color-text-muted);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.55;
	max-width: 58ch;
	margin: 0;
}

.sp-sustainability-page__stats-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-lg);
}

@media (max-width: 1024px) {
	.sp-sustainability-page__stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.sp-sustainability-page__stats-grid {
		grid-template-columns: 1fr;
	}
}

.sp-sustainability-page__stat-card {
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 3vw, 48px);
	display: flex;
	flex-direction: column;
	gap: var(--sp-lg);
	min-height: 260px;
}

/* Phase 1 C3 — rebalance the hierarchy. Numeral was top-heavy; label was an
   afterthought. Now: label is the primary read, numeral is the supporting
   evidence, description is the proof. */
.sp-sustainability-page__stat-card .sp-sustainability-page__stat-label {
	order: 1;
}

.sp-sustainability-page__stat-card .sp-sustainability-page__stat-num {
	order: 2;
}

.sp-sustainability-page__stat-card .sp-sustainability-page__stat-desc {
	order: 3;
	padding-top: var(--sp-md);
	border-top: 1px solid var(--color-border);
}

.sp-sustainability-page__stat-num {
	font-size: clamp(48px, 5.5vw, 80px);
	font-weight: 300;
	font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 300;
	line-height: 0.92;
	letter-spacing: -0.04em;
	color: var(--color-accent);
	display: block;
}

.sp-sustainability-page__stat-num small {
	font-size: 0.45em;
	font-style: italic;
	color: var(--color-accent);
	margin-left: 0.05em;
	vertical-align: baseline;
	font-variation-settings: 'opsz' 96, 'SOFT' 50, 'wght' 400;
}

.sp-sustainability-page__stat-label {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(20px, 1.8vw, 28px);
	font-weight: 400;
	font-variation-settings: 'opsz' 48, 'SOFT' 30, 'wght' 400;
	letter-spacing: -0.015em;
	color: var(--color-text);
	margin: 0;
	line-height: 1.15;
	max-width: 22ch;
}

.sp-sustainability-page__stat-desc {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	color: var(--color-text-muted);
	line-height: 1.5;
	margin: auto 0 0 0;
}

/* --- Take-back 4-stage flow ----------------------------------------------- */
.sp-sustainability-page__takeback {
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(80px, 10vw, 140px);
	padding-inline: clamp(24px, 4vw, 72px);
	overflow: hidden;
	position: relative;
}

@media (max-width: 600px) {
	.sp-sustainability-page__takeback {
		border-radius: var(--radius-md);
		width: calc(100% - 24px);
	}
}

.sp-sustainability-page__takeback-chapter {
	position: absolute;
	right: clamp(-32px, -1.5vw, -8px);
	top: 4%;
	font-size: clamp(220px, 26vw, 380px);
	z-index: 0;
}

.sp-sustainability-page__takeback-inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin-inline: auto;
}

.sp-sustainability-page__takeback-head {
	max-width: 720px;
	margin-bottom: clamp(48px, 6vw, 88px);
}

.sp-sustainability-page__takeback-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	font-size: clamp(40px, 4.5vw, 72px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0 0 var(--sp-lg) 0;
	color: var(--color-text);
}

.sp-sustainability-page__takeback-intro {
	color: var(--color-text-muted);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.55;
	max-width: 58ch;
	margin: 0;
}

.sp-sustainability-page__takeback-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-lg);
	position: relative;
}

/* Connecting horizontal hairline across stages — desktop only. */
.sp-sustainability-page__takeback-flow::before {
	content: '';
	position: absolute;
	top: 56px;
	left: 8%;
	right: 8%;
	height: 1px;
	background: var(--color-border);
	z-index: 0;
}

@media (max-width: 900px) {
	.sp-sustainability-page__takeback-flow {
		grid-template-columns: 1fr;
		gap: var(--sp-xl);
	}
	.sp-sustainability-page__takeback-flow::before {
		display: none;
	}
}

.sp-sustainability-page__takeback-stage {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
	padding-top: var(--sp-md);
}

/* Per-stage micro-image — sits above the stage number, gives the loop a
   visible anchor before the text fills in the detail.                       */
.sp-sustainability-page__takeback-image {
	margin: 0 0 var(--sp-sm) 0;
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-border);
}

.sp-sustainability-page__takeback-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Sustainability page editorial breaker (slot 2) ----------------------- */
.sp-sustainability-page__breaker {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(48px, 6vw, 96px);
}

.sp-sustainability-page__breaker-figure {
	margin: 0;
	border-radius: var(--radius-lg, 20px);
	overflow: hidden;
	position: relative;
}

.sp-sustainability-page__breaker-figure img {
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	display: block;
}

.sp-sustainability-page__breaker-caption {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	margin: var(--sp-md) 0 0 0;
	font-style: italic;
}

.sp-sustainability-page__takeback-num {
	font-size: clamp(56px, 6vw, 96px);
	font-weight: 300;
	font-variation-settings: 'opsz' 96, 'SOFT' 50, 'wght' 300;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--color-accent);
	display: inline-block;
	background-color: var(--color-surface);
	padding-right: var(--sp-md);
	margin-bottom: var(--sp-sm);
}

.sp-sustainability-page__takeback-headline {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--color-text);
	margin: 0;
}

.sp-sustainability-page__takeback-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.55;
	color: var(--color-text-muted);
	margin: 0;
	max-width: 36ch;
}

/* --- Methodology accordion ------------------------------------------------ */
.sp-sustainability-page__methodology {
	background-color: var(--color-bg);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(72px, 9vw, 128px);
	padding-inline: clamp(16px, 3vw, 48px);
	position: relative;
}

.sp-sustainability-page__methodology-inner {
	display: grid;
	grid-template-columns: 34fr 66fr;
	gap: clamp(40px, 5vw, 96px);
	max-width: 1320px;
	margin-inline: auto;
}

@media (max-width: 900px) {
	.sp-sustainability-page__methodology-inner {
		grid-template-columns: 1fr;
		gap: var(--sp-2xl);
	}
}

.sp-sustainability-page__methodology-head {
	align-self: start;
	position: sticky;
	top: 88px;
}

@media (max-width: 900px) {
	.sp-sustainability-page__methodology-head {
		position: static;
	}
}

.sp-sustainability-page__methodology-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 400;
	font-size: clamp(36px, 4vw, 60px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0 0 var(--sp-lg) 0;
	color: var(--color-text);
	max-width: 12ch;
}

.sp-sustainability-page__methodology-intro {
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.55;
	max-width: 38ch;
	margin: 0;
}

.sp-sustainability-page__methodology-list {
	border-top: 1px solid var(--color-border);
}

.sp-sustainability-page__faq {
	border-bottom: 1px solid var(--color-border);
}

.sp-sustainability-page__faq-summary {
	list-style: none;
	cursor: pointer;
	padding-block: clamp(20px, 2vw, 28px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-lg);
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--color-text);
	line-height: 1.3;
	transition: color 200ms ease-out;
}

.sp-sustainability-page__faq-summary::-webkit-details-marker {
	display: none;
}

.sp-sustainability-page__faq-summary-text {
	flex: 1 1 auto;
}

.sp-sustainability-page__faq-summary-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	position: relative;
}

.sp-sustainability-page__faq-summary-icon::before,
.sp-sustainability-page__faq-summary-icon::after {
	content: '';
	position: absolute;
	background-color: var(--color-text);
	transition: background-color 200ms ease-out, opacity 200ms ease-out;
}

.sp-sustainability-page__faq-summary-icon::before {
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	transform: translateY(-50%);
}

.sp-sustainability-page__faq-summary-icon::after {
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	transform: translateX(-50%);
}

.sp-sustainability-page__faq[open] .sp-sustainability-page__faq-summary-icon::after {
	opacity: 0;
}

.sp-sustainability-page__faq:hover .sp-sustainability-page__faq-summary,
.sp-sustainability-page__faq-summary:focus-visible {
	color: var(--color-accent);
}

.sp-sustainability-page__faq:hover .sp-sustainability-page__faq-summary-icon::before,
.sp-sustainability-page__faq:hover .sp-sustainability-page__faq-summary-icon::after {
	background-color: var(--color-accent);
}

.sp-sustainability-page__faq-body {
	padding-bottom: clamp(20px, 2vw, 28px);
	padding-right: clamp(20px, 3vw, 56px);
	color: var(--color-text-muted);
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.6;
	max-width: 70ch;
}

.sp-sustainability-page__faq-body p {
	margin: 0;
}

.sp-sustainability-page__faq-body em {
	display: block;
	margin-top: var(--sp-md);
	font-size: 13px;
	color: var(--color-text-muted);
	border-top: 1px solid var(--color-border);
	padding-top: var(--sp-sm);
	font-style: italic;
}

/* --- Closing dark CTA band ----------------------------------------------- */
.sp-sustainability-page__closing {
	background:
		linear-gradient(rgba(28, 26, 23, 0.88), rgba(28, 26, 23, 0.94)),
		url("/wp-content/themes/sustainable-ply/images/product-edge-stratum.jpg") center / cover no-repeat,
		var(--color-text);
	color: var(--color-bg);
	border-radius: var(--radius-lg);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(80px, 10vw, 140px);
	padding-inline: clamp(24px, 5vw, 96px);
	text-align: center;
	position: relative;
}

@media (max-width: 600px) {
	.sp-sustainability-page__closing {
		border-radius: var(--radius-md);
		width: calc(100% - 24px);
	}
}

.sp-sustainability-page__closing-inner {
	max-width: 720px;
	margin-inline: auto;
}

.sp-sustainability-page__closing-eyebrow {
	justify-content: center;
	color: var(--color-accent);
}

.sp-sustainability-page__closing-eyebrow::before {
	color: var(--color-accent);
}

.sp-sustainability-page__closing-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 400;
	font-size: clamp(40px, 5.5vw, 80px);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--color-bg);
	margin: 0 0 var(--sp-xl) 0;
}

.sp-sustainability-page__closing-body {
	color: var(--color-bg);
	opacity: 0.8;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
	max-width: 50ch;
	margin: 0 auto var(--sp-2xl);
}

.sp-sustainability-page__closing-ctas {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
	justify-content: center;
}

.sp-sustainability-page__closing-cta {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	font-weight: 500;
	padding: var(--sp-md) var(--sp-xl);
	border-radius: 2px;
	text-decoration: none;
	transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

.sp-sustainability-page__closing-cta--primary {
	background-color: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-bg);
}

.sp-sustainability-page__closing-cta--primary:hover,
.sp-sustainability-page__closing-cta--primary:focus-visible {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text);
}

.sp-sustainability-page__closing-cta--outline {
	background-color: transparent;
	color: var(--color-bg);
	border: 1px solid var(--color-bg);
}

.sp-sustainability-page__closing-cta--outline:hover,
.sp-sustainability-page__closing-cta--outline:focus-visible {
	background-color: var(--color-bg);
	color: var(--color-text);
}

/* =============================================================================
   SEO copy round — additions for filled About + Applications + Take-back content
   ============================================================================= */

.sp-about-page__tbc-note,
.sp-about-page__team-name-tbc,
.sp-takeback-page__inline-tbc {
	display: inline-block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.78em;
	font-weight: 400;
	font-style: italic;
	color: var(--color-text-muted);
	opacity: 0.75;
	background: var(--color-surface);
	padding: 1px 8px;
	border-radius: var(--radius-sm, 8px);
	letter-spacing: 0.02em;
}

.sp-about-page__location-map-frame {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg, 20px);
	background: var(--color-surface);
}

.sp-about-page__team-name-tbc {
	font-size: 0.62em;
	display: block;
	margin-top: 4px;
}

/* Applications — common specs strip ----------------------------------------- */

.sp-applications-page__specs {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	background: var(--color-surface);
	border-radius: var(--radius-lg, 20px);
	padding: clamp(64px, 8vw, 128px) clamp(24px, 4vw, 64px);
}

.sp-applications-page__specs-inner {
	max-width: 1320px;
	margin-inline: auto;
}

.sp-applications-page__specs-header {
	max-width: 56ch;
	margin-bottom: clamp(40px, 5vw, 80px);
}

.sp-applications-page__specs-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(36px, 4.5vw, 64px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: var(--sp-md) 0 var(--sp-lg) 0;
	color: var(--color-text);
}

.sp-applications-page__specs-heading em {
	font-style: italic;
	color: var(--color-accent);
	font-variation-settings: 'opsz' 96, 'SOFT' 80, 'wght' 400;
}

.sp-applications-page__specs-body {
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.55;
	color: var(--color-text-muted);
	margin: 0;
}

.sp-applications-page__specs-list {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--color-border);
}

.sp-applications-page__spec-row {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) 4fr;
	gap: clamp(20px, 3vw, 56px);
	padding-block: clamp(20px, 2.5vw, 36px);
	border-bottom: 1px solid var(--color-border);
	align-items: baseline;
}

@media (max-width: 600px) {
	.sp-applications-page__spec-row {
		grid-template-columns: 1fr;
		gap: var(--sp-sm);
	}
}

.sp-applications-page__spec-gauge {
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-size: clamp(32px, 3vw, 48px);
	font-variation-settings: 'opsz' 96, 'SOFT' 50, 'wght' 400;
	letter-spacing: -0.025em;
	color: var(--color-accent);
	line-height: 1;
}

.sp-applications-page__spec-headline {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 var(--sp-sm) 0;
	color: var(--color-text);
}

.sp-applications-page__spec-meta {
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.55;
	color: var(--color-text-muted);
	margin: 0;
	max-width: 60ch;
}

/* Applications — trade FAQ accordion ---------------------------------------- */

.sp-applications-page__faq {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	background: var(--color-bg);
	border-radius: var(--radius-lg, 20px);
	padding: clamp(64px, 8vw, 128px) clamp(24px, 4vw, 64px);
}

.sp-applications-page__faq-inner {
	max-width: 1100px;
	margin-inline: auto;
}

.sp-applications-page__faq-header {
	max-width: 56ch;
	margin-bottom: clamp(32px, 4vw, 56px);
}

.sp-applications-page__faq-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(36px, 4.5vw, 64px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: var(--sp-md) 0 0 0;
	color: var(--color-text);
}

.sp-applications-page__faq-heading em {
	font-style: italic;
	color: var(--color-accent);
	font-variation-settings: 'opsz' 96, 'SOFT' 80, 'wght' 400;
}

.sp-applications-page__faq-list {
	border-top: 1px solid var(--color-border);
}

.sp-applications-page__faq-item {
	border-bottom: 1px solid var(--color-border);
}

.sp-applications-page__faq-summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-md);
	padding-block: clamp(18px, 2vw, 28px);
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 400;
	font-variation-settings: 'opsz' 48, 'SOFT' 50, 'wght' 400;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--color-text);
}

.sp-applications-page__faq-summary::-webkit-details-marker {
	display: none;
}

.sp-applications-page__faq-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	position: relative;
	transition: border-color 200ms ease-out;
}

.sp-applications-page__faq-icon::before,
.sp-applications-page__faq-icon::after {
	content: '';
	position: absolute;
	background: var(--color-text);
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sp-applications-page__faq-icon::before { width: 12px; height: 1px; }
.sp-applications-page__faq-icon::after  { width: 1px; height: 12px; }

.sp-applications-page__faq-item[open] .sp-applications-page__faq-icon::after {
	transform: rotate(90deg);
}

.sp-applications-page__faq-body {
	padding: 0 0 clamp(20px, 2vw, 32px) 0;
	max-width: 64ch;
}

.sp-applications-page__faq-body p {
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 0;
}

.sp-applications-page__faq-body a {
	color: var(--color-text);
	border-bottom: 1px solid var(--color-accent);
	text-decoration: none;
}

.sp-applications-page__faq-body a:hover,
.sp-applications-page__faq-body a:focus-visible {
	color: var(--color-accent);
}

.sp-applications-page__hero-lead--secondary {
	margin-top: var(--sp-md);
	color: var(--color-text-muted);
	font-size: clamp(15px, 1.15vw, 17px);
}

/* =============================================================================
   /gallery/ page — editorial masonry, sticky filter chips, native lightbox.
   ============================================================================= */

/* --- Hero ---------------------------------------------------------------- */
.sp-gallery-page__hero {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(48px, 6vw, 96px);
	padding-inline: clamp(24px, 4vw, 64px);
	position: relative;
	overflow: hidden;
}

.sp-gallery-page__hero-chapter {
	position: absolute;
	top: 6%;
	right: clamp(-24px, -1vw, -8px);
	font-size: clamp(220px, 26vw, 380px);
	z-index: 0;
}

.sp-gallery-page__hero-inner {
	display: grid;
	grid-template-columns: 42fr 58fr;
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
	position: relative;
	z-index: 1;
}

@media (max-width: 900px) {
	.sp-gallery-page__hero-inner {
		grid-template-columns: 1fr;
		gap: clamp(24px, 3vw, 48px);
	}
}

.sp-gallery-page__hero-copy {
	display: flex;
	flex-direction: column;
	gap: var(--sp-lg);
}

.sp-gallery-page__hero-eyebrow {
	margin: 0;
}

.sp-gallery-page__hero-headline {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(48px, 6vw, 92px);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--color-text);
}

.sp-gallery-page__hero-headline em {
	color: var(--color-accent);
	font-style: italic;
}

.sp-gallery-page__hero-lead {
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.55;
	color: var(--color-text-muted);
	margin: 0;
	max-width: 50ch;
}

.sp-gallery-page__hero-figure {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.sp-gallery-page__hero-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Sticky filter chips ------------------------------------------------- */
.sp-gallery-page__filters {
	position: sticky;
	top: 0;
	z-index: 50;
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: var(--sp-md);
	padding-inline: clamp(16px, 3vw, 48px);
	background:
		linear-gradient(rgba(247, 247, 241, 0.92), rgba(247, 247, 241, 0.92)),
		var(--color-bg);
	backdrop-filter: saturate(1.4) blur(8px);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--color-border);
}

.sp-gallery-page__filters-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	justify-content: flex-start;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.sp-gallery-page__filters-inner::-webkit-scrollbar {
	display: none;
}

.sp-gallery-page__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--color-text-muted);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}

.sp-gallery-page__chip:hover,
.sp-gallery-page__chip:focus-visible {
	background: var(--color-surface);
	color: var(--color-text);
	border-color: var(--color-text);
	outline: none;
}

.sp-gallery-page__chip.is-active {
	background: var(--color-text);
	color: var(--color-bg);
	border-color: var(--color-text);
}

.sp-gallery-page__chip svg {
	flex-shrink: 0;
	stroke-width: 1.5;
}

/* --- Masonry grid -------------------------------------------------------- */
.sp-gallery-page__grid {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(40px, 5vw, 80px);
	padding-inline: clamp(16px, 3vw, 48px);
}

.sp-gallery-page__grid-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 220px;
	gap: clamp(12px, 1.5vw, 20px);
}

@media (max-width: 1100px) {
	.sp-gallery-page__grid-inner {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 760px) {
	.sp-gallery-page__grid-inner {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 180px;
	}
}

@media (max-width: 480px) {
	.sp-gallery-page__grid-inner {
		grid-template-columns: 1fr;
	}
}

/* Tile sizes — uses col/row spans so a single CSS Grid produces a masonry feel. */
.sp-gallery-page__tile {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	border: 0;
	padding: 0;
	cursor: pointer;
	display: block;
	transition: opacity 240ms ease-out, transform 240ms ease-out;
}

.sp-gallery-page__tile.is-filtered-out {
	display: none;
}

.sp-gallery-page__tile--lg  { grid-column: span 2; grid-row: span 2; }
.sp-gallery-page__tile--tall { grid-row: span 2; }
.sp-gallery-page__tile--wide { grid-column: span 2; }

/* On smaller screens, oversized tiles collapse to 1-col equivalent.       */
@media (max-width: 760px) {
	.sp-gallery-page__tile--lg,
	.sp-gallery-page__tile--wide {
		grid-column: span 2;
	}
	.sp-gallery-page__tile--tall {
		grid-row: span 2;
	}
}

@media (max-width: 480px) {
	.sp-gallery-page__tile--lg,
	.sp-gallery-page__tile--wide,
	.sp-gallery-page__tile--tall {
		grid-column: span 1;
		grid-row: span 1;
	}
}

.sp-gallery-page__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sp-gallery-page__tile:hover img,
.sp-gallery-page__tile:focus-visible img {
	transform: scale(1.04);
}

.sp-gallery-page__tile:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.sp-gallery-page__tile-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(16px, 1.5vw, 24px);
	background: linear-gradient(180deg, rgba(28, 26, 23, 0) 0%, rgba(28, 26, 23, 0.78) 100%);
	color: var(--color-bg);
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transform: translateY(8px);
	opacity: 0;
	transition: opacity 240ms ease-out, transform 240ms ease-out;
	pointer-events: none;
}

.sp-gallery-page__tile:hover .sp-gallery-page__tile-caption,
.sp-gallery-page__tile:focus-visible .sp-gallery-page__tile-caption {
	transform: translateY(0);
	opacity: 1;
}

.sp-gallery-page__tile-label {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(18px, 1.4vw, 22px);
	line-height: 1.1;
	font-weight: 400;
}

.sp-gallery-page__tile-meta {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--color-accent-bright);
}

/* --- Featured case study breaker ---------------------------------------- */
.sp-gallery-page__case {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(48px, 6vw, 96px);
	padding-inline: clamp(16px, 3vw, 48px);
	display: grid;
	grid-template-columns: 60fr 40fr;
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}

@media (max-width: 900px) {
	.sp-gallery-page__case {
		grid-template-columns: 1fr;
	}
}

.sp-gallery-page__case-figure {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.sp-gallery-page__case-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-gallery-page__case-copy {
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

.sp-gallery-page__case-eyebrow {
	margin: 0;
}

.sp-gallery-page__case-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(32px, 3.6vw, 56px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--color-text);
}

.sp-gallery-page__case-heading em {
	color: var(--color-accent);
	font-style: italic;
}

.sp-gallery-page__case-body {
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 0;
	max-width: 50ch;
}

.sp-gallery-page__case-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-md);
	margin: var(--sp-md) 0 0 0;
	padding: var(--sp-md) 0 0 0;
	border-top: 1px solid var(--color-border);
}

.sp-gallery-page__case-stat dt {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 4px 0;
}

.sp-gallery-page__case-stat dd {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(16px, 1.2vw, 18px);
	font-weight: 400;
	color: var(--color-text);
	margin: 0;
}

/* --- Closing CTA --------------------------------------------------------- */
.sp-gallery-page__closing {
	background:
		linear-gradient(rgba(28, 26, 23, 0.88), rgba(28, 26, 23, 0.94)),
		url("/wp-content/themes/sustainable-ply/images/gallery/material-stratum-overhead.jpg") center / cover no-repeat,
		var(--color-text);
	color: var(--color-bg);
	border-radius: var(--radius-lg);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(72px, 9vw, 128px);
	padding-inline: clamp(24px, 5vw, 96px);
	text-align: center;
	margin-bottom: var(--layout-frame-pad);
	--color-accent: var(--color-accent-bright);
}

.sp-gallery-page__closing-inner {
	max-width: 720px;
	margin-inline: auto;
}

.sp-gallery-page__closing-eyebrow {
	justify-content: center;
}

.sp-gallery-page__closing-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(40px, 5vw, 72px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: var(--sp-md) 0 var(--sp-md) 0;
	color: var(--color-bg);
}

.sp-gallery-page__closing-heading em {
	color: var(--color-accent);
	font-style: italic;
}

.sp-gallery-page__closing-body {
	font-size: 16px;
	line-height: 1.55;
	color: rgba(247, 247, 241, 0.78);
	margin: 0 0 var(--sp-lg) 0;
}

.sp-gallery-page__closing-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
	justify-content: center;
}

/* --- Lightbox (native <dialog>) ----------------------------------------- */
.sp-gallery-page__lightbox {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(28, 26, 23, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 999;
}

.sp-gallery-page__lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-gallery-page__lightbox::backdrop {
	background: rgba(28, 26, 23, 0.92);
	backdrop-filter: blur(8px);
}

.sp-gallery-page__lightbox-figure {
	margin: 0;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
	align-items: center;
}

.sp-gallery-page__lightbox-figure img {
	max-width: 90vw;
	max-height: 80vh;
	object-fit: contain;
	border-radius: var(--radius-md);
	display: block;
}

.sp-gallery-page__lightbox-caption {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	color: rgba(247, 247, 241, 0.85);
	text-align: center;
	max-width: 60ch;
}

.sp-gallery-page__lightbox-close {
	position: absolute;
	top: clamp(20px, 3vw, 32px);
	right: clamp(20px, 3vw, 32px);
	width: 48px;
	height: 48px;
	background: rgba(247, 247, 241, 0.1);
	border: 1px solid rgba(247, 247, 241, 0.25);
	border-radius: 50%;
	cursor: pointer;
	color: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 200ms ease-out;
}

.sp-gallery-page__lightbox-close:hover,
.sp-gallery-page__lightbox-close:focus-visible {
	background: rgba(247, 247, 241, 0.2);
	outline: none;
}

body.sp-lightbox-open {
	overflow: hidden;
}