/*!
Theme Name: newtechwood
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: newtechwood
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

newtechwood is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# NTW Fonts — Instrument Sans (variable, self-hosted)
--------------------------------------------------------------*/

@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/InstrumentSans-Variable.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/InstrumentSans-Variable-LatinExt.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Instrument Sans';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/InstrumentSans-Italic-Variable.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Instrument Sans';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/InstrumentSans-Italic-Variable-LatinExt.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*--------------------------------------------------------------
# NTW Design Tokens
--------------------------------------------------------------*/

:root {
	/* Brand Colors — white field, green demoted to accent/CTA */
	--color-primary:       #007A33;   /* CTAs, links, small accents ONLY        */
	--color-primary-dark:  #005925;   /* Hover state for primary                */
	--color-primary-light: #E8F4ED;   /* Sparing tint backgrounds               */
	/* Text/ink ramp — high-contrast (WCAG AA on white and --color-bg).
	 * --color-dark also backs the site's dark surfaces and strong borders. */
	--color-ink:           #101312;   /* Editorial display headlines            */
	--color-dark:          #1F2320;   /* Headings, dark bands, active borders   */
	--color-text:          #3A3F3C;   /* Body copy                              */
	--color-light:         #5C615E;   /* Captions, subtext, placeholders — ≥5.4:1 on bg-alt, AA for small text */
	--color-bg:            #EFF2F0;   /* Soft green-gray page field (echoes newtechwoodintl.com's #E5E9E6, lightened) — white surfaces read as elevated on it */
	--color-bg-alt:        #F6F6F4;   /* Warm near-white alternating sections   */
	--color-white:         #FFFFFF;
	--color-border:        #E7E8E6;
	--color-hero-dark:     #171A18;   /* Near-black photo band                  */

	/* Unified photo scrim — one consistent overlay so white text is always
	 * legible on imagery. Used by every centred-text hero. */
	--color-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.66) 100%);

	/* Bottom-anchored scrim — for heroes/cards whose text sits at the BOTTOM of
	 * the photo (page-hero, series cards). Darkens only where the type lives so
	 * the upper two-thirds of the photograph stays bright and high-contrast. */
	--color-scrim-low: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.34) 42%, rgba(0, 0, 0, 0.06) 72%, rgba(0, 0, 0, 0) 100%);

	/* Typography */
	--font-primary:   'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-size-base: 16px;
	--line-height:    1.6;
	--lh-tight:       1.05;   /* display/hero headlines */
	--lh-heading:     1.15;   /* section headings       */

	/* Typography scale — fluid, editorial, larger than v1.
	 * --fs-display is reserved for the homepage hero; page/series heroes use
	 * --fs-hero. --fs-nav and --fs-meta are scoped to header/nav/footer. */
	--fs-display:    clamp(3.5rem, 7vw, 7.5rem);
	--fs-hero:       clamp(3rem, 5vw, 6rem);
	--fs-section:    clamp(2.5rem, 4vw, 4.25rem);
	--fs-subsection: clamp(1.5rem, 2vw, 2.125rem);
	/* Body floor is a deliberate 1.5rem minimum — the buyer demographic
	 * skews older; never let running copy drop below it. */
	--fs-lead:       clamp(1.625rem, 1.3vw + 1.15rem, 1.875rem);
	--fs-body:       clamp(1.5rem, 1vw + 1.1rem, 1.625rem);
	--fs-nav:        1.0625rem;
	--fs-meta:       0.8125rem;

	/* Spacing */
	--space-xs:  0.5rem;
	--space-sm:  1rem;
	--space-md:  2rem;
	--space-lg:  4rem;
	--space-xl:  8rem;
	--space-2xl: 12rem;
	--section-pad:   clamp(4.5rem, 9vh, 9rem);   /* standard vertical section padding */
	--container-max: 1440px;
	--container-pad: clamp(1.25rem, 4vw, 4rem);

	/* Shape */
	--radius-sm: 6px;
	--radius-md: 14px;

	/* Card surface — ONE definition of what a card looks like on this site.
	 * Introduced 2026-08-13 when the /products/ deck treatment was rolled out
	 * to every card grid. Before this, card radii ran 3/4/6/14px and shadows
	 * ranged from a 1px hairline to a 40px drop depending on which component
	 * you happened to be looking at.
	 *
	 * These control SURFACE ONLY — radius, face, hairline, lift. Each card
	 * component keeps its own size, padding and aspect ratio, which is why
	 * the shared block at the bottom of this file sets no box-model
	 * properties. Change a card's dimensions in its own section, not here. */
	--card-radius: var(--radius-md);
	--card-face: var(--color-white);
	--card-hairline: var(--color-border);
	--card-lift: 0 14px 40px -18px rgba(20, 30, 24, 0.42);
	--card-lift-hover: 0 26px 60px -20px rgba(20, 30, 24, 0.5);

	/* Height of the sticky site header — used to offset other sticky elements
	 * so they don't tuck under the masthead. Mobile override below. */
	--header-offset: 128px;

	/* One shared hero height for every inner page (page/category/series/
	 * products heroes) — the homepage display hero stays its own size. */
	--hero-min-height: clamp(360px, 52vh, 600px);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 300ms ease;
	--transition-slow: 500ms ease;
}

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.section-fade-in {
	animation: fadeIn 0.8s ease-out 500ms forwards;
	opacity: 0;
}

/* Reveal safety net --------------------------------------------
 * Scroll-reveal targets start at opacity:0 and are un-hidden by JS
 * (IntersectionObserver) or CSS animation. If JS is unavailable
 * (.no-js) or the visitor prefers reduced motion, force them to their
 * visible resting state so content is never stranded invisible.
 * When JS + motion are available these rules do not apply and the
 * animations run exactly as designed.
 * ------------------------------------------------------------- */
.no-js .section-fade-in,
.no-js .products-series__card,
.no-js .resources-card,
.no-js .resources-faq__item,
.no-js .products-archive__item,
.no-js .faq-related__item,
.no-js .products-intro__board,
.no-js .ultrashield [class*="anim-"],
.no-js .gallery-grid__item,
.no-js .faqs-grid__item,
.no-js .sample-card,
.no-js .samples__toolbar,
.no-js .samples__notice,
.no-js .intro__title,
.no-js .intro__text,
.no-js .what-sets-apart__title,
.no-js .what-sets-apart__subtitle,
.no-js .what-sets-apart__video,
.no-js .get-started__title,
.no-js .get-started__subtitle,
.no-js .get-started__card {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.section-fade-in,
	.products-series__card,
	.resources-card,
	.resources-faq__item,
	.products-archive__item,
	.faq-related__item,
	.products-intro__board,
	.ultrashield [class*="anim-"],
	.gallery-grid__item,
	.faqs-grid__item,
	.sample-card,
	.samples__toolbar,
	.samples__notice,
	.intro__title,
	.intro__text,
	.what-sets-apart__title,
	.what-sets-apart__subtitle,
	.what-sets-apart__video,
	.get-started__title,
	.get-started__subtitle,
	.get-started__card {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: 300;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: var(--fs-body);
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: var(--color-bg);
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 300;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--color-primary);
}

/* Focus outlines are handled by the global :focus-visible ring — see
 * the "Focus ring" primitive near the link-underline rules. */
a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
/* The _s scaffolding that lived here (and its orphaned 37.5em breakpoint) was
   removed 2026-08-07 — every declaration was superseded by the NTW header
   block at "NTW Site Header" below, and its `.main-navigation ul { display:
   none }` plus a third breakpoint were a standing footgun. */

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

/* :not(body) is required, not cosmetic. This is the _s default for spacing
 * entries in a loop, but body_class() also puts `page` (and `post`) on <body>
 * — so unscoped it gave every Page, the homepage included, a 39px margin
 * below the footer. Same body_class collision as `.search-results`; see the
 * note on `.search-page .search-results`. */
.post:not(body),
.page:not(body) {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

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

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: var(--fs-meta);
	font-weight: 300;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# NTW Global Base
--------------------------------------------------------------*/

body {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: var(--line-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	color: var(--color-ink);
	line-height: var(--lh-heading);
	font-weight: 600;
	letter-spacing: -0.01em;
}

h1 {
	letter-spacing: -0.02em;
}

a {
	color: var(--color-primary);
	transition: color var(--transition-fast);
}

a:hover,
a:focus {
	color: var(--color-primary-dark);
}

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

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.container--narrow {
	max-width: 960px;
	margin-inline: auto;
	padding-inline: var(--space-md);
}

/* Motion primitives — driven by js/motion.js (GSAP). Elements opt in via
 * data-reveal / data-reveal-stagger / data-parallax. The pre-animation state
 * lives here so content never flashes; motion.js clears it. No-JS and
 * reduced-motion users get fully visible content. */
.has-motion [data-reveal],
.has-motion [data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(28px);
}

@media (prefers-reduced-motion: reduce) {
	.has-motion [data-reveal],
	.has-motion [data-reveal-stagger] > * {
		opacity: 1;
		transform: none;
	}
}

/* Cross-page fade — View Transitions API (progressive enhancement). */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: ntw-page-out 180ms ease both;
}

::view-transition-new(root) {
	animation: ntw-page-in 220ms ease both;
}

@keyframes ntw-page-out {
	to { opacity: 0; }
}

@keyframes ntw-page-in {
	from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

/* Focus ring primitive — one consistent keyboard-focus indicator for every
 * interactive element. :where() keeps specificity at zero so component rules
 * can still opt out deliberately (text inputs with underline treatments do).
 * Dark surfaces switch the ring to white below — brand green reads ~1.6:1
 * against --color-dark. */
:where(a, button, [role="button"], [role="radio"], input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

:where(.series-cta, .gallery-lightbox, .site-footer, .search-overlay, .series-hero, .page-hero, .hero, .cvw-hero, .cvw-cta, .usp-hero, .usp-cta, .cart-drawer__overlay) :focus-visible {
	outline-color: var(--color-white);
}

/* The 3D-texture platform script injects a bare, empty credit anchor
 * into <body> on every page — no text, no accessible name. Remove it
 * from both the layout and the accessibility tree. */
a[href="https://lightbeans.com/"]:empty {
	display: none;
}

/* Prop 65 disclosure toggle arrives from product content with an
 * inline bright-green (#5bbd2c, ~2:1 on white) — !important is the
 * only way past an inline style. */
span[data-toggle="prop65"] {
	color: var(--color-primary-dark) !important;
	text-decoration: underline;
}

/* Micro-interaction primitive — animated link underline. Apply the class to
 * inline text links that deserve emphasis (nav, footer, "learn more" links). */
.link-underline {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: left bottom;
	background-repeat: no-repeat;
	text-decoration: none;
	transition: background-size var(--transition-base);
}

.link-underline:hover,
.link-underline:focus-visible {
	background-size: 100% 1px;
}

/* Light text link for button rows on dark hero imagery — sits beside a
 * ghost button as the demoted second action (CTA rhythm: one primary
 * per viewport, everything else quiet). */
.hero-link--light {
	color: var(--color-white);
	font-size: var(--fs-body);
	align-self: center;
}

/* Stays white on hover — see the note on .btn--primary:hover. Without this the
   global `a:hover` turned it dark green against dark hero photography. */
.hero-link--light:hover,
.hero-link--light:focus {
	color: var(--color-white);
}

/* Micro-interaction primitive — media zoom-on-hover for cards/tiles. Wrap the
 * image in .media-zoom; the img scales gently on card hover/focus. */
.media-zoom {
	overflow: hidden;
}

.media-zoom img {
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

a:hover .media-zoom img,
a:focus-visible .media-zoom img,
.media-zoom:hover img {
	transform: scale(1.04);
}

/* Micro-interaction primitive — studio treatment for cut-out product
 * renders. Presents white-background imagery as object photography:
 * warm panel, gentle light falloff, soft contact shadow. multiply
 * blending sinks the render's white field into the panel. */
.media-studio {
	position: relative;
	background: linear-gradient(160deg, #F8F8F6 0%, #EFEFEA 100%);
}

.media-studio img {
	object-fit: contain;
	mix-blend-mode: multiply;
}

.media-studio::before {
	content: '';
	position: absolute;
	left: 14%;
	right: 14%;
	bottom: 10%;
	height: 7%;
	background: radial-gradient(ellipse at center, rgba(31, 35, 32, 0.16) 0%, transparent 70%);
	filter: blur(4px);
}

.media-studio::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 42%, transparent 48%, rgba(31, 35, 32, 0.06) 100%);
	pointer-events: none;
}

/* Editorial stat strip — hairline-ruled row of value/label pairs
 * (template-parts/stat-strip.php). Density from real numbers, not
 * decoration. */
.stat-strip {
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-md);
	background: var(--color-bg);
}

.stat-strip__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-md);
	margin: 0;
}

.stat-strip__item {
	margin: 0;
}

.stat-strip__value {
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--color-ink);
}

.stat-strip__label {
	margin: 0.3rem 0 0;
	font-size: var(--fs-meta);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-light);
}

/* Full-bleed photo divider between long-form sections — the (cleaned)
 * lifestyle photography carries flavor between content blocks. */
.section-divider {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	height: min(52vh, 480px);
	overflow: hidden;
}

.section-divider__image {
	width: 100%;
	height: 118%;
	object-fit: cover;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.media-zoom img,
	.link-underline {
		transition: none;
	}
}

/*--------------------------------------------------------------
# NTW Site Header
--------------------------------------------------------------*/

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow var(--transition-base);
}

/* Pages with hero photography under the header: the masthead floats
 * transparent until the visitor scrolls (js/site.js toggles
 * .is-scrolled), then settles into the normal white masthead. Fixed,
 * so no layout shift. The settle is orchestrated as one slow gesture —
 * background fades in, the utility bar unfolds, logo and type shift
 * color together — rather than an instant switch. */
.has-overlay-header .site-header {
	position: fixed;
	left: 0;
	right: 0;
	transition: background 650ms ease, border-color 650ms ease;
}

.has-overlay-header .site-header:not(.is-scrolled) {
	background: linear-gradient(rgba(10, 14, 12, 0.5), transparent);
	border-bottom-color: transparent;
}

/* The utility row now carries the desktop logo (2026-08-28 header rework),
 * so it can never fold away over hero photography like it used to — the
 * brand has to stay on screen. Over the film it simply goes transparent
 * with the rest of the masthead. */
.has-overlay-header .header-utility {
	transition: background 650ms ease, border-color 650ms ease;
}

.has-overlay-header .site-header:not(.is-scrolled) .header-utility {
	background: transparent;
	border-bottom-color: transparent;
}

.has-overlay-header .header-utility__menu a {
	transition: color 400ms ease;
}

.has-overlay-header .site-header:not(.is-scrolled) .header-utility__menu a {
	color: rgba(255, 255, 255, 0.85);
}

.has-overlay-header .site-header:not(.is-scrolled) .header-utility__menu a:hover {
	color: var(--color-white);
}

/* Over hero photography this is the harder case: 60% white had the labels
   fading into whatever happened to be behind them. The value beside them is
   full white, so 0.85 keeps the label subordinate while staying legible on a
   busy frame. */
.has-overlay-header .site-header:not(.is-scrolled) .header-contact__label {
	color: rgba(255, 255, 255, 0.85);
}

.has-overlay-header .main-navigation a,
.has-overlay-header .site-logo__text,
.has-overlay-header .header-contact__item,
.has-overlay-header .header-actions a,
.has-overlay-header .header-actions button,
.has-overlay-header .menu-toggle {
	transition: color 400ms ease;
}

.has-overlay-header .site-header:not(.is-scrolled) .main-navigation a,
.has-overlay-header .site-header:not(.is-scrolled) .site-logo__text,
.has-overlay-header .site-header:not(.is-scrolled) .header-contact__item,
.has-overlay-header .site-header:not(.is-scrolled) .header-actions a,
.has-overlay-header .site-header:not(.is-scrolled) .header-actions button,
.has-overlay-header .site-header:not(.is-scrolled) .menu-toggle {
	color: var(--color-white);
}

.has-overlay-header .menu-toggle__bar {
	transition: background-color 400ms ease;
}

.has-overlay-header .site-header:not(.is-scrolled) .menu-toggle__bar {
	background-color: var(--color-white);
}

/* Over hero photography the logo cross-fades to a dedicated knockout white
 * file. Flattening the colour logo with brightness(0) invert(1) welded the
 * five diamonds into one silhouette that read as the letter "M"; the knockout
 * keeps the facet lines transparent so the diamonds stay separate. */
.has-overlay-header .site-logo {
	position: relative;
}

.has-overlay-header .site-logo__img,
.has-overlay-header .custom-logo,
.has-overlay-header .site-logo__img--overlay {
	transition: opacity 500ms ease;
}

.has-overlay-header .site-logo__img--overlay {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	opacity: 0;
	pointer-events: none;
}

.has-overlay-header .site-header:not(.is-scrolled) .site-logo__img--overlay {
	opacity: 1;
}

.has-overlay-header .site-header:not(.is-scrolled) .site-logo__img:not(.site-logo__img--overlay),
.has-overlay-header .site-header:not(.is-scrolled) .custom-logo {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.has-overlay-header .site-header,
	.has-overlay-header .header-utility,
	.has-overlay-header .main-navigation a,
	.has-overlay-header .site-logo__img,
	.has-overlay-header .custom-logo,
	.has-overlay-header .menu-toggle__bar {
		transition: none;
	}
}

/* Under the transparent header, hero photos get a whisper of top
 * darkening so the white nav stays legible on bright skies. The inset
 * shadow layers over each hero's own scrim without redefining it. */
.has-overlay-header .page-hero__scrim,
.has-overlay-header .category-hero__scrim,
.has-overlay-header .series-hero__scrim,
.has-overlay-header .products-hero__overlay {
	box-shadow: inset 0 150px 120px -60px rgba(10, 14, 12, 0.55);
}

.site-header.is-sticky {
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
}

/* Header containers: full-bleed — no centering, just edge clearance */
.site-header .container {
	max-width: none;
	padding-inline: 1.5rem;
}

/* Utility Bar — right-aligned icon+text links
--------------------------------------------- */
.header-utility {
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
}

.header-utility .container {
	display: flex;
	align-items: center;
	/* Logo left, utility links right (2026-08-28 header rework). */
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	position: relative;
	z-index: 1;
}

/* The desktop logo lives in this row; below the nav breakpoint the whole
   row is hidden and .site-branding--main takes over. */
.site-branding--utility .site-logo__img,
.site-branding--utility .custom-logo {
	height: 40px;
}

.header-utility__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--color-dark);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.header-utility__phone:hover {
	color: var(--color-primary);
}

.header-utility__nav {
	display: flex;
	align-items: center;
}

.header-utility__menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.75rem;
}

.header-utility__menu li {
	margin: 0;
}

.header-utility__menu a {
	display: inline-flex;
	flex-direction: row-reverse;    /* icon sits to the right of the text */
	align-items: center;
	gap: 0.5rem;
	color: var(--color-light);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--transition-fast);
}

.header-utility__menu a:hover {
	color: var(--color-ink);
}

/* Dual-state custom icons (brown default → gray hover crossfade) */
.util-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 1.6em;
	height: 1.6em;
	flex-shrink: 0;
}

.util-icon__default,
.util-icon__hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 1.6em;
	height: 1.6em;
	transition: opacity var(--transition-fast);
}

.util-icon__hover {
	opacity: 0;
}

.header-utility__menu a:hover .util-icon__default {
	opacity: 0;
}

.header-utility__menu a:hover .util-icon__hover {
	opacity: 1;
}

/* Main Nav
--------------------------------------------- */
.header-main {
	position: relative;    /* required for mega panel absolute positioning */
}

.header-main__inner {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
	position: relative;
	z-index: 1;
}

/* Logo */
.site-logo {
	flex-shrink: 0;
	line-height: 0;
}

.site-logo a,
.site-logo .custom-logo-link {
	display: block;
	line-height: 0;
}

.site-logo__img,
.site-logo .custom-logo {
	height: 48px;
	width: auto;
	display: block;
}

.site-logo__text {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
	letter-spacing: 0.02em;
}

/* Primary Nav */
.main-navigation {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* Desktop header rework (2026-08-28): the logo sits in the utility row, the
   phone/text pair anchors the left of the main row, and the nav + actions
   keep the right side. Below the nav breakpoint the utility row is hidden,
   the main-row logo returns, and the hamburger stays on the right. */
@media screen and (min-width: 1025px) {
	.site-branding--main {
		display: none;
	}
}

/* Phone + text line in the main row (desktop only). */
.header-contact {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-shrink: 0;
}

.header-contact__item {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	text-decoration: none;
	color: var(--color-dark);
	line-height: 1.1;
	transition: color var(--transition-fast);
}

.header-contact__item:hover,
.header-contact__item:focus-visible {
	color: var(--color-primary);
}

/* The CALL/TEXT labels were 11.2px at weight 500 — small enough that the
   wide 0.14em tracking thinned them out rather than making them read as a
   label. Nudged up a step and to 600 so they stay quieter than the number
   beside them (14px) without dissolving into the background. */
.header-contact__label {
	font-size: calc(var(--fs-meta) * 0.9);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-light);
}

.header-contact__value {
	font-size: var(--fs-meta);
	font-weight: 500;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

@media screen and (max-width: 1024.98px) {
	.header-contact {
		display: none;
	}
}

.main-navigation .nav-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation .menu-item > a {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--color-ink);
	font-family: var(--font-primary);
	font-size: var(--fs-nav);
	font-weight: 500;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--transition-fast);
	position: relative;
}

.main-navigation .menu-item > a::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 1rem;
	right: 1rem;
	height: 2px;
	background: var(--color-primary);
	transform: scaleX(0);
	transition: transform var(--transition-fast);
	transform-origin: left;
}

.main-navigation .menu-item > a:hover,
.main-navigation .menu-item.current-menu-item > a,
.main-navigation .menu-item.current-menu-ancestor > a,
.main-navigation .menu-item.mega-active > a {
	color: var(--color-primary);
}

.main-navigation .menu-item > a:hover::after,
.main-navigation .menu-item.current-menu-item > a::after,
.main-navigation .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu-item.mega-active > a::after {
	transform: scaleX(1);
}

/* Standard dropdown (non-mega items like Gallery, Where To Buy, Contact Us) */
.main-navigation .menu-item-has-children {
	position: relative;
}

.main-navigation .sub-menu {
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	min-width: 220px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-top: 2px solid var(--color-primary);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
	z-index: 999;
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children.focus > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu .menu-item > a {
	padding: 0.5rem 1.25rem;
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--color-text);
}

.main-navigation .sub-menu .menu-item > a::after {
	display: none;
}

.main-navigation .sub-menu .menu-item > a:hover {
	color: var(--color-primary);
	background: var(--color-bg);
}

/* Suppress standard dropdown for mega-panel items (Products, Resources) */
.main-navigation .menu-item[data-mega-trigger] > .sub-menu {
	display: none !important;
}

/* Menu Toggle (mobile hamburger) */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	margin-left: auto;
	line-height: 1;
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-dark);
	border-radius: 2px;
	transition: transform var(--transition-base), opacity var(--transition-fast);
}

/* Driven by the button's own aria-expanded rather than a class on an
   ancestor, so the toggle owns its state and stays decoupled from
   #site-navigation (the sheet it opens is #mobile-nav). */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

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

/* Header Actions (search + cart with labels) */
.header-actions {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	margin-left: 0.5rem;
}

.header-actions__label {
	display: none;
}

.header-actions__search {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-primary-dark);
	padding: 0.625rem 0.875rem;
	transition: color var(--transition-fast);
	line-height: 1;
}

.header-actions__search svg {
	width: 23px;
	height: 23px;
}

.header-actions__search:hover {
	color: var(--color-primary);
	border-color: transparent;
}

.header-actions__cart {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--color-primary-dark);
	text-decoration: none;
	padding: 0.625rem 0.875rem;
	transition: color var(--transition-fast);
	line-height: 1;
}

.header-actions__cart svg {
	width: 25px;
	height: 25px;
}

.header-actions__cart:hover {
	color: var(--color-primary);
}

.header-actions__cart-count {
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	margin-left: 0.125rem;
}

.header-actions__cart-count.is-empty {
	display: none;
}

/* =====================================================
   MEGA PANEL — clean full-width panel (Products) and
   simple anchored dropdown (Resources). Positioned
   absolute inside .header-main, directly beneath the nav.
   ===================================================== */
.mega-panel {
	position: absolute;
	top: 100%;
	z-index: 998;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity 220ms ease,
		transform 220ms ease,
		visibility 0s linear 220ms;
	pointer-events: none;
}

/* Keep the panel in the DOM so opacity/transform can animate both
   ways — overrides the UA [hidden] { display:none } that would
   otherwise make the fade-in/out pop instantly. */
.mega-panel[hidden] {
	display: block;
}

.mega-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition:
		opacity 220ms ease,
		transform 220ms ease,
		visibility 0s linear 0s;
}

/* --- Products: full-width white panel, hairline top border --- */
.mega-panel--grid {
	left: 0;
	right: 0;
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 24px 48px -24px rgba(16, 19, 18, 0.18);
}

.mega-panel__inner {
	padding-block: var(--space-md);
}

.mega-panel__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-md);
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-panel__cell {
	margin: 0;
}

.mega-panel__item {
	display: block;
	text-decoration: none;
	outline-offset: 4px;
}

.mega-panel__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-sm);
	background: var(--color-bg-alt);
}

.mega-panel__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-sm);
}

.mega-panel__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--color-bg-alt);
	border-radius: var(--radius-sm);
}

.mega-panel__name {
	display: inline-block;
	margin-top: 0.75rem;
	color: var(--color-ink);
	font-size: var(--fs-nav);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: left bottom;
	background-repeat: no-repeat;
	transition: background-size var(--transition-base), color var(--transition-fast);
}

.mega-panel__item:hover .mega-panel__name,
.mega-panel__item:focus-visible .mega-panel__name {
	color: var(--color-primary);
	background-size: 100% 1px;
}

/* Trailing "All products →" cell */
.mega-panel__cell--all {
	display: flex;
}

.mega-panel__all {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0.5rem;
	width: 100%;
	padding: var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-ink);
	text-decoration: none;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.mega-panel__all:hover,
.mega-panel__all:focus-visible {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.mega-panel__all svg {
	transition: transform var(--transition-base);
}

.mega-panel__all:hover svg,
.mega-panel__all:focus-visible svg {
	transform: translateX(4px);
}

.mega-panel__all-label {
	font-size: var(--fs-nav);
	font-weight: 500;
	line-height: 1.3;
}

/* --- Resources: compact text dropdown (site.js sets `left`) --- */
.mega-panel--dropdown {
	min-width: 240px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: 0 16px 40px -16px rgba(16, 19, 18, 0.22);
	overflow: hidden;
}

.mega-panel__list {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
}

.mega-panel__list li {
	margin: 0;
}

.mega-panel__list-link {
	display: block;
	padding: 0.625rem 1.5rem;
	color: var(--color-text);
	font-size: var(--fs-nav);
	font-weight: 400;
	text-decoration: none;
	transition: color var(--transition-fast), background var(--transition-fast);
}

.mega-panel__list-link:hover,
.mega-panel__list-link:focus-visible {
	color: var(--color-primary);
	background: var(--color-bg-alt);
}

/* =====================================================
   SEARCH OVERLAY — a white sheet pulled down over the masthead.
   Deliberately the same material as .mega-panel (white field, hairline
   bottom rule, soft drop shadow, 220ms slide) so search reads as part of
   the header system rather than a separate dark modal. Anchored to the
   viewport, not the header, because the masthead's height changes between
   pages (the utility bar folds away on .has-overlay-header) — measuring it
   would put the panel in a different place on every template.
   ===================================================== */
.search-overlay {
	/* One shared duration for scrim + panel. js/site.js re-applies [hidden] on
	   the first transitionend that bubbles up from either child, so if these
	   ever drift apart the faster one truncates the slower one's animation. */
	--search-ease: 420ms;

	position: fixed;
	inset: 0;
	z-index: 2000;
	visibility: hidden;
	transition: visibility 0s linear var(--search-ease);
}

/* visibility is stepped, not eased: it must flip the instant we open, or the
   autofocus in js/site.js lands on a still-hidden input and silently does
   nothing. On close it waits out the fade. Same pattern as .mega-panel. */
.search-overlay.is-open {
	visibility: visible;
	transition: visibility 0s linear 0s;
}

/* Load-bearing: the UA sheet gives [hidden] `display: none`, and you cannot
   transition out of display:none. openSearch() removes the attribute and adds
   .is-open in the same task, so with display:none the browser coalesces both
   into one recalc, never sees the closed state, and skips the open animation
   entirely — the panel just appears. Keeping it displayed (it stays
   visibility:hidden, so it is inert and untabbable) gives the transition a
   real starting style. Exactly why .mega-panel[hidden] does the same. */
.search-overlay[hidden] {
	display: block;
}

/* Scrim — flat, no gradient. Matches the cart drawer's veil so the two
   header-level overlays feel like one system. */
.search-overlay__scrim {
	position: absolute;
	inset: 0;
	background: rgba(16, 19, 18, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	cursor: pointer;
	transition: opacity var(--search-ease) ease;
}

.search-overlay.is-open .search-overlay__scrim {
	opacity: 1;
}

.search-overlay__panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 24px 48px -24px rgba(16, 19, 18, 0.18);
	transform: translateY(-100%);
	transition: transform var(--search-ease) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.search-overlay.is-open .search-overlay__panel {
	transform: translateY(0);
}

/* The sheet itself slides as a solid surface (fading it would let the page
   show through mid-slide and read as muddy); the fade lives on the contents
   instead, rising in behind the leading edge on a short stagger. Reads as one
   gesture rather than three separate animations.

   No transition in the resting state on purpose — the delays below would
   otherwise also apply on close, and js/site.js re-applies [hidden] on the
   FIRST transitionend bubbling out of the overlay. A 320ms row finishing
   before the 420ms sheet would cut the close animation short. Declaring the
   transition only in the .is-open state means these animate in and snap back
   out, leaving the panel and scrim (both --search-ease) to time the close. */
.search-overlay__bar,
.search-overlay__form,
.search-overlay__foot {
	opacity: 0;
	transform: translateY(10px);
}

.search-overlay.is-open .search-overlay__bar,
.search-overlay.is-open .search-overlay__form,
.search-overlay.is-open .search-overlay__foot {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 340ms ease, transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.search-overlay.is-open .search-overlay__bar {
	transition-delay: 120ms;
}

.search-overlay.is-open .search-overlay__form {
	transition-delay: 180ms;
}

.search-overlay.is-open .search-overlay__foot {
	transition-delay: 240ms;
}

/* Content sits on the site's standard container rail, left-aligned — same
   as .page-hero__inner and the mega panel. */
.search-overlay__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--container-pad) clamp(2rem, 4vh, 3rem);
}

/* Top row stands in for the masthead band it covers: eyebrow left,
   close right, hairline underneath. */
.search-overlay__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--color-border);
}

.search-overlay__eyebrow {
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.search-overlay__close {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-light);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.5rem 0;
	line-height: 1;
	transition: color var(--transition-fast);
}

.search-overlay__close:hover,
.search-overlay__close:focus-visible {
	color: var(--color-ink);
	border-color: transparent;
}

/* The field itself is the hero of the panel — editorial display type on a
   2px rule that takes the brand green on focus. Width is fixed at 2px in
   both states so focus never nudges the layout. */
/* searchform.php is shared — the overlay, the results hero, 404.php and
   content-none.php all render it. Base rules therefore stay context-free and
   presentable on a plain light background; the overlay- and hero-specific
   sizing lives in the scoped rules below. */
.search-overlay__form {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	border-bottom: 2px solid var(--color-border);
	transition: border-color var(--transition-base);
}

.search-overlay__form:focus-within {
	border-bottom-color: var(--color-primary);
}

/* Both the parent-scoping and the :focus half of this selector are
 * load-bearing. The _s base (lines ~786 and ~808) styles `input[type="search"]`
 * (0,1,1) and `input[type="search"]:focus` (0,2,1) — a grey 1px box and #111
 * text. A lone `.search-overlay__input` class sits at (0,1,0) and loses to
 * both, so the field sprouts a border the moment it takes focus. Qualifying
 * through the form lifts these to (0,2,0)/(0,3,0), which outrank _s outright
 * — no reliance on source order. The .search-hero and .search-overlay
 * overrides below/above match at (0,2,0) and win on order, as intended. */
.search-overlay__form .search-overlay__input,
.search-overlay__form .search-overlay__input:focus {
	flex: 1;
	min-width: 0;
	background: none;
	border: none;
	border-radius: 0;
	color: var(--color-ink);
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.2;
	padding: 0 0 0.5rem;
	outline: none;
}

/* The panel's field is the hero of the overlay — display-scale type. */
.search-overlay .search-overlay__form {
	margin-top: clamp(2rem, 5vh, 3.5rem);
}

.search-overlay .search-overlay__input {
	font-size: clamp(1.75rem, 3.2vw, 3rem);
	letter-spacing: -0.01em;
}

.search-overlay__input::placeholder {
	color: var(--color-light);
	opacity: 1;
}

/* Chrome/Edge draw a native (blue) clear "x" inside search inputs — off-brand,
 * and we already ship a submit control. */
.search-overlay__input::-webkit-search-cancel-button,
.search-overlay__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Circular hairline button — echoes the homepage hero's scroll cue. */
.search-overlay__submit {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(3rem, 4vw, 3.5rem);
	height: clamp(3rem, 4vw, 3.5rem);
	margin-bottom: 0.5rem;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	cursor: pointer;
	color: var(--color-dark);
	padding: 0;
	line-height: 1;
	transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

/* Deliberately NOT :focus-within — the field is autofocused the moment the
   panel opens, so a focus-within fill would leave the button permanently
   green and kill it as an affordance. Fill on its own hover/focus only. */
.search-overlay__submit:hover,
.search-overlay__submit:focus-visible {
	color: var(--color-white);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

/* Footer row: popular destinations on the left, keyboard hint on the right. */
.search-overlay__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
	margin-top: clamp(1.5rem, 3vh, 2.25rem);
}

.search-overlay__suggest {
	display: flex;
	align-items: baseline;
	gap: var(--space-sm) var(--space-md);
	flex-wrap: wrap;
	min-width: 0;
}

.search-overlay__suggest-label {
	margin: 0;
	color: var(--color-light);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.search-overlay__suggest-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.search-overlay__suggest-link {
	color: var(--color-text);
	font-family: var(--font-primary);
	font-size: var(--fs-nav);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.search-overlay__suggest-link:hover,
.search-overlay__suggest-link:focus-visible {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

.search-overlay__hint {
	margin: 0;
	color: var(--color-light);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.search-overlay__bar {
		padding: 1rem 0;
	}

	.search-overlay__foot {
		margin-top: var(--space-md);
	}

	/* The keyboard hint is meaningless on touch — and the popular links are
	   the more useful half of this row on a small screen. */
	.search-overlay__hint {
		display: none;
	}
}

/* Plain cross-fade — no slide, no stagger. The panel keeps an opacity
   transition so the transitionend that js/site.js waits on still fires. */
@media (prefers-reduced-motion: reduce) {
	.search-overlay__panel {
		transform: none;
		opacity: 0;
		transition: opacity var(--search-ease) ease;
	}

	.search-overlay.is-open .search-overlay__panel {
		opacity: 1;
	}

	.search-overlay__bar,
	.search-overlay__form,
	.search-overlay__foot {
		transform: none;
	}

	.search-overlay.is-open .search-overlay__bar,
	.search-overlay.is-open .search-overlay__form,
	.search-overlay.is-open .search-overlay__foot {
		transform: none;
		transition: none;
		transition-delay: 0s;
	}
}

/* =====================================================
   CART DRAWER — right-side slide-in
   ===================================================== */
.cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 2100;
	visibility: hidden;
	pointer-events: none;
}

.cart-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.cart-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 16, 14, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity var(--transition-base);
}

.cart-drawer.is-open .cart-drawer__overlay {
	opacity: 1;
}

.cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18);
	transform: translateX(100%);
	transition: transform var(--transition-slow);
	will-change: transform;
}

.cart-drawer.is-open .cart-drawer__panel {
	transform: translateX(0);
}

.cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 1px solid var(--color-border);
}

/* No longer an <h2> (it labels the drawer, not the page), so the heading
   line-height is restated here to keep the rendering identical. */
.cart-drawer__title {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: var(--lh-heading);
	letter-spacing: 0.02em;
	color: var(--color-dark);
}

.cart-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-light);
	padding: 0.25rem;
	margin: -0.25rem;
	transition: color var(--transition-fast);
}

.cart-drawer__close:hover,
.cart-drawer__close:focus-visible {
	color: var(--color-dark);
	border-color: transparent;
}

.cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
}

/* ---- WooCommerce mini-cart inside the drawer ---- */
.cart-drawer__body .woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cart-drawer__body .woocommerce-mini-cart-item {
	position: relative;
	min-height: 64px;
	padding: 1rem 0 1rem 1.75rem;    /* left gutter for remove button */
	border-bottom: 1px solid var(--color-border);
}

.cart-drawer__body .woocommerce-mini-cart-item a:not(.remove) {
	display: block;
	padding-right: 80px;             /* clears the thumbnail on the right */
	min-height: 64px;
	color: var(--color-dark);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	line-height: 1.35;
	text-decoration: none;
}

.cart-drawer__body .woocommerce-mini-cart-item a:not(.remove):hover {
	color: var(--color-primary);
}

.cart-drawer__body .woocommerce-mini-cart-item img {
	position: absolute;
	top: 1rem;
	right: 0;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
}

.cart-drawer__body .woocommerce-mini-cart-item .quantity {
	display: block;
	padding-right: 80px;
	margin-top: 0.35rem;
	color: var(--color-light);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
}

.cart-drawer__body .woocommerce-mini-cart-item .woocommerce-Price-amount {
	color: var(--color-text);
	font-weight: 300;
}

.cart-drawer__body .woocommerce-mini-cart-item a.remove {
	position: absolute;
	left: 0;
	top: 1.05rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-bg-alt);
	color: var(--color-light) !important;
	font-size: var(--fs-meta);
	line-height: 1;
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.cart-drawer__body .woocommerce-mini-cart-item a.remove:hover {
	background: var(--color-primary);
	color: var(--color-white) !important;
}

.cart-drawer__body .woocommerce-mini-cart__empty-message {
	margin: 2rem 0;
	text-align: center;
	color: var(--color-light);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
}

.cart-drawer__body .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 1.25rem 0 0;
	padding-top: 1.25rem;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	color: var(--color-dark);
}

.cart-drawer__body .woocommerce-mini-cart__total strong {
	font-weight: 300;
	letter-spacing: 0.02em;
}

.cart-drawer__body .woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-primary);
}

.cart-drawer__body .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 1.5rem 0 0;
}

.cart-drawer__body .woocommerce-mini-cart__buttons .button {
	display: block;
	width: 100%;
	padding: 0.875rem 1rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border-radius: 2px;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.cart-drawer__body .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: transparent;
	color: var(--color-dark);
	border: 1px solid var(--color-border);
}

.cart-drawer__body .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
	border-color: var(--color-dark);
	background: var(--color-bg-alt);
}

.cart-drawer__body .woocommerce-mini-cart__buttons .button.checkout {
	background: var(--color-primary);
	color: var(--color-white);
	border: 1px solid var(--color-primary);
}

.cart-drawer__body .woocommerce-mini-cart__buttons .button.checkout:hover {
	background: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

/* Responsive
--------------------------------------------- */
@media screen and (max-width: 1400px) {
	.main-navigation .menu-item > a {
		padding: 0.5rem 0.75rem;
	}
}

@media screen and (max-width: 1200px) {
	.main-navigation .menu-item > a {
		padding: 0.5rem 0.625rem;
	}
}

/* NAV BREAKPOINT — the hamburger and #mobile-nav take over here, which is why
   the old max-width:1024px squeeze block is gone: it only existed to cram the
   desktop nav into portrait-tablet widths.
   Mirrored in THREE other places, change them together:
     • the --header-offset override (search "--header-offset: 68px")
     • the .mobile-nav section at the end of this file
     • NAV_DESKTOP in js/site.js
   The .98/.99 pair is deliberate — a plain 1024/1025 split leaves fractional
   viewport widths (browser zoom, fractional DPI scaling) matching neither. */
@media screen and (max-width: 1024.98px) {
	.header-utility {
		display: none;
	}

	.mega-panel {
		display: none;
	}

	.menu-toggle {
		display: flex;
	}

	/* The desktop menu is not restyled into a sheet any more — the sheet is
	   its own element (template-parts/mobile-nav.php), so this just hides it. */
	.main-navigation .nav-menu {
		display: none;
	}

	.header-main__inner {
		padding-block: 0.75rem;
	}

	.site-logo__img,
	.site-logo .custom-logo {
		height: 44px;
	}
}

/*--------------------------------------------------------------
# NTW Button Utilities
--------------------------------------------------------------*/

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 2rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
	white-space: nowrap;
}

.btn--primary {
	background: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

/* WHY EVERY VARIANT BELOW RESTATES `color` ON HOVER:
   the global `a:hover` rule near the top of this file sets
   `color: var(--color-primary-dark)`, and its specificity (0,1,1 — one class
   worth of pseudo-class plus a type) BEATS a bare `.btn--primary` (0,1,0).
   A variant that sets colour only at rest therefore loses it on hover: the
   primary button was painting #005925 text on a #005925 background and
   disappearing under the cursor. `.btn--primary:hover` is (0,2,0) and wins.
   Any new .btn variant needs the same treatment. */
.btn--primary:hover,
.btn--primary:focus {
	background: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
}

.btn--secondary {
	background: transparent;
	color: var(--color-dark);
	border-color: var(--color-dark);
}

.btn--secondary:hover,
.btn--secondary:focus {
	background: var(--color-bg-alt);
	border-color: var(--color-dark);
	color: var(--color-dark);
}

/* Dark-surface variant. The pattern was already being hand-rolled inside the
   <style> blocks of ultrashield-page.php and composite-vs-wood-page.php; it
   lives here now so any band with a dark ground can reach for it. A secondary
   button on a dark band is near-invisible — `--color-dark` ink on an almost
   equally dark ground — which is what it was doing on the /colors/ CTA. */
.btn--ghost {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.6);
}

.btn--ghost:hover,
.btn--ghost:focus {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--color-white);
	color: var(--color-white);
}

.btn--sm {
	padding: 0.625rem 1.5rem;
	font-size: var(--fs-meta);
}

.btn--lg {
	padding: 1rem 2.5rem;
	font-size: var(--fs-body);
}

/*--------------------------------------------------------------
# NTW Homepage Sections
--------------------------------------------------------------*/

/* Hero Section — full-viewport cinematic frame (Concept B). The
 * overlay header floats transparent above it; see the front-page
 * header rules near the .site-header block. */
.hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	min-height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-hero-dark);
}

.hero__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__overlay {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: 100vh;
	padding: var(--space-xl) clamp(2rem, 6vw, 7rem) 9vh;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(8, 12, 10, 0.85) 100%);
}

.hero__content {
	width: 100%;
	max-width: 1240px;
	text-align: left;
	color: var(--color-white);
}

.hero__eyebrow {
	margin: 0 0 1.2rem;
	font-size: var(--fs-meta);
	font-weight: 600;
	/* Rendered as the page H1 (semantic swap with the tagline) — keep the
	   body line-height it had as a <p> so the heading base rule can't
	   reflow it. */
	line-height: var(--line-height);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #9FD4B4;
}

.hero__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3rem;
	margin-top: 2.2rem;
}

/* Scroll cue — a real button that advances to the next section (site.js).
   Was a "SCROLL" word plus a hairline; now a quiet circled arrow so the cue
   reads as something you press rather than a caption. */
.hero__scroll {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	background: transparent;
	color: var(--color-white);
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-base);
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.9);
}

.hero__scroll:active {
	transform: translateY(2px);
}

.hero__scroll-arrow {
	width: 1.25rem;
	height: 1.25rem;
	animation: ntw-hero-nudge 2.4s ease-in-out infinite;
}

@keyframes ntw-hero-nudge {
	0%, 100% { transform: translateY(-2px); }
	50%      { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll-arrow {
		animation: none;
	}
}

@media (max-width: 768px) {
	.hero__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.6rem;
	}
}

.hero__title {
	font-family: var(--font-primary);
	font-size: var(--fs-display);
	font-weight: 600;
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-md);
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.hero__subtitle {
	font-family: var(--font-primary);
	font-size: var(--fs-lead);
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 var(--space-md);
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.88);
}

.hero__row .hero__subtitle {
	margin: 0 0 1.4rem;
}

/* Ghost CTA — the cinematic hero keeps its one green primary for the
 * closing samples section instead. */
.hero__cta {
	display: inline-block;
	padding: 0.95rem 1.8rem;
	background: transparent;
	color: var(--color-white);
	text-align: center;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.65);
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: var(--fs-meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background var(--transition-base), border-color var(--transition-base);
}

.hero__cta:hover,
.hero__cta:focus {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--color-white);
	color: var(--color-white);
}

@media screen and (max-width: 768px) {
	.hero__overlay {
		padding: var(--space-lg) var(--space-md) 8vh;
	}

	.hero__scroll {
		display: none;
	}
}

/* -- Homepage chapters — full-viewport category scenes -------- */

.home-chapter {
	position: relative;
	height: 92vh;
	overflow: hidden;
	background: var(--color-hero-dark);
}

.home-chapter__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 118%;
	object-fit: cover;
}

.home-chapter::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 12, 10, 0.78) 0%, rgba(8, 12, 10, 0.18) 42%, rgba(8, 12, 10, 0.05) 70%);
}

.home-chapter__body {
	position: absolute;
	left: clamp(2rem, 6vw, 7rem);
	right: clamp(2rem, 6vw, 7rem);
	bottom: 3.6rem;
	z-index: 2;
	color: var(--color-white);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3rem;
}

.home-chapter__kicker {
	margin: 0 0 0.8rem;
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #9FD4B4;
	text-shadow: 0 1px 2px rgba(8, 12, 10, 0.55), 0 1px 12px rgba(8, 12, 10, 0.45);
}

.home-chapter__title {
	margin: 0;
	font-family: var(--font-primary);
	font-size: clamp(2.6rem, 4.6vw, 4.4rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.02;
	color: var(--color-white);
	/* Same legibility recipe as the inner-page heroes: tight edge shadow for
	   definition against busy detail (railings, foliage), wide halo for lift. */
	text-shadow: 0 1px 2px rgba(8, 12, 10, 0.45), 0 2px 22px rgba(8, 12, 10, 0.5);
}

.home-chapter__desc {
	max-width: 44ch;
	margin: 1rem 0 0;
	font-size: var(--fs-body);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 2px rgba(8, 12, 10, 0.5), 0 1px 14px rgba(8, 12, 10, 0.45);
}

.home-chapter__cta {
	flex-shrink: 0;
	display: inline-block;
	padding: 0.95rem 1.8rem;
	border: 1px solid rgba(255, 255, 255, 0.65);
	color: var(--color-white);
	text-decoration: none;
	font-size: var(--fs-meta);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background var(--transition-base), border-color var(--transition-base);
}

.home-chapter__cta:hover,
.home-chapter__cta:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--color-white);
	color: var(--color-white);
}

@media (max-width: 768px) {
	.home-chapter {
		/* min-height, not height: on short phones (iPhone SE, 667px) the
		   stacked copy can need more room than 74svh — a fixed height plus
		   overflow:hidden clipped the kicker/title off the top (seen on the
		   Fencing chapter). In-flow body below + min-height keeps the
		   cinematic scale but lets a tall chapter grow instead of clip.
		   svh, not vh: with the URL bar visible, vh overflows the visible
		   viewport and the corner copy can sit under the browser chrome. */
		height: auto;
		min-height: 74svh;
		display: flex;
		align-items: flex-end;
	}

	.home-chapter__body {
		/* In flow so the copy's height counts toward the chapter's. The
		   top padding reserves a band of photo above the text even when
		   the copy is what sets the height. */
		position: static;
		width: 100%;
		margin: 0;
		padding: clamp(7rem, 24svh, 12rem) 2rem 3.6rem;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.4rem;
	}

	/* Stacked mobile copy climbs far above the desktop scrim's coverage
	   (which is nearly transparent past 42% height) — deepen and raise the
	   gradient so the whole text column sits on darkened photo. */
	.home-chapter::after {
		background: linear-gradient(
			to top,
			rgba(8, 12, 10, 0.82) 0%,
			rgba(8, 12, 10, 0.6) 45%,
			rgba(8, 12, 10, 0.28) 72%,
			rgba(8, 12, 10, 0.08) 100%
		);
	}
}

/* -- Homepage UltraShield + sustainability interstitial ------- */

.home-us {
	background: var(--color-hero-dark);
	color: var(--color-white);
	padding: 8rem 0;
}

.home-us__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--space-md);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 5rem;
	align-items: center;
}

.home-us__title {
	margin: 0 0 1.4rem;
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.home-us__lede {
	margin: 0 0 2rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
}

.home-us__cards {
	display: grid;
	gap: 1px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.home-us__card {
	background: var(--color-hero-dark);
	padding: 1.6rem 1.8rem;
}

.home-us__card h3 {
	margin: 0 0 0.4rem;
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--color-white);
}

.home-us__card p {
	margin: 0;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.98rem;
}

.home-us__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem 2.6rem;
	margin: 2.4rem 0 0;
}

.home-us__stat dt {
	font-size: 1.7rem;
	font-weight: 600;
	color: #9FD4B4;
}

.home-us__stat dd {
	margin: 0.2rem 0 0;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.home-us__board img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
}

@media (max-width: 900px) {
	.home-us__inner {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
}

/* -- Homepage closing samples invitation ---------------------- */

.home-close {
	padding: 8rem var(--space-md);
	text-align: center;
}

.home-close__title {
	margin: 0 0 1rem;
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.home-close__body {
	max-width: 46ch;
	margin: 0 auto 2.4rem;
	font-size: var(--fs-lead);
	line-height: 1.7;
}

/* Intro / Trusted Choice Section */
.intro {
	background: var(--color-white);
	width: 100%;
	padding: var(--section-pad) var(--container-pad);
}

/* Asymmetric editorial split: headline left, copy right, offset start. */
.intro__container {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--space-md) var(--space-lg);
	align-items: start;
}

.intro__title {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 600;
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	color: var(--color-ink);
	margin: 0;
	max-width: 18ch;
}

.intro__text {
	font-family: var(--font-primary);
	font-size: var(--fs-lead);
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-text);
	max-width: 58ch;
	padding-top: 0.5rem;
}

@media screen and (max-width: 900px) {
	.intro__container {
		grid-template-columns: 1fr;
	}

	.intro__text {
		padding-top: 0;
	}
}

.intro__text p {
	margin: 0 0 var(--space-sm);
}

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

@media screen and (max-width: 768px) {
	.intro {
		padding: var(--space-lg) var(--space-md);
	}
}

/* UltraShield Section */
.ultrashield {
	background: var(--color-bg-alt);
	padding: var(--section-pad) var(--space-lg) var(--section-pad) 0;
	width: 100%;
	margin: 0;
	border: 0;
}

.ultrashield__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--space-xl);
	width: 100%;
	margin: 0;
	padding: 0;
}

.ultrashield__board-section {
	position: relative;
}

/* UltraShield Animation States - Default (Hidden) */
.anim-board {
	opacity: 0;
	transform: translateX(-40px);
	transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s;
}

.anim-bubble-cap {
	opacity: 0;
	transform: scale(0);
	transform-origin: center;
	transition: opacity 0.6s ease-out 1.1s, transform 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.1s;
}

.anim-bubble-core {
	opacity: 0;
	transform: scale(0);
	transform-origin: center;
	transition: opacity 0.6s ease-out 1.3s, transform 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.3s;
}

.anim-badge-1 {
	opacity: 0;
	transform: scale(0);
	transform-origin: center;
	transition: opacity 0.5s ease-out 0.6s, transform 0.5s cubic-bezier(0.34,1.5,0.64,1) 0.6s;
}

.anim-badge-2 {
	opacity: 0;
	transform: scale(0);
	transform-origin: center;
	transition: opacity 0.5s ease-out 0.8s, transform 0.5s cubic-bezier(0.34,1.5,0.64,1) 0.8s;
}

.anim-badge-3 {
	opacity: 0;
	transform: scale(0);
	transform-origin: center;
	transition: opacity 0.5s ease-out 1s, transform 0.5s cubic-bezier(0.34,1.5,0.64,1) 1s;
}

.anim-title {
	opacity: 0;
	transition: opacity 0.8s ease-out 0.4s;
}

.anim-card-cap {
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 0.6s ease-out 1.5s, transform 0.6s ease-out 1.5s;
}

.anim-card-core {
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 0.6s ease-out 1.7s, transform 0.6s ease-out 1.7s;
}

.anim-connector-line {
	opacity: 0;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: opacity 0.4s ease-out 1.4s, stroke-dashoffset 0.9s ease-out 1.8s;
}

/* Trigger visible state - all elements animate in */
.ultrashield.is-visible .anim-board {
	opacity: 1;
	transform: translateX(0);
}

.ultrashield.is-visible .anim-bubble-cap {
	opacity: 1;
	transform: scale(1);
}

.ultrashield.is-visible .anim-bubble-core {
	opacity: 1;
	transform: scale(1);
}

.ultrashield.is-visible .anim-badge-1 {
	opacity: 1;
	transform: scale(1);
}

.ultrashield.is-visible .anim-badge-2 {
	opacity: 1;
	transform: scale(1);
}

.ultrashield.is-visible .anim-badge-3 {
	opacity: 1;
	transform: scale(1);
}

.ultrashield.is-visible .anim-title {
	opacity: 1;
}

.ultrashield.is-visible .anim-card-cap {
	opacity: 1;
	transform: translateX(0);
}

.ultrashield.is-visible .anim-card-core {
	opacity: 1;
	transform: translateX(0);
}

.ultrashield.is-visible .anim-connector-line {
	opacity: 1;
	stroke-dashoffset: 0 !important;
}

/* UltraShield Content */
.ultrashield__board-section {
	position: relative;
}

.ultrashield__board-image img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(4px 8px 12px rgba(0,0,0,0.22));
}

.ultrashield__circle {
	position: absolute;
	width: 100px;
	height: 100px;
	border: 3px solid white;
	border-radius: 50%;
	background: rgba(240,228,210,0.4);
}

.ultrashield__circle--cap {
	top: 32%;
	left: 48%;
}

.ultrashield__circle--core {
	top: 70%;
	left: 50%;
}

.ultrashield__content-section {
	position: relative;
}

.ultrashield__title {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 300;
	margin: 0 0 var(--space-lg);
	color: #1a1a1a;
}

.ultrashield__title sup {
	font-size: 0.7em;
	vertical-align: super;
	margin-left: 0.2em;
}

.ultrashield__badges {
	display: flex;
	gap: 2rem;
	margin-bottom: var(--space-lg);
	justify-content: flex-start;
}

.ultrashield__badge {
	width: 120px;
	height: 120px;
	flex-shrink: 0;
}

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

.ultrashield__connectors {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}

.ultrashield__card {
	background: white;
	border: 2px solid #999;
	border-radius: 8px;
	padding: 2.5rem;
	margin-bottom: 2rem;
}

.ultrashield__card-title {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-primary-dark);
	margin: 0 0 1rem;
}

.ultrashield__card-description {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: #666;
	line-height: 1.7;
	margin: 0;
}

@media screen and (max-width: 1024px) {
	.ultrashield__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.ultrashield__title {
		font-size: var(--fs-section);
	}
}

@media screen and (max-width: 768px) {
	.ultrashield {
		padding: var(--space-lg);
	}

	.ultrashield__inner {
		gap: var(--space-md);
	}

	.ultrashield__title {
		font-size: var(--fs-body);
		margin-bottom: var(--space-md);
	}

	.ultrashield__badges {
		gap: 1rem;
		margin-bottom: var(--space-md);
	}

	.ultrashield__badge {
		width: 56px;
		height: 56px;
	}

	.ultrashield__card {
		padding: 1rem;
		margin-bottom: 1rem;
	}

	.ultrashield__card-title {
		font-size: var(--fs-meta);
	}

	.ultrashield__card-description {
		font-size: var(--fs-meta);
	}
}

/* UltraShield — Mobile stacked layout (replaces the SVG below 768px) */
.us-mobile {
	display: none;
}

@media screen and (max-width: 768px) {
	.ultrashield {
		padding: var(--space-lg) var(--space-md);
	}

	.ultrashield .us-root {
		display: none;
	}

	.us-mobile {
		display: block;
		font-family: var(--font-primary);
	}

	.us-mobile__board {
		text-align: center;
		margin-bottom: var(--space-md);
	}

	.us-mobile__board-img {
		width: 100%;
		max-width: 320px;
		height: auto;
		display: inline-block;
		mix-blend-mode: multiply;
	}

	.us-mobile__title {
		font-family: var(--font-primary);
		font-size: var(--fs-section);
		font-weight: 300;
		line-height: 1.2;
		letter-spacing: -0.01em;
		color: #1a1a1a;
		text-align: center;
		margin: 0 0 var(--space-md);
	}

	.us-mobile__title strong {
		font-weight: 300;
	}

	.us-mobile__title sup {
		font-size: 0.5em;
		vertical-align: super;
	}

	.us-mobile__badges {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1.25rem;
		margin: 0 0 var(--space-lg);
	}

	.us-mobile__badge {
		display: inline-flex;
		width: 64px;
		height: 64px;
	}

	.us-mobile__badge-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.us-mobile__cards {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.us-mobile__card {
		background: var(--color-white);
		border: 1px solid #ccc;
		border-radius: 7px;
		padding: 1.125rem 1.25rem;
	}

	.us-mobile__card-title {
		font-family: var(--font-primary);
		font-size: var(--fs-body);
		font-weight: 300;
		color: var(--color-primary-dark);
		margin: 0 0 0.5rem;
	}

	.us-mobile__card-desc {
		font-family: var(--font-primary);
		font-size: var(--fs-meta);
		font-weight: 300;
		line-height: 1.6;
		color: #444;
		margin: 0;
	}
}

/* What Sets Apart Section */
.what-sets-apart {
	background: var(--color-bg-alt);
	padding: var(--space-xl) var(--space-lg);
	width: 100%;
}

/* Left-aligned editorial header, full-width media below. */
.what-sets-apart__container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: left;
}

.what-sets-apart__title {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 600;
	margin: 0 0 1rem;
	color: var(--color-ink);
	letter-spacing: -0.02em;
}

.what-sets-apart__subtitle {
	font-family: var(--font-primary);
	font-size: var(--fs-lead);
	font-weight: 400;
	color: var(--color-text);
	margin: 0 0 var(--space-lg);
	line-height: 1.7;
	max-width: 62ch;
}

.what-sets-apart__video {
	margin-top: var(--space-lg);
}

.what-sets-apart__player {
	position: relative;
	max-width: none;
	margin: 0;
}

.what-sets-apart__thumbnail {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}

.what-sets-apart__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.what-sets-apart__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.what-sets-apart__play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	padding: 0;
	border: 0;
	background: rgba(255,255,255,0.95);
	border-radius: 50%;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--transition-base), transform var(--transition-base);
	z-index: 10;
}

.what-sets-apart__play-btn:hover {
	background: var(--color-white);
	transform: translate(-50%, -50%) scale(1.15);
}

.what-sets-apart__play-btn svg {
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.what-sets-apart {
		padding: var(--space-lg) var(--space-md);
	}

	.what-sets-apart__title {
		font-size: var(--fs-section);
	}

	.what-sets-apart__play-btn {
		width: 60px;
		height: 60px;
	}
}

/* Sustainable Innovation Section */
.sustainable-innovation {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 620px;
	padding: var(--space-xl) var(--space-lg);
	overflow: hidden;
	background-color: var(--color-dark);
}

.sustainable-innovation__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

.sustainable-innovation__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.28) 0%,
		rgba(0, 0, 0, 0.40) 60%,
		rgba(0, 0, 0, 0.46) 100%
	);
}

.sustainable-innovation__inner {
	position: relative;
	z-index: 2;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	color: var(--color-white);
}

.sustainable-innovation__title {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 600;
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-md);
	color: var(--color-white);
}

.sustainable-innovation__text {
	font-family: var(--font-primary);
	font-size: var(--fs-lead);
	font-weight: 400;
	line-height: 1.75;
	color: var(--color-white);
}

.sustainable-innovation__text,
.sustainable-innovation__text * {
	color: rgba(255, 255, 255, 0.92) !important;
	font-weight: 400 !important;
}

.sustainable-innovation__text p {
	margin: 0 0 var(--space-sm);
}

.sustainable-innovation__text p:last-child {
	margin-bottom: 0;
}

/* Sustainable Innovation - Stats Band */
.sustainable-stats {
	background: var(--color-white);
	width: 100%;
	padding: var(--space-xl) var(--space-lg);
}

.sustainable-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	max-width: 1200px;
	margin: 0 auto;
}

/* Editorial data strip: left-aligned columns behind hairline rules. */
.sustainable-stats__item {
	text-align: left;
	border-top: 2px solid var(--color-ink);
	padding-top: var(--space-md);
}

.sustainable-stats__value {
	font-family: var(--font-primary);
	font-size: var(--fs-hero);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-primary);
	margin-bottom: var(--space-sm);
	font-variant-numeric: tabular-nums;
}

.sustainable-stats__label {
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-ink);
	margin: 0 0 var(--space-sm);
}

.sustainable-stats__desc {
	font-family: var(--font-primary);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-light);
	max-width: 22rem;
	margin: 0;
}

@media screen and (max-width: 1024px) {
	.sustainable-innovation {
		min-height: 520px;
		padding: var(--space-lg) var(--space-md);
	}

	.sustainable-stats {
		padding: var(--space-lg) var(--space-md);
	}

	.sustainable-stats__grid {
		gap: var(--space-md);
	}
}

@media screen and (max-width: 768px) {
	.sustainable-innovation {
		min-height: 440px;
	}

	.sustainable-innovation__title {
		font-size: var(--fs-section);
	}

	.sustainable-stats__grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
}


/* Get Started Section */
.get-started {
	background: var(--color-bg-alt);
	padding: var(--section-pad) var(--space-lg);
	width: 100%;
}

.get-started__container {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.get-started__title {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 600;
	margin: 0 0 var(--space-md);
	text-align: center;
	color: var(--color-ink);
	letter-spacing: -0.02em;
}

.get-started__subtitle {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-text);
	text-align: center;
	margin: 0 0 var(--space-lg);
	line-height: 1.6;
	display: none;
}

.get-started__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	margin-top: var(--space-md);
}

.get-started__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	color: var(--color-dark);
	padding: var(--space-lg) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
	background: var(--color-white);
}

.get-started__card:hover {
	border-color: var(--color-primary);
	transform: translateY(-4px);
	box-shadow: 0 20px 48px -24px rgba(16, 19, 18, 0.18);
}

.get-started__card-image {
	position: relative;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 0;
	margin-bottom: var(--space-md);
	background: transparent;
}

.get-started__img-default,
.get-started__img-hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity var(--transition-base);
}

.get-started__img-hover {
	opacity: 0;
}

.get-started__card:hover .get-started__img-default {
	opacity: 0;
}

.get-started__card:hover .get-started__img-hover {
	opacity: 1;
}

.get-started__card-title {
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 500;
	margin: 0;
	color: var(--color-ink);
	letter-spacing: -0.01em;
}

@media screen and (max-width: 1024px) {
	.get-started__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}
}

@media screen and (max-width: 768px) {
	.get-started {
		padding: var(--space-md) var(--space-md);
	}

	.get-started__title {
		font-size: var(--fs-body);
	}

	.get-started__grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.get-started__card-image {
		width: 70px;
		height: 70px;
		margin-bottom: var(--space-sm);
	}

	.get-started__card-title {
		font-size: var(--fs-meta);
	}
}

/*--------------------------------------------------------------
# NTW Site Footer
--------------------------------------------------------------*/

.site-footer {
	background: var(--color-hero-dark);
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
}

.footer-main {
	padding-block: var(--section-pad);
}

.footer-main__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--space-lg);
}

/* Brand Column */
.footer-brand__logo {
	display: block;
	margin-bottom: 1.25rem;
	line-height: 0;
}

.footer-brand__logo a,
.footer-brand__logo .custom-logo-link {
	display: block;
	line-height: 0;
}

.footer-brand__logo img,
.footer-brand__logo .custom-logo {
	height: 44px;
	width: auto;
	filter: brightness(0) invert(1);
}

.footer-brand__logo-text {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-white);
	letter-spacing: 0.04em;
	line-height: 1;
}

.footer-brand__description {
	font-size: var(--fs-meta);
	line-height: 1.7;
	margin-bottom: 1.25rem;
	color: rgba(255, 255, 255, 0.65);
}

.footer-brand__address {
	font-size: var(--fs-meta);
	font-style: normal;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.62);
}

/* Contact links inherit the global green otherwise — ~1.9:1 on the
 * dark footer. Light text + underline keeps them AA. */
.footer-brand__address a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.footer-brand__address a:hover,
.footer-brand__address a:focus-visible {
	color: var(--color-white);
}

/* Nav Columns */
.footer-col__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	margin: 0 0 1.25rem;
}

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

.footer-nav li {
	margin-bottom: 0.625rem;
}

.footer-nav a {
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--fs-nav);
	font-weight: 400;
	/* Every footer link sits on one line — "UltraShield® Technology" was the
	   lone two-liner; the column gap absorbs the little extra width. */
	white-space: nowrap;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: left bottom;
	background-repeat: no-repeat;
	transition: color var(--transition-fast), background-size var(--transition-base);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
	color: var(--color-white);
	background-size: 100% 1px;
}

/* Social Icons */
.footer-social {
	display: flex;
	gap: 0.625rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.footer-social a:hover {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.55);
}

/* Footer Bottom Bar */
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: 1.25rem;
}

.footer-bottom__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.footer-bottom__copy {
	font-size: var(--fs-meta);
	color: rgba(255, 255, 255, 0.62);
	margin: 0;
}

.footer-bottom__links {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-bottom__links a {
	font-size: var(--fs-meta);
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.footer-bottom__links a:hover {
	color: rgba(255, 255, 255, 0.75);
}

/* Footer Responsive */
@media screen and (max-width: 1024px) {
	.footer-main__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-md);
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media screen and (max-width: 600px) {
	.footer-main__grid {
		grid-template-columns: 1fr;
	}

	.footer-main {
		padding-block: var(--space-md);
	}

	.footer-bottom__inner {
		flex-direction: column;
		text-align: center;
	}

	.footer-bottom__links {
		justify-content: center;
	}
}

/*--------------------------------------------------------------
# Products Page Sections
--------------------------------------------------------------*/

/* Products Hero */
.products-hero {
	position: relative;
	width: 100%;
	min-height: var(--hero-min-height);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.products-hero__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.products-hero__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-scrim);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.products-hero__content {
	text-align: center;
	color: var(--color-white);
	position: relative;
	z-index: 2;
	padding: var(--space-lg);
}

.products-hero__title {
	font-family: var(--font-primary);
	font-size: var(--fs-hero);
	font-weight: 300;
	line-height: 1.2;
	margin: 0;
	letter-spacing: -0.5px;
	/* Explicit: the base `h1..h6 { color: var(--color-dark) }` rule targets the
	   element directly and so beats the white inherited from __content. */
	color: var(--color-white);
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

/* Products Intro — Split Layout */
.products-intro {
	padding-block: var(--space-xl);
	background-color: var(--color-bg);
	overflow: hidden;
}

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

.products-intro__left {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.products-intro__title {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 300;
	color: var(--color-dark);
	margin: 0;
	line-height: 1.3;
}

.products-intro__content {
	font-size: var(--fs-body);
	color: var(--color-text);
	line-height: var(--line-height);
}

.products-intro__content p {
	margin: 0.5rem 0;
}

.products-intro__right {
	position: relative;
}

/* Animated deck stack */
.products-intro__deck {
	position: relative;
	width: 100%;
	height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.products-intro__deck-inner {
	position: relative;
	width: 100%;
	max-width: 600px;
	height: 100%;
}

.products-intro__board {
	position: absolute;
	width: 75%;
	opacity: 0;
	transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
	            opacity 0.5s ease;
}

.products-intro__board img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
}

.products-intro__board--back {
	top: 6%;
	left: 24%;
	z-index: 1;
	transform: translateX(160%);
	transition-delay: 0s;
}

.products-intro__board--bottom {
	top: 19%;
	left: 13.5%;
	z-index: 2;
	transform: translateX(170%);
	transition-delay: 0.5s;
}

.products-intro__board--front {
	top: 32%;
	left: 3%;
	z-index: 3;
	transform: translateX(180%);
	transition-delay: 1s;
}

.products-intro__deck.is-visible .products-intro__board {
	opacity: 1;
	transform: translateX(0);
}

.products-intro__cta {
	position: absolute;
	bottom: -30px;
	right: 0;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	text-decoration: none;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	box-shadow: 0 4px 12px rgba(0, 122, 51, 0.2);
}

.products-intro__cta:hover,
.products-intro__cta:focus-visible {
	transform: scale(1.1);
	box-shadow: 0 8px 20px rgba(0, 122, 51, 0.3);
}

.products-intro__cta-icon {
	display: block;
	line-height: 1;
}

@media screen and (max-width: 1024px) {
	.products-intro__container {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.products-intro__cta {
		position: static;
		margin-top: var(--space-md);
	}
}

/* Products Series Grid */
.products-series {
	padding-block: var(--space-lg);
	background-color: #EFEFEF;
}

.products-series__header {
	text-align: center;
	margin-bottom: var(--space-lg);
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	padding-inline: var(--space-lg);
}

/* Kicker above the section heading — the same control language as the hero
 * eyebrow, so the page reads as one system top to bottom. */
.products-series__eyebrow {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0 0 var(--space-sm);
}

.products-series__title {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 300;
	color: var(--color-dark);
	margin: 0 0 var(--space-md);
	line-height: 1.3;
}

.products-series__subtitle {
	font-size: var(--fs-body);
	color: var(--color-text);
	line-height: var(--line-height);
	margin: 0;
}

.products-series__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-md);
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: var(--space-md);
}

/* Related-series band on single series pages (template-parts/series-related.php).
   Cards are stock products-series cards; auto-fit lets a 2–3 card row fill
   the width instead of leaving auto-fill's empty tracks. */
.series-related__grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	max-width: 1100px;
}

.series-related__all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-sm);
	color: var(--color-primary);
	text-decoration: none;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: color var(--transition-fast);
}

.series-related__all:hover,
.series-related__all:focus-visible {
	color: var(--color-primary-dark);
}

.series-related__all span {
	transition: transform var(--transition-fast);
}

.series-related__all:hover span,
.series-related__all:focus-visible span {
	transform: translateX(4px);
}

/* Editorial full-bleed card: photo fills the card, a warm dark scrim anchors
 * an overlaid caption (category eyebrow + title) with a green accent rule and
 * an "Explore" affordance that reveals on hover. */
.products-series__card {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 3px;
	overflow: hidden;
	background-color: var(--color-hero-dark);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	/* Staggered scroll-reveal — .is-visible added by the staggered-reveal
	 * observer in js/site.js; --card-stagger index set per card in
	 * template-parts/products-series-grid.php (index % 4 for a diagonal wave). */
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow var(--transition-base);
}

.products-series__card.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(min(var(--card-stagger, 0), 4) * 85ms);
}

.products-series__card-link {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
	color: var(--color-white);
}

.products-series__card-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.products-series__card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.products-series__card-image--placeholder {
	background-color: var(--color-bg-alt);
}

.products-series__card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(15, 22, 18, 0.90) 0%,
		rgba(15, 22, 18, 0.58) 26%,
		rgba(15, 22, 18, 0.12) 50%,
		rgba(15, 22, 18, 0) 70%
	);
	transition: opacity var(--transition-base);
}

.products-series__card-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: var(--space-md) 1.375rem 1.375rem;
}

.products-series__card-rule {
	display: block;
	width: 30px;
	height: 2px;
	background-color: var(--color-primary);
	margin-bottom: 0.85rem;
	transition: width var(--transition-base);
}

.products-series__card-eyebrow {
	display: block;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 0.35rem;
}

.products-series__card-title {
	font-family: var(--font-primary);
	font-size: 1.6rem;
	font-weight: 300;
	color: var(--color-white);
	margin: 0;
	line-height: 1.2;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.products-series__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.7rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white);
	opacity: 0;
	max-height: 0;
	transform: translateY(6px);
	transition:
		opacity var(--transition-base),
		transform var(--transition-base),
		max-height var(--transition-base);
}

.products-series__card-cta-icon {
	transition: transform var(--transition-base);
}

/* Green frame that draws in on hover. */
.products-series__card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	border: 2px solid transparent;
	/* Track the card's own radius: the overlaid card rounds at 3px but the
	   deck variant is re-surfaced to var(--card-radius) (14px) by the card
	   block at the bottom of this file, and a 3px ring over 14px corners
	   read as a misaligned rectangle. */
	border-radius: inherit;
	pointer-events: none;
	transition: border-color var(--transition-base);
}

.products-series__card:hover,
.products-series__card:focus-within {
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
}

/* Hover lift only after reveal, with no stagger delay so it stays snappy. */
.products-series__card.is-visible:hover,
.products-series__card.is-visible:focus-within {
	transform: translateY(-6px);
	transition-delay: 0s;
}

.products-series__card:hover .products-series__card-image,
.products-series__card:focus-within .products-series__card-image {
	transform: scale(1.06);
}

.products-series__card:hover .products-series__card-rule,
.products-series__card:focus-within .products-series__card-rule {
	width: 48px;
}

.products-series__card:hover .products-series__card-cta,
.products-series__card:focus-within .products-series__card-cta {
	opacity: 1;
	max-height: 2rem;
	transform: translateY(0);
}

.products-series__card:hover .products-series__card-cta-icon,
.products-series__card:focus-within .products-series__card-cta-icon {
	transform: translateX(4px);
}

.products-series__card:hover::after,
.products-series__card:focus-within::after {
	border-color: var(--color-primary);
}

@media screen and (max-width: 600px) {
	.products-series__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
		padding-inline: var(--space-sm);
	}

	.products-series__card-content {
		padding: var(--space-sm) 1rem 1rem;
	}

	.products-series__card-title {
		font-size: 1.25rem;
	}

	.products-series__card-rule {
		margin-bottom: 0.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.products-series__card {
		opacity: 1;
		transform: none;
		transition: box-shadow var(--transition-base);
	}

	.products-series__card-image,
	.products-series__card-rule,
	.products-series__card-cta,
	.products-series__card-cta-icon {
		transition: none;
	}
}

/* Honor reduced-motion: show series cards at rest. */
@media (prefers-reduced-motion: reduce) {
	.products-series__card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*--------------------------------------------------------------
# Series card — DECK variant (.products-series__grid--deck)
#
# Used by the /products/ grid. Ported from the hypothetical build, whose whole
# point is that the photograph carries the card: a tall 3:3.6 portrait gets
# ~370 of the card's ~520px, and the caption stays quiet underneath it.
#
# The signature move is the scrim. It is NOT a darkening layer like the
# overlaid card's — it is a fade from transparent to the card's own face
# colour over the bottom 45%, so the photo dissolves into the card instead of
# stopping at a hard edge. Change --deck-face and the scrim must change with
# it, which is why both read from the same custom property.
#
# Departures from the source: no suit pips (requested), and NewTechWood's
# palette and type instead of the source's cream/gilt/serif skin. No sepia
# photo filter either — the source warms every image, but this brand sells
# samples on colour accuracy, so the photography stays true.
#
# Scoped to the grid modifier so template-parts/series-related.php, which reuses
# this card markup on single series pages, keeps the overlaid treatment.
--------------------------------------------------------------*/

.products-series__grid--deck {
	/* Local alias for the shared face, because the fade scrim below has to
	   resolve to the same colour the card is painted in. */
	--deck-face: var(--card-face);
	/* Four large cards, not an auto-fill of small ones — the size IS the
	   design. Falls back to 3 then 2 at the breakpoints below. */
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 1.8vw, 1.8rem);
	max-width: 1360px;
}

.products-series__grid--deck .products-series__card {
	aspect-ratio: auto;
}

.products-series__grid--deck .products-series__card-link {
	position: static;
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--color-text);
}

.products-series__grid--deck .products-series__card-media {
	position: relative;
	aspect-ratio: 3 / 3.6;
	flex: 0 0 auto;
	background-color: var(--color-bg-alt);
}

/* Photo → card face, not photo → darkness. */
.products-series__grid--deck .products-series__card-scrim {
	background: linear-gradient(180deg, transparent 55%, var(--deck-face) 100%);
}

.products-series__grid--deck .products-series__card-content {
	position: static;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* Negative top margin pulls the type up into the tail of the fade, so the
	   caption sits *in* the card rather than in a band below the picture. */
	margin-top: -0.9rem;
	padding: 0 1.15rem 1.35rem;
	background-color: transparent;
}

/* The accent rule belongs to the overlaid card's left-aligned caption; centred
   type here is held together by the letterspacing instead. */
.products-series__grid--deck .products-series__card-rule {
	display: none;
}

.products-series__grid--deck .products-series__card-eyebrow {
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	color: var(--color-primary);
	margin-bottom: 0.4rem;
}

.products-series__grid--deck .products-series__card-title {
	color: var(--color-dark);
	font-size: 1.45rem;
	line-height: 1.18;
	text-shadow: none;
	margin-bottom: 0.45rem;
}

/* Permanent, not a hover reward: on a card this size the affordance is part of
   the composition, and touch devices never get the hover. */
.products-series__grid--deck .products-series__card-cta {
	margin-top: auto;
	justify-content: center;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	color: var(--color-light);
	opacity: 1;
	max-height: none;
	transform: none;
}

.products-series__grid--deck .products-series__card:hover .products-series__card-cta,
.products-series__grid--deck .products-series__card:focus-within .products-series__card-cta {
	max-height: none;
	color: var(--color-primary);
}

.products-series__grid--deck .products-series__card:hover .products-series__card-image,
.products-series__grid--deck .products-series__card:focus-within .products-series__card-image {
	transform: scale(1.07);
}

/* The full-perimeter green frame belongs to the overlaid card, where it reads
   as a picture frame around a photograph. Around this card's white face it
   reads as a form-control focus ring, so hover drops it — lift, shadow, zoom
   and the greened CTA carry the state. Keyboard focus keeps the frame: it IS
   the focus indicator. */
.products-series__grid--deck .products-series__card:hover::after {
	border-color: transparent;
}

.products-series__grid--deck .products-series__card:focus-within::after {
	border-color: var(--color-primary);
}


@media screen and (max-width: 1100px) {
	.products-series__grid--deck {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 820px) {
	.products-series__grid--deck {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.products-series__grid--deck .products-series__card-content {
		padding: 0 0.8rem 1rem;
	}

	.products-series__grid--deck .products-series__card-title {
		font-size: 1.15rem;
	}

	.products-series__grid--deck .products-series__card-eyebrow {
		font-size: 0.7rem;
		letter-spacing: 0.16em;
	}
}

/*--------------------------------------------------------------
# Samples CTA — the closing dark band (template-parts/samples-cta.php)
#
# Replaced the old 50/50 split panel (mauve block + photo) 2026-07-13. One
# full-bleed photograph, dropped to near-ink by a heavy scrim, with the type
# centred on it — the high-contrast closing band from the Everlux reference.
# Shared by the products, resources, library, and FAQ pages.
--------------------------------------------------------------*/

.samples-cta {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(420px, 58vh, 640px);
	padding: var(--space-xl) var(--space-md);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--color-hero-dark);
	text-align: center;
}

.samples-cta__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.samples-cta__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Deep, even scrim — darker than a hero's, because centred type needs a calm
 * field behind it. Kept just light enough that the photograph still reads as a
 * photograph rather than a flat black block. */
.samples-cta__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(18, 26, 22, 0.62) 0%, rgba(18, 26, 22, 0.76) 100%);
}

.samples-cta__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
	max-width: 680px;
}

/* Optional extras — only the products page passes these; see the header note
 * in template-parts/samples-cta.php. The `gap` on __inner does the spacing, so
 * each of these carries no margin of its own. */
.samples-cta__eyebrow {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary-light);
	margin: 0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.samples-cta__lede {
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: var(--line-height);
	color: rgba(255, 255, 255, 0.86);
	margin: 0;
	max-width: 54ch;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

.samples-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

/* Secondary door out. Quieter than the filled-on-hover primary — a hairline
 * that only brightens — so the two never compete for the same click. */
.samples-cta__button--ghost {
	border-color: rgba(255, 255, 255, 0.42);
	color: rgba(255, 255, 255, 0.88);
}

.samples-cta__button--ghost:hover,
.samples-cta__button--ghost:focus-visible {
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}

.samples-cta__title {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-white);
	margin: 0;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.samples-cta__subtitle {
	display: block;
	font-weight: 300;
	color: var(--color-primary-light);
}

/* White outline → fills white on hover. Same language as the homepage hero CTA
 * (sentence case, no radius) rather than the green .btn--primary pill. */
.samples-cta__button {
	display: inline-block;
	padding: 1.25rem 3rem;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1;
	color: var(--color-white);
	background-color: transparent;
	border: 1px solid var(--color-white);
	text-decoration: none; /* the UA underline reads as a broken button here */
	transition: background-color var(--transition-base), color var(--transition-base);
}

.samples-cta__button:hover,
.samples-cta__button:focus-visible {
	background-color: var(--color-white);
	color: var(--color-dark);
}

@media screen and (max-width: 768px) {
	.samples-cta {
		min-height: clamp(360px, 50vh, 480px);
		padding: var(--space-lg) var(--space-md);
	}

	.samples-cta__inner {
		gap: var(--space-md);
	}
}

/*--------------------------------------------------------------
# Editorial panel — photo, then caption UNDER it
# (template-parts/editorial-panel.php)
#
# The counterpart to page-hero: the hero is the one place type sits on a
# photograph; every panel below it keeps its words underneath. Adapted from the
# Everlux reference. Used by the UltraShield and Composite-vs-Wood bands.
--------------------------------------------------------------*/

.editorial-panel {
	background-color: var(--color-white);
}

.editorial-panel__media {
	width: 100%;
	height: clamp(380px, 62vh, 680px);
	overflow: hidden;
	background-color: var(--color-bg);
}

.editorial-panel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.editorial-panel:hover .editorial-panel__image {
	transform: scale(1.03);
}

/* Roughly a third of the vertical space the photograph gets — that ratio is
 * the whole hierarchy. */
.editorial-panel__caption {
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) var(--space-md) clamp(3.5rem, 7vw, 6rem);
	text-align: center;
}

.editorial-panel__eyebrow {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-sm);
}

.editorial-panel__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--color-dark);
	margin: 0 0 var(--space-sm);
	text-wrap: balance;
}

.editorial-panel__text {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-text);
	margin: 0;
	text-wrap: pretty;
}

/* A word and a rule that retracts on hover — no arrow pill. */
.editorial-panel__link {
	position: relative;
	display: inline-block;
	margin-top: var(--space-md);
	padding-bottom: 0.4rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-dark);
	text-decoration: none; /* the rule below is drawn by ::after */
}

.editorial-panel__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-primary);
	transform: scaleX(1);
	transform-origin: left;
	transition: transform var(--transition-slow);
}

.editorial-panel__link:hover::after,
.editorial-panel__link:focus-visible::after {
	transform: scaleX(0);
	transform-origin: right;
}

@media (prefers-reduced-motion: reduce) {
	.editorial-panel__image,
	.editorial-panel:hover .editorial-panel__image {
		transition: none;
		transform: none;
	}
}

/*--------------------------------------------------------------
# Category Page (Decking / Siding / Fencing etc.)
--------------------------------------------------------------*/

.category-page {
	background-color: var(--color-white);
}

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

.category-hero {
	position: relative;
	width: 100%;
	min-height: var(--hero-min-height);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--color-white);
	isolation: isolate;
}

.category-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.category-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.category-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--color-scrim);
}

.category-hero__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: var(--space-lg) var(--space-md);
	max-width: 960px;
}

.category-hero__eyebrow {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--space-sm);
}

.category-hero__title {
	font-family: var(--font-primary);
	font-size: var(--fs-hero);
	font-weight: 300;
	line-height: 1.1;
	margin: 0;
	letter-spacing: -0.01em;
	color: var(--color-white);
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

/* -- Sticky section nav (pill anchors + scroll-spy) ---------- */

.section-nav {
	position: sticky;
	top: var(--header-offset);
	z-index: 900;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--color-border);
}

.section-nav__inner {
	overflow-x: auto;
	scrollbar-width: none;
}

.section-nav__inner::-webkit-scrollbar {
	display: none;
}

.section-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0.625rem 0;
}

.section-nav__list li {
	margin: 0;
	flex-shrink: 0;
}

.section-nav__link {
	display: inline-block;
	padding: 0.5rem 1.125rem;
	border-radius: 999px;
	color: var(--color-text);
	font-size: var(--fs-meta);
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--transition-fast), background var(--transition-fast);
}

.section-nav__link:hover,
.section-nav__link:focus-visible {
	color: var(--color-ink);
	background: var(--color-bg-alt);
}

.section-nav__link.is-active,
.section-nav__link[aria-current] {
	color: var(--color-white);
	background: var(--color-ink);
}

/* -- Stacked category sections ------------------------------- */

.category-section {
	padding-block: var(--section-pad);
	scroll-margin-top: calc(var(--header-offset) + 56px);
}

/* Sections with a chapter opener sit flush so the scene runs
 * edge-to-edge from the section top. */
.category-section--cinema {
	padding-top: 0;
}

/* Chapter opener — the homepage chapter grammar applied to each
 * category section's lead photo. */
.category-chapter {
	position: relative;
	height: 76vh;
	overflow: hidden;
	background: var(--color-hero-dark);
	margin-bottom: var(--space-lg);
}

.category-chapter__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 118%;
	object-fit: cover;
}

.category-chapter::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 12, 10, 0.78) 0%, rgba(8, 12, 10, 0.18) 42%, rgba(8, 12, 10, 0.05) 70%);
}

.category-chapter__body {
	position: absolute;
	left: clamp(2rem, 6vw, 7rem);
	right: clamp(2rem, 6vw, 7rem);
	bottom: 3rem;
	z-index: 2;
	color: var(--color-white);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3rem;
}

.category-chapter__kicker {
	margin: 0 0 0.7rem;
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #9FD4B4;
}

.category-chapter__title {
	margin: 0;
	font-family: var(--font-primary);
	font-size: clamp(2.2rem, 4vw, 3.8rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.04;
	color: var(--color-white);
}

/* Solid white on the photograph — the ghost outline this replaced was the
 * only route from a category page to its series pages and read as chrome. */
.category-chapter__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.05rem 2rem;
	border: 1px solid var(--color-white);
	border-radius: 2px;
	background: var(--color-white);
	color: var(--color-ink);
	text-decoration: none;
	font-size: var(--fs-nav);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 12px 32px rgba(8, 12, 10, 0.24);
	transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.category-chapter__cta-icon {
	flex-shrink: 0;
	transition: transform var(--transition-base);
}

.category-chapter__cta:hover,
.category-chapter__cta:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.category-chapter__cta:hover .category-chapter__cta-icon,
.category-chapter__cta:focus-visible .category-chapter__cta-icon {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.category-chapter__cta-icon {
		transition: none;
	}

	.category-chapter__cta:hover .category-chapter__cta-icon,
	.category-chapter__cta:focus-visible .category-chapter__cta-icon {
		transform: none;
	}
}

/* Intro paragraph as a lead line under the scene. */
.category-section__lead {
	max-width: 860px;
	margin-bottom: var(--space-lg);
}

@media (max-width: 768px) {
	.category-chapter {
		height: 62vh;
	}

	.category-chapter__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.3rem;
	}
}

.category-section:nth-of-type(even) {
	background: var(--color-bg-alt);
}

.category-section__header {
	max-width: 820px;
	margin-bottom: var(--space-lg);
}

.category-section__eyebrow {
	margin: 0 0 var(--space-sm);
	color: var(--color-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.category-section__title {
	margin: 0 0 var(--space-md);
	font-size: var(--fs-section);
	font-weight: 600;
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.category-section__intro {
	font-size: var(--fs-lead);
	line-height: 1.7;
	color: var(--color-text);
}

.category-section__intro p {
	margin: 0 0 var(--space-sm);
}

.category-section__intro p:last-child {
	margin-bottom: 0;
}

.category-section__media {
	margin: 0 0 var(--space-lg);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.category-section__image {
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
	display: block;
}

/* -- Luxury layout variants (category pages only) -------------
 * Odd sections: the lead image breaks out of the container into a
 * full-width band. Even sections: half-screen editorial split —
 * tall image on one side, heading/copy beside it. */
.category-sections .category-section:nth-of-type(odd) .category-section__media {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	border-radius: 0;
}

.category-sections .category-section:nth-of-type(odd) .category-section__image {
	height: min(72vh, 680px);
	max-height: none;
}

/* The even-section split is for sections whose lead image sits inside the
 * container. Chapter sections put their photo full-bleed above the body and
 * use the two-column body grid below instead — applying both left an empty
 * grid column where the (absent) inline media would have gone. */
@media (min-width: 900px) {
	.category-sections .category-section:not(.category-section--cinema):nth-of-type(even) .container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--space-lg);
		align-items: center;
	}

	.category-sections .category-section:not(.category-section--cinema):nth-of-type(even) .category-section__header {
		grid-column: 2;
		grid-row: 1;
		margin-bottom: var(--space-md);
	}

	.category-sections .category-section:not(.category-section--cinema):nth-of-type(even) .category-section__media {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin: 0;
		height: min(80vh, 640px);
	}

	.category-sections .category-section:not(.category-section--cinema):nth-of-type(even) .category-section__image {
		height: 100%;
		max-height: none;
	}

	.category-sections .category-section:not(.category-section--cinema):nth-of-type(even) .category-features {
		grid-column: 2;
		grid-row: 2;
		border-top: 0;
		padding-top: 0;
		margin-bottom: var(--space-md);
	}

	.category-sections .category-section:not(.category-section--cinema):nth-of-type(even) .category-section__grid {
		grid-column: 1 / -1;
		margin-top: var(--space-lg);
	}

	.category-sections .category-section:not(.category-section--cinema):nth-of-type(even) .category-section__cta-row {
		grid-column: 1 / -1;
	}
}

.category-section__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-md);
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
}

.category-product {
	margin: 0;
}

.category-product__link {
	display: block;
	text-decoration: none;
	outline-offset: 4px;
}

.category-product__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-border);
}

/* Board renders read as catalogue art, not links — this standing cue says
 * the tile goes somewhere. Present at rest so it works on touch too. */
.category-product__cue {
	position: absolute;
	right: 0.625rem;
	bottom: 0.625rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-dark);
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.category-product__link:hover .category-product__cue,
.category-product__link:focus-visible .category-product__cue {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* Board renders are wide cut-outs on white — contain (not cover) so the
 * whole board stays visible inside the square tile; the padding keeps it
 * off the tile edges. */
.category-product__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6%;
	display: block;
}

.category-product__title {
	margin: 0.875rem 0 0;
	font-size: var(--fs-nav);
	font-weight: 500;
	color: var(--color-ink);
	transition: color var(--transition-fast);
}

.category-product__link:hover .category-product__title,
.category-product__link:focus-visible .category-product__title {
	color: var(--color-primary);
}

/* Quiet sample micro-CTA under the card title — deliberately not a
 * green button (CTA rhythm: the section CTA row owns the primary).
 * The auto-opening cart drawer supplies the add feedback. */
.category-product__sample {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	margin-top: 0.65rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-dark);
	text-decoration: none;
	background-color: transparent;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0% 1px;
	background-position: left bottom;
	border: 0;
	padding: 0;
	transition: background-size var(--transition-base), color var(--transition-fast);
}

.category-product__sample::after {
	content: '+';
	font-weight: 600;
	color: var(--color-primary);
}

.category-product__sample:hover,
.category-product__sample:focus-visible {
	color: var(--color-primary-dark);
	background-size: 100% 1px;
}

.category-product__sample.added::after {
	content: '\2713';
}

/* WC injects a "View cart" link after an AJAX add — the drawer
 * auto-opens instead. */
.category-product .added_to_cart {
	display: none;
}

/* -- Features band ------------------------------------------- */

.category-features {
	max-width: 820px;
	padding: var(--space-md) 0 0;
	border-top: 1px solid var(--color-border);
	margin-bottom: var(--space-lg);
}

.category-features__title {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-subsection);
	font-weight: 600;
	color: var(--color-ink);
}

.category-features__content {
	font-size: var(--fs-body);
	line-height: 1.75;
	color: var(--color-text);
}

.category-features__content p {
	margin: 0 0 var(--space-sm);
}

.category-features__content p:last-child {
	margin-bottom: 0;
}

.category-features__link {
	display: inline-block;
	margin-top: var(--space-xs);
	color: var(--color-primary);
	font-weight: 500;
	font-size: var(--fs-nav);
}

.category-section__cta-row {
	margin-top: var(--space-md);
}

/* -- Chapter section body: copy left, conversion rail right ---
 * Stacked below 1100px, where the rail becomes a full-width closing
 * band at the foot of the section. */

@media (min-width: 1100px) {
	.category-section__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(340px, 28vw, 420px);
		column-gap: var(--space-lg);
		align-items: start;
	}

	.category-section__main {
		min-width: 0;
	}

	/* Rides alongside the section's copy — clears the masthead and the
	 * sticky series sub-nav beneath it. */
	.category-cta {
		position: sticky;
		top: calc(var(--header-offset) + 5.5rem);
	}
}

.category-cta__inner {
	padding-top: var(--space-md);
	border-top: 2px solid var(--color-ink);
}

.category-cta__eyebrow {
	margin: 0 0 var(--space-sm);
	color: var(--color-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.category-cta__title {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-subsection);
	font-weight: 600;
	line-height: var(--lh-heading);
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

.category-cta__blurb {
	margin: 0 0 var(--space-md);
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--color-text);
}

.category-cta__btn {
	display: flex;
	width: 100%;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: 1.125rem 1.75rem;
	font-size: var(--fs-nav);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	white-space: normal;
	text-align: left;
}

.category-cta__btn-icon {
	flex-shrink: 0;
	align-self: center;
	transition: transform var(--transition-base);
}

.category-cta__btn:hover .category-cta__btn-icon,
.category-cta__btn:focus-visible .category-cta__btn-icon {
	transform: translateX(4px);
}

/* Stacked: the rail closes the section, so give it room to breathe and
 * cap its measure rather than letting it run the full container width. */
@media (max-width: 1099px) {
	.category-cta {
		display: block;
		margin-top: var(--space-lg);
	}

	.category-cta__inner {
		max-width: 640px;
	}

	.category-cta__btn {
		max-width: 480px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.category-cta__btn-icon {
		transition: none;
	}

	.category-cta__btn:hover .category-cta__btn-icon,
	.category-cta__btn:focus-visible .category-cta__btn-icon {
		transform: none;
	}
}

@media (max-width: 768px) {
	.category-section {
		scroll-margin-top: calc(var(--header-offset) + 48px);
	}

	.category-section__grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: var(--space-sm);
	}
}


/*--------------------------------------------------------------
# Resources Page
--------------------------------------------------------------*/

.resources-page {
	background-color: var(--color-white);
}

/* -- Hero: shared template-parts/page-hero.php (2026-07-13) -- */

/* -- In-Depth Guides Intro ---------------------------------- */

/*
 * Title + body on the left (with its own top/left padding).
 * Illustration sits flush with the top of the section and the right edge
 * of the viewport — its grid column is auto-sized, container has no
 * right padding, section has no top padding.
 */
.resources-intro {
	position: relative;
	background-color: var(--color-bg);
	padding-bottom: var(--space-xl);
	overflow: hidden;
}

.resources-intro__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(var(--space-md), 3vw, var(--space-lg));
}

.resources-intro__left {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	max-width: 720px;
	padding-top: var(--space-lg);
	padding-left: clamp(var(--space-md), 6vw, 7rem);
}

.resources-intro__title {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 600;
	color: var(--color-ink);
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.resources-intro__content {
	font-size: var(--fs-body);
	color: var(--color-text);
	line-height: var(--line-height);
}

.resources-intro__content p {
	margin: 0 0 1rem;
}

.resources-intro__content p:last-child {
	margin-bottom: 0;
}

.resources-intro__right {
	align-self: start;
}

.resources-intro__image {
	width: clamp(360px, 36vw, 640px);
	height: auto;
	display: block;
}

@media (max-width: 900px) {
	.resources-intro {
		overflow: visible;
	}

	.resources-intro__container {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
		padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
	}

	.resources-intro__left {
		max-width: none;
		padding-left: 0;
		padding-top: var(--space-lg);
	}

	.resources-intro__right {
		justify-self: center;
	}

	.resources-intro__image {
		width: 100%;
		max-width: 520px;
	}
}

/* -- Browse Our Resources ----------------------------------- */

.resources-browse {
	background-color: var(--color-white);
	padding-block: var(--space-xl);
}

.resources-browse__container {
	max-width: 1320px;
	margin: 0 auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
}

.resources-browse__header {
	max-width: 720px;
	margin: 0 0 var(--space-lg);
}

.resources-browse__eyebrow {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.resources-browse__title {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 600;
	color: var(--color-ink);
	margin: 0 0 var(--space-sm);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.resources-browse__subtitle {
	font-size: var(--fs-lead);
	color: var(--color-text);
	line-height: 1.7;
	margin: 0;
}

.resources-browse__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

/* Photo-tile cards — same visual language as the /products/ series
 * grid: full-bleed image, bottom scrim, green rule, white type. */
.resources-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: 3px;
	overflow: hidden;
	background-color: var(--color-hero-dark);
	color: var(--color-white);
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	/* Staggered scroll-reveal — .is-visible added by the resources reveal
	 * observer in js/site.js; delay is driven by the per-card --card-stagger
	 * index set in template-parts/resources-cards.php. */
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow var(--transition-base);
}

.resources-card.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(min(var(--card-stagger, 0), 8) * 90ms);
}

a.resources-card:hover,
a.resources-card:focus-visible {
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.22);
}

/* Hover lift only after reveal, and with no stagger delay so it stays snappy. */
a.resources-card.is-visible:hover,
a.resources-card.is-visible:focus-visible {
	transform: translateY(-6px);
	transition-delay: 0s;
}

.resources-card__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.resources-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.resources-card__image--placeholder {
	background-color: var(--color-bg-alt);
}

a.resources-card:hover .resources-card__image,
a.resources-card:focus-visible .resources-card__image {
	transform: scale(1.05);
}

.resources-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(15, 22, 18, 0.90) 0%,
		rgba(15, 22, 18, 0.58) 26%,
		rgba(15, 22, 18, 0.12) 50%,
		rgba(15, 22, 18, 0) 70%
	);
}

.resources-card__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: var(--space-md) 1.375rem 1.375rem;
}

.resources-card__rule {
	display: block;
	width: 30px;
	height: 2px;
	background-color: var(--color-primary);
	margin-bottom: 0.85rem;
	transition: width var(--transition-base);
}

a.resources-card:hover .resources-card__rule,
a.resources-card:focus-visible .resources-card__rule {
	width: 48px;
}

.resources-card__label {
	display: block;
	font-family: var(--font-primary);
	font-size: 1.6rem;
	font-weight: 300;
	color: var(--color-white);
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.resources-card__desc {
	display: block;
	margin-top: 0.45rem;
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.resources-browse__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}
}

@media (max-width: 768px) {
	.resources-browse {
		padding-block: var(--space-lg);
	}

	.resources-browse__grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
		max-width: 460px;
		margin-inline: auto;
	}

	.resources-card__label {
		padding-top: var(--space-sm);
	}
}

/* -- FAQ accordion ----------------------------------------- */

.resources-faq {
	background-color: var(--color-white);
	padding-block: 0 var(--space-xl);
}

.resources-faq__container {
	max-width: 1320px;
	margin: 0 auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
}

.resources-faq__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 32px;
}

.resources-faq__item {
	list-style: none;
	/* Staggered scroll-reveal — .is-visible added by the resources reveal
	 * observer in js/site.js; --faq-stagger set per item in the template. */
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.resources-faq__item.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(min(var(--faq-stagger, 0), 11) * 55ms);
}

.resources-faq__details {
	background-color: var(--color-bg);
	border: 1px solid transparent;
	transition: background-color var(--transition-base), border-color var(--transition-base);
}

.resources-faq__details[open] {
	background-color: var(--color-white);
	border-color: var(--color-border);
}

.resources-faq__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 1.15rem 1.5rem;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-text);
	transition: color var(--transition-base);
}

.resources-faq__summary::-webkit-details-marker {
	display: none;
}

.resources-faq__summary::marker {
	content: '';
}

.resources-faq__summary:hover,
.resources-faq__summary:focus-visible {
	color: var(--color-primary);
}

.resources-faq__details[open] .resources-faq__summary {
	color: var(--color-dark);
	font-weight: 300;
}

.resources-faq__question {
	flex: 1 1 auto;
	min-width: 0;
}

.resources-faq__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-light);
	transition: transform var(--transition-base), color var(--transition-base);
}

.resources-faq__details[open] .resources-faq__chevron {
	transform: rotate(90deg);
	color: var(--color-primary);
}

.resources-faq__answer {
	padding: 0 1.5rem 1.5rem;
	font-size: var(--fs-body);
	color: var(--color-text);
	line-height: var(--line-height);
}

.resources-faq__answer p {
	margin: 0 0 0.75rem;
}

.resources-faq__answer p:last-child {
	margin-bottom: 0;
}

.resources-faq__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--space-lg);
}

.resources-faq__view-all {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-text);
	background-color: transparent;
	border: 1px solid var(--color-border);
	padding: 1rem 2.5rem;
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.resources-faq__view-all:hover,
.resources-faq__view-all:focus-visible {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

@media (max-width: 768px) {
	.resources-faq {
		padding-bottom: var(--space-lg);
	}

	.resources-faq__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.resources-faq__summary {
		font-size: var(--fs-body);
		padding: 1rem 1.25rem;
	}
}

/* Resources hub — honor reduced-motion: show cards + FAQ items at rest. */
@media (prefers-reduced-motion: reduce) {
	.resources-card,
	.resources-faq__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*--------------------------------------------------------------
# Gallery Page
--------------------------------------------------------------*/

.gallery-page {
	background-color: var(--color-white);
}

/* Hero: shared template-parts/page-hero.php (2026-07-13) */

/* -- Grid section head ---------------------------------------
 * A second head below the photographic hero: the hero says where you are, this
 * says what you're looking at. Left-aligned and narrow — a centred head over a
 * big serif line is the "premium template" look we're avoiding. */

.gallery-grid__head {
	max-width: 46rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.gallery-grid__eyebrow {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-sm);
}

.gallery-grid__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--color-dark);
	margin: 0 0 var(--space-sm);
	text-wrap: balance;
}

.gallery-grid__lede {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-text);
	margin: 0;
	text-wrap: pretty;
}

/* -- Filter bar -----------------------------------------------
 * Not pills. A word and a rule that draws itself in — the same control
 * language as the editorial-panel link. */

.gallery-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	padding-bottom: var(--space-sm);
	margin-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.gallery-filter__button {
	position: relative;
	padding: 0 0 0.6rem;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-light);
	transition: color var(--transition-base);
}

.gallery-filter__button::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px; /* sits on the bar's own hairline */
	width: 100%;
	height: 2px;
	background-color: var(--color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-slow);
}

.gallery-filter__button:hover,
.gallery-filter__button:focus-visible {
	color: var(--color-dark);
}

.gallery-filter__button.is-active {
	color: var(--color-dark);
}

.gallery-filter__button.is-active::after {
	transform: scaleX(1);
}

/* -- Grid (CSS columns masonry) ------------------------------- */

.gallery-grid {
	padding: var(--space-xl) var(--space-md);
	background-color: var(--color-white);
}

.gallery-grid__container {
	max-width: 1600px;
	margin: 0 auto;
}

.gallery-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: 3;
	column-gap: 1rem;
}

.gallery-grid__item {
	break-inside: avoid;
	margin: 0 0 1rem;
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(min(var(--gallery-stagger, 0), 11) * 60ms);
}

.gallery-grid__item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* A filtered-out photo must not leave a hole in the column flow — `hidden`
 * alone is defeated by the item's own display. */
.gallery-grid__item[hidden] {
	display: none;
}

.gallery-grid__tile {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: var(--color-bg);
	cursor: zoom-in;
	overflow: hidden;
}

.gallery-grid__tile:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

.gallery-grid__image {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gallery-grid__tile:hover .gallery-grid__image,
.gallery-grid__tile:focus-visible .gallery-grid__image {
	transform: scale(1.04);
}

/* The tag + caption ride in on a bottom-anchored scrim — the photo itself
 * stays untouched until you point at it. */
.gallery-grid__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	padding: 3rem 1.5rem 1.4rem;
	text-align: left;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0) 100%);
	opacity: 0;
	transition: opacity var(--transition-base);
	pointer-events: none;
}

.gallery-grid__tile:hover .gallery-grid__overlay,
.gallery-grid__tile:focus-visible .gallery-grid__overlay {
	opacity: 1;
}

.gallery-grid__tag {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-primary-light);
}

.gallery-grid__caption {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.3;
	color: var(--color-white);
}

.gallery-grid__empty {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-light);
	padding: var(--space-lg) 0;
	margin: 0;
}

@media (max-width: 1024px) {
	.gallery-grid__list {
		column-count: 2;
	}
}

@media (max-width: 600px) {
	.gallery-grid {
		padding: var(--space-lg) var(--space-sm);
	}

	.gallery-grid__list {
		column-count: 1;
	}

	.gallery-filter {
		gap: var(--space-sm) var(--space-md);
	}
}

/* Lightbox */

.gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(20, 20, 20, 0.94);
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms ease, visibility 0s linear 300ms;
}

.gallery-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 300ms ease, visibility 0s linear 0s;
}

.gallery-lightbox[hidden] {
	display: none;
}

.gallery-lightbox.is-open[hidden] {
	display: flex;
}

.gallery-lightbox__figure {
	position: relative;
	margin: 0;
	padding: 0;
	max-width: min(92vw, 1400px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	transform: scale(0.97);
	transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-lightbox.is-open .gallery-lightbox__figure {
	transform: scale(1);
}

.gallery-lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.gallery-lightbox__caption {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.4;
	color: var(--color-white);
	text-align: center;
	max-width: 700px;
	margin: 0;
	padding: 0 1rem;
	min-height: 1.5em;
}

.gallery-lightbox__caption:empty {
	display: none;
}

.gallery-lightbox__close,
.gallery-lightbox__nav {
	position: absolute;
	background: transparent;
	border: 0;
	padding: 0.75rem;
	color: var(--color-white);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color var(--transition-base), transform var(--transition-base);
}

.gallery-lightbox__close:hover,
.gallery-lightbox__close:focus-visible,
.gallery-lightbox__nav:hover,
.gallery-lightbox__nav:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
}

.gallery-lightbox__close {
	top: 1.5rem;
	right: 1.5rem;
}

.gallery-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
}

.gallery-lightbox__nav:hover,
.gallery-lightbox__nav:focus-visible {
	transform: translateY(-50%) scale(1.05);
}

.gallery-lightbox__nav--prev {
	left: 1.5rem;
}

.gallery-lightbox__nav--next {
	right: 1.5rem;
}

@media (max-width: 600px) {
	.gallery-lightbox__close {
		top: 0.75rem;
		right: 0.75rem;
	}

	.gallery-lightbox__nav--prev {
		left: 0.25rem;
	}

	.gallery-lightbox__nav--next {
		right: 0.25rem;
	}

	.gallery-lightbox__caption {
		font-size: var(--fs-body);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gallery-grid__item,
	.gallery-grid__image,
	.gallery-grid__caption-hover,
	.gallery-lightbox,
	.gallery-lightbox__figure {
		transition: none;
	}
	.gallery-grid__item {
		opacity: 1;
		transform: none;
	}
}

/*--------------------------------------------------------------
# FAQs Page
--------------------------------------------------------------*/

.faqs-page {
	background-color: var(--color-white);
}

/* Hero: shared template-parts/page-hero.php (2026-06-26) ------ */

/* Grid + controls -------------------------------------------- */

.faqs-grid {
	/* Light gray ground (same as the library) so the white cards read as
	   cards instead of text floating on a white page. */
	background-color: var(--color-bg);
	/* Top pad so "Select a topic" clears the hero instead of butting against
	   it. Applies to the ungated state too, where the search field would
	   otherwise sit just as tight. */
	padding-block: var(--space-lg) var(--space-xl);
	/* Search and filter chips step down from the 24-26px --fs-body: these are
	   UI controls, not reading copy, and the smaller size is what puts all ten
	   categories on screen at once instead of behind a scroll. */
	--fs-control: 1.125rem;
}

/* Wider and less inset than the site default: this page is a dense catalog of
   177 questions across 10 categories, and the extra width is what lets every
   filter chip sit on screen at once. */
.faqs-grid__container {
	max-width: 1560px;
	margin: 0 auto;
	padding-inline: clamp(var(--space-sm), 3vw, var(--space-md));
}

.faqs-grid__controls {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
	position: sticky;
	top: var(--header-offset);
	z-index: 5;
	background-color: var(--color-bg);
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--color-border);
}

@media (min-width: 900px) {
	.faqs-grid__controls {
		flex-direction: row;
		align-items: center;
		gap: var(--space-md);
	}
}

/* Search field */

.faqs-grid__search {
	position: relative;
	max-width: 520px;
	margin: 0 auto;
	width: 100%;
}

@media (min-width: 900px) {
	.faqs-grid__search {
		flex: 0 0 180px;
		margin: 0;
	}
}

.faqs-grid__search-icon {
	position: absolute;
	left: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-light);
	pointer-events: none;
	transition: color var(--transition-base);
}

.faqs-grid__search-input[type="search"] {
	width: 100%;
	font-family: var(--font-primary);
	font-size: var(--fs-control);
	font-weight: 300;
	color: var(--color-dark);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 0.5rem 1rem 0.5rem 2.5rem;
	letter-spacing: 0.01em;
	transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
	-webkit-appearance: none;
	appearance: none;
}

.faqs-grid__search-input::placeholder {
	color: var(--color-light);
	font-weight: 300;
}

.faqs-grid__search-input:focus {
	outline: none;
	background-color: var(--color-white);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(0, 122, 51, 0.08);
}

.faqs-grid__search-input:focus + .faqs-grid__search-icon,
.faqs-grid__search:focus-within .faqs-grid__search-icon {
	color: var(--color-primary);
}

/* Chip rail — one horizontally scrollable line instead of a stacked wall
   of wrapped chips, so the sticky controls stay a shallow toolbar. Edge
   fades (below) signal off-screen chips; site.js maps the wheel to
   horizontal scroll and keeps the fades in sync. */

.faqs-grid__filters-rail {
	position: relative;
	min-width: 0;
	flex: 1 1 auto;
}

.faqs-grid__filters-rail::before,
.faqs-grid__filters-rail::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 48px;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-fast);
	z-index: 1;
}

.faqs-grid__filters-rail::before {
	left: 0;
	background: linear-gradient(to right, var(--color-bg), rgba(239, 242, 240, 0));
}

.faqs-grid__filters-rail::after {
	right: 0;
	background: linear-gradient(to left, var(--color-bg), rgba(239, 242, 240, 0));
}

.faqs-grid__filters-rail.has-left::before {
	opacity: 1;
}

.faqs-grid__filters-rail.has-right::after {
	opacity: 1;
}

.faqs-grid__filters {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.35rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Breathing room so chip borders / focus rings aren't clipped. */
	padding-block: 3px;
}

.faqs-grid__filters::-webkit-scrollbar {
	display: none;
}

/* Desktop has the width to show every category at once — two rows at 1440 and
   up, three on smaller laptops. Below this the chips stay a single swipeable
   rail, which suits touch better than a six-row block of wrapped chips. */
@media (min-width: 1024px) {
	.faqs-grid__filters {
		flex-wrap: wrap;
		overflow-x: visible;
	}

	.faqs-grid__filters-rail::before,
	.faqs-grid__filters-rail::after {
		content: none;
	}
}

.faqs-grid__chip {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	white-space: nowrap;
	gap: 0.3rem;
	font-family: var(--font-primary);
	font-size: var(--fs-control);
	font-weight: 300;
	color: var(--color-text);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 3px;
	padding: 0.4rem 0.55rem;
	cursor: pointer;
	letter-spacing: 0.01em;
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.faqs-grid__chip:hover,
.faqs-grid__chip:focus-visible {
	color: var(--color-primary-dark);
	border-color: var(--color-primary);
}

.faqs-grid__chip.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* Plain tallies rather than badges — the boxes cost ~30px per chip, which is
   the difference between two rows of filters and three. */
.faqs-grid__chip-count {
	font-size: 0.75em;
	font-weight: 300;
	color: var(--color-light);
	font-variant-numeric: tabular-nums;
	transition: color var(--transition-base);
}

.faqs-grid__chip.is-active .faqs-grid__chip-count {
	color: rgba(255, 255, 255, 0.75);
}

/* Card list */

.faqs-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.faqs-grid__item {
	list-style: none;
	opacity: 0;
	transform: translateY(12px);
	animation: faq-reveal 600ms ease forwards;
	animation-delay: calc(var(--faq-stagger, 0) * 35ms);
}

.faqs-grid__item.is-hidden {
	display: none;
}

@keyframes faq-reveal {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.faqs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 0.55rem;
	width: 100%;
	height: 100%;
	padding: 1.1rem 1.2rem 1rem;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	/* Barely-there lift off the gray page field. */
	box-shadow: 0 1px 3px rgba(31, 41, 36, 0.05);
	cursor: pointer;
	transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
	font-family: var(--font-primary);
	color: inherit;
}

.faqs-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background-color: var(--color-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--transition-base);
}

.faqs-card:hover,
.faqs-card:focus-visible {
	border-color: var(--color-primary);
	box-shadow: 0 18px 40px -28px rgba(105, 66, 48, 0.35);
	transform: translateY(-2px);
}

.faqs-card:hover::before,
.faqs-card:focus-visible::before {
	transform: scaleX(1);
}

/* Editorial three-tier hierarchy: small eyebrow, prominent question, quiet
   action. With 177 near-identical cards, tag and CTA at body size read as a
   wall — they're labels, not content, so they step down to meta size. */
.faqs-card__tag {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.faqs-card__question {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.3;
	color: var(--color-dark);
	margin: 0;
	flex: 1 1 auto;
}

/* Arrow-only affordance — with 177 cards, a repeated "read answer" label is
   noise; the pointer cursor, hover lift, and top accent carry the invite.
   The verb stays in the button's aria-label. */
.faqs-card__cta {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	color: var(--color-light);
	transition: color var(--transition-base);
}

.faqs-card__cta svg {
	transition: transform var(--transition-base);
}

.faqs-card:hover .faqs-card__cta,
.faqs-card:focus-visible .faqs-card__cta {
	color: var(--color-primary);
}

.faqs-card:hover .faqs-card__cta svg,
.faqs-card:focus-visible .faqs-card__cta svg {
	transform: translateX(4px);
}

.faqs-card__answer-template {
	display: none;
}

.faqs-grid__empty {
	margin-top: var(--space-lg);
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	text-align: center;
	color: var(--color-text);
}

/* Topic gate -------------------------------------------------
 * Shared by the FAQ page and the Resource Library: the page opens on a
 * picker instead of the full list, and the pick pre-filters what follows.
 *
 * All of it is JS-gated. Without site.js / resources-filter.js the gate
 * stays `hidden` and the list stays ungated, so no-JS visitors get the
 * complete page — the gate can only ever remove things a visitor could
 * still reach by other means.
 * ------------------------------------------------------------ */

.faqs-grid.is-gated .faqs-grid__controls,
.faqs-grid.is-gated .faqs-grid__list,
.faqs-grid.is-gated .faqs-grid__empty {
	display: none;
}

.topic-gate {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}

.topic-gate__kicker {
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0 0 var(--space-xs);
}

.topic-gate__title {
	font-size: var(--fs-subsection);
	color: var(--color-dark);
	margin: 0 0 var(--space-lg);
}

.topic-gate__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--space-sm);
}

/* A single card left over on the final row sits under the middle column
   rather than hanging off the left edge — /library/ has 16 topics, so the
   16th ("UltraEasy Fencing") lands alone and read as a mistake.

   `:nth-child(3n + 1):last-child` is true only for a card that both starts a
   row and ends the list, which is exactly the orphan. The media query is the
   guard that matters: `.topic-gate` is capped at 880px so the grid never
   exceeds three columns, but below 790px auto-fit drops to two and then one,
   and `grid-column: 2` against a single-track grid would invent an implicit
   column and push the card off to the side. Both gate pages measure three
   columns from 790px up. */
@media (min-width: 800px) {

	.topic-gate__card:nth-child(3n + 1):last-child {
		grid-column: 2;
	}
}

/* Same treatment for the two-column band, where /faq/'s odd 11th topic is the
   one left hanging. It cannot reuse the trick above: at two columns the card
   is already in column 1, and nudging it across with `transform` would be
   erased by the hover rule below, which sets its own `translateY`. Spanning
   the row and pinning the width to exactly one column centres it without
   touching transform — `50% - gap/2` IS a column, since two columns plus one
   gap make the row. */
@media (min-width: 508px) and (max-width: 760px) {

	.topic-gate__card:nth-child(2n + 1):last-child {
		grid-column: 1 / -1;
		width: calc(50% - var(--space-sm) / 2);
		justify-self: center;
	}
}

.topic-gate__card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: flex-start;
	text-align: left;
	padding: var(--space-md) var(--space-sm);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.topic-gate__card:hover,
.topic-gate__card:focus-visible {
	border-color: var(--color-primary);
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.topic-gate__card-name {
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--color-dark);
}

.topic-gate__card-count {
	font-size: var(--fs-meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-light);
}

/* The "All Products" card leads the grid. A green name and a hairline in the
 * brand colour mark it as the way straight through without making it shout
 * over the categories it sits in front of. */
.topic-gate__card--all {
	border-color: var(--color-primary);
}

.topic-gate__card--all .topic-gate__card-name {
	color: var(--color-primary);
}

/* Resource Library — the gate, topbar and shell are siblings, so visibility
 * needs no page-level state class: gate hidden (no-JS, or after a pick) means
 * the library shows; gate revealed means the library waits. */
.resource-library-page .topic-gate {
	padding: var(--space-lg) var(--container-pad) var(--space-xl);
}

.topic-gate:not([hidden]) ~ .resource-library__topbar,
.topic-gate:not([hidden]) ~ .resource-library__shell {
	display: none;
}

/* One-shot arrival after a pick; class removed by resources-filter.js so
 * later filter changes stay instant. The FAQ grid needs no equivalent — its
 * items already carry the `faq-reveal` stagger, which replays when the list
 * comes back from display:none. */
.resource-library__topbar.is-arriving,
.resource-library__shell.is-arriving {
	animation: library-arrive 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes library-arrive {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.topic-gate__card:hover,
	.topic-gate__card:focus-visible {
		transform: none;
	}

	.resource-library__topbar.is-arriving,
	.resource-library__shell.is-arriving {
		animation: none;
	}
}

/* Modal ------------------------------------------------------ */

.faqs-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-base);
}

.faqs-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.faqs-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(33, 33, 33, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	cursor: pointer;
}

.faqs-modal__panel {
	position: relative;
	width: min(720px, 100%);
	max-height: calc(100vh - var(--space-lg));
	background-color: var(--color-white);
	border-radius: 4px;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.4);
	transform: translateY(14px) scale(0.985);
	transition: transform var(--transition-base);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.faqs-modal.is-open .faqs-modal__panel {
	transform: translateY(0) scale(1);
}

.faqs-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-light);
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
	z-index: 2;
}

.faqs-modal__close:hover,
.faqs-modal__close:focus-visible {
	color: var(--color-primary-dark);
	border-color: var(--color-border);
	background-color: var(--color-bg);
}

.faqs-modal__inner {
	padding: clamp(2rem, 4vw, 3.25rem);
	padding-right: clamp(3.5rem, 5vw, 4.5rem);
	overflow-y: auto;
}

.faqs-modal__category {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-sm);
}

.faqs-modal__category:empty {
	display: none;
}

.faqs-modal__title {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--color-ink);
	margin: 0 0 var(--space-md);
	letter-spacing: 0;
}

.faqs-modal__answer {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.65;
	color: var(--color-text);
}

.faqs-modal__answer p {
	margin: 0 0 1.1rem;
}

.faqs-modal__answer p:last-child {
	margin-bottom: 0;
}

.faqs-modal__answer a {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.faqs-modal__answer a:hover {
	color: var(--color-primary-dark);
}

.faqs-modal__answer ul,
.faqs-modal__answer ol {
	padding-left: 1.5rem;
	margin: 0 0 1.1rem;
}

body.faqs-modal-open {
	overflow: hidden;
}

@media (max-width: 1024px) {
	.faqs-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Tracks the NAV BREAKPOINT: below it the utility bar is hidden and the logo
   drops to 44px, so the header really is 68px tall, not 128px. Many sticky
   elements and scroll-margin-top rules consume this token. */
@media (max-width: 1024.98px) {
	:root {
		--header-offset: 68px;
	}
}

@media (max-width: 640px) {
	.faqs-grid {
		padding-bottom: var(--space-lg);
	}

	.faqs-grid__controls {
		padding-block: var(--space-sm);
	}

	.faqs-grid__list {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.faqs-modal {
		padding: var(--space-sm);
		align-items: flex-end;
	}

	.faqs-modal__panel {
		max-height: 90vh;
		border-radius: 4px 4px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faqs-grid__item {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.faqs-modal,
	.faqs-modal__panel,
	.faqs-card,
	.faqs-card::before {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Product Series Page (template-series.php)
--------------------------------------------------------------*/

.series-page {
	background-color: var(--color-white);
}

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

.series-hero {
	position: relative;
	width: 100%;
	min-height: var(--hero-min-height);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--color-white);
	isolation: isolate;
}

.series-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.series-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.series-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--color-scrim);
}

.series-hero__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: var(--space-lg) var(--space-md);
	max-width: 960px;
}

.series-hero__eyebrow {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--space-sm);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.series-hero__title {
	font-family: var(--font-primary);
	font-size: var(--fs-hero);
	font-weight: 300;
	line-height: 1.1;
	margin: 0;
	letter-spacing: -0.01em;
	color: var(--color-white);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* -- Stacked series sections (former tabs) -------------------- */

.series-section {
	position: relative;
	scroll-margin-top: calc(var(--header-offset) + 52px);
	padding-block: var(--space-lg);
}

.series-section:nth-child(even) {
	background-color: var(--color-bg-alt);
}

/* The oversized outlined section counters that used to sit here were removed
 * 2026-08-07 — across the homepage, category and series templates they read as
 * unedited template scaffolding rather than as editorial structure. Section
 * rhythm now comes from the eyebrow + alternating background alone. */
.series-section__eyebrow {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--space-md);
	color: var(--color-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.series-sections__footnotes {
	padding-block: var(--space-md) var(--space-lg);
	color: var(--color-light);
	font-size: var(--fs-meta);
	line-height: 1.7;
}

/* Sample-catalog CTA pinned to the right of the sticky section nav */
.section-nav__cta-item {
	margin-left: auto;
}

.section-nav__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.125rem;
	border: 1px solid var(--color-primary);
	border-radius: 999px;
	color: var(--color-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--transition-fast), background var(--transition-fast);
}

.section-nav__cta:hover,
.section-nav__cta:focus-visible {
	color: var(--color-white);
	background: var(--color-primary);
}

.series-panel__inner {
	max-width: 1180px;
	margin-inline: auto;
	padding: var(--space-sm) var(--space-md) 0;
}

/* -- Profiles descriptive copy ------------------------------- */

.series-profiles__copy {
	margin-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-lg);
}

.series-profiles__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0 0 var(--space-sm);
}

.series-profiles__body {
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--color-text);
}

.series-profiles__body p {
	margin: 0 0 var(--space-sm);
}

.series-profiles__dual-finish {
	margin-top: var(--space-md);
	font-size: var(--fs-body);
	color: var(--color-text);
	line-height: 1.6;
}

/* -- Colors panel -------------------------------------------- */

.series-colors__header {
	margin-bottom: var(--space-md);
}

.series-colors__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0 0 var(--space-sm);
}

.series-colors__intro {
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--color-text);
	max-width: 60ch;
}

.series-colors__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	align-items: start;
}

@media (min-width: 900px) {
	.series-colors__layout {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--space-lg);
	}
}

/* Half-screen conversion split — swatch grid left, sticky sample panel right. */
.series-colors__layout--split {
	gap: var(--space-lg);
}

@media (min-width: 900px) {
	.series-colors__layout--split {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: clamp(2rem, 5vw, 5rem);
	}
}

.series-colors__range {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
}

.series-colors__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: var(--space-sm);
}

.series-swatch {
	display: block;
}

.series-swatch__button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.series-swatch__chip {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border: 1px solid var(--color-border);
	overflow: hidden;
	transition: border-color var(--transition-fast);
}

.series-swatch__button:hover .series-swatch__chip,
.series-swatch__button:focus-visible .series-swatch__chip {
	border-color: var(--color-dark);
}

/* Selected chip: 2px ink frame with a breathing gap — the gap picks up
 * the section background, so it works on white and bg-alt sections alike. */
.series-swatch.is-selected .series-swatch__chip {
	border: 2px solid var(--color-dark);
	padding: 3px;
}

.series-swatch__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.series-swatch__label {
	display: block;
	margin-top: 0.55rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--color-text);
}

.series-swatch__code {
	display: block;
	margin-left: 0;
	color: var(--color-light);
}

.series-finishes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
}

.series-finish {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.series-finish__image {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--color-border);
}

.series-finish__label {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-primary-dark);
	text-align: center;
}

.series-colors__footnote {
	margin-top: var(--space-md);
	font-size: var(--fs-body);
	color: var(--color-text);
	line-height: 1.6;
	max-width: 90ch;
}

/* Custom Colors CTA card */

.series-custom-cta {
	margin-top: var(--space-lg);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	padding: var(--space-md);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	align-items: center;
}

@media (min-width: 768px) {
	.series-custom-cta {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		padding: var(--space-lg);
	}
}

.series-custom-cta__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--color-ink);
	margin: 0 0 var(--space-sm);
	line-height: 1.25;
}

/* Demoted to a quiet text link — the sticky sample panel above owns the
 * section's primary action (CTA rhythm: one strong CTA per viewport). */
.series-custom-cta__button {
	display: inline-block;
	padding: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--color-primary-dark);
	background-color: transparent;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: left bottom;
	background-repeat: no-repeat;
	border: 0;
	text-decoration: none;
	transition: background-size var(--transition-base);
}

.series-custom-cta__button:hover,
.series-custom-cta__button:focus-visible {
	background-size: 100% 1px;
}

.series-custom-cta__body {
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--color-text);
}

.series-custom-cta__body a {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* -- Sticky "order this color" sample panel ------------------- */

.series-sample-panel {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	padding: var(--space-md);
}

@media (min-width: 900px) {
	.series-sample-panel {
		position: sticky;
		top: calc(var(--header-offset) + 76px);
	}
}

.series-sample-panel__preview {
	margin: 0 0 var(--space-md);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--color-bg-alt);
}

.series-sample-panel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.series-sample-panel__eyebrow {
	margin: 0 0 var(--space-xs);
	font-size: var(--fs-meta);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-light);
}

.series-sample-panel__name {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: var(--lh-heading);
	color: var(--color-ink);
}

.series-sample-panel__code {
	margin: 0.4rem 0 0;
	font-size: var(--fs-meta);
	letter-spacing: 0.08em;
	color: var(--color-light);
}

.series-sample-panel__cta {
	display: flex;
	width: 100%;
	justify-content: center;
	margin-top: var(--space-md);
}

/* Demoted state when no sample product is linked — quiet editorial
 * link to the full samples catalog instead of a dead button. */
.series-sample-panel__cta--fallback {
	display: inline-block;
	width: auto;
	margin-top: var(--space-md);
	font-size: var(--fs-body);
	color: var(--color-primary-dark);
}

.series-sample-panel__note {
	margin: var(--space-sm) 0 0;
	font-size: var(--fs-meta);
	letter-spacing: 0.03em;
	text-align: center;
	color: var(--color-light);
}

/* WC injects a "View cart" text link after an AJAX add — the cart
 * drawer auto-opens instead, so the injected link is noise here. */
.series-sample-panel .added_to_cart {
	display: none;
}

/* -- Gallery panel ------------------------------------------- */

.series-gallery__header {
	margin-bottom: var(--space-md);
}

.series-gallery__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0 0 var(--space-sm);
}

.series-gallery__intro {
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--color-text);
	max-width: 60ch;
}

.series-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
}

@media (min-width: 600px) {
	.series-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

.series-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Full-bleed feature band — the first gallery image breaks out of the
 * container; data-parallax on the img drifts it inside the crop. */
.series-gallery__feature {
	width: 100vw;
	margin: var(--space-md) calc(50% - 50vw) var(--space-sm);
	height: min(72vh, 680px);
	overflow: hidden;
}

.series-gallery__feature .series-gallery__tile {
	height: 100%;
}

/* 118% height gives the ±drift of data-parallax room to move without
 * ever exposing the band edges. */
.series-gallery__feature-image {
	width: 100%;
	height: 118%;
	object-fit: cover;
	display: block;
}

/* Lightbox tile — button wrapper around each gallery image. */
.series-gallery__tile {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

/* -- Accessories panel --------------------------------------- */

.series-accessories__header {
	margin-bottom: var(--space-md);
}

.series-accessories__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0 0 var(--space-sm);
}

.series-accessories__intro {
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--color-text);
	max-width: 60ch;
}

.series-accessories__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

@media (min-width: 600px) {
	.series-accessories__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

.series-accessory__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	text-decoration: none;
	color: var(--color-primary-dark);
}

.series-accessory__media {
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.series-accessory__image {
	max-width: 100%;
	height: auto;
	display: block;
	transition: transform var(--transition-base);
}

.series-accessory__link:hover .series-accessory__image {
	transform: scale(1.03);
}

.series-accessory__title {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
}

/* -- Downloads panel ----------------------------------------- */

.series-downloads__header {
	margin-bottom: var(--space-md);
}

.series-downloads__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0;
}

.series-downloads__group {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
	padding-block: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.series-downloads__group:first-of-type {
	border-top: 0;
	padding-top: var(--space-sm);
}

@media (min-width: 768px) {
	.series-downloads__group {
		grid-template-columns: 220px 1fr;
		gap: var(--space-md);
		align-items: start;
	}
}

.series-downloads__group-title {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-primary-dark);
	margin: 0;
}

.series-downloads__group-title .doctype-icon {
	flex: 0 0 auto;
}

/* Single-column row list — compact rows share borders like the resource
   library list, instead of a grid of tall cards. */
.series-downloads__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.series-download {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: var(--space-sm);
	border: 1px solid var(--color-border);
	background-color: var(--color-white);
	text-decoration: none;
	text-align: left;
	color: var(--color-primary-dark);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	justify-content: flex-start;
}

.series-download:hover,
.series-download:focus-visible {
	border-color: var(--color-primary-dark);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.series-download__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}

.series-download__label {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.35;
	color: var(--color-text);
}

/* ============================================================
 * Additions for the CPT-based series template
 * ============================================================ */

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

.series-hero__subtitle {
	margin: var(--space-sm) 0 0;
	max-width: 36ch;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-white);
	opacity: 0.9;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.series-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: var(--space-md) 0 0;
	padding: 0.95rem 1.6rem;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color var(--transition-fast);
}

.series-hero__cta:hover,
.series-hero__cta:focus-visible {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}

.series-hero__cta-arrow {
	transition: transform var(--transition-fast);
}

.series-hero__cta:hover .series-hero__cta-arrow,
.series-hero__cta:focus-visible .series-hero__cta-arrow {
	transform: translateX(0.25rem);
}

/* -- Profiles repeater (replaces .series-pair) --------------- */

.series-profiles__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
	.series-profiles__grid--count-2 {
		grid-template-columns: 1fr 1fr;
	}
	.series-profiles__grid--count-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	/* Accessory sets (trims, fittings) — two-up regardless of count. */
	.series-profiles__grid--dense {
		grid-template-columns: repeat(2, 1fr);
	}
}

.series-profile {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-md);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
	.series-profile {
		flex-direction: row;
		align-items: center;
		gap: var(--space-md);
	}
	/* Specs read on the left, image sits on the right (matches reference).
	 * The product render carries the card, so it takes the larger share —
	 * a 50/50 split left it reading as a thumbnail (2026-08-28 punch list). */
	.series-profile__content {
		order: 1;
		flex: 1 1 0;
	}
	.series-profile__media {
		order: 2;
		flex: 1.35 1 0;
	}

	/* Any multi-column grid halves (or thirds) the card, which is too narrow
	 * to split again — the two-up board series were showing a postage-stamp
	 * render beside heavily wrapped text. Keep the drawing above its specs,
	 * full card width, exactly like the dense accessory grids. */
	.series-profiles__grid--count-2 .series-profile,
	.series-profiles__grid--count-3 .series-profile,
	.series-profiles__grid--dense .series-profile {
		flex-direction: column;
		align-items: stretch;
	}
	/* flex:1 1 0 from the row layout would resolve against the COLUMN axis
	 * here and crush the drawing to a sliver — reset the basis to auto. */
	.series-profiles__grid--count-2 .series-profile__media,
	.series-profiles__grid--count-3 .series-profile__media,
	.series-profiles__grid--dense .series-profile__media {
		order: 1;
		flex: 0 0 auto;
	}
	.series-profiles__grid--count-2 .series-profile__content,
	.series-profiles__grid--count-3 .series-profile__content,
	.series-profiles__grid--dense .series-profile__content {
		order: 2;
		flex: 0 0 auto;
	}
}

/* Trim drawings are portrait (render over a labelled cross-section strip);
 * the 3:2 box the board renders use would letterbox them to a sliver. */
.series-profiles__grid--dense .series-profile__media {
	aspect-ratio: 4 / 5;
}

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

.series-profile__media {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

/* Board renders ship with white padding around the product; contain keeps
 * the entire board visible (the earlier cover + scale(1.15) treatment
 * cropped the board ends and read as an over-zoomed thumbnail). */
.series-profile__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.series-profile__name {
	margin: 0;
	font-family: var(--font-primary);
	/* Was var(--fs-h4), which is undefined — the name silently inherited the
	   body size and read oversized next to the render. */
	font-size: clamp(1.25rem, 1.2vw + 0.75rem, 1.5rem);
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-dark);
}

/* Profile specs are a real label/value table (series-panel-profiles.php), so
   the numbers on a series page are as extractable as the ones in
   .category-specs__table. Same table grammar, rotated: labels are
   <th scope="row"> cells in the first column instead of a <thead>. */

.series-profile__scroller {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
}

.series-profile__scroller:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.series-profile__table {
	width: 100%;
	/* Overrides the global table margin so the scroller hugs the rows. */
	margin: 0;
	border-collapse: collapse;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-text);
}

.series-profile__th {
	width: 34%;
	padding: 0.7rem 1rem;
	background-color: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-dark);
}

.series-profile__cell {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}

.series-profile__table tbody tr:last-child .series-profile__th,
.series-profile__table tbody tr:last-child .series-profile__cell {
	border-bottom: 0;
}

.series-profile__notes {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	line-height: 1.55;
	color: var(--color-light);
}

.series-profile__notes p {
	margin: 0 0 0.5rem;
}

/* -- Comparison panel ---------------------------------------- */

.series-comparison__header {
	margin-bottom: var(--space-md);
}

.series-comparison__heading {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

.series-comparison__intro {
	max-width: 60ch;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-text);
}

/* Wide content scrolls in its own container so the page body never does. */
.series-comparison__scroller {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.series-comparison__scroller:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.series-comparison__table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-text);
}

.series-comparison__th {
	padding: 1rem 1.2rem;
	background-color: var(--color-bg-alt);
	text-align: left;
	font-weight: 300;
	font-size: var(--fs-meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-dark);
	border-bottom: 1px solid var(--color-border);
}

.series-comparison__th--feature {
	width: 32%;
}

.series-comparison__feature {
	padding: 1rem 1.2rem;
	font-weight: 300;
	color: var(--color-dark);
	background-color: var(--color-bg-alt);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

.series-comparison__cell {
	padding: 1rem 1.2rem;
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}

.series-comparison__table tr:last-child .series-comparison__feature,
.series-comparison__table tr:last-child .series-comparison__cell {
	border-bottom: 0;
}

/* Below 640px three text columns collapse to one word per line, so each row
   becomes its own card: feature name as the header, then both values labelled
   from `data-label`. Keeps the comparison scannable on a phone instead of
   hiding a column off the edge of a scroller. */
@media (max-width: 639px) {
	.series-comparison__scroller {
		overflow-x: visible;
	}

	.series-comparison__table {
		min-width: 0;
	}

	.series-comparison__table thead {
		/* Column meaning moves onto each cell — keep it for screen readers. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.series-comparison__table tr {
		display: block;
		margin-bottom: var(--space-sm);
		border: 1px solid var(--color-border);
		background-color: var(--color-white);
	}

	.series-comparison__table tr:last-child {
		margin-bottom: 0;
	}

	.series-comparison__feature {
		display: block;
		font-weight: 600;
		border-bottom: 1px solid var(--color-border);
	}

	.series-comparison__cell {
		display: block;
		border-bottom: 1px solid var(--color-border);
	}

	.series-comparison__table tr .series-comparison__cell:last-child {
		border-bottom: 0;
	}

	.series-comparison__cell[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.35rem;
		font-size: var(--fs-meta);
		font-weight: 400;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--color-light);
	}
}

/* -- Category spec table ------------------------------------- */
/* Compact all-profiles table on category pages (category-specs.php).
   Same table grammar as .series-comparison; series names become full-width
   group rows so the layout survives the mobile card collapse. */

.category-specs {
	padding: var(--space-xl) 0;
	background-color: var(--color-bg-alt);
	/* Same offset as .category-section so #specifications lands below the
	   sticky header + section nav. */
	scroll-margin-top: calc(var(--header-offset) + 56px);
}

.category-specs__header {
	max-width: 62ch;
	margin-bottom: var(--space-md);
}

.category-specs__eyebrow {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.category-specs__title {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--color-ink);
}

.category-specs__note {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-text);
}

.category-specs__scroller {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
}

.category-specs__scroller:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.category-specs__table {
	width: 100%;
	min-width: 44rem;
	border-collapse: collapse;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-text);
}

.category-specs__th {
	padding: 1rem 1.2rem;
	background-color: var(--color-bg-alt);
	text-align: left;
	font-weight: 300;
	font-size: var(--fs-meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-dark);
	border-bottom: 1px solid var(--color-border);
}

.category-specs__series {
	padding: 1.1rem 1.2rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	background-color: var(--color-white);
}

.category-specs__series-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-body);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.category-specs__series-link:hover,
.category-specs__series-link:focus-visible {
	color: var(--color-primary);
}

.category-specs__cell {
	padding: 0.85rem 1.2rem;
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}

.category-specs__cell--name {
	color: var(--color-dark);
	white-space: nowrap;
}

.category-specs__extra {
	display: block;
	margin-top: 0.3rem;
	font-size: var(--fs-meta);
	color: var(--color-light);
	letter-spacing: 0.02em;
}

/* One dimension per line (Width / Depth / Length), so no cell asks the
   reader to scan six numbers in a row. */
.category-specs__dim,
.product-specs__dim {
	display: block;
	white-space: nowrap;
}

.category-specs__dim + .category-specs__dim,
.product-specs__dim + .product-specs__dim {
	margin-top: 0.2rem;
}

.category-specs__dim-label,
.product-specs__dim-label {
	display: inline-block;
	min-width: 3.4em;
	font-size: var(--fs-meta);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-light);
}

.category-specs__table tbody tr:last-child .category-specs__cell {
	border-bottom: 0;
}

/* Mobile: rows become labelled cards, same treatment as the series
   comparison table. Series group rows read as card headers. */
@media (max-width: 639px) {
	.category-specs__scroller {
		overflow-x: visible;
		border: 0;
		background-color: transparent;
	}

	.category-specs__table {
		min-width: 0;
	}

	.category-specs__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.category-specs__table tr {
		display: block;
	}

	.category-specs__series-row {
		margin: var(--space-sm) 0 0;
	}

	.category-specs__series {
		display: block;
		padding: 0.9rem 1.2rem;
		border: 1px solid var(--color-border);
		border-bottom: 0;
		background-color: var(--color-bg-alt);
	}

	.category-specs__table tbody tr:not(.category-specs__series-row) {
		margin-bottom: var(--space-xs);
		border: 1px solid var(--color-border);
		background-color: var(--color-white);
	}

	.category-specs__cell {
		display: block;
		border-bottom: 1px solid var(--color-border);
	}

	.category-specs__cell--name {
		white-space: normal;
		font-weight: 600;
	}

	.category-specs__table tr .category-specs__cell:last-child {
		border-bottom: 0;
	}

	.category-specs__cell[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.35rem;
		font-size: var(--fs-meta);
		font-weight: 400;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--color-light);
	}
}

/* -- Video panel --------------------------------------------- */

/* The section is a small library now, not a single film: a lead player, what
   is loaded in it, and a shelf of everything else about this product. See
   inc/series-videos.php for how the shelf is filled. */

.series-video__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	max-width: 1100px;
	margin: 0 auto var(--space-md);
}

.series-video__heading {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

.series-video__all {
	display: inline-flex;
	align-items: center;
	margin-inline-start: auto;
	gap: 0.4em;
	font-size: var(--fs-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-primary);
	white-space: nowrap;
	transition: color var(--transition-fast), gap var(--transition-fast);
}

.series-video__all:hover,
.series-video__all:focus-visible {
	color: var(--color-primary-dark);
	gap: 0.75em;
}

.series-video__frame {
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	background-color: var(--color-dark);
	border-radius: var(--card-radius);
	overflow: hidden;
}

.series-video__frame iframe,
.series-video__frame embed,
.series-video__frame object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Click-to-play facade: poster + play control (iframe mounts on click) */
.series-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.series-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition-base), transform var(--transition-base);
	z-index: 2;
}

.series-video__play:hover,
.series-video__play:focus-visible {
	background: var(--color-white);
	transform: translate(-50%, -50%) scale(1.15);
}

.series-video__play svg {
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.series-video__play {
		width: 60px;
		height: 60px;
	}
}

/* What is in the player, named. Without this the poster is the only clue,
   and once a tile swaps the film the heading above is describing something
   that is no longer playing. */
.series-video__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-md);
	max-width: 1100px;
	margin: var(--space-sm) auto 0;
}

.series-video__now {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	line-height: 1.5;
	color: var(--color-text);
}

.series-video__now-topic {
	color: var(--color-primary);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.series-video__now-topic::after {
	content: "";
	display: inline-block;
	width: 1.25rem;
	height: 1px;
	margin: 0 0.6rem 0.3em;
	background: var(--color-border);
	vertical-align: middle;
}

.series-video__caption {
	margin: 0;
	max-width: 60ch;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	font-style: italic;
	line-height: 1.55;
	color: var(--color-light);
}

/* -- Video panel: the shelf ----------------------------------- */

.series-video__tiles-heading {
	max-width: 1100px;
	margin: var(--space-lg) auto var(--space-sm);
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-light);
}

.series-video__tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md) var(--space-sm);
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.series-video__tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.series-video__tiles {
		grid-template-columns: repeat(4, 1fr);
	}
}

.series-video__tile-link {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	height: 100%;
	text-decoration: none;
}

.series-video__tile-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background-color: var(--color-dark);
}

.series-video__tile-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base), opacity var(--transition-base);
}

.series-video__tile-link:hover .series-video__tile-image {
	transform: scale(1.04);
	opacity: 0.85;
}

/* The play badge sits in the corner rather than dead centre: at tile size a
   centred disc covers the frame it is meant to advertise. */
.series-video__tile-play {
	position: absolute;
	inset-block-end: 0.5rem;
	inset-inline-start: 0.5rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-dark);
	transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.series-video__tile-play svg {
	margin-inline-start: 0.1rem;
}

.series-video__tile-link:hover .series-video__tile-play,
.series-video__tile-link:focus-visible .series-video__tile-play {
	background: var(--color-white);
	transform: scale(1.1);
}

.series-video__tile-length {
	position: absolute;
	inset-block-end: 0.5rem;
	inset-inline-end: 0.5rem;
	padding: 0.15rem 0.45rem;
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, 0.72);
	color: var(--color-white);
	font-size: var(--fs-meta);
	font-variant-numeric: tabular-nums;
}

.series-video__tile-link.is-playing .series-video__tile-media {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.series-video__tile-link.is-playing .series-video__tile-play {
	background: var(--color-primary);
	color: var(--color-white);
}

.series-video__tile-text {
	display: block;
}

.series-video__tile-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text);
	transition: color var(--transition-fast);
}

.series-video__tile-link:hover .series-video__tile-title,
.series-video__tile-link.is-playing .series-video__tile-title {
	color: var(--color-primary-dark);
}

/* -- Accessories: trims & hardware spec cards ----------------- */

.series-hardware {
	margin-top: var(--space-lg);
}

.series-accessories__grid + .series-hardware:first-of-type,
.series-accessories__header + .series-hardware:first-of-type {
	margin-top: var(--space-md);
}

.series-hardware__title {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

/* Part names carry long unbreakable model codes ("Norwegian Board Outside
   Corner Trim UH51"), whose min-content width exceeded a 2-up column at 390px
   and pushed the panel off screen. Mobile lays the card out sideways — thumb
   left, specs right — which reads better than a 119px column ever could, and
   the vertical card returns at tablet. minmax(0, …) keeps every track able to
   shrink below its content. */
.series-hardware__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-sm);
	/* The starter's `ul, ol { margin: 0 0 1.5em 3em }` was indenting this grid
	   by 72px, so the cards rendered into 254px of a 326px panel. */
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.series-hardware__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.series-hardware__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.series-hardware__item {
	display: flex;
	flex-direction: row;
	gap: var(--space-sm);
	align-items: flex-start;
	padding: var(--space-sm);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
}

.series-hardware__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.series-hardware__media {
	display: block;
	flex: 0 0 88px;
	width: 88px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--color-bg);
}

@media (min-width: 640px) {
	.series-hardware__item {
		flex-direction: column;
		gap: 0;
	}

	.series-hardware__media {
		flex: 0 0 auto;
		width: auto;
		margin-bottom: var(--space-sm);
	}
}

.series-hardware__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.series-hardware__name {
	margin: 0 0 0.4rem;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-ink);
	overflow-wrap: break-word;
}

/* Hardware item specs use the same rotated table as .series-profile__table,
   one size down to suit the smaller card. */

.series-hardware__scroller {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
}

.series-hardware__scroller:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.series-hardware__table {
	width: 100%;
	/* Overrides the global table margin so the scroller hugs the rows. */
	margin: 0;
	border-collapse: collapse;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-text);
}

.series-hardware__th {
	padding: 0.5rem 0.7rem;
	background-color: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-dark);
}

.series-hardware__cell {
	padding: 0.5rem 0.7rem;
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}

.series-hardware__cell--note {
	color: var(--color-light);
}

.series-hardware__table tbody tr:last-child .series-hardware__th,
.series-hardware__table tbody tr:last-child .series-hardware__cell {
	border-bottom: 0;
}

.series-hardware__link {
	display: inline-block;
	margin-top: auto;
	padding-top: var(--space-xs);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
}

.series-hardware__link:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* -- Accessories: tagline + ntw_series cards ----------------- */

.series-accessory__tagline {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	line-height: 1.4;
	color: var(--color-light);
}

/* -- Downloads (revised: card-per-resource w/ format chips) -- */

.series-downloads__intro {
	max-width: 60ch;
	margin: 0 0 var(--space-md);
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-text);
}

.series-downloads__placeholder {
	padding: var(--space-md);
	background-color: var(--color-bg-alt);
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	font-style: italic;
	color: var(--color-light);
	text-align: center;
}

.series-download {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem var(--space-sm);
	padding: 0.5rem 0.9rem;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	transition: background-color var(--transition-fast);
}

/* Collapse shared borders between stacked rows. */
.series-download + .series-download {
	border-top: 0;
}

.series-download:hover,
.series-download:focus-within {
	background-color: var(--color-bg);
}

.series-download__title {
	flex: 1 1 240px;
	min-width: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.4;
	color: var(--color-dark);
}

.series-download__files {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.4rem;
	flex-shrink: 0;
}

/* Same badge language as the library rows: solid format color, icon + token. */
.series-download__file {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.22rem 0.55rem;
	background-color: var(--fmt, var(--fmt-default));
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
	transition: filter var(--transition-fast), transform var(--transition-fast);
}

.series-download__file:hover,
.series-download__file:focus-visible {
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.series-download__file .series-download__label {
	font-size: inherit;
	color: inherit;
}

.series-download__file .series-download__icon {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	background-color: transparent;
	color: inherit;
}

/* -- UltraShield closing blurb (shared) ---------------------- */

.series-ultrashield {
	background-color: var(--color-bg-alt);
	padding: var(--space-lg) var(--space-md);
}

.series-ultrashield__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.series-ultrashield__eyebrow {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.series-ultrashield__heading {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-primary);
	font-size: var(--fs-h2);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: var(--color-dark);
}

.series-ultrashield__body {
	margin: 0 auto var(--space-md);
	max-width: 56ch;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.7;
	color: var(--color-text);
}

.series-ultrashield__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.25rem;
	transition: color var(--transition-fast);
}

.series-ultrashield__cta:hover,
.series-ultrashield__cta:focus-visible {
	color: var(--color-primary-dark);
}

.series-ultrashield__arrow {
	transition: transform var(--transition-fast);
}

.series-ultrashield__cta:hover .series-ultrashield__arrow,
.series-ultrashield__cta:focus-visible .series-ultrashield__arrow {
	transform: translateX(0.25rem);
}

/* -- Get Started CTA block (shared) -------------------------- */

.series-cta {
	background-color: var(--color-dark);
	padding: var(--space-lg) var(--space-md);
	color: var(--color-white);
}

.series-cta__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.series-cta__heading {
	margin: 0 0 var(--space-md);
	font-family: var(--font-primary);
	font-size: var(--fs-h2);
	font-weight: 300;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-white);
	text-align: center;
}

.series-cta__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background-color: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 600px) {
	.series-cta__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.series-cta__grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

.series-cta__item {
	background-color: var(--color-dark);
}

.series-cta__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* Fill the whole grid cell so the hover wash covers the entire box even
	   when a neighbouring two-line label makes the row taller. */
	height: 100%;
	box-sizing: border-box;
	padding: var(--space-md) var(--space-sm);
	text-decoration: none;
	color: var(--color-white);
	text-align: center;
	transition: background-color var(--transition-fast);
}

.series-cta__link:hover,
.series-cta__link:focus-visible {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.series-cta__icon {
	display: inline-flex;
	margin-bottom: 0.5rem;
	color: var(--color-primary);
	transition: color var(--transition-fast);
}

.series-cta__link:hover .series-cta__icon,
.series-cta__link:focus-visible .series-cta__icon {
	color: var(--color-white);
}

.series-cta__label {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.series-cta__sub {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.7);
}

.series-cta__link:hover .series-cta__sub,
.series-cta__link:focus-visible .series-cta__sub {
	color: rgba(255, 255, 255, 0.9);
}

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

@media (prefers-reduced-motion: reduce) {
	.series-panel,
	.series-accessory__image,
	.series-hero__cta-arrow,
	.series-ultrashield__arrow,
	.series-cta__link,
	.series-cta__icon,
	.series-download {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Samples Catalog
--------------------------------------------------------------*/

/* --- Hero: shared template-parts/page-hero.php (2026-06-26) -- */

/* --- Two-column layout -------------------------------------- */
.samples {
	max-width: 1440px;
	margin: 0 auto;
	/* Top padding separates the filter/toolbar row from the hero above so it
	 * doesn't feel crowded against the hero's bottom edge. */
	padding: var(--space-lg) var(--space-md) var(--space-xl);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 900px) {
	.samples {
		grid-template-columns: 260px 1fr;
		gap: var(--space-lg);
	}
}

/* --- Sidebar filter ----------------------------------------- */
.samples__sidebar {
	position: relative;
	/* Required for the horizontal pill scroller inside to actually scroll
	 * within its grid cell, instead of stretching the cell wide enough to
	 * fit all pills (which would force horizontal page scroll on mobile). */
	min-width: 0;
}

.samples__main {
	min-width: 0;
}

@media (min-width: 900px) {
	.samples__sidebar {
		position: sticky;
		top: calc(var(--header-offset) + var(--space-md));
		align-self: start;
	}
}

.samples__sidebar-heading {
	margin: 0 0 var(--space-md);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-light);
}

/* "How samples work" — quiet utility note filling the rail below the
 * filters with useful conversion copy. */
.samples__how {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.samples__how-heading {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-meta);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-light);
}

.samples__how-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.samples__how-list li {
	position: relative;
	padding-left: 1.1rem;
	font-size: var(--fs-meta);
	line-height: 1.5;
	color: var(--color-text);
}

.samples__how-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-primary);
}

.samples__filter {
	/* Hidden on mobile — the native <select> takes over below 900px.
	 * Desktop styles re-enable display via the media query below. */
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Mobile filter: native <select> dropdown ---------------- */
.samples__filter-select-label {
	display: block;
	position: relative;
}

.samples__filter-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	padding: 0.875rem 3rem 0.875rem 1.125rem;
	background: var(--color-white);
	border: 1px solid var(--color-dark);
	border-radius: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
	letter-spacing: 0.01em;
	cursor: pointer;
	line-height: 1.4;
	transition: border-color var(--transition-fast);
}

.samples__filter-select:hover,
.samples__filter-select:focus-visible {
	border-color: var(--color-primary);
}

/* Custom chevron — pure CSS, sits inside the label so it doesn't
 * steal clicks from the native control. */
.samples__filter-select-label::after {
	content: '';
	position: absolute;
	right: 1.25rem;
	top: 50%;
	width: 0.625rem;
	height: 0.625rem;
	border-right: 1.5px solid var(--color-dark);
	border-bottom: 1.5px solid var(--color-dark);
	transform: translateY(-75%) rotate(45deg);
	pointer-events: none;
}

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

@media (min-width: 900px) {
	.samples__filter {
		display: flex;
		flex-direction: column;
		gap: 0;
		overflow: visible;
		padding: 0;
	}

	.samples__filter-select-label {
		display: none;
	}
}

.samples__filter-item { margin: 0; flex-shrink: 0; }

.samples__filter-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	color: var(--color-text);
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

@media (min-width: 900px) {
	.samples__filter-item {
		border-bottom: 1px solid var(--color-border);
	}
	.samples__filter-item:first-child { border-top: 1px solid var(--color-border); }

	.samples__filter-button {
		width: 100%;
		justify-content: space-between;
		padding: 1.125rem 0 1.125rem 1.25rem;
		background: transparent;
		border: none;
		border-radius: 0;
		font-size: var(--fs-body);
		text-align: left;
		position: relative;
	}

	.samples__filter-button::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		width: 3px;
		height: 0;
		background: var(--color-primary);
		transform: translateY(-50%);
		transition: height var(--transition-base);
	}
}

.samples__filter-button:hover { color: var(--color-dark); }

.samples__filter-button.is-active {
	color: var(--color-dark);
	font-weight: 300;
	border-color: var(--color-dark);
}

@media (min-width: 900px) {
	.samples__filter-button.is-active {
		border: none;
	}
	.samples__filter-button.is-active::before { height: 60%; }
}

.samples__filter-count {
	font-size: var(--fs-meta);
	font-weight: 300;
	color: var(--color-light);
	letter-spacing: 0.05em;
}

.samples__filter-button.is-active .samples__filter-count {
	color: var(--color-primary);
}

/* --- Main column / toolbar ---------------------------------- */
.samples__main { min-width: 0; }

.samples__toolbar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	padding-bottom: var(--space-md);
	margin-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.samples__count {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: 300;
	letter-spacing: 0.05em;
	color: var(--color-light);
}

.samples__count strong {
	color: var(--color-dark);
	font-weight: 300;
}

.samples__sort { position: relative; }

.samples__sort-select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: none;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
	padding: 0.25rem 1.5rem 0.25rem 0;
	cursor: pointer;
	letter-spacing: 0.02em;
}

.samples__sort::after {
	content: '';
	position: absolute;
	right: 0.25rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.5px solid var(--color-dark);
	border-bottom: 1.5px solid var(--color-dark);
	transform: translateY(-75%) rotate(45deg);
	pointer-events: none;
}

/* --- Sample grid -------------------------------------------- */
.samples__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md) 0.875rem;
}

@media (min-width: 640px) {
	.samples__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.25rem; }
}

@media (min-width: 1280px) {
	.samples__grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Sample card -------------------------------------------- */
.sample-card {
	display: flex;
	flex-direction: column;
	/* Grid items default to min-width:auto — without this, the nowrap
	 * kicker's min-content width would force the 1fr tracks wider than
	 * the grid and overflow the page. */
	min-width: 0;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 0.75rem 0.75rem 1rem;
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.sample-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 18px 40px -18px rgba(33, 48, 42, 0.35);
}

.sample-card[hidden] { display: none; }

.sample-card__media {
	position: relative;
	display: block;
	/* Square — matches the 600×600 'ntw-card' crop, so no image is lost
	 * to object-fit, and the card runs shorter than the old 4/5 portrait. */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	margin-bottom: 0.75rem;
}

.sample-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.sample-card__image--placeholder {
	display: block;
	background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border) 100%);
}

.sample-card:hover .sample-card__image {
	transform: scale(1.04);
}

.sample-card__series {
	margin: 0 0 0.35rem;
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary);
	/* Kicker stays one line — "Siding, Cladding and Fencing" would
	 * otherwise wrap to three lines at card widths. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sample-card__title {
	margin: 0 0 0.5rem;
	/* Steps down from --fs-body (24–26px) — at 2-up mobile / 4-up desktop
	 * the full-size scale wraps long product names onto three lines. */
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.3;
	color: var(--color-dark);
	letter-spacing: -0.01em;
}

/* Compact spec line — SKU · color count. Density without weight. */
.sample-card__meta {
	margin: 0 0 0.875rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-meta);
	letter-spacing: 0.05em;
	color: var(--color-light);
}

.sample-card__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--color-dark), var(--color-dark));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size var(--transition-base);
}

.sample-card:hover .sample-card__title a {
	background-size: 100% 1px;
}

.sample-card__cta {
	margin-top: auto;
	/* Full-width with the "+" pushed to the far edge — "Add Sample to
	 * Cart" won't fit an inline pill at 2-up mobile / 4-up desktop
	 * card widths, and the stretched bar keeps every card's CTA
	 * baseline-aligned across the row. */
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5625rem 0.75rem;
	background: transparent;
	border: 1px solid var(--color-dark);
	border-radius: 0;
	font-family: var(--font-primary);
	font-size: 0.6875rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-dark);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

@media (min-width: 640px) {
	.sample-card__cta {
		padding: 0.625rem 0.875rem;
		font-size: 0.75rem;
	}
}

.sample-card__cta::after {
	content: '+';
	font-size: var(--fs-meta);
	line-height: 1;
	font-weight: 300;
}

.sample-card__cta:hover,
.sample-card__cta:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* WooCommerce adds .added / .loading classes during AJAX add-to-cart. */
.sample-card__cta.loading { opacity: 0.6; pointer-events: none; }
.sample-card__cta.added::after { content: '✓'; }

/* --- Empty / notice ----------------------------------------- */
.samples__empty {
	padding: var(--space-lg) 0;
	text-align: center;
	color: var(--color-muted, var(--color-text));
}

.samples__notice {
	margin-top: var(--space-lg);
	padding: var(--space-md);
	background: var(--color-bg-alt);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	font-size: var(--fs-body);
}

.samples__notice-text { margin: 0; }
.samples__notice-text strong { color: var(--color-dark); font-weight: 300; }

.samples__notice-cta {
	font-size: var(--fs-body);
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--color-primary);
	padding-bottom: 2px;
}

/* --- Page-load reveal animations ---------------------------- */

/* Hero stagger removed — the shared page-hero carries its own image-settle
 * animation (2026-07-13). */
@keyframes ntw-samples-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Sidebar — fade in after hero settles */
.samples__sidebar,
.samples__toolbar {
	opacity: 0;
	animation: ntw-samples-rise 800ms cubic-bezier(0.2, 0.7, 0.2, 1) 600ms forwards;
}
.samples__toolbar { animation-delay: 700ms; }

/* Notice at the bottom — soft fade */
.samples__notice {
	opacity: 0;
	animation: ntw-samples-rise 800ms cubic-bezier(0.2, 0.7, 0.2, 1) 1100ms forwards;
}

/* Sample cards — JS-driven reveal (IntersectionObserver) */
.sample-card {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: opacity, transform;
}

.sample-card.is-revealed {
	opacity: 1;
	transform: translateY(0);
	/* Post-reveal, transform/shadow hand back to the card-treatment hover
	 * timings; opacity keeps the long reveal fade. */
	transition:
		opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
		transform var(--transition-base),
		box-shadow var(--transition-base),
		border-color var(--transition-base);
}

.sample-card.is-revealed:hover {
	transform: translateY(-4px);
}

/* --- Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sample-card__image,
	.sample-card__title a,
	.samples__filter-button,
	.samples__filter-button::before,
	.sample-card__cta,
	.sample-card {
		transition: none;
	}

	.samples__sidebar,
	.samples__toolbar,
	.samples__notice,
	.sample-card {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/*--------------------------------------------------------------
# Single Product page
--------------------------------------------------------------*/

.product--single { /* container; reset WooCommerce defaults */ }

/* --- Hero: breadcrumb --------------------------------------- */
.product-hero {
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--space-md) var(--space-md) var(--space-xl);
}

.product-hero__breadcrumb {
	margin: 0 0 var(--space-md);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-light);
}
.product-hero__breadcrumb a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}
.product-hero__breadcrumb a:hover { color: var(--color-dark); }
.product-hero__sep { margin: 0 0.5rem; color: var(--color-border); }

/* --- Hero: two-column layout -------------------------------- */
.product-hero__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}
@media (min-width: 900px) {
	.product-hero__layout {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--space-xl);
		align-items: start;
	}
}

/* --- WooCommerce gallery (we use WC's native markup) -------- */
.product-hero__gallery {
	position: relative;
	/* Grid items default to min-width: auto, which lets carousel JS
	 * (Slick, used by woo-variation-gallery) inflate this cell to the
	 * width of its slide track and squash the info column. Force the
	 * cell to honour its grid-allotted width and clip anything wider. */
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.product-hero__info {
	min-width: 0;
}

/* Belt-and-braces: cap every level Slick injects so an over-wide track
 * can't bleed past the grid cell, even mid-reinit on variation change. */
.product-hero__gallery .woo-variation-gallery-wrapper,
.product-hero__gallery .woo-variation-gallery-container,
.product-hero__gallery .woo-variation-gallery-slider-wrapper,
.product-hero__gallery .woo-variation-gallery-slider,
.product-hero__gallery .slick-list,
.product-hero__gallery .slick-slider {
	max-width: 100%;
	overflow: hidden;
}

@media (min-width: 900px) {
	.product-hero__gallery {
		position: sticky;
		top: calc(var(--header-offset) + var(--space-md));
	}
}

.product-hero__gallery .woocommerce-product-gallery {
	width: 100% !important;
}
.product-hero__gallery .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
	max-height: calc(100vh - var(--header-offset) - var(--space-xl));
	overflow: hidden;
	background: var(--color-bg-alt);
}
.product-hero__gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.product-hero__gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-sm);
	list-style: none;
	margin: var(--space-sm) 0 0;
	padding: 0;
}
.product-hero__gallery .flex-control-thumbs li img {
	aspect-ratio: 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	cursor: pointer;
	border: 1px solid transparent;
	opacity: 0.8;
	transition: border-color var(--transition-fast), opacity var(--transition-fast);
}
.product-hero__gallery .flex-control-thumbs li img:hover,
.product-hero__gallery .flex-control-thumbs li img.flex-active {
	border-color: var(--color-dark);
	opacity: 1;
}
.product-hero__gallery .onsale {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 2;
	background: var(--color-primary);
	color: var(--color-white);
	padding: 0.375rem 0.75rem;
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Info column / buy box ---------------------------------- */
.product-hero__info { padding-top: var(--space-sm); }

.product-hero__series {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.product-hero__title {
	margin: 0 0 var(--space-md);
	font-size: var(--fs-section);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-dark);
}

.product-hero__sku {
	display: inline-block;
	margin-bottom: var(--space-md);
	font-size: var(--fs-meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-light);
}

.product-hero__short {
	margin: 0 0 var(--space-lg);
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--color-text);
}
.product-hero__short p:last-child { margin-bottom: 0; }

/* --- WooCommerce variation form & add-to-cart --------------- */
.product-hero__buy { margin-bottom: var(--space-md); }

.product-hero__buy .variations {
	width: 100%;
	margin: 0 0 var(--space-md);
	border-collapse: collapse;
}
.product-hero__buy .variations tr {
	display: block;
	margin-bottom: var(--space-md);
}
.product-hero__buy .variations td {
	display: block;
	padding: 0;
}
.product-hero__buy .variations label {
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-light);
	margin: 0 0 0.5rem;
	display: block;
}
.product-hero__buy .variations select {
	width: 100%;
	padding: 0.875rem 1rem;
	background: transparent;
	border: 1px solid var(--color-border);
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	color: var(--color-dark);
}
.product-hero__buy .reset_variations {
	font-size: var(--fs-meta);
	color: var(--color-muted);
	text-decoration: underline;
}

/* Single variation panel (price + stock — WC populates via JS) */
.product-hero__buy .single_variation_wrap {
	display: block;
}
.product-hero__buy .woocommerce-variation-price {
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
	margin-bottom: var(--space-sm);
}
.product-hero__buy .woocommerce-variation-price .amount { color: var(--color-primary); }
.product-hero__buy .woocommerce-variation-availability { font-size: var(--fs-meta); color: var(--color-muted); }

/* Qty + add-to-cart row */
.product-hero__buy form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: 0;
}
.product-hero__buy .quantity {
	display: inline-flex;
	border: 1px solid var(--color-dark);
	height: 56px;
}
.product-hero__buy .quantity .qty {
	width: 56px;
	height: 100%;
	border: none;
	text-align: center;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
	background: transparent;
	-moz-appearance: textfield;
}
.product-hero__buy .quantity .qty::-webkit-outer-spin-button,
.product-hero__buy .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.product-hero__buy .single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
	background: var(--color-primary);
	color: var(--color-white);
	border: 1px solid var(--color-primary);
	padding: 0 var(--space-md);
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	height: 56px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-base);
}
.product-hero__buy .single_add_to_cart_button:hover,
.product-hero__buy .single_add_to_cart_button:focus-visible {
	background: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}
.product-hero__buy .single_add_to_cart_button.disabled {
	opacity: 0.6;
	pointer-events: none;
}
@keyframes ntw-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(0, 122, 51, 0.5); }
	100% { box-shadow: 0 0 0 18px rgba(0, 122, 51, 0); }
}
.product-hero__buy .single_add_to_cart_button.is-pulsed {
	animation: ntw-pulse 1.2s ease-out;
}

/* --- Color swatches (JS-built on top of WC select) ---------- */
.product-swatches { margin: 0 0 var(--space-md); }

.product-swatches__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--space-sm);
}
.product-swatches__label {
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-light);
}
.product-swatches__name {
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
}

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

.product-swatch {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	border: 2px solid transparent;
	background-clip: padding-box;
	padding: 0;
	transition: transform var(--transition-fast);
}
.product-swatch::after {
	content: '';
	position: absolute;
	inset: -4px;
	border: 1.5px solid transparent;
	border-radius: 50%;
	transition: border-color var(--transition-fast);
}
.product-swatch:hover { transform: scale(1.08); }
.product-swatch.is-active::after { border-color: var(--color-dark); }

/* --- Plugin-rendered variation swatches (woo-variation-swatches,
 * Additional Variation Images Gallery, etc.) --- collapse the default
 * grid into a compact horizontal row.
 * Targets the common wrappers all WC swatch plugins use under the
 * variations <tr>. Safe no-op if neither is present. */
.product-hero__buy .variable-items-wrapper {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 100%;
}
.product-hero__buy .variable-items-wrapper .variable-item {
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.product-hero__buy .variable-items-wrapper .variable-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-swatch--unknown {
	background: var(--color-bg-alt) !important;
	border: 1px dashed var(--color-border);
}

.product-swatch__tooltip {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-dark);
	color: var(--color-white);
	padding: 0.375rem 0.75rem;
	font-size: var(--fs-meta);
	letter-spacing: 0.05em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-fast);
	z-index: 10;
}
.product-swatch:hover .product-swatch__tooltip,
.product-swatch:focus-visible .product-swatch__tooltip {
	opacity: 1;
}

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

/* --- Sample contents card ----------------------------------- */
.product-hero__sample-info {
	margin-top: var(--space-md);
	padding: var(--space-md);
	background: var(--color-bg-alt);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-md);
	align-items: start;
}
.product-hero__sample-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	flex-shrink: 0;
}
.product-hero__sample-title {
	margin: 0 0 0.25rem;
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
}
.product-hero__sample-body {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--color-text);
}

/* --- Detail sections (former tabs) --------------------------- */
.product-sections {
	border-top: 1px solid var(--color-border);
	background: var(--color-bg);
}
.product-sections__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--space-lg) var(--space-md);
}

.product-sections__nav-list {
	display: flex;
	gap: 0.25rem;
	list-style: none;
	margin: 0 0 var(--space-md);
	padding: 0 0 var(--space-sm);
	border-bottom: 1px solid var(--color-border);
	flex-wrap: wrap;
}
.product-sections__nav-list li { margin: 0; }

.product-sections__block {
	padding: var(--space-md) 0 var(--space-lg);
	scroll-margin-top: calc(var(--header-offset) + var(--space-md));
}

.product-sections__block + .product-sections__block {
	border-top: 1px solid var(--color-border);
}

.product-sections__heading {
	margin: 0 0 var(--space-md);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

.product-sections__prose {
	max-width: 70ch;
	font-size: var(--fs-body);
	line-height: 1.65;
}
.product-sections__prose p { margin: 0 0 var(--space-md); }
.product-sections__prose p:last-child { margin-bottom: 0; }
.product-sections__prose h2,
.product-sections__prose h3 {
	margin: var(--space-lg) 0 var(--space-sm);
	font-weight: 600;
	color: var(--color-ink);
	letter-spacing: -0.01em;
}
.product-sections__prose ul { padding-left: 1.5em; }

/* --- Specs (definition list) -------------------------------- */
.product-specs {
	margin: 0;
	max-width: 720px;
}
.product-specs__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--color-border);
}
.product-specs__row:first-child { border-top: 1px solid var(--color-border); }
.product-specs__label {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
}
.product-specs__value {
	margin: 0;
	font-size: var(--fs-body);
	color: var(--color-text);
	text-align: right;
}

/* --- Documents --------------------------------------------- */
.product-docs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}
@media (min-width: 700px) { .product-docs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .product-docs { grid-template-columns: repeat(3, 1fr); } }

.product-docs__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-md);
	background: var(--color-bg-alt);
	text-decoration: none;
	border: 1px solid transparent;
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.product-docs__card:hover,
.product-docs__card:focus-visible {
	border-color: var(--color-dark);
	transform: translateY(-2px);
}
.product-docs__type {
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary);
}
.product-docs__title {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
	letter-spacing: -0.01em;
}
.product-docs__meta {
	margin-top: auto;
	font-size: var(--fs-meta);
	color: var(--color-muted);
	display: flex;
	justify-content: space-between;
	gap: var(--space-sm);
}

/* --- Related ------------------------------------------------ */
.product-related {
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-md);
}
.product-related__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--space-lg);
	gap: var(--space-md);
	flex-wrap: wrap;
}
.product-related__title {
	margin: 0;
	font-size: var(--fs-section);
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--color-dark);
}
.product-related__link {
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--color-primary);
	padding-bottom: 2px;
}

.product-related__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 900px) { .product-related__grid { grid-template-columns: repeat(4, 1fr); } }

.product-related__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}
.product-related__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-bg-alt);
	margin-bottom: var(--space-sm);
}
.product-related__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}
.product-related__card:hover .product-related__image { transform: scale(1.04); }

.product-related__series {
	margin: 0 0 0.25rem;
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary);
}
.product-related__name {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
	letter-spacing: -0.01em;
}

/* --- Sticky add-to-cart bar -------------------------------- */
.product-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	transform: translateY(100%);
	transition: transform var(--transition-base);
	box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.06);
}
.product-sticky.is-visible { transform: translateY(0); }

.product-sticky__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--space-sm) var(--space-md);
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.product-sticky__thumb {
	width: 56px;
	height: 56px;
	background: var(--color-bg-alt);
	overflow: hidden;
	flex-shrink: 0;
}
.product-sticky__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-sticky__info {
	flex: 1;
	min-width: 0;
}
.product-sticky__title {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.product-sticky__meta {
	margin: 0;
	font-size: var(--fs-meta);
	color: var(--color-muted);
}

.product-sticky__btn {
	background: var(--color-primary);
	color: var(--color-white);
	border: none;
	padding: 0.875rem 1.5rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition-fast);
	white-space: nowrap;
}
.product-sticky__btn:hover,
.product-sticky__btn:focus-visible {
	background: var(--color-primary-dark);
}

@media (max-width: 640px) {
	.product-sticky__title { font-size: var(--fs-meta); }
	.product-sticky__btn { padding: 0.75rem 1rem; font-size: var(--fs-meta); }
}

/* --- Reduced motion (single product) ------------------------ */
@media (prefers-reduced-motion: reduce) {
	.product-swatch,
	.product-swatch__tooltip,
	.product-related__image,
	.product-docs__card,
	.product-hero__buy .single_add_to_cart_button,
	.product-sticky {
		transition: none;
		animation: none;
	}
}

/* =====================================================
   Resource Library page (page-resources-library.php)
   ===================================================== */

/* ---------- Hero: shared template-parts/page-hero.php (2026-06-26) ---------- */

/* ---------- Layout: filter sidebar + results ---------- */
/* ---------- Product selector band ----------
 * The primary axis (which product line?) sits full-width above the results,
 * wrapping to a couple of chip rows; the secondary axes (document type,
 * file format) stay in the sidebar. */
.resource-library__topbar {
	max-width: 1480px;
	margin: 0 auto var(--space-md);
	padding-inline: var(--space-md);
}

.resource-library__topbar .resource-library__filter-label {
	margin-bottom: 0.6rem;
}

/* Slightly tighter than the sidebar chips so the full product list lands on
   two rows at common desktop widths. */
.resource-library__chips--topbar {
	gap: 0.3rem;
}

.resource-library__chips--topbar .resource-library__chip {
	padding-inline: 0.5rem;
	letter-spacing: 0.01em;
}

.resource-library__shell {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--space-lg);
	max-width: 1480px;
	margin: 0 auto;
	padding: 0 var(--space-md) var(--space-xl);
}
@media (max-width: 1024px) {
	.resource-library__shell {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

/* ---------- Filter sidebar ---------- */
.resource-library__filters {
	position: sticky;
	/* Header is sticky at ~147px; offset clears it with a small gap. */
	top: 160px;
	align-self: start;
	padding: var(--space-md);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	/* When the sidebar's content is taller than viewport space below the header,
	   scroll it internally instead of letting sticky freeze the bottom off-screen. */
	max-height: calc(100vh - 160px - var(--space-md));
	overflow-y: auto;
	overscroll-behavior: contain;
}
.resource-library__filters::-webkit-scrollbar { width: 6px; }
.resource-library__filters::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 3px;
}
.resource-library__filters::-webkit-scrollbar-thumb:hover { background: var(--color-light); }

@media (max-width: 1024px) {
	.resource-library__filters {
		position: static;
		max-height: none;
		overflow: visible;
	}
}
.resource-library__filter-group + .resource-library__filter-group {
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
}
.resource-library__filter-label {
	display: block;
	font-size: var(--fs-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
	margin-bottom: var(--space-sm);
}
.resource-library__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.resource-library__chip {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	padding: 0.3rem 0.7rem;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: var(--fs-meta);
	line-height: 1.25;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: all var(--transition-base);
}
.resource-library__chip:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.resource-library__chip[aria-pressed="true"] {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}
.resource-library__reset {
	margin-top: var(--space-md);
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: var(--fs-meta);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}
.resource-library__reset:hover { color: var(--color-primary-dark); }

/* ---------- Results column ---------- */
.resource-library__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: var(--space-md);
	margin-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}
.resource-library__count {
	font-size: var(--fs-body);
	color: var(--color-text);
}
.resource-library__count strong {
	color: var(--color-text);
	font-weight: 300;
}
/* ---------- Grouped results (rows by document type) ---------- */
.resource-library__groups {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}
.resource-library__section[hidden] { display: none; }
.resource-library__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: 0.85rem var(--space-md);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-bottom: 0;
}

/* Outlined, not filled — the format badges own the color now; the count is
   secondary information. */
.resource-library__section-count {
	font-size: var(--fs-meta);
	letter-spacing: 0.05em;
	color: var(--color-primary-dark);
	background: transparent;
	border: 1px solid var(--color-primary);
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	min-width: 2.1em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---------- Collapsible groups ----------
 * Long groups start collapsed to their first 8 rows (matches $collapse_at in
 * resources-library-grid.php). While a filter is active every match must show,
 * so .is-filtering suspends the collapse and hides the toggles. */
.resource-library__section.is-collapsed .resource-library__row:nth-child(n + 9) {
	display: none;
}

.resource-library__shell.is-filtering .resource-library__section.is-collapsed .resource-library__row:nth-child(n + 9) {
	display: flex;
}

.resource-library__shell.is-filtering .resource-library__section.is-collapsed .resource-library__row[hidden] {
	display: none;
}

.resource-library__shell.is-filtering .resource-library__toggle {
	display: none;
}

.resource-library__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem var(--space-md);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-top: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.resource-library__toggle:hover,
.resource-library__toggle:focus-visible {
	background: var(--color-bg);
	color: var(--color-primary-dark);
}

.resource-library__toggle-chevron {
	transition: transform var(--transition-base);
}

.resource-library__toggle[aria-expanded="true"] .resource-library__toggle-chevron {
	transform: rotate(180deg);
}

.resource-library__toggle-less { display: none; }
.resource-library__toggle[aria-expanded="true"] .resource-library__toggle-more { display: none; }
.resource-library__toggle[aria-expanded="true"] .resource-library__toggle-less { display: inline; }
.resource-library__section-title {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text);
}

.resource-library__section-title .doctype-icon {
	flex: 0 0 auto;
	color: var(--color-primary-dark);
}
.resource-library__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--color-white);
	border: 1px solid var(--color-border);
}
.resource-library__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: 0.45rem var(--space-md);
	border-bottom: 1px solid var(--color-border);
	transition: background var(--transition-fast);
}
.resource-library__row:last-child { border-bottom: 0; }
.resource-library__row[hidden] { display: none; }
.resource-library__row:hover { background: var(--color-bg); }

.resource-library__row-title {
	flex: 1;
	min-width: 0;
	/* Source file names arrive in every casing (ALL CAPS, lowercase, mixed);
	   rendering the whole column uppercase at a step-down size normalizes
	   them into one consistent catalog voice. */
	font-size: calc(var(--fs-body) * 0.85);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text);
	line-height: 1.35;
}
.resource-library__row-files {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* ---------- File-format color coding ----------
 * One muted hue per format — the familiar file-badge language (PDF brick,
 * CAD steel blue, archive gray) gives the download lists a scannable visual
 * anchor without turning the page into a rainbow. Shared by the library
 * rows and the series Downloads panel via [data-fmt] attributes. */
:root {
	--fmt-pdf:     #A8402F;
	--fmt-zip:     #6B655C;
	--fmt-cad:     #3E6A8C;
	--fmt-revit:   #2F7A72;
	--fmt-word:    #3F5FA8;
	--fmt-excel:   #38713F;
	--fmt-link:    var(--color-primary);
	--fmt-default: #6B655C;
}

[data-fmt] { --fmt: var(--fmt-default); }
[data-fmt="pdf"] { --fmt: var(--fmt-pdf); }
[data-fmt="zip"],
[data-fmt="rar"] { --fmt: var(--fmt-zip); }
[data-fmt="dwg"],
[data-fmt="dxf"] { --fmt: var(--fmt-cad); }
[data-fmt="rvt"],
[data-fmt="rfa"] { --fmt: var(--fmt-revit); }
[data-fmt="doc"],
[data-fmt="docx"] { --fmt: var(--fmt-word); }
[data-fmt="xls"],
[data-fmt="xlsx"] { --fmt: var(--fmt-excel); }
[data-fmt="link"] { --fmt: var(--fmt-link); }

/* The chip IS the badge: icon + format token on the format color, no
   repeated action words — the verb lives in the aria-label. */
.resource-library__file {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.22rem 0.55rem;
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--fmt, var(--fmt-default));
	color: var(--color-white);
	border-radius: 2px;
	text-decoration: none;
	transition: filter var(--transition-fast), transform var(--transition-fast);
}
.resource-library__file:hover,
.resource-library__file:focus-visible {
	filter: brightness(1.12);
	transform: translateY(-1px);
}
.resource-library__file-icon {
	flex: 0 0 auto;
	opacity: 0.85;
}
.resource-library__file-ext {
	line-height: 1.4;
}

@media (max-width: 640px) {
	.resource-library__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.resource-library__row-files { width: 100%; }
}

/* ---------- Empty / placeholder states ---------- */
.resource-library__empty,
.resource-library__placeholder {
	padding: var(--space-xl) var(--space-md);
	text-align: center;
	border: 1px dashed var(--color-border);
	color: var(--color-text);
	font-size: var(--fs-body);
}

/*--------------------------------------------------------------
# Desktop minimum font size
# --fs-meta (0.875rem) is raised to --fs-body (1.5rem) everywhere
# on desktop except the site header and footer, which retain the
# compact small size they were designed for.
--------------------------------------------------------------*/
@media (min-width: 768px) {
	:root {
		--fs-meta: 1.1rem;
	}
	/* Header and footer keep their compact size */
	.site-header,
	.site-footer {
		--fs-meta: 0.875rem;
	}
}

/*--------------------------------------------------------------
# Where to Buy — distributor locator
--------------------------------------------------------------*/

/* Hero: shared template-parts/page-hero.php (2026-07-13) */

/* Locator shell */
.locator {
	padding: var(--space-lg) var(--space-md) var(--space-xl);
	background-color: var(--color-bg);
}

.locator__container {
	max-width: 1320px;
	margin: 0 auto;
}

/* Search bar */
.locator__search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-sm);
	padding: var(--space-md);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 6px;
}

.locator__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1 1 160px;
}

.locator__field--zip {
	flex: 1 1 220px;
}

.locator__field--actions {
	flex: 1 1 100%;
	flex-direction: row;
	align-items: center;
	gap: var(--space-sm);
}

.locator__label {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-light);
}

.locator__input,
.locator__select {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-primary-dark);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: 0.7rem 0.9rem;
	width: 100%;
	/* Inputs and selects resolve different intrinsic heights from the same
	   padding; pin one explicit height so the ZIP box matches the dropdowns. */
	height: 3.5rem;
	box-sizing: border-box;
	transition: border-color var(--transition-fast);
}

.locator__input:focus,
.locator__select:focus {
	outline: none;
	border-color: var(--color-primary);
}

.locator__submit {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 400;
	color: var(--color-white);
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: 6px;
	padding: 0.7rem 2rem;
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.locator__submit:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

.locator__geo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	color: var(--color-primary);
	background: none;
	border: none;
	padding: 0.4rem;
	cursor: pointer;
	transition: color var(--transition-fast);
}

.locator__geo:hover {
	color: var(--color-primary-dark);
}

.locator__status {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	color: var(--color-text);
	margin: var(--space-sm) 0 var(--space-md);
}

/* Two-column layout: scrolling results + sticky map */
.locator__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

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

.locator__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-sm);
	padding: var(--space-xl) var(--space-md);
	border: 1px dashed var(--color-border);
	border-radius: 6px;
	color: var(--color-light);
}

/* The UA [hidden]{display:none} is overridden by display:flex above. */
.locator__placeholder[hidden] {
	display: none;
}

.locator__placeholder p {
	font-size: var(--fs-body);
	font-weight: 300;
	margin: 0;
}

/* Result card */
.locator-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: var(--space-md);
	cursor: pointer;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.locator-card:hover,
.locator-card:focus-visible {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.locator-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
}

.locator-card__name {
	font-family: var(--font-primary);
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-primary-dark);
	margin: 0;
}

.locator-card__distance {
	flex-shrink: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	color: var(--color-primary);
	white-space: nowrap;
}

.locator-card__type {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-light);
	margin-top: 0.4rem;
}

.locator-card__type.is-stocking {
	color: var(--color-primary);
}

.locator-card__address {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-text);
	margin: var(--space-sm) 0;
}

.locator-card__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.locator-card__phone,
.locator-card__website {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition-fast);
}

.locator-card__phone:hover,
.locator-card__website:hover {
	border-color: var(--color-primary);
}

.locator-card__offerings {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 var(--space-sm);
	padding: 0;
}

/* Offering abbreviation badge (cards + legend) */
.locator__chip,
.locator-card__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9rem;
	height: 1.9rem;
	padding: 0 0.45rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1;
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: 4px;
}

.locator-card__display {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: var(--space-sm);
	padding: 0.35rem 0.8rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: 999px;
}

.locator-card__display::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--color-white);
}

.locator-card__display[hidden] {
	display: none;
}

.locator-card__directions {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--color-primary-dark);
	padding-bottom: 2px;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.locator-card__directions:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

/* Map */
.locator__map-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	/* On mobile, show the map directly under the search rather than below
	 * the full results list. Reset to source order on desktop (map right). */
	order: -1;
}

.locator__map {
	width: 100%;
	min-height: 420px;
	height: 420px;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--color-bg-alt);
}

/* InfoWindow content */
.locator-info {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-family: var(--font-primary);
	max-width: 220px;
}

.locator-info strong {
	font-weight: 400;
	color: var(--color-primary-dark);
}

.locator-info span {
	font-size: 0.95em;
	color: var(--color-text);
}

.locator-info a {
	color: var(--color-primary);
}

/* Legend */
.locator__legend {
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 6px;
}

.locator__legend-title {
	display: block;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-light);
	margin-bottom: var(--space-sm);
}

.locator__legend-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.6rem var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.locator__legend-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.locator__legend-label {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	color: var(--color-text);
}

/* Desktop: results scroll alongside a sticky map */
@media (min-width: 880px) {
	.locator__layout {
		grid-template-columns: minmax(360px, 440px) 1fr;
		align-items: start;
	}

	.locator__results {
		max-height: calc(100vh - var(--header-offset) - 2rem);
		overflow-y: auto;
		padding-right: 0.5rem;
	}

	.locator__map-wrap {
		position: sticky;
		top: calc(var(--header-offset) + 1rem);
		order: 0;
	}

	.locator__map {
		min-height: 600px;
		height: calc(100vh - var(--header-offset) - 8rem);
	}
}

/* =====================================================
   Where to Buy — crawlable directory + state pages
   (template-parts/where-to-buy-directory.php,
    template-parts/where-to-buy-state.php)

   The ZIP app above is for people; this layer is the one
   crawlers and "…near me" queries can actually read.
   ===================================================== */

.locator-directory {
	padding: var(--space-lg) var(--space-md) var(--space-xl);
	background-color: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
}

.locator-directory__container {
	max-width: 1320px;
	margin: 0 auto;
}

.locator-directory__head {
	max-width: 62ch;
	margin-bottom: var(--space-md);
}

.locator-directory__eyebrow {
	margin: 0 0 var(--space-xs);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-light);
}

.locator-directory__title {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-subsection);
	line-height: var(--lh-heading);
	color: var(--color-dark);
}

.locator-directory__intro {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--line-height);
	color: var(--color-text);
}

.locator-directory__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.locator-directory__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	text-decoration: none;
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.locator-directory__link:hover,
.locator-directory__link:focus-visible {
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

.locator-directory__state {
	font-size: var(--fs-nav);
	font-weight: 600;
	color: var(--color-dark);
}

.locator-directory__count {
	flex: 0 0 auto;
	font-size: var(--fs-meta);
	color: var(--color-light);
	font-variant-numeric: tabular-nums;
}

/* ---------- Single state page ---------- */

.locator-state {
	padding: var(--space-lg) var(--space-md) var(--space-xl);
	background-color: var(--color-bg);
}

.locator-state__container {
	max-width: 1180px;
	margin: 0 auto;
}

.locator-state__back {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-md);
	font-size: var(--fs-meta);
	color: var(--color-light);
}

.locator-state__back a {
	color: var(--color-primary);
}

.locator-state__head {
	max-width: 68ch;
	margin-bottom: var(--space-lg);
}

.locator-state__title {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-section);
	line-height: var(--lh-heading);
	color: var(--color-ink);
}

.locator-state__intro {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-lead);
	line-height: var(--line-height);
	color: var(--color-text);
}

.locator-state__note {
	margin: 0;
	font-size: var(--fs-body);
	color: var(--color-light);
}

/* City jump nav */
.locator-state__cities {
	padding: var(--space-md);
	margin-bottom: var(--space-lg);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 6px;
}

.locator-state__cities-title {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-nav);
	font-weight: 650;
	color: var(--color-dark);
}

.locator-state__cities-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.locator-state__cities-list a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 0.35em 0.75em;
	font-size: var(--fs-nav);
	color: var(--color-dark);
	text-decoration: none;
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.locator-state__cities-list a:hover,
.locator-state__cities-list a:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.locator-state__city-count {
	font-size: var(--fs-meta);
	color: var(--color-light);
	font-variant-numeric: tabular-nums;
}

/* City groups */
.locator-state__cities-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.locator-state__city {
	scroll-margin-top: calc(var(--header-offset, 6rem) + 1rem);
}

.locator-state__city-name {
	margin: 0 0 var(--space-sm);
	padding-bottom: var(--space-xs);
	font-size: var(--fs-subsection);
	line-height: var(--lh-heading);
	color: var(--color-dark);
	border-bottom: 1px solid var(--color-border);
}

.locator-state__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.locator-state__dealer {
	padding: var(--space-md);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 6px;
}

.locator-state__dealer-name {
	margin: 0 0 0.35em;
	font-size: var(--fs-nav);
	font-weight: 650;
	line-height: 1.3;
	color: var(--color-dark);
}

.locator-state__dealer-type {
	display: inline-block;
	margin: 0 0 0.5em;
	padding: 0.15em 0.6em;
	font-size: var(--fs-meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary);
	background-color: var(--color-primary-light);
	border-radius: 3px;
}

.locator-state__dealer-address {
	margin: 0 0 0.6em;
	font-size: var(--fs-nav);
	line-height: 1.5;
	color: var(--color-text);
}

.locator-state__dealer-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: 0;
	font-size: var(--fs-nav);
}

.locator-state__dealer-links a {
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.locator-state__dealer-links a:hover,
.locator-state__dealer-links a:focus-visible {
	border-bottom-color: currentColor;
}

/* Product cross-links + other states */
.locator-state__products,
.locator-state__nearby {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.locator-state__products-title,
.locator-state__nearby-title {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-nav);
	font-weight: 650;
	color: var(--color-dark);
}

.locator-state__products-list,
.locator-state__nearby-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-nav);
}

.locator-state__products-list a,
.locator-state__nearby-list a {
	color: var(--color-primary);
	text-decoration: none;
}

.locator-state__products-list a:hover,
.locator-state__nearby-list a:hover,
.locator-state__products-list a:focus-visible,
.locator-state__nearby-list a:focus-visible {
	text-decoration: underline;
}

.locator-state__nearby-list {
	color: var(--color-light);
}

@media (min-width: 900px) {
	.locator-state__head {
		margin-bottom: var(--space-xl);
	}
}

/* =====================================================
   3D Textures page (page-3d-textures.php)
   ===================================================== */

/* ---------- Hero: shared template-parts/page-hero.php (2026-07-13) ---------- */

/* ---------- Layout: filter sidebar + results ---------- */
.textures-3d__shell {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: var(--space-lg);
	max-width: 1480px;
	margin: 0 auto;
	padding: 0 var(--space-md) var(--space-xl);
}
@media (max-width: 1024px) {
	.textures-3d__shell {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

/* ---------- Filter sidebar ---------- */
.textures-3d__filters {
	position: sticky;
	top: 160px;
	align-self: start;
	padding: var(--space-md);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	max-height: calc(100vh - 160px - var(--space-md));
	overflow-y: auto;
	overscroll-behavior: contain;
}
.textures-3d__filters::-webkit-scrollbar { width: 6px; }
.textures-3d__filters::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 3px;
}
.textures-3d__filters::-webkit-scrollbar-thumb:hover { background: var(--color-light); }
@media (max-width: 1024px) {
	.textures-3d__filters {
		position: static;
		max-height: none;
		overflow: visible;
	}
}
.textures-3d__filter-group + .textures-3d__filter-group {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}
.textures-3d__filter-label {
	display: block;
	font-size: var(--fs-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
	margin-bottom: var(--space-sm);
}
.textures-3d__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.textures-3d__chip {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	padding: 0.4rem 0.9rem;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: var(--fs-meta);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--transition-base);
}
.textures-3d__chip:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.textures-3d__chip[aria-pressed="true"] {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}
.textures-3d__reset {
	margin-top: var(--space-md);
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: var(--fs-meta);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}
.textures-3d__reset:hover { color: var(--color-primary-dark); }

/* ---------- Results column ---------- */
.textures-3d__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: var(--space-md);
	margin-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}
.textures-3d__count {
	font-size: var(--fs-body);
	color: var(--color-text);
}
.textures-3d__count strong {
	color: var(--color-text);
	font-weight: 300;
}

/* ---------- Grouped results (cards by category) ---------- */
.textures-3d__groups {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}
.textures-3d__section[hidden] { display: none; }
.textures-3d__section-header {
	padding: 0.85rem var(--space-md);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	margin-bottom: var(--space-md);
}
.textures-3d__section-title {
	margin: 0;
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text);
}

/* ---------- Card grid ---------- */
.textures-3d__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}
@media (max-width: 900px) {
	.textures-3d__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.textures-3d__grid { grid-template-columns: 1fr; }
}
.textures-3d__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-md);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.textures-3d__card[hidden] { display: none; }
.textures-3d__card:hover {
	border-color: var(--color-primary);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.textures-3d__preview {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg);
	margin-bottom: var(--space-sm);
	overflow: hidden;
}
.textures-3d__preview-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.textures-3d__preview--empty::after {
	content: 'Preview unavailable';
	font-size: var(--fs-meta);
	color: var(--color-light);
	letter-spacing: 0.05em;
}
.textures-3d__card-title {
	font-size: var(--fs-meta);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text);
	margin: 0 0 var(--space-sm);
}
.textures-3d__view {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.1rem;
	background: var(--color-white);
	border: 1px solid var(--color-dark);
	color: var(--color-dark);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--transition-base);
}
.textures-3d__view:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}
.textures-3d__view-icon { font-size: 1.1em; line-height: 1; }

/* ---------- Empty / placeholder states ---------- */
.textures-3d__empty,
.textures-3d__placeholder {
	padding: var(--space-xl) var(--space-md);
	text-align: center;
	border: 1px dashed var(--color-border);
	color: var(--color-text);
	font-size: var(--fs-body);
}

/*--------------------------------------------------------------
# Calculators Page
--------------------------------------------------------------*/

.calculators-page {
	background-color: var(--color-white);
}

/* Hero: shared template-parts/page-hero.php (2026-07-13) ------ */

/* Tools layout ------------------------------------------------ */

.calculators-tools {
	background-color: var(--color-white);
	padding-block: 0 var(--space-xl);
}

.calculators-tools__container {
	max-width: 1180px;
	margin: 0 auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
}

.calculators-tools__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	align-items: start;
}

@media (min-width: 860px) {
	.calculators-tools__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-lg);
	}
}

.calculators-tools__disclaimer {
	max-width: 760px;
	margin: var(--space-lg) auto 0;
	text-align: center;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-light);
}

/* Calculator card --------------------------------------------- */

.calc {
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: clamp(var(--space-md), 4vw, var(--space-lg));
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.calc:hover,
.calc:focus-within {
	border-color: var(--color-primary-light);
	box-shadow: 0 18px 40px -24px rgba(0, 122, 51, 0.35);
}

.calc__header {
	margin-bottom: var(--space-md);
}

.calc__title {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: var(--fs-section);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0 0 0.4em;
}

.calc__subtitle {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-text);
	margin: 0;
}

/* Fields ------------------------------------------------------ */

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

.calc__field {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.calc__field[hidden] {
	display: none;
}

.calc__label {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-primary-dark);
	letter-spacing: 0.01em;
}

.calc__control {
	width: 100%;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-dark);
	background-color: var(--color-bg);
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 0.95rem 1.15rem;
	letter-spacing: 0.01em;
	transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
	-webkit-appearance: none;
	appearance: none;
}

select.calc__control {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23007A33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.15rem center;
	padding-right: 3rem;
}

.calc__control::placeholder {
	color: var(--color-light);
	font-weight: 300;
}

.calc__control:focus {
	outline: none;
	background-color: var(--color-white);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(0, 122, 51, 0.08);
}

/* Unit suffix inside a number field (e.g. "sq ft"). */
.calc__input-affix {
	position: relative;
	display: block;
}

.calc__input-affix .calc__control {
	padding-right: 4.5rem;
}

.calc__input-affix::after {
	content: attr(data-suffix);
	position: absolute;
	right: 1.15rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-light);
	pointer-events: none;
}

.calc__hint {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-light);
}

/* Results ----------------------------------------------------- */

.calc__results {
	margin-top: var(--space-md);
	padding: var(--space-md);
	background-color: var(--color-primary-light);
	border-radius: 10px;
}

.calc__results-hint {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-text);
}

.calc__output {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.65rem var(--space-sm);
	margin: 0;
	align-items: baseline;
}

.calc__output-label {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-primary-dark);
	margin: 0;
}

.calc__output-value {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 400;
	color: var(--color-primary);
	text-align: right;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
 * Reusable page hero  (template-parts/page-hero.php)
 * Mirrors .category-hero: full-bleed photo + scrim when an image
 * is set, otherwise a tasteful solid dark band. Used by page.php
 * and the lighter page templates (FAQs, Samples, Library).
 * ============================================================ */

/* Full-bleed editorial hero (everlux-style adaptation, 2026-07-13).
 * Tall photographic panel; eyebrow + title sit BOTTOM-LEFT on the image
 * (matches .usp-hero / the homepage hero's left alignment), scrim anchored
 * to the bottom so the photograph stays bright where no type sits. */
.page-hero {
	position: relative;
	width: 100%;
	min-height: var(--hero-min-height);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: var(--color-white);
	isolation: isolate;
}

.page-hero--has-image {
	min-height: var(--hero-min-height);
}

.page-hero--solid {
	background-color: var(--color-hero-dark);
}

/* Compact variant — for a hero whose title is a full sentence (a single FAQ
 * question). Same photographic treatment, shorter band, and a title set at
 * section scale instead of hero scale, because a 12-word question at
 * --fs-hero is a wall of type, not a headline. */
.page-hero--compact.page-hero--has-image {
	min-height: clamp(340px, 44vh, 480px);
}

.page-hero--compact {
	min-height: clamp(280px, 34vh, 400px);
}

.page-hero--compact .page-hero__title {
	font-size: var(--fs-section);
	max-width: 26ch;
	line-height: 1.14;
}

.page-hero--compact .page-hero__inner {
	padding-top: var(--space-lg);
}

/* Breadcrumb — sits above the eyebrow, so the eyebrow's green rule would
 * collide with it; the rule is suppressed when a trail is present. */
.page-hero__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--space-md);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.page-hero__crumb {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.page-hero__crumb:not(:last-child)::after {
	content: "/";
	margin-left: 0.5rem;
	color: rgba(255, 255, 255, 0.4);
}

a.page-hero__crumb:hover,
a.page-hero__crumb:focus-visible {
	color: var(--color-white);
}

.page-hero__crumb--current {
	color: var(--color-primary-light);
}

.page-hero__breadcrumb + .page-hero__eyebrow::before {
	display: none;
}

/* Shared breadcrumb trail (inc/breadcrumbs.php) — same control language as
   the page-hero crumbs, reused inside the series/category/archive heroes.
   White-on-photo with the hero text-shadow so it survives bright imagery. */
.ntw-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--space-sm);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 14px rgba(0, 0, 0, 0.45);
}

.ntw-breadcrumb__crumb {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.ntw-breadcrumb__crumb:not(:last-child)::after {
	content: "/";
	margin-left: 0.5rem;
	color: rgba(255, 255, 255, 0.4);
}

a.ntw-breadcrumb__crumb:hover,
a.ntw-breadcrumb__crumb:focus-visible {
	color: var(--color-white);
}

.ntw-breadcrumb__crumb--current {
	color: var(--color-primary-light);
}

/* When the shared trail renders above an eyebrow, drop the eyebrow's green
   rule — two stacked uppercase meta lines only need one accent. */
.ntw-breadcrumb + .page-hero__eyebrow::before,
.ntw-breadcrumb + .series-hero__eyebrow::before,
.ntw-breadcrumb + .category-hero__eyebrow::before {
	display: none;
}

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.page-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: ntw-hero-settle 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Slow "breathe" settle on load — the image eases from a gentle zoom to rest. */
@keyframes ntw-hero-settle {
	from { transform: scale(1.05); }
	to   { transform: scale(1); }
}

.page-hero__scrim {
	position: absolute;
	inset: 0;
	/* Bottom anchor for depth, plus a left-column band where the hero text
	   actually sits — bright skies and sunlit lawns were washing out the
	   eyebrow and title on lighter photography. */
	background:
		linear-gradient(100deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 42%, rgba(0, 0, 0, 0) 68%),
		var(--color-scrim-low);
}

.page-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	text-align: left;
	/* Top padding kept modest so --hero-min-height, not the padding,
	 * decides the hero's height — all inner-page heroes match. */
	padding: var(--space-lg) clamp(2rem, 5.5vw, 7rem) clamp(2.5rem, 6vh, 5rem);
}

/* Under the transparent overlay header the hero starts at the very top of
 * the page, so tall hero content (e.g. Samples with its meta row) can climb
 * up beneath the logo/nav. Reserve the header's own height as clearance. */
.has-overlay-header .page-hero__inner {
	padding-top: calc(var(--header-offset) + var(--space-md));
}

.page-hero__eyebrow {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--space-sm);
}

/* Short brand-green rule above the eyebrow — same accent language as the
 * products-series card rule. */
.page-hero__eyebrow::before {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	background-color: var(--color-primary);
	margin-bottom: var(--space-sm);
}

.page-hero__title {
	font-family: var(--font-primary);
	font-size: var(--fs-hero);
	font-weight: 300;
	line-height: 1.06;
	margin: 0;
	letter-spacing: -0.01em;
	color: var(--color-white);
	max-width: 18ch;
}

/* Legibility over photography: a tight 1px edge shadow for definition plus
 * a wide soft halo. The scrim is bottom-anchored by design (top of the photo
 * stays bright), so text that reaches into bright zones — pale decking,
 * blueprint paper, sky — needs the shadow to carry the contrast. */
.page-hero--has-image .page-hero__title {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 22px rgba(0, 0, 0, 0.5);
}

.page-hero--has-image .page-hero__eyebrow,
.page-hero--has-image .page-hero__breadcrumb,
.page-hero--has-image .page-hero__intro,
.page-hero--has-image .page-hero__meta {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 14px rgba(0, 0, 0, 0.45);
}

.page-hero__title em {
	font-style: italic;
	color: var(--color-primary-light);
}

.page-hero__intro {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
	max-width: 52ch;
	margin: var(--space-sm) 0 0;
}

.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--space-md) var(--space-lg);
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	max-width: 720px;
}

.page-hero__meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.page-hero__meta-value {
	font-family: var(--font-primary);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--color-white);
}

.page-hero__meta-label {
	font-size: var(--fs-meta);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
	.page-hero--has-image {
		min-height: clamp(440px, 62vh, 640px);
	}

	.page-hero__inner {
		padding-bottom: var(--space-md);
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-hero__image {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Colors Page (page-colors.php)
--------------------------------------------------------------*/

/* -- Intro copy under the hero -------------------------------- */
.colors-intro {
	background-color: var(--color-white);
	padding: var(--space-lg) var(--space-md) 0;
}

.colors-intro__inner {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--color-text);
}

.colors-intro__inner p {
	margin: 0 0 var(--space-sm);
}

.colors-intro__inner p:last-child {
	margin-bottom: 0;
}

.colors-intro__inner a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -- Product lines render as stacked .category-section blocks -- */

/* -- Availability groups (Standard / Custom) ------------------ */
.colors-group {
	margin-bottom: var(--space-lg);
}

.colors-group:last-child {
	margin-bottom: 0;
}

.colors-group__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-xs) var(--space-sm);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--color-border);
}

.colors-group__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0;
}

.colors-group__note {
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-light);
	margin: 0;
}

/* -- Swatch grid ---------------------------------------------- */
.colors-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--space-md) var(--space-sm);
}

.colors-swatch {
	margin: 0;
}

.colors-swatch__link,
.colors-swatch > .colors-swatch__chip {
	display: block;
}

.colors-swatch__link {
	color: inherit;
	text-decoration: none;
}

.colors-swatch__chip {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 2px;
	/* White elevated tile — --color-bg matches the page field exactly, which
	   made the tile invisible on gray sections and let pale diamonds
	   (Arctic Snow, Sahara Sand, the ceramics) float unframed. */
	background-color: var(--color-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base),
		border-color var(--transition-base);
}

.colors-swatch__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.colors-swatch__meta {
	display: block;
	margin-top: 0.65rem;
	font-family: var(--font-primary);
	line-height: 1.35;
}

.colors-swatch__name {
	display: block;
	font-size: 1.05rem;
	font-weight: 300;
	color: var(--color-text);
}

.colors-swatch__code {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--fs-meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

/* Hover only on linked swatches (those that go somewhere). */
.colors-swatch--linked .colors-swatch__link:hover .colors-swatch__chip,
.colors-swatch--linked .colors-swatch__link:focus-visible .colors-swatch__chip {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
	border-color: var(--color-primary);
}

.colors-swatch--linked .colors-swatch__link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

/* Staggered entrance — replays each time a panel becomes active.
   Animation-based (not observer-gated opacity) so hidden tabs never
   get stuck invisible. */
.colors-panel.is-active .colors-swatch {
	animation: colorsSwatchIn 0.5s ease-out both;
	animation-delay: calc(min(var(--swatch-stagger, 0), 12) * 40ms);
}

@keyframes colorsSwatchIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.colors-panel.is-active .colors-swatch {
		animation: none;
	}
	.colors-swatch__chip {
		transition: none;
	}
}

/* -- Closing CTA band ----------------------------------------- */
.colors-cta {
	margin-top: var(--space-xl);
	background-color: var(--color-hero-dark);
	color: var(--color-white);
	padding: var(--space-xl) var(--space-md);
}

.colors-cta__inner {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.colors-cta__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 300;
	margin: 0 0 var(--space-sm);
	color: var(--color-white);
}

.colors-cta__body {
	font-size: var(--fs-body);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 auto var(--space-md);
	max-width: 52ch;
}

.colors-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
}

@media (max-width: 480px) {
	.colors-cta__actions .btn {
		width: 100%;
	}
}

/*--------------------------------------------------------------
# Search results (search.php)
--------------------------------------------------------------*/

.search-page {
	background-color: var(--color-bg);
}

/* -- Hero band: reuses .page-hero--solid, plus the inline form -- */
.search-hero {
	min-height: clamp(300px, 40vh, 460px);
}

.search-hero__title em {
	color: var(--color-primary-light);
}

.search-hero__form {
	max-width: 560px;
	margin: var(--space-md) 0 0; /* page-hero is left-aligned now — don't re-center */
	text-align: left;
}

/* searchform.php is shared, so this band picks up the .search-overlay__* base
   rules. Everything below re-tunes only what a dark photographic band needs;
   the rest (flex sizing, hairline rule, transparent field) is inherited. */
.search-hero .search-overlay__form {
	/* The shared form ships with the overlay's entry-animation resting state
	   (opacity 0 until .search-overlay.is-open) — neutralize it here or the
	   form is invisible on the search page and the 404. */
	opacity: 1;
	transform: none;
	border-bottom-color: rgba(255, 255, 255, 0.32);
}

.search-hero .search-overlay__form:focus-within {
	border-bottom-color: var(--color-primary-light);
}

.search-hero .search-overlay__submit {
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.35rem;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.38);
	background: none;
}

.search-hero .search-overlay__submit:hover,
.search-hero .search-overlay__submit:focus-visible {
	color: var(--color-dark);
	background-color: var(--color-white);
	border-color: var(--color-white);
}

.search-hero .search-overlay__input {
	color: var(--color-white);
	padding: 0.85rem 0;
}

/* Beats the _s `input[type="search"]:focus { color:#111 }` rule — see the note
 * on .search-overlay .search-overlay__input:focus above. */
.search-hero .search-overlay__input:focus {
	color: var(--color-white);
}

.search-hero .search-overlay__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.search-hero__count {
	margin: var(--space-md) 0 0;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.search-hero__count strong {
	color: var(--color-white);
	font-weight: 400;
}

/* -- Facet bar ------------------------------------------------ */
.search-facets {
	position: sticky;
	top: var(--header-offset);
	z-index: 20;
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-border);
}

.search-facets__inner {
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: var(--space-sm) var(--space-md);
}

.search-facets__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-dark);
	text-decoration: none;
	transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.search-facets__chip:hover,
.search-facets__chip:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.search-facets__chip.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.search-facets__count {
	font-size: 0.78em;
	font-weight: 400;
	opacity: 0.75;
}

.search-facets__chip.is-active .search-facets__count {
	opacity: 0.85;
}

/* -- Results list --------------------------------------------
 * MUST stay scoped to .search-page. WordPress's body_class() puts
 * `search-results` on <body> whenever a search returns hits, so a bare
 * `.search-results` rule also matches the body element and pads the entire
 * document — a 64/32/128px frame around the whole page that appears only on
 * result pages and vanishes on the no-results page (body gets
 * `search-no-results` there instead). Same trap applies to any future
 * `.search`, `.search-no-results`, or `.paged` block-level selector. */
.search-page .search-results {
	/* Tight-ish at the top on purpose: the list reads as a continuation of the
	   facet bar directly above it, so a full --section-pad opens a gap that
	   looks like a missing section. */
	padding: var(--space-lg) var(--container-pad) var(--space-xl);
}

.search-results__inner {
	max-width: 1000px;
	margin-inline: auto;
}

.search-results__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* -- Result card --------------------------------------------- */
/* post_class() stamps `.post`/`.page` on every result <li>, which picks up the
 * _s base rule `.post, .page { margin: 0 0 1.5em }` (line ~879). At the card's
 * font size that is ~39px stacked on top of the list's own 32px gap, so page
 * and post results sat 71px apart while resources and FAQs sat 32px apart. The
 * list owns the rhythm — zero the inherited margin. */
.search-card {
	margin: 0;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.search-card:hover {
	box-shadow: 0 18px 40px rgba(15, 22, 18, 0.12);
	border-color: transparent;
	transform: translateY(-2px);
}

.search-card__link {
	display: grid;
	grid-template-columns: 200px 1fr;
	text-decoration: none;
	color: inherit;
	min-height: 100%;
}

/* No aspect-ratio in the two-column layout: it would give this grid item a
   definite 150px height and defeat the default stretch, leaving a band of bare
   card below every tile. Let the row height (set by the body copy) drive it,
   with a floor for short results. The single-column layout below 640px does
   set a ratio — there the media is full-bleed and has nothing to match. */
.search-card__media {
	position: relative;
	background-color: var(--color-bg-alt);
	overflow: hidden;
	min-height: 160px;
}

.search-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-slow);
}

.search-card:hover .search-card__image {
	transform: scale(1.04);
}

.search-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Most pages/articles have no featured image, so this tile repeats down the
	   whole list — a solid near-black slab every other row reads as heavy
	   redaction bars. Quiet field + muted label instead. */
	background-color: var(--color-bg-alt);
	border-right: 1px solid var(--color-border);
	color: var(--color-light);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.search-card__body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.search-card__badge {
	align-self: flex-start;
	font-family: var(--font-primary);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.search-card__title {
	margin: 0;
	font-family: var(--font-primary);
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-dark);
}

.search-card__excerpt {
	margin: 0;
	font-family: var(--font-primary);
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--color-text);
}

.search-card__mark {
	background-color: var(--color-primary-light);
	color: var(--color-primary-dark);
	padding: 0 0.15em;
	border-radius: 2px;
}

.search-card__action {
	margin-top: auto;
	padding-top: 0.4rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.search-card__action-arrow {
	transition: transform var(--transition-base);
}

.search-card:hover .search-card__action-arrow {
	transform: translateX(0.35rem);
}

/* -- Pagination ---------------------------------------------- */
.search-pagination {
	margin-top: var(--space-lg);
}

.search-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.search-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background-color: var(--color-white);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	color: var(--color-dark);
	text-decoration: none;
	transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.search-pagination .page-numbers:hover,
.search-pagination .page-numbers:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.search-pagination .page-numbers.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.search-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* -- Empty state --------------------------------------------- */
.search-empty {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

/* 404 page — the suggestions band reuses .search-empty; this only supplies
   the section rhythm that .search-results provides on the search page. */
.error-404__suggestions {
	padding-block: var(--space-xl);
	background-color: var(--color-bg);
}

.search-empty__title {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 300;
	line-height: 1.1;
	color: var(--color-dark);
}

.search-empty__lede {
	margin: 0 auto var(--space-lg);
	max-width: 56ch;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-text);
}

.search-empty__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
	text-align: left;
}

.search-empty__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	height: 100%;
	padding: var(--space-md);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	text-decoration: none;
	transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.search-empty__link:hover,
.search-empty__link:focus-visible {
	border-color: transparent;
	box-shadow: 0 14px 34px rgba(15, 22, 18, 0.12);
	transform: translateY(-2px);
}

.search-empty__link-label {
	font-family: var(--font-primary);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--color-dark);
}

.search-empty__link-desc {
	font-family: var(--font-primary);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.4;
	color: var(--color-text);
}

.search-empty__link-arrow {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	color: var(--color-primary);
	transition: transform var(--transition-base);
}

.search-empty__link:hover .search-empty__link-arrow {
	transform: translateX(0.35rem);
}

/* -- Responsive ---------------------------------------------- */
@media (max-width: 640px) {
	.search-card__link {
		grid-template-columns: 1fr;
	}

	.search-card__media {
		aspect-ratio: 16 / 9;
	}

	.search-empty__links {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# Single FAQ (single-faqs.php)
#
# Reached almost entirely from search rather than from the hub, so each one has
# to stand alone: compact photographic hero carrying the question, the answer
# set as real prose, an escape hatch for when it wasn't the right question,
# related questions, then the samples band.
--------------------------------------------------------------*/

.faq-single {
	background-color: var(--color-white);
}

.faq-single__article {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-md) var(--space-lg);
}

/* -- The answer ------------------------------------------------ */

.faq-single__label {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-md);
}

.faq-single__label::before {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	background-color: var(--color-primary);
	margin-bottom: var(--space-sm);
}

/* The answers are short — usually a single paragraph. Set them large and open
 * so the page carries some presence instead of reading like a stranded
 * database row. */
.faq-single__content {
	font-family: var(--font-primary);
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--color-text);
	text-wrap: pretty;
}

.faq-single__content > *:first-child {
	margin-top: 0;
}

.faq-single__content > *:last-child {
	margin-bottom: 0;
}

.faq-single__content p {
	margin: 0 0 var(--space-md);
}

.faq-single__content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.faq-single__content a:hover,
.faq-single__content a:focus-visible {
	color: var(--color-primary-dark);
}

.faq-single__content ul,
.faq-single__content ol {
	margin: 0 0 var(--space-md);
	padding-left: 1.4em;
}

.faq-single__content li {
	margin-bottom: 0.6rem;
}

.faq-single__content strong {
	font-weight: 400;
	color: var(--color-dark);
}

.faq-single__content img {
	max-width: 100%;
	height: auto;
	margin: var(--space-md) 0;
}

/* -- Category tags --------------------------------------------- */

.faq-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.faq-single__meta-label {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-light);
}

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

.faq-single__tag {
	padding: 0.4rem 0.9rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
	background-color: var(--color-primary-light);
}

/* -- The escape hatch ------------------------------------------ */

.faq-single__help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: var(--space-lg);
	padding: var(--space-md);
	background-color: var(--color-bg);
	border-left: 2px solid var(--color-primary);
}

.faq-single__help-title {
	font-family: var(--font-primary);
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1.2;
	color: var(--color-dark);
	margin: 0 0 0.4rem;
}

.faq-single__help-text {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.45;
	color: var(--color-text);
	margin: 0;
	max-width: 44ch;
}

.faq-single__help-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.faq-single__help-link {
	display: inline-block;
	padding: 1rem 2rem;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--color-dark);
	border: 1px solid var(--color-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.faq-single__help-link:hover,
.faq-single__help-link:focus-visible {
	background-color: var(--color-dark);
	color: var(--color-white);
}

.faq-single__help-link--primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.faq-single__help-link--primary:hover,
.faq-single__help-link--primary:focus-visible {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
}

/*--------------------------------------------------------------
# Related FAQs
--------------------------------------------------------------*/

.faq-related {
	background-color: var(--color-bg);
	padding: var(--space-xl) var(--space-md);
}

.faq-related__container {
	max-width: 1280px;
	margin: 0 auto;
}

.faq-related__head {
	max-width: 46rem;
	margin-bottom: var(--space-lg);
}

.faq-related__eyebrow {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-sm);
}

.faq-related__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--color-dark);
	margin: 0;
	text-wrap: balance;
}

.faq-related__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq-related__item {
	display: flex;
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(min(var(--card-stagger, 0), 3) * 90ms);
}

.faq-related__item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.faq-related__card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	padding: var(--space-md);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	text-decoration: none;
	transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.faq-related__card:hover,
.faq-related__card:focus-visible {
	border-color: var(--color-primary);
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(31, 35, 32, 0.45);
	transition-delay: 0s; /* the reveal stagger must not lag the hover lift */
}

/* The excerpt can't go below --fs-body (1.5rem, the site's readability floor),
 * so the question has to carry the hierarchy from above. */
.faq-related__question {
	font-family: var(--font-primary);
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-dark);
	text-wrap: pretty;
}

.faq-related__excerpt {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.45;
	color: var(--color-light);
	margin-bottom: auto;
}

.faq-related__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-sm);
	font-size: var(--fs-meta);
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.faq-related__cta svg {
	transition: transform var(--transition-base);
}

.faq-related__card:hover .faq-related__cta svg,
.faq-related__card:focus-visible .faq-related__cta svg {
	transform: translateX(4px);
}

@media (max-width: 1024px) {
	.faq-related__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.faq-single__article {
		padding: var(--space-lg) var(--space-md);
	}

	.faq-single__content {
		font-size: var(--fs-body);
	}

	.faq-single__help {
		flex-direction: column;
		align-items: flex-start;
	}

	.faq-single__help-actions {
		width: 100%;
	}

	.faq-single__help-link {
		flex: 1;
		text-align: center;
	}

	.faq-related {
		padding: var(--space-lg) var(--space-md);
	}

	.faq-related__list {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq-related__item {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.faq-related__card:hover {
		transform: none;
	}
}

/* ==========================================================================
   Form pages — Contact / Free Take-Offs (page-contact.php, page-free-take-offs.php)
   Gravity Form on a white card beside a sticky aside: instructions panel,
   amber notice callout, dark contact-details card. Ported from testntw and
   adapted to the v2 token set. See template-parts/form-layout.php.
   ========================================================================== */

.form-page {
	background-color: var(--color-bg);
	padding: var(--space-lg) var(--container-pad) var(--space-xl);
}

.form-page__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	gap: clamp(2rem, 4vw, 5rem);
	max-width: var(--container-max);
	margin: 0 auto;
	align-items: start;
}

.form-page__container--single {
	grid-template-columns: minmax(0, 1fr);
}

/* The form itself lives on a white card so it reads as one object instead of
 * fields floating in gray space. */
.form-page__main {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
	padding: clamp(1.5rem, 3vw, 3.5rem);
}

/* Constrain override: the global gform_wrapper centering is redundant inside
 * the card — let the form fill it. */
.form-page__main .gform_wrapper {
	max-width: none;
}

/* The Take-offs "Profile Requested" list is restacked in css/takeoff-form.css,
 * which is scoped through #gform_wrapper_1 to outrank Gravity Forms' own
 * late-loading stylesheets. */

.form-page__aside {
	position: sticky;
	top: calc(var(--header-offset) + var(--space-md));
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.form-page__panel {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
	padding: var(--space-md);
}

.form-page__panel--contact {
	background-color: var(--color-hero-dark);
	border: none;
	color: var(--color-white);
}

.form-page__panel-heading {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 var(--space-sm);
	color: var(--color-primary);
}

.form-page__panel--contact .form-page__panel-heading {
	color: var(--color-primary-light);
}

.form-page__panel-body {
	font-size: var(--fs-body);
	line-height: var(--line-height);
}

.form-page__panel-body > *:first-child { margin-top: 0; }
.form-page__panel-body > *:last-child { margin-bottom: 0; }

.form-page__panel-body ul {
	padding-left: 1.2em;
	margin: 0.75em 0;
}

.form-page__panel-body li {
	margin-bottom: 0.5em;
}

.form-page__org {
	font-weight: 600;
	margin: 0 0 0.5em;
}

.form-page__contact-line {
	margin: 0 0 0.9em;
}

.form-page__contact-label {
	display: block;
	font-size: var(--fs-meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 0.15em;
}

.form-page__panel--contact a {
	color: var(--color-white);
	text-decoration: none;
	transition: color var(--transition-fast);
}

/* The take-offs inbox address is longer than this sidebar card is wide at
   the body size, so it escaped the panel. Step the address down a touch and
   let any still-too-long string wrap inside the card rather than overflow. */
.form-page__panel--contact .form-page__contact-line a {
	overflow-wrap: anywhere;
}

.form-page__panel--contact .form-page__contact-line a[href^="mailto:"] {
	font-size: 0.78em;
	letter-spacing: -0.01em;
}

.form-page__panel--contact a:hover,
.form-page__panel--contact a:focus-visible {
	color: var(--color-primary-light);
}

.form-page__contact-line--muted {
	font-size: var(--fs-meta);
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 0;
	padding-top: 0.75em;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Amber attention callout — used for the take-off quantities disclaimer. */
.form-page__notice {
	background-color: #FDF6EC;
	border-left: 3px solid #C99A2E;
	border-radius: var(--radius-sm);
	padding: var(--space-md);
}

.form-page__notice-label {
	display: block;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8A6116;
	margin-bottom: 0.6em;
}

.form-page__notice-body {
	font-size: 1.25rem;
	line-height: 1.55;
}

.form-page__notice-body p { margin: 0 0 0.75em; }
.form-page__notice-body p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
	.form-page__container {
		grid-template-columns: minmax(0, 1fr);
	}

	.form-page__aside {
		position: static;
	}
}

@media (max-width: 768px) {
	.form-page {
		padding: var(--space-md) var(--space-sm) var(--space-lg);
	}

	.form-page__main {
		padding: var(--space-md) var(--space-sm);
	}
}

/* ==========================================================================
   Products UltraShield — dark interstitial (template-parts/products-ultrashield.php)
   Reuses the homepage .home-us band; these are the products-page additions.
   ========================================================================== */

.home-us__link {
	display: inline-block;
	margin-top: 2rem;
}

.home-us--products .home-us__cards {
	margin-top: 0.5rem;
}

/* ==========================================================================
   Resources quick links — document-type fast lanes into /library/
   (template-parts/resources-quicklinks.php)
   ========================================================================== */

.resources-quicklinks {
	background: var(--color-bg);
	padding: 0 var(--container-pad) var(--space-lg);
}

.resources-quicklinks__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.resources-quicklinks__label {
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-light);
}

.resources-quicklinks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
}

.resources-quicklinks__link {
	font-size: var(--fs-body);
	color: var(--color-dark);
	text-decoration: none;
	background-image: linear-gradient(var(--color-primary), var(--color-primary));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	padding-bottom: 2px;
	transition: color var(--transition-fast);
}

.resources-quicklinks__link:hover,
.resources-quicklinks__link:focus-visible {
	color: var(--color-primary);
}

/* ==========================================================================
   Take-offs promo band (template-parts/resources-takeoffs.php)
   ========================================================================== */

.takeoffs-band {
	background: var(--color-bg-alt);
	padding: var(--space-xl) var(--container-pad);
}

.takeoffs-band__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: center;
}

.takeoffs-band__eyebrow {
	margin: 0 0 1rem;
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.takeoffs-band__title {
	margin: 0 0 1.25rem;
	font-size: var(--fs-section);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: var(--lh-heading);
	color: var(--color-ink);
}

.takeoffs-band__text {
	margin: 0 0 2rem;
	font-size: var(--fs-body);
	line-height: var(--line-height);
	color: var(--color-text);
	max-width: 34em;
}

.takeoffs-band__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 24px 48px -24px rgba(16, 19, 18, 0.18);
}

.takeoffs-band__image {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	.takeoffs-band__inner {
		grid-template-columns: 1fr;
	}

	.takeoffs-band__media {
		order: -1;
	}
}

/* Deep links from the resources hub land below the sticky chrome. */
.resource-library__section {
	scroll-margin-top: calc(var(--header-offset) + var(--space-sm));
}

/*--------------------------------------------------------------
# Homepage — Interactive Sections (sampler / lineup / vs-wood)
  Ported 2026-08-05 from game.local's Material Lab homepage and
  restyled to this theme's tokens. Parts: home-sampler.php,
  home-lineup.php, home-vs-wood.php; behavior in js/home-lab.js.
--------------------------------------------------------------*/

/* -- Shared kicker (light-surface sibling of .home-chapter__kicker) -- */

.home-sampler__kicker,
.home-lineup__kicker,
.home-vs__kicker {
	margin: 0 0 0.8rem;
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.home-sampler__title,
.home-lineup__title,
.home-vs__title {
	margin: 0 0 1.4rem;
	font-family: var(--font-primary);
	font-size: var(--fs-section);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: var(--lh-heading);
	color: var(--color-ink);
	text-wrap: balance;
}

/* -- Color sampler ------------------------------------------- */

.home-sampler {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	background: var(--color-white);
	min-height: 82vh;
}

.home-sampler__copy {
	padding: clamp(3rem, 7vh, 5.5rem) clamp(2rem, 4vw, 5rem) clamp(3rem, 7vh, 5.5rem) clamp(2rem, 5.5vw, 7rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.home-sampler__intro {
	font-size: var(--fs-body);
	line-height: 1.7;
	color: var(--color-text);
	max-width: 44ch;
	margin: 0;
}

.home-sampler__crossref {
	margin: 0.9rem 0 0;
	font-size: var(--fs-meta);
	letter-spacing: 0.04em;
	color: var(--color-light);
}

.home-sampler__lab {
	display: flex;
	gap: clamp(1.6rem, 3vw, 3rem);
	align-items: flex-start;
	margin-top: clamp(1.8rem, 4vh, 3rem);
	flex-wrap: wrap;
}

.home-sampler__rail-label {
	font-size: var(--fs-meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-light);
	margin: 0 0 0.7rem;
}

.home-sampler__chips {
	display: grid;
	grid-template-columns: repeat(4, 56px);
	gap: 0.9rem 0.8rem;
}

/* The swatch library mixes diamond-cut PNGs with square photo tiles;
   a uniform diamond clip on the img makes the rail read as one set.
   The drop-shadow lives on the button — a filter on the clipped img
   would be cut away with the corners. */
.lab-chip {
	position: relative;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	filter: drop-shadow(0 2px 4px rgba(16, 19, 18, 0.18));
	transition: filter var(--transition-base);
}

.lab-chip__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transition: transform var(--transition-base);
}

.lab-chip:hover,
.lab-chip:focus-visible,
.lab-chip.is-selected {
	filter: drop-shadow(0 5px 10px rgba(16, 19, 18, 0.28));
}

.lab-chip:hover .lab-chip__img,
.lab-chip:focus-visible .lab-chip__img,
.lab-chip.is-selected .lab-chip__img {
	transform: scale(1.14);
}

.lab-chip::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -9px;
	transform: translateX(-50%) scale(0);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
	transition: transform var(--transition-base);
}

.lab-chip.is-selected::after {
	transform: translateX(-50%) scale(1);
}

/* Selected-colour readout, beside the chip grid */
.home-sampler__readout {
	flex: 0 0 auto;
	min-width: 15ch;
	align-self: flex-start;
	padding-left: clamp(0rem, 1.5vw, 1.5rem);
	border-left: 1px solid var(--color-border);
}

.home-sampler__selname {
	display: block;
	font-weight: 600;
	font-size: var(--fs-body);
	color: var(--color-dark);
	line-height: 1.25;
}

.home-sampler__selcode {
	display: block;
	color: var(--color-light);
	font-size: var(--fs-meta);
	margin-top: 0.15rem;
}

.home-sampler__order {
	display: inline-block;
	margin-top: 0.6rem;
	color: var(--color-primary-dark);
	font-size: var(--fs-body);
	text-decoration: none;
}

.home-sampler__ctas {
	display: flex;
	gap: 1.6rem;
	align-items: center;
	margin-top: clamp(2rem, 4.5vh, 3.2rem);
	flex-wrap: wrap;
}

.home-sampler__stage {
	position: relative;
	overflow: hidden;
	min-height: 480px;
}

.home-sampler__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-sampler__scenes {
	position: absolute;
	inset: 0;
}

.home-sampler__scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.home-sampler__scene.is-active {
	opacity: 1;
}

/* Light touch only — the scene is the product, don't bury it. */
.home-sampler__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(200deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 34%);
}

.home-sampler__hint {
	position: absolute;
	top: 1.4rem;
	left: 1.6rem;
	z-index: 2;
	color: var(--color-white);
	font-size: var(--fs-meta);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: rgba(23, 26, 24, 0.86);
	border-radius: 999px;
	padding: 0.42rem 1rem;
}

/* -- Lineup explorer ----------------------------------------- */

.home-lineup {
	background: var(--color-bg);
	padding: var(--section-pad) var(--container-pad);
	scroll-margin-top: calc(var(--header-offset) + var(--space-sm));
}

.home-lineup__inner {
	max-width: 1340px;
	margin: 0 auto;
}

.home-lineup__headrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.home-lineup__strip {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: var(--space-md) 0 1.6rem;
	border-bottom: 1px solid var(--color-border);
	overflow-x: auto;
	scrollbar-width: none;
}

.home-lineup__strip::-webkit-scrollbar {
	display: none;
}

.lab-tab {
	flex: 1 0 auto;
	min-width: max-content;
	padding: 1rem 1.75rem;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 400;
	color: var(--color-light);
	cursor: pointer;
	letter-spacing: 0.01em;
	transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
	white-space: nowrap;
}

.lab-tab:hover,
.lab-tab:focus-visible {
	color: var(--color-primary-dark);
	outline: none;
}

.lab-tab.is-active {
	color: var(--color-primary-dark);
	background-color: var(--color-white);
	border-bottom-color: var(--color-primary-dark);
	font-weight: 600;
}

.lab-panel {
	opacity: 1;
	transition: opacity 180ms ease;
}

.lab-panel.is-leaving,
.lab-panel.is-entering {
	opacity: 0;
}

.home-lineup__panelgrid {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: var(--space-md);
	align-items: start;
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	box-shadow: 0 24px 48px -24px rgba(16, 19, 18, 0.18);
}

.home-lineup__photo {
	margin: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	position: relative;
}

.home-lineup__photo img {
	aspect-ratio: 16 / 10;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.home-lineup__note {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: rgba(255, 255, 255, 0.93);
	border-radius: 999px;
	padding: 0.35rem 0.95rem;
	font-size: var(--fs-meta);
	color: var(--color-text);
}

.home-lineup__detail {
	padding-block: 0.5rem;
}

.home-lineup__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 0.7rem;
}

/* Wide enough that a two-word colour name never breaks mid-word. */
.lab-swfig {
	width: 8.25rem;
	text-align: center;
	margin: 0;
}

/* Same uniform diamond as the sampler rail (see .lab-chip). At 44px a
   shadow is noise on the clipped shape, so none here. */
.lab-swfig__img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	display: block;
	margin: 0 auto 0.5rem;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.lab-swfig figcaption {
	font-size: var(--fs-meta);
	color: var(--color-light);
	line-height: 1.3;
	/* Colour names are proper nouns — never hyphenate or break mid-word. */
	overflow-wrap: normal;
	hyphens: none;
	text-wrap: balance;
}

.home-lineup__meta {
	margin: 1rem 0 0;
	color: var(--color-light);
	font-size: var(--fs-body);
}

.home-lineup__meta a {
	color: var(--color-primary-dark);
}

.home-lineup__ctas {
	display: flex;
	gap: 1.6rem;
	margin-top: 1.3rem;
	align-items: center;
	flex-wrap: wrap;
}

.home-lineup__sample {
	color: var(--color-primary-dark);
	font-size: var(--fs-body);
	text-decoration: none;
}

/* -- Wood vs composite --------------------------------------- */

.home-vs {
	background: var(--color-white);
	padding: var(--section-pad) var(--container-pad);
}

.home-vs__inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* ch units resolve against each element's own font, so the measure is
   set on the title and lede themselves. */
.home-vs__title {
	max-width: 20ch;
}

.home-vs__lede {
	font-size: var(--fs-body);
	line-height: 1.7;
	color: var(--color-text);
	margin: 0;
	max-width: 46ch;
}

.home-vs__control {
	margin: var(--space-lg) 0 var(--space-md);
}

.home-vs__label {
	display: block;
	font-size: var(--fs-meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-light);
	margin-bottom: 0.9rem;
}

.home-vs__sliderwrap {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.4rem);
}

.home-vs__slider {
	flex: 1 1 auto;
	-webkit-appearance: none;
	appearance: none;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(
		to right,
		var(--color-primary) 0%,
		var(--color-primary) var(--fill, 56%),
		var(--color-border) var(--fill, 56%),
		var(--color-border) 100%
	);
	cursor: pointer;
}

.home-vs__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-white);
	border: 2px solid var(--color-primary);
	box-shadow: 0 3px 10px rgba(16, 19, 18, 0.22);
	cursor: grab;
	transition: transform var(--transition-fast);
}

.home-vs__slider::-webkit-slider-thumb:active {
	transform: scale(1.14);
	cursor: grabbing;
}

.home-vs__slider::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-white);
	border: 2px solid var(--color-primary);
	box-shadow: 0 3px 10px rgba(16, 19, 18, 0.22);
	cursor: grab;
}

.home-vs__slider:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 6px;
}

.home-vs__year {
	flex: 0 0 auto;
	min-width: 7.5ch;
	font-size: clamp(1.5rem, 2vw, 1.9rem);
	font-weight: 600;
	color: var(--color-dark);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.home-vs__ticks {
	display: flex;
	justify-content: space-between;
	margin-top: 0.6rem;
	padding-right: clamp(8ch, 10vw, 10ch);
	font-size: var(--fs-meta);
	color: var(--color-light);
	font-variant-numeric: tabular-nums;
}

/* screen-reader running commentary */
.home-vs__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.home-vs__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

.home-vs__card {
	border-radius: var(--radius-md);
	padding: clamp(1.6rem, 3vw, 2.4rem);
}

.home-vs__card--wood {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
}

/* The two cards differ by warm sage tint + border, not by darkness. */
.home-vs__card--ntw {
	background: var(--color-primary-light);
	border: 1px solid var(--color-primary);
	color: var(--color-text);
}

.home-vs__card h3 {
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 0.3rem;
	color: var(--color-dark);
}

.home-vs__sub {
	font-size: var(--fs-body);
	color: var(--color-light);
	margin: 0;
}

.home-vs__figure {
	font-size: clamp(2.2rem, 3.6vw, 3.2rem);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--color-primary-dark);
	font-variant-numeric: tabular-nums;
	margin: 1.3rem 0 0.2rem;
}

.home-vs__figlabel {
	font-size: var(--fs-meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-light);
	margin: 0 0 1rem;
}

.home-vs__bar {
	height: 6px;
	border-radius: 4px;
	background: var(--color-white);
	overflow: hidden;
}

.home-vs__bar i {
	display: block;
	height: 100%;
	background: var(--color-primary-dark);
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-vs__weekends {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 1.3rem 0 0;
}

.home-vs__weekends strong {
	font-size: 1.9rem;
	font-weight: 600;
	color: var(--color-dark);
	font-variant-numeric: tabular-nums;
}

.home-vs__weekends span {
	font-size: var(--fs-body);
	color: var(--color-light);
}

.home-vs__weeknote {
	margin: 0.45rem 0 0;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--color-light);
	max-width: 40ch;
}

.home-vs__chorehead {
	margin: 1.5rem 0 0;
	padding-top: 1.3rem;
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-dark);
}

.home-vs__chores {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
}

.home-vs__chores li {
	position: relative;
	padding: 0.4rem 0 0.4rem 1.6rem;
	font-size: var(--fs-body);
	color: var(--color-text);
}

.home-vs__chores li::before {
	position: absolute;
	left: 0;
	top: 0.4rem;
}

.home-vs__chores--wood li::before {
	content: '\00d7';
	color: #8C4736;
	font-size: 1.1em;
	line-height: 1;
}

.home-vs__chores--ntw li::before {
	content: '\2713';
	color: var(--color-primary-dark);
}

.home-vs__repeat {
	font-style: italic;
	opacity: 0.85;
}

.home-vs__whole {
	margin: 1.1rem 0 0;
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--color-text);
}

.home-vs__whole a {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.home-vs__foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-md);
	margin-top: var(--space-md);
	flex-wrap: wrap;
}

.home-vs__disclaimer {
	font-size: var(--fs-meta);
	color: var(--color-light);
	max-width: 62ch;
	margin: 0;
	line-height: 1.55;
}

.home-vs__ctas {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	flex-wrap: wrap;
}

/* -- Mobile ---------------------------------------------------- */

@media (max-width: 900px) {
	/* The sampler only works if you can see the photo change as you tap a
	   swatch. Stacked in source order the picker sits a full screen below the
	   photo, so on mobile the copy column's children are lifted into the
	   section's own flow (display: contents) and re-ordered to put the photo
	   directly above the swatch rail. Nothing is moved in the markup —
	   desktop keeps its two-column split untouched.

	   Side effect: [data-reveal] on .home-sampler__copy generates no box here,
	   so this one section skips its scroll reveal on mobile and renders
	   straight away. */
	.home-sampler {
		display: flex;
		flex-direction: column;
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.home-sampler__copy,
	.home-sampler__lab {
		display: contents;
	}

	/* .home-sampler__copy carried the horizontal padding for all of these. */
	.home-sampler__kicker,
	.home-sampler__title,
	.home-sampler__intro,
	.home-sampler__crossref,
	.home-sampler__picker,
	.home-sampler__readout,
	.home-sampler__ctas {
		padding-inline: var(--space-md);
	}

	.home-sampler__kicker {
		padding-top: clamp(2.5rem, 6vh, 4rem);
	}

	.home-sampler__ctas {
		padding-bottom: clamp(2.5rem, 6vh, 4rem);
	}

	/* copy → photo → swatches → readout → CTA */
	.home-sampler__kicker   { order: 1; }
	.home-sampler__title    { order: 2; }
	.home-sampler__intro    { order: 3; }
	.home-sampler__crossref { order: 4; }
	.home-sampler__stage    { order: 5; }
	.home-sampler__picker   { order: 6; }
	.home-sampler__readout  { order: 7; }
	.home-sampler__ctas     { order: 8; }

	/* Short enough that the photo and the full swatch rail share a screen. */
	.home-sampler__stage {
		min-height: 0;
		aspect-ratio: 4 / 3;
		margin-top: clamp(1.4rem, 3vh, 2rem);
	}

	.home-sampler__picker {
		margin-top: 1.1rem;
	}

	/* Two rows of four rather than one row of eight — across eight columns a
	   phone would shrink each chip well under the 44px tap-target floor. */
	.home-sampler__chips {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.75rem;
		max-width: 20rem;
	}

	.lab-chip,
	.lab-chip__img {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	}

	/* stacked: the divider belongs above the readout, not beside it */
	.home-sampler__readout {
		border-left: 0;
		border-top: 1px solid var(--color-border);
		padding-top: 1.1rem;
		margin-top: 1.1rem;
		width: 100%;
	}

	.home-lineup__panelgrid {
		grid-template-columns: 1fr;
		padding: var(--space-sm);
	}

	.home-vs__cards {
		grid-template-columns: 1fr;
	}

	.home-vs__ticks {
		padding-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-vs__bar i,
	.home-sampler__scene,
	.lab-panel {
		transition: none;
	}
}

/* -- UltraShield annotated-board diagram ----------------------
   (home-ultrashield.php, .home-us--diagram modifier — after
   testntw.local's "UltraShield technology" section.) Lens markers
   on the board render connect to the two construction cards; the
   connector endpoints are measured by js/home-lab.js, which also
   arms the entrance choreography (.usd--armed → .is-visible).
   Without JS nothing is armed: board and cards render static and
   the connector layer stays hidden (.usd--ready never set). */

.home-us--diagram {
	/* The board render bleeds off the viewport's left edge — clip the
	   overhang so it never provokes horizontal scrolling. */
	overflow: hidden;
}

.home-us--diagram .home-us__inner {
	display: block;
}

.home-us--diagram .home-us__head {
	max-width: 60ch;
}

.home-us--diagram .home-us__lede {
	margin-bottom: 0;
}

.usd {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
	margin-top: var(--space-lg);
	/* Break out of the centered container on the left only: the margin
	   pulls the grid to the viewport edge (percentages resolve against
	   the container), the extra width flows into the board column, and
	   the cards column keeps its right edge on the container grid. */
	margin-left: calc((100% - 100vw) / 2);
}

.usd__stage {
	margin: 0;
	position: relative;
}

/* Oversize + shift the render so its left end is cut off by the
   viewport — the board "peeks" in rather than floating in the dark. */
.usd__frame {
	position: relative;
	width: 126%;
	margin-left: -22%;
}

.usd__board {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
}

.usd__marker {
	position: absolute;
	width: 30px;
	height: 30px;
	transform: translate(-50%, -50%);
}

.usd__marker-ring {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid var(--color-white);
	background: rgba(159, 212, 180, 0.35);
	transition: background var(--transition-fast);
	animation: usd-pulse 2.8s ease-out infinite;
}

@keyframes usd-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
	}
	70%,
	100% {
		box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
	}
}

.usd__marker.is-hl .usd__marker-ring {
	background: rgba(159, 212, 180, 0.7);
}

.usd__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
}

.usd--ready .usd__lines {
	opacity: 1;
}

.usd__line {
	stroke: rgba(255, 255, 255, 0.5);
	stroke-width: 1.5;
	stroke-linecap: round;
	transition: stroke var(--transition-fast);
}

.usd__tip {
	fill: rgba(255, 255, 255, 0.8);
	transition: fill var(--transition-fast);
}

.usd__line.is-hl {
	stroke: #9FD4B4;
	stroke-width: 2;
}

.usd__tip.is-hl {
	fill: #9FD4B4;
}

.usd__cards {
	display: grid;
	gap: var(--space-sm);
}

.usd__card {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.045);
	border-radius: var(--radius-md);
	padding: 1.8rem 2rem;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.usd__card:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.07);
}

.usd__card-title {
	margin: 0 0 0.5rem;
	font-size: var(--fs-subsection);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #9FD4B4;
}

.usd__card-desc {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
}

/* Entrance choreography — armed by JS, released on .is-visible.
   home-lab.js drops .usd--armed ~2.2s after reveal so these
   transition overrides never linger into the hover styles. */

.usd--armed .usd__frame {
	opacity: 0;
	transform: translateX(-9vw);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.usd--armed .usd__marker {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0);
	transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.usd--armed [data-usd-marker='cap'] {
	transition-delay: 0.65s;
}

.usd--armed [data-usd-marker='core'] {
	transition-delay: 0.8s;
}

.usd--armed .usd__line {
	transition: stroke-dashoffset 0.55s ease;
}

.usd--armed [data-usd-line='cap'] {
	transition-delay: 0.95s;
}

.usd--armed [data-usd-line='core'] {
	transition-delay: 1.1s;
}

.usd--armed .usd__tip {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.usd--armed [data-usd-tip='cap'] {
	transition-delay: 1.45s;
}

.usd--armed [data-usd-tip='core'] {
	transition-delay: 1.6s;
}

.usd--armed .usd__card {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.usd--armed [data-usd-card='cap'] {
	transition-delay: 1.15s;
}

.usd--armed [data-usd-card='core'] {
	transition-delay: 1.35s;
}

.usd--armed.is-visible .usd__frame {
	opacity: 1;
	transform: translateX(0);
}

.usd--armed.is-visible .usd__marker {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.usd--armed.is-visible .usd__tip,
.usd--armed.is-visible .usd__card {
	opacity: 1;
}

/* Foot row — stats left, quiet explore link right */

.home-us__foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	margin-top: var(--space-lg);
	flex-wrap: wrap;
}

.home-us--diagram .home-us__stats {
	margin: 0;
}

@media (max-width: 900px) {
	.usd {
		grid-template-columns: 1fr;
		margin-left: 0;
	}

	/* Stacked: the board sits in flow, uncropped. */
	.usd__frame {
		width: 100%;
		margin-left: 0;
	}

	.usd__lines,
	.usd__marker {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.usd__marker-ring {
		animation: none;
	}
}

/* ==========================================================================
   EDITORIAL PROSE — shared long-form treatment (2026-08-06)
   --------------------------------------------------------------------------
   Used by the blog article body AND by the long-form content pages ported
   from the legacy site (Thinking Green, Applications, Loyalty Program).
   Until now `.entry-content` inherited nothing but the _s reset, so any page
   rendering the_content() came out as unstyled full-bleed text.

   The measure is capped in CHARACTERS, not pixels: --fs-body is fluid, so a
   px max-width would give a 60-character line on a laptop and a 90-character
   one on a large display. 68ch holds either way.
   ========================================================================== */

.entry-content {
	max-width: 68ch;
	margin-inline: auto;
	font-size: var(--fs-body);
	line-height: 1.62;
	color: var(--color-text);
}

.entry-content > * + * {
	margin-block-start: 1.2em;
}

.entry-content h2 {
	margin-block-start: 2.2em;
	font-size: var(--fs-subsection);
	line-height: var(--lh-heading);
	letter-spacing: -0.015em;
	color: var(--color-ink);
}

.entry-content h3 {
	margin-block-start: 1.9em;
	font-size: clamp(1.625rem, 1vw + 1.25rem, 1.875rem);
	line-height: var(--lh-heading);
	color: var(--color-ink);
}

.entry-content h4 {
	margin-block-start: 1.7em;
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--color-ink);
}

.entry-content h2 + *,
.entry-content h3 + *,
.entry-content h4 + * {
	margin-block-start: 0.6em;
}

.entry-content a:not(.btn) {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.entry-content a:not(.btn):hover {
	color: var(--color-primary-dark);
}

.entry-content ol {
	padding-inline-start: 1.4em;
}

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

.entry-content ul {
	list-style: none;
	padding-inline-start: 0;
}

.entry-content ul > li {
	position: relative;
	padding-inline-start: 1.5em;
}

/* Brand-green tick rule rather than a bullet — the same accent language as
   the eyebrow rules elsewhere on the site. */
.entry-content ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.72em;
	width: 0.75em;
	height: 1px;
	background: var(--color-primary);
}

.entry-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--space-md);
	border-inline-start: 2px solid var(--color-primary);
	font-size: var(--fs-lead);
	line-height: 1.4;
	color: var(--color-ink);
}

.entry-content strong {
	color: var(--color-ink);
	font-weight: 600;
}

.entry-content hr {
	margin-block: var(--space-lg);
	border: 0;
	border-block-start: 1px solid var(--color-border);
}

/* Imagery breaks the measure — a photograph trapped in a 68ch column looks
   like an afterthought. */
.entry-content img,
.entry-content figure,
.entry-content .wp-caption {
	display: block;
	width: 100%;
	max-width: min(100%, 1040px);
	height: auto;
	margin-inline: auto;
}

.entry-content img {
	border-radius: var(--radius-sm);
}

.entry-content figure,
.entry-content .wp-caption {
	margin-block: var(--space-md);
}

.entry-content figcaption,
.entry-content .wp-caption-text {
	margin-block-start: 0.7em;
	font-size: 0.875em;
	line-height: 1.45;
	color: var(--color-light);
	text-align: center;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.entry-content th,
.entry-content td {
	padding: 0.75em 1em;
	border-block-end: 1px solid var(--color-border);
	text-align: start;
}

.entry-content th {
	color: var(--color-ink);
	font-weight: 600;
}

/* ==========================================================================
   BLOG — index, rows, article (2026-08-06)
   ========================================================================== */

.blog-index__body {
	padding-block: var(--section-pad);
	background: var(--color-bg);
}

.blog-index__container {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.blog-index__empty {
	font-size: var(--fs-body);
	color: var(--color-light);
}

/* ---------- lead story ---------- */

.post-lead {
	padding-block-end: var(--space-lg);
	border-block-end: 1px solid var(--color-border);
}

.post-lead__media {
	display: block;
	margin-block-end: var(--space-md);
	overflow: hidden;
	border-radius: var(--radius-md);
}

.post-lead__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.post-lead__media:hover .post-lead__image {
	transform: scale(1.02);
}

.post-lead__meta {
	display: flex;
	gap: var(--space-sm);
	align-items: baseline;
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-light);
}

.post-lead__kicker {
	position: relative;
	padding-inline-start: 2.25rem;
	color: var(--color-primary);
	font-weight: 600;
}

.post-lead__kicker::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.5em;
	width: 1.5rem;
	height: 1px;
	background: var(--color-primary);
}

.post-lead__title {
	margin: 0 0 var(--space-sm);
	font-size: clamp(2.5rem, 3.6vw, 3.75rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--color-ink);
	text-wrap: balance;
}

.post-lead__title a {
	color: inherit;
	text-decoration: none;
}

.post-lead__title a:hover {
	color: var(--color-primary-dark);
}

.post-lead__excerpt {
	max-width: 62ch;
	margin: 0 0 var(--space-md);
	font-size: var(--fs-lead);
	line-height: 1.45;
	color: var(--color-text);
}

.post-lead__link {
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--color-primary);
}

/* ---------- numbered rows ---------- */

.blog-index__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-row {
	border-block-end: 1px solid var(--color-border);
}

.post-row__link {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: var(--space-md);
	align-items: start;
	padding-block: var(--space-md);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--transition-fast);
}

.post-row--has-image .post-row__link {
	grid-template-columns: 4.5rem 1fr 9rem;
}

.post-row__link:hover {
	background: var(--color-white);
	box-shadow: 0 0 0 var(--container-pad) var(--color-white);
}

.post-row__index {
	font-size: var(--fs-meta);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
	color: var(--color-light);
	padding-block-start: 0.55em;
}

.post-row__text {
	display: block;
	min-width: 0;
}

.post-row__title {
	display: block;
	font-size: clamp(1.625rem, 1.4vw + 1.1rem, 2rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	text-wrap: balance;
	transition: color var(--transition-fast);
}

.post-row__link:hover .post-row__title {
	color: var(--color-primary-dark);
}

.post-row__excerpt {
	display: block;
	max-width: 64ch;
	margin-block-start: 0.45em;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--color-text);
}

.post-row__date {
	display: block;
	margin-block-start: 0.7em;
	font-size: var(--fs-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-light);
}

.post-row__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.post-row__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- pagination ---------- */

.blog-index .pagination {
	margin-block-start: var(--space-lg);
}

.blog-index .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
	font-size: var(--fs-body);
}

.blog-index .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-text);
	text-decoration: none;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.blog-index .page-numbers:hover {
	border-color: var(--color-dark);
	color: var(--color-ink);
}

.blog-index .page-numbers.current {
	border-color: var(--color-dark);
	background: var(--color-dark);
	color: var(--color-white);
}

.blog-index .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* ---------- single article ---------- */

.article {
	padding-block: var(--section-pad);
	background: var(--color-bg);
}

.article__container {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.article__foot {
	max-width: 68ch;
	margin: var(--space-lg) auto 0;
	padding-block-start: var(--space-md);
	border-block-start: 1px solid var(--color-border);
	font-size: var(--fs-body);
}

.article__foot a {
	color: var(--color-primary);
	font-weight: 600;
}

.article-nav {
	padding-block: var(--space-lg);
	background: var(--color-bg-alt);
	border-block-start: 1px solid var(--color-border);
}

.article-nav__container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-md);
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.article-nav__item {
	display: block;
	padding: var(--space-md);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: border-color var(--transition-fast), transform var(--transition-base);
}

.article-nav__item:hover {
	border-color: var(--color-dark);
	transform: translateY(-2px);
}

.article-nav__item--next {
	grid-column: 2;
	text-align: end;
}

.article-nav__label {
	display: block;
	margin-block-end: 0.4em;
	font-size: var(--fs-meta);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.article-nav__title {
	display: block;
	font-size: var(--fs-body);
	line-height: 1.3;
	color: var(--color-ink);
}

@media (max-width: 900px) {
	.post-row__link,
	.post-row--has-image .post-row__link {
		grid-template-columns: 3rem 1fr;
	}

	.post-row__media {
		display: none;
	}

	.article-nav__container {
		grid-template-columns: 1fr;
	}

	.article-nav__item--next {
		grid-column: 1;
		text-align: start;
	}
}

/* ==========================================================================
   VIDEO GALLERY (2026-08-06)
   --------------------------------------------------------------------------
   Facade tiles: poster + play control, iframe injected on demand by
   js/video-gallery.js. See template-parts/video-grid.php.
   ========================================================================== */

.video-page__intro {
	padding-block: var(--section-pad) 0;
	background: var(--color-bg);
}

.video-page__intro .entry-content {
	padding-inline: var(--container-pad);
}

.video-grid {
	padding-block: var(--section-pad);
	background: var(--color-bg);
}

.video-grid__container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.video-grid__head {
	max-width: 68ch;
	margin-block-end: var(--space-lg);
}

.video-grid__eyebrow {
	display: block;
	position: relative;
	padding-inline-start: 2.25rem;
	margin-block-end: var(--space-sm);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.video-grid__eyebrow::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	width: 1.5rem;
	height: 1px;
	background: var(--color-primary);
}

.video-grid__heading {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-section);
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	color: var(--color-ink);
	text-wrap: balance;
}

.video-grid__lede {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.45;
	color: var(--color-text);
}

.video-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: var(--space-lg);
}

.video-filter__btn {
	padding: 0.6rem 1.15rem;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-text);
	font-family: inherit;
	font-size: var(--fs-nav);
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.video-filter__btn:hover {
	border-color: var(--color-dark);
	color: var(--color-ink);
}

.video-filter__btn.is-active {
	border-color: var(--color-dark);
	background: var(--color-dark);
	color: var(--color-white);
}

.video-grid__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The tile became a card in the 2026-08-13 shared-surface pass (bottom of this
   file): white face, hairline, rounded corners. It was built before that as a
   bare poster with text loose underneath, so the two pieces need reconciling —
   the text needs the padding a card face implies, and the poster needs to lose
   its own corner radius and sit flush inside the card's instead of floating a
   second rounded rectangle inside the first.

   The button stretches to the full card height and pushes nothing, so a row of
   cards whose titles wrap to different depths still ends on one line. */
.video-tile__button {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: start;
	cursor: pointer;
}

.video-tile__media {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
	aspect-ratio: 16 / 9;
}

.video-tile__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow), opacity var(--transition-base);
}

.video-tile__button:hover .video-tile__image {
	transform: scale(1.04);
	opacity: 0.82;
}

.video-tile__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-dark);
	transition: transform var(--transition-base), background-color var(--transition-fast);
}

.video-tile__play svg {
	width: 1.75rem;
	height: 1.75rem;
	margin-inline-start: 0.15rem;
}

.video-tile__button:hover .video-tile__play {
	transform: scale(1.08);
	background: var(--color-white);
}

.video-tile__length {
	position: absolute;
	inset-block-end: 0.6rem;
	inset-inline-end: 0.6rem;
	padding: 0.15rem 0.5rem;
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, 0.72);
	color: var(--color-white);
	font-size: var(--fs-meta);
	font-variant-numeric: tabular-nums;
}

.video-tile__text {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
	padding: var(--space-sm) var(--space-sm) calc(var(--space-sm) + 0.15rem);
}

.video-tile__topic {
	display: block;
	font-size: var(--fs-meta);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
}

/* Three lines is the longest title in the library ("UltraShield by NewTechWood
   Domotex Shanghai Show 2013 — Most Beautiful and Durable Composite Decking");
   clamping there keeps one outlier from setting the height of its whole row. */
.video-tile__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-size: var(--fs-body);
	line-height: 1.28;
	color: var(--color-ink);
	transition: color var(--transition-fast);
}

.video-tile__button:hover .video-tile__title {
	color: var(--color-primary-dark);
}

.video-tile__note {
	display: block;
	margin-block-start: auto;
	padding-block-start: 0.3em;
	font-size: 0.9em;
	line-height: 1.45;
	color: var(--color-light);
}

.video-grid__empty {
	margin-block-start: var(--space-md);
	font-size: var(--fs-body);
	color: var(--color-light);
}

/* ---------- player modal ---------- */

.video-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: var(--container-pad);
}

.video-modal[hidden] {
	display: none;
}

.video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.86);
}

.video-modal__dialog {
	position: relative;
	width: min(100%, 1200px);
}

.video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-modal__close {
	position: absolute;
	inset-block-end: calc(100% + 0.75rem);
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-white);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.video-modal__close:hover {
	background: rgba(255, 255, 255, 0.24);
}

.video-modal__close svg {
	width: 1.25rem;
	height: 1.25rem;
}

html.has-video-open,
html.has-video-open body {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Prose containment (2026-08-06)
   The measure is capped in ch, but a bare .entry-content is a direct child of
   <main> on the default page template — with no container it ran edge-to-edge
   on a phone. Give it its own gutter, and zero that gutter wherever a parent
   container already supplies one.
   -------------------------------------------------------------------------- */

.entry-content {
	box-sizing: content-box;
	padding-inline: var(--container-pad);
}

.article__container .entry-content,
.form-page__main .entry-content,
.video-page__intro .entry-content {
	padding-inline: 0;
}

/* Default page template: give the prose its own vertical rhythm below the
   hero rather than the _s 1.5em margin. */
.page-body {
	padding-block: var(--section-pad);
	margin: 0;
	background: var(--color-bg);
}

.page-body > .entry-content {
	margin-block: 0;
}

/* A child page (e.g. /application/commercial/) reads better with the parent
   named above the title — the hero already carries a breadcrumb slot, this is
   just the body-side link back up. */
.page-body__parent {
	max-width: 68ch;
	margin: 0 auto var(--space-md);
	padding-inline: var(--container-pad);
	font-size: var(--fs-meta);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-light);
}

/* ==========================================================================
   RESOURCES MEGA PANEL — grouped columns (2026-08-06)
   --------------------------------------------------------------------------
   The 2026-08-06 content recovery took Resources from 5 links to 18. The flat
   dropdown became a wall of text, so grouped data (ACF resources_mega_groups)
   switches header.php to this full-width variant instead. It borrows the
   products panel's shell — .mega-panel already owns the show/hide, position
   and entrance behaviour; this only styles what is inside it.
   ========================================================================== */

/* Same full-width white surface as the products panel — the base .mega-panel
   only owns positioning and the show/hide transition, so a new modifier that
   forgets this renders as transparent text over the page (and over the
   front page's overlay-header hero video). */
.mega-panel--columns {
	left: 0;
	right: 0;
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 24px 48px -24px rgba(16, 19, 18, 0.18);
}

.mega-panel--columns .mega-panel__inner {
	padding-block: var(--space-lg);
}

.mega-panel__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-lg) var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega-panel__column {
	min-width: 0;
}

.mega-panel__column-heading {
	display: block;
	position: relative;
	margin-block-end: var(--space-sm);
	padding-block-end: 0.7rem;
	border-block-end: 1px solid var(--color-border);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.mega-panel__column-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega-panel__column-list > li + li {
	margin-block-start: 0.15rem;
}

.mega-panel__column-link {
	display: block;
	padding-block: 0.5rem;
	text-decoration: none;
	color: var(--color-text);
	transition: color var(--transition-fast);
}

.mega-panel__column-link:hover,
.mega-panel__column-link:focus-visible {
	color: var(--color-primary-dark);
}

.mega-panel__column-label {
	display: block;
	font-size: var(--fs-nav);
	line-height: 1.25;
	color: var(--color-ink);
	transition: color var(--transition-fast);
}

.mega-panel__column-link:hover .mega-panel__column-label {
	color: var(--color-primary-dark);
}

/* The note is a whisper — it earns its place by disambiguating similar
   labels ("Take-Offs" vs "Calculator"), not by adding weight. */
.mega-panel__column-note {
	display: block;
	margin-block-start: 0.15em;
	font-size: var(--fs-meta);
	line-height: 1.35;
	color: var(--color-light);
}

/* The old max-width:900px two-column fallback was removed 2026-08-07 — mega
   panels are display:none below the nav breakpoint (1024.98px), so it could
   never match. The mobile sheet renders these groups instead. */

/* ==========================================================================
   FOOTER — fifth column ("For Professionals", 2026-08-06)
   ========================================================================== */

.footer-main__grid {
	grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
	gap: var(--space-md) var(--space-lg);
}

/* The footer's original responsive rules live EARLIER in this file, and media
   queries add no specificity — so the unmediated override above would beat
   them at every width and hold five columns on a phone. Re-state the whole
   ladder here, narrowest last. */
@media screen and (max-width: 1200px) {
	.footer-main__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media screen and (max-width: 1024px) {
	.footer-main__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-md);
	}
}

@media screen and (max-width: 600px) {
	.footer-main__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   DREAM BOOK — project browser (2026-08-07)
   --------------------------------------------------------------------------
   Replaces the legacy Vue/Swiper module. Grid of finished projects, each
   opening a detail modal that pairs the photography with the actual spec.
   See template-parts/dreambook-browser.php and js/dreambook.js.
   ========================================================================== */

.dreambook-page__intro {
	padding-block: var(--section-pad) 0;
	background: var(--color-bg);
}

.dreambook {
	padding-block: var(--section-pad);
	background: var(--color-bg);
}

.dreambook__container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.dreambook__head {
	max-width: 68ch;
	margin-block-end: var(--space-lg);
}

.dreambook__eyebrow {
	display: block;
	position: relative;
	padding-inline-start: 2.25rem;
	margin-block-end: var(--space-sm);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.dreambook__eyebrow::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	width: 1.5rem;
	height: 1px;
	background: var(--color-primary);
}

.dreambook__heading {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-section);
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	color: var(--color-ink);
	text-wrap: balance;
}

.dreambook__lede {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.45;
	color: var(--color-text);
}

/* ---------- filter ---------- */

.dreambook-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: var(--space-lg);
}

.dreambook-filter__btn {
	padding: 0.6rem 1.15rem;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-text);
	font-family: inherit;
	font-size: var(--fs-nav);
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.dreambook-filter__btn:hover {
	border-color: var(--color-dark);
	color: var(--color-ink);
}

.dreambook-filter__btn.is-active {
	border-color: var(--color-dark);
	background: var(--color-dark);
	color: var(--color-white);
}

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

.dreambook__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Same reconciliation as the video tiles above: this was a bare photo with
   loose text under it before the shared card surface landed on it. */
.dreambook-card__button {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: start;
	cursor: pointer;
}

.dreambook-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--color-bg-alt);
	aspect-ratio: 4 / 3;
}

.dreambook-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.dreambook-card__button:hover .dreambook-card__image {
	transform: scale(1.04);
}

.dreambook-card__count {
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-end: 0.75rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.62);
	color: var(--color-white);
	font-size: var(--fs-meta);
	letter-spacing: 0.04em;
}

.dreambook-card__text {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-sm) var(--space-sm) calc(var(--space-sm) + 0.15rem);
}

/* Two lines, always: clamped so a long place name can't set the height of its
   whole row, and reserved so the spec and builder lines below sit on the same
   baseline across the row whether the title runs to one line or two. Pinning
   the builder to the card's bottom instead left a hole in the middle of every
   short-titled card. */
.dreambook-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: var(--fs-body);
	line-height: 1.25;
	color: var(--color-ink);
	transition: color var(--transition-fast);
}

/* The reserved second line only earns its space once there are neighbours to
   line up with — the grid goes multi-column around 720px. In one column it
   would just be a hole under every short title. */
@media (min-width: 720px) {

	.dreambook-card__title {
		min-height: 2.5em;
	}
}

.dreambook-card__button:hover .dreambook-card__title {
	color: var(--color-primary-dark);
}

.dreambook-card__spec {
	display: block;
	margin-block-start: 0.35em;
	font-size: var(--fs-meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.dreambook-card__builder {
	display: block;
	margin-block-start: 0.3em;
	font-size: 0.9em;
	color: var(--color-light);
}

.dreambook__empty {
	margin-block-start: var(--space-md);
	font-size: var(--fs-body);
	color: var(--color-light);
}

/* ---------- detail modal ---------- */

.dreambook-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: clamp(0.75rem, 3vw, 2.5rem);
}

.dreambook-modal[hidden] {
	display: none;
}

.dreambook-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 11, 0.82);
}

.dreambook-modal__dialog {
	position: relative;
	width: min(100%, 1320px);
	max-height: 92vh;
	overflow: hidden auto;
	background: var(--color-white);
	border-radius: var(--radius-md);
	overscroll-behavior: contain;
}

.dreambook-modal__close {
	position: absolute;
	inset-block-start: 0.85rem;
	inset-inline-end: 0.85rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-ink);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.dreambook-modal__close:hover {
	background: var(--color-white);
}

.dreambook-modal__close svg {
	width: 1.15rem;
	height: 1.15rem;
}

.dreambook-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

/* ---------- detail: image stage ---------- */

.dreambook-detail__stage {
	background: var(--color-dark);
	min-width: 0;
}

.dreambook-detail__frame {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.dreambook-detail__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity var(--transition-base);
	pointer-events: none;
}

.dreambook-detail__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.dreambook-detail__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dreambook-detail__nav {
	position: absolute;
	inset-block-start: 50%;
	translate: 0 -50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.86);
	color: var(--color-ink);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.dreambook-detail__nav:hover {
	background: var(--color-white);
}

.dreambook-detail__nav svg {
	width: 1.2rem;
	height: 1.2rem;
}

.dreambook-detail__nav--prev {
	inset-inline-start: 0.85rem;
}

.dreambook-detail__nav--next {
	inset-inline-end: 0.85rem;
}

.dreambook-detail__thumbs {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem;
	overflow-x: auto;
	scrollbar-width: thin;
}

.dreambook-detail__thumb {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 3.4rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: none;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.dreambook-detail__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dreambook-detail__thumb:hover {
	opacity: 0.85;
}

.dreambook-detail__thumb.is-active {
	opacity: 1;
	border-color: var(--color-white);
}

/* ---------- detail: information ---------- */

.dreambook-detail__info {
	padding: clamp(1.5rem, 3vw, 2.75rem);
	min-width: 0;
}

.dreambook-detail__title {
	margin: 0 0 var(--space-sm);
	padding-inline-end: 2.5rem;
	font-size: var(--fs-subsection);
	line-height: var(--lh-heading);
	letter-spacing: -0.015em;
	color: var(--color-ink);
}

.dreambook-detail__note {
	margin-block-end: var(--space-md);
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--color-text);
}

.dreambook-detail__note p {
	margin: 0 0 0.8em;
}

.dreambook-detail__specs-label,
.dreambook-detail__meta dt {
	display: block;
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.dreambook-detail__specs {
	margin-block-end: var(--space-md);
	padding-block-end: var(--space-md);
	border-block-end: 1px solid var(--color-border);
}

.dreambook-spec-list {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.dreambook-spec {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding-block: 0.6rem;
	border-block-start: 1px solid var(--color-border);
	font-size: var(--fs-body);
	line-height: 1.35;
}

.dreambook-spec:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.dreambook-spec__product {
	color: var(--color-ink);
	font-weight: 600;
}

.dreambook-spec__product a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.dreambook-spec__product a:hover {
	color: var(--color-primary-dark);
}

/* The model code is the bit a specifier writes down — give it a monospace-ish
   tabular treatment so it reads as a part number, not prose. */
.dreambook-spec__model {
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-alt);
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	color: var(--color-text);
}

.dreambook-spec__color {
	font-size: 0.9em;
	color: var(--color-light);
}

.dreambook-detail__meta {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.55rem var(--space-md);
	margin: 0 0 var(--space-md);
	font-size: 0.95em;
}

.dreambook-detail__meta dt {
	align-self: baseline;
}

.dreambook-detail__meta dd {
	margin: 0;
	color: var(--color-text);
}

.dreambook-detail__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	padding-block-start: var(--space-sm);
}

html.has-dreambook-open,
html.has-dreambook-open body {
	overflow: hidden;
}

@media (max-width: 900px) {
	.dreambook-detail {
		grid-template-columns: minmax(0, 1fr);
	}

	.dreambook-detail__frame {
		aspect-ratio: 3 / 2;
	}

	.dreambook__grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}
}

/* ==========================================================================
   MOBILE NAVIGATION SHEET
   template-parts/mobile-nav.php + the mobile-nav module in js/site.js.

   Deliberately at the tail of the file. .mobile-nav is a brand-new namespace
   with no earlier rules to fight, and being last is what lets the
   .has-mobile-nav-open overrides below beat the
   .has-overlay-header .site-header:not(.is-scrolled) treatment without
   resorting to !important.

   NAV BREAKPOINT is mirrored in the header responsive block, the
   --header-offset override, and NAV_DESKTOP in js/site.js.
   ========================================================================== */

.mobile-nav {
	position: fixed;
	inset: var(--header-offset) 0 0;
	z-index: 1; /* inside .site-header's z-index:1000 stacking context */
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 240ms ease, transform 240ms ease, visibility 0s linear 240ms;

	/* .site-header narrows --fs-meta to 0.875rem from 768px up. The sheet is
	   nested inside it but is a full-page surface, not a compact bar, so it
	   takes the document scale back. */
	--fs-meta: 1rem;
}

/* NOTE: `hidden` is deliberately left to mean display:none here (unlike
   .mega-panel[hidden], which overrides it). js/site.js removes the attribute
   BEFORE adding .is-open and only restores it after the close transition, so
   both directions still animate — and keeping real `hidden` semantics is what
   takes the sheet out of the tab order and the a11y tree when it is shut. */

.mobile-nav.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 240ms ease, transform 240ms ease, visibility 0s linear 0s;
}

.mobile-nav__scroll {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: var(--space-sm) var(--space-md) var(--space-lg);
}

/* --- Primary rows -------------------------------------------------------- */

.mobile-nav__list,
.mobile-nav__sublist,
.mobile-nav__minilist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	width: 100%;
	min-height: 56px;
	padding: 0.875rem 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--transition-fast);
}

.mobile-nav__row:hover,
.mobile-nav__row:focus-visible {
	color: var(--color-primary);
}

.mobile-nav__chevron {
	flex: 0 0 auto;
	transition: transform var(--transition-base);
}

.mobile-nav__row[aria-expanded="true"] {
	color: var(--color-primary);
	border-bottom-color: transparent;
}

/* The hub link that follows the promoted Resources groups. Lighter than a
   section row so it reads as a footer to them, not a sixth category. */
.mobile-nav__row--all {
	min-height: 48px;
	padding-block: 0.625rem;
	font-size: var(--fs-nav);
	font-weight: 600;
	color: var(--color-primary);
}

.mobile-nav__row[aria-expanded="true"] .mobile-nav__chevron {
	transform: rotate(180deg);
}

/* --- Accordion panel ----------------------------------------------------- */

.mobile-nav__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 280ms ease;
}

/* Explicit, and required: an author `display` on the element outranks the UA
   `[hidden] { display: none }` regardless of specificity, so without this the
   collapsed panel stays rendered — its links would remain in the tab order
   and the a11y tree, and trapFocus's offsetParent filter would wrap onto a
   link nothing can focus. */
.mobile-nav__panel[hidden] {
	display: none;
}

.mobile-nav__panel.is-open {
	grid-template-rows: 1fr;
}

.mobile-nav__panel-inner {
	min-height: 0;
	overflow: hidden;
}

.mobile-nav__group + .mobile-nav__group {
	margin-top: var(--space-sm);
}

.mobile-nav__group-heading {
	margin: 0 0 0.25rem;
	font-family: var(--font-primary);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
}

/* Column by default so a link's note sits UNDER its label; the tile and
   "all" variants opt back into a row below. */
.mobile-nav__sublink {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: 48px;
	padding: 0.625rem 0;
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 1px solid var(--color-border);
	transition: color var(--transition-fast);
}

.mobile-nav__sublink--tile,
.mobile-nav__sublink--all {
	flex-direction: row;
	align-items: center;
	gap: 0.875rem;
}

.mobile-nav__sublist li:last-child .mobile-nav__sublink {
	border-bottom: none;
}

.mobile-nav__sublink:hover,
.mobile-nav__sublink:focus-visible {
	color: var(--color-primary);
}

.mobile-nav__sublabel {
	display: block;
	font-family: var(--font-primary);
	font-size: var(--fs-nav);
	font-weight: 500;
	line-height: 1.3;
}

.mobile-nav__subnote {
	display: block;
	margin-top: 0.125rem;
	font-size: var(--fs-meta);
	font-weight: 300;
	line-height: 1.35;
	color: var(--color-light);
}

.mobile-nav__sublink--tile {
	padding-block: 0.5rem;
}

.mobile-nav__thumb {
	flex: 0 0 auto;
	display: block;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--color-bg-alt);
}

.mobile-nav__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mobile-nav__sublink--all {
	justify-content: space-between;
	color: var(--color-primary);
	font-weight: 600;
}

/* --- Secondary block ----------------------------------------------------- */

/* The aside supplies the divider, so the last primary row drops its own —
   otherwise the two rules stack a few pixels apart. */
.mobile-nav__list > .mobile-nav__item:last-child .mobile-nav__row {
	border-bottom: none;
}

.mobile-nav__aside {
	margin-top: var(--space-sm);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.mobile-nav__search {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 48px;
	margin-bottom: var(--space-md);
	padding: 0.75rem var(--space-sm);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-primary);
	font-size: var(--fs-nav);
	color: var(--color-light);
	text-align: left;
	cursor: pointer;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.mobile-nav__search:hover,
.mobile-nav__search:focus-visible {
	color: var(--color-ink);
	border-color: var(--color-ink);
}

.mobile-nav__block + .mobile-nav__block {
	margin-top: var(--space-md);
}

/* Demoted from <h2> to a labelled <p>; heading line-height restated. */
.mobile-nav__aside-heading {
	margin: 0 0 0.375rem;
	font-family: var(--font-primary);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: var(--lh-heading);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-light);
}

.mobile-nav__minilist a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0;
	font-family: var(--font-primary);
	font-size: var(--fs-nav);
	font-weight: 400;
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.mobile-nav__minilist a:hover,
.mobile-nav__minilist a:focus-visible {
	color: var(--color-primary);
}

/* The utility menu carries two-state icon spans on desktop; the sheet shows
   labels only. */
.mobile-nav__minilist .util-icon {
	display: none;
}

.mobile-nav__contact {
	display: flex;
	flex-direction: column;
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.mobile-nav__contact-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-primary);
	font-size: var(--fs-nav);
	font-weight: 400;
	color: var(--color-light);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.mobile-nav__contact-link:hover,
.mobile-nav__contact-link:focus-visible {
	color: var(--color-primary);
}

/* --- Open state ---------------------------------------------------------- */

body.has-mobile-nav-open {
	overflow: hidden;
}

/* Overlay-header pages float the masthead transparent over the hero with
   WHITE nav type, a white hamburger and an inverted logo. With the sheet open
   that put white-on-white text over the panel — the links read as blank rows.
   Force the settled/solid treatment for as long as the sheet is open. */
/* The second selector must out-specify
   `.has-overlay-header .site-header:not(.is-scrolled)` (0,3,0) — being later
   in the file is not enough, since that rule is not in a media query. Three
   classes plus the element gets us to 0,4,0. */
body.has-mobile-nav-open .site-header,
body.has-overlay-header.has-mobile-nav-open .site-header:not(.is-scrolled) {
	background: var(--color-white);
	border-bottom-color: var(--color-border);
	transition-duration: 200ms; /* not the 650ms cinematic settle */
}

body.has-overlay-header.has-mobile-nav-open .site-header .main-navigation a,
body.has-overlay-header.has-mobile-nav-open .site-header .site-logo__text,
body.has-overlay-header.has-mobile-nav-open .site-header .header-actions a,
body.has-overlay-header.has-mobile-nav-open .site-header .header-actions button,
body.has-overlay-header.has-mobile-nav-open .site-header .menu-toggle {
	color: var(--color-ink);
}

body.has-overlay-header.has-mobile-nav-open .site-header .menu-toggle__bar {
	background-color: var(--color-dark);
}

/* Mobile nav open drops a white plate behind the header, so the colour logo
 * comes back even though the page has not scrolled. */
body.has-overlay-header.has-mobile-nav-open .site-header .site-logo__img:not(.site-logo__img--overlay),
body.has-overlay-header.has-mobile-nav-open .site-header .custom-logo {
	opacity: 1;
}

body.has-overlay-header.has-mobile-nav-open .site-header .site-logo__img--overlay {
	opacity: 0;
}

@media screen and (min-width: 1024.99px) {
	.mobile-nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-nav,
	.mobile-nav__panel,
	.mobile-nav__chevron,
	body.has-mobile-nav-open .site-header {
		transition: none;
	}
}

/* ==========================================================================
   INSTALLATION GUIDES — long-form guide pages + hub
   (page-guide.php / page-installation-guides.php)
   ========================================================================== */

/* --- Guide layout: sticky TOC rail + prose column ------------------------ */

.guide-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 72ch);
	justify-content: center;
	column-gap: var(--space-lg);
	padding-top: var(--space-lg);
	padding-bottom: var(--space-xl);
}

.guide-toc {
	align-self: start;
	position: sticky;
	top: calc(var(--space-lg) + 60px); /* clear the fixed masthead */
}

.guide-toc__details {
	border-top: 2px solid var(--color-dark);
	padding-top: var(--space-sm);
}

.guide-toc__summary {
	list-style: none;
	cursor: default;
	pointer-events: none; /* fixed open on desktop; interactive on mobile below */
	font-size: var(--fs-meta, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-light);
}

.guide-toc__summary::-webkit-details-marker {
	display: none;
}

.guide-toc__list {
	list-style: none;
	margin: var(--space-sm) 0 0;
	padding: 0;
	counter-reset: guide-toc;
}

.guide-toc__item + .guide-toc__item {
	margin-top: 0.625rem;
}

.guide-toc__link {
	display: block;
	font-size: 1.0625rem;
	line-height: 1.35;
	text-decoration: none;
	color: var(--color-text);
	transition: color var(--transition-fast);
}

.guide-toc__link:hover,
.guide-toc__link:focus-visible {
	color: var(--color-primary);
}

/* Prose refinements specific to guides */

.guide-body .entry-content > h2 {
	margin-top: var(--space-lg);
}

.guide-body .entry-content img {
	display: block;
	width: 100%;
	height: auto;
	margin: var(--space-md) 0;
}

/* --- Closing band: PDF + video routing ----------------------------------- */

.guide-next {
	background: var(--color-dark);
	padding: var(--space-lg) 0;
}

.guide-next__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.guide-next__title {
	color: var(--color-white);
	font-size: var(--fs-subsection);
	margin: 0 0 var(--space-xs);
}

.guide-next__text {
	color: rgba(255, 255, 255, 0.72);
	max-width: 52ch;
	margin: 0;
}

.guide-next__actions {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

/* On the dark band the secondary button needs light type */

.guide-next .btn--secondary {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.guide-next .btn--secondary:hover,
.guide-next .btn--secondary:focus-visible {
	border-color: var(--color-white);
	color: var(--color-white);
}

/* --- Hub grid ------------------------------------------------------------- */

.guides-hub {
	padding: var(--space-lg) 0 var(--space-xl);
}

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

/* --- Responsive ladder ---------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.guide-layout {
		grid-template-columns: minmax(0, 72ch);
		row-gap: var(--space-md);
	}

	.guide-toc {
		position: static;
	}

	.guide-toc__details {
		border: 1px solid var(--color-border);
		border-top: 2px solid var(--color-dark);
		background: var(--color-white);
		padding: var(--space-sm);
	}

	.guide-toc__details:not([open]) .guide-toc__summary::after {
		content: "+";
	}

	.guide-toc__details[open] .guide-toc__summary::after {
		content: "\2212";
	}

	.guide-toc__summary {
		pointer-events: auto;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

@media screen and (max-width: 768px) {
	.guides-hub__grid {
		grid-template-columns: 1fr;
	}

	.guide-next__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}


/*--------------------------------------------------------------
# Shared card surface
#
# Added 2026-08-13. The /products/ deck treatment became the house card style,
# so every card grid on the site now shares one surface: a soft 14px face, a
# hairline, and a deep low-opacity lift that gets deeper on hover.
#
# SURFACE ONLY. This block deliberately sets no width, height, padding,
# aspect-ratio or grid property — each component keeps the size it already had.
# If a card needs to change dimensions, change it in that component's own
# section above, not here.
#
# It lives at the very bottom of the file on purpose: these selectors are all
# defined earlier with their own radii and shadows (which ran 3/4/6/14px and
# hairline-to-40px before this), and matching specificity means source order is
# what decides. Moving this block up will silently stop it working.
#
# `.products-archive__item` is NOT in this list — it lives in woocommerce.css,
# which is enqueued after this file (inc/woocommerce.php) and so has to carry
# its own copy of the same rules.
--------------------------------------------------------------*/

.resources-card,
.faqs-card,
.topic-gate__card,
.sample-card,
.locator-card,
.search-card,
.faq-related__card,
.gallery-grid__tile,
.video-tile,
.dreambook-card,
.textures-3d__card,
.get-started__card,
.series-downloads__group,
.resource-library__section,
.products-series__grid--deck .products-series__card {
	border-radius: var(--card-radius);
	background-color: var(--card-face);
	border: 1px solid var(--card-hairline);
	box-shadow: var(--card-lift);
}

/* Image-led cards clip their photography to the rounded corners; the two list
   containers clip their first/last rows to it. Text cards are listed too —
   `overflow: hidden` is harmless on them and keeps the rule from needing a
   second, near-identical selector list to maintain. */
.resources-card,
.sample-card,
.search-card,
.gallery-grid__tile,
.video-tile,
.dreambook-card,
.textures-3d__card,
.get-started__card,
.series-downloads__group,
.resource-library__section,
.products-series__grid--deck .products-series__card {
	overflow: hidden;
}

/* The library's document groups and a series' download group are DIVIDED
   LISTS, not card grids — 235 documents rendered as 235 floating cards would
   be unreadable, and both already collapse the dividers between their rows. So
   the card surface goes on the container and the rows inside stay flat.
   They also stay out of the hover block above: they are not clickable, and
   `:focus-within` on a list of links would lift the whole list every time a
   row took focus.

   The library section's header and row-list were already built to pair into a
   single bordered box (the header carries `border-bottom: 0` so it sits flush
   on the list). Carding the section means both inner borders have to go, or
   the box gets a second hairline inside the first. */
.resource-library__section-header,
.resource-library__rows {
	border: 0;
}

.series-downloads__group {
	/* The group's own rule uses `border-top` as a divider between groups; the
	   shared `border` above replaces that with a full hairline, so it needs
	   side padding it never had as a plain divided block. */
	padding-inline: var(--space-md);
}

.resources-card:hover,
.resources-card:focus-within,
.faqs-card:hover,
.faqs-card:focus-within,
.topic-gate__card:hover,
.topic-gate__card:focus-visible,
.sample-card:hover,
.sample-card:focus-within,
.locator-card:hover,
.locator-card:focus-within,
.search-card:hover,
.search-card:focus-within,
.faq-related__card:hover,
.faq-related__card:focus-within,
.gallery-grid__tile:hover,
.gallery-grid__tile:focus-within,
.video-tile:hover,
.video-tile:focus-within,
.dreambook-card:hover,
.dreambook-card:focus-within,
.textures-3d__card:hover,
.textures-3d__card:focus-within,
.get-started__card:hover,
.get-started__card:focus-within,
.products-series__grid--deck .products-series__card:hover,
.products-series__grid--deck .products-series__card:focus-within {
	border-color: var(--color-primary);
	box-shadow: var(--card-lift-hover);
}

/* The "All Products" gate card keeps its brand-green hairline at rest — it is
   the way straight through, and the shared neutral hairline above would erase
   the one thing that marks it out. */
.topic-gate__card--all {
	border-color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {

	.resources-card,
	.faqs-card,
	.topic-gate__card,
	.sample-card,
	.locator-card,
	.search-card,
	.faq-related__card,
	.gallery-grid__tile,
	.video-tile,
	.dreambook-card,
	.textures-3d__card,
	.get-started__card {
		transition: none;
	}
}

/* ==========================================================================
   Installation QR hub pages  (/installation/ + /installation/[category])
   --------------------------------------------------------------------------
   Landed on from QR codes printed on the paper inserts inside product boxes.
   Audience: a phone held at a jobsite, often in sunlight, often in gloves.
   Everything is big, high-contrast, and tappable. URLs are PERMANENT — see
   inc/install-qr.php.
   ========================================================================== */

/* ---- Index (/installation/) ---------------------------------------------- */

.install-index {
	padding: var(--space-lg) 0 var(--space-xl);
	background: var(--color-bg);
}

.install-index__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 720px;
}

.install-index__item {
	display: flex;
	align-items: stretch;
	gap: var(--space-xs);
	border-bottom: 1px solid var(--color-border);
}

.install-index__item:first-child {
	border-top: 1px solid var(--color-border);
}

.install-index__link {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	min-height: 72px;
	padding: var(--space-sm) var(--space-xs);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-dark);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.install-index__link:hover,
.install-index__link:focus-visible {
	color: var(--color-primary);
}

.install-index__arrow {
	color: var(--color-primary);
	transition: transform var(--transition-fast);
}

.install-index__link:hover .install-index__arrow {
	transform: translateX(4px);
}

.install-index__es {
	align-self: center;
	flex: none;
	padding: 0.5em 1em;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-primary-dark);
	background: var(--color-primary-light);
	border-radius: 999px;
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.install-index__es:hover,
.install-index__es:focus-visible {
	background: var(--color-primary);
	color: var(--color-white);
}

/* ---- Category hub (/installation/[category]) ----------------------------- */

.install-hub {
	padding: var(--space-md) 0 var(--space-xl);
	background: var(--color-bg);
}

.install-hub__inner {
	max-width: 720px;
}

.install-hub__lang {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: var(--space-md);
	padding: 0.6em 1.2em;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-primary-dark);
	background: var(--color-primary-light);
	border-radius: 999px;
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.install-hub__lang:hover,
.install-hub__lang:focus-visible {
	background: var(--color-primary);
	color: var(--color-white);
}

.install-hub__heading {
	margin: 0 0 var(--space-sm);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-light);
}

.install-hub__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.install-hub__item {
	border-bottom: 1px solid var(--color-border);
}

.install-hub__item:first-child {
	border-top: 1px solid var(--color-border);
}

.install-hub__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	min-height: 76px;
	padding: var(--space-sm) var(--space-xs);
	text-decoration: none;
	transition: background var(--transition-fast);
}

.install-hub__row:hover,
.install-hub__row:focus-visible {
	background: var(--color-bg-alt);
}

.install-hub__row-main {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	min-width: 0;
}

.install-hub__row-title {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-dark);
}

.install-hub__row:hover .install-hub__row-title {
	color: var(--color-primary-dark);
}

.install-hub__row-meta {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.install-hub__chip {
	padding: 0.15em 0.6em;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-primary-dark);
	background: var(--color-primary-light);
	border-radius: 4px;
}

.install-hub__size {
	font-size: 1.125rem;
	color: var(--color-light);
}

.install-hub__row-action {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--color-white);
	background: var(--color-primary);
	border-radius: 50%;
	transition: background var(--transition-fast);
}

.install-hub__row:hover .install-hub__row-action {
	background: var(--color-primary-dark);
}

.install-hub__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: var(--space-md);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 8px;
}

.install-hub__empty-text {
	margin: 0;
	font-size: 1.5rem;
	line-height: var(--line-height);
	color: var(--color-text);
}

@media (min-width: 768px) {

	.install-hub {
		padding-top: var(--space-lg);
	}
}

/* ==========================================================================
   Thank-you page — Free Take-Offs confirmation (page-thank-you-free-take-offs.php)
   Single centered card under a compact solid hero: check badge, lead copy,
   two lead-time stat tiles, follow-up note, CTA pair.
   ========================================================================== */

.thanks {
	background-color: var(--color-bg);
	padding: var(--space-lg) var(--container-pad) var(--space-xl);
}

.thanks__container {
	max-width: 760px;
	margin: 0 auto;
}

.thanks__card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
	padding: clamp(2rem, 5vw, 4rem);
	text-align: center;
}

.thanks__check {
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	margin-bottom: var(--space-md);
}

.thanks__heading {
	font-family: var(--font-primary);
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	line-height: 1.2;
	margin: 0 0 var(--space-sm);
	color: var(--color-dark);
}

.thanks__lead {
	font-size: var(--fs-body);
	line-height: var(--line-height);
	color: var(--color-text);
	max-width: 54ch;
	margin: 0 auto var(--space-md);
}

.thanks__timeline {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-sm);
	max-width: 480px;
	margin: 0 auto var(--space-md);
}

.thanks__step {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-md) var(--space-sm);
}

.thanks__step-value {
	display: block;
	font-family: var(--font-primary);
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: 600;
	line-height: 1;
	color: var(--color-primary);
	margin-bottom: 0.35em;
}

.thanks__step-label {
	display: block;
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--color-light);
}

.thanks__note {
	font-size: 1.5rem;
	line-height: var(--line-height);
	color: var(--color-text);
	max-width: 44ch;
	margin: 0 auto var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.thanks__note a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.thanks__note a:hover,
.thanks__note a:focus-visible {
	text-decoration: underline;
}

.thanks__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

@media (max-width: 600px) {
	.thanks {
		padding: var(--space-md) var(--space-sm) var(--space-lg);
	}

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

/* ==========================================================================
   Warranty page (/warranty/) — the canonical warranty breakdown.
   ========================================================================== */

.warranty-matrix {
	padding: var(--space-xl) 0;
	background: var(--color-bg);
}

.warranty-matrix__header {
	max-width: 46em;
	margin-bottom: var(--space-md);
}

.warranty-matrix__title,
.warranty-split__title,
.warranty-claim__title,
.warranty-docs__title {
	font-size: var(--fs-subsection);
	color: var(--color-dark);
	margin: 0 0 var(--space-sm);
}

.warranty-matrix__intro,
.warranty-docs__intro {
	color: var(--color-light);
	max-width: 42em;
}

.warranty-matrix__scroller {
	overflow-x: auto;
}

.warranty-matrix__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 34rem;
	font-variant-numeric: tabular-nums;
}

.warranty-matrix__table th,
.warranty-matrix__table td {
	text-align: left;
	padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
	border-bottom: 1px solid var(--color-border);
	vertical-align: baseline;
}

.warranty-matrix__table thead th {
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-light);
	border-bottom-color: var(--color-dark);
}

.warranty-matrix__table tbody th {
	font-weight: 400;
	color: var(--color-text);
}

.warranty-matrix__years {
	font-weight: 600;
	color: var(--color-dark);
	font-size: 1.2em;
}

.warranty-matrix__footnote {
	margin-top: var(--space-md);
	font-size: var(--fs-small, 0.9375rem);
	color: var(--color-light);
	max-width: 52em;
}

.warranty-split {
	padding: var(--space-xl) 0;
	background: var(--color-bg-alt);
}

.warranty-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
}

.warranty-list {
	list-style: none;
	margin: var(--space-sm) 0 0;
	padding: 0;
}

.warranty-list li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: var(--space-sm);
}

.warranty-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.55em;
	height: 0.55em;
	background: var(--color-primary);
}

.warranty-claim {
	padding: var(--space-xl) 0;
	background: var(--color-bg);
}

.warranty-claim__steps {
	list-style: none;
	counter-reset: warranty-step;
	margin: var(--space-md) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
}

.warranty-claim__steps li {
	counter-increment: warranty-step;
	border-top: 2px solid var(--color-dark);
	padding-top: var(--space-sm);
}

.warranty-claim__steps h3 {
	font-size: var(--fs-lead);
	margin: 0 0 var(--space-xs);
	color: var(--color-dark);
}

.warranty-claim__steps h3::before {
	content: counter(warranty-step, decimal-leading-zero);
	display: block;
	font-size: var(--fs-meta);
	letter-spacing: 0.12em;
	color: var(--color-primary);
	margin-bottom: var(--space-xs);
}

.warranty-claim__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.warranty-claim__note {
	margin-top: var(--space-sm);
	color: var(--color-light);
	font-size: var(--fs-small, 0.9375rem);
}

.warranty-docs {
	padding: var(--space-xl) 0;
	background: var(--color-bg-alt);
}

.warranty-docs__grid {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-sm);
}

.warranty-docs__card a {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	height: 100%;
	padding: var(--space-md);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	text-decoration: none;
	transition: border-color var(--transition-base), transform var(--transition-base);
}

.warranty-docs__card a:hover,
.warranty-docs__card a:focus {
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

.warranty-docs__name {
	font-weight: 600;
	color: var(--color-dark);
}

.warranty-docs__desc {
	color: var(--color-light);
	font-size: var(--fs-small, 0.9375rem);
	line-height: 1.5;
}

.warranty-docs__type {
	margin-top: auto;
	font-size: var(--fs-meta);
	letter-spacing: 0.1em;
	color: var(--color-primary);
}

/* Warranty stat labels across series/category stat strips link here. */
.stat-strip__label a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--color-border);
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.stat-strip__label a:hover,
.stat-strip__label a:focus {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

@media (min-width: 720px) {
	.warranty-split__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

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

@media (min-width: 1080px) {
	.warranty-docs__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.warranty-matrix__table {
		min-width: 27rem;
	}

	.warranty-matrix__table th,
	.warranty-matrix__table td {
		padding: var(--space-xs) var(--space-xs) var(--space-xs) 0;
	}

	.warranty-matrix__years {
		font-size: 1.05em;
	}
}

/*--------------------------------------------------------------
# Mobile Port (2026-08-27)
Patterns approved via scaffolds/mobile-home.html and
scaffolds/mobile-category.html. Everything here is phone-only
(max-width: 768px) or explicitly desktop-guarded — desktop
rendering is unchanged. Nothing may scroll horizontally on
mobile: stacked cards, wrapped grids, and accordions instead.
--------------------------------------------------------------*/

/* -- Footer column accordions -------------------------------- */

/* Desktop: the toggle is typographically the old heading — inert,
   no icon, not in the tab order (site.js removes it from focus on
   wide viewports via pointer-events + tabindex). */
.footer-col__toggle {
	display: inline;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: default;
	pointer-events: none;
}

.footer-col__toggle-icon {
	display: none;
}

@media (max-width: 768px) {
	.footer-col__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		padding: 1rem 0;
		cursor: pointer;
		pointer-events: auto;
	}

	.footer-col__heading {
		margin: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	.footer-col__toggle-icon {
		display: block;
		position: relative;
		flex: 0 0 20px;
		height: 20px;
	}

	.footer-col__toggle-icon::before,
	.footer-col__toggle-icon::after {
		content: '';
		position: absolute;
		inset: 0;
		margin: auto;
		background: var(--color-primary-light);
		transition: transform var(--transition-base);
	}

	.footer-col__toggle-icon::before {
		width: 12px;
		height: 2px;
	}

	.footer-col__toggle-icon::after {
		width: 2px;
		height: 12px;
	}

	.footer-col.is-open .footer-col__toggle-icon::after {
		transform: rotate(90deg);
	}

	.footer-col .footer-nav {
		display: none;
	}

	.footer-col.is-open .footer-nav {
		display: block;
		padding-top: 0.75rem;
	}

	/* Comfortable tap rows inside an open group */
	.footer-col .footer-nav a {
		display: block;
		padding: 0.375rem 0;
	}

	/* The Where To Buy CTA stays visible even while its list is
	   collapsed — it is a conversion element, not a nav link. */
	.footer-col__cta {
		margin-top: 1rem;
	}
}

/* -- Mobile conversion bar ----------------------------------- */

.mobile-cta-bar {
	display: none;
}

@media (max-width: 768px) {
	.mobile-cta-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1100;
		display: flex;
		gap: 0.625rem;
		align-items: stretch;
		padding: 0.625rem var(--space-sm) calc(0.625rem + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 -1px 0 var(--color-border), 0 -8px 24px rgba(16, 19, 18, 0.07);
		transform: translateY(110%);
		transition: transform var(--transition-base);
	}

	.mobile-cta-bar.is-visible {
		transform: translateY(0);
	}

	.mobile-cta-bar__btn {
		flex: 1;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		min-height: 50px;
		padding: 0.625rem 1rem;
		border-radius: 6px;
		font-size: 1.0625rem;
		font-weight: 600;
		text-decoration: none;
		text-align: center;
		transition: background var(--transition-fast);
	}

	.mobile-cta-bar__btn--primary {
		background: var(--color-primary);
		color: var(--color-white);
	}

	.mobile-cta-bar__btn--primary:active {
		background: var(--color-primary-dark);
	}

	.mobile-cta-bar__btn--ghost {
		border: 1.5px solid var(--color-dark);
		color: var(--color-ink);
	}

	.mobile-cta-bar__call {
		flex: 0 0 50px;
		display: grid;
		place-items: center;
		border: 1.5px solid var(--color-border);
		border-radius: 6px;
		color: var(--color-primary);
	}

	.mobile-cta-bar__call svg {
		width: 22px;
		height: 22px;
	}

	/* Keep the last content above the bar once it is on screen. */
	body.has-mobile-cta-bar .footer-bottom {
		padding-bottom: 5rem;
	}
}

/* -- Homepage lineup: tile grid replaces the tab strip -------- */

.home-lineup__grid {
	display: none;
}

@media (max-width: 768px) {
	.home-lineup__tabs {
		display: none;
	}

	.home-lineup__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.home-lineup__tile {
		position: relative;
		aspect-ratio: 4 / 5;
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		align-items: flex-end;
		text-decoration: none;
		color: var(--color-white);
	}

	.home-lineup__tile-img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.home-lineup__tile::after {
		content: '';
		position: absolute;
		inset: 0;
		background: var(--color-scrim-low);
	}

	.home-lineup__tile-name {
		position: relative;
		z-index: 1;
		padding: 0.875rem 1rem;
		font-size: 1.1875rem;
		font-weight: 600;
		line-height: 1.2;
	}

	.home-lineup__tile-name small {
		display: block;
		font-size: 0.8125rem;
		font-weight: 500;
		opacity: 0.85;
		margin-top: 0.125rem;
	}
}

/* -- Homepage close: no empty screenfuls on a phone ----------- */

@media (max-width: 768px) {
	.home-close {
		padding: var(--space-lg) var(--space-md);
	}
}

/* -- Section-nav: jump dropdown instead of sideways pills ----- */

.section-nav__mobile-toggle {
	display: none;
}

@media (max-width: 768px) {
	.section-nav__mobile-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		padding: 0.75rem 1.25rem;
		background: none;
		border: 0;
		font-family: inherit;
		text-align: left;
		cursor: pointer;
	}

	.section-nav__mobile-label {
		display: block;
		font-size: var(--fs-meta);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--color-light);
	}

	.section-nav__mobile-value {
		display: block;
		font-size: 1.125rem;
		font-weight: 600;
		color: var(--color-ink);
	}

	.section-nav__mobile-chev {
		flex: 0 0 20px;
		height: 20px;
		color: var(--color-primary);
		transition: transform var(--transition-base);
	}

	.section-nav.is-open .section-nav__mobile-chev {
		transform: rotate(180deg);
	}

	.section-nav .section-nav__inner {
		display: none;
	}

	.section-nav.is-open .section-nav__inner {
		display: block;
		overflow-x: visible;
		background: var(--color-white);
		border-top: 1px solid var(--color-border);
		box-shadow: 0 16px 24px rgba(16, 19, 18, 0.08);
	}

	.section-nav.is-open .section-nav__list {
		display: block;
		padding: 0.375rem 0 0.625rem;
	}

	.section-nav.is-open .section-nav__list li {
		margin: 0;
		flex-shrink: initial;
	}

	.section-nav.is-open .section-nav__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.75rem 1.25rem;
		border-radius: 0;
		font-size: 1.125rem;
	}

	.section-nav.is-open .section-nav__link.is-active {
		background: none;
		color: var(--color-ink);
		font-weight: 650;
	}

	.section-nav.is-open .section-nav__link.is-active::after {
		content: '';
		flex: 0 0 8px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--color-primary);
	}

	.section-nav.is-open .section-nav__cta-item {
		margin-left: 0;
	}
}

/* -- Category products: stacked row cards, never half-width --- */

@media (max-width: 768px) {
	.category-section__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.875rem;
	}

	.category-product {
		width: 100%;
	}

	.category-product__link {
		display: flex;
		align-items: center;
		gap: 1rem;
		background: var(--color-white);
		border: 1px solid var(--color-border);
		border-radius: 10px;
		padding: 1rem;
	}

	.category-product__media {
		flex: 0 0 42%;
		margin: 0;
	}

	.category-product__title {
		flex: 1;
		margin: 0;
		font-size: 1.25rem;
		line-height: 1.3;
	}

	.category-product__sample {
		display: block;
		width: 100%;
		margin-top: 0.5rem;
		text-align: center;
	}
}

/* -- Generic mobile collapse (features bands, reusable) ------- */

/* Desktop: the toggle renders as the plain heading text — inert. */
.mobile-collapse__toggle {
	display: inline;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: default;
	pointer-events: none;
}

.mobile-collapse__icon {
	display: none;
}

@media (max-width: 768px) {
	.js-mobile-collapse .mobile-collapse__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		cursor: pointer;
		pointer-events: auto;
	}

	.mobile-collapse__icon {
		display: block;
		position: relative;
		flex: 0 0 20px;
		height: 20px;
	}

	.mobile-collapse__icon::before,
	.mobile-collapse__icon::after {
		content: '';
		position: absolute;
		inset: 0;
		margin: auto;
		background: var(--color-primary);
		transition: transform var(--transition-base);
	}

	.mobile-collapse__icon::before {
		width: 12px;
		height: 2px;
	}

	.mobile-collapse__icon::after {
		width: 2px;
		height: 12px;
	}

	.js-mobile-collapse.is-open .mobile-collapse__icon::after {
		transform: rotate(90deg);
	}

	.js-mobile-collapse .mobile-collapse__panel {
		display: none;
	}

	.js-mobile-collapse.is-open .mobile-collapse__panel {
		display: block;
		margin-top: 1rem;
	}
}

/* -- Jump-nav crossfade: land, don't strobe ------------------- */

/* motion.js adds .is-anchor-fading to <html> around section-nav jumps
   on every viewport: content fades out, the scroll lands instantly
   off-screen, and content fades back in. Only the main column fades —
   the header (and, on phones, the conversion bar) holds still, so the
   frame stays stable. */
.site-main {
	transition: opacity 220ms ease;
}

html.is-anchor-fading .site-main {
	opacity: 0;
}

/* ==========================================================================
   Upkeep picker — the visitor sets the annual wood-maintenance figure that
   both wood-vs-composite comparisons calculate from. Shared by the homepage
   module and the /composite-vs-wood/ page.
   ========================================================================== */

.upkeep {
	border: 0;
	margin: 0 0 var(--space-md);
	padding: 0;
	min-width: 0;
}

.upkeep__legend {
	padding: 0;
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--color-dark);
}

.upkeep__hint {
	margin: var(--space-xs) 0 var(--space-sm);
	color: var(--color-light);
	font-size: var(--fs-small, 0.9375rem);
	max-width: 52em;
}

.upkeep__options {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xs);
}

.upkeep__option {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	padding: var(--space-sm) var(--space-md);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	cursor: pointer;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.upkeep__option:hover {
	border-color: var(--color-primary);
}

.upkeep__option.is-selected {
	border-color: var(--color-primary);
	box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* The radio itself is redundant once the card reads as selected, but it
   stays in the DOM (never display:none) so it keeps keyboard focus and
   screen-reader semantics. */
.upkeep__option input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.upkeep__option:focus-within {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.upkeep__amount {
	font-size: 1.35em;
	font-weight: 600;
	color: var(--color-dark);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.upkeep__amount small {
	font-size: 0.6em;
	font-weight: 400;
	color: var(--color-light);
}

.upkeep__amount--input {
	display: flex;
	align-items: baseline;
	gap: 0.1em;
}

.upkeep__field {
	width: 5.5ch;
	font: inherit;
	font-size: 1em;
	color: inherit;
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--color-border);
	padding: 0 0 0.05em;
	font-variant-numeric: tabular-nums;
}

.upkeep__field:focus {
	outline: none;
	border-bottom-color: var(--color-primary);
}

.upkeep__label {
	color: var(--color-text);
	font-size: var(--fs-small, 0.9375rem);
	line-height: 1.35;
}

.cvw-cost__unit {
	margin: 0.2em 0 var(--space-sm);
	color: var(--color-light);
	font-size: var(--fs-small, 0.9375rem);
}

@media (min-width: 720px) {
	.upkeep__options {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	}
}

/*--------------------------------------------------------------
# Project Calculator (/calculator/ — page-calculator.php)
--------------------------------------------------------------

Unified estimating tool ported 2026-08-28 from the internal wiki's
project calculator (supersedes the two-tool /deck-calculator/ page,
whose styles above are kept for the offline kiosk). Source class names
(.ntw-*) are retained because js/project-calculator.js targets them;
the wiki's --ntw-* tokens are translated onto the theme tokens:

  --ntw-bg         -> --color-bg            (tinted fills)
  --ntw-surface    -> --color-white / --card-face
  --ntw-border     -> --color-border
  --ntw-text       -> --color-dark
  --ntw-muted      -> --color-light
  --ntw-brand      -> --color-primary
  --ntw-brand-dark -> --color-primary-dark
  --ntw-accent     -> --color-primary
  #e4f1df/#eef4f0  -> --color-primary-light
  --ntw-radius     -> --card-radius

Mobile-first; the reference table lives in an overflow-x container so
nothing swipes sideways on phones. Running copy respects the 1.5rem
body floor (var(--fs-body)); only badges/micro-labels use --fs-meta. */

/* One local rhythm for the whole tool. Every gap, pad and radius below
   resolves to a theme token through these six aliases, so the form card,
   the results panel and the reference table share a single scale instead
   of the ad-hoc 0.6/0.65/0.7/0.75/0.85/1.25rem values the port inherited. */
.ntw-project-calc {
	--pc-stack:  var(--space-md);                 /* 2rem   — between major blocks   */
	--pc-field:  calc(var(--space-md) * 0.75);    /* 1.5rem — between form fields    */
	--pc-tight:  var(--space-xs);                 /* 0.5rem — label -> control       */
	--pc-pad:    clamp(1.25rem, 3.5vw, var(--space-md)); /* card padding            */
	--pc-cell:   var(--space-sm);                 /* 1rem   — inner box padding      */
	--pc-inner-radius: var(--radius-sm);          /* everything inside a card        */
}

.project-calc {
	background-color: var(--color-white);
	padding-block: var(--space-lg) var(--space-xl);
}

/* Same rail as .page-hero__inner, so the form card's left edge lands
   directly under the "Project Calculator" headline instead of stepping in
   by 70-odd pixels. Also buys the reference table the width it needs to
   hold product names on one or two lines at the 1.5rem body floor. */
.project-calc__container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-inline: clamp(var(--space-md), 5.5vw, 7rem);
}

/* Display rules on .ntw-field etc. would otherwise beat the UA [hidden] style. */
.ntw-project-calc [hidden] {
	display: none !important;
}

.ntw-project-calc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-stack);
	align-items: start;
}

/* Wiki proportion: a fixed 25rem input column against a fluid results
   column roughly 1.7x its width, so the answer — not the form — is the
   dominant object on the page. */
@media (min-width: 980px) {
	.ntw-project-calc-layout {
		grid-template-columns: 25rem minmax(0, 1fr);
		gap: var(--space-lg);
	}
}

/* Form card ---------------------------------------------------- */

.ntw-calc-form {
	display: grid;
	gap: var(--pc-field);
}

.ntw-calc-form--card,
.ntw-calc-results {
	/* Identical padding on both cards is what makes their first lines sit on
	   the same baseline when the grid tops align. */
	padding: var(--pc-pad);
	background-color: var(--card-face);
	border: 1px solid var(--card-hairline);
	border-radius: var(--card-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ntw-calc-form--card {
	/* Pin the implicit column to the card width — otherwise it tracks the
	   widest <option> label and every control overflows the card. */
	grid-template-columns: minmax(0, 1fr);
}

.ntw-field {
	display: flex;
	flex-direction: column;
	gap: var(--pc-tight);
	min-width: 0;
}

/* Micro-label idiom, shared with the site's spec tables: small, uppercase,
   tracked, quiet. Keeps the 1.5rem controls unmistakably the loud element. */
.ntw-field > label,
#pc-mode-label {
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-light);
}

.ntw-field input,
.ntw-field select {
	width: 100%;
	min-width: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-dark);
	background-color: var(--color-bg);
	border: 1px solid transparent;
	border-radius: var(--pc-inner-radius);
	padding: var(--pc-cell);
	transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.ntw-field input:focus,
.ntw-field select:focus {
	outline: none;
	background-color: var(--color-white);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(0, 122, 51, 0.16);
}

.ntw-field-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-field);
}

/* Deliberately one column at every width. The form rail is a fixed 25rem, so
   splitting it in two clipped both controls at the theme's body size —
   "10% (recommended)" rendered as "10% (recor". Stacked, each select gets the
   full rail and nothing truncates. */

.ntw-field-row > .ntw-field {
	min-width: 0;
}

/* Mode toggle -------------------------------------------------- */

.ntw-segmented {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--color-border);
	border-radius: var(--pc-inner-radius);
	overflow: hidden;
	background-color: var(--color-white);
}

.ntw-segmented button {
	appearance: none;
	border: none;
	background: transparent;
	padding: var(--pc-cell) var(--space-xs);
	font-family: var(--font-primary);
	/* A toggle is chrome, not copy — the theme's control size keeps both
	   labels on one line so the two halves stay symmetrical. */
	font-size: var(--fs-nav);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ntw-segmented button + button {
	border-left: 1px solid var(--color-border);
}

.ntw-segmented button[aria-pressed="true"] {
	background-color: var(--color-primary-light);
	color: var(--color-primary-dark);
	font-weight: 600;
}

.ntw-segmented button:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px rgba(0, 122, 51, 0.25);
}

/* Selected-product chip ---------------------------------------- */

.ntw-sku-badge {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: var(--color-primary-dark);
	background-color: var(--color-primary-light);
	border: 1px solid rgba(0, 122, 51, 0.22);
	border-radius: var(--radius-sm);
	padding: 0.15rem 0.5rem;
	white-space: nowrap;
}

.ntw-selected-product {
	display: none;
	align-items: baseline;
	gap: var(--space-xs) var(--space-sm);
	flex-wrap: wrap;
	padding: var(--pc-cell);
	background-color: var(--color-bg);
	border-radius: var(--pc-inner-radius);
}

.ntw-selected-product.is-visible {
	display: flex;
}

.ntw-selected-product-name {
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-dark);
}

.ntw-selected-product-profile {
	font-size: var(--fs-meta);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-light);
}

/* Notes -------------------------------------------------------- */

.ntw-project-calc .ntw-calc-note {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-light);
}

/* Empty state -------------------------------------------------- */

.ntw-empty-state {
	padding: var(--space-lg) var(--space-md);
	text-align: center;
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-light);
	background-color: var(--color-bg-alt);
	border: 1px dashed var(--color-border);
	border-radius: var(--card-radius);
}

/* Results card ------------------------------------------------- */

.ntw-results-hero {
	background-color: var(--color-primary-light);
	border-radius: var(--pc-inner-radius);
	padding: calc(var(--pc-cell) * 1.25) calc(var(--pc-cell) * 1.5);
	margin-bottom: var(--pc-stack);
}

.ntw-results-hero-label {
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-primary-dark);
	margin-bottom: var(--pc-tight);
}

.ntw-results-hero-qty {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	flex-wrap: wrap;
	font-size: clamp(3rem, 4.4vw, 4.25rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.02;
	color: var(--color-primary-dark);
	font-variant-numeric: tabular-nums;
}

.ntw-results-hero-qty small {
	font-size: var(--fs-body);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--color-text);
}

.ntw-result-rows {
	margin: 0;
}

/* Phones: key on its line, figure beneath it on the right rail. Side by
   side at this width the key wrapped to three lines around the figure. */
.ntw-result-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: baseline;
	gap: var(--space-xs) var(--space-sm);
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--fs-body);
	line-height: 1.35;
}

/* Grid, not flex-wrap: when a long key needs two lines the value still
   holds the right edge instead of dropping to a line of its own, which is
   what made the three rows read as three different heights. */
@media (min-width: 560px) {
	.ntw-result-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.ntw-result-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.ntw-result-k {
	font-weight: 300;
	color: var(--color-text);
}

.ntw-result-v {
	justify-self: end;
	text-align: right;
	font-weight: 600;
	color: var(--color-dark);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Fasteners ---------------------------------------------------- */

.ntw-fastener-block {
	margin-top: var(--pc-stack);
	padding-top: var(--pc-stack);
	border-top: 1px solid var(--color-border);
}

.ntw-fastener-block h3 {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-primary);
	font-size: var(--fs-meta);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-primary);
}

.ntw-fastener-grid {
	display: grid;
	/* Two even boxes inside a 390px phone card... */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-sm);
	align-items: stretch;
}

/* ...and a lone third box spans rather than leaving a hole beside it. */
.ntw-fastener-cell:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Above phone width the row auto-fits: three even columns for siding,
   two for decking, always filling the panel. */
@media (min-width: 560px) {
	.ntw-fastener-grid {
		grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	}

	.ntw-fastener-cell:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

.ntw-fastener-cell {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	background-color: var(--color-bg);
	border-radius: var(--pc-inner-radius);
	padding: var(--pc-cell);
}

/* Two lines reserved so a wrapping caption ("Screws (face fastening)")
   cannot push its number below the numbers beside it. */
.ntw-fastener-k {
	min-height: 2.6em;
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-light);
}

.ntw-fastener-v {
	font-size: var(--fs-lead);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-dark);
	font-variant-numeric: tabular-nums;
}

.ntw-fastener-rec {
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-primary-dark);
	font-variant-numeric: tabular-nums;
}

.ntw-result-footnote {
	margin: var(--space-sm) 0 0;
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-light);
}

.ntw-fastener-block + .ntw-result-footnote {
	margin-top: var(--pc-stack);
}

/* Coverage reference table ------------------------------------- */

.ntw-calc-reference {
	margin-top: var(--space-lg);
}

.ntw-calc-reference summary {
	cursor: pointer;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--color-primary-dark);
	margin-bottom: var(--space-sm);
	transition: color var(--transition-fast);
}

.ntw-calc-reference summary:hover,
.ntw-calc-reference summary:focus-visible {
	color: var(--color-primary);
}

.ntw-calc-reference > .ntw-calc-note {
	margin-bottom: var(--space-md);
	max-width: 60ch;
}

/* Wide table scrolls inside its own container — the page body must
   never scroll horizontally on mobile. */
.ntw-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--color-border);
	border-radius: var(--card-radius);
	background-color: var(--color-white);
}

.ntw-ref-table {
	border-collapse: collapse;
	/* Fixed layout so the widths below are obeyed exactly. Auto layout sized
	   every column off its longest header and squeezed the two prose columns
	   into four-line stacks while the figure columns sat half empty. */
	table-layout: fixed;
	width: 100%;
	/* Below this the product names shred. Sits inside the ~1280px container
	   at 1440, so only phones and tablets scroll the table. */
	min-width: 64rem;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.4;
	color: var(--color-text);
}

.ntw-ref-table th,
.ntw-ref-table td {
	text-align: left;
	vertical-align: top;
	padding: var(--space-sm) calc(var(--space-sm) * 1.2);
	border-bottom: 1px solid var(--color-border);
}

.ntw-ref-table tr:last-child td {
	border-bottom: none;
}

.ntw-ref-table thead th {
	vertical-align: bottom;
	font-size: var(--fs-meta);
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-light);
	background-color: var(--color-bg-alt);
}

/* Six percentages that total exactly 100, so the columns hold the same
   proportions at 1024px (phone, scrolled) as at 1280 (desktop). Mixing rem
   and % here does not work: fixed layout hands the leftover space out in
   equal slabs, which quietly re-weights every column. Without any widths
   at all the browser sizes each column off its longest header and nothing
   lines up down the page. */
.ntw-ref-table th:nth-child(1) { width: 11%; }
.ntw-ref-table th:nth-child(2) { width: 29%; }
.ntw-ref-table th:nth-child(3) { width: 18%; }
.ntw-ref-table th:nth-child(4) { width: 14%; }
.ntw-ref-table th:nth-child(5),
.ntw-ref-table th:nth-child(6) { width: 14%; }

/* The figure headings wrap; only their cells stay on one line. Letting the
   headings run nowrap pushed the table 100px past its scroller. */
.ntw-ref-table thead th.ntw-num {
	white-space: normal;
}

.ntw-ref-table .ntw-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The length column carries "16 ft" and "8 ft (derived)". Its width never
   drops below ~7em, so the number and its unit cannot separate; letting the
   parenthetical drop to a second line is better than having it spill into
   the figure column, which is what nowrap does here under fixed layout. */
.ntw-ref-table .ntw-nowrap {
	white-space: normal;
}

.ntw-ref-table .ntw-ref-cat td {
	padding-block: calc(var(--space-sm) * 0.7);
	background-color: var(--color-primary-light);
	font-weight: 700;
	font-size: var(--fs-meta);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-primary-dark);
}

.ntw-ref-table .ntw-ref-name {
	font-weight: 600;
	color: var(--color-dark);
}