/*
Theme Name: Sunny Fox Solar
Theme URI: https://github.com/cedarwiche-grayfox/cedarwiche-contractor-website-base
Author: Sunny Fox Enterprises, LLC
Author URI: https://www.orlandosolarquotes.com
Description: White-label custom WordPress theme for Sunny Fox solar lead-generation sister sites (Orlando Solar Quotes and Tampa Bay Solar Quotes). Token-driven via site-config.json; no Elementor, no page builder, no build step. Server-rendered JSON-LD via the Sunny_Fox_Schema_Engine.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
License URI: All rights reserved.
Text Domain: sunny-fox
Tags: solar, lead-generation, custom-theme
*/

/* ============================================================================
   STEP 3 ACTION 3.7 — FULL TOKEN-DRIVEN STYLESHEET

   This sheet consumes brand colors EXCLUSIVELY via var(--color-*) custom
   properties injected by inc/theme-css-injection.php (wp_head priority 2)
   from site-config.json's brand block. The same stylesheet serves OSQ
   (citrus/oak palette) and TBSQ (teal/midnight palette) by swapping the
   site-config.

   No OSQ or TBSQ palette hex appears in this file. There is NO standalone
   :root brand block — that block previously LOST the cascade to the injected
   block by source order and forced the page to neutral grays. Instead, every
   var(--color-*) reference carries its neutral-gray fallback INLINE (e.g.
   var(--color-primary, #333333)), so a missing site-config.json still degrades
   to a legible monochrome page and the source-order bug is structurally
   impossible to recur. The ONLY source of :root brand vars is the dynamic
   injection in inc/theme-css-injection.php (wp_head priority 2).

   WCAG no-regression contracts preserved (Sub-Action 4.5 + Action 5):
   1. CTA button text uses var(--color-cta-text, #ffffff), NOT var(--color-text, #111111).
      OSQ cta_text happens to equal text; TBSQ does not (Slate on Teal
      fails AA at 3.68:1; Midnight on Teal passes at 5.39:1).
   2. Focus rings on light surfaces use var(--color-link, #1a4a73), NOT
      var(--color-accent, #666666). TBSQ accent_color fails the 3:1 UI threshold
      on white (computed 2.22:1). link_color clears AAA on both sites.
   3. Buttons remain 15px Barlow 800 (≥14px bold). This qualifies the
      TBSQ CTA hover (3.77:1) as large text under WCAG 1.4.3 — shrinking
      or de-bolding breaks TBSQ compliance retroactively.
   4. H1 scales (65/55/45/35 global; 50/40/36/28 post-style) are reserved
      for .hero__title. No H2/H3 declared at H1-scale sizes.

   accent_color is decorative-only — used for 12% bg tints, the trust-
   pill left border, the footer column underline, and tinted gradients.
   Never used as a contrast-bearing focus ring or text color.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@600;700&family=Archivo:wght@500;600;700;800&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ---------------------------------------------------------------------------
   1. Tokens — :root fallbacks (neutral, non-palette)
   --------------------------------------------------------------------------- */

:root {
	/* NO brand-color fallbacks live here. The ONLY source of brand :root vars
	   (--color-primary/secondary/accent/text/link/link-hover/cta-text/
	   neutral-surface/background/flood + --overlay-panel-opacity) is the
	   dynamic injection in inc/theme-css-injection.php (wp_head priority 2).
	   A standalone :root brand block here previously lost the cascade to the
	   injected block by source order and forced the whole page to neutral
	   grays. That bug is now structurally impossible: every var(--color-*)
	   reference below carries its neutral-gray fallback inline. DO NOT
	   reintroduce a :root brand block. */

	/* Structural transparencies — palette-independent. Manifest §3.3, §2.5,
	   §4.6. Do not move these into site-config.json. */
	--color-field-border: rgba(0, 0, 0, 0.09);
	--color-text-on-dark-muted: rgba(255, 255, 255, 0.72);
	--color-text-on-dark-hover: rgba(255, 255, 255, 0.48);
	--color-toggle-bg-on-dark: rgba(255, 255, 255, 0.15);
	--color-glass-tint: rgba(255, 255, 255, 0.20);

	/* Light text + seams on dark/flood grounds — palette-independent near-white.
	   Replaces the v2.0 breakage where dark grounds painted text in
	   --color-cta-text (now NEAR-BLACK on both palettes, sized for the bright
	   CTA fill, not for a dark ground). This is the RETHEME --text-light role. */
	--color-text-on-dark: rgba(255, 255, 255, 0.92);
	--color-seam-on-dark: rgba(255, 255, 255, 0.15);

	/* Mix anchor for in-stylesheet tone derivation (kept out of component rules
	   so the hardcoded-hex-grep == 0 standard still holds there). */
	--color-shade: #000000;

	/* §6.3 link-context rule: --color-link (gold/cyan) is mid-luminance and
	   FAILS AA on cream/white (~2.1–2.7:1) but PASSES on dark/flood (~5.7–8:1).
	   For section labels / small accents on LIGHT grounds, derive a darkened
	   variant from the injected link token: OSQ→~#846a31, TBSQ→~#296f84
	   (both clear AA on cream). Body links on cream use --color-text instead. */
	--color-link-on-light: color-mix(in srgb, var(--color-link, #1a4a73) 66%, var(--color-shade, #000000));

	/* Containers — manifest §2.1 */
	--container-max: 1440px;
	--container-boxed: 900px;
	--container-boxed-wide: 1000px;

	/* Padding rhythms — manifest §2.2 */
	--pad-y-boxed-desk: 70px;
	--pad-y-boxed-mob: 50px;
	--pad-y-tall-desk: 100px;
	--pad-y-tall-tab: 65px;
	--pad-y-tall-mob: 50px;
	--pad-x-desk: 25px;
	--pad-x-tab: 20px;
	--pad-x-mob: 15px;

	/* Typography */
	--font-primary: 'Barlow', sans-serif;
	--font-condensed: 'Barlow Condensed', 'Barlow', sans-serif;
	/* Blog "Orlando Solar Journal" editorial type: serif reading body + Archivo
	   display headings (scoped to .page-blog-* / .post-article; rest of the site
	   stays Barlow). Swappable in one place. */
	--font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
	--font-display: 'Archivo', 'Barlow Condensed', sans-serif;
	--tracking-cta: 0.05em;
	--tracking-tight: -0.02em;
}

/* ---------------------------------------------------------------------------
   2. Reset + base typography (manifest §1)
   --------------------------------------------------------------------------- */

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

* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-primary);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: var(--color-text, #111111);
	background-color: var(--color-background, #ffffff);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/* H1 — global scale by default (manifest §1.2). Used inside the hero only;
   .hero--scale-post overrides to the post-style scale below. */
h1 {
	font-size: 65px;
	line-height: 70px;
	font-weight: 600;
}

/* H2 — universal scale (60/50/40/32). Manifest §1.2. */
h2 {
	font-size: 60px;
	line-height: 65px;
	font-weight: 700;
}

/* H3 — 26/22 with weight 500 and tight tracking. */
h3 {
	font-size: 26px;
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: var(--tracking-tight);
}

/* H4 — used in footer column headers and mesh-grid titles. */
h4 {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-cta);
}

p {
	margin: 0 0 1em 0;
}

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

ul,
ol {
	margin: 0 0 1em 1.25em;
}

li {
	margin-bottom: 0.25em;
}

/* Links — body-text scale uses link_color (NOT accent — manifest §3.7 +
   WCAG constraint 2 from TOKEN-ARCHITECTURE §7). */
a {
	color: var(--color-link, #1a4a73);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:hover,
a:focus {
	color: var(--color-link-hover, #0d2942);
}

/* Focus ring on light surfaces: link_color, never accent. TBSQ
   accent_color fails 3:1 UI threshold on white (2.22:1) per
   BRAND-PALETTES §7. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--color-link, #1a4a73);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   3. Layout primitives — containers + section rhythms (manifest §2.1, §2.2)
   --------------------------------------------------------------------------- */

.container,
.container-boxed,
.container-boxed-wide {
	margin-left: auto;
	margin-right: auto;
}

.container {
	max-width: var(--container-max);
}

.container-boxed {
	max-width: var(--container-boxed);
}

.container-boxed-wide {
	max-width: var(--container-boxed-wide);
}

/* Section — Rhythm A (boxed body content, 70/50 vertical). Default. */
.section {
	padding-top: var(--pad-y-boxed-desk);
	padding-bottom: var(--pad-y-boxed-desk);
	padding-left: var(--pad-x-desk);
	padding-right: var(--pad-x-desk);
}

.section--rhythm-a {
	padding-top: var(--pad-y-boxed-desk);
	padding-bottom: var(--pad-y-boxed-desk);
}

/* Section — Rhythm B (long-form/tall, 100/65/50 vertical). */
.section--rhythm-b {
	padding-top: var(--pad-y-tall-desk);
	padding-bottom: var(--pad-y-tall-desk);
}

/* ---------------------------------------------------------------------------
   3a. Three-ground section system (RETHEME-SPEC §3 — the core NEC move)

   Committed alternation dark→cream→flood drives the page rhythm. Each modifier
   sets a ground background + the matching text token. Tile texture (§4) overlays
   cream + flood via an EXTERNAL repeating SVG (relative url resolves to the
   theme root; mobile-Safari-safe; NOT a base64 data-URI). Mapping to the
   existing 10-token pipeline: --color-secondary = RETHEME --dark,
   --color-neutral-surface = --cream, --color-flood = --flood.
   --------------------------------------------------------------------------- */

.section--dark {
	background-color: var(--color-secondary, #222222);
	color: var(--color-text-on-dark, rgba(255, 255, 255, 0.92));
}

.section--cream {
	background-color: var(--color-neutral-surface, #f5f5f5);
	background-image: url('assets/tile.svg');
	background-repeat: repeat;
	color: var(--color-text, #111111);
}

.section--flood {
	background-color: var(--color-flood, #23302a);
	background-image: url('assets/tile.svg');
	background-repeat: repeat;
	color: var(--color-text-on-dark, rgba(255, 255, 255, 0.92));
}

/* Headings adopt the ground text token on dark/flood. */
.section--dark .section__heading,
.section--flood .section__heading {
	color: var(--color-text-on-dark, rgba(255, 255, 255, 0.92));
}

/* Body/inline links on the CREAM ground: gold fails AA here, so use
   --color-text underlined; hover lands on the derived darkened gold (§6.3).
   Buttons and mesh cells carry their own paint and are excluded. */
.section--cream a:not(.button):not(.mesh-grid__cell) {
	color: var(--color-text, #111111);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.section--cream a:not(.button):not(.mesh-grid__cell):hover,
.section--cream a:not(.button):not(.mesh-grid__cell):focus {
	color: var(--color-link-on-light, #846a31);
}

/* Links on DARK/FLOOD grounds: gold stays locked + vibrant (passes AA). */
.section--dark a:not(.button):not(.mesh-grid__cell):not(.svc-row):not(.tile),
.section--flood a:not(.button):not(.mesh-grid__cell):not(.svc-row):not(.tile) {
	color: var(--color-link, #1a4a73);
}

.section--dark a:not(.button):not(.mesh-grid__cell):not(.svc-row):not(.tile):hover,
.section--dark a:not(.button):not(.mesh-grid__cell):not(.svc-row):not(.tile):focus,
.section--flood a:not(.button):not(.mesh-grid__cell):not(.svc-row):not(.tile):hover,
.section--flood a:not(.button):not(.mesh-grid__cell):not(.svc-row):not(.tile):focus {
	color: var(--color-text-on-dark, rgba(255, 255, 255, 0.92));
}

/* Focus rings: light grounds use --color-text (NEVER sage/sky); dark/flood
   grounds use the gold link token (adequate UI contrast there). */
.section--cream a:focus-visible,
.section--cream button:focus-visible,
.section--cream input:focus-visible,
.section--cream select:focus-visible,
.section--cream textarea:focus-visible,
.section--cream summary:focus-visible {
	outline-color: var(--color-text, #111111);
}

.section--dark a:focus-visible,
.section--dark button:focus-visible,
.section--flood a:focus-visible,
.section--flood button:focus-visible {
	outline-color: var(--color-link, #1a4a73);
}

/* Secondary button on dark/flood grounds: the default solid-dark fill would
   vanish into the ground, so render a ghost (transparent + light hairline). */
.section--dark .button--secondary,
.section--flood .button--secondary {
	background: transparent;
	border: 1px solid var(--color-text-on-dark, rgba(255, 255, 255, 0.6));
	color: var(--color-text-on-dark, rgba(255, 255, 255, 0.92));
}

/* Section label (§5.5) — small uppercase gold pill on a faint tint. */
.section__label {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	color: var(--color-link, #1a4a73);
	background: color-mix(in srgb, var(--color-link, #1a4a73) 12%, transparent);
	padding: 4px 12px;
	margin-bottom: 1em;
}

.section--cream .section__label {
	color: var(--color-link-on-light, #846a31);
}

.section__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.section__heading {
	margin-bottom: 0.6em;
}

.section__heading--hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.section__intro {
	margin-bottom: 1.5em;
	max-width: 800px;
}

.section__cta-row {
	margin-top: 2em;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   4. Accessibility helpers (manifest §8.9)
   --------------------------------------------------------------------------- */

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

.skip-link {
	left: -9999rem;
	position: absolute;
	top: 0;
	z-index: 9999;
	background: var(--color-background, #ffffff);
	color: var(--color-text, #111111);
	padding: 1em 1.25em;
	text-decoration: none;
	font-weight: 600;
}

.skip-link:focus {
	left: 0;
}

/* ---------------------------------------------------------------------------
   5. Buttons (manifest §2.8, §4.8 — CTA contract from TOKEN-ARCHITECTURE §6)
   --------------------------------------------------------------------------- */

/* WCAG CONTRACT — CTA buttons:
   - background: var(--color-primary, #333333)
   - text:       var(--color-cta-text, #ffffff)  ← NEVER var(--color-text, #111111)
   - typography: 15px Barlow 800 (qualifies as large text under WCAG 1.4.3,
                 which TBSQ hover state depends on for compliance)
   Verified ratios: OSQ Navy on Amber 7.03:1 AAA; TBSQ Midnight on Teal
   5.39:1 AA. Per BRAND-PALETTES §3, §4. */
button,
.button,
input[type="submit"] {
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: var(--tracking-cta);
	background: var(--color-primary, #333333);
	color: var(--color-cta-text, #ffffff);
	border: none;
	border-radius: 0;
	padding: 12px 16px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: filter 150ms ease;
}

.button--cta {
	/* Semantic alias for explicit conversion buttons. Same paint as .button
	   per WCAG contract — both surfaces enforce primary bg + cta-text fg. */
	background: var(--color-primary, #333333);
	color: var(--color-cta-text, #ffffff);
}

button:hover,
.button:hover,
input[type="submit"]:hover {
	filter: brightness(0.9);
}

/* Secondary button — inverse: solid dark grounding tone + white text.
   On both sites secondary_color is the deepest tone in the palette;
   white-on-secondary clears AAA on both (OSQ 13.91:1, TBSQ 16.08:1). */
.button--secondary {
	background: var(--color-secondary, #222222);
	color: var(--color-text-on-dark, #ffffff);
}

.button--secondary:hover {
	filter: brightness(1.1);
}

button[disabled],
.button[disabled],
input[type="submit"][disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   6. Site header (manifest §4.2)
   --------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--color-primary, #333333);
	color: var(--color-cta-text, #ffffff);
}

.site-header__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 12px var(--pad-x-desk);
}

.site-header__logo {
	flex-shrink: 0;
}

.site-header__logo img {
	max-height: 48px;
	width: auto;
}

.site-header__site-name {
	color: var(--color-cta-text, #ffffff);
	text-decoration: none;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
}

.site-header__nav {
	flex-grow: 1;
}

.site-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 35px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.site-header__menu li {
	margin: 0;
}

.site-header__menu a {
	color: var(--color-cta-text, #ffffff);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: var(--tracking-cta);
}

.site-header__menu a:hover,
.site-header__menu a:focus {
	color: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
}

.site-header__cta {
	flex-shrink: 0;
}

.site-header__toggle {
	display: none;
	background: var(--color-toggle-bg-on-dark, rgba(255, 255, 255, 0.15));
	color: var(--color-cta-text, #ffffff);
	padding: 10px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 0;
	cursor: pointer;
}

.site-header__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	margin: 4px auto;
}

/* ---------------------------------------------------------------------------
   7. Hero with overlay panel (manifest §2.3, §4.1)
   --------------------------------------------------------------------------- */

.hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 80vh;
	background-color: var(--color-secondary, #222222);
	background-image: var(--hero-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 80px var(--pad-x-desk);
}

.hero--size-large { min-height: 80vh; }
.hero--size-small { min-height: 42vh; }
.hero--size-full  { min-height: 88vh; text-align: center; }

/* Composed photo/gradient ground — derived from the flood token so the hero
   reads as a finished composition even with no --hero-bg photo supplied. When
   a real photo IS set (--hero-bg), it shows through under this moss wash. */
.hero__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.55;
	background: linear-gradient(
		115deg,
		color-mix(in srgb, var(--color-flood, #23302a) 78%, var(--color-shade, #000000)) 0%,
		var(--color-flood, #23302a) 55%,
		color-mix(in srgb, var(--color-flood, #23302a) 62%, var(--color-text-on-dark, #ffffff)) 100%
	);
}

/* Left-to-right darkening so headline/CTAs stay legible over any ground. */
.hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--color-secondary, #222222) 95%, transparent) 0%,
		color-mix(in srgb, var(--color-secondary, #222222) 60%, transparent) 50%,
		transparent 100%
	);
}

/* Monogram watermark — faint brand-accent mark bleeding off the right edge. */
.hero__mono {
	position: absolute;
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
	pointer-events: none;
	font-family: var(--font-condensed);
	font-weight: 800;
	font-size: 520px;
	line-height: 0.7;
	letter-spacing: -0.06em;
	white-space: nowrap;
	color: var(--color-accent, #666666);
	opacity: 0.08;
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	color: var(--color-text-on-dark, #ffffff);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.hero--size-full .hero__inner {
	text-align: center;
	align-items: center;
	max-width: 900px;
}

.hero__ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.hero__ctas .button {
	padding: 18px 32px;
	font-size: 15px;
	transition: filter 150ms ease, transform 100ms ease;
}

.hero__ctas .button:not(.button--secondary) {
	box-shadow: 0 4px 18px color-mix(in srgb, var(--color-primary, #333333) 30%, transparent);
}

.hero__ctas .button:hover {
	transform: translateY(-2px);
}

.hero__breadcrumb {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
}

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

.breadcrumb__item {
	margin: 0;
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	margin-right: 8px;
	opacity: 0.6;
}

.hero__breadcrumb a {
	color: var(--color-text-on-dark, #ffffff);
	text-decoration: none;
}

.hero__breadcrumb a:hover,
.hero__breadcrumb a:focus {
	text-decoration: underline;
}

.hero__breadcrumb [aria-current="page"] {
	opacity: 0.8;
}

.hero__meta {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	opacity: 0.85;
	margin: 0;
}

.hero__title {
	/* Default = global H1 scale (65px desktop). Overridden by .hero--scale-post
	   below for pillar/cluster/blog/post. */
	margin: 0;
}

.hero--scale-global .hero__title {
	font-family: var(--font-condensed);
	font-size: clamp(52px, 9vw, 104px);
	line-height: 0.98;
	font-weight: 700;
	letter-spacing: -0.01em;
	max-width: 15ch;
}

.hero--scale-post .hero__title {
	font-size: 50px;
	line-height: 1.1;
	font-weight: 600;
}

.hero__tagline {
	font-size: 19px;
	line-height: 1.55;
	font-weight: 400;
	max-width: 52ch;
	margin: 0;
	color: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
}

/* ---------------------------------------------------------------------------
   8. Mesh grid — service ↔ location cross-link (manifest §2.4, §4.4)
   --------------------------------------------------------------------------- */

.mesh-grid {
	--mesh-gap: 5px;
	/* Wrapping flex with an explicit 1/3 cell basis (set on the cell below).
	   This keeps the ratified explicit 3-across max (Step-1 Anomaly C — the
	   column count is fixed at 3, NOT viewport-derived like auto-fit), while
	   justify-content:center centers under-filled rows (1- and 2-cell cases)
	   instead of left-aligning them. A full 3/6/9 row fills 100% and snaps
	   unchanged. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mesh-gap);
	/* Centered, width-constrained so the 3 columns stay evenly proportioned
	   instead of stretching across the full 1440px section. No container fill —
	   the gap shows the underlying ground, not a solid primary block. */
	max-width: var(--container-boxed-wide, 1000px);
	margin: 1.5em auto;
}

.mesh-grid__cell {
	position: relative;
	/* Explicit 3-across: basis is exactly one third minus the two gaps. grow:0
	   so a lone cell stays 1/3 width (centered by the parent) rather than
	   stretching; shrink:1 absorbs sub-pixel rounding so a full row never wraps. */
	flex: 0 1 calc((100% - 2 * var(--mesh-gap)) / 3);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	/* Single shared height for every cell — photo and label-only alike — so the
	   grid stays even whether or not images are seeded (§7). Photo cells must NOT
	   re-declare min-height, or a mixed row goes uneven. */
	min-height: 190px;
	padding: 30px 20px;
	/* NO-IMAGE FALLBACK: a quiet hairline-outlined tonal tile — a faint
	   translucent wash + seam border — never a solid color block. Keeps empty
	   cells content-driven and unobtrusive so the label never gets out-shouted.
	   Photo cells override everything below via --has-image. */
	background-color: color-mix(in srgb, var(--color-text-on-dark, #ffffff) 5%, transparent);
	border: 1px solid var(--color-seam-on-dark, rgba(255, 255, 255, 0.15));
	color: var(--color-text-on-dark, #ffffff);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: filter 150ms ease, background-color 150ms ease;
}

.mesh-grid__cell--has-image {
	/* Height is inherited from .mesh-grid__cell — keep it uniform. */
	border-color: transparent;
	background-color: var(--color-secondary, #222222);
	background-image: var(--cell-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Dark overlay tint — only on photo cells, so the label stays legible over any
   background image. No-image cells skip this (there's no image to darken). */
.mesh-grid__cell--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--color-secondary, #222222) 60%, transparent);
	z-index: 0;
}

.mesh-grid__cell > * {
	position: relative;
	z-index: 1;
}

.mesh-grid__cell:hover,
.mesh-grid__cell:focus {
	filter: brightness(1.15);
}

/* No-image cells get a touch more wash on hover (brightness alone barely
   reads on a near-transparent tile). */
.mesh-grid__cell:not(.mesh-grid__cell--has-image):hover,
.mesh-grid__cell:not(.mesh-grid__cell--has-image):focus {
	background-color: color-mix(in srgb, var(--color-text-on-dark, #ffffff) 12%, transparent);
}

/* Focus ring uses link_color (NOT accent) per WCAG constraint 2. */
.mesh-grid__cell:focus-visible {
	outline: 2px solid var(--color-link, #1a4a73);
	outline-offset: -4px;
}

.mesh-grid__divider {
	width: 40px;
	border: none;
	border-top: 1px solid currentColor;
	margin: 0;
	opacity: 0.7;
}

.mesh-grid__title {
	margin: 0;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	color: var(--color-text-on-dark, #ffffff);
}

/* Service rows (mockup .svc-row). Full-width stacked rows on the dark ground:
   a slightly-raised panel, a gold square tick at top-left, and a condensed
   title below. Whole row is the link to the service page. */
.svc-rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 1em 0 0;
}

.svc-row {
	display: block;
	position: relative;
	background: color-mix(in srgb, var(--color-text-on-dark, #ffffff) 5%, var(--color-secondary, #222222));
	border: 1px solid color-mix(in srgb, var(--color-text-on-dark, #ffffff) 8%, transparent);
	padding: 40px 36px;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.svc-row__tick {
	position: absolute;
	left: 36px;
	top: 36px;
	width: 14px;
	height: 14px;
	background: var(--color-primary, #333333);
}

.svc-row__title {
	display: block;
	margin-top: 42px;
	font-family: var(--font-condensed);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.05;
	color: var(--color-text-on-dark, #ffffff);
}

.svc-row:hover,
.svc-row:focus-visible {
	border-color: var(--color-primary, #333333);
	background: color-mix(in srgb, var(--color-text-on-dark, #ffffff) 9%, var(--color-secondary, #222222));
}

.svc-row:focus-visible {
	outline: 2px solid var(--color-link, #1a4a73);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   9. Lead capture form (manifest §2.5, §4.5)
   --------------------------------------------------------------------------- */

.lead-form {
	/* White form-card surface (mockup .form-card). Anchors dark text so the
	   card stays legible on a dark/flood ground (e.g. the home hero-form
	   section), where it would otherwise inherit the ground's light text. */
	background: var(--color-background, #ffffff);
	color: var(--color-text, #111111);
	padding: 36px;
	max-width: 460px;
	margin: 0 auto;
	border: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
	border-radius: 0;
}

.lead-form--hero,
.lead-form--cta,
.lead-form--contact {
	max-width: 100%;
}

.lead-form__honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	left: -9999px;
}

.lead-form__progress {
	margin-bottom: 28px;
}

.lead-form__steps {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	gap: 8px;
}

/* Segmented progress bars (mockup .form-card__progress). The step label text
   lives in .lead-form__step-text and is hidden visually but kept for a11y. */
.lead-form__step {
	flex: 1;
	margin: 0;
	padding: 0;
	height: 4px;
	background: var(--color-field-border, rgba(0, 0, 0, 0.12));
}

.lead-form__step.is-active {
	background: var(--color-primary, #333333);
}

.lead-form__step-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.lead-form__progress-note {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	color: var(--color-text, #111111);
	opacity: 0.6;
}

.lead-form__panel {
	border: none;
	padding: 0;
	margin: 0;
}

/* The hidden attribute must beat component display rules — .lead-form__row is
   flex, .lead-form__actions is flex, .own-types is grid — so a JS-hidden step
   panel OR a JS-toggled Pass-2 branch element actually disappears. */
.lead-form [hidden] {
	display: none !important;
}

.lead-form__legend {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
	color: var(--color-text, #111111);
}

.lead-form__row {
	margin-bottom: 25px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lead-form__row > label,
.lead-form__label {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	text-transform: uppercase;
	color: var(--color-text, #111111);
	opacity: 0.85;
}

.lead-form__row input[type="text"],
.lead-form__row input[type="email"],
.lead-form__row input[type="tel"],
.lead-form__row select,
.lead-form__row textarea {
	font-family: var(--font-primary);
	font-size: 16px;
	padding: 12px 14px;
	border: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
	border-radius: 0;
	background: var(--color-background, #ffffff);
	color: var(--color-text, #111111);
}

.lead-form__row input:focus,
.lead-form__row select:focus,
.lead-form__row textarea:focus {
	border-color: var(--color-link, #1a4a73);
	outline-offset: 0;
}

.lead-form__radio {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: 1;
	margin-bottom: 6px;
	cursor: pointer;
}

.lead-form__radio input[type="radio"] {
	flex-shrink: 0;
	accent-color: var(--color-primary, #333333);
}

/* Home-type selectable icon cards (mockup .home-types / .home-type). The
   radio inside each card is the real, checkable property_type input — it is
   visually hidden but kept interactive so the wizard JS + handler are
   unaffected. Selection state is driven off :has(input:checked). */
.home-types {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.home-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 22px 14px;
	border: 2px solid var(--color-field-border, rgba(0, 0, 0, 0.12));
	background: var(--color-background, #ffffff);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.home-type input[type="radio"] {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.home-type:hover {
	border-color: var(--color-primary, #333333);
}

.home-type:has(input[type="radio"]:checked) {
	border-color: var(--color-primary, #333333);
	background: color-mix(in srgb, var(--color-primary, #333333) 10%, var(--color-background, #ffffff));
}

.home-type:has(input[type="radio"]:focus-visible) {
	outline: 2px solid var(--color-link, #1a4a73);
	outline-offset: 2px;
}

.home-type__icon {
	font-size: 32px;
	line-height: 1;
}

.home-type__label {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	color: var(--color-text, #111111);
}

/* ---------------------------------------------------------------------------
   Pass 2 — ownership-first Step 1: own/rent + buying-soon as prominent answer
   cards (approved mock "Option A"), the soft qualifier, and the renter decline
   block. The selected state uses --color-primary (the
   conversion/CTA fill ROLE in this theme — there is NO separate --color-cta
   token) + a faint primary tint, the SAME treatment as the property-type
   cards. Zero hardcoded palette hex; TBSQ inherits via its own --color-*
   roles with no separate edit.
   --------------------------------------------------------------------------- */

/* Soft ownership qualifier — muted body copy on the white form card. */
.lead-form__qualifier {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-text, #111111) 72%, var(--color-background, #ffffff));
}

/* Ownership / buying-soon answer cards. Mirror .home-type but with a 1.5px
   border and a text label (+ optional sub-label) instead of an icon. */
.own-types {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.own-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 16px 16px;
	border: 1.5px solid var(--color-field-border, rgba(0, 0, 0, 0.12));
	background: var(--color-background, #ffffff);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.own-type input[type="radio"] {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.own-type:hover {
	border-color: var(--color-primary, #333333);
}

.own-type:has(input[type="radio"]:checked) {
	border-color: var(--color-primary, #333333);
	background: color-mix(in srgb, var(--color-primary, #333333) 10%, var(--color-background, #ffffff));
}

.own-type:has(input[type="radio"]:focus-visible) {
	outline: 2px solid var(--color-link, #1a4a73);
	outline-offset: 2px;
}

.own-type__label {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	color: var(--color-text, #111111);
}

.own-type__sub {
	font-size: 13px;
	color: color-mix(in srgb, var(--color-text, #111111) 58%, var(--color-background, #ffffff));
}

/* Renter sub-question + near-term-buyer capture headings. */
.lead-form__subq-heading {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 600;
	color: var(--color-text, #111111);
}

.lead-form__subq-sub {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-text, #111111) 72%, var(--color-background, #ffffff));
}

.lead-form__buyer-capture {
	margin-bottom: 8px;
}

/* Renter (not buying) decline. */
.lead-form__decline-heading {
	margin: 0 0 10px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 24px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--color-text, #111111);
}

.lead-form__decline-body {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--color-text, #111111) 78%, var(--color-background, #ffffff));
}

/* Secondary text actions on the decline (change answer / learn more). */
.lead-form__decline-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 18px;
}

.lead-form__textlink {
	display: inline-block;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-link-on-light, #846a31);
}

.lead-form__textlink:hover,
.lead-form__textlink:focus-visible {
	text-decoration: underline;
}

.lead-form__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 10px;
}

/* Step-advance button spans the card; with a Back button present they share
   the row. Reuses the locked .button contract (15px Barlow 800, no radius). */
.lead-form__actions .button {
	flex: 1;
}

.lead-form__messages {
	margin-top: 16px;
	font-size: 15px;
}

.lead-form__messages:not(:empty) {
	padding: 12px 16px;
	background: var(--color-neutral-surface, #f5f5f5);
	border-left: 3px solid var(--color-primary, #333333);
}

/* ---------------------------------------------------------------------------
   10. Value-prop cards — glassmorphism (manifest §2.7, §4.6)
   --------------------------------------------------------------------------- */

.value-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 1em 0;
}

.value-card {
	padding: 20px;
	background: var(--color-glass-tint, rgba(255, 255, 255, 0.20));
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	color: var(--color-text, #111111);
	border: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
}

.value-card__title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
	text-transform: none;
	letter-spacing: 0;
}

.value-card__text {
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.value-card__citation {
	font-size: 13px;
	opacity: 0.7;
	margin-top: 8px;
	font-style: italic;
}

.value-card__icon {
	width: 24px;
	height: 24px;
	color: var(--color-primary, #333333);
	margin-bottom: 12px;
}

/* Trust / credential cells (mockup .trust__grid / .trust__cell). White
   bordered cells in a closed grid: the grid carries the top + left hairline,
   each cell the right + bottom, so any complete set of rows reads as one
   ruled block. Column count is set per render via --trust-cols so 3 cards
   form a single row and 4 form a 2×2 (front-page.php computes it). */
.trust__grid {
	display: grid;
	grid-template-columns: repeat(var(--trust-cols, 2), 1fr);
	gap: 0;
	margin-top: 1em;
	border-top: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
	border-left: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
}

.trust__cell {
	background: var(--color-background, #ffffff);
	border-right: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
	border-bottom: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
	padding: 40px 36px;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
}

.trust__icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	line-height: 1;
	color: var(--color-primary, #333333);
}

.trust__cell-title {
	font-family: var(--font-condensed);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.05;
	margin: 0;
	color: var(--color-text, #111111);
}

.trust__cell-text {
	font-size: 16px;
	line-height: 1.55;
	margin: 12px 0 0;
	color: var(--color-text, #111111);
}

.trust__cell-citation {
	font-size: 13px;
	line-height: 1.4;
	margin: 10px 0 0;
	font-style: italic;
	color: var(--color-text, #111111);
	opacity: 0.65;
}

/* Step 8b Fix 2 — merged big-number stat card. Headerless: the two figures are
   the focal point (condensed + darkened-gold via --color-link-on-light), each
   with a quiet plain label and small italic citation, stacked as one calm unit.
   Top-aligned under the existing emoji icon. Tokens only; TBSQ-safe. */
.trust__cell--stats {
	justify-content: flex-start;
	gap: 28px;
}

.trust__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.trust__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.trust__stat-number {
	font-family: var(--font-condensed);
	font-weight: 700;
	font-size: 64px;
	line-height: 1;
	color: var(--color-link-on-light, #846a31);
}

.trust__stat-label {
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-text, #111111);
}

.trust__stat-cite {
	font-size: 13px;
	line-height: 1.4;
	font-style: italic;
	color: var(--color-text, #111111);
	opacity: 0.65;
}

/* ---------------------------------------------------------------------------
   11. Process card grid — 4-step (manifest §2.6, §4.7)
   --------------------------------------------------------------------------- */

/* Process-band ground is now owned by the .section--flood modifier on the
   section element (RETHEME §3/§5). No background is set here — a shorthand
   `background` would reset the inherited tile background-image to none. */

.process__title {
	width: 20%;
	float: left;
	padding-right: 24px;
}

.process__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	width: 80%;
	float: right;
	counter-reset: process-step;
}

.process__step {
	display: flex;
	flex-direction: column;
	min-height: 270px;
	background: var(--color-primary, #333333);
	color: var(--color-cta-text, #ffffff);
	counter-increment: process-step;
}

.process__step-icon-area {
	position: relative;
	padding: 40px 20px;
	text-align: center;
	background: color-mix(in srgb, var(--color-primary, #333333) 80%, var(--color-secondary, #222222) 20%);
}

/* Outlined double-stroke step numeral (RETHEME §5 craft). Counter renders
   01–04 automatically when Step-4 process_steps[] populates the grid.
   Transparent fill + ~85% white text-stroke so it reads as a hollow numeral
   on the dark icon-area; degrades to a faint solid glyph where -webkit-text-
   stroke is unsupported. */
.process__step-icon-area::before {
	content: counter(process-step, decimal-leading-zero);
	display: block;
	margin-bottom: 14px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--color-text-on-dark, rgba(255, 255, 255, 0.85));
	text-stroke: 1.5px var(--color-text-on-dark, rgba(255, 255, 255, 0.85));
}

.process__step-icon-area img,
.process__step-icon-area svg {
	width: 35px;
	height: 35px;
	display: inline-block;
}

.process__step-body {
	padding: 20px;
	flex-grow: 1;
}

.process__step-title {
	font-size: 22px;
	font-weight: 500;
	margin-bottom: 8px;
	color: var(--color-cta-text, #ffffff);
	letter-spacing: var(--tracking-tight);
}

.process__step-desc {
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

/* Homepage runs the process grid full-width (no .process__title sidecar) and
   as a 2×2 grid: 01/02 on the top row, 03/04 on the bottom. Card design is
   the shared component's — only the arrangement is overridden here. Scoped to
   .home__process so single-services.php keeps the default layout. */
.home__process .process__grid {
	width: 100%;
	float: none;
	grid-template-columns: 1fr 1fr;
}

/* STEP 7c/7d — "Option 3" greige/beige two-tone process cards (homepage only).
   A greige number band on top holds the outlined 01–04 numeral (stroke in a
   darkened-gold derived from --color-link so TBSQ inherits its own darkened
   accent, #2C768D family); beige body below with a dark title + muted
   description, vertically centered. Hard-edged, hairline greige border. Reuses
   the shared counter + -webkit-text-stroke numeral. Step 7d caps the height at
   360px (the 1:1 aspect-ratio forced ~700px tall cards at full container
   width); ~120px band + ~240px body keeps the proportions balanced. Scoped to
   .home__process so single-services.php keeps the gold treatment. Greige band/
   border, muted body text, and darkened-gold stroke are color-mix-derived from
   the 10-token palette (no dedicated token exists for those roles), so they
   remain TBSQ-safe with zero hardcoded palette hex. */
.home__process .process__step {
	min-height: 360px;
	background: var(--color-neutral-surface, #f5f2e8);
	border: 1px solid color-mix(in srgb, var(--color-neutral-surface, #f5f2e8) 88%, var(--color-shade, #000000));
}

.home__process .process__step-icon-area {
	padding: 28px 20px;
	background: color-mix(in srgb, var(--color-neutral-surface, #f5f2e8) 92%, var(--color-shade, #000000));
	border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-surface, #f5f2e8) 88%, var(--color-shade, #000000));
}

.home__process .process__step-icon-area::before {
	margin-bottom: 0;
	-webkit-text-stroke: 1.5px var(--color-link-on-light, #846a31);
	text-stroke: 1.5px var(--color-link-on-light, #846a31);
}

.home__process .process__step-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.home__process .process__step-title {
	color: var(--color-text, #0d0f0d);
}

.home__process .process__step-desc {
	color: color-mix(in srgb, var(--color-text, #0d0f0d) 60%, var(--color-neutral-surface, #f5f2e8));
}

/* ---------------------------------------------------------------------------
   11b. Home hero-form — Step 8a: two-column (credential blocks + form)
   --------------------------------------------------------------------------- */

/* Two-column top section: credential column left, the lead form right. The
   form column is capped so the top hero-form matches the bottom CTA form's
   width (Step 8a Fix 1 — both forms now read at the same scale). */
.hero-form__layout {
	display: grid;
	grid-template-columns: 1fr minmax(0, 560px);
	gap: 48px;
	align-items: stretch;
}

.hero-form__form .lead-form {
	max-width: 100%;
	margin: 0;
}

/* Reassurance microcopy at the hero form entry. Sits on the dark section
   ground (above the white form card), so it uses the on-dark muted ROLE token
   — never a hardcoded hex — which means TBSQ inherits with no separate edit.
   Mirrors the in-form .lead-form__progress-note scale (13px / 600 / CTA
   tracking / uppercase) so the two reassurance lines read as an intentional
   pair. Carries no savings/economic claim (time + no-obligation + privacy
   only); the time estimate stays with the in-form progress note. */
.hero-form__reassure {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	color: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
}

/* Credential column stretches its three blocks to fill the form's height so
   the two columns visually balance (Step 8a Fix 3). */
.hero-form__creds {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* When the hero form column is removed (home), the credential blocks reflow
   into a clean full-width band: three across on desktop, stacked on mobile —
   no dead space and no empty grid track. */
.hero-form__layout--creds-only {
	display: block;
}
.hero-form__layout--creds-only .hero-form__creds {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 880px) {
	.hero-form__layout--creds-only .hero-form__creds {
		grid-template-columns: 1fr;
	}
}

/* Credential block — Treatment 3 (mirror of the process cards): cream card,
   icon + headline in the upper area, a darker greige band on the BOTTOM
   holding the description. Zero-radius, hairline greige border. Reuses the
   Step-7c token mapping exactly (cream = --color-neutral-surface; greige band/
   border = color-mix neutral-surface/--color-shade; muted band text = color-mix
   --color-text/neutral-surface; darkened-gold icon = --color-link-on-light).
   Zero hardcoded palette hex; TBSQ inherits its own neutrals. */
.cred-block {
	display: flex;
	flex: 1;
	flex-direction: column;
	background: var(--color-neutral-surface, #f5f2e8);
	border: 1px solid color-mix(in srgb, var(--color-neutral-surface, #f5f2e8) 88%, var(--color-shade, #000000));
	border-radius: 0;
}

.cred-block__top {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 22px 24px 18px;
}

.cred-block__icon {
	display: block;
	margin-bottom: 10px;
	font-size: 30px;
	line-height: 1;
	color: var(--color-link-on-light, #846a31);
}

.cred-block__title {
	margin: 0;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 24px;
	line-height: 1.05;
	font-weight: 700;
	color: var(--color-text, #0d0f0d);
}

.cred-block__band {
	padding: 16px 24px 18px;
	background: color-mix(in srgb, var(--color-neutral-surface, #f5f2e8) 92%, var(--color-shade, #000000));
	border-top: 1px solid color-mix(in srgb, var(--color-neutral-surface, #f5f2e8) 88%, var(--color-shade, #000000));
}

.cred-block__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-text, #0d0f0d) 60%, var(--color-neutral-surface, #f5f2e8));
}

/* Step 8a Fix 2 / Step 8b Fix 1 — the homepage hero (only) top-aligns its
   content and drops the 80vh floor so the band hugs its content with balanced
   56px top/bottom padding: the headline sits close to the nav and the
   credential/form section comes up right under the CTAs (no dead space above
   or below). Scoped to .hero--with-form so other templates' centered heroes
   are untouched. */
.hero--with-form {
	align-items: flex-start;
	min-height: auto;
	padding-top: 56px;
	padding-bottom: 56px;
}

/* Step 8a Fix 4 — the reframed tax-credit trust card carries a "Find out →"
   affordance linking to the quote form. Uses --color-link-on-light (the
   darkened-gold that clears AA on the cream trust ground). */
.trust__cell-link {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-link-on-light, #846a31);
}

.trust__cell-link:hover,
.trust__cell-link:focus {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   12. CTA + form section — S7 layout (manifest §4.8)
   --------------------------------------------------------------------------- */

.cta-block {
	/* Longhand (not the `background` shorthand) so the .section--cream tile
	   background-image on the same element is not reset to none. */
	background-color: var(--color-neutral-surface, #f5f5f5);
}

.cta-block__grid {
	display: grid;
	grid-template-columns: 40fr 60fr;
	gap: 40px;
	align-items: start;
}

.cta-block__copy {
	padding: 20px 0;
}

.cta-block__pills {
	list-style: none;
	margin: 1em 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Trust pill — accent_color used as LEFT BORDER ONLY (decorative, not
   contrast-bearing). Gradient bg uses accent-tint → neutral. */
.cta-block__pill {
	border-left: 3px solid var(--color-accent, #666666);
	padding: 18px 18px 18px 7px;
	margin: 0;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--color-accent, #666666) 18%, transparent) 0%,
		var(--color-neutral-surface, #f5f5f5) 95%
	);
	font-weight: 500;
}

.cta-block__buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 1em;
}

.cta-block__form {
	background: var(--color-background, #ffffff);
}

/* ---------------------------------------------------------------------------
   13. FAQ block — accordion (manifest §4.9)
   --------------------------------------------------------------------------- */

.faq-block {
	background: var(--color-neutral-surface, #f5f5f5);
	padding: 40px 30px;
	max-width: var(--container-boxed-wide);
	margin: 2em auto;
}

.faq-block__heading {
	margin-bottom: 1em;
}

.faq-block__list {
	display: flex;
	flex-direction: column;
}

.faq-block__item {
	border-bottom: 2px solid var(--color-accent, #666666);
}

.faq-block__item:last-child {
	border-bottom: none;
}

.faq-block__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
	font-size: 20px;
	font-weight: 600;
	color: var(--color-text, #111111);
}

.faq-block__question::-webkit-details-marker {
	display: none;
}

.faq-block__question-text {
	flex-grow: 1;
}

.faq-block__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	position: relative;
	transition: transform 200ms ease;
}

.faq-block__icon::before,
.faq-block__icon::after {
	content: "";
	position: absolute;
	background: currentColor;
}

.faq-block__icon::before {
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	transform: translateY(-50%);
}

.faq-block__icon::after {
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	transition: transform 200ms ease;
}

.faq-block__item[open] .faq-block__icon::after {
	transform: translateX(-50%) scaleY(0);
}

.faq-block__answer {
	padding: 0 0 20px 0;
	font-size: 17px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   14. HowTo block (rendered list)
   --------------------------------------------------------------------------- */

.howto-block {
	max-width: var(--container-boxed-wide);
	margin: 2em auto;
}

.howto-block__heading {
	margin-bottom: 0.5em;
}

.howto-block__description {
	font-size: 17px;
	margin-bottom: 1.5em;
}

.howto-block__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: howto-step;
}

.howto-block__step {
	counter-increment: howto-step;
	padding: 24px 0 24px 60px;
	position: relative;
	border-bottom: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
}

.howto-block__step::before {
	content: counter(howto-step);
	position: absolute;
	left: 0;
	top: 24px;
	width: 42px;
	height: 42px;
	background: var(--color-primary, #333333);
	color: var(--color-cta-text, #ffffff);
	font-size: 18px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.howto-block__step-name {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 8px;
	letter-spacing: 0;
	text-transform: none;
}

.howto-block__step-image {
	margin: 12px 0;
	max-width: 400px;
}

.howto-block__step-text {
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   15. Inline blocks — Stat Callout, Link Cluster
   --------------------------------------------------------------------------- */

.stat-callout {
	background: var(--color-neutral-surface, #f5f5f5);
	border-left: 4px solid var(--color-primary, #333333);
	padding: 24px 28px;
	margin: 2em 0;
}

.stat-callout__value {
	font-size: 48px;
	line-height: 1.05;
	font-weight: 800;
	color: var(--color-primary, #333333);
	margin-bottom: 4px;
}

.stat-callout__label {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
}

.stat-callout__citation {
	font-size: 13px;
	opacity: 0.75;
	font-style: italic;
}

.stat-callout__citation-link {
	color: var(--color-link, #1a4a73);
}

.link-cluster {
	background: var(--color-neutral-surface, #f5f5f5);
	padding: 20px 24px;
	margin: 2em 0;
}

.link-cluster__heading {
	font-size: 18px;
	margin-bottom: 0.6em;
	text-transform: uppercase;
	letter-spacing: var(--tracking-cta);
	font-weight: 700;
}

.link-cluster__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.link-cluster__item {
	margin: 0;
}

.link-cluster__link {
	color: var(--color-link, #1a4a73);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   16. Auto-TOC (manifest §4.x referenced by inc/toc.php output)
   --------------------------------------------------------------------------- */

.toc {
	background: var(--color-neutral-surface, #f5f5f5);
	padding: 30px;
	margin: 2em 0;
	max-width: var(--container-boxed-wide);
}

.toc__title {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-cta);
	margin-bottom: 0.8em;
	line-height: 1.3;
}

.toc__list {
	list-style: decimal;
	padding-left: 1.5em;
	margin: 0;
}

.toc__item {
	margin-bottom: 6px;
}

.toc__link {
	color: var(--color-link, #1a4a73);
	text-decoration: none;
}

.toc__link:hover,
.toc__link:focus {
	text-decoration: underline;
	color: var(--color-link-hover, #0d2942);
}

/* ---------------------------------------------------------------------------
   17. Sticky bottom post navigation (manifest §4.10)
   --------------------------------------------------------------------------- */

.post-nav {
	position: sticky;
	bottom: 0;
	z-index: 50;
	display: flex;
	gap: 25px;
	background: var(--color-neutral-surface, #f5f5f5);
	border-top: 1px solid var(--color-accent, #666666);
	padding: 25px var(--pad-x-desk);
}

.post-nav__prev,
.post-nav__next {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--color-text, #111111);
	text-decoration: none;
}

.post-nav__next {
	text-align: right;
	align-items: flex-end;
}

.post-nav__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: var(--tracking-cta);
	opacity: 0.7;
	font-weight: 600;
}

.post-nav__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-link, #1a4a73);
}

.post-nav a:hover .post-nav__title,
.post-nav a:focus .post-nav__title {
	color: var(--color-link-hover, #0d2942);
}

/* ---------------------------------------------------------------------------
   18. City data blocks — C1 through C6 (manifest §5.4)
   --------------------------------------------------------------------------- */

.city-block {
	margin: 2.5em 0;
	padding-top: 1em;
	border-top: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
}

.city-block:first-child {
	border-top: none;
	padding-top: 0;
}

.city-block__heading {
	margin-bottom: 0.6em;
}

.city-block__body p {
	font-size: 17px;
	line-height: 1.65;
}

.city-block__list {
	margin: 1em 0 1em 1.5em;
}

.city-block__list li {
	margin-bottom: 8px;
	font-size: 17px;
	line-height: 1.55;
}

.city-block__note {
	background: var(--color-neutral-surface, #f5f5f5);
	border-left: 3px solid var(--color-accent, #666666);
	padding: 14px 18px;
	margin-top: 1.25em;
	font-size: 15px;
	line-height: 1.55;
}

/* C4 — Permitting & Solar Rights / Speakable. The wrapper class
   .city-block--engineering is the CSS-selector hook the SpeakableSpecification
   @graph entry targets; the class name is preserved across the C4 repurpose so
   the schema anchor stays valid. No special styling needed here beyond what
   .city-block already provides; the class lives so the schema selector matches
   a real element. */

/* ---------------------------------------------------------------------------
   19. Share buttons (manifest §6 — Pro replacement)
   --------------------------------------------------------------------------- */

.share-buttons {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
}

.share-buttons__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.share-buttons__item {
	margin: 0;
}

.share-buttons__link {
	display: inline-block;
	padding: 10px 16px;
	background: var(--color-secondary, #222222);
	color: var(--color-text-on-dark, #ffffff);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
}

.share-buttons__link:hover,
.share-buttons__link:focus {
	color: var(--color-text-on-dark, #ffffff);
	filter: brightness(1.15);
}

/* ---------------------------------------------------------------------------
   20. Newsletter index + post card (manifest §5.9)
   --------------------------------------------------------------------------- */

.blog-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.blog-index__item {
	margin: 0;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--color-neutral-surface, #f5f5f5);
	height: 100%;
}

.post-card__image-link {
	display: block;
	overflow: hidden;
}

.post-card__image {
	width: 100%;
	height: auto;
	transition: transform 300ms ease;
}

.post-card__image-link:hover .post-card__image {
	transform: scale(1.04);
}

.post-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.post-card__meta {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	opacity: 0.7;
	margin: 0;
}

.post-card__title {
	font-size: 24px;
	line-height: 1.25;
	font-weight: 600;
	margin: 0;
}

.post-card__title a {
	color: var(--color-text, #111111);
	text-decoration: none;
}

.post-card__title a:hover,
.post-card__title a:focus {
	color: var(--color-link, #1a4a73);
	text-decoration: underline;
}

.post-card__excerpt {
	font-size: 16px;
	line-height: 1.6;
}

.blog-index__pagination {
	margin-top: 2.5em;
}

.blog-index__pagination-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.blog-index__pagination-item {
	margin: 0;
}

.blog-index__pagination a,
.blog-index__pagination .current {
	display: inline-block;
	padding: 8px 14px;
	text-decoration: none;
	color: var(--color-link, #1a4a73);
	border: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
}

.blog-index__pagination .current {
	background: var(--color-primary, #333333);
	color: var(--color-cta-text, #ffffff);
	border-color: var(--color-primary, #333333);
	font-weight: 700;
}

.blog-index__empty {
	font-size: 18px;
	text-align: center;
	opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   21. Pillar + post layout
   --------------------------------------------------------------------------- */

.pillar__featured-image,
.post__featured-image {
	margin: 0 0 2em 0;
}

.pillar__featured-image img,
.post__featured-image img {
	width: 100%;
	height: auto;
}

.pillar__content,
.post__content,
.city__content,
.entry-content {
	font-size: 18px;
	line-height: 1.65;
}

.pillar__content > h2,
.post__content > h2,
.city__content > h2,
.entry-content > h2 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.pillar__content > h3,
.post__content > h3,
.city__content > h3,
.entry-content > h3 {
	margin-top: 1.25em;
	margin-bottom: 0.4em;
}

/* ---------------------------------------------------------------------------
   22. 404 page (manifest §5.12)
   --------------------------------------------------------------------------- */

/* 404 ground is owned by the .section--cream modifier on the section element
   (RETHEME §3). No background shorthand here — it would reset the tile. */

.error-404__cta-row {
	text-align: center;
	margin-bottom: 2em;
}

.error-404__column {
	margin-bottom: 1.5em;
}

.error-404__column-heading {
	font-size: 22px;
	margin-bottom: 0.6em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-cta);
	line-height: 1.3;
}

.error-404__link-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.error-404__link-list li {
	margin-bottom: 8px;
}

.error-404__link-list a {
	color: var(--color-link, #1a4a73);
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
   23. Front page extras
   --------------------------------------------------------------------------- */

/* Coverage tiles (mockup .tile-grid / .tile). Substantial 300px county tiles
   on the dark/flood ground, each a composed gradient with a centered
   double-rule label. The whole tile links to the county hub page. Looks
   complete with no per-county photo (gradient ground does the work); a real
   image could layer behind .tile__bg later without changing the label. */
.tile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin: 1em 0 0;
}

.tile {
	display: block;
	position: relative;
	height: 300px;
	overflow: hidden;
	text-decoration: none;
}

.tile__bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		var(--color-flood, #23302a),
		color-mix(in srgb, var(--color-flood, #23302a) 65%, var(--color-text-on-dark, #ffffff))
	);
	transition: transform 0.4s ease;
}

.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--color-shade, #000000) 25%, transparent),
		color-mix(in srgb, var(--color-shade, #000000) 65%, transparent)
	);
}

.tile:hover .tile__bg,
.tile:focus-visible .tile__bg {
	transform: scale(1.05);
}

.tile__label {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.tile__name {
	font-family: var(--font-condensed);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-text-on-dark, #ffffff);
	padding: 0 16px;
}

.tile__rule {
	width: 42px;
	height: 2px;
	background: var(--color-text-on-dark, #ffffff);
}

.tile:focus-visible {
	outline: 2px solid var(--color-primary, #333333);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   24. Footer (manifest §2.11, §4.3)
   --------------------------------------------------------------------------- */

.site-footer {
	background: var(--color-secondary, #222222);
	color: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
	padding: 60px var(--pad-x-desk) 30px;
	margin-top: 60px;
	/* Clip the oversized monogram watermark to the footer box. */
	overflow: hidden;
}

.site-footer__inner {
	position: relative;
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	gap: 40px;
}

/* Monogram watermark (RETHEME §5). PLACEHOLDER lettermark until a real asset
   is supplied via theme_defaults.monogram_image — see footer.php ASSET SLOT
   note. Decorative, very low opacity tonal mark behind the footer content. */
.site-footer__monogram {
	position: absolute;
	top: -28px;
	right: -8px;
	z-index: 0;
	pointer-events: none;
	line-height: 1;
}

.site-footer__monogram-img {
	width: 220px;
	height: auto;
	opacity: 0.06;
}

.site-footer__monogram-mark {
	display: block;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 200px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--color-text-on-dark, #ffffff);
	opacity: 0.05;
}

/* Keep footer content above the watermark. */
.site-footer__brand,
.site-footer__columns,
.site-footer__bottom {
	position: relative;
	z-index: 1;
}

.site-footer__brand {
	max-width: 320px;
}

.site-footer__logo img {
	max-width: 80px;
	height: auto;
}

.site-footer__site-name {
	color: var(--color-text-on-dark, #ffffff);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px 0;
	text-transform: uppercase;
	letter-spacing: var(--tracking-cta);
}

.site-footer__tagline {
	color: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
	font-size: 16px;
	margin: 0;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.site-footer__col-header {
	color: var(--color-text-on-dark, #ffffff);
	padding-bottom: 12px;
	margin-bottom: 16px;
	/* Gold underline (RETHEME §5.7) — gold reads well on the dark footer ground;
	   was --color-accent (sage/sky, decorative-only). */
	border-bottom: 1px solid var(--color-link, #1a4a73);
	font-size: 14px;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	font-weight: 700;
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__menu li {
	margin-bottom: 7px;
}

.site-footer__menu a {
	color: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus {
	color: var(--color-text-on-dark, #ffffff);
	text-decoration: underline;
}

.site-footer__contact-row {
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.5;
}

.site-footer__bottom {
	border-top: 1px solid var(--color-seam-on-dark, rgba(255, 255, 255, 0.15));
	padding-top: 24px;
	margin-top: 16px;
}

.site-footer__copyright {
	color: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.site-footer__copyright a {
	color: var(--color-text-on-dark, #ffffff);
}

/* ---------------------------------------------------------------------------
   25. Responsive — laptop (1025-1439px)
   --------------------------------------------------------------------------- */

@media (max-width: 1439px) {
	h1 { font-size: 55px; line-height: 60px; }
	h2 { font-size: 50px; line-height: 58px; }
	h3 { font-size: 26px; }

	.hero--scale-post   .hero__title { font-size: 40px; line-height: 1.15; }

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

	.process__grid { gap: 7px; }

	.lead-form { max-width: 425px; }

	.cta-block__grid { gap: 30px; }
}

/* ---------------------------------------------------------------------------
   26. Responsive — tablet (768-1024px)
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	h1 { font-size: 45px; line-height: 50px; }
	h2 { font-size: 40px; line-height: 42px; }

	.hero--scale-post   .hero__title { font-size: 36px; line-height: 1.15; }

	.hero {
		padding-left: var(--pad-x-tab);
		padding-right: var(--pad-x-tab);
	}
	.hero--size-large { min-height: 70vh; }
	.hero--size-small { min-height: 38vh; }
	.hero--size-full  { min-height: 88vh; }

	.hero__mono { font-size: 360px; }

	.section,
	.section--rhythm-a {
		padding-top: var(--pad-y-boxed-mob);
		padding-bottom: var(--pad-y-boxed-mob);
		padding-left: var(--pad-x-tab);
		padding-right: var(--pad-x-tab);
	}

	.section--rhythm-b {
		padding-top: var(--pad-y-tall-tab);
		padding-bottom: var(--pad-y-tall-tab);
		padding-left: var(--pad-x-tab);
		padding-right: var(--pad-x-tab);
	}

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

	.trust__grid { grid-template-columns: 1fr 1fr; }
	.trust__cell { padding: 32px 28px; min-height: 240px; }

	.process__title,
	.process__grid {
		width: 100%;
		float: none;
		padding-right: 0;
	}
	.process__title { margin-bottom: 20px; }
	.process__grid { grid-template-columns: repeat(2, 1fr); }

	/* Step 8a — stack the hero-form columns; form first so the CTA isn't pushed
	   below the three credential blocks. Cards no longer stretch to match the
	   form height once stacked. */
	.hero-form__layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.hero-form__form { order: -1; }
	.cred-block { flex: 0 0 auto; }

	.cta-block__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.lead-form {
		max-width: 100%;
		padding: 30px 24px;
	}

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

	.site-footer__col-header { padding-bottom: 25px; }

	.tile { height: 240px; }

	.blog-index__list { grid-template-columns: 1fr; }

	.post-nav {
		padding-left: var(--pad-x-tab);
		padding-right: var(--pad-x-tab);
	}
}

/* ---------------------------------------------------------------------------
   27. Responsive — mobile (<768px)
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	h1 { font-size: 35px; line-height: 40px; }
	h2 { font-size: 32px; line-height: 35px; }
	h3 { font-size: 22px; }

	.hero--scale-post   .hero__title { font-size: 28px; line-height: 1.2; }

	.hero {
		padding-left: var(--pad-x-mob);
		padding-right: var(--pad-x-mob);
		padding-top: 64px;
		padding-bottom: 48px;
	}
	.hero--size-large { min-height: 78vh; }
	.hero--size-small { min-height: 320px; }

	.hero__mono { font-size: 240px; }

	.hero__ctas .button { padding: 16px 24px; }

	.hero__inner {
		max-width: 100%;
	}

	.section,
	.section--rhythm-a,
	.section--rhythm-b {
		padding-left: var(--pad-x-mob);
		padding-right: var(--pad-x-mob);
	}

	.section--rhythm-a {
		padding-top: var(--pad-y-boxed-mob);
		padding-bottom: var(--pad-y-boxed-mob);
	}

	.section--rhythm-b {
		padding-top: var(--pad-y-tall-mob);
		padding-bottom: var(--pad-y-tall-mob);
	}

	.site-header__inner {
		padding-left: var(--pad-x-mob);
		padding-right: var(--pad-x-mob);
		gap: 12px;
	}

	.site-header__nav,
	.site-header__cta { display: none; }

	.site-header__toggle { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; }

	.mesh-grid__cell { flex-basis: calc((100% - var(--mesh-gap)) / 2); }

	.value-cards {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.value-card { padding: 25px; }

	.trust__grid { grid-template-columns: 1fr; }
	.trust__cell { min-height: 0; padding: 28px 24px; }

	.process__grid { grid-template-columns: 1fr; }
	/* Scoped homepage rule out-specifies the desktop 2×2 override above. */
	.home__process .process__grid { grid-template-columns: 1fr; }

	.lead-form {
		padding: 25px;
		max-width: 100%;
	}

	.lead-form__steps { gap: 6px; }

	.faq-block {
		padding: 25px 20px;
	}

	.faq-block__question { font-size: 17px; }

	.howto-block__step {
		padding: 16px 0 16px 50px;
	}

	.howto-block__step::before {
		width: 36px;
		height: 36px;
		top: 16px;
		font-size: 16px;
	}

	.cta-block__buttons .button {
		width: 100%;
		text-align: center;
	}

	.site-footer { padding: 40px var(--pad-x-mob) 24px; }

	.site-footer__columns { grid-template-columns: 1fr; gap: 24px; }

	.tile-grid { grid-template-columns: 1fr; }
	.tile { height: 220px; }

	.post-nav {
		flex-direction: column;
		padding-left: var(--pad-x-mob);
		padding-right: var(--pad-x-mob);
	}

	.post-nav__next { text-align: left; align-items: flex-start; }

	.stat-callout {
		padding: 20px 22px;
	}

	.stat-callout__value { font-size: 36px; }
}

/* ---------------------------------------------------------------------------
   29. Feature B — installer-network page + contractor application form.
   Token-based; section grounds set inherited text color (--color-text-on-dark
   on flood/dark, --color-text on cream). The conversion fill role is
   --color-primary (there is NO --color-cta token). Zero hardcoded hex outside
   var() fallbacks; TBSQ inherits via its own --color-* roles.
   --------------------------------------------------------------------------- */

/* Ghost CTA — transparent with an on-dark hairline; for dark/flood grounds. */
.button--ghost {
	background: transparent;
	color: var(--color-text-on-dark, #ffffff);
	border: 1px solid var(--color-text-on-dark, rgba(255, 255, 255, 0.6));
	transition: background-color 150ms ease;
}

.button--ghost:hover,
.button--ghost:focus {
	background: color-mix(in srgb, var(--color-text-on-dark, #ffffff) 12%, transparent);
}

/* Hero (flood ground), centered. */
.inet-hero {
	text-align: center;
}

.inet-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	color: var(--color-link, #d8a657);
}

.inet-hero__title {
	margin: 0 auto 18px;
	max-width: 18ch;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.04;
	font-weight: 800;
	color: var(--color-text-on-dark, #ffffff);
}

.inet-hero__lede {
	margin: 0 auto 28px;
	max-width: 60ch;
	font-size: 18px;
	line-height: 1.5;
	color: var(--color-text-on-dark, rgba(255, 255, 255, 0.92));
}

.inet-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-bottom: 20px;
}

.inet-hero__note {
	margin: 0 auto;
	max-width: 52ch;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
}

/* Section eyebrow on a light (cream) ground — darkened link role for AA. */
.inet-eyebrow {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	color: var(--color-link-on-light, #846a31);
	text-align: center;
}

.inet-values .section__heading,
.inet-how .section__heading {
	text-align: center;
	margin-bottom: 32px;
}

/* Value grid: lead card spans the full row; four secondary cards 2-up below. */
.inet-value-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.inet-value-card {
	background: var(--color-background, #ffffff);
	border: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.12));
	padding: 26px 26px 28px;
}

.inet-value-card--lead {
	grid-column: 1 / -1;
	border-color: var(--color-primary, #333333);
	border-top-width: 3px;
	background: color-mix(in srgb, var(--color-primary, #333333) 6%, var(--color-background, #ffffff));
}

.inet-value-card__icon {
	display: block;
	font-size: 30px;
	line-height: 1;
	margin-bottom: 12px;
}

.inet-value-card__title {
	margin: 0 0 10px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 22px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--color-text, #111111);
}

.inet-value-card--lead .inet-value-card__title {
	font-size: 26px;
}

.inet-value-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--color-text, #111111) 80%, var(--color-background, #ffffff));
}

/* How it works (dark ground) — 4 numbered steps. */
.inet-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.inet-step {
	margin: 0;
	padding: 0;
}

.inet-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 22px;
	font-weight: 800;
	color: var(--color-cta-text, #111111);
	background: var(--color-primary, #333333);
}

.inet-step__title {
	margin: 0 0 8px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text-on-dark, #ffffff);
}

.inet-step__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
}

/* Apply section (cream). */
.inet-apply .section__heading {
	text-align: center;
}

.inet-apply__lede {
	margin: 0 auto 28px;
	max-width: 56ch;
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-text, #111111) 80%, var(--color-neutral-surface, #f5f5f5));
}

/* Trade selector — 3-up variant of the .own-type cards. */
.own-types--triple {
	grid-template-columns: repeat(3, 1fr);
}

/* Contractor application form — white card. Distinct class from .lead-form so
   the homeowner form-handler.js (form.lead-form) never binds to it. */
.contractor-form {
	background: var(--color-background, #ffffff);
	color: var(--color-text, #111111);
	max-width: 640px;
	margin: 0 auto;
	padding: 36px;
	border: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
}

.contractor-form__optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.7;
}

.contractor-form__consent-row {
	margin-top: 4px;
}

/* Scoped under .contractor-form to beat `.lead-form__row > label` (which would
   otherwise force this consent sentence to uppercase). */
.contractor-form .contractor-form__consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: 1;
	color: var(--color-text, #111111);
	cursor: pointer;
}

.contractor-form__consent input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 3px;
	accent-color: var(--color-primary, #333333);
}

.contractor-form__disclaimer {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-text, #111111) 62%, var(--color-background, #ffffff));
}

.contractor-form__success {
	text-align: center;
	padding: 20px 0;
}

.contractor-form__success-heading {
	margin: 0 0 10px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 26px;
	font-weight: 800;
	color: var(--color-text, #111111);
}

.contractor-form__success-message {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--color-text, #111111) 80%, var(--color-background, #ffffff));
}

/* Responsive: stack the value/steps grids on narrow screens. */
@media (max-width: 768px) {
	.inet-value-grid { grid-template-columns: 1fr; }
	.inet-steps { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------------------------------------------------------------------------
   30. Feature A — Solar Suitability Assessment (Phase 1: questionnaire).
   Token-based; selectable options reuse the conversion role (--color-primary,
   NOT --color-cta). Zero hardcoded hex outside var() fallbacks; TBSQ inherits.
   --------------------------------------------------------------------------- */

/* The hidden attribute must beat component display (buttons are inline-block;
   fieldsets are block) so JS-hidden cards + the card-1 Back button disappear. */
.assessment-form [hidden] {
	display: none !important;
}

/* Intro (cream ground). */
.assess-intro {
	text-align: center;
}

.assess-intro__eyebrow {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	color: var(--color-link-on-light, #846a31);
}

.assess-intro__title {
	margin: 0 auto 16px;
	max-width: 18ch;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: clamp(32px, 4.5vw, 48px);
	line-height: 1.05;
	font-weight: 800;
	color: var(--color-text, #111111);
}

.assess-intro__lede {
	margin: 0 auto 12px;
	max-width: 56ch;
	font-size: 17px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-text, #111111) 82%, var(--color-neutral-surface, #f5f5f5));
}

.assess-intro__note {
	margin: 0 auto 28px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-text, #111111) 60%, var(--color-neutral-surface, #f5f5f5));
}

/* Assessment card (white form card; distinct class from .lead-form). */
.assessment-form {
	background: var(--color-background, #ffffff);
	color: var(--color-text, #111111);
	max-width: 640px;
	margin: 0 auto;
	padding: 36px;
	border: 1px solid var(--color-field-border, rgba(0, 0, 0, 0.09));
	text-align: left;
}

/* Progress. */
.assess-progress {
	margin-bottom: 28px;
}

.assess-progress__bar {
	list-style: none;
	display: flex;
	gap: 8px;
	margin: 0 0 10px;
	padding: 0;
}

.assess-progress__seg {
	flex: 1;
	height: 5px;
	margin: 0;
	background: var(--color-field-border, rgba(0, 0, 0, 0.12));
	transition: background-color 0.2s ease;
}

.assess-progress__seg.is-active {
	background: var(--color-primary, #333333);
}

.assess-progress__label {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-text, #111111) 70%, var(--color-background, #ffffff));
}

.assess-progress__hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: color-mix(in srgb, var(--color-text, #111111) 58%, var(--color-background, #ffffff));
}

/* Card legend (name + momentum subtitle). */
.assess-card {
	border: none;
	margin: 0;
	padding: 0;
}

.assess-card__legend {
	display: block;
	width: 100%;
	margin-bottom: 22px;
	padding: 0;
}

.assess-card__legend:focus {
	outline: none;
}

.assess-card__name {
	display: block;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 26px;
	line-height: 1.1;
	font-weight: 800;
	color: var(--color-text, #111111);
}

.assess-card__subtitle {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.45;
	color: color-mix(in srgb, var(--color-text, #111111) 66%, var(--color-background, #ffffff));
}

/* Question block. */
.assess-q {
	margin-bottom: 24px;
}

.assess-q__label {
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text, #111111);
}

/* Four selectable option cards (2×2). Selected = --color-primary border + tint,
   matching the .own-type / .home-type treatment. */
.assess-options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.assess-option {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px 14px;
	border: 1.5px solid var(--color-field-border, rgba(0, 0, 0, 0.12));
	background: var(--color-background, #ffffff);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.assess-option input[type="radio"] {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.assess-option:hover {
	border-color: var(--color-primary, #333333);
}

.assess-option:has(input[type="radio"]:checked) {
	border-color: var(--color-primary, #333333);
	background: color-mix(in srgb, var(--color-primary, #333333) 10%, var(--color-background, #ffffff));
}

.assess-option:has(input[type="radio"]:focus-visible) {
	outline: 2px solid var(--color-link, #1a4a73);
	outline-offset: 2px;
}

.assess-option__label {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	color: var(--color-text, #111111);
}

.assess-optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.7;
}

/* Card actions (Back / Continue). */
.assess-card__actions {
	display: flex;
	gap: 12px;
	margin-top: 10px;
}

.assess-card__actions .button:not(.button--secondary) {
	flex: 1;
}

/* Phase-3 homeowner result — standing WORD + positive checklist + CTA +
   disclaimer. The standing panel uses the flood ground for a striking reveal;
   the rest sits on the white form card. */
.assess-result {
	text-align: center;
}

.assess-result__standing {
	background: var(--color-flood, #23302a);
	color: var(--color-text-on-dark, #ffffff);
	padding: 32px 24px;
	margin-bottom: 28px;
}

.assess-result__sun {
	display: block;
	font-size: 36px;
	line-height: 1;
	margin-bottom: 10px;
}

.assess-result__eyebrow {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--tracking-cta);
	text-transform: uppercase;
	color: var(--color-link, #d8a657);
}

.assess-result__band {
	margin: 0 0 8px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1.04;
	font-weight: 800;
	color: var(--color-text-on-dark, #ffffff);
}

.assess-result__band:focus {
	outline: none;
}

.assess-result__subline {
	margin: 0 auto;
	max-width: 38ch;
	font-size: 16px;
	line-height: 1.45;
	color: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
}

.assess-result__why {
	text-align: left;
	max-width: 460px;
	margin: 0 auto 28px;
}

.assess-result__why-heading {
	margin: 0 0 14px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	color: var(--color-text, #111111);
}

.assess-result__checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.assess-result__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--color-text, #111111);
}

.assess-result__check {
	flex-shrink: 0;
	font-weight: 800;
	color: var(--color-link-on-light, #846a31);
}

.assess-result__cta {
	margin-bottom: 22px;
}

.assess-result__cta-note {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: color-mix(in srgb, var(--color-text, #111111) 66%, var(--color-background, #ffffff));
}

.assess-result__disclaimer {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-text, #111111) 60%, var(--color-background, #ffffff));
}

/* ---------------------------------------------------------------------------
   28. Reduced motion (manifest §8.10)
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   31. Refer-a-Friend page (template-refer-a-friend.php).
   Built from the approved Spanish-Moss mockup but entirely token-driven: the
   page maps the mockup's hardcoded hex onto the existing --color-* roles, so
   TBSQ inherits in teal. Derived tones (greige band, deep sage, muted text)
   are scoped custom properties so they resolve from the live palette.
   Zero hardcoded hex outside var() fallbacks.
   --------------------------------------------------------------------------- */

.page-refer {
	--refer-greige: color-mix(in srgb, var(--color-text, #0d0f0d) 9%, var(--color-neutral-surface, #f5f2e8));
	--refer-deep-sage: color-mix(in srgb, var(--color-accent, #a3b89a) 48%, var(--color-text, #0d0f0d));
	--refer-muted: color-mix(in srgb, var(--color-text, #0d0f0d) 62%, var(--color-neutral-surface, #f5f2e8));
	--refer-muted-on-dark: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
	--refer-line: var(--color-field-border, rgba(0, 0, 0, 0.12));
	--refer-gold-tint: color-mix(in srgb, var(--color-primary, #f0b429) 14%, transparent);
}

/* Decorative monogram watermark on flood grounds. */
.refer-mono {
	position: absolute;
	right: -3%;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-weight: 800;
	font-size: clamp(16rem, 34vw, 34rem);
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: color-mix(in srgb, var(--color-primary, #f0b429) 6%, transparent);
	user-select: none;
	pointer-events: none;
	z-index: 0;
}

.refer-mono--form {
	right: auto;
	left: -4%;
	top: auto;
	bottom: -18%;
	transform: none;
	font-size: clamp(14rem, 30vw, 30rem);
}

/* ---- Hero ---- */
.refer-hero {
	position: relative;
	overflow: hidden;
}

.refer-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 54px;
	align-items: center;
}

.refer-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 22px;
	padding: 8px 16px;
	border-radius: 100px;
	background: var(--refer-gold-tint);
	border: 1px solid color-mix(in srgb, var(--color-primary, #f0b429) 30%, transparent);
	color: var(--color-link, #c9a24b);
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.refer-hero__title {
	margin: 0 0 18px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: clamp(2.8rem, 6vw, 4.6rem);
	line-height: 1.03;
	font-weight: 800;
	color: var(--color-text-on-dark, #ffffff);
}

.refer-hero__amt {
	color: var(--color-primary, #f0b429);
	font-style: italic;
}

.refer-hero__lede {
	margin: 0 0 30px;
	max-width: 40ch;
	font-size: 1.12rem;
	line-height: 1.55;
	color: var(--refer-muted-on-dark);
}

.refer-hero__amt-soft {
	color: var(--color-link, #c9a24b);
	font-weight: 600;
}

.refer-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Gift-card visual — gold gradient derived from --color-primary. */
.refer-hero__visual {
	display: flex;
	justify-content: center;
}

.refer-giftcard {
	position: relative;
	width: 340px;
	max-width: 100%;
	aspect-ratio: 1.62 / 1;
	padding: 24px 26px;
	border-radius: 16px;
	overflow: hidden;
	transform: rotate(-5deg);
	color: var(--color-cta-text, #15140a);
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--color-primary, #f0b429) 88%, #ffffff) 0%,
		var(--color-primary, #f0b429) 52%,
		color-mix(in srgb, var(--color-primary, #f0b429) 76%, #000000) 100%
	);
	box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.refer-giftcard__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.refer-giftcard__mono {
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
}

.refer-giftcard__brand {
	max-width: 9ch;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 700;
	font-size: 0.58rem;
	line-height: 1.35;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: right;
	opacity: 0.78;
}

.refer-giftcard__chip {
	display: block;
	width: 42px;
	height: 30px;
	margin-top: 20px;
	border-radius: 6px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #f0b429) 40%, #ffffff), color-mix(in srgb, var(--color-primary, #f0b429) 70%, #000000));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.refer-giftcard__amt {
	position: absolute;
	left: 26px;
	bottom: 20px;
}

.refer-giftcard__amt b {
	display: block;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-weight: 800;
	font-size: 2.4rem;
	line-height: 1;
}

.refer-giftcard__amt span {
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 600;
	font-size: 0.6rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* ---- Trust strip (gold ground) ---- */
.refer-strip {
	background: var(--color-primary, #f0b429);
	color: var(--color-cta-text, #15140a);
}

.refer-strip__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 40px;
	padding: 15px 0;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 700;
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.refer-strip__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-cta-text, #15140a);
	opacity: 0.45;
}

/* ---- Shared section head + eyebrow ---- */
.refer-sechead {
	max-width: 620px;
	margin: 0 auto 48px;
	text-align: center;
}

.refer-eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: var(--tracking-cta, 0.05em);
	text-transform: uppercase;
	color: var(--color-link-on-light, #846a31);
}

.refer-sechead__sub {
	margin: 12px 0 0;
	font-size: 1.06rem;
	line-height: 1.55;
	color: var(--refer-muted);
}

/* ---- How it works: two-tone step cards ---- */
.refer-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.refer-step {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-background, #ffffff);
	border: 1px solid var(--refer-line);
	border-radius: 8px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.refer-step:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(13, 15, 13, 0.45);
}

.refer-step__top {
	flex: 1;
	padding: 32px 28px 24px;
}

.refer-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
	border: 1.5px solid var(--color-primary, #f0b429);
	border-radius: 50%;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--color-link-on-light, #846a31);
}

.refer-step__title {
	margin: 0 0 10px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 1.4rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--color-text, #0d0f0d);
}

.refer-step__text {
	margin: 0;
	font-size: 0.99rem;
	line-height: 1.55;
	color: var(--refer-muted);
}

.refer-step__band {
	padding: 13px 28px;
	background: var(--refer-greige);
	border-top: 1px solid var(--refer-line);
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--refer-deep-sage);
}

/* ---- Referral form section + card ---- */
.refer-formwrap {
	position: relative;
	overflow: hidden;
}

.refer-formcard {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
	padding: 44px 44px 36px;
	background: var(--color-neutral-surface, #f5f2e8);
	border-radius: 14px;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}

.refer-eyebrow--on-card {
	margin-bottom: 8px;
	text-align: left;
}

.refer-formcard__title {
	margin: 0 0 6px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: clamp(1.8rem, 3.2vw, 2.4rem);
	line-height: 1.05;
	font-weight: 800;
	color: var(--color-text, #0d0f0d);
}

.refer-formcard__sub {
	margin: 0 0 28px;
	color: var(--refer-muted);
}

/* Form internals — distinct .referral-form class so no other form JS binds. */
.referral-form__group {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.referral-form__label {
	display: block;
	margin: 0 0 9px;
	padding: 0;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 600;
	font-size: 0.84rem;
	color: var(--color-text, #0d0f0d);
}

.referral-form__optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--refer-muted);
}

.referral-chips {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.referral-chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 17px;
	border: 1.5px solid var(--refer-line);
	border-radius: 8px;
	background: var(--color-background, #ffffff);
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 600;
	color: var(--color-text, #0d0f0d);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.referral-chip:hover {
	border-color: var(--color-primary, #f0b429);
}

/* Native checkbox kept for keyboard/AT but visually collapsed; the chip paints
   its own selected state via :has(). Focus ring via :focus-within. */
.referral-chip input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.referral-chip:has(input[type="checkbox"]:checked) {
	border-color: var(--color-primary, #f0b429);
	background: color-mix(in srgb, var(--color-primary, #f0b429) 15%, var(--color-background, #ffffff));
}

.referral-chip:focus-within {
	outline: 2px solid var(--color-text, #0d0f0d);
	outline-offset: 2px;
}

.referral-chip__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--color-neutral-surface, #f5f2e8);
	font-size: 1.1rem;
}

.referral-form__divider {
	position: relative;
	height: 1px;
	margin: 28px 0;
	background: var(--refer-line);
}

.referral-form__divider span {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	padding-right: 14px;
	background: var(--color-neutral-surface, #f5f2e8);
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-link-on-light, #846a31);
}

.referral-form__row {
	margin-bottom: 20px;
}

.referral-form__row > label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 600;
	font-size: 0.84rem;
	color: var(--color-text, #0d0f0d);
}

.referral-form__row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.referral-form__row--split label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 600;
	font-size: 0.84rem;
	color: var(--color-text, #0d0f0d);
}

.referral-form input[type="text"],
.referral-form input[type="email"],
.referral-form input[type="tel"],
.referral-form textarea {
	display: block;
	width: 100%;
	padding: 13px 15px;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-size: 0.95rem;
	color: var(--color-text, #0d0f0d);
	background: var(--color-background, #ffffff);
	border: 1.5px solid var(--refer-line);
	border-radius: 6px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.referral-form textarea {
	min-height: 92px;
	resize: vertical;
}

.referral-form input:focus,
.referral-form textarea:focus {
	outline: none;
	border-color: var(--color-primary, #f0b429);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #f0b429) 22%, transparent);
}

.referral-form [aria-invalid="true"] {
	border-color: color-mix(in srgb, var(--color-text, #0d0f0d) 55%, #c0392b);
}

.referral-form__zip {
	max-width: 220px;
}

.referral-form__consent-row {
	margin: 6px 0 24px;
}

.referral-form__consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 15px 16px;
	background: color-mix(in srgb, var(--color-neutral-surface, #f5f2e8) 90%, var(--color-text, #0d0f0d));
	border: 1px solid var(--refer-line);
	border-radius: 8px;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--refer-muted);
	cursor: pointer;
}

.referral-form__consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	margin-top: 3px;
	accent-color: var(--color-primary, #f0b429);
}

.referral-form__consent-flag {
	display: inline;
	font-style: italic;
	color: color-mix(in srgb, var(--color-text, #0d0f0d) 50%, var(--color-neutral-surface, #f5f2e8));
}

/* Refer-a-Friend share actions — referrer invites their friend from their own
   sms/email app (sms:/mailto:, built client-side). Gold-tinted callout. */
.referral-form__share {
	margin: 4px 0 22px;
	padding: 16px 18px;
	background: color-mix(in srgb, var(--color-primary, #f0b429) 8%, var(--color-neutral-surface, #f5f2e8));
	border: 1px solid color-mix(in srgb, var(--color-primary, #f0b429) 28%, transparent);
	border-radius: 8px;
}

.referral-form__share-label {
	display: block;
	margin-bottom: 12px;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--color-text, #0d0f0d);
}

.referral-form__share-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.referral-form__share-note {
	display: block;
	margin-top: 12px;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--refer-muted, color-mix(in srgb, var(--color-text, #0d0f0d) 62%, var(--color-neutral-surface, #f5f2e8)));
}

.referral-form__actions {
	display: flex;
	justify-content: flex-end;
}

.referral-form__finefoot {
	margin: 16px 0 0;
	text-align: center;
	font-size: 0.84rem;
	color: var(--refer-muted);
}

.referral-form__finefoot b {
	color: var(--color-text, #0d0f0d);
	font-weight: 700;
}

.referral-form__success {
	text-align: center;
	padding: 20px 0;
}

.referral-form__success-heading {
	margin: 0 0 10px;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--color-text, #0d0f0d);
}

.referral-form__success-message {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--refer-muted);
}

/* ---- FAQ accordion ---- */
.refer-faqlist {
	max-width: 780px;
	margin: 0 auto;
}

.refer-q {
	border-bottom: 1px solid var(--refer-line);
}

.refer-q summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 22px 4px;
	list-style: none;
	cursor: pointer;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--color-text, #0d0f0d);
}

.refer-q summary::-webkit-details-marker {
	display: none;
}

.refer-q__plus {
	flex-shrink: 0;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--color-link-on-light, #846a31);
	transition: transform 0.2s ease;
}

.refer-q[open] .refer-q__plus {
	transform: rotate(45deg);
}

.refer-q__ans {
	padding: 0 4px 24px;
	max-width: 64ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--refer-muted);
}

.refer-faqnote {
	max-width: 680px;
	margin: 40px auto 0;
	text-align: center;
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--refer-muted);
}

/* ---- End CTA card ---- */
.refer-endcta__card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	padding: 40px 46px;
	background: var(--color-background, #ffffff);
	border: 1px solid var(--refer-line);
	border-radius: 14px;
}

.refer-endcta__title {
	margin: 0;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 800;
	color: var(--color-text, #0d0f0d);
}

.refer-endcta__text {
	margin: 8px 0 0;
	color: var(--refer-muted);
}

.refer-endcta__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---- Scroll reveal (armed by JS only; no-JS/reduced-motion stays visible) ---- */
.referral-reveal--armed {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.referral-reveal--armed.is-in {
	opacity: 1;
	transform: none;
}

/* ---- Responsive ---- */
@media (max-width: 880px) {
	.refer-hero__grid {
		grid-template-columns: 1fr;
		gap: 38px;
	}
	.refer-giftcard {
		transform: rotate(-3deg);
	}
	.refer-steps {
		grid-template-columns: 1fr;
	}
	.refer-formcard {
		padding: 32px 22px 28px;
	}
	.referral-chips,
	.referral-form__row--split {
		grid-template-columns: 1fr;
	}
	.refer-endcta__card {
		padding: 30px 24px;
	}
}

/* ---------------------------------------------------------------------------
   32. Homepage sticky quote CTA (template: front-page.php + sticky-cta.js).
   Desktop: a centered gold BOX that slides down just under the header. Mobile:
   a full-width gold BAR pinned under the header. Token-driven (gold = primary,
   dark button = secondary); no hardcoded palette hex. z-index sits below the
   sticky header (999) so it never covers the header or a future menu overlay.
   --------------------------------------------------------------------------- */

.home-sticky-cta {
	position: fixed;
	top: 72px; /* JS overrides with the live-measured header height */
	left: 0;
	right: 0;
	z-index: 990;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-130%);
	transition: transform 0.32s ease, opacity 0.32s ease, visibility 0s linear 0.32s;
}

.home-sticky-cta.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: transform 0.32s ease, opacity 0.32s ease, visibility 0s;
}

.home-sticky-cta__inner {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 580px;
	margin: 10px auto 0;
	padding: 13px 22px;
	background: var(--color-primary, #f0b429);
	color: var(--color-cta-text, #15140a);
	border-radius: 6px;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
}

.home-sticky-cta__copy {
	display: flex;
	flex-direction: column;
	line-height: 1.22;
}

.home-sticky-cta__title {
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-weight: 800;
	font-size: 1.12rem;
	color: var(--color-cta-text, #15140a);
}

.home-sticky-cta__sub {
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--color-cta-text, #15140a) 75%, var(--color-primary, #f0b429));
}

.home-sticky-cta__btn {
	flex-shrink: 0;
	white-space: nowrap;
	padding: 12px 22px;
}

/* Mobile: full-width gold bar pinned under the header. */
@media (max-width: 880px) {
	.home-sticky-cta__inner {
		max-width: none;
		margin: 0;
		border-radius: 0;
		padding: 9px 16px;
		gap: 12px;
	}
	.home-sticky-cta__title { font-size: 0.98rem; }
	.home-sticky-cta__sub { font-size: 0.7rem; }
	.home-sticky-cta__btn { padding: 10px 15px; font-size: 13px; }
}

/* Reduced motion: appear/disappear instantly (no slide, no delayed hide). */
@media (prefers-reduced-motion: reduce) {
	.home-sticky-cta,
	.home-sticky-cta.is-visible {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   33. The Orlando Solar Journal — native blog (home.php / category.php /
   single.php + inc/blog/blog-render.php). Spanish-Moss, token-driven (no
   hardcoded palette hex). Editorial type: serif reading body (--font-serif) +
   Archivo display headings (--font-display). Derived neutrals are scoped to the
   blog wrappers so they resolve from the live palette.
   --------------------------------------------------------------------------- */

.page-blog-index,
.page-blog-category,
.page-single-post {
	--blog-greige: color-mix(in srgb, var(--color-text, #0d0f0d) 9%, var(--color-neutral-surface, #f5f2e8));
	--blog-line: var(--color-field-border, rgba(0, 0, 0, 0.12));
	--blog-muted: color-mix(in srgb, var(--color-text, #0d0f0d) 62%, var(--color-neutral-surface, #f5f2e8));
	--blog-muted-on-dark: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.72));
}

.page-blog-hero,
.post-hero {
	position: relative;
	overflow: hidden;
}

.blog-hero__mono {
	position: absolute;
	right: -3%;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-display, 'Archivo', sans-serif);
	font-weight: 800;
	font-size: clamp(14rem, 32vw, 30rem);
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: color-mix(in srgb, var(--color-primary, #f0b429) 6%, transparent);
	user-select: none;
	pointer-events: none;
	z-index: 0;
}

.blog-hero__inner,
.post-hero__inner {
	position: relative;
	z-index: 1;
}

.blog-hero__back {
	display: inline-block;
	margin-bottom: 18px;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--color-link, #c9a24b);
	text-decoration: none;
}

.blog-hero__back:hover {
	color: var(--color-text-on-dark, #ffffff);
}

.blog-hero__eyebrow,
.post-hero__eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: var(--tracking-cta, 0.05em);
	text-transform: uppercase;
	color: var(--color-link, #c9a24b);
	text-decoration: none;
}

a.post-hero__eyebrow:hover {
	color: var(--color-text-on-dark, #ffffff);
}

.blog-hero__title,
.post-hero__title {
	margin: 0 0 16px;
	font-family: var(--font-display, 'Archivo', sans-serif);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--color-text-on-dark, #ffffff);
}

.blog-hero__title {
	font-size: clamp(2.4rem, 5.5vw, 4rem);
}

.post-hero__title {
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	max-width: 22ch;
}

.blog-hero__subtitle {
	margin: 0;
	max-width: 56ch;
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--blog-muted-on-dark);
}

.post-hero__meta {
	margin: 0;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-size: 0.92rem;
	color: var(--blog-muted-on-dark);
}

.post-hero__dot {
	margin: 0 0.5em;
	opacity: 0.6;
}

.blog-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
}

.blog-filter__chip {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--blog-line);
	border-radius: 100px;
	background: var(--color-background, #ffffff);
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--color-text, #0d0f0d);
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.blog-filter__chip:hover {
	border-color: var(--color-primary, #f0b429);
}

.blog-filter__chip.is-active {
	background: var(--color-primary, #f0b429);
	border-color: var(--color-primary, #f0b429);
	color: var(--color-cta-text, #15140a);
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.blog-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-background, #ffffff);
	border: 1px solid var(--blog-line);
	border-radius: 10px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(13, 15, 13, 0.45);
}

.blog-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--blog-greige);
}

.blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-card__body {
	flex: 1;
	padding: 24px 24px 18px;
}

.blog-card__cat {
	display: inline-block;
	margin-bottom: 10px;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-link-on-light, #846a31);
	text-decoration: none;
}

.blog-card__cat:hover {
	text-decoration: underline;
}

.blog-card__title {
	margin: 0 0 10px;
	font-family: var(--font-display, 'Archivo', sans-serif);
	font-size: 1.35rem;
	line-height: 1.18;
	font-weight: 700;
}

.blog-card__title a {
	color: var(--color-text, #0d0f0d);
	text-decoration: none;
}

.blog-card__title a:hover {
	color: var(--color-link-on-light, #846a31);
}

.blog-card__excerpt {
	margin: 0;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-size: 0.96rem;
	line-height: 1.55;
	color: var(--blog-muted);
}

.blog-card__band {
	padding: 13px 24px;
	border-top: 1px solid var(--blog-line);
	background: var(--blog-greige);
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 600;
	font-size: 0.74rem;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--color-accent, #a3b89a) 48%, var(--color-text, #0d0f0d));
}

.blog-card__dot {
	margin: 0 0.4em;
	opacity: 0.7;
}

.blog-index__empty {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.15rem;
	color: var(--blog-muted);
}

.blog-pagination {
	margin-top: 44px;
}

.blog-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 9px 14px;
	border: 1px solid var(--blog-line);
	border-radius: 6px;
	background: var(--color-background, #ffffff);
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-text, #0d0f0d);
	text-decoration: none;
}

.blog-pagination__item .page-numbers:hover {
	border-color: var(--color-primary, #f0b429);
}

.blog-pagination__item .page-numbers.current {
	background: var(--color-primary, #f0b429);
	border-color: var(--color-primary, #f0b429);
	color: var(--color-cta-text, #15140a);
}

.post-article__featured {
	margin: 0 0 44px;
}

.post-article__featured-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.post-article__body {
	max-width: 680px;
	margin: 0 auto;
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.22rem;
	line-height: 1.72;
	color: var(--color-text, #0d0f0d);
}

.post-article__body > * {
	margin: 0 0 1.3em;
}

.post-article__body h2 {
	margin: 2em 0 0.6em;
	font-family: var(--font-display, 'Archivo', sans-serif);
	font-size: 1.85rem;
	line-height: 1.2;
	font-weight: 700;
	color: var(--color-text, #0d0f0d);
}

.post-article__body h3 {
	margin: 1.6em 0 0.5em;
	font-family: var(--font-display, 'Archivo', sans-serif);
	font-size: 1.4rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--color-text, #0d0f0d);
}

.post-article__body a {
	color: var(--color-link-on-light, #846a31);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.post-article__body ul,
.post-article__body ol {
	padding-left: 1.3em;
}

.post-article__body li {
	margin-bottom: 0.5em;
}

.post-article__body ul li::marker {
	color: var(--color-primary, #f0b429);
}

.post-article__body blockquote {
	margin: 1.6em 0;
	padding: 6px 0 6px 28px;
	border-left: 3px solid var(--color-primary, #f0b429);
	font-family: var(--font-serif, Georgia, serif);
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--color-text, #0d0f0d) 88%, var(--color-neutral-surface, #f5f2e8));
}

.post-article__body blockquote p {
	margin: 0;
}

.post-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.post-article__body figure {
	margin: 1.6em 0;
}

.post-article__body figcaption {
	margin-top: 8px;
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-size: 0.82rem;
	color: var(--blog-muted);
	text-align: center;
}

.blog-endcta__card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	padding: 40px 46px;
	background: var(--color-background, #ffffff);
	border: 1px solid var(--blog-line);
	border-radius: 14px;
}

.blog-endcta__title {
	margin: 0;
	font-family: var(--font-display, 'Archivo', sans-serif);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 700;
	color: var(--color-text, #0d0f0d);
}

.blog-endcta__text {
	margin: 8px 0 0;
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.05rem;
	color: var(--blog-muted);
}

.blog-endcta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.blog-disclaimer {
	padding-top: 0;
	padding-bottom: 40px;
}

.blog-disclaimer__text {
	max-width: 680px;
	margin: 0 auto;
	padding-top: 22px;
	border-top: 1px solid var(--blog-line);
	font-family: var(--font-primary, 'Barlow', sans-serif);
	font-size: 0.84rem;
	line-height: 1.55;
	color: var(--blog-muted);
}

@media (max-width: 980px) {
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.blog-grid { grid-template-columns: 1fr; }
	.post-article__body { font-size: 1.12rem; }
	.blog-endcta__card { padding: 30px 24px; }
}