/*
Theme Name:   IMPERVITA Child
Theme URI:    https://impervita.com/
Description:  Astra child theme for IMPERVITA — a premium wellness, recovery, and longevity brand. Presentation only: design system, site chrome, and templates. Business logic lives in the impervita-core plugin.
Author:       IMPERVITA
Author URI:   https://impervita.com/
Template:     astra
Version:      1.3.2
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  impervita-child
Tags:         woocommerce, custom-colors, custom-menu, full-width-template
*/

/* =============================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Neutrals — warm rather than blue, so the ivory reads as stone not paper */
	--imp-obsidian: #0b0c0e;
	--imp-charcoal: #16181b;
	--imp-graphite: #24272b;
	--imp-slate: #3a3e43;
	--imp-stone: #62656a;
	--imp-mist: #8b8880;
	--imp-sand: #ddd5c5;
	--imp-linen: #e7e2d9;
	--imp-shell: #efeae1;
	--imp-ivory: #f5f2ec;
	--imp-cream: #fbf9f5;
	--imp-white: #ffffff;

	/* Accent — champagne metallic, used sparingly and never as a fill.
	   `--imp-champagne` is a DECORATIVE value: at 2.8:1 on ivory it may draw a
	   rule, a border, or a glow, but it must never carry text on a light
	   ground. `--imp-champagne-deep` is the text-safe variant, measured against
	   the DARKEST warm ground the system paints (`--imp-shell`, the sunken
	   band): 5.0:1 there, 5.3:1 on ivory, 5.7:1 on cream. `--imp-champagne-soft`
	   is the on-dark variant. Deepen further before lightening any ground. */
	--imp-champagne: #b08d4f;
	--imp-champagne-light: #c8a96a;
	--imp-champagne-soft: #e3d2ae;
	--imp-champagne-deep: #7d5f1f;
	--imp-sage: #77857a;
	--imp-sage-deep: #4b5750;
	--imp-sage-soft: #b9c6bb;

	/* Type */
	--imp-display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
	--imp-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Rhythm */
	--imp-unit: 8px;
	--imp-gutter: clamp(20px, 5vw, 64px);
	--imp-max: 1360px;
	--imp-max-text: 68ch;
	--imp-section-y: clamp(64px, 9vw, 132px);

	/* Motion */
	--imp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--imp-fast: 180ms;
	--imp-slow: 520ms;

	/* Elevation — barely-there, luxury interfaces do not float */
	--imp-shadow-sm: 0 1px 2px rgba(11, 12, 14, 0.05);
	--imp-shadow-md: 0 18px 40px -28px rgba(11, 12, 14, 0.45);
	--imp-shadow-lg: 0 40px 80px -48px rgba(11, 12, 14, 0.55);

	--imp-radius: 2px;
	--imp-radius-lg: 3px;

	--imp-header-h: 76px;
}

/* -----------------------------------------------------------------------------
   1b. Semantic tokens — the layer every component should paint from
   -----------------------------------------------------------------------------
   Components reference these, never the raw palette above. That is what lets a
   division (or a future IMPERVITA Health section) change temperature by
   re-pointing a handful of custom properties instead of forking a stylesheet.

   The brand target is roughly 60% warm light ground, 30% obsidian/charcoal,
   10% champagne. Dark is an emphasis device — hero, premium CTA bands, footer,
   featured technology, logo presentation, select storytelling — not the default
   canvas.
   -------------------------------------------------------------------------- */

:root {
	/* Grounds */
	--imp-surface: var(--imp-cream);
	--imp-surface-alt: var(--imp-ivory);
	--imp-surface-sunken: var(--imp-shell);
	--imp-surface-raised: var(--imp-white);
	--imp-surface-inverse: var(--imp-obsidian);
	--imp-surface-inverse-alt: var(--imp-charcoal);

	/* Ink on light grounds */
	--imp-text-primary: var(--imp-obsidian);
	--imp-text-secondary: var(--imp-slate);
	--imp-text-muted: var(--imp-stone);

	/* Ink on dark grounds — all at or above 4.5:1 on obsidian */
	--imp-text-on-dark: rgba(245, 242, 236, 0.88);
	--imp-text-on-dark-secondary: rgba(245, 242, 236, 0.74);
	--imp-text-on-dark-muted: rgba(245, 242, 236, 0.66);
	--imp-heading-on-dark: var(--imp-cream);

	/* Accent, split by ground so contrast can never be lost by reuse */
	--imp-accent: var(--imp-champagne);
	--imp-accent-on-light: var(--imp-champagne-deep);
	--imp-accent-on-dark: var(--imp-champagne-soft);
	--imp-accent-muted: var(--imp-sage-deep);

	/* Rules and hairlines */
	--imp-rule: rgba(11, 12, 14, 0.12);
	--imp-rule-soft: rgba(11, 12, 14, 0.08);
	--imp-rule-on-dark: rgba(251, 249, 245, 0.14);
	--imp-rule-accent: rgba(176, 141, 79, 0.5);
}

/* -----------------------------------------------------------------------------
   1c. Division themes
   -----------------------------------------------------------------------------
   One master brand, three divisions. A division wrapper re-points semantic
   tokens only — the logo, the display face, the rhythm, and every component
   stay identical, which is the whole point of the token layer.

   IMPERVITA Wellness  — the live storefront. Warm ivory, champagne, stone.
   IMPERVITA Health    — planned telehealth/clinical. Cleaner, more white space,
                         restrained charcoal, muted mineral accent. Declared
                         now so those pages can be built later without a
                         redesign. NOTHING on the live site uses it yet, and it
                         asserts no clinical capability by existing.
   IMPERVITA Pro       — commercial buyers. Squarer, more structured, charcoal.
   -------------------------------------------------------------------------- */

.imp-div--wellness {
	--imp-surface: var(--imp-cream);
	--imp-surface-alt: var(--imp-ivory);
	--imp-surface-sunken: var(--imp-shell);
	--imp-surface-inverse: var(--imp-obsidian);
	--imp-accent: var(--imp-champagne);
	--imp-accent-on-light: var(--imp-champagne-deep);
	--imp-accent-on-dark: var(--imp-champagne-soft);
}

.imp-div--health {
	--imp-surface: var(--imp-white);
	--imp-surface-alt: var(--imp-cream);
	--imp-surface-sunken: var(--imp-ivory);
	--imp-surface-inverse: var(--imp-charcoal);
	--imp-accent: var(--imp-sage);
	--imp-accent-on-light: var(--imp-sage-deep);
	--imp-accent-on-dark: var(--imp-sage-soft);
	--imp-rule: rgba(11, 12, 14, 0.09);
	--imp-rule-accent: rgba(119, 133, 122, 0.5);
	--imp-section-y: clamp(76px, 10vw, 148px);
	--imp-max-text: 64ch;
}

.imp-div--pro {
	--imp-surface: var(--imp-ivory);
	--imp-surface-alt: var(--imp-shell);
	--imp-surface-sunken: var(--imp-linen);
	--imp-surface-inverse: var(--imp-charcoal);
	--imp-radius: 0;
	--imp-radius-lg: 0;
	--imp-section-y: clamp(56px, 7.5vw, 112px);
}

/* =============================================================================
   2. Base — overriding Astra where the default fights the design
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

html,
body {
	overflow-x: clip;
}

body.imp {
	font-family: var(--imp-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--imp-charcoal);
	background: var(--imp-surface);
	-webkit-font-smoothing: antialiased;
	letter-spacing: 0.005em;
}

body.imp h1,
body.imp h2,
body.imp h3,
body.imp h4 {
	font-family: var(--imp-display);
	font-weight: 400;
	letter-spacing: -0.012em;
	line-height: 1.08;
	color: var(--imp-text-primary);
}

body.imp h1 {
	font-size: clamp(2.6rem, 5.2vw, 4.4rem);
}

body.imp h2 {
	font-size: clamp(2rem, 3.6vw, 3rem);
}

body.imp h3 {
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
}

body.imp p {
	max-width: var(--imp-max-text);
}

body.imp a {
	color: var(--imp-charcoal);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.imp a:hover {
	color: var(--imp-accent-on-light);
}

/* Astra paints its own site container; IMPERVITA sections manage their own. */
body.imp .site-content,
body.imp #content,
body.imp .ast-container {
	background: transparent;
}

body.imp .ast-plain-container.ast-no-sidebar #primary {
	margin: 0;
	padding: 0;
}

body.imp .entry-content > * {
	margin-inline: auto;
}

/* Full-bleed rail for designed sections, regardless of Astra's container. */
.imp-hero,
.imp-trust,
.imp-section,
.imp-footer,
.imp-plan {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: auto;
	max-width: none;
}

.imp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--imp-obsidian);
	color: var(--imp-cream);
}

.imp-skip:focus {
	left: 12px;
	top: 12px;
}

/* Astra prints its own skip link; two in a row is noise for screen-reader and
   keyboard users, and ours targets the right landmark. */
body.imp a.skip-link {
	display: none !important;
}

.imp-no-scroll {
	overflow: hidden;
}

/* The `hidden` attribute is only `display: none` in the user-agent stylesheet,
   so ANY author `display` declaration silently defeats it — the element keeps
   rendering while JavaScript happily reports it as hidden. Every overlay below
   sets its own display value, so each one needs the attribute restated at
   author level or it can never be dismissed. */
.imp-concierge__panel[hidden],
.imp-compare-drawer[hidden],
.imp-sticky-cta[hidden] {
	display: none;
}

/* =============================================================================
   3. Primitives
   ========================================================================== */

.imp-eyebrow {
	font-family: var(--imp-sans);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--imp-accent-on-light);
	margin: 0 0 14px;
}

.imp-eyebrow--light {
	color: var(--imp-accent-on-dark);
}

.imp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border: 1px solid transparent;
	border-radius: var(--imp-radius);
	background: var(--imp-obsidian);
	color: var(--imp-cream);
	font-family: var(--imp-sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background var(--imp-fast) var(--imp-ease), color var(--imp-fast) var(--imp-ease), border-color var(--imp-fast) var(--imp-ease), transform var(--imp-fast) var(--imp-ease);
}

.imp-btn:hover {
	background: var(--imp-graphite);
	color: var(--imp-white);
	transform: translateY(-1px);
}

.imp-btn--ghost {
	background: transparent;
	color: var(--imp-charcoal);
	border-color: rgba(11, 12, 14, 0.22);
}

.imp-btn--ghost:hover {
	background: transparent;
	border-color: var(--imp-champagne);
	color: var(--imp-accent-on-light);
}

.imp-btn--light {
	background: transparent;
	color: var(--imp-cream);
	border-color: rgba(251, 249, 245, 0.42);
}

.imp-btn--light:hover {
	background: rgba(251, 249, 245, 0.1);
	color: var(--imp-white);
	border-color: var(--imp-champagne-soft);
}

.imp-btn--large {
	padding: 18px 38px;
	font-size: 0.84rem;
}

.imp-btn--small {
	padding: 11px 20px;
	font-size: 0.72rem;
}

.imp-btn--block {
	width: 100%;
}

.imp-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--imp-accent-on-light);
	text-decoration: none;
	border-bottom: 1px solid rgba(176, 141, 79, 0.32);
	padding-bottom: 3px;
	transition: border-color var(--imp-fast) var(--imp-ease);
}

.imp-link:hover {
	border-bottom-color: var(--imp-champagne);
	color: var(--imp-accent-on-light);
}

.imp-tag,
.imp-badge {
	display: inline-block;
	padding: 6px 11px;
	border: 1px solid rgba(11, 12, 14, 0.14);
	border-radius: var(--imp-radius);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--imp-stone);
	background: transparent;
}

.imp-badge {
	background: rgba(251, 249, 245, 0.94);
	color: var(--imp-charcoal);
	border-color: rgba(11, 12, 14, 0.1);
}

.imp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.imp-disclaimer {
	max-width: var(--imp-max-text);
	margin: 32px auto 0;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--imp-stone);
	border-top: 1px solid rgba(11, 12, 14, 0.1);
	padding-top: 16px;
}

.imp-notice {
	border: 1px solid rgba(11, 12, 14, 0.12);
	border-left: 2px solid var(--imp-champagne);
	background: var(--imp-ivory);
	padding: 22px 26px;
	margin: 28px 0;
	border-radius: var(--imp-radius);
}

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

.imp-editor-note {
	border: 1px dashed var(--imp-champagne);
	background: rgba(227, 210, 174, 0.16);
	padding: 18px 22px;
	margin: 0 0 28px;
	font-size: 0.86rem;
	color: var(--imp-slate);
	border-radius: var(--imp-radius);
}

/* =============================================================================
   4. Header
   ========================================================================== */

.imp-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(251, 249, 245, 0.82);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid rgba(11, 12, 14, 0.07);
	transition: transform var(--imp-slow) var(--imp-ease), background var(--imp-fast) var(--imp-ease), box-shadow var(--imp-fast) var(--imp-ease);
}

.imp-header.is-stuck {
	box-shadow: var(--imp-shadow-sm);
	background: rgba(251, 249, 245, 0.96);
}

.imp-header.is-hidden {
	transform: translateY(-100%);
}

.imp-header__inner {
	max-width: var(--imp-max);
	margin: 0 auto;
	padding: 0 var(--imp-gutter);
	min-height: var(--imp-header-h);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 28px;
}

.imp-header__brand {
	display: flex;
	align-items: center;
}

.imp-brand {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

/* Size and colour only — the typographic treatment lives in .imp-wordmark
   (section 37) so the header and the footer cannot drift apart. */
.imp-brand__word {
	font-size: 1.3rem;
	color: var(--imp-obsidian);
}

.imp-brand__logo {
	max-height: 42px;
	width: auto;
}

.imp-burger {
	display: none;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	color: var(--imp-charcoal);
}

.imp-burger__lines {
	display: block;
	width: 22px;
}

.imp-burger__lines span {
	display: block;
	height: 1px;
	background: currentColor;
	margin: 6px 0;
}

/* Nav ---------------------------------------------------------------------- */

.imp-nav {
	justify-self: center;
}

.imp-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 34px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.imp-nav__item {
	position: static;
	display: flex;
	align-items: center;
}

.imp-nav__link {
	display: inline-block;
	padding: 26px 0;
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--imp-charcoal);
	text-decoration: none;
	position: relative;
}

.imp-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 20px;
	height: 1px;
	background: var(--imp-champagne);
	transition: right var(--imp-fast) var(--imp-ease);
}

.imp-nav__item:hover .imp-nav__link::after,
.imp-nav__item.is-open .imp-nav__link::after,
.imp-nav__item.is-current .imp-nav__link::after {
	right: 0;
}

.imp-nav__toggle {
	background: none;
	border: 0;
	padding: 0 0 0 6px;
	cursor: pointer;
	color: var(--imp-stone);
	display: inline-flex;
	align-items: center;
}

.imp-nav__chevron {
	width: 6px;
	height: 6px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--imp-fast) var(--imp-ease);
}

.imp-nav__item.is-open .imp-nav__chevron {
	transform: rotate(-135deg) translate(-3px, -3px);
}

/* Mega panel --------------------------------------------------------------- */

.imp-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--imp-cream);
	border-top: 1px solid rgba(11, 12, 14, 0.07);
	border-bottom: 1px solid rgba(11, 12, 14, 0.07);
	box-shadow: var(--imp-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--imp-fast) var(--imp-ease), transform var(--imp-fast) var(--imp-ease), visibility var(--imp-fast);
	z-index: 210;
}

.imp-nav__item.is-open > .imp-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.imp-mega__inner {
	max-width: var(--imp-max);
	margin: 0 auto;
	padding: 40px var(--imp-gutter) 46px;
}

.imp-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 6px 32px;
}

.imp-mega__link {
	display: block;
	padding: 11px 0;
	font-family: var(--imp-display);
	font-size: 1.15rem;
	color: var(--imp-charcoal);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--imp-fast) var(--imp-ease), border-color var(--imp-fast) var(--imp-ease);
}

.imp-mega__link:hover {
	color: var(--imp-accent-on-light);
	border-bottom-color: rgba(176, 141, 79, 0.3);
}

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

.imp-utils {
	display: flex;
	align-items: center;
	gap: 4px;
	justify-self: end;
}

.imp-util {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--imp-charcoal);
	cursor: pointer;
	text-decoration: none;
	border-radius: 50%;
	transition: background var(--imp-fast) var(--imp-ease), color var(--imp-fast) var(--imp-ease);
}

.imp-util:hover {
	background: rgba(11, 12, 14, 0.05);
	color: var(--imp-accent-on-light);
}

.imp-util__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: transparent;
	color: var(--imp-stone);
	font-size: 0.62rem;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}

.imp-util__count.is-filled {
	background: var(--imp-champagne);
	color: var(--imp-white);
}

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

.imp-header__search {
	border-top: 1px solid rgba(11, 12, 14, 0.07);
	background: var(--imp-cream);
}

.imp-header__search-inner {
	max-width: var(--imp-max);
	margin: 0 auto;
	padding: 22px var(--imp-gutter) 26px;
}

.imp-search {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: center;
}

.imp-search__input {
	flex: 1;
	padding: 14px 16px;
	border: 1px solid rgba(11, 12, 14, 0.16);
	border-radius: var(--imp-radius);
	background: var(--imp-white);
	font-family: var(--imp-sans);
	font-size: 0.95rem;
	color: var(--imp-charcoal);
}

.imp-search__submit {
	padding: 14px 22px;
	border: 1px solid var(--imp-obsidian);
	border-radius: var(--imp-radius);
	background: var(--imp-obsidian);
	color: var(--imp-cream);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.imp-search__results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--imp-white);
	border: 1px solid rgba(11, 12, 14, 0.1);
	box-shadow: var(--imp-shadow-md);
	border-radius: var(--imp-radius);
	padding: 10px;
	max-height: 60vh;
	overflow-y: auto;
	z-index: 220;
}

.imp-search__group {
	margin: 10px 10px 6px;
	font-size: 0.64rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--imp-accent-on-light);
}

.imp-search__item {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 10px;
	text-decoration: none;
	color: var(--imp-charcoal);
	border-radius: var(--imp-radius);
}

.imp-search__item:hover {
	background: var(--imp-ivory);
}

.imp-search__item-meta {
	color: var(--imp-stone);
	font-size: 0.82rem;
	white-space: nowrap;
}

.imp-search__all,
.imp-search__empty {
	display: block;
	padding: 12px 10px;
	font-size: 0.85rem;
	color: var(--imp-stone);
}

/* =============================================================================
   5. Drawers
   ========================================================================== */

.imp-drawer {
	position: fixed;
	inset: 0;
	z-index: 400;
}

.imp-drawer__scrim {
	position: absolute;
	inset: 0;
	border: 0;
	padding: 0;
	background: rgba(11, 12, 14, 0.42);
	opacity: 0;
	transition: opacity var(--imp-fast) var(--imp-ease);
	cursor: default;
}

.imp-drawer.is-open .imp-drawer__scrim {
	opacity: 1;
}

.imp-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(420px, 88vw);
	background: var(--imp-cream);
	display: flex;
	flex-direction: column;
	box-shadow: var(--imp-shadow-lg);
	transition: transform var(--imp-slow) var(--imp-ease);
	z-index: 1;
}

.imp-drawer--menu .imp-drawer__panel {
	left: 0;
	transform: translateX(-100%);
}

.imp-drawer--cart .imp-drawer__panel {
	right: 0;
	transform: translateX(100%);
}

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

.imp-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px;
	border-bottom: 1px solid rgba(11, 12, 14, 0.08);
}

.imp-drawer__title {
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--imp-stone);
}

.imp-drawer__close {
	background: none;
	border: 0;
	font-size: 1.7rem;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer;
	color: var(--imp-charcoal);
}

.imp-drawer__search {
	padding: 18px 24px 4px;
}

.imp-drawer__nav {
	flex: 1;
	overflow-y: auto;
	padding: 12px 24px 24px;
}

.imp-drawer__foot {
	padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(11, 12, 14, 0.08);
}

.imp-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px;
}

/* Mobile nav accordions */

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

.imp-mobile-nav .imp-nav__item {
	display: block;
	position: relative;
	border-bottom: 1px solid rgba(11, 12, 14, 0.07);
}

.imp-mobile-nav .imp-nav__link {
	padding: 18px 0;
	font-size: 0.82rem;
	display: block;
}

.imp-mobile-nav .imp-nav__link::after {
	display: none;
}

.imp-mobile-nav .imp-nav__toggle {
	position: absolute;
	top: 8px;
	right: 0;
	width: 44px;
	height: 44px;
	justify-content: center;
}

.imp-mobile-nav .imp-mega {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	background: transparent;
	display: none;
}

.imp-mobile-nav .imp-nav__item.is-open > .imp-mega {
	display: block;
}

.imp-mobile-nav .imp-mega__inner {
	padding: 0 0 14px 14px;
}

.imp-mobile-nav .imp-mega__list {
	grid-template-columns: 1fr;
	gap: 0;
}

.imp-mobile-nav .imp-mega__link {
	font-size: 1rem;
	padding: 12px 0;
}

/* =============================================================================
   6. Hero
   ========================================================================== */

.imp-hero {
	position: relative;
	min-height: clamp(560px, 82vh, 860px);
	display: flex;
	align-items: flex-end;
	color: var(--imp-cream);
	overflow: hidden;
	isolation: isolate;
}

.imp-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(120% 90% at 78% 18%, rgba(176, 141, 79, 0.24) 0%, rgba(176, 141, 79, 0) 58%),
		radial-gradient(90% 70% at 12% 88%, rgba(119, 133, 122, 0.2) 0%, rgba(119, 133, 122, 0) 62%),
		linear-gradient(168deg, #14161a 0%, #0b0c0e 52%, #191b1f 100%);
}

/* A quiet architectural rhythm in place of stock photography. Replace this
   block with a real image when brand photography exists. */
.imp-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(90deg, rgba(251, 249, 245, 0.05) 1px, transparent 1px),
		linear-gradient(0deg, rgba(251, 249, 245, 0.028) 1px, transparent 1px);
	background-size: clamp(90px, 9vw, 150px) clamp(90px, 9vw, 150px);
	mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
}

.imp-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(11, 12, 14, 0.1) 0%, rgba(11, 12, 14, 0.42) 62%, rgba(11, 12, 14, 0.78) 100%);
}

.imp-hero__inner {
	width: 100%;
	max-width: var(--imp-max);
	margin: 0 auto;
	padding: 0 var(--imp-gutter) clamp(56px, 8vw, 104px);
}

.imp-hero__title {
	color: var(--imp-cream);
	max-width: 15ch;
	margin: 0 0 22px;
	font-weight: 300;
}

.imp-hero__copy {
	color: rgba(245, 242, 236, 0.82);
	font-size: clamp(1.02rem, 1.5vw, 1.2rem);
	max-width: 46ch;
	margin: 0 0 36px;
}

.imp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.imp-hero .imp-btn--primary {
	background: var(--imp-cream);
	color: var(--imp-obsidian);
}

.imp-hero .imp-btn--primary:hover {
	background: var(--imp-white);
}

/* -----------------------------------------------------------------------------
   6b. Hero product showcase
   -----------------------------------------------------------------------------
   The right half of the hero was empty ground. It now carries a slow crossfade
   through the three technologies IMPERVITA sells - massage chair, sauna, cold
   plunge - one product at a time, so the hero reads as a catalogue rather than
   as a chair shop. There is no carousel furniture: no arrows, dots, counters,
   labels or captions, and nothing here is interactive.

   Each product was cut out of its studio white, graded to the SAME key light
   (upper right, warm) and placed on the SAME baseline and centre line at the
   same scale, with its bottom faded to transparent in the asset itself. That
   is what lets a plain opacity crossfade read as one object dissolving into
   the next instead of a slideshow swapping frames - the light and the ground
   never move, only the object does.

   STACKING: the layer is `z-index: -1` and follows `.imp-hero__media` (-2) in
   source order, so it paints above the media grid and its scrim but below the
   non-positioned copy in `.imp-hero__inner`. That is why no z-index had to be
   added to the copy - do not "tidy" this to a positive z-index, it would put
   the composition over the headline. `.imp-hero` already sets
   `isolation: isolate`, which keeps the negative layer inside the hero.

   GRID: the box is aligned to the SAME container as the copy -
   `min(--imp-max, 100% - 2 gutters)`, right edge - so the composition sits on
   the page grid instead of drifting to the viewport edge on wide screens.
   `background-size: contain` then fits each slide to whichever of width or
   height runs out first, which is what stops a short laptop viewport from
   cropping a product's base.

   The assets are WebP only, deliberately. A PNG fallback could never be
   reached: this layer already requires `mask-image`, `image-set`-era CSS,
   `min()` and `clamp()`, all of which postdate WebP in every engine - and six
   PNG fallbacks would have added ~6MB to the theme for nobody.
   -------------------------------------------------------------------------- */

.imp-hero__product {
	position: absolute;
	z-index: -1;
	top: var(--imp-header-h);
	bottom: 0;
	/* Start the composition one full copy-column in from the container's left
	   edge. The CTA row is ~695px wide and must never be crossed, so the
	   offset is measured from the CONTAINER, not the viewport - on a 1920
	   screen the copy starts 280px in, and a viewport-relative offset would
	   put the chair straight through the second button. */
	left: calc(max(var(--imp-gutter), (100% - var(--imp-max)) / 2) + 712px);
	right: max(var(--imp-gutter), calc((100% - var(--imp-max)) / 2));
	width: auto;
	pointer-events: none;
	/* The warm pools live on the WRAPPER, not on a slide, so the light stays
	   put while the products dissolve through it. A child always paints above
	   its parent's background, which is exactly the layering wanted here. */
	background-image:
		radial-gradient(52% 40% at 60% 70%, rgba(176, 141, 79, 0.15) 0%, rgba(176, 141, 79, 0) 68%),
		radial-gradient(38% 34% at 72% 26%, rgba(227, 210, 174, 0.085) 0%, rgba(227, 210, 174, 0) 70%);
	background-repeat: no-repeat;
	background-position: center, center;
	background-size: 100% 100%, 100% 100%;
	/* Feather the edge nearest the copy so the cut-out can never read as a
	   pasted rectangle, whatever the viewport does to the gap. A mask applies
	   to descendants too, so every slide inherits this for free. */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 12%, #000 34%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 12%, #000 34%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* Every slide is graded to the same key light and sits on the same baseline,
   so the crossfade reads as one object dissolving into the next rather than
   as a slideshow changing frames. */
.imp-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: contain;
	transition: opacity 1500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.imp-hero__slide.is-active {
	opacity: 1;
}

/* The first product is painted straight from CSS: it must be on screen when
   the hero renders, with no JavaScript round-trip. The other two carry no
   image until the script commits to running the cycle, so a visitor who never
   sees it - reduced motion, or no JS - never downloads them. */
.imp-hero__slide--chair {
	background-image: url("assets/img/hero-slide-chair.webp");
}

.imp-hero__product.is-cycling .imp-hero__slide--sauna {
	background-image: url("assets/img/hero-slide-sauna.webp");
}

.imp-hero__product.is-cycling .imp-hero__slide--plunge {
	background-image: url("assets/img/hero-slide-plunge.webp");
}

/* Reduced motion: one product, no movement. The script already declines to
   start, so `.is-cycling` never lands and slides 2 and 3 stay imageless -
   these rules are the belt to that braces, in case the class is ever set by
   something else. */
@media (prefers-reduced-motion: reduce) {
	.imp-hero__slide {
		transition: none;
	}

	.imp-hero__slide:not(.imp-hero__slide--chair) {
		display: none;
	}
}

/* CASCADE: `.imp-hero__copy` is authored at `max-width: 46ch` (0,1,0), but
   section 2's `body.imp p { max-width: var(--imp-max-text) }` is (0,1,2) and
   has been winning since it was written - the hero paragraph has always
   measured 68ch, ~823px at 1440, not the 46ch the hero asked for. That is a
   100-character line, and it now also runs straight through the composition.

   Restated at (0,2,1) so the hero's own intent lands, and capped in absolute
   units for the side-by-side layout so the column cannot grow back into the
   product as the viewport widens. The stacked layout below has the full width
   to itself and keeps the inherited measure. This changes the measure of the
   paragraph, never its words. */
@media (min-width: 1181px) {
	body.imp .imp-hero__copy {
		max-width: min(46ch, 30rem);
	}
}

/* Below 1181px: side-by-side would put the product under the copy - at 1024 the
   CTA row alone is 75% of the container - so the hero stacks: composition in a
   band at the top, copy and CTAs keep the bottom, which is where they already
   sit. The narrower assets are used because the products are illegible at this
   size otherwise. */
@media (max-width: 1180px) {
	body.imp .imp-hero {
		min-height: clamp(600px, 86vh, 940px);
	}

	.imp-hero__product {
		top: calc(var(--imp-header-h) + 10px);
		bottom: auto;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		width: min(var(--imp-max), calc(100% - 2 * var(--imp-gutter)));
		height: clamp(180px, 27vh, 330px);
		/* Stacked, the copy sits directly beneath the composition, so the fade
		   runs along the bottom edge instead of the left one. */
		-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
	}

	.imp-hero__slide--chair {
		background-image: url("assets/img/hero-slide-chair-sm.webp");
	}

	.imp-hero__product.is-cycling .imp-hero__slide--sauna {
		background-image: url("assets/img/hero-slide-sauna-sm.webp");
	}

	.imp-hero__product.is-cycling .imp-hero__slide--plunge {
		background-image: url("assets/img/hero-slide-plunge-sm.webp");
	}
}

/* At 782px and below the advisor tab leaves the right-hand rail and parks
   horizontally at `bottom: 76px`, ~41px tall - it now owns the band 117px up
   from the bottom of the VIEWPORT, at every scroll position. The hero's copy
   block is bottom-anchored inside the hero, so a min-height that pushes the
   hero past `100vh - 152px` drops the second CTA underneath that chip at
   scroll-top; measured at 360x760, "Design Your Reco..." vanished behind it.

   Both rules below are one height budget: the hero takes the height it wants
   or the height the tab leaves it, whichever is smaller, and the composition
   then takes whatever the copy block has not claimed. On a short phone the
   `calc` wins and the visual yields - the headline and CTAs come first. */
@media (max-width: 782px) {
	body.imp .imp-hero {
		min-height: min(clamp(600px, 86vh, 940px), calc(100vh - 152px));
	}

	.imp-hero__product {
		height: min(clamp(140px, 24vh, 320px), calc(100vh - 616px));
	}
}

@media (max-width: 480px) {
	.imp-hero__slide {
		background-position: center bottom;
	}
}

/* The composition is decoration. If the viewport is too short to hold both it
   and the copy, the copy wins. */
@media (max-height: 620px) and (max-width: 1180px) {
	.imp-hero__product {
		display: none;
	}
}

/* =============================================================================
   7. Service assurance band
   -----------------------------------------------------------------------------
   The band directly under the homepage hero. It was a 57px strip of bare
   uppercase labels, which read as a leftover utility rail rather than a
   statement: three service promises with nothing supporting them, squeezed
   between a full-height hero and the outcome grid.

   It is now a service assurance band — icon, title, hairline, one supporting
   sentence per column — at roughly 235px tall on desktop. That is deliberately
   short of a feature section: `--imp-section-y` is 64-132px per side, this is
   34-52px, so the band still reads as a rail attached to the hero rather than
   as the page's second section.

   Ground stays `--imp-surface-inverse`, unbroken from the hero above it, and
   the only division between the two is a champagne hairline. Type is spans, not
   headings, so none of the h1-h4 base rules in section 2 — and none of the type
   hierarchy work in sections 28/39/40 — reaches into this component.

   SPECIFICITY: every rule that sets the box of the `ul` or its `li` children is
   written `body.imp …` (0,2,1) rather than as a bare class (0,1,0). Astra's
   dynamic inline CSS emits

       .entry-content ul, .entry-content ol { padding: revert; margin: revert;
                                              padding-left: 20px; }

   which is (0,1,1) AND prints after this stylesheet, so a single-class rule
   loses on both counts. Measured with bare classes, `margin: revert` dropped
   the `auto` that centres the band and `padding: revert` dropped its vertical
   padding: the band came out 150px tall at 1440px with its first column hard
   against x=20 instead of 236px tall and centred on the 1360px rail. This is
   the same trap as sections 26, 31 and 33. Do NOT simplify these selectors
   back to single classes.
   ========================================================================== */

.imp-trust {
	--imp-trust-gap: clamp(28px, 3.4vw, 56px);

	position: relative;
	background: var(--imp-surface-inverse);
	color: var(--imp-text-on-dark-secondary);
	border-bottom: 1px solid var(--imp-rule-on-dark);
}

/* The band and the hero share a ground, so the join needs a line rather than a
   colour change. Champagne at the centre, faded to nothing at both ends, so it
   reads as a drawn rule and not as a border. */
.imp-trust::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--imp-rule-accent) 24%,
		var(--imp-rule-accent) 76%,
		transparent
	);
}

body.imp .imp-trust__list {
	max-width: var(--imp-max);
	margin: 0 auto;
	padding: clamp(34px, 3.6vw, 52px) var(--imp-gutter);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--imp-trust-gap);
	list-style: none;
}

body.imp .imp-trust__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Vertical divider, sitting in the middle of the grid gutter. Hidden on the
   first column of every row, so an administrator enabling a fourth or fifth
   assurance wraps to a second row without a rule hanging off its left edge. */
body.imp .imp-trust__item::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: calc(var(--imp-trust-gap) / -2);
	width: 1px;
	background: linear-gradient(
		180deg,
		transparent,
		var(--imp-rule-accent) 28%,
		var(--imp-rule-accent) 72%,
		transparent
	);
}

body.imp .imp-trust__item:nth-child(3n + 1)::before {
	display: none;
}

.imp-trust__icon {
	display: flex;
	flex: none;
	color: var(--imp-accent-on-dark);
}

.imp-trust__icon svg {
	display: block;
	width: 26px;
	height: 26px;
}

.imp-trust__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.imp-trust__title {
	display: block;
	font-family: var(--imp-sans);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--imp-heading-on-dark);
}

/* Decorative only — champagne at 2.8:1 is a rule value, never a text value. */
.imp-trust__rule {
	display: block;
	width: 30px;
	height: 1px;
	background: var(--imp-accent);
}

.imp-trust__copy {
	display: block;
	max-width: 40ch;
	font-size: 0.92rem;
	font-weight: 300;
	line-height: 1.65;
	letter-spacing: 0.005em;
	color: var(--imp-text-on-dark-secondary);
	text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
   Motion — one staggered rise as the band enters the viewport.

   Driven by the shared reveal observer in assets/js/impervita-theme.js, which
   adds `.is-revealed` on intersection. The hidden state, however, is owned by
   CSS and gated on `.imp-js` — stamped on <html> by the inline snippet in
   functions.php, in the <head>, before first paint.

   That gate is the repair. While the hidden state was gated on `.imp-reveal`
   instead — a class the reveal script only adds at DOMContentLoaded — the band
   painted finished and fully visible first, for ~150ms on a fast load and
   ~850ms under CPU throttling, then blanked and faded back in. Worse: the band
   sits inside the first viewport on any window taller than ~980px and on every
   layout below 900px, so the observer's initial notification landed in that
   same moment. The whole sequence ran, and unobserved itself, during page load
   — and scrolling the band into view afterwards showed nothing at all, which
   is what read as "the animation never runs". Owned by CSS from the first
   frame, the start state is always painted, so the transition always runs, and
   it runs where it can be seen.

   `.imp-js` is only ever set when scripting is on, and the same snippet drops
   it again if the reveal script never initialises, so with JavaScript off,
   blocked, or failed the band renders finished and visible. The hidden state
   is additionally scoped to `prefers-reduced-motion: no-preference`, so a
   reduced-motion visitor is never left hidden waiting for an animation that
   initReveal() deliberately never runs.

   The band itself is excluded from the section-level fade it would otherwise
   inherit from `.imp-reveal` (0,1,0); the columns move instead, 120ms apart.
   Only opacity and transform animate, so nothing here can shift layout.
   -------------------------------------------------------------------------- */

.imp-trust.imp-reveal {
	opacity: 1;
	transform: none;
}

/* The hidden state carries NO transition, deliberately: it is a start state,
   not a state to animate towards. Only the revealed state below declares one,
   so the columns can only ever animate in — the one direction that should be
   seen — and no ordering of class and paint can produce a fade OUT. */
@media (prefers-reduced-motion: no-preference) {
	.imp-js .imp-trust .imp-trust__item {
		opacity: 0;
		transform: translateY(16px);
	}

	.imp-js .imp-trust .imp-trust__rule {
		transform: scaleX(0);
		transform-origin: center;
	}
}

.imp-js .imp-trust.is-revealed .imp-trust__item {
	opacity: 1;
	transform: none;
	transition: opacity 620ms var(--imp-ease), transform 620ms var(--imp-ease);
}

.imp-js .imp-trust.is-revealed .imp-trust__item:nth-child(2) {
	transition-delay: 120ms;
}

.imp-js .imp-trust.is-revealed .imp-trust__item:nth-child(3) {
	transition-delay: 240ms;
}

.imp-js .imp-trust.is-revealed .imp-trust__item:nth-child(4) {
	transition-delay: 360ms;
}

.imp-js .imp-trust.is-revealed .imp-trust__item:nth-child(5) {
	transition-delay: 480ms;
}

/* The accent hairline draws itself open a beat behind its own column. */
.imp-js .imp-trust.is-revealed .imp-trust__rule {
	transform: scaleX(1);
	transition: transform 700ms var(--imp-ease);
	transition-delay: 220ms;
}

.imp-js .imp-trust.is-revealed .imp-trust__item:nth-child(2) .imp-trust__rule {
	transition-delay: 340ms;
}

.imp-js .imp-trust.is-revealed .imp-trust__item:nth-child(3) .imp-trust__rule {
	transition-delay: 460ms;
}

/* Belt and braces. The hidden state above is already scoped to
   `no-preference`, so a reduced-motion visitor is never given one to escape
   from; this only guarantees the finished state if either rule is ever
   reordered. */
@media (prefers-reduced-motion: reduce) {
	.imp-trust .imp-trust__item,
	.imp-trust .imp-trust__rule {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -----------------------------------------------------------------------------
   Three columns hold down to 1024px. Below 900px — an existing breakpoint in
   this stylesheet — the columns become full-width rows with the icon alongside,
   which keeps a 90-character sentence at a comfortable measure instead of
   squeezing it into a 210px column. Absolute pixel sizes below 900px on
   purpose: Astra emits `html { font-size: 91.2% }` at mobile widths (section
   36), so a `rem` here would silently shrink the supporting copy by 8.8%.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	body.imp .imp-trust__list {
		max-width: 640px;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-top: clamp(26px, 5vw, 36px);
		padding-bottom: clamp(26px, 5vw, 36px);
	}

	body.imp .imp-trust__item {
		flex-direction: row;
		align-items: flex-start;
		gap: 18px;
		padding: 18px 0;
		text-align: left;
	}

	/* The divider turns horizontal and moves to the top of each row. */
	body.imp .imp-trust__item::before {
		display: block;
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;
		width: auto;
		height: 1px;
		background: linear-gradient(90deg, var(--imp-rule-accent), transparent 70%);
	}

	body.imp .imp-trust__item:first-child {
		padding-top: 0;
	}

	body.imp .imp-trust__item:first-child::before {
		display: none;
	}

	body.imp .imp-trust__item:last-child {
		padding-bottom: 0;
	}

	.imp-trust__icon {
		margin-top: 1px;
	}

	.imp-trust__icon svg {
		width: 24px;
		height: 24px;
	}

	.imp-trust__body {
		flex: 1 1 auto;
		align-items: flex-start;
		gap: 10px;
	}

	.imp-trust__title {
		font-size: 12px;
	}

	.imp-trust__copy {
		max-width: 52ch;
		font-size: 15px;
	}

	.imp-js .imp-trust .imp-trust__rule {
		transform-origin: left;
	}
}

@media (max-width: 560px) {
	body.imp .imp-trust__item {
		gap: 14px;
		padding: 16px 0;
	}

	.imp-trust__copy {
		font-size: 14.5px;
	}
}

/* =============================================================================
   8. Section scaffolding
   ========================================================================== */

.imp-section {
	padding: var(--imp-section-y) var(--imp-gutter);
}

.imp-section > * {
	max-width: var(--imp-max);
	margin-inline: auto;
}

.imp-section--tight {
	padding-block: clamp(40px, 5vw, 64px);
}

.imp-section__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(40px, 5vw, 64px);
}

.imp-section__head--left {
	text-align: left;
	margin-inline: 0;
}

.imp-section__title {
	margin: 0 0 16px;
}

.imp-section__title--small {
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
	margin-bottom: 28px;
}

.imp-section__lede {
	font-size: 1.06rem;
	color: var(--imp-slate);
	margin: 0 auto;
}

.imp-section__head--left .imp-section__lede {
	margin-inline: 0;
}

.imp-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: clamp(36px, 5vw, 56px);
}

.imp-grid {
	display: grid;
	gap: clamp(20px, 2.4vw, 34px);
}

.imp-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.imp-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* -----------------------------------------------------------------------------
   Surfaces
   -----------------------------------------------------------------------------
   Every band picks a ground from this vocabulary rather than naming a colour.
   `--dark` and `--charcoal` are the only inverse grounds, and they are reserved
   for the emphasis moments the brand allows: hero, premium CTA bands, footer,
   featured technology, logo presentation, and select luxury storytelling.
   Everything explanatory — About, Why IMPERVITA, education, journal, research,
   FAQs, forms, comparison, planning tools — stays on a warm light ground.

   Per-section defaults come first; the generic `--light/--ivory/--stone/--dark/
   --charcoal` modifiers come after, because every one of these selectors is
   (0,1,0) and source order is the only tiebreak. A page that passes
   surface="stone" to a section must win over that section's default.
   -------------------------------------------------------------------------- */

/* Alternating warm grounds keep a long page from reading as one flat scroll
   without reaching for black. */
.imp-section--technologies,
.imp-section--pillars,
.imp-section--journal,
.imp-section--brands {
	background: var(--imp-surface-alt);
}

.imp-section--pains,
.imp-section--packages,
.imp-section--credentials {
	background: var(--imp-surface-sunken);
}

/* IMPERVITA PRO reads as "dark charcoal + ivory": the structure that signals
   the professional tier lives in the charcoal segment tiles and the squared
   corners, not in a full-bleed black page. The band re-points the division's
   tokens rather than naming colours, so the segments below pick up charcoal
   and zero radius without knowing anything about PRO. */
.imp-section--pro {
	--imp-surface-inverse: var(--imp-charcoal);
	--imp-radius-lg: 0;
	--imp-radius: 0;
	background: var(--imp-surface-alt);
	color: var(--imp-text-secondary);
}

.imp-section--light {
	background: var(--imp-surface);
}

.imp-section--ivory {
	background: var(--imp-surface-alt);
}

.imp-section--stone {
	background: var(--imp-surface-sunken);
}

.imp-section--dark,
.imp-section--charcoal {
	color: var(--imp-text-on-dark-secondary);
}

.imp-section--dark {
	background: var(--imp-surface-inverse);
}

.imp-section--charcoal {
	background: var(--imp-surface-inverse-alt);
}

/* A hairline instead of a hard edge where two light grounds meet, so the page
   reads as one continuous material rather than stacked blocks. */
.imp-section--stone + .imp-section--stone,
.imp-section--ivory + .imp-section--ivory,
.imp-section--light + .imp-section--light {
	border-top: 1px solid var(--imp-rule-soft);
}

.imp-section--dark h2,
.imp-section--dark h3,
.imp-section--charcoal h2,
.imp-section--charcoal h3 {
	color: var(--imp-heading-on-dark);
}

.imp-section--dark .imp-section__lede,
.imp-section--charcoal .imp-section__lede {
	color: var(--imp-text-on-dark-secondary);
}

.imp-section--dark .imp-eyebrow,
.imp-section--charcoal .imp-eyebrow {
	color: var(--imp-accent-on-dark);
}

/* =============================================================================
   9. Outcomes
   ========================================================================== */

.imp-outcomes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1px;
	background: rgba(11, 12, 14, 0.1);
	border: 1px solid rgba(11, 12, 14, 0.1);
}

.imp-outcome {
	position: relative;
	display: block;
	padding: clamp(28px, 3vw, 40px);
	background: var(--imp-cream);
	text-decoration: none;
	overflow: hidden;
	transition: background var(--imp-fast) var(--imp-ease);
}

.imp-outcome:hover {
	background: var(--imp-white);
}

.imp-outcome__glow {
	position: absolute;
	inset: auto -30% -60% -30%;
	height: 160px;
	background: radial-gradient(60% 100% at 50% 100%, rgba(176, 141, 79, 0.22), transparent 70%);
	opacity: 0;
	transition: opacity var(--imp-slow) var(--imp-ease);
}

.imp-outcome:hover .imp-outcome__glow {
	opacity: 1;
}

.imp-outcome__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
}

.imp-outcome__title {
	font-family: var(--imp-display);
	font-size: 1.5rem;
	color: var(--imp-obsidian);
	line-height: 1.15;
}

.imp-outcome__copy {
	color: var(--imp-slate);
	font-size: 0.95rem;
}

.imp-outcome__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: 14px;
}

.imp-outcome__cta {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--imp-accent-on-light);
}

/* =============================================================================
   10. Technology cards
   ========================================================================== */

.imp-tech-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
	gap: clamp(18px, 2vw, 28px);
}

.imp-tech {
	position: relative;
	display: block;
	min-height: 340px;
	padding: 26px;
	text-decoration: none;
	background: var(--imp-charcoal);
	color: var(--imp-cream);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--imp-radius-lg);
}

.imp-tech-grid--compact .imp-tech {
	min-height: 230px;
}

.imp-tech__frame {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(90% 70% at 70% 10%, rgba(176, 141, 79, 0.26), transparent 62%),
		linear-gradient(165deg, #1b1e22 0%, #0d0f11 100%);
	transform: scale(1.02);
	transition: transform var(--imp-slow) var(--imp-ease);
}

.imp-tech:hover .imp-tech__frame {
	transform: scale(1.07);
}

.imp-tech::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(251, 249, 245, 0.12);
	pointer-events: none;
	transition: border-color var(--imp-fast) var(--imp-ease);
}

.imp-tech:hover::after {
	border-color: rgba(200, 169, 106, 0.42);
}

.imp-tech__body {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px;
}

.imp-tech__name {
	font-family: var(--imp-display);
	font-size: 1.6rem;
	line-height: 1.1;
	color: var(--imp-cream);
}

.imp-tech__tagline {
	color: rgba(245, 242, 236, 0.7);
	font-size: 0.92rem;
}

.imp-tech__more {
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--imp-champagne-light);
	margin-top: 6px;
}

/* =============================================================================
   11. Packages
   ========================================================================== */

.imp-packages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(18px, 2vw, 28px);
	align-items: stretch;
}

/* The band behind these is now a warm stone ground, so the premium contrast
   lives in the tile rather than in a full-bleed black section. Everything
   inside the tile is still painted for a dark ground. */
.imp-package {
	border: 1px solid var(--imp-rule-on-dark);
	padding: clamp(28px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-radius: var(--imp-radius-lg);
	background: var(--imp-surface-inverse);
	color: var(--imp-text-on-dark-secondary);
}

.imp-package--feature {
	border-color: rgba(200, 169, 106, 0.55);
	background:
		linear-gradient(165deg, rgba(200, 169, 106, 0.14), rgba(200, 169, 106, 0) 62%),
		var(--imp-surface-inverse);
}

.imp-package__name {
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--imp-champagne-light);
	margin: 0;
}

.imp-package__range {
	font-family: var(--imp-display);
	font-size: 2rem;
	color: var(--imp-cream);
	margin: 0;
}

.imp-package__summary {
	color: rgba(245, 242, 236, 0.72);
	font-size: 0.95rem;
	margin: 0;
}

.imp-package__list {
	list-style: none;
	margin: 12px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid rgba(251, 249, 245, 0.12);
	display: grid;
	gap: 9px;
}

.imp-package__list li {
	position: relative;
	padding-left: 20px;
	font-size: 0.92rem;
	color: rgba(245, 242, 236, 0.82);
}

.imp-package__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 1px;
	background: var(--imp-champagne);
}

.imp-packages__note {
	margin: 28px auto 0;
	text-align: center;
	font-size: 0.85rem;
	color: var(--imp-text-muted);
}

/* =============================================================================
   12. Tools, pillars, pains, segments, brands
   ========================================================================== */

.imp-tools {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(20px, 2.4vw, 34px);
}

.imp-tool {
	border: 1px solid rgba(11, 12, 14, 0.12);
	padding: clamp(30px, 3.4vw, 48px);
	border-radius: var(--imp-radius-lg);
	background: var(--imp-cream);
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}

.imp-tool__title {
	margin: 0;
}

.imp-tool__copy {
	color: var(--imp-slate);
	margin: 0 0 8px;
}

.imp-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(24px, 3vw, 44px);
}

.imp-pillar__index {
	font-family: var(--imp-display);
	font-size: 1.3rem;
	color: var(--imp-accent-on-light);
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(11, 12, 14, 0.12);
}

.imp-pillar__title {
	margin: 0 0 10px;
	font-size: 1.35rem;
}

.imp-pillar__copy {
	color: var(--imp-slate);
	font-size: 0.95rem;
	margin: 0;
}

.imp-pains {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(20px, 2.4vw, 34px);
}

.imp-pain {
	padding: clamp(26px, 3vw, 36px);
	background: var(--imp-ivory);
	border-radius: var(--imp-radius-lg);
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.imp-pain__title {
	margin: 0;
	font-size: 1.3rem;
}

.imp-pain__problem {
	color: var(--imp-slate);
	margin: 0;
	font-size: 0.95rem;
}

.imp-pain__solution {
	margin: 0;
	font-size: 0.95rem;
	color: var(--imp-obsidian);
	padding-left: 16px;
	border-left: 2px solid var(--imp-champagne);
}

/* Structured charcoal tiles on ivory. Separate tiles rather than one slab
   divided by hairlines: the segment count does not divide evenly into the
   column count, and a slab leaves an empty cell showing at the end. */
.imp-segments {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(12px, 1.2vw, 18px);
}

.imp-segment {
	background: var(--imp-surface-inverse);
	border-radius: var(--imp-radius-lg);
	padding: clamp(24px, 2.6vw, 34px);
	scroll-margin-top: calc(var(--imp-header-h) + 20px);
}

.imp-segment__title {
	margin: 0 0 10px;
	font-size: 1.25rem;
	color: var(--imp-heading-on-dark);
}

.imp-segment__copy {
	margin: 0;
	color: var(--imp-text-on-dark-secondary);
	font-size: 0.93rem;
}

.imp-brands {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(18px, 2vw, 28px);
}

/* Supplier cards on the Our Brands page. Named `imp-brand-card`, NOT
   `imp-brand` — that class belongs to the header wordmark link, and the two
   collided: this card's border, padding, and cream fill were being applied to
   the site logo on every page. */
.imp-brand-card {
	border: 1px solid rgba(11, 12, 14, 0.12);
	padding: clamp(24px, 2.6vw, 34px);
	border-radius: var(--imp-radius-lg);
	background: var(--imp-cream);
}

.imp-brand-card--authorized {
	border-color: rgba(176, 141, 79, 0.5);
}

.imp-brand-card__name {
	margin: 0 0 10px;
	font-family: var(--imp-display);
	font-size: 1.4rem;
}

.imp-brand-card__copy {
	color: var(--imp-slate);
	font-size: 0.92rem;
	margin: 0 0 14px;
}

.imp-brand-card__status {
	margin: 0;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--imp-stone);
}

.imp-brand-card--authorized .imp-brand-card__status {
	color: var(--imp-accent-on-light);
}

.imp-brand-card__admin {
	margin: 8px 0 0;
	font-size: 0.72rem;
	color: var(--imp-text-muted);
}

.imp-credentials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}

.imp-credential__badge {
	max-height: 72px;
	width: auto;
	margin-bottom: 12px;
}

/* =============================================================================
   13. Cards
   ========================================================================== */

.imp-card {
	background: var(--imp-cream);
	border: 1px solid rgba(11, 12, 14, 0.1);
	border-radius: var(--imp-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.imp-card__media img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

.imp-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.imp-card--resource {
	padding: 26px;
}

.imp-card__title {
	margin: 0;
	font-size: 1.2rem;
}

.imp-card__title a {
	text-decoration: none;
}

.imp-card__copy {
	color: var(--imp-slate);
	font-size: 0.92rem;
	margin: 0;
}

.imp-card__more {
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--imp-accent-on-light);
}

/* Product card ------------------------------------------------------------- */

.imp-product-card {
	display: flex;
	flex-direction: column;
	background: var(--imp-cream);
	border: 1px solid rgba(11, 12, 14, 0.09);
	border-radius: var(--imp-radius-lg);
	overflow: hidden;
	transition: border-color var(--imp-fast) var(--imp-ease), box-shadow var(--imp-slow) var(--imp-ease), transform var(--imp-slow) var(--imp-ease);
}

.imp-product-card:hover {
	border-color: rgba(11, 12, 14, 0.18);
	box-shadow: var(--imp-shadow-md);
	transform: translateY(-2px);
}

.imp-product-card__media {
	position: relative;
	display: block;
	background: var(--imp-ivory);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.imp-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--imp-slow) var(--imp-ease);
}

.imp-product-card:hover .imp-product-card__media img {
	transform: scale(1.035);
}

.imp-product-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(70% 60% at 50% 40%, rgba(176, 141, 79, 0.1), transparent 70%),
		linear-gradient(160deg, var(--imp-linen), var(--imp-ivory));
}

.imp-product-card__badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.imp-product-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.imp-product-card__brand {
	margin: 0;
	font-size: 0.64rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--imp-stone);
}

.imp-product-card__title {
	margin: 0;
	font-size: 1.2rem;
}

.imp-product-card__title a {
	text-decoration: none;
}

.imp-product-card__copy {
	margin: 0;
	font-size: 0.9rem;
	color: var(--imp-slate);
}

.imp-product-card__price {
	margin: 4px 0 0;
	font-family: var(--imp-display);
	font-size: 1.3rem;
	color: var(--imp-obsidian);
}

.imp-product-card__financing {
	margin: 0;
	font-size: 0.8rem;
	color: var(--imp-stone);
}

.imp-product-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
}

.imp-wish,
.imp-compare-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	background: none;
	border: 1px solid rgba(11, 12, 14, 0.14);
	border-radius: var(--imp-radius);
	font-size: 0.66rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--imp-stone);
	cursor: pointer;
	transition: color var(--imp-fast) var(--imp-ease), border-color var(--imp-fast) var(--imp-ease);
}

.imp-wish:hover,
.imp-compare-toggle:hover,
.imp-wish.is-saved,
.imp-compare-toggle.is-active {
	color: var(--imp-accent-on-light);
	border-color: var(--imp-champagne);
}

/* =============================================================================
   14. Empty states
   ========================================================================== */

.imp-empty {
	border: 1px solid rgba(11, 12, 14, 0.12);
	border-radius: var(--imp-radius-lg);
	background:
		radial-gradient(80% 120% at 50% 0%, rgba(176, 141, 79, 0.07), transparent 62%),
		var(--imp-ivory);
	padding: clamp(44px, 6vw, 84px) clamp(24px, 4vw, 56px);
	text-align: center;
}

.imp-empty__inner {
	max-width: 56ch;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.imp-empty__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.imp-empty__copy {
	margin: 0 0 10px;
	color: var(--imp-slate);
}

/* =============================================================================
   15. Forms
   ========================================================================== */

.imp-form-wrap {
	max-width: 760px;
	margin: clamp(40px, 5vw, 64px) auto 0;
	background: var(--imp-cream);
	border: 1px solid rgba(11, 12, 14, 0.11);
	border-radius: var(--imp-radius-lg);
	padding: clamp(28px, 3.4vw, 48px);
}

.imp-form-wrap--compact {
	border: 0;
	padding: 0;
	background: transparent;
	margin-top: 20px;
	max-width: none;
}

.imp-form__title {
	margin: 0 0 12px;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.imp-form__intro {
	color: var(--imp-slate);
	margin: 0 0 26px;
}

.imp-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
}

.imp-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
}

.imp-field--wide {
	grid-column: 1 / -1;
}

.imp-field label {
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--imp-stone);
}

.imp-field__req {
	color: var(--imp-accent-on-light);
}

.imp-field input,
.imp-field select,
.imp-field textarea {
	width: 100%;
	padding: 14px 15px;
	border: 1px solid rgba(11, 12, 14, 0.18);
	border-radius: var(--imp-radius);
	background: var(--imp-white);
	font-family: var(--imp-sans);
	font-size: 0.98rem;
	color: var(--imp-charcoal);
	transition: border-color var(--imp-fast) var(--imp-ease), box-shadow var(--imp-fast) var(--imp-ease);
}

.imp-field input:focus,
.imp-field select:focus,
.imp-field textarea:focus {
	outline: none;
	border-color: var(--imp-champagne);
	box-shadow: 0 0 0 3px rgba(176, 141, 79, 0.16);
}

.imp-form__actions {
	margin-top: 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.imp-form__privacy {
	margin: 0;
	font-size: 0.78rem;
	color: var(--imp-stone);
	max-width: 40ch;
}

.imp-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.imp-form__success,
.imp-form__error {
	margin: 0 0 18px;
	padding: 16px 20px;
	border-radius: var(--imp-radius);
	font-size: 0.95rem;
}

.imp-form__success {
	background: rgba(119, 133, 122, 0.14);
	border-left: 2px solid var(--imp-sage);
	color: var(--imp-charcoal);
}

.imp-form__error {
	background: rgba(176, 141, 79, 0.12);
	border-left: 2px solid var(--imp-champagne);
	color: var(--imp-charcoal);
}

/* =============================================================================
   16. Configurator & results
   ========================================================================== */

.imp-configurator {
	max-width: 900px;
	margin: 0 auto;
	border: 1px solid rgba(11, 12, 14, 0.12);
	border-radius: var(--imp-radius-lg);
	background: var(--imp-cream);
	overflow: hidden;
}

.imp-configurator__progress {
	height: 2px;
	background: rgba(11, 12, 14, 0.08);
}

.imp-configurator__bar {
	display: block;
	height: 100%;
	background: var(--imp-champagne);
	transition: width var(--imp-slow) var(--imp-ease);
}

.imp-configurator__form {
	padding: clamp(28px, 4vw, 56px);
}

.imp-step {
	border: 0;
	padding: 0;
	margin: 0;
}

.imp-step:focus {
	outline: none;
}

.imp-step__legend {
	display: block;
	margin-bottom: 26px;
}

.imp-step__count {
	display: block;
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--imp-accent-on-light);
	margin-bottom: 12px;
}

.imp-step__question {
	display: block;
	font-family: var(--imp-display);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	line-height: 1.12;
	color: var(--imp-obsidian);
}

.imp-step__hint {
	display: block;
	margin-top: 10px;
	font-size: 0.86rem;
	color: var(--imp-stone);
}

.imp-step.is-missing .imp-choices {
	outline: 1px solid var(--imp-champagne);
	outline-offset: 8px;
}

.imp-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
}

.imp-choice {
	position: relative;
	display: block;
	cursor: pointer;
}

.imp-choice__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.imp-choice__label {
	display: block;
	padding: 18px 20px;
	border: 1px solid rgba(11, 12, 14, 0.16);
	border-radius: var(--imp-radius);
	background: var(--imp-white);
	font-size: 0.98rem;
	transition: border-color var(--imp-fast) var(--imp-ease), background var(--imp-fast) var(--imp-ease), color var(--imp-fast) var(--imp-ease);
}

.imp-choice:hover .imp-choice__label {
	border-color: rgba(176, 141, 79, 0.6);
}

.imp-choice__input:checked + .imp-choice__label {
	border-color: var(--imp-obsidian);
	background: var(--imp-obsidian);
	color: var(--imp-cream);
}

.imp-choice__input:focus-visible + .imp-choice__label {
	outline: 2px solid var(--imp-champagne);
	outline-offset: 3px;
}

.imp-configurator__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
	padding-top: 26px;
	border-top: 1px solid rgba(11, 12, 14, 0.1);
}

/* Results ------------------------------------------------------------------ */

.imp-plan {
	padding: var(--imp-section-y) var(--imp-gutter);
	background: var(--imp-ivory);
}

.imp-plan > * {
	max-width: var(--imp-max);
	margin-inline: auto;
}

.imp-plan__head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 44px;
}

.imp-plan__title {
	margin: 0 0 14px;
}

.imp-plan__summary {
	color: var(--imp-slate);
	font-size: 0.92rem;
	margin: 0 auto 10px;
}

.imp-plan__note {
	color: var(--imp-stone);
	font-size: 0.86rem;
	margin: 0 auto;
}

.imp-plan__package {
	text-align: center;
	border: 1px solid rgba(176, 141, 79, 0.4);
	background: rgba(176, 141, 79, 0.06);
	border-radius: var(--imp-radius-lg);
	padding: 30px;
	margin-bottom: 40px;
	max-width: 560px;
}

.imp-plan__range {
	font-family: var(--imp-display);
	font-size: 1.7rem;
	margin: 0 0 8px;
}

.imp-plan__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(18px, 2vw, 28px);
}

.imp-plan__card {
	background: var(--imp-cream);
	border: 1px solid rgba(11, 12, 14, 0.1);
	border-radius: var(--imp-radius-lg);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.imp-plan__rank {
	font-family: var(--imp-display);
	font-size: 1.1rem;
	color: var(--imp-accent-on-light);
	margin: 0;
}

.imp-plan__card-title {
	margin: 0;
	font-size: 1.25rem;
}

.imp-plan__card-copy {
	margin: 0 0 6px;
	font-size: 0.92rem;
	color: var(--imp-slate);
}

.imp-plan__products,
.imp-plan__actions {
	margin-top: clamp(40px, 5vw, 64px);
}

.imp-plan__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: center;
}

.imp-copied {
	font-size: 0.82rem;
	color: var(--imp-sage);
}

.imp-rank {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
	background: rgba(11, 12, 14, 0.1);
	border: 1px solid rgba(11, 12, 14, 0.1);
}

.imp-rank__item {
	display: flex;
	gap: 22px;
	padding: 26px 28px;
	background: var(--imp-cream);
}

.imp-rank__index {
	font-family: var(--imp-display);
	font-size: 1.3rem;
	color: var(--imp-accent-on-light);
	flex: none;
}

.imp-rank__title {
	margin: 0 0 8px;
	font-size: 1.3rem;
}

.imp-rank__copy {
	margin: 0 0 10px;
	color: var(--imp-slate);
	font-size: 0.94rem;
}

/* =============================================================================
   17. Comparison
   ========================================================================== */

.imp-compare__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid rgba(11, 12, 14, 0.1);
	border-radius: var(--imp-radius-lg);
	background: var(--imp-cream);
}

.imp-compare__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
}

.imp-compare__table th,
.imp-compare__table td {
	padding: 16px 18px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(11, 12, 14, 0.08);
	font-size: 0.92rem;
}

.imp-compare__table thead th {
	background: var(--imp-ivory);
	position: sticky;
	top: 0;
	z-index: 2;
}

.imp-compare__table tbody th {
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--imp-stone);
	font-weight: 500;
	white-space: nowrap;
	background: var(--imp-cream);
}

.imp-compare__product {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 180px;
}

.imp-compare__image {
	width: 100%;
	height: 130px;
	object-fit: cover;
	border-radius: var(--imp-radius);
}

.imp-compare__name {
	font-family: var(--imp-display);
	font-size: 1.1rem;
	text-decoration: none;
}

.imp-compare__remove {
	background: none;
	border: 0;
	padding: 0;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--imp-stone);
	cursor: pointer;
	text-align: left;
}

.imp-compare__empty {
	color: var(--imp-text-muted);
}

.imp-compare-drawer {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 300;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--imp-obsidian);
	color: var(--imp-cream);
	border-radius: 40px;
	box-shadow: var(--imp-shadow-lg);
}

.imp-compare-drawer__label {
	margin: 0;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.imp-compare-drawer__clear {
	background: none;
	border: 0;
	color: rgba(245, 242, 236, 0.6);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* =============================================================================
   18. Filters
   ========================================================================== */

.imp-filters,
.imp-catalog-filters__panel {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 40px;
	margin: 0 0 32px;
}

.imp-filters__group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.imp-filters__label {
	font-size: 0.64rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--imp-stone);
}

.imp-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.imp-chip {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid rgba(11, 12, 14, 0.14);
	border-radius: 40px;
	font-size: 0.76rem;
	color: var(--imp-slate);
	text-decoration: none;
	transition: border-color var(--imp-fast) var(--imp-ease), background var(--imp-fast) var(--imp-ease), color var(--imp-fast) var(--imp-ease);
}

.imp-chip:hover {
	border-color: var(--imp-champagne);
	color: var(--imp-accent-on-light);
}

.imp-chip.is-active {
	background: var(--imp-obsidian);
	border-color: var(--imp-obsidian);
	color: var(--imp-cream);
}

.imp-catalog-filters__toggle {
	display: none;
	width: 100%;
	padding: 14px;
	margin-bottom: 16px;
	background: none;
	border: 1px solid rgba(11, 12, 14, 0.16);
	border-radius: var(--imp-radius);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

/* =============================================================================
   19. Single product
   ========================================================================== */

.imp-single__brand {
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--imp-stone);
	margin: 0 0 10px;
}

.imp-single__value {
	font-size: 1.06rem;
	color: var(--imp-slate);
	margin: 0 0 22px;
	max-width: 46ch;
}

.imp-single__facts {
	list-style: none;
	margin: 22px 0;
	padding: 20px 0;
	border-top: 1px solid rgba(11, 12, 14, 0.1);
	border-bottom: 1px solid rgba(11, 12, 14, 0.1);
	display: grid;
	gap: 10px;
}

.imp-single__fact {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-size: 0.92rem;
}

.imp-single__fact-label {
	color: var(--imp-stone);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding-top: 3px;
}

.imp-single__fact-value {
	text-align: right;
	color: var(--imp-charcoal);
}

.imp-product-cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
	margin: 22px 0;
}

.imp-product-cta__note {
	font-size: 0.84rem;
	color: var(--imp-stone);
	margin: 4px 0 0;
}

.imp-product-advisor {
	margin: 14px 0 0;
}

.imp-single__tools {
	display: flex;
	gap: 8px;
	margin-top: 18px;
}

.imp-single__body {
	max-width: var(--imp-max);
	margin: clamp(48px, 6vw, 88px) auto 0;
	display: grid;
	gap: clamp(36px, 4vw, 56px);
}

.imp-single__section {
	border-top: 1px solid rgba(11, 12, 14, 0.1);
	padding-top: clamp(28px, 3vw, 44px);
}

.imp-single__heading {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	margin: 0 0 20px;
}

.imp-single__prose {
	color: var(--imp-slate);
	margin: 0 0 14px;
}

.imp-single__note {
	font-size: 0.85rem;
	color: var(--imp-stone);
	margin: 14px 0 0;
}

.imp-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px 32px;
}

.imp-benefit {
	position: relative;
	padding-left: 26px;
	color: var(--imp-slate);
}

.imp-benefit::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 14px;
	height: 1px;
	background: var(--imp-champagne);
}

.imp-services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.imp-service {
	display: grid;
	grid-template-columns: minmax(180px, 220px) 1fr;
	gap: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(11, 12, 14, 0.07);
}

.imp-service__name {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--imp-charcoal);
}

.imp-service__copy {
	color: var(--imp-slate);
	font-size: 0.94rem;
}

.imp-accordion {
	border-bottom: 1px solid rgba(11, 12, 14, 0.1);
}

.imp-accordion__summary {
	cursor: pointer;
	padding: 16px 0;
	font-size: 0.95rem;
	font-weight: 500;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.imp-accordion__summary::after {
	content: "+";
	color: var(--imp-accent-on-light);
	font-size: 1.2rem;
	flex: none;
}

.imp-accordion[open] .imp-accordion__summary::after {
	content: "\2013";
}

.imp-accordion__summary::-webkit-details-marker {
	display: none;
}

.imp-accordion__body {
	padding: 0 0 18px;
	color: var(--imp-slate);
}

.imp-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 18px;
}

.imp-spec-table th,
.imp-spec-table td {
	text-align: left;
	padding: 12px 0;
	border-bottom: 1px solid rgba(11, 12, 14, 0.07);
	font-size: 0.92rem;
	vertical-align: top;
}

.imp-spec-table th {
	width: 40%;
	color: var(--imp-stone);
	font-weight: 400;
}

.imp-price-request {
	font-family: var(--imp-display);
	font-size: 1.5rem;
	color: var(--imp-obsidian);
}

.imp-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 260;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: rgba(11, 12, 14, 0.96);
	color: var(--imp-cream);
	backdrop-filter: blur(10px);
}

.imp-sticky-cta__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.imp-sticky-cta__name {
	font-size: 0.8rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.imp-sticky-cta__price {
	font-family: var(--imp-display);
	font-size: 1.1rem;
}

.imp-sticky-cta .imp-btn {
	background: var(--imp-cream);
	color: var(--imp-obsidian);
	flex: none;
}

/* =============================================================================
   20. Concierge
   ========================================================================== */

.imp-concierge__tab {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	z-index: 250;
	padding: 20px 12px;
	background: var(--imp-obsidian);
	color: var(--imp-cream);
	border: 0;
	border-radius: 0 0 var(--imp-radius) var(--imp-radius);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--imp-fast) var(--imp-ease);
}

.imp-concierge__tab:hover {
	background: var(--imp-graphite);
}

.imp-concierge__panel {
	position: fixed;
	inset: 0;
	z-index: 420;
	background: rgba(11, 12, 14, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}

.imp-concierge__inner {
	position: relative;
	width: min(640px, 100%);
	background: var(--imp-cream);
	border-radius: var(--imp-radius-lg);
	padding: clamp(28px, 4vw, 48px);
	box-shadow: var(--imp-shadow-lg);
	max-height: 92vh;
	overflow-y: auto;
}

.imp-concierge__close {
	position: absolute;
	top: 14px;
	right: 18px;
	background: none;
	border: 0;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	color: var(--imp-stone);
}

.imp-concierge__title {
	margin: 0 0 12px;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.imp-concierge__lede {
	color: var(--imp-slate);
	margin: 0 0 22px;
}

.imp-concierge__routes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(11, 12, 14, 0.1);
}

/* =============================================================================
   21. Guide band & footer
   ========================================================================== */

.imp-section--guide {
	background: var(--imp-obsidian);
	color: rgba(245, 242, 236, 0.8);
}

.imp-guide {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
}

.imp-guide__title {
	color: var(--imp-cream);
	margin: 0 0 14px;
}

.imp-guide__lede {
	color: rgba(245, 242, 236, 0.7);
	margin: 0;
}

.imp-guide__note {
	font-size: 0.82rem;
	color: rgba(245, 242, 236, 0.5);
	margin-top: 12px;
}

.imp-section--guide .imp-field label {
	color: rgba(245, 242, 236, 0.6);
}

.imp-section--guide .imp-form__privacy {
	color: rgba(245, 242, 236, 0.5);
}

.imp-section--guide .imp-btn--primary {
	background: var(--imp-cream);
	color: var(--imp-obsidian);
}

.imp-footer {
	background: var(--imp-obsidian);
	color: rgba(245, 242, 236, 0.66);
	padding: clamp(56px, 7vw, 96px) var(--imp-gutter) 40px;
	font-size: 0.92rem;
}

.imp-footer > * {
	max-width: var(--imp-max);
	margin-inline: auto;
}

.imp-footer__top {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: clamp(32px, 5vw, 72px);
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(251, 249, 245, 0.1);
}

.imp-footer__word {
	font-size: 1.1rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--imp-cream);
	margin: 0 0 12px;
}

.imp-footer__tagline {
	font-family: var(--imp-display);
	font-size: 1.3rem;
	color: var(--imp-champagne-soft);
	margin: 0 0 18px;
}

.imp-footer__contact {
	margin: 0 0 4px;
}

.imp-footer__contact a {
	color: rgba(245, 242, 236, 0.8);
	text-decoration: none;
}

.imp-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 32px;
}

.imp-footer__heading {
	font-family: var(--imp-sans);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--imp-accent-on-dark);
	margin: 0 0 16px;
}

.imp-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.imp-footer__list a {
	color: rgba(245, 242, 236, 0.66);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color var(--imp-fast) var(--imp-ease);
}

.imp-footer__list a:hover {
	color: var(--imp-champagne-soft);
}

.imp-footer__signup {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
	align-items: center;
	padding: 40px 0;
	border-bottom: 1px solid rgba(251, 249, 245, 0.1);
}

.imp-footer__note {
	margin: 0;
	color: rgba(245, 242, 236, 0.6);
	font-size: 0.9rem;
}

.imp-footer__signup .imp-field label {
	color: rgba(245, 242, 236, 0.6);
}

.imp-footer__signup .imp-form__privacy {
	color: rgba(245, 242, 236, 0.45);
}

.imp-footer__signup .imp-btn--primary {
	background: var(--imp-cream);
	color: var(--imp-obsidian);
}

.imp-social {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	list-style: none;
	margin: 28px auto 0;
	padding: 0;
}

.imp-social a {
	color: rgba(245, 242, 236, 0.6);
	text-decoration: none;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.imp-footer__legal {
	padding-top: 36px;
	display: grid;
	gap: 10px;
}

.imp-footer__owner {
	color: rgba(245, 242, 236, 0.72);
	margin: 0;
	font-size: 0.86rem;
	max-width: none;
}

.imp-footer__disclaimer,
.imp-footer__copy {
	margin: 0;
	font-size: 0.78rem;
	color: rgba(245, 242, 236, 0.42);
	max-width: none;
	border: 0;
	padding: 0;
}

/* =============================================================================
   22. WooCommerce surfaces
   ========================================================================== */

body.imp .woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(20px, 2.4vw, 34px);
	margin: 0;
	padding: 0;
}

body.imp .woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	list-style: none;
}

body.imp .woocommerce ul.products li.product::before,
body.imp .woocommerce ul.products li.product::after {
	display: none;
}

body.imp .woocommerce .woocommerce-result-count,
body.imp .woocommerce .woocommerce-ordering {
	font-size: 0.82rem;
	color: var(--imp-stone);
}

body.imp .woocommerce div.product .product_title {
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	margin-bottom: 12px;
}

body.imp .woocommerce div.product p.price,
body.imp .woocommerce div.product span.price {
	font-family: var(--imp-display);
	font-size: 1.9rem;
	color: var(--imp-obsidian);
}

body.imp .woocommerce div.product form.cart .button,
body.imp .woocommerce a.button,
body.imp .woocommerce button.button,
body.imp .woocommerce input.button,
body.imp .woocommerce #respond input#submit {
	background: var(--imp-obsidian);
	color: var(--imp-cream);
	border-radius: var(--imp-radius);
	padding: 16px 30px;
	font-family: var(--imp-sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1;
}

body.imp .woocommerce a.button:hover,
body.imp .woocommerce button.button:hover,
body.imp .woocommerce input.button:hover,
body.imp .woocommerce div.product form.cart .button:hover {
	background: var(--imp-graphite);
	color: var(--imp-white);
}

body.imp .woocommerce .woocommerce-breadcrumb {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--imp-stone);
	margin-bottom: 26px;
}

body.imp .woocommerce-message,
body.imp .woocommerce-info,
body.imp .woocommerce-error {
	border-top-color: var(--imp-champagne);
	background: var(--imp-ivory);
	border-radius: var(--imp-radius);
}

body.imp .woocommerce-message::before,
body.imp .woocommerce-info::before {
	color: var(--imp-accent-on-light);
}

body.imp .woocommerce .quantity .qty {
	padding: 12px 8px;
	border: 1px solid rgba(11, 12, 14, 0.18);
	border-radius: var(--imp-radius);
}

/* WooCommerce block-based cart and checkout */
body.imp .wc-block-components-button,
body.imp .wc-block-cart__submit-button {
	border-radius: var(--imp-radius) !important;
	background: var(--imp-obsidian) !important;
	color: var(--imp-cream) !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.82rem;
}

body.imp .wc-block-components-totals-item__value,
body.imp .wc-block-formatted-money-amount {
	font-family: var(--imp-display);
}

/* Coming-soon screen inherits the brand rather than the default WooCommerce look */
body.imp .woocommerce-coming-soon-store,
body.imp .wp-block-woocommerce-coming-soon {
	background: var(--imp-obsidian);
	color: var(--imp-cream);
}

/* =============================================================================
   23. Motion
   ========================================================================== */

.imp-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--imp-slow) var(--imp-ease), transform var(--imp-slow) var(--imp-ease);
}

.imp-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* =============================================================================
   24. Focus & accessibility
   ========================================================================== */

body.imp a:focus-visible,
body.imp button:focus-visible,
body.imp input:focus-visible,
body.imp select:focus-visible,
body.imp textarea:focus-visible,
body.imp summary:focus-visible {
	outline: 2px solid var(--imp-champagne);
	outline-offset: 3px;
	border-radius: 1px;
}

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

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

	.imp-reveal {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-contrast: more) {
	:root {
		--imp-stone: #55575b;
		--imp-champagne: #8f6f36;
	}
}

/* =============================================================================
   25. Responsive
   ========================================================================== */

@media (max-width: 1200px) {
	.imp-nav__list {
		gap: 18px;
	}

	.imp-nav__link {
		font-size: 0.7rem;
		letter-spacing: 0.12em;
	}
}

@media (max-width: 1024px) {
	.imp-burger {
		display: inline-flex;
	}

	.imp-header__inner {
		grid-template-columns: auto 1fr auto;
		gap: 12px;
	}

	.imp-header__brand {
		justify-content: center;
	}

	.imp-nav {
		display: none;
	}

	.imp-catalog-filters__toggle {
		display: block;
	}

	.imp-catalog-filters__panel {
		display: none;
	}

	.imp-catalog-filters.is-open .imp-catalog-filters__panel {
		display: flex;
	}

	.imp-footer__top {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 782px) {
	body.imp {
		font-size: 16px;
	}

	.imp-hero {
		min-height: 74vh;
	}

	.imp-hero__actions .imp-btn {
		flex: 1 1 100%;
	}

	.imp-concierge__tab {
		top: auto;
		bottom: 76px;
		transform: none;
		writing-mode: horizontal-tb;
		border-radius: var(--imp-radius) 0 0 var(--imp-radius);
		padding: 12px 16px;
	}

	.imp-sticky-cta {
		display: flex;
	}

	.imp-compare-drawer {
		left: 12px;
		right: 12px;
		transform: none;
		bottom: 12px;
		justify-content: space-between;
	}

	.imp-service {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.imp-single__fact {
		flex-direction: column;
		gap: 2px;
	}

	.imp-single__fact-value {
		text-align: left;
	}

	.imp-rank__item {
		flex-direction: column;
		gap: 10px;
	}

	.imp-form__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.imp-form__actions .imp-btn {
		width: 100%;
	}

	/* The comparison table becomes stacked cards rather than a squeezed grid. */
	.imp-compare__table,
	.imp-compare__table thead,
	.imp-compare__table tbody,
	.imp-compare__table tr,
	.imp-compare__table th,
	.imp-compare__table td {
		display: block;
		min-width: 0;
	}

	.imp-compare__table thead tr {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.imp-compare__table thead th:first-child {
		display: none;
	}

	.imp-compare__table tbody tr {
		border-bottom: 1px solid rgba(11, 12, 14, 0.1);
		padding: 12px 0;
	}

	.imp-compare__table tbody td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		border: 0;
		padding: 6px 18px;
	}

	.imp-compare__table tbody td::before {
		content: attr(data-label);
		font-size: 0.64rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--imp-stone);
		flex: none;
	}

	.imp-compare__scroll {
		overflow-x: visible;
	}
}

/* =============================================================================
   26. Cascade corrections — colour on dark grounds
   -----------------------------------------------------------------------------
   The base rules `body.imp h1,h2,h3,h4 {…}` and `body.imp a {…}` are (0,1,2).
   Nearly every component here colours itself with a single class — (0,1,0) or
   (0,1,1) — so the base rules silently won and painted obsidian headings and
   charcoal links onto near-black surfaces. Nothing looked wrong in the markup;
   the text was simply invisible.

   Rather than weaken the base rules (which would hand the cascade to Astra),
   each on-dark component restates its colour with a `body.imp` prefix so it
   outranks the base. Hover and focus states are restated for the same reason:
   `body.imp a:hover` is (0,2,2) and would otherwise beat the component's own
   hover.
   ========================================================================== */

/* Buttons — .imp-btn is applied to anchors, so `body.imp a` was overriding it */
body.imp .imp-btn {
	color: var(--imp-cream);
}

body.imp .imp-btn:hover,
body.imp .imp-btn:focus-visible {
	color: var(--imp-white);
}

body.imp .imp-btn--ghost {
	color: var(--imp-charcoal);
}

body.imp .imp-btn--ghost:hover,
body.imp .imp-btn--ghost:focus-visible {
	color: var(--imp-accent-on-light);
}

body.imp .imp-btn--light {
	color: var(--imp-cream);
}

body.imp .imp-btn--light:hover,
body.imp .imp-btn--light:focus-visible {
	color: var(--imp-white);
}

/* Light-filled buttons keep dark ink. An .imp-btn--primary is an obsidian fill
   by default, which disappears on any inverse ground — every dark surface that
   can hold one is listed here. */
body.imp .imp-hero .imp-btn--primary,
body.imp .imp-section--guide .imp-btn--primary,
body.imp .imp-section--dark .imp-btn--primary,
body.imp .imp-section--charcoal .imp-btn--primary,
body.imp .imp-brand-band .imp-btn--primary,
body.imp .imp-footer__signup .imp-btn--primary,
body.imp .imp-sticky-cta .imp-btn,
body.imp .imp-compare-drawer .imp-btn {
	background: var(--imp-cream);
	color: var(--imp-obsidian);
}

body.imp .imp-hero .imp-btn--primary:hover,
body.imp .imp-section--guide .imp-btn--primary:hover,
body.imp .imp-section--dark .imp-btn--primary:hover,
body.imp .imp-section--charcoal .imp-btn--primary:hover,
body.imp .imp-brand-band .imp-btn--primary:hover,
body.imp .imp-footer__signup .imp-btn--primary:hover,
body.imp .imp-compare-drawer .imp-btn:hover {
	background: var(--imp-white);
	color: var(--imp-obsidian);
}

/* Uppercase micro-links inherit the on-light accent; on an inverse ground that
   is unreadable, so every dark surface restates it. */
body.imp .imp-section--dark .imp-link,
body.imp .imp-section--charcoal .imp-link,
body.imp .imp-section--guide .imp-link,
body.imp .imp-brand-band .imp-link,
body.imp .imp-package .imp-link,
body.imp .imp-tech .imp-link {
	color: var(--imp-accent-on-dark);
	border-bottom-color: rgba(227, 210, 174, 0.36);
}

body.imp .imp-section--dark .imp-link:hover,
body.imp .imp-section--charcoal .imp-link:hover,
body.imp .imp-section--guide .imp-link:hover,
body.imp .imp-brand-band .imp-link:hover,
body.imp .imp-package .imp-link:hover,
body.imp .imp-tech .imp-link:hover {
	color: var(--imp-white);
	border-bottom-color: var(--imp-accent-on-dark);
}

/* Ghost buttons that sit on a dark ground take the light treatment */
body.imp .imp-section--dark .imp-btn--ghost,
body.imp .imp-section--charcoal .imp-btn--ghost,
body.imp .imp-section--guide .imp-btn--ghost,
body.imp .imp-brand-band .imp-btn--ghost,
body.imp .imp-footer .imp-btn--ghost {
	color: var(--imp-cream);
	border-color: rgba(251, 249, 245, 0.42);
}

body.imp .imp-section--dark .imp-btn--ghost:hover,
body.imp .imp-section--charcoal .imp-btn--ghost:hover,
body.imp .imp-section--guide .imp-btn--ghost:hover,
body.imp .imp-brand-band .imp-btn--ghost:hover,
body.imp .imp-footer .imp-btn--ghost:hover,
body.imp .imp-section--dark .imp-btn--ghost:focus-visible,
body.imp .imp-section--charcoal .imp-btn--ghost:focus-visible,
body.imp .imp-section--guide .imp-btn--ghost:focus-visible,
body.imp .imp-brand-band .imp-btn--ghost:focus-visible,
body.imp .imp-footer .imp-btn--ghost:focus-visible {
	color: var(--imp-accent-on-dark);
	border-color: var(--imp-accent-on-dark);
}

/* Headings on dark grounds */
body.imp .imp-hero__title,
body.imp .imp-guide__title,
body.imp .imp-section--dark h2,
body.imp .imp-section--dark h3,
body.imp .imp-section--charcoal h2,
body.imp .imp-section--charcoal h3,
body.imp .imp-section--guide h2,
body.imp .imp-section--guide h3,
body.imp .imp-brand-band h2 {
	color: var(--imp-heading-on-dark);
}

body.imp .imp-footer__heading {
	color: var(--imp-accent-on-dark);
}

/* Headings inside a dark tile that sits on a LIGHT band. There is no ancestor
   section to key off any more, so the component has to carry the colour itself
   — and being a single class it needs the `body.imp` prefix to keep it. */
body.imp .imp-segment__title,
body.imp .imp-tech__name,
body.imp .imp-package__range {
	color: var(--imp-heading-on-dark);
}

/* Links on dark grounds */
body.imp .imp-footer__list a {
	color: rgba(245, 242, 236, 0.78);
}

body.imp .imp-footer__list a:hover,
body.imp .imp-footer__list a:focus-visible {
	color: var(--imp-champagne-soft);
}

body.imp .imp-footer__contact a {
	color: rgba(245, 242, 236, 0.86);
}

body.imp .imp-footer__contact a:hover,
body.imp .imp-social a:hover,
body.imp .imp-footer__contact a:focus-visible,
body.imp .imp-social a:focus-visible {
	color: var(--imp-champagne-soft);
}

body.imp .imp-social a {
	color: rgba(245, 242, 236, 0.76);
}

body.imp .imp-section--guide .imp-form__privacy a,
body.imp .imp-footer .imp-form__privacy a {
	color: var(--imp-champagne-soft);
}

body.imp .imp-skip {
	color: var(--imp-cream);
}

/* The header icon controls are <button> elements, so they inherit the generic
   button drop shadow and render a faint pill or circle behind each icon. Only
   the shadow is cleared — size, padding, radius, background, and the hover
   treatment are untouched. */
body.imp .imp-burger,
body.imp .imp-util,
body.imp .imp-burger:hover,
body.imp .imp-util:hover,
body.imp .imp-burger:focus,
body.imp .imp-util:focus {
	box-shadow: none;
}

/* Small print on dark grounds — was below the 4.5:1 floor for body text */
body.imp .imp-footer__disclaimer,
body.imp .imp-footer__copy {
	color: rgba(245, 242, 236, 0.66);
}

body.imp .imp-section--guide .imp-form__privacy,
body.imp .imp-footer__signup .imp-form__privacy {
	color: rgba(245, 242, 236, 0.66);
}

/* =============================================================================
   27. Responsive (continued)
   ========================================================================== */

@media (max-width: 560px) {
	.imp-choices {
		grid-template-columns: 1fr;
	}

	.imp-configurator__nav .imp-btn {
		flex: 1 1 100%;
	}

	.imp-outcomes,
	.imp-segments {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   28. Cascade corrections — type scale on component headings
   -----------------------------------------------------------------------------
   The same trap section 26 documents for colour applies to the type scale, and
   it is easier to miss because most of the damage is invisible.

   `body.imp h1`, `body.imp h2`, `body.imp h3` are each (0,1,1). A component
   that names its own size with a single class — `.imp-footer__heading`,
   `.imp-form__title`, `.imp-pillar__title` — is (0,1,0) and loses. Where the
   component's intended size happened to sit inside the base clamp the loss went
   unnoticed; where it did not, the result was severe. The footer column labels
   are the clearest case: authored as 0.66rem uppercase Inter, they rendered at
   48px Cormorant, and the six columns collided with each other on desktop.

   Fix as in section 26 — restate with a `body.imp` prefix so the component
   outranks the base. Do NOT solve this by wrapping the base rules in
   `:where()`; that drops them to (0,0,0) and hands headings to Astra.
   ========================================================================== */

body.imp .imp-footer__heading {
	font-family: var(--imp-sans);
	font-size: 0.66rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

body.imp .imp-form__title,
body.imp .imp-concierge__title {
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

body.imp .imp-section__title--small {
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}

body.imp .imp-pillar__title {
	font-size: 1.35rem;
}

body.imp .imp-pain__title {
	font-size: 1.3rem;
}

body.imp .imp-card__title {
	font-size: 1.2rem;
}

body.imp .imp-segment__title {
	font-size: 1.25rem;
}

body.imp .imp-tool__title {
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
}

body.imp .imp-brand-card__name {
	font-size: 1.4rem;
}

/* =============================================================================
   29. Brand system — lockup, page hero, brand band
   -----------------------------------------------------------------------------
   The two approved logo presentation modes. Both use the same mark and the same
   tagline in the same order; only the ground changes. The emblem is never
   recoloured by CSS filters and the image is never scaled on one axis — when a
   logo asset is set it is placed as-is, with `width: auto` against a fixed
   height so it can only ever scale proportionally.
   ========================================================================== */

.imp-lockup {
	display: inline-flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	line-height: 1;
}

.imp-lockup__mark {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.imp-lockup__img {
	display: block;
	height: var(--imp-lockup-h, 40px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.imp-lockup__word {
	font-size: var(--imp-lockup-word, 1.15rem);
}

/* The emblem slot. The infinity-I is a supplied asset, never drawn or recoloured
   here — when no emblem is set the lockup is the wordmark alone, which is the
   brand's current identity unaltered. */
.imp-lockup__emblem {
	display: block;
	flex: none;
	height: var(--imp-lockup-h, 40px);
	width: auto;
	object-fit: contain;
}

.imp-lockup__tagline {
	font-family: var(--imp-sans);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0;
	max-width: none;
}

/* Mode A — dark ground: champagne emblem, ivory wordmark. */
.imp-lockup--on-dark .imp-lockup__word {
	color: var(--imp-cream);
}

.imp-lockup--on-dark .imp-lockup__tagline {
	color: var(--imp-accent-on-dark);
}

/* Mode B — light ground: obsidian wordmark, champagne emblem. The tagline drops
   to the text-safe champagne because at 0.62rem it is body-weight type and the
   decorative champagne would sit at 2.8:1. */
.imp-lockup--on-light .imp-lockup__word {
	color: var(--imp-text-primary);
}

.imp-lockup--on-light .imp-lockup__tagline {
	color: var(--imp-accent-on-light);
}

body.imp a.imp-lockup:hover .imp-lockup__word,
body.imp a.imp-lockup:focus-visible .imp-lockup__word {
	color: inherit;
}

/* -----------------------------------------------------------------------------
   Page hero — the light counterpart to .imp-hero
   -----------------------------------------------------------------------------
   Interior pages previously opened with a bare H1 hard against the sticky
   header. This gives them a ground, a rule, and room to breathe without
   reaching for another black band.
   -------------------------------------------------------------------------- */

.imp-page-hero {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: auto;
	max-width: none;
	padding: clamp(56px, 8vw, 112px) var(--imp-gutter) clamp(44px, 6vw, 84px);
	background:
		radial-gradient(120% 140% at 12% 0%, rgba(176, 141, 79, 0.09), transparent 58%),
		linear-gradient(180deg, var(--imp-surface-alt) 0%, var(--imp-surface) 100%);
	border-bottom: 1px solid var(--imp-rule-soft);
}

.imp-page-hero__inner {
	max-width: var(--imp-max);
	margin-inline: auto;
}

.imp-page-hero--centered .imp-page-hero__inner {
	max-width: 820px;
	text-align: center;
}

body.imp .imp-page-hero__title {
	margin: 0;
	font-size: clamp(2.4rem, 4.6vw, 3.9rem);
	color: var(--imp-text-primary);
}

.imp-page-hero__rule {
	width: 64px;
	height: 1px;
	background: var(--imp-accent);
	margin: 26px 0 0;
	border: 0;
}

.imp-page-hero--centered .imp-page-hero__rule {
	margin-inline: auto;
}

.imp-page-hero__lede {
	margin: 26px 0 0;
	font-size: clamp(1.02rem, 1.4vw, 1.18rem);
	color: var(--imp-text-secondary);
	max-width: var(--imp-max-text);
}

.imp-page-hero--centered .imp-page-hero__lede {
	margin-inline: auto;
}

.imp-page-hero__rule + .imp-page-hero__lede {
	margin-top: 22px;
}

/* -----------------------------------------------------------------------------
   Brand band — the sanctioned dark moment for logo presentation
   -------------------------------------------------------------------------- */

.imp-brand-band {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: auto;
	max-width: none;
	padding: clamp(64px, 8vw, 116px) var(--imp-gutter);
	background:
		radial-gradient(90% 120% at 50% 0%, rgba(176, 141, 79, 0.16), transparent 62%),
		var(--imp-surface-inverse);
	color: var(--imp-text-on-dark-secondary);
	text-align: center;
}

.imp-brand-band__inner {
	max-width: 760px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
}

.imp-brand-band .imp-lockup {
	--imp-lockup-h: 52px;
	--imp-lockup-word: 1.85rem;
	align-items: center;
	text-align: center;
}

.imp-brand-band .imp-lockup__tagline {
	text-align: center;
}

body.imp .imp-brand-band__copy {
	margin: 0;
	color: var(--imp-text-on-dark-secondary);
	max-width: 56ch;
	margin-inline: auto;
}

.imp-brand-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/* -----------------------------------------------------------------------------
   Footer — same obsidian ground, calmer structure
   -------------------------------------------------------------------------- */

.imp-footer__brand .imp-lockup {
	--imp-lockup-h: 34px;
	--imp-lockup-word: 1.4rem;
	margin-bottom: 18px;
}

/* Six auto-fit columns with a 150px floor let a long label ("Customer Care")
   wrap into its neighbour's track on wide viewports. A hard six-up grid above
   1100px, and an explicit minimum below it, keeps the columns in their lanes. */
.imp-footer__cols {
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	column-gap: clamp(20px, 2.4vw, 40px);
	row-gap: 40px;
}

@media (min-width: 1100px) {
	.imp-footer__cols {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.imp-footer__heading {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--imp-rule-on-dark);
}

/* =============================================================================
   30. Responsive — brand system
   ========================================================================== */

@media (max-width: 900px) {
	.imp-page-hero {
		padding-top: clamp(40px, 9vw, 64px);
	}
}

@media (max-width: 560px) {
	.imp-lockup__tagline {
		letter-spacing: 0.22em;
		font-size: 0.58rem;
	}

	.imp-brand-band .imp-lockup {
		--imp-lockup-h: 40px;
		--imp-lockup-word: 1.45rem;
	}

	.imp-brand-band__actions .imp-btn {
		flex: 1 1 100%;
	}
}

/* =============================================================================
   31. Cascade correction — the full-bleed rail
   -----------------------------------------------------------------------------
   Section 2 declares the rail on `.imp-hero, .imp-trust, .imp-section,
   .imp-footer, .imp-plan` — (0,1,0). Astra routes every designed band through
   `body.imp .entry-content > *` (0,2,1), whose `margin-inline: auto` resets
   both sides to zero. The rail therefore never applied to anything inside the
   content area: measured at 1440px, every band stopped 120px short on each
   side. Only the footer, which renders outside `.entry-content`, ever bled.

   The visible consequence was the whole point of the rebalance: dark bands read
   as heavy floating blocks and light bands as cards on a card, so the page felt
   boxed-in and much darker than the colour ratio actually was. Restated one
   level more specific — (0,3,1) — so the intent in section 2 lands.
   ========================================================================== */

body.imp .entry-content > .imp-hero,
body.imp .entry-content > .imp-trust,
body.imp .entry-content > .imp-section,
body.imp .entry-content > .imp-plan,
body.imp .entry-content > .imp-page-hero,
body.imp .entry-content > .imp-brand-band {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: auto;
	max-width: none;
}

/* Everything else in the content flow keeps Astra's measure, but centred on the
   same rail the bands use so an editorial page and a designed page line up. */
body.imp .entry-content > .imp-form-wrap,
body.imp .entry-content > .imp-disclaimer {
	margin-inline: auto;
}

/* =============================================================================
   32. Cascade corrections — accent on the remaining dark grounds
   -----------------------------------------------------------------------------
   `.imp-section--guide`, `.imp-brand-band`, and the footer signup are dark but
   are not `.imp-section--dark`, so the eyebrow and the required-field marker
   were still resolving to the on-LIGHT accent — champagne-deep on obsidian,
   which measures 3.9:1. Same token, correct variant.
   ========================================================================== */

body.imp .imp-section--guide .imp-eyebrow,
body.imp .imp-brand-band .imp-eyebrow,
body.imp .imp-section--guide .imp-field__req,
body.imp .imp-footer .imp-field__req {
	color: var(--imp-accent-on-dark);
}

body.imp .imp-section--guide .imp-form__intro,
body.imp .imp-footer .imp-form__intro {
	color: var(--imp-text-on-dark-secondary);
}

body.imp .imp-section--guide .imp-field label,
body.imp .imp-footer .imp-field label {
	color: var(--imp-text-on-dark-muted);
}

/* =============================================================================
   33. Cascade correction — Astra's content underline on component links
   -----------------------------------------------------------------------------
   Astra emits `.ast-single-post .entry-content a { text-decoration: underline }`
   in its dynamic inline CSS — (0,2,1), which beats `.imp-btn { text-decoration:
   none }` at (0,1,0). Every CTA in the content area therefore rendered with a
   browser underline running through its letter-spaced uppercase label: the
   primary buttons, the ghost buttons, the "Explore the category" micro-links,
   and the whole-card links.

   Only links that carry a component class are exempted. Plain prose links in
   editorial and legal copy keep their underline, which is the correct
   affordance for a link inside a paragraph.
   ========================================================================== */

body.imp .entry-content a[class*="imp-"],
body.imp .entry-content a[class*="imp-"]:hover,
body.imp .entry-content a[class*="imp-"]:focus,
body.imp .entry-content a[class*="imp-"]:visited {
	text-decoration: none;
}

/* .imp-link draws its own underline as a border so it can animate on hover;
   restore that after the blanket removal above. */
body.imp .entry-content a.imp-link {
	border-bottom: 1px solid rgba(125, 95, 31, 0.32);
}

body.imp .entry-content a.imp-link:hover,
body.imp .entry-content a.imp-link:focus-visible {
	border-bottom-color: var(--imp-accent-on-light);
}

body.imp .imp-section--dark .imp-link,
body.imp .imp-section--charcoal .imp-link,
body.imp .imp-section--guide .imp-link,
body.imp .imp-brand-band .imp-link,
body.imp .imp-package .imp-link,
body.imp .imp-tech .imp-link {
	border-bottom-color: rgba(227, 210, 174, 0.36);
}

/* -----------------------------------------------------------------------------
   WooCommerce's own required marker
   -----------------------------------------------------------------------------
   Ships as pure #f00, which is both off-palette and 3.8:1 on cream. IMPERVITA
   already has a required marker (`.imp-field__req`, the accent); WooCommerce
   forms use the same one so there is a single language for it site-wide.
   -------------------------------------------------------------------------- */

body.imp .woocommerce form .form-row .required,
body.imp .woocommerce .required,
body.imp abbr.required,
body.imp span.required {
	color: var(--imp-accent-on-light);
	text-decoration: none;
	border: 0;
}

/* =============================================================================
   34. The Journal — page hero on the posts page
   -----------------------------------------------------------------------------
   /journal/ is the posts page, so it runs Astra's blog template rather than the
   page template, and two of Astra's defaults broke the hero treatment that
   About, FAQs, and Research Library get for free. The post grid below the hero
   is Astra's own and is deliberately left alone.
   ========================================================================== */

/* Astra gives #primary a top margin on the blog layout, so the hero floated
   below a band of bare cream instead of sitting flush under the header the way
   it does on every other page carrying one. Measured: 95px there, 0 elsewhere. */
body.imp.blog #primary {
	margin-top: 0;
}

/* Astra's dynamic CSS emits `margin: 60px 0` on #primary for some page
   templates and `0` for others, so the hero sat flush under the header on
   About and Research Library but 60px clear of it on FAQs. `body.imp-has-page-hero`
   is set only on pages whose content actually opens with the hero, so this
   cancels the offset there without changing spacing on any other page.

   Note the rule in section 2 spells this `body.imp .ast-plain-container…` with a
   descendant combinator — but Astra puts those classes on <body> itself, so that
   selector has never matched anything. It is left alone rather than "fixed",
   because making it match would zero the top margin on every plain-container
   page, hero or not.

   `padding-top` matters as much as `margin-top`: below 993px Astra switches
   `.ast-separate-container #primary` to `padding: 4em 0`, which put the Journal
   hero 64px clear of the header on iPad portrait and every phone while the
   other three stayed flush. */
body.imp.imp-has-page-hero #primary {
	margin-top: 0;
	padding-top: 0;
}

body.imp .imp-posts-intro {
	margin: 0;
}

/* Astra paints post meta with --ast-global-color-0 — a royal blue that is not
   in the IMPERVITA palette and read as an error immediately under the hero.
   `.entry-meta *` is (0,1,0), so the `body.imp` prefix is what carries this. */
body.imp .entry-meta,
body.imp .entry-meta *,
body.imp .entry-meta a {
	color: var(--imp-text-muted);
}

body.imp .entry-meta a:hover,
body.imp .entry-meta a:focus-visible {
	color: var(--imp-accent-on-light);
}

/* =============================================================================
   35. Form controls — a fixed height fighting the line box
   -----------------------------------------------------------------------------
   Astra's dynamic inline CSS sizes form fields as a set:
   `height: 40px; line-height: 24px; padding: 12px 16px`. Internally consistent.

   Section 15 then re-pads them to `14px 15px` for the IMPERVITA scale but never
   released the height, and `.imp-field select` (0,1,1) ties with Astra's
   `input[type="text"], …, select` (0,1,1) — a tie Astra wins, because its
   dynamic CSS is printed after the child stylesheet.

   So every control was a 40px border-box holding 28px of padding and 2px of
   border: a 10px content box for a 24px line. Text overflowed it top and bottom
   and sat low against the bottom edge. It read as a select-only bug because a
   select always paints its selected option, while an empty text input has
   nothing to clip yet — the five consultation dropdowns were simply the first
   place it became visible. Measured on desktop, iPad and phone alike.

   The fix is to stop fixing the height: `height: auto` lets the control be
   sized by its own padding and line box (24 + 28 + 2 = 54px), and `min-height`
   is a floor so inputs and selects can never disagree. Nothing else about the
   controls changes.
   ========================================================================== */

body.imp .imp-field input:not([type="checkbox"]):not([type="radio"]),
body.imp .imp-field select {
	height: auto;
	min-height: 54px;
}

/* Astra ships a chevron for selects — background-image, appearance: none, and
   `padding-right: 2em` to clear it. Section 15's `background: var(--imp-white)`
   shorthand reset that background-image to none and its `padding: 14px 15px`
   dropped the reserved space, so every select on the site rendered as a plain
   box with no dropdown affordance at all. Restated here as an explicit
   background-image so the shorthand can no longer erase it. */
body.imp .imp-field select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='7'%20viewBox='0%200%2011%207'%3E%3Cpath%20d='M1%201l4.5%204.5L10%201'%20fill='none'%20stroke='%2362656a'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 11px 7px;
}

/* =============================================================================
   36. Mobile form controls — the 16px floor that stops iOS auto-zoom
   -----------------------------------------------------------------------------
   iOS Safari zooms the viewport when a text control smaller than 16px receives
   focus, and does not zoom back out. Section 15 sizes controls at `0.98rem`;
   Astra's responsive typography sets `html { font-size: 91.2% }` on mobile, so
   the root is 14.592px there and 0.98rem lands at 14.3px — under the threshold
   on every input, select, and textarea in the form system. (The predictive
   search field was already 16px and is untouched.)

   `rem` cannot express the floor, because the root itself is what shrank. The
   value is therefore an absolute 16px — the minimum that suppresses the zoom,
   not a design change: `line-height` is an absolute 24px from Astra, so the
   line box, the 54px control height from section 35, the label scale, the
   spacing, and the chevron position are all unaffected.

   Scoped to small viewports so desktop typography is untouched. Deliberately
   NOT solved with `maximum-scale=1` or `user-scalable=no`: those stop the zoom
   by disabling pinch-zoom entirely, which breaks accessibility zoom for
   everyone.
   ========================================================================== */

@media (max-width: 1024px) {
	body.imp .imp-field input:not([type="checkbox"]):not([type="radio"]),
	body.imp .imp-field select,
	body.imp .imp-field textarea {
		font-size: 16px;
	}
}

/* =============================================================================
   37. The brand wordmark
   -----------------------------------------------------------------------------
   One class for every place the word IMPERVITA stands alone as the mark: the
   header, the footer lockup, and the brand band. It carries the typography and
   nothing else — size and colour stay with the component, so the header can be
   1.2rem obsidian and the brand band 1.65rem ivory while both remain the same
   wordmark.

   The face is the display serif the design system already loads (Cormorant
   Garamond, weights 300/400/500) — no new font is requested. 500 rather than
   400 because Cormorant's high stroke contrast thins out badly at 16px, and the
   header mark has to hold up next to the utility icons.

   Tracking is 0.18em, down from the 0.34em the sans mark used: a serif at this
   size needs far less air between caps before it stops reading as a word. The
   negative right margin absorbs the trailing letter-space, which would
   otherwise push the mark visually left of centre in the centred lockups.

   IMPORTANT: this is for the standalone MARK only. Editorial headings that
   contain the word — "Why IMPERVITA", "The IMPERVITA range.", "Speak With an
   IMPERVITA Wellness Advisor" — must keep their surrounding typography, or
   sentences end up mixing two faces mid-line.
   ========================================================================== */

.imp-wordmark {
	font-family: var(--imp-display);
	font-weight: 500;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	line-height: 1;
	text-shadow: none;
	white-space: nowrap;
	margin-right: -0.18em;
}

/* Tracking that holds at every size the mark is used: tighter as it gets
   larger, because letter-spacing is proportional but optical need is not. */
.imp-brand-band .imp-wordmark {
	letter-spacing: 0.16em;
	margin-right: -0.16em;
}

@media (max-width: 560px) {
	.imp-wordmark {
		letter-spacing: 0.16em;
		margin-right: -0.16em;
	}
}

/* =============================================================================
   38. Brand mark — placement and scale
   -----------------------------------------------------------------------------
   The mark was rendering at 42px in the header and 34px in the footer, from a
   file that was itself only 108x48. The file was the real fault:
   `add_theme_support( 'custom-logo' )` declared `height => 48` with no
   `flex-height`, so the Customizer read 48px as a crop target and rewrote the
   600x247 upload down to a thumbnail. There was nothing left to scale up to.
   functions.php is flexible on both axes now, and the size is decided here.

   Two renditions of one mark, each in the slot it was drawn for: the horizontal
   lockup in the header bar, where height is the scarce dimension, and the
   stacked lockup in the footer and the brand band, where there is room for the
   emblem to sit above the wordmark. Neither is ever scaled on a single axis —
   every rule below fixes one dimension and leaves the other `auto`, so the
   artwork can only ever scale proportionally.
   ========================================================================== */

/* Header ---------------------------------------------------------------------
   `--imp-brand-h` is the height of the FILE, not of the ink. The supplied
   horizontal artwork carries 5.5% padding above the mark and 16% below it, so
   only 78.6% of the box is ink and height-fitting alone parks the mark 5.2%
   high in the bar. The translate returns it to the optical centre line. It is a
   presentation offset and never touches the artwork.

   `max-height` must be restated: section 4 caps this element at 42px, and a
   `max-height` beats a larger `height` regardless of source order. */
.imp-brand__logo {
	--imp-brand-h: clamp(46px, 4.4vw, 64px);
	height: var(--imp-brand-h);
	max-height: none;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	transform: translateY(calc(var(--imp-brand-h) * 0.052));
}

/* The bar grows by 8px to carry the larger mark, set on the token rather than
   on `.imp-header__inner` so the anchor offset in section 17
   (`scroll-margin-top: calc(var(--imp-header-h) + 20px)`) stays in step with
   the real header height. Below 1025px the nav collapses to the burger and the
   bar keeps its 76px. */
@media (min-width: 1025px) {
	body.imp {
		--imp-header-h: 84px;
	}
}

/* Phone headers hold a burger, the mark, and four utility buttons on a 350px
   content box. The mark yields first — at 36px the file is 108px wide, which
   leaves the utility rail intact rather than overflowing the viewport. */
@media (max-width: 1024px) {
	.imp-brand__logo {
		--imp-brand-h: 42px;
	}
}

@media (max-width: 560px) {
	.imp-brand__logo {
		--imp-brand-h: 36px;
	}
}

/* The lockup, where artwork carries the tagline ------------------------------
   When a logo image is set it already contains the wordmark AND
   WELLNESS • RECOVERY • LONGEVITY. The text tagline underneath would state it a
   second time, which only looked acceptable while the image was too small to
   read. It stays in the DOM for assistive technology and is taken off screen.
   Absolute positioning also removes it as a flex item, so the column gap above
   it collapses on its own. */
.imp-lockup--has-img .imp-lockup__tagline {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Footer ---------------------------------------------------------------------
   The stacked artwork (attachment 260) floats in a 3:1 canvas with 14.4% / 14.8%
   transparent padding on its sides — only 70.8% of the file's width is ink.
   Sizing the CANVAS would therefore draw the mark 29% smaller than the box
   suggests, so the box is given roughly the INK's aspect and `object-fit: cover`
   trims the padding away. The ink is centred to within 0.24%, so
   `object-position` stays at 50%.

   2.2 is NOT the ink's exact aspect. Measured on the rendition actually served,
   the ink fills the full canvas height, so the minimum box aspect that shows
   every pixel is 2.1470 — and at exactly that value `cover` has zero slack and
   resampling clips the I and the A off IMPERVITA. 2.2 leaves ~3px of margin on
   each side at this size. Treat 2.1470 as a hard floor, not a target.

   Sized by width, not height: the brand column is `minmax(220px, 300px)`, and a
   fixed height would push the mark past the column floor at 220px. `min()`
   makes the column the ceiling, so the lockup can never overflow and never
   needs a distorting `max-width` correction.

   288px wide is 118px tall, at which the emblem reads, IMPERVITA reads, and the
   tagline inside the artwork is still legible — which is the whole point of
   using the stacked rendition here.

   `display: flex` in place of the inherited `inline-flex` gives the mark a
   resolvable containing block; against an inline-flex parent, `width: 100%`
   would be circular. `flex-direction: column` is inherited from `.imp-lockup`
   and deliberately not restated. */
.imp-footer__brand .imp-lockup {
	display: flex;
	align-items: flex-start;
	max-width: 100%;
}

.imp-footer__brand .imp-lockup__mark {
	width: 100%;
}

.imp-footer__brand .imp-lockup__img {
	height: auto;
	max-height: none;
	width: min(100%, 258px);
	aspect-ratio: 2.2;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Brand band ----------------------------------------------------------------
   Same trim as the footer. Attachment 260's ink is centred to within 0.2%, so
   no `object-position` offset is needed here — unlike attachment 268, which sat
   5.5% off-axis and needed a translate. If the stacked slot is ever repointed,
   re-measure the alpha bounding box before trusting these numbers. */
.imp-brand-band .imp-lockup {
	--imp-lockup-h: clamp(88px, 11vw, 132px);
}

.imp-brand-band .imp-lockup__img {
	height: var(--imp-lockup-h, 40px);
	width: auto;
	aspect-ratio: 2.2;
	object-fit: cover;
	object-position: 50% 50%;
}

@media (max-width: 560px) {
	.imp-brand-band .imp-lockup {
		--imp-lockup-h: 84px;
	}
}

/* =============================================================================
   39. Contact routes — sales and support
   -----------------------------------------------------------------------------
   Two published addresses, stored once in IMPERVITA → Settings and rendered by
   inc/contact.php. Every link here is a real `mailto:` carrying the address as
   its own link text: the address is the thing people copy, and "email us" gives
   a screen-reader user nothing to act on out of context.

   On-dark rules carry a `body.imp` prefix. Section 26 restates the base link
   colour at (0,2,2); a single-class component is (0,1,0) and would lose, which
   is how footer links were painted charcoal on obsidian once already.
   ========================================================================== */

.imp-footer__contacts {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.imp-footer__contacts-label {
	display: block;
	font-family: var(--imp-sans);
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--imp-accent-on-dark);
	margin-bottom: 3px;
}

body.imp .imp-footer__contacts a {
	color: rgba(245, 242, 236, 0.82);
	text-decoration: none;
	font-size: 0.9rem;
	/* Addresses are long and the column floor is 220px. Break on the word, not
	   mid-character, so "support@impervita.com" never splits as "suppor|t@". */
	overflow-wrap: anywhere;
	transition: color var(--imp-fast) var(--imp-ease);
}

body.imp .imp-footer__contacts a:hover,
body.imp .imp-footer__contacts a:focus-visible {
	color: var(--imp-champagne-soft);
}

/* The contact page split ---------------------------------------------------- */

.imp-contact-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: clamp(18px, 2.4vw, 28px);
	margin: 0 0 26px;
}

.imp-contact-card {
	padding: clamp(22px, 2.6vw, 32px);
	background: var(--imp-surface-alt);
	border: 1px solid var(--imp-rule-soft);
	border-radius: var(--imp-radius);
}

body.imp .imp-contact-card__title {
	font-family: var(--imp-sans);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--imp-accent-on-light);
	margin: 0 0 10px;
}

body.imp .imp-contact-card__copy {
	margin: 0 0 16px;
	color: var(--imp-text-secondary);
	font-size: 0.94rem;
	max-width: none;
}

/* (0,2,2) so it clears the `body.imp a` base colour, and matched on the element
   as well as the class so it cannot be undercut by a bare `a` rule later. */
body.imp a.imp-contact__email {
	font-family: var(--imp-sans);
	font-size: 1.02rem;
	color: var(--imp-text-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--imp-rule-accent);
	padding-bottom: 2px;
	overflow-wrap: anywhere;
	transition: color var(--imp-fast) var(--imp-ease), border-color var(--imp-fast) var(--imp-ease);
}

body.imp a.imp-contact__email:hover,
body.imp a.imp-contact__email:focus-visible {
	color: var(--imp-accent-on-light);
	border-bottom-color: currentColor;
}

.imp-contact-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	margin: 0 0 32px;
}

body.imp .imp-contact-meta__item {
	margin: 0;
	color: var(--imp-text-muted);
	font-size: 0.9rem;
}

/* A single labelled route, for a page that only has one ---------------------- */

.imp-contact-line {
	margin: 0 0 20px;
}

.imp-contact-line__label {
	display: block;
	font-family: var(--imp-sans);
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--imp-accent-on-light);
	margin-bottom: 6px;
}

/* The concierge panel. Ground-agnostic on purpose — the panel is a modal that
   may be restyled onto either surface, so colour is inherited rather than
   named, and the link is distinguished by an underline instead. */
.imp-concierge__direct {
	margin: 14px 0 0;
	font-size: 0.9rem;
	color: inherit;
	opacity: 0.85;
}

body.imp a.imp-concierge__direct-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

/* =============================================================================
   40. Typographic hierarchy — weight, not size
   -----------------------------------------------------------------------------
   Everything the system says was being said in one tone of voice: every
   Cormorant heading sat at 400 and every Inter label at 500, so a card's topic
   name carried no more authority than the sentence underneath it and the eye
   had no entry point into a card. This section adds the missing step in WEIGHT
   ONLY. Nothing here touches size, colour, tracking, padding, borders, radius,
   or layout — each rule re-uses the declarations already authored above and
   adds a single `font-weight`.

   The available weights are fixed by what the site actually loads (see the
   Google Fonts request in `impervita_child_assets()`): Cormorant Garamond
   300/400/500 and Inter 300/400/500/600. **500 is therefore the heaviest REAL
   Cormorant on this site.** Asking a heading for 600 would hand the browser a
   synthetic bold, which smears a high-contrast serif and produces exactly the
   generic heavy type this design avoids. So Cormorant headings step 400 -> 500
   and Inter labels/CTAs step 500 -> 600. Do not raise either further without
   first adding the weight to the font request.

   Every selector carries the `body.imp` prefix for the same reason as SS26 and
   SS28: the base rules `body.imp h1..h4 { font-weight: 400 }` are (0,1,1), so a
   single-class component at (0,1,0) would lose and silently keep 400.

   LEVEL 5 (body copy) is deliberately absent. `.imp-section__lede`,
   `.imp-outcome__copy`, `.imp-tech__tagline`, `.imp-card__copy`,
   `.imp-pillar__copy`, `.imp-pain__problem`, `.imp-segment__copy` and the prose
   classes keep the weight they have — the contrast against the levels below is
   what creates the hierarchy, so making body copy heavier would erase it.
   ========================================================================== */

/* Level 1 — major section headings ("What Would You Like to Improve?").
   Already the largest type in the band; 500 gives them authority without
   changing the measure they occupy. The two display titles are deliberately
   excluded: `.imp-hero__title` and `.imp-page-hero__title` open a page at
   2.4-4.4rem, their lightness is an authored decision rather than an
   oversight, and size alone keeps them above everything here. */
body.imp .imp-section__title,
body.imp .imp-section__title--small,
body.imp .imp-form__title,
body.imp .imp-concierge__title,
body.imp .imp-guide__title,
body.imp .imp-empty__title,
body.imp .imp-single__heading,
body.imp .imp-plan__title,
body.imp .imp-step__question {
	font-weight: 500;
}

/* Level 2 — topic and card headings ("Recovery & Performance", "Home
   Wellness", "Longevity Technology"). This is what read too light: a
   1.1-1.6rem Cormorant at 400 sits at nearly the same optical density as the
   0.92-0.95rem Inter paragraph below it. Same 500 as Level 1, but the ~2x size
   gap keeps the order intact. */
body.imp .imp-outcome__title,
body.imp .imp-tech__name,
body.imp .imp-card__title,
body.imp .imp-product-card__title,
body.imp .imp-pillar__title,
body.imp .imp-pain__title,
body.imp .imp-tool__title,
body.imp .imp-segment__title,
body.imp .imp-brand-card__name,
body.imp .imp-rank__title,
body.imp .imp-plan__card-title,
body.imp .imp-compare__name {
	font-weight: 500;
}

/* Level 3 — category and topic labels (COLD PLUNGE SYSTEMS, MASSAGE CHAIRS,
   RED LIGHT THERAPY, PEMF). Inter 500 -> 600 at 0.66-0.72rem with 0.12-0.24em
   tracking: the advance-width difference is under 1%, so the chips keep their
   border, padding and dimensions and the flex rows wrap where they already do.
   Metadata labels are NOT included — `.imp-eyebrow`, `.imp-footer__heading`,
   `.imp-product-card__brand`, `.imp-single__brand`, `.imp-single__fact-label`,
   `.imp-filters__label`, `.imp-contact-card__title` and the contact labels name
   a field rather than a topic, and holding them at 500 is precisely what lets
   the category chips read as the scannable layer. */
body.imp .imp-tag,
body.imp .imp-badge,
body.imp .imp-package__name,
body.imp .imp-service__name {
	font-weight: 600;
}

/* The one place the weight step had to be paid for. At 1440px the Outcomes
   grid resolves to five 261px columns, which leaves a chip a 157px text box —
   and "COLD PLUNGE SYSTEMS" measures 157.08px at Inter 500/0.12em. It fits by
   0.08px. At 600 it measures 158.08px and wrapped to two lines inside its own
   border on three cards, which also pushed the whole row from 454px to 471px.

   Dropping the tracking by 0.005em returns the string to 157.08px at 600 — the
   SAME rendered width it has today, so every chip, row and card height is
   identical to before the weight change. 0.005em is 0.05px per character: the
   uppercase chip still reads as tracked-out, and the compensation is invisible
   at every size the site uses.

   "COMMERCIAL WELLNESS" already wrapped at 1440px before any of this — that is
   pre-existing and deliberately left alone. Do NOT fix the fit by shrinking the
   chip's font-size or padding; those dimensions are the design. Inter is served
   here as static faces (300/400/500/600), so an intermediate `font-weight: 550`
   silently snaps back to 500 and buys nothing. */
body.imp .imp-tag,
body.imp .imp-badge {
	letter-spacing: 0.115em;
}

/* Level 4 — calls to action (VIEW RECOMMENDATIONS, EXPLORE, READ, and every
   button). `.imp-outcome__cta`, `.imp-tech__more` and `.imp-card__more` never
   declared a weight at all, so they inherited 400 from `body` and were the
   lightest thing in their own card — the one element that most needed to be
   found. Buttons are `inline-flex` with content-driven width and 20-38px of
   horizontal padding, so a sub-1% text-width change can neither resize nor
   wrap them. Navigation is untouched: `.imp-nav__link`, `.imp-mega__link` and
   the drawer keep their existing weight. */
body.imp .imp-btn,
body.imp .imp-link,
body.imp .imp-outcome__cta,
body.imp .imp-tech__more,
body.imp .imp-card__more,
body.imp .woocommerce a.button,
body.imp .woocommerce button.button,
body.imp .woocommerce input.button,
body.imp .woocommerce div.product form.cart .button,
body.imp .woocommerce #respond input#submit {
	font-weight: 600;
}

/* =============================================================================
   41. Published business details — telephone and mailing address
   -----------------------------------------------------------------------------
   The number and the address are stored once in IMPERVITA → Settings and
   rendered by inc/contact.php, alongside the two email routes in section 39.
   These rules only dress what that module prints; nothing here names a value.

   `<address>` is the correct element for the business's own contact details,
   but every UA stylesheet italicises it, which reads as an aside next to the
   footer's upright Inter. `font-style: normal` is restated on the element
   itself so the semantics survive without the visual mismatch.

   On-dark colours carry a `body.imp` prefix throughout. `body.imp a` is (0,2,2)
   after section 26 and a single-class component is (0,1,0); that mismatch is
   what painted every footer link charcoal-on-obsidian once already.
   ========================================================================== */

.imp-address {
	font-style: normal;
	display: grid;
	gap: 2px;
	margin: 0;
}

.imp-address__label {
	display: block;
	font-family: var(--imp-sans);
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--imp-accent-on-light);
	margin-bottom: 5px;
}

.imp-address__line {
	display: block;
	font-family: var(--imp-sans);
	font-size: 0.9rem;
	line-height: 1.55;
	/* Break on the word, never mid-character: "Camelback" must not split as
	   "Camelb|ack" when the brand column is at its 220px floor. */
	overflow-wrap: break-word;
}

/* The footer block ---------------------------------------------------------- */

.imp-footer__address {
	margin: 18px 0 0;
	/* The brand column is minmax(220px, 300px); nothing here may exceed it or
	   the footer grid gains a horizontal scrollbar at 1100px. */
	max-width: 100%;
}

body.imp .imp-footer__address .imp-address__label {
	color: var(--imp-accent-on-dark);
}

body.imp .imp-footer__address .imp-address__line {
	color: rgba(245, 242, 236, 0.82);
}

/* The contact page ---------------------------------------------------------- */

/* Matched on the element as well as the class, exactly like
   `a.imp-contact__email` above, so a later bare `a` rule cannot undercut it. */
body.imp a.imp-contact__phone {
	font-family: var(--imp-sans);
	font-size: 1.02rem;
	color: var(--imp-text-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--imp-rule-accent);
	padding-bottom: 2px;
	white-space: nowrap;
	transition: color var(--imp-fast) var(--imp-ease), border-color var(--imp-fast) var(--imp-ease);
}

body.imp a.imp-contact__phone:hover,
body.imp a.imp-contact__phone:focus-visible {
	color: var(--imp-accent-on-light);
	border-bottom-color: currentColor;
}

/* Inside the footer's contact list the phone is a plain list link and inherits
   section 39's treatment; the bordered form above would be wrong on obsidian. */
body.imp .imp-footer__contacts a.imp-contact__phone {
	font-size: 0.9rem;
	border-bottom: 0;
	padding-bottom: 0;
	color: rgba(245, 242, 236, 0.82);
}

body.imp .imp-footer__contacts a.imp-contact__phone:hover,
body.imp .imp-footer__contacts a.imp-contact__phone:focus-visible {
	color: var(--imp-champagne-soft);
}

.imp-contact-meta {
	align-items: flex-start;
}

.imp-contact-meta__label {
	display: block;
	font-family: var(--imp-sans);
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--imp-accent-on-light);
	margin-bottom: 5px;
}

body.imp .imp-address--meta .imp-address__line {
	color: var(--imp-text-muted);
}

/* A contact line's channels sit inline; the separator is decorative and is
   hidden from assistive technology by the markup. It is dropped below 480px,
   where the email and the number stack instead of sharing a row. */
.imp-contact-line__sep {
	color: var(--imp-rule-accent);
}

@media (max-width: 480px) {
	.imp-contact-line__sep {
		display: none;
	}

	body.imp a.imp-contact__email,
	body.imp a.imp-contact__phone {
		display: inline-block;
		margin-bottom: 8px;
	}
}

/* A section title promoted to the page H1 -------------------------------------
   IMPERVITA PRO, Our Brands, and the seven Solutions pages each consist of a
   single section whose title was already the largest heading on the page, but
   marked up as an H2 — so those pages rendered with no H1 at all.
   `[... level="1"]` corrects the tag.

   `body.imp h1` and `body.imp h2` (section 3) size the two levels very
   differently — clamp(2.6rem, 5.2vw, 4.4rem) against clamp(2rem, 3.6vw, 3rem) —
   so the tag change alone would have grown the title by roughly half. This
   restates the child theme's OWN h2 metrics at (0,2,1), which beats
   `body.imp h1` (0,1,1). The promotion is semantic only; nothing moves.

   Keep these values identical to `body.imp h2` in section 3. An earlier version
   restated *Astra's* h2 metrics (1.875rem/1.5625rem) instead — but the child
   sheet overrides Astra, so that pinned the promoted H1 to 30px against the
   48px its sibling H2 section titles actually render at, shrinking it rather
   than leaving it alone.

   Weight is untouched: section 40 already pins `.imp-section__title` to 500 for
   every level. */
body.imp h1.imp-section__title {
	font-size: clamp(2rem, 3.6vw, 3rem);
	line-height: 1.08;
}

/* =============================================================================
   41. Research Library and buying guides — link affordances
   -----------------------------------------------------------------------------
   Astra emits `.ast-single-post .entry-content a { text-decoration: underline }`
   at (0,2,1). Section 33 exempted links carrying an `imp-` class, but the
   Research Library analysis, the category guides and the resource cards are
   built from plain <a> elements inside `imp-` containers, so every study title,
   citation, record link and card heading rendered with a browser underline.
   On long scientific titles that underline runs through the descenders and
   makes a dense reference list unreadable.

   Removal is scoped to those four components at (0,3,1) — enough to win without
   !important. Site navigation, the footer, and editorial prose links elsewhere
   are deliberately untouched, so a link inside a paragraph of ordinary copy
   keeps the underline that is the correct affordance for it.

   Nothing here relies on colour alone: every link that sits inside running text
   or a dense list keeps a 1px bottom border in place of the underline, and
   keyboard focus is given an explicit outline.
   ========================================================================== */

body.imp .entry-content .imp-res a,
body.imp .entry-content .imp-guide a,
body.imp .entry-content .imp-card a,
body.imp .entry-content .imp-segment a {
	text-decoration: none;
}

/* Card and entry titles read as headings. No rule, a clear hover and focus
   colour shift, and the existing typography untouched. */
body.imp .entry-content .imp-card__title a {
	color: var(--imp-text-primary);
	border-bottom: 0;
	transition: color 160ms ease;
}

body.imp .entry-content .imp-card__title a:hover,
body.imp .entry-content .imp-card__title a:focus-visible {
	color: var(--imp-accent-on-light);
}

/* The card CTA is already a distinct micro-label; it needs no underline. */
body.imp .entry-content .imp-card__more a {
	color: var(--imp-accent-on-light);
	border-bottom: 0;
}

body.imp .entry-content .imp-card__more a:hover,
body.imp .entry-content .imp-card__more a:focus-visible {
	border-bottom: 1px solid var(--imp-accent-on-light);
}

/* Links inside running text and inside dense citation, reference and record
   lists keep a border-drawn underline. It carries the same affordance without
   colliding with descenders, and it animates on hover. */
body.imp .entry-content .imp-res a:not(.imp-btn),
body.imp .entry-content .imp-guide a:not(.imp-btn) {
	color: var(--imp-accent-on-light);
	border-bottom: 1px solid rgba(125, 95, 31, 0.32);
	transition: border-color 160ms ease;
}

body.imp .entry-content .imp-res a:not(.imp-btn):hover,
body.imp .entry-content .imp-res a:not(.imp-btn):focus-visible,
body.imp .entry-content .imp-guide a:not(.imp-btn):hover,
body.imp .entry-content .imp-guide a:not(.imp-btn):focus-visible {
	border-bottom-color: var(--imp-accent-on-light);
}

/* Buttons stay buttons. */
body.imp .entry-content .imp-res a.imp-btn,
body.imp .entry-content .imp-guide a.imp-btn {
	border-bottom: 0;
	text-decoration: none;
}

/* Keyboard focus must remain unmistakable everywhere in these components. */
body.imp .entry-content .imp-res a:focus-visible,
body.imp .entry-content .imp-guide a:focus-visible,
body.imp .entry-content .imp-card a:focus-visible,
body.imp .entry-content .imp-segment a:focus-visible {
	outline: 2px solid var(--imp-accent-on-light);
	outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Research analysis — reading measure and mobile density
   -----------------------------------------------------------------------------
   The analysis pages are long-form reading, and at 390px the record table and
   long scientific titles were the two things most likely to overflow or crowd.
   -------------------------------------------------------------------------- */

body.imp .imp-res {
	max-width: 46rem;
}

body.imp .imp-res__standfirst {
	margin: 0 0 2rem;
	padding: 1.1rem 1.25rem;
	border-left: 3px solid var(--imp-champagne-soft);
	background: rgba(227, 210, 174, 0.14);
}

body.imp .imp-res__standfirst p {
	margin: 0 0 0.5rem;
}

body.imp .imp-res__standfirst p:last-child {
	margin-bottom: 0;
}

body.imp .imp-res__tech-label,
body.imp .imp-card__tech-label {
	display: inline-block;
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--imp-champagne-deep);
	margin-right: 0.4em;
}

body.imp .imp-res__section {
	margin: 0 0 2.25rem;
}

body.imp .imp-res__heading {
	font-size: 1.28rem;
	margin: 0 0 0.75rem;
}

body.imp .imp-res__subheading {
	font-size: 1rem;
	margin: 1.25rem 0 0.5rem;
}

body.imp .imp-res__list li,
body.imp .imp-res__cites li {
	margin: 0 0 0.6rem;
	line-height: 1.6;
}

body.imp .imp-res__cite-title {
	font-weight: 500;
}

body.imp .imp-res__cite-meta,
body.imp .imp-res__cite-note {
	display: block;
	font-size: 0.88rem;
	color: var(--imp-slate);
}

body.imp .imp-res__cite-note {
	margin-top: 0.15rem;
}

body.imp .imp-res__grade {
	display: inline-block;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--imp-champagne-soft);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	margin: 0 0 0.75rem;
}

/* The source record is a definition list, laid out as label/value rows that
   collapse to stacked pairs on narrow screens. `minmax(0, 1fr)` is what stops
   a long DOI or author list forcing horizontal overflow. */
body.imp .imp-res__table {
	margin: 0;
	border-top: 1px solid rgba(11, 12, 14, 0.1);
}

body.imp .imp-res__row {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: 0.25rem 1.5rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid rgba(11, 12, 14, 0.08);
}

body.imp .imp-res__row dt {
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--imp-slate);
	margin: 0;
}

body.imp .imp-res__row dd {
	margin: 0;
	overflow-wrap: anywhere;
}

body.imp .imp-res__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 2rem 0 1.5rem;
}

body.imp .imp-card__finding,
body.imp .imp-card__limit {
	font-size: 0.88rem;
	line-height: 1.55;
	margin: 0 0 0.45rem;
}

body.imp .imp-card__limit {
	color: var(--imp-slate);
}

body.imp .imp-card__cite {
	font-size: 0.8rem;
	color: var(--imp-slate);
	margin: 0 0 0.5rem;
	overflow-wrap: anywhere;
}

body.imp .imp-card__topic {
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--imp-slate);
}

body.imp .imp-card--resource .imp-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	margin: 0 0 0.5rem;
}

@media (max-width: 782px) {
	body.imp .imp-res__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2rem;
	}

	body.imp .imp-res__heading {
		font-size: 1.15rem;
	}

	body.imp .imp-res__standfirst {
		padding: 0.9rem 1rem;
	}

	body.imp .imp-res__actions .imp-btn {
		width: 100%;
		text-align: center;
	}
}

/* =============================================================================
   42. Contextual prose links, and the advisor tab on small screens
   -----------------------------------------------------------------------------
   Two remaining items from the Research Library pass.

   (a) `p.imp-seo-link` is the contextual link paragraph used at the foot of
   guides, category pages and library pages. Those links kept Astra's browser
   underline. They are internal navigation rather than editorial citation, so
   they take the same border-drawn affordance as the rest of the component set.
   Legal and policy prose is deliberately not included and keeps its underline.

   (b) At 390px the concierge tab measured 195px wide — half the viewport — and
   sat over card copy and over the "View research analysis" CTA while scrolling.
   The feature stays; it is made compact, lifted clear of Astra's scroll-to-top
   control, and the end of long content is given a gutter so no final CTA can
   come to rest underneath it.
   ========================================================================== */

body.imp .entry-content p.imp-seo-link a {
	text-decoration: none;
	color: var(--imp-accent-on-light);
	border-bottom: 1px solid rgba(125, 95, 31, 0.32);
	transition: border-color 160ms ease;
}

body.imp .entry-content p.imp-seo-link a:hover,
body.imp .entry-content p.imp-seo-link a:focus-visible {
	border-bottom-color: var(--imp-accent-on-light);
}

body.imp .entry-content p.imp-seo-link a:focus-visible {
	outline: 2px solid var(--imp-accent-on-light);
	outline-offset: 3px;
}

@media (max-width: 782px) {
	body.imp .imp-concierge__tab {
		bottom: 96px;
		padding: 9px 13px;
		font-size: 0.58rem;
		letter-spacing: 0.12em;
		box-shadow: 0 6px 18px rgba(11, 12, 14, 0.3);
	}

	/* A final CTA must never come to rest under the tab. */
	body.imp .imp-res__actions,
	body.imp .imp-guide__cta,
	body.imp .imp-card--resource .imp-card__more {
		padding-bottom: 52px;
	}

	body.imp .imp-card--resource .imp-card__more {
		padding-bottom: 0;
	}

	body.imp .imp-grid--3 > .imp-card--resource:last-child {
		margin-bottom: 56px;
	}
}

/* ==========================================================================
   50. Model comparison tables
   ========================================================================== */

.imp-model-compare-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 26px;
}

.imp-model-compare {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
}

.imp-model-compare th,
.imp-model-compare td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(11, 12, 14, 0.07);
	font-size: 0.92rem;
	vertical-align: top;
}

.imp-model-compare thead th {
	font-weight: 500;
	border-bottom-width: 2px;
}

.imp-model-compare tbody th {
	font-weight: 400;
	color: var(--imp-stone);
	white-space: nowrap;
	position: sticky;
	left: 0;
	background: #fff;
}

.imp-model-compare__note {
	font-size: 0.86rem;
	color: var(--imp-stone);
}

@media (max-width: 782px) {

	.imp-model-compare {
		min-width: 520px;
	}

	.imp-model-compare th,
	.imp-model-compare td {
		padding: 10px 12px;
		font-size: 0.86rem;
	}
}

/* =============================================================================
   41. Featured Wellness Systems
   =============================================================================
   Scoped to the curated homepage band only. The shared product card stays on
   4/3 for the shop and every other grid; here the frame is square so the
   equipment leads the card. object-fit: cover is inherited, so nothing
   stretches. */

body.imp .imp-section--featured-systems .imp-product-card__media {
	aspect-ratio: 1 / 1;
}

@media (max-width: 782px) {

	body.imp .imp-section--featured-systems .imp-product-card__media {
		aspect-ratio: 4 / 3;
	}

	/* The concierge tab is fixed to the bottom-right on small screens; the
	   closing CTA must not come to rest underneath it. Same allowance the
	   other end-of-section CTAs use. */
	body.imp .imp-section--featured-systems .imp-section__actions {
		padding-bottom: 52px;
	}
}


/* =============================================================================
   42. The unified collection section
   =============================================================================
   One section, two subsections. The parent keeps the normal section rhythm, but
   the gap BETWEEN the two subsections is deliberately smaller than a section gap
   so the technology navigation and the product grid read as one shopping area
   rather than two competing ones. The technology tiles reuse .imp-tech so the
   charcoal/gold language is inherited; only the box is made compact here. */

body.imp .imp-section--collection .imp-section__head {
	margin-bottom: clamp(28px, 3.4vw, 40px);
}

body.imp .imp-collection__sub + .imp-collection__sub {
	margin-top: clamp(34px, 4vw, 52px);
}

body.imp .imp-collection__subtitle {
	font-family: var(--imp-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--imp-accent-on-light);
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--imp-linen);
}

body.imp .imp-collection__subcopy {
	color: var(--imp-slate);
	font-size: 1rem;
	margin: -4px 0 26px;
	max-width: 62ch;
}

/* Compact technology navigation ------------------------------------------- */

body.imp .imp-technav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 1.4vw, 18px);
}

body.imp .imp-technav .imp-tech--compact {
	min-height: 0;
	padding: 0;
}

body.imp .imp-technav .imp-tech--compact .imp-tech__body {
	height: auto;
	justify-content: flex-end;
	gap: 6px;
	padding: clamp(16px, 1.8vw, 22px);
	min-height: clamp(104px, 9vw, 132px);
}

body.imp .imp-technav .imp-tech--compact .imp-tech__name {
	font-size: clamp(1.02rem, 1.25vw, 1.24rem);
	line-height: 1.15;
}

body.imp .imp-technav .imp-tech--compact .imp-tech__more {
	margin-top: 2px;
	font-size: 0.64rem;
}

body.imp .imp-technav .imp-tech--compact::after {
	inset: 8px;
}

/* Categories with no published inventory yet. Deliberately subdued so they
   never compete with the purchasable ones, and never imply stock. */

body.imp .imp-technav__upcoming {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 14px;
	margin-top: clamp(18px, 2vw, 24px);
}

body.imp .imp-technav__upcoming-label {
	font-family: var(--imp-sans);
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--imp-stone);
	margin: 0;
}

/* Astra resets a bare ul's box (padding: revert), which eats any list
   component laid out as flex. Both are pinned here on purpose. */

body.imp .imp-technav__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.imp .imp-technav__pills > li {
	margin: 0;
}

body.imp .imp-technav__pill {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--imp-linen);
	border-radius: var(--imp-radius);
	font-size: 0.78rem;
	color: var(--imp-stone);
	text-decoration: none;
	transition: border-color var(--imp-fast) var(--imp-ease), color var(--imp-fast) var(--imp-ease);
}

body.imp .imp-technav__pill:hover,
body.imp .imp-technav__pill:focus-visible {
	border-color: var(--imp-champagne);
	color: var(--imp-champagne-deep);
}

@media (max-width: 900px) {

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

	body.imp .imp-collection__sub + .imp-collection__sub {
		margin-top: 30px;
	}
}

/* =============================================================================
   41. Conversion copy components
   -----------------------------------------------------------------------------
   Four small components added when the product pages moved from describing
   equipment to selling it: the lead paragraph that names the problem, the
   feature-to-benefit list, the best-for / not-ideal-for pair, and the two hook
   lines on the product card.

   All four are additive and conditional in PHP — a product with none of the new
   fields filled in renders exactly as it did before, so nothing here changes a
   page that has not been rewritten.
   ========================================================================== */

/* The opening paragraph of a product page carries the friction the buyer
   already recognises, so it is set one step up from body prose — still prose,
   not a pull quote. */
.imp-single__prose--lead {
	font-size: clamp(1.05rem, 1.4vw, 1.22rem);
	line-height: 1.65;
	color: var(--imp-ink, inherit);
	max-width: 62ch;
}

/* Feature → benefit. The term is the specification, the description is what it
   does for the reader; the champagne rule ties the two together so the eye
   reads them as one statement rather than a glossary. */
.imp-featben {
	margin: 0;
	display: grid;
	gap: 0;
}

.imp-featben__row {
	display: grid;
	grid-template-columns: minmax(150px, 15.5rem) 1fr;
	gap: clamp(14px, 2.4vw, 36px);
	padding: 18px 0;
	border-top: 1px solid rgba(176, 141, 79, 0.22);
}

.imp-featben__row:last-child {
	border-bottom: 1px solid rgba(176, 141, 79, 0.22);
}

.imp-featben__term {
	margin: 0;
	font-family: var(--imp-sans);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--imp-champagne-deep);
}

.imp-featben__desc {
	margin: 0;
	max-width: 60ch;
}

@media (max-width: 640px) {
	.imp-featben__row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* Best for / not ideal for. Telling someone a product is wrong for them is the
   most persuasive thing on the page, so the two columns are given equal weight
   — the exclusions are not a footnote. */
.imp-fit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(20px, 3vw, 44px);
}

.imp-fit__title {
	font-family: var(--imp-sans);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.imp-fit__col .imp-fit__title {
	color: var(--imp-champagne-deep);
}

.imp-fit__col--not .imp-fit__title {
	color: var(--imp-stone);
}

/* An exclusion reads as information, not as a warning: same shape as a normal
   tag, drained of the accent. */
body.imp .imp-tag--not {
	border-color: rgba(98, 101, 106, 0.32);
	color: var(--imp-stone);
	background: transparent;
}

/* Product card hooks. `__copy` already exists and now carries the friction the
   product removes; `__fit` is the one extra line naming who it suits. Kept to a
   single line each so a grid of cards stays scannable. */
.imp-product-card__fit {
	margin: -2px 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--imp-stone);
}

.imp-product-card__fit-label {
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.68rem;
	color: var(--imp-champagne-deep);
	margin-right: 6px;
}


/* -----------------------------------------------------------------------------
   Cascade correction - the uncleared product body
   -----------------------------------------------------------------------------
   WooCommerce floats the gallery left (600px) and the summary right (552px) on
   a single product. `.imp-single__body` renders after both and is block-level,
   but `.imp-single__body was never cleared` - so instead of starting below the
   floats it was squeezed into the 48px gap between them, and its single grid
   column overflowed to ~328px. Measured at 1440: every section below the
   summary - benefits, technology, the full specification table, delivery,
   warranty terms, FAQ - was rendering in a 328px ribbon down the middle of a
   1200px article, with the specification table wrapping one word per line.
   Pre-dates the conversion-copy work; it just became impossible to ignore once
   there was more copy in there.
   -------------------------------------------------------------------------- */

body.imp .imp-single__body {
	clear: both;
}


/* -----------------------------------------------------------------------------
   42. Hero showcase — re-budget after the conversion-copy rewrite
   -----------------------------------------------------------------------------
   The hero copy block grew when the headline was rewritten to carry a real
   customer problem: the H1 went from two lines to four on a phone, and the
   supporting line from four to six. Measured at 390x844 that put the copy block
   at 504px tall, and the product band — sized by the old budget in section 6b —
   ran 157px into it. At 360x760 the headline was rendering straight through the
   chair.

   Two different answers, because the two cases are genuinely different:

   PHONES: there is no arrangement where a 504px copy block, a product band and
   the advisor tab all fit above the fold. The copy has to win, so the product
   stops competing for vertical space and becomes what it should have been at
   this width — a receded backdrop the copy sits on. Deliberate, and it still
   carries the three-product crossfade.

   TABLETS AND SMALL LAPTOPS: there is room, the old constant was simply wrong.
   Available height is `100vh - 818px` once the taller copy block is accounted
   for; the band takes that or its natural size, whichever is smaller.
   ========================================================================== */

@media (max-width: 600px) {
	.imp-hero__product {
		top: calc(var(--imp-header-h) + 6px);
		bottom: auto;
		height: min(52vh, 420px);
		/* Low enough that cream type stays comfortably legible where it crosses the
		   chair's light panels - measured against the brightest area of the asset. */
		opacity: 0.3;
		/* Fade out well before the copy starts, so the headline never sits on a
		   hard edge of the image. */
		-webkit-mask-image: linear-gradient(to bottom, #000 38%, rgba(0, 0, 0, 0.35) 72%, transparent 96%);
		mask-image: linear-gradient(to bottom, #000 38%, rgba(0, 0, 0, 0.35) 72%, transparent 96%);
	}

	.imp-hero__slide {
		background-position: right top;
	}

	/* The hero no longer has to reserve a band for the image, so it can go back
	   to the height the copy actually needs. */
	body.imp .imp-hero {
		min-height: min(clamp(560px, 82vh, 940px), calc(100vh - 152px));
	}
}

@media (min-width: 601px) and (max-width: 1180px) {
	.imp-hero__product {
		height: min(clamp(150px, 24vh, 320px), calc(100vh - 818px));
	}
}


/* =============================================================================
   43. Category product showcase
   -----------------------------------------------------------------------------
   One horizontal row per product family. The card itself is untouched — this is
   the existing featured-system card placed in a scroll-snap track instead of a
   four-up grid, which is what takes eight full-height cards of vertical scroll
   down to five browsable rows.

   The track is a native overflow-x container: it swipes on touch, scrolls with
   a trackpad, takes arrow keys when focused, and works with JavaScript off. The
   arrows are progressive enhancement and stay hidden until the script confirms
   the row actually overflows.
   ========================================================================== */

.imp-showcase {
	--imp-showcase-gap: clamp(16px, 2vw, 28px);
	display: grid;
	gap: clamp(44px, 5vw, 76px);
}

.imp-showcase__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 14px;
	margin-bottom: clamp(18px, 2vw, 28px);
	border-bottom: 1px solid rgba(11, 12, 14, 0.1);
}

body.imp .imp-showcase__title {
	font-family: var(--imp-display);
	font-size: clamp(1.3rem, 2vw, 1.75rem);
	font-weight: 500;
	line-height: 1.15;
	margin: 0;
}

.imp-showcase__lede {
	margin: 6px 0 0;
	color: var(--imp-stone);
	font-size: 0.95rem;
	line-height: 1.5;
	max-width: 48ch;
}

.imp-showcase__nav {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

/* Astra's bare `button` rule fills and pads any button that does not opt out,
   which turns an icon-only control into a blank oval. `padding: 0` with an
   explicit box is the opt-out. */
body.imp .imp-showcase__arrow {
	width: 38px;
	height: 38px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 1px solid rgba(11, 12, 14, 0.18);
	border-radius: 50%;
	background: transparent;
	color: var(--imp-graphite);
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--imp-fast) var(--imp-ease), color var(--imp-fast) var(--imp-ease), opacity var(--imp-fast) var(--imp-ease);
}

body.imp .imp-showcase__arrow:hover:not(:disabled),
body.imp .imp-showcase__arrow:focus-visible:not(:disabled) {
	border-color: var(--imp-champagne);
	color: var(--imp-champagne-deep);
	background: transparent;
}

body.imp .imp-showcase__arrow:disabled {
	opacity: 0.28;
	cursor: default;
}

.imp-showcase__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--imp-showcase-gap)) / 3);
	gap: var(--imp-showcase-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Room for the card's own hover lift and focus ring, which would otherwise
	   be clipped by the scroll container. */
	padding: 4px 4px 10px;
	margin: -4px -4px -10px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.imp-showcase__track::-webkit-scrollbar {
	display: none;
}

.imp-showcase__track:focus-visible {
	outline: 2px solid var(--imp-champagne);
	outline-offset: 4px;
}

.imp-showcase__item {
	scroll-snap-align: start;
	min-width: 0;
	display: flex;
}

.imp-showcase__item > .imp-product-card {
	width: 100%;
}

/* A single-product family is a feature, not a carousel. */
.imp-showcase__row--single .imp-showcase__single {
	max-width: 380px;
}

@media (max-width: 1024px) {
	.imp-showcase__track {
		grid-auto-columns: calc((100% - var(--imp-showcase-gap)) / 2);
	}
}

/* One card, with enough of the next one showing to say "this swipes". */
@media (max-width: 600px) {
	.imp-showcase__track {
		grid-auto-columns: 84%;
	}

	.imp-showcase__head {
		flex-wrap: wrap;
	}

	.imp-showcase__row--single .imp-showcase__single {
		max-width: none;
	}
}

/* Manual navigation stays; the script does not auto-advance. */
@media (prefers-reduced-motion: reduce) {
	.imp-showcase__track {
		scroll-behavior: auto;
	}
}


/* =============================================================================
   44. Showcase image fit
   -----------------------------------------------------------------------------
   `.imp-product-card__media` is a fixed-ratio frame with `overflow: hidden`, and
   the image inside it is `object-fit: cover`. Cover fills the frame and throws
   away whatever does not fit, so every source whose ratio differs from the frame
   was being centre-cropped:

     - Eldvik is 1037x1200 (0.864) in a 1/1 frame -> ~13.6% cut off the top and
       bottom. Visible on the live page: the cabin roof and base were gone.
     - Below 782px the frame becomes 4/3, which cropped 25% off the height of
       every square image, including all three massage chairs.

   The catalogue answer is `contain`: scale the whole product down until it fits,
   centred, and let the ivory ground show around it. Nothing is cut, nothing is
   stretched, and the frame stays one consistent size across every card.

   SCOPE: `.imp-showcase` only. The shop archive, category archives, product
   galleries, hero imagery and every other card grid keep `cover` — a filled
   edge-to-edge frame is right for those, and this rule cannot reach them.
   ========================================================================== */

body.imp .imp-showcase .imp-product-card__media {
	/* One frame at every width. The 4/3 mobile variant is deliberately not
	   inherited here: a taller frame gives portrait products more room. */
	aspect-ratio: 1 / 1;
	background: var(--imp-ivory);
	padding: clamp(10px, 2.4%, 18px);
	box-sizing: border-box;
}

body.imp .imp-showcase .imp-product-card__media img {
	object-fit: contain;
	object-position: center center;
}

/* A contained product already reaches the edges of its box, so the card's 3.5%
   hover zoom would push it past the clipped boundary — reintroducing exactly
   the crop this section removes. */
body.imp .imp-showcase .imp-product-card:hover .imp-product-card__media img {
	transform: none;
}


/* =============================================================================
   45. Product gallery
   -----------------------------------------------------------------------------
   WooCommerce's own gallery is kept - it carries the variation image swap and
   the lightbox - and given the navigation and the image fit it was missing.

   IMAGE FIT IS THE POINT. This catalogue is cabins, tubs and chairs shot at
   whatever ratio each photographer used: of 117 approved product images, 32 are
   not square. `cover` in a fixed frame is what took the roof off a 1042x1200
   sauna and 37% of the width off a 1200x750 one, and it is the same failure
   section 44 had to undo on the showcase cards. Every frame here is `contain`
   on an ivory ground: the whole product, centred, at its own proportions, with
   the ground showing around it. Nothing is cropped and nothing is stretched.

   The frame is square at every width so the main image does not jump height as
   a shopper moves between a portrait cabin and a landscape one - which is also
   why FlexSlider's `smoothHeight` is turned off in inc/product-gallery.php.
   ========================================================================== */

body.imp .imp-gallery {
	position: relative;
}

body.imp .imp-gallery .woocommerce-product-gallery__image {
	background: var(--imp-ivory);
}

/* SPECIFICITY, and it is load-bearing. WooCommerce ships
   `.woocommerce div.product div.images img { height: auto }` at (0,3,4). The
   obvious `body.imp .imp-gallery ... img` is (0,3,2) and LOSES to it, so
   `height: 100%` never took and the image kept its own intrinsic height - which
   in turn pushed the square frame open, because a block box with an
   aspect-ratio grows when its content is taller than the ratio allows.

   The symptom was subtle enough to miss on a square photograph and obvious on
   a portrait one: on the 1042x1200 cabin the frame measured 600x687, and its
   four slides came out 687, 687, 685 and 603 tall, so the main image jumped
   height on every swipe. These selectors are (0,6,4) for that one reason. Do
   not simplify them. */
body.imp.woocommerce-js div.product div.images.imp-gallery .woocommerce-product-gallery__image > a,
body.imp.woocommerce-js div.product div.images.imp-gallery .woocommerce-product-gallery__image > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
}

body.imp.woocommerce-js div.product div.images.imp-gallery .woocommerce-product-gallery__image > a {
	padding: clamp(14px, 3.5%, 32px);
}

body.imp.woocommerce-js div.product div.images.imp-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}
/* The arrows. FlexSlider appends its direction nav to the gallery ROOT, which
   also contains the thumbnail strip, so `top: 50%` there would centre the
   arrows on the gallery plus its thumbnails rather than on the image. The
   behaviour script moves the nav inside `.flex-viewport` for exactly this
   reason; these rules assume it lives there.

   `padding: 0` is not optional on an icon-only control here: Astra's bare
   `button`/`a.button` padding turns one into a blank oval with the glyph
   squeezed out of it. */
body.imp .imp-gallery .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.imp .imp-gallery .flex-direction-nav li {
	margin: 0;
	list-style: none;
}

body.imp .imp-gallery .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--imp-rule);
	border-radius: 50%;
	background: rgba(251, 249, 245, 0.94);
	color: var(--imp-obsidian);
	box-shadow: var(--imp-shadow-sm);
	/* The label text is kept in the DOM for assistive technology and drawn as a
	   chevron instead. */
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	text-indent: 0;
	opacity: 0.92;
	transition: background var(--imp-fast) var(--imp-ease), opacity var(--imp-fast) var(--imp-ease);
}

body.imp .imp-gallery .flex-direction-nav a:hover,
body.imp .imp-gallery .flex-direction-nav a:focus-visible {
	background: var(--imp-cream);
	opacity: 1;
}

body.imp .imp-gallery .flex-direction-nav a::before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}

body.imp .imp-gallery .flex-direction-nav .flex-prev {
	left: 12px;
}

body.imp .imp-gallery .flex-direction-nav .flex-prev::before {
	transform: translateX(2px) rotate(-135deg);
}

body.imp .imp-gallery .flex-direction-nav .flex-next {
	right: 12px;
}

body.imp .imp-gallery .flex-direction-nav .flex-next::before {
	transform: translateX(-2px) rotate(45deg);
}

/* At the ends of the run the arrow stays in place but stops inviting a click. */
body.imp .imp-gallery .flex-direction-nav a.flex-disabled {
	opacity: 0.28;
	pointer-events: none;
}
/* The counter, injected by the behaviour script. Bottom-left, because the
   lightbox trigger WooCommerce prints sits top-right and the arrows own the
   vertical middle. */
body.imp .imp-gallery .imp-gallery__counter {
	margin: 0;
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 3;
	padding: 5px 12px;
	border-radius: 40px;
	background: rgba(11, 12, 14, 0.7);
	color: var(--imp-cream);
	font-family: var(--imp-sans);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	line-height: 1.5;
	pointer-events: none;
}

body.imp .imp-gallery .flex-viewport:focus-visible {
	outline: 2px solid var(--imp-champagne-deep);
	outline-offset: 2px;
}

/* The thumbnail strip. Astra ships it as a floated 4-across grid, which on a
   15-image plunge ran to four rows and pushed the buy column off the screen.
   One row that scrolls sideways keeps the gallery a fixed height whatever the
   image count, and keeps every thumbnail the same size.

   The selectors are deliberately heavier than they look: Astra's own rules are
   (0,3,3) on `.woocommerce-product-gallery--columns-4 .flex-control-thumbs li`,
   so anything lighter loses the float and the percentage width back to them. */
body.imp.woocommerce-js div.product div.images.imp-gallery .flex-control-thumbs {
	display: flex;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0 0 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	list-style: none;
}

body.imp.woocommerce-js div.product div.images.imp-gallery .flex-control-thumbs li {
	flex: 0 0 auto;
	width: clamp(62px, 11%, 88px);
	margin: 0;
	float: none;
	clear: none;
	scroll-snap-align: start;
	list-style: none;
}

body.imp.woocommerce-js div.product div.images.imp-gallery .flex-control-thumbs li img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 5px;
	box-sizing: border-box;
	object-fit: contain;
	object-position: center center;
	background: var(--imp-ivory);
	border: 1px solid var(--imp-rule-soft);
	/* WooCommerce dims every inactive thumbnail to 0.5. On contained product
	   photography that reads as a loading state, not as a selection cue - the
	   selection is carried by the champagne edge below instead. */
	opacity: 1;
	cursor: pointer;
	transition: border-color var(--imp-fast) var(--imp-ease);
}

body.imp.woocommerce-js div.product div.images.imp-gallery .flex-control-thumbs li img.flex-active,
body.imp.woocommerce-js div.product div.images.imp-gallery .flex-control-thumbs li img:hover {
	opacity: 1;
	border-color: var(--imp-champagne);
}

body.imp.woocommerce-js div.product div.images.imp-gallery .flex-control-thumbs li img.flex-active {
	box-shadow: inset 0 0 0 1px var(--imp-champagne);
}
/* The lightbox trigger, matched to the arrows so the frame reads as one set of
   controls rather than three unrelated widgets. */
body.imp .imp-gallery .woocommerce-product-gallery__trigger {
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--imp-rule);
	border-radius: 50%;
	background: rgba(251, 249, 245, 0.94);
	box-shadow: var(--imp-shadow-sm);
	text-decoration: none;
}

/* Below 601px the arrows are made smaller and pulled tight to the edge so they
   sit over the ivory margin the contained product leaves, not over the product
   itself. Swipe is the primary gesture at this size; the arrows and the counter
   are there to say that more images exist. */
@media (max-width: 600px) {
	body.imp .imp-gallery .flex-direction-nav a {
		width: 36px;
		height: 36px;
	}

	body.imp .imp-gallery .flex-direction-nav .flex-prev {
		left: 6px;
	}

	body.imp .imp-gallery .flex-direction-nav .flex-next {
		right: 6px;
	}

	body.imp .imp-gallery .imp-gallery__counter {
		left: 8px;
		bottom: 8px;
		font-size: 0.6rem;
	}

	body.imp.woocommerce-js div.product div.images.imp-gallery .flex-control-thumbs li {
		width: 62px;
	}
}

/* The gallery column must never be the thing that makes the page scroll
   sideways: the slider track is wider than the viewport by design. */
body.imp .imp-gallery,
body.imp .imp-gallery .flex-viewport {
	max-width: 100%;
}

/* =============================================================================
   46. First-order offer
   -----------------------------------------------------------------------------
   A welcome offer on a $2,000+ purchase is not a coupon-site interaction, and
   it is not allowed to look like one: no green, no countdown, no wheel, no
   manufactured scarcity. Ivory ground, charcoal type, one champagne rule, and
   the same Cormorant/Inter pairing the rest of the site uses.

   PLACEMENT IS A CONSTRAINT, NOT A PREFERENCE. The right-hand rail is the
   advisor tab's at every width - vertical from 783px up, parked at bottom-right
   below that - so the recovery tab is bottom-LEFT and stays there. On small
   screens it is lifted to the same 96px band the advisor tab uses, which is
   what keeps it clear of the product page's sticky add-to-cart bar and of the
   comparison drawer.
   ========================================================================== */

.imp-offer {
	position: fixed;
	inset: 0;
	z-index: 430;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}

.imp-offer[hidden],
.imp-offer-tab[hidden] {
	display: none;
}

.imp-offer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(11, 12, 14, 0.55);
}

.imp-offer__dialog {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: min(880px, 100%);
	max-height: 92vh;
	overflow-y: auto;
	background: var(--imp-cream);
	border: 1px solid var(--imp-rule-soft);
	border-radius: var(--imp-radius-lg);
	box-shadow: var(--imp-shadow-lg);
}

.imp-offer__body {
	padding: clamp(30px, 4vw, 52px);
}

.imp-offer__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	/* Icon-only control: without this Astra's bare `button` padding draws a
	   blank oval and squeezes the glyph to nothing, and its button shadow and
	   radius draw a faint rounded box around the cross. */
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	color: var(--imp-text-secondary);
	cursor: pointer;
	transition: color var(--imp-fast) var(--imp-ease);
}

.imp-offer__close:hover {
	color: var(--imp-obsidian);
}
.imp-offer__eyebrow {
	margin: 0 0 14px;
	color: var(--imp-accent-on-light);
	font-family: var(--imp-sans);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

body.imp .imp-offer__title {
	margin: 0 0 14px;
	color: var(--imp-text-primary);
	font-family: var(--imp-display);
	/* Cormorant is capped at 500 across this site; 600 renders as a synthesised
	   bold and breaks the display face. */
	font-weight: 400;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	line-height: 1.12;
}

body.imp .imp-offer__copy {
	margin: 0 0 24px;
	max-width: 42ch;
	color: var(--imp-text-secondary);
	font-size: 0.95rem;
	line-height: 1.65;
}

.imp-offer__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.imp-offer__field {
	margin: 0 0 14px;
}

.imp-offer__field label {
	display: block;
	margin-bottom: 6px;
	color: var(--imp-text-secondary);
	font-family: var(--imp-sans);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.imp-offer__field input {
	width: 100%;
	padding: 13px 14px;
	box-sizing: border-box;
	border: 1px solid var(--imp-rule);
	border-radius: var(--imp-radius);
	background: var(--imp-white);
	color: var(--imp-text-primary);
	font-family: var(--imp-sans);
	font-size: 1rem;
}

/* Astra's global focus style sets `border-style: dotted` on inputs, which on a
   premium modal reads as a validation error. The ring below is the affordance;
   the border stays solid. */
body.imp .imp-offer__field input:focus {
	outline: none;
	border-style: solid;
	border-color: var(--imp-champagne);
	box-shadow: 0 0 0 3px rgba(176, 141, 79, 0.16);
}

.imp-offer__error {
	margin: 0 0 12px;
	color: #8c2f22;
	font-size: 0.84rem;
}

.imp-offer__error[hidden] {
	display: none;
}
.imp-offer__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 15px 24px;
	box-sizing: border-box;
	border: 1px solid var(--imp-obsidian);
	border-radius: var(--imp-radius);
	background: var(--imp-obsidian);
	color: var(--imp-cream);
	box-shadow: none;
	font-family: var(--imp-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--imp-fast) var(--imp-ease);
}

.imp-offer__submit:hover {
	background: var(--imp-graphite);
	border-color: var(--imp-graphite);
}

.imp-offer__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.imp-offer__decline {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--imp-text-muted);
	font-family: var(--imp-sans);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.imp-offer__decline:hover {
	color: var(--imp-text-primary);
}

.imp-offer__done[hidden] {
	display: none;
}

.imp-offer__done-label {
	margin: 0 0 8px;
	color: var(--imp-text-secondary);
	font-family: var(--imp-sans);
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

body.imp .imp-offer__code {
	margin: 0 0 14px;
	padding: 14px 18px;
	border: 1px dashed var(--imp-champagne);
	border-radius: var(--imp-radius);
	background: var(--imp-ivory);
	color: var(--imp-text-primary);
	font-family: var(--imp-sans);
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-align: center;
}

body.imp .imp-offer__done-copy {
	margin: 0 0 20px;
	max-width: 42ch;
	color: var(--imp-text-secondary);
	font-size: 0.9rem;
	line-height: 1.6;
}

body.imp .imp-offer__fine,
body.imp .imp-offer__privacy {
	margin: 18px 0 0;
	max-width: 46ch;
	color: var(--imp-text-muted);
	font-size: 0.72rem;
	line-height: 1.55;
}

body.imp .imp-offer__privacy {
	margin-top: 8px;
}
/* The visual panel. Hidden below 820px rather than stacked: a modal a phone has
   to scroll to reach the CTA is a worse experience than a text-led one. */
.imp-offer__visual {
	display: none;
}

@media (min-width: 820px) {
	.imp-offer__dialog {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	}

	.imp-offer__visual {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: clamp(24px, 3vw, 40px);
		background: linear-gradient(160deg, var(--imp-ivory) 0%, var(--imp-shell) 100%);
		border-left: 1px solid var(--imp-rule-soft);
	}

	/* Contained, like every other product frame on the site. */
	.imp-offer__visual img {
		width: 100%;
		height: 100%;
		max-height: 420px;
		object-fit: contain;
		object-position: center center;
	}
}

/* ---- The minimized recovery tab ---------------------------------------- */

.imp-offer-tab {
	position: fixed;
	left: 0;
	bottom: 24px;
	/* Below the comparison drawer (300) and the sticky add-to-cart bar (260) on
	   purpose: an offer must never be the thing covering a buy control. */
	z-index: 240;
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 11px 16px;
	border: 0;
	border-radius: 0 var(--imp-radius) var(--imp-radius) 0;
	background: var(--imp-obsidian);
	color: var(--imp-cream);
	box-shadow: 0 10px 30px -14px rgba(11, 12, 14, 0.6);
	cursor: pointer;
	transition: background var(--imp-fast) var(--imp-ease);
}

.imp-offer-tab:hover {
	background: var(--imp-graphite);
}

.imp-offer-tab__amount {
	font-family: var(--imp-display);
	font-size: 1.05rem;
	line-height: 1;
	color: var(--imp-accent-on-dark);
}

.imp-offer-tab__label {
	font-family: var(--imp-sans);
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
}

/* At 782px and below the advisor tab parks horizontally at bottom-right, 96px
   up. The offer tab takes the same band on the LEFT so the two read as a pair
   and neither lands on the sticky add-to-cart bar beneath them. */
@media (max-width: 782px) {
	.imp-offer-tab {
		bottom: 96px;
		padding: 9px 13px;
		gap: 6px;
	}

	.imp-offer-tab__amount {
		font-size: 0.95rem;
	}

	.imp-offer-tab__label {
		font-size: 0.54rem;
		letter-spacing: 0.12em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.imp-offer,
	.imp-offer-tab {
		transition: none;
	}
}

/* =============================================================================
   47. Hero top spacing
   -----------------------------------------------------------------------------
   MEASURED BEFORE: 32px between the bottom of the header and the top of
   "WELLNESS. RECOVERY. LONGEVITY." at 1440, 50px at 1280. The eyebrow read as
   attached to the navigation rather than as the opening line of the hero.

   THE MECHANISM, because it is not where you would first look. `.imp-hero` is
   `align-items: flex-end` over `min-height: clamp(560px, 82vh, 860px)`: the
   copy block is anchored to the BOTTOM of the hero, so the gap at the top is
   whatever is left over after the copy has taken its height. It is not a
   padding anybody set - which is why adding `padding-top` to `.imp-hero__inner`
   does nothing at all here. The inner is bottom-anchored, so padding on it
   moves its own top edge up and leaves the eyebrow exactly where it was.

   Padding on the FLEX CONTAINER is the lever that works: it reserves a band the
   bottom-anchored content cannot enter, so the gap can never fall below it. At
   widths where the copy is already short of the hero's min-height the hero does
   not grow at all and nothing moves; it only grows on the wide viewports where
   the tall display headline had squeezed the top out.

   SCOPE is 1181px and up for the same reason. Below that the composition moves
   into a band at the top of the hero and the copy sits under it, which already
   leaves 165-247px of clearance - measured - so there is nothing to correct and
   a desktop-sized gap would only be dead space. Below 782px the hero is also
   under a hard height budget (`calc(100vh - 152px)`, section 6) that keeps the
   second CTA clear of the advisor tab; adding padding there would spend that
   budget and push the CTA back underneath it.
   ========================================================================== */

@media (min-width: 1181px) {
	body.imp .imp-hero {
		padding-top: clamp(64px, 8vh, 88px);
	}
}

/* =============================================================================
   48. Product gallery - width containment during FlexSlider init
   -----------------------------------------------------------------------------
   Section 45 builds the square frame as `width: 100%` + `aspect-ratio: 1 / 1`,
   so the frame's height is derived from whatever width its parent happens to
   have. That is correct once FlexSlider has settled, and wrong for the one
   frame while it is starting.

   FlexSlider sizes the slide track to hold every slide side by side before it
   applies the per-slide widths. On a 16-image product that track is momentarily
   ~11,200px wide, the frame takes 100% of it, and `aspect-ratio: 1 / 1` then
   makes the frame 11,200px TALL. Measured on /product/frost-cold-plunge-tub/
   at 390px: the gallery went 738px -> 22,516px -> 436px, moving Add to Cart
   from y=1,516 to y=23,237 and back. That single reflow was CLS 0.3207.

   The frame should never be wider than the gallery itself, whatever the track
   is doing. `container-type: inline-size` makes .imp-gallery a query container,
   so `100cqw` resolves against ITS width - which the layout sets (100% on
   mobile, 48% beside the buy column) and the track never touches. The cap is
   therefore the gallery's own width at every breakpoint: no fixed pixel value,
   no change to the settled layout, and nothing left for the transient to
   expand into. Portrait and landscape sources are unaffected - section 45
   still contains them inside the square frame.

   Specificity is (0,6,4) for the same reason section 45 documents: WooCommerce
   ships `.woocommerce div.product div.images img { height: auto }` at (0,3,4)
   and anything lighter loses to it. Do not simplify these selectors.
   ========================================================================== */

body.imp .imp-gallery {
	container-type: inline-size;
}

body.imp.woocommerce-js div.product div.images.imp-gallery .woocommerce-product-gallery__image > a,
body.imp.woocommerce-js div.product div.images.imp-gallery .woocommerce-product-gallery__image > img {
	max-width: 100cqw;
}

/* The second half of the same problem. Before FlexSlider runs, WooCommerce
   lays every remaining slide out as a grid - `__image:nth-child(n+2)` is
   `width: 25%; display: inline-block` in woocommerce-grid.min.css - so a
   16-image product renders four extra rows of frames that FlexSlider then
   throws away. Measured at 390px: 1,866px of gallery collapsing to 436px.

   Specificity again: WooCommerce's `display: inline-block` here is (0,5,2) and
   the natural `body.imp .imp-gallery ...` form is (0,5,1), which LOSES on the
   element count - all sixteen slides stayed visible and the rule did nothing.
   This is the same trap section 45 documents, one selector further down.
   Capping the width above stopped the 22,516px spike but not this, and a
   1,430px collapse still moves the buy column further than a viewport height,
   which is where the layout-shift distance fraction saturates - so the score
   did not move either.

   FlexSlider wraps the track in .flex-viewport when it initialises, so its
   absence is an accurate 'not started yet' test. Until then only the first
   slide takes part in layout, which is what the settled gallery shows anyway.

   Safe against a JS failure: WooCommerce ships this gallery with an inline
   `opacity: 0` that only its own script removes, so with scripting broken the
   gallery is already invisible and hiding the extra slides costs nothing.
   Reverting is a matter of deleting this one rule. */
body.imp.woocommerce-js div.product div.images.imp-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:nth-child(n+2) {
	display: none;
}

/* And the window in between. FlexSlider inserts .flex-viewport first and only
   sizes the track afterwards, so for one frame the viewport exists (which ends
   the rule above) while the slides are still laid out by WooCommerce's
   `nth-child(n+2) { width: 25% }` grid inside an 11,200px track - 1,866px of
   gallery on the 16-image plunge.

   The viewport is a square window onto a square frame, so tying it to that
   ratio pins it to the size it settles at anyway: 350px at a 350px gallery,
   691px at 691px. FlexSlider writes its own inline height once it has
   finished, which takes precedence from then on, so this only governs the
   transient. The track overflows behind it and .flex-viewport already clips.
   No fixed pixel value, and it scales with the gallery at every breakpoint. */
body.imp .imp-gallery .flex-viewport {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}


/* Mega menu: availability marker for technologies not yet open for online
   ordering. Rendered by Impervita_Mega_Walker::availability_marker(), which is
   gated on the live product count, so this clears itself when a category is
   stocked. Deliberately quiet - it is a qualifier, not a badge. */
.imp-mega__soon{display:inline-block;margin-left:.5em;font-size:.68em;letter-spacing:.08em;text-transform:uppercase;opacity:.6;vertical-align:middle;white-space:nowrap}