/* Site-wide cohesion pass. Loaded last so legacy one-off pages inherit the
   homepage/models design language without replacing their content. */

:root {
  --canvas: oklch(97% 0.006 90);
  --canvas-1: oklch(95% 0.007 90);
  --canvas-2: oklch(99% 0.004 90);
  --canvas-3: oklch(94% 0.008 90);
  --canvas-deep: oklch(94% 0.008 90);
  --ink: oklch(20% 0.012 240);
  --ink-2: oklch(38% 0.010 240);
  --ink-3: oklch(58% 0.008 240);
  --hairline: oklch(85% 0.006 90);
  --hairline-2: oklch(78% 0.008 90);
  --steam: oklch(54% 0.13 240);
  --steam-deep: oklch(40% 0.13 240);
  --amber: oklch(72% 0.16 75);
  --amber-dim: oklch(58% 0.16 65);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Public Sans", system-ui, sans-serif;
  --sans: "Public Sans", system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, monospace;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--body);
  text-rendering: optimizeLegibility;
}

img,
table,
.wrap,
.post-body,
.post-body-wrap,
.post-hero,
.related,
.footer-inner {
  max-width: 100%;
}

/* Legacy article templates */
body:has(.post-body) {
  background: var(--canvas) !important;
  color: var(--ink) !important;
}

body:has(.post-body)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.12  0 0 0 0 0.18  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: multiply;
}

body:has(.post-body) > *:not(.topbar) {
  position: relative;
  z-index: 2;
}

body:has(.post-body) .post-hero {
  max-width: 1280px !important;
  padding: clamp(104px, 12vw, 152px) clamp(20px, 4vw, 56px) clamp(56px, 7vw, 96px) !important;
}

body:has(.post-body) .post-hero-inner,
body:has(.post-body) .post-body {
  min-width: 0;
}

body:has(.post-body) .post-title {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: clamp(2.35rem, 6vw, 5rem) !important;
  font-weight: 750 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
  max-width: 18ch !important;
}

body:has(.post-body) .post-eyebrow,
body:has(.post-body) .post-cta-label,
body:has(.post-body) .callout-label,
body:has(.post-body) .related-label,
body:has(.post-body) .related-card-tag {
  color: var(--steam-deep) !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.14em !important;
}

body:has(.post-body) .post-deck,
body:has(.post-body) .post-meta,
body:has(.post-body) .post-breadcrumb,
body:has(.post-body) .post-body p,
body:has(.post-body) .post-body li,
body:has(.post-body) .related-card p,
body:has(.post-body) .footer-brand p {
  color: var(--ink-2) !important;
}

body:has(.post-body) .post-body-wrap {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, min(72ch, 100%))
    minmax(0, 1fr) !important;
  width: 100% !important;
  padding: 0 clamp(20px, 4vw, 56px) clamp(72px, 9vw, 128px) !important;
  margin-inline: auto !important;
}

body:has(.post-body) .post-body {
  grid-column: 2 !important;
  overflow-x: auto;
  scrollbar-width: thin;
}

body:has(.post-body) .post-body h2,
body:has(.post-body) .post-body h3,
body:has(.post-body) .related-card h3,
body:has(.post-body) .post-cta h2 {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  letter-spacing: 0 !important;
}

body:has(.post-body) .callout,
body:has(.post-body) .related-card {
  background: var(--canvas-2) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:has(.post-body) .post-cta {
  background: var(--ink) !important;
  color: var(--canvas) !important;
  border: 0 !important;
}

body:has(.post-body) .post-cta h2,
body:has(.post-body) .post-cta p,
body:has(.post-body) .post-cta-label {
  color: var(--canvas) !important;
}

body:has(.post-body) .cta-btn,
body:has(.post-body) .nav-cta,
body:has(.post-body) .topbar-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--ink) !important;
  color: var(--canvas) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 12px 18px !important;
}

body:has(.post-body) .cta-btn::after,
body:has(.post-body) .topbar-cta::after {
  content: "→";
  margin-left: 8px;
}

body:has(.post-body) .data-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

body:has(.post-body) .data-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent !important;
}

body:has(.post-body) .data-table th,
body:has(.post-body) .data-table td {
  background: transparent !important;
  color: var(--ink-2) !important;
  border-color: var(--hairline) !important;
}

body:has(.post-body) .data-table th {
  color: var(--ink-3) !important;
}

body:has(.post-body) footer {
  background: var(--ink) !important;
  color: var(--canvas) !important;
  border-top: 1px solid oklch(32% 0.012 240) !important;
}

body:has(.post-body) footer a,
body:has(.post-body) .footer-logo,
body:has(.post-body) .footer-brand,
body:has(.post-body) .footer-col h4,
body:has(.post-body) .footer-heading {
  color: var(--canvas) !important;
}

body:has(.post-body) footer p,
body:has(.post-body) .footer-bottom {
  color: oklch(72% 0.02 240) !important;
}

footer .footer-heading {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
  text-transform: uppercase !important;
}

/* Legacy topbars */
.topbar:has(.topbar-logo),
header#topbar:has(.topbar-logo) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  background: color-mix(in oklab, var(--canvas) 94%, transparent) !important;
  border-bottom: 1px solid var(--hairline) !important;
  backdrop-filter: saturate(120%) blur(6px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(6px) !important;
}

.topbar:has(.topbar-logo) .topbar-inner,
header#topbar:has(.topbar-logo) .topbar-inner {
  display: grid !important;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(16px, 4vw, 48px) !important;
  max-width: 1480px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 clamp(20px, 4vw, 56px) !important;
  margin: 0 auto !important;
}

.topbar-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.topbar-logo::before {
  content: none !important;
  display: none !important;
}

.topbar-logo span {
  color: var(--ink) !important;
}

.topbar-nav,
.topbar:has(.topbar-logo) nav,
header#topbar:has(.topbar-logo) nav {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: clamp(18px, 3vw, 36px) !important;
}

.topbar-nav a,
.topbar:has(.topbar-logo) nav a,
header#topbar:has(.topbar-logo) nav a {
  color: var(--ink-2) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.topbar-nav a.topbar-cta,
.topbar:has(.topbar-logo) nav a.nav-cta,
header#topbar:has(.topbar-logo) nav a.nav-cta {
  color: var(--canvas) !important;
}

/* Adaptive mobile navigation for the static topbar family. The desktop nav is
   still the source of truth; JS mirrors it into this touch-first panel. */
.eco-mobile-menu-toggle,
.eco-mobile-backdrop,
.eco-mobile-panel {
  display: none;
}

.eco-mobile-menu-toggle {
  appearance: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hairline);
  background: color-mix(in oklab, var(--canvas-2) 82%, transparent);
  color: var(--ink);
  cursor: pointer;
}

.eco-mobile-menu-toggle span {
  position: absolute;
  width: 17px;
  height: 1px;
  background: currentColor;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
}

.eco-mobile-menu-toggle span:nth-child(1) { transform: translateY(-6px); }
.eco-mobile-menu-toggle span:nth-child(3) { transform: translateY(6px); }

.eco-mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.eco-mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.eco-mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

.eco-mobile-backdrop {
  position: fixed !important;
  inset: 0;
  z-index: 890 !important;
  border: 0;
  background: color-mix(in oklab, var(--ink) 32%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.eco-mobile-panel {
  position: fixed !important;
  top: calc(60px + env(safe-area-inset-top)) !important;
  right: clamp(12px, 4vw, 24px) !important;
  left: clamp(12px, 4vw, 24px) !important;
  z-index: 900 !important;
  max-height: calc(100dvh - 76px - env(safe-area-inset-top));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid oklch(30% 0.012 240);
  background: oklch(12% 0.015 240);
  color: var(--canvas);
  box-shadow: 0 30px 72px oklch(15% 0.012 240 / 0.26);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -8px, 0);
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.eco-mobile-menu-open {
  overflow: hidden;
}

.eco-mobile-menu-open .eco-mobile-backdrop,
.eco-mobile-menu-open .eco-mobile-panel {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.eco-mobile-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid oklch(30% 0.012 240);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eco-mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--canvas);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.eco-mobile-panel-nav {
  display: grid;
  gap: 1px;
  background: oklch(30% 0.012 240);
}

.eco-mobile-group {
  display: grid;
  grid-template-columns: 1fr;
  background: oklch(12% 0.015 240);
}

.eco-mobile-group p {
  margin: 0;
  padding: 22px 18px 10px;
  color: color-mix(in oklab, var(--amber) 82%, var(--canvas));
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eco-mobile-group.eco-mobile-primary {
  padding-top: 6px;
}

.eco-mobile-group a,
.eco-mobile-quote {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 18px 11px 26px;
  border-top: 1px solid oklch(24% 0.012 240);
  color: color-mix(in oklab, var(--canvas) 92%, white);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-transform: none;
  text-decoration: none;
}

.eco-mobile-group.eco-mobile-primary a {
  padding-left: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.eco-mobile-group a:active,
.eco-mobile-group a:focus-visible {
  background: oklch(18% 0.015 240);
  outline: none;
}

.eco-mobile-quote {
  min-height: 56px;
  justify-content: center;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.eco-mobile-quote::after {
  content: "→";
  margin-left: 9px;
}

/* Product/detail overflow guards */
.topbar,
.topbar-inner,
.brand,
.top-cta {
  max-width: 100vw;
}

.nav {
  gap: clamp(14px, 2vw, 28px) !important;
}

.nav a,
.nav-dropdown-btn {
  white-space: nowrap;
}

.nav-dropdown {
  background: oklch(12% 0.015 240) !important;
  border-color: oklch(28% 0.01 240) !important;
  box-shadow: 0 20px 48px color-mix(in oklab, var(--ink) 16%, transparent);
}

.topbar .nav-dropdown a,
.topbar:not(.scrolled) .nav-dropdown a,
.topbar.scrolled .nav-dropdown a {
  color: oklch(90% 0.012 90) !important;
  border-bottom-color: oklch(31% 0.012 240) !important;
}

.topbar .nav-dropdown a:hover,
.topbar .nav-dropdown a:focus-visible,
.topbar:not(.scrolled) .nav-dropdown a:hover,
.topbar:not(.scrolled) .nav-dropdown a:focus-visible,
.topbar.scrolled .nav-dropdown a:hover,
.topbar.scrolled .nav-dropdown a:focus-visible {
  color: var(--canvas-2) !important;
  background: oklch(24% 0.014 240) !important;
}

.topbar nav .nav-item,
.topbar-nav .nav-item,
.site-nav-menu {
  --dropdown-offset: 12px;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
}

.topbar:has(.topbar-logo) .site-nav-menu,
header#topbar:has(.topbar-logo) .site-nav-menu {
  --dropdown-offset: 0px;
  min-height: 64px;
}

.site-nav-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: var(--dropdown-offset);
  pointer-events: auto;
}

.topbar nav .nav-item,
.topbar-nav .nav-item {
  display: flex;
  align-items: center;
}

.topbar-nav .nav-dropdown-btn,
.topbar:has(.topbar-logo) nav .nav-dropdown-btn,
header#topbar:has(.topbar-logo) nav .nav-dropdown-btn {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  line-height: 1;
  text-transform: uppercase !important;
}

.topbar .brand,
.topbar .nav > a,
.topbar .nav-item > a,
.topbar .nav-dropdown-btn,
.topbar .top-cta,
.topbar-logo,
.topbar-cta {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.topbar nav .nav-item::after,
.topbar-nav .nav-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: 8px;
}

.topbar nav .nav-item > .nav-dropdown,
.topbar-nav .nav-item > .nav-dropdown {
  top: calc(100% + 6px) !important;
}

.site-nav-menu .site-nav-dropdown {
  position: absolute !important;
  top: calc(100% + var(--dropdown-offset, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(-1px) !important;
  width: min(320px, calc(100vw - 32px)) !important;
  max-height: min(64vh, 520px);
  overflow: auto;
  padding: 0 !important;
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: oklch(12% 0.015 240) !important;
  border: 1px solid oklch(28% 0.01 240) !important;
  box-shadow: 0 20px 44px oklch(10% 0.012 240 / 0.18) !important;
  transition:
    opacity 160ms ease,
    visibility 160ms ease,
    transform 160ms ease;
}

.site-nav-menu--learn .site-nav-dropdown {
  left: auto !important;
  right: 0 !important;
  transform: translateY(-1px) !important;
}

.site-nav-menu:hover .site-nav-dropdown,
.site-nav-menu:focus-within .site-nav-dropdown,
.site-nav-menu.site-nav-open .site-nav-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) !important;
}

.site-nav-menu--learn:hover .site-nav-dropdown,
.site-nav-menu--learn:focus-within .site-nav-dropdown,
.site-nav-menu--learn.site-nav-open .site-nav-dropdown {
  transform: translateY(0) !important;
}

.site-nav-panel {
  min-width: 0;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, oklch(17% 0.014 240), oklch(12% 0.015 240));
}

.site-nav-panel p {
  margin: 0 0 8px;
  color: color-mix(in oklab, var(--amber) 82%, var(--canvas));
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

.site-nav-links {
  display: grid;
  gap: 0;
}

.topbar .site-nav-dropdown .site-nav-links a,
.topbar:not(.scrolled) .site-nav-dropdown .site-nav-links a,
.topbar.scrolled .site-nav-dropdown .site-nav-links a,
.nav-links .site-nav-dropdown .site-nav-links a {
  display: flex !important;
  align-items: center;
  min-height: 40px;
  padding: 9px 0 !important;
  border: 0 !important;
  border-top: 1px solid oklch(28% 0.012 240) !important;
  color: oklch(90% 0.012 90) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

.topbar .site-nav-dropdown .site-nav-links a:hover,
.topbar .site-nav-dropdown .site-nav-links a:focus-visible,
.nav-links .site-nav-dropdown .site-nav-links a:hover,
.nav-links .site-nav-dropdown .site-nav-links a:focus-visible {
  color: var(--canvas-2) !important;
  background: transparent !important;
}

@media (max-width: 1120px) {
  .nav {
    gap: 16px !important;
  }

  .nav a,
  .nav-dropdown-btn {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
  }

  .top-cta {
    padding-inline: 14px !important;
  }

}

.cfg-drawer {
  max-width: 100vw !important;
}

.cfg-drawer:not(.open),
.cfg-backdrop:not(.open) {
  display: none !important;
}

.cfg-drawer.open {
  display: grid !important;
  transform: translateX(0) !important;
}

.spec-strip-inner,
.model-strip-inner,
.stat-band-inner,
.stats-inner {
  min-width: 0;
}

.spec-item,
.model-link,
.model-pill,
.stat-item,
.standard-tile,
.city-card,
.related-card {
  min-width: 0;
}

.model-link,
.model-pill,
.hero-breadcrumb a {
  min-width: 44px !important;
  min-height: 44px !important;
}

.model-link,
.model-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-breadcrumb a {
  display: inline-flex !important;
  align-items: center !important;
}

.province-switcher {
  flex-wrap: wrap;
}

.province-tabs {
  flex-wrap: wrap;
  min-width: 0;
}

/* Build category pages: pull feature deep-dives into the same paper-and-spec
   system as Home and Models. */
.build-page {
  background: var(--canvas) !important;
  color: var(--ink) !important;
}

.build-page .topbar {
  background: color-mix(in oklab, var(--canvas) 94%, transparent) !important;
  border-bottom-color: var(--hairline) !important;
  backdrop-filter: saturate(120%) blur(6px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(6px) !important;
}

.build-page .topbar:not(.scrolled) .brand,
.build-page .topbar:not(.scrolled) .brand-region,
.build-page .topbar:not(.scrolled) .nav a,
.build-page .topbar:not(.scrolled) .nav-dropdown-btn {
  color: var(--ink-2) !important;
}

.build-page .topbar:not(.scrolled) .brand-mark {
  background: var(--ink) !important;
  color: var(--canvas) !important;
}

.build-page .topbar:not(.scrolled) .top-cta {
  background: var(--ink) !important;
  color: var(--canvas) !important;
  border-color: var(--ink) !important;
}

.build-page .topbar:not(.scrolled) .nav-dropdown {
  background: oklch(12% 0.015 240) !important;
  border-color: oklch(28% 0.01 240) !important;
}

.build-page .topbar:not(.scrolled) .nav-dropdown a {
  color: oklch(90% 0.012 90) !important;
  border-bottom-color: oklch(31% 0.012 240) !important;
}

.build-page .topbar:not(.scrolled) .nav-dropdown a:hover,
.build-page .topbar:not(.scrolled) .nav-dropdown a:focus-visible {
  color: var(--canvas-2) !important;
  background: oklch(24% 0.014 240) !important;
}

.build-page .page-hero {
  position: relative;
  overflow: hidden;
  background: var(--canvas) !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding-block: clamp(132px, 15vw, 204px) clamp(64px, 8vw, 112px) !important;
}

.build-page .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--hairline) 72%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--hairline) 72%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.45;
}

.build-page .page-hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.42fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}

.build-page .page-hero .eyebrow,
.build-page .page-hero .h-display,
.build-page .page-hero .intro {
  grid-column: 1;
}

.build-page .page-hero .wrap::after {
  content: "BUILD INDEX\A Factory system note\A Same shell. Same cover. Same warranty.";
  white-space: pre-line;
  align-self: stretch;
  display: flex;
  align-items: end;
  min-height: 280px;
  border: 1px solid var(--hairline);
  background:
    repeating-linear-gradient(135deg, transparent 0 36px, color-mix(in oklab, var(--hairline) 75%, transparent) 36px 37px),
    var(--canvas-2);
  padding: clamp(20px, 3vw, 40px);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  grid-column: 2;
  grid-row: 1 / span 3;
}

.build-page .page-hero .eyebrow {
  color: var(--steam-deep) !important;
}

.build-page .page-hero .h-display {
  color: var(--ink) !important;
  max-width: 11ch;
  margin-top: var(--s-5) !important;
  font-size: clamp(56px, 9vw, 132px) !important;
  line-height: 0.93 !important;
  letter-spacing: 0 !important;
}

.build-page .page-hero .intro {
  color: var(--ink-2) !important;
  max-width: 58ch !important;
  font-size: clamp(17px, 0.75vw + 14px, 21px) !important;
}

/* Core interior pages: one cohesive manual system for contact, FAQ,
   showrooms, reviews, truth, and why pages. */
.core-page {
  --hero-note: "FIELD NOTE\A REAL HOUSE\A PRAIRIE WINTER";
}

.contact-page { --hero-note: "QUOTE ROUTE\A LOCATION FIRST\A EXACT SETUP"; }
.faq-page { --hero-note: "FAQ LEDGER\A SHORT ANSWER\A THEN DETAIL"; }
.showrooms-page { --hero-note: "SHOWROOM NOTE\A TOUCH COVER\A CHECK SHELL"; }
.reviews-page { --hero-note: "OWNER NOTES\A WINTER USE\A REAL BILLS"; }
.truth-page { --hero-note: "TRUTH INDEX\A COVER\A SHELL\A WATER\A ENERGY"; }
.why-page { --hero-note: "OWNERSHIP MATH\A YEAR ONE\A YEAR TEN"; }

.core-page :is(.page-hero, .contact-hero) {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: clamp(420px, 54vh, 640px) !important;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--hairline) 72%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--hairline) 72%, transparent) 1px, transparent 1px),
    var(--canvas) !important;
  background-size: 48px 48px, 48px 48px, auto !important;
  border-bottom: 1px solid var(--hairline) !important;
}

.core-page :is(.page-hero, .contact-hero)::after {
  content: var(--hero-note);
  white-space: pre-line;
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(36px, 6vw, 72px);
  z-index: -1;
  width: min(360px, 34vw);
  min-height: 168px;
  display: flex;
  align-items: end;
  border: 1px solid var(--hairline);
  background:
    repeating-linear-gradient(135deg, transparent 0 34px, color-mix(in oklab, var(--hairline) 82%, transparent) 34px 35px),
    color-mix(in oklab, var(--canvas-2) 88%, transparent);
  padding: 22px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.75;
  text-transform: uppercase;
}

.core-page :is(.page-hero, .contact-hero) > .wrap {
  position: relative;
  z-index: 1;
}

.core-page :is(.hero-eyebrow, .page-eyebrow, .eyebrow) {
  color: var(--steam-deep) !important;
}

.core-page :is(.hero-headline, .page-title, .h-1) {
  max-width: 11ch;
  letter-spacing: 0 !important;
}

.contact-page .contact-hero .h-1 {
  max-width: 13ch;
}

.core-page :is(.hero-sub, .page-sub, .body-lg, .body-md) {
  max-width: 62ch;
}

.core-page .proof-strip {
  background: var(--ink) !important;
  color: var(--canvas) !important;
  border-block: 1px solid color-mix(in oklab, var(--canvas) 18%, transparent) !important;
}

.core-page .proof-strip-inner {
  gap: 0 !important;
}

.core-page .proof-item {
  border-color: color-mix(in oklab, var(--canvas) 18%, transparent) !important;
}

.core-page .section {
  position: relative;
  padding-block: clamp(64px, 8vw, 112px) !important;
  border-bottom: 1px solid var(--hairline);
}

.core-page .section-alt {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--hairline) 60%, transparent) 1px, transparent 1px),
    var(--canvas-deep) !important;
  background-size: 48px 48px, auto !important;
}

.core-page :is(.review-card, .analogy-card, .problem-list, .get-cell, .savings-callout, .showroom-card, .direct-contact, .contact-sidebar, .form-col, .location-block, .faq-cta) {
  border: 1px solid var(--hairline) !important;
  background: color-mix(in oklab, var(--canvas-2) 88%, var(--canvas)) !important;
  box-shadow: 0 22px 56px color-mix(in oklab, var(--ink) 7%, transparent) !important;
}

.core-page :is(.review-card, .get-cell, .reason-row, .location-block, .faq-item, .showroom-card) {
  transition: transform 260ms ease, background 260ms ease, border-color 260ms ease;
}

.core-page :is(.review-card, .get-cell, .reason-row, .location-block, .faq-item, .showroom-card):hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--steam) 42%, var(--hairline)) !important;
}

.reviews-page .review-card.xl {
  background:
    linear-gradient(135deg, oklch(18% 0.014 240), oklch(12% 0.015 240)) !important;
  border-color: oklch(28% 0.012 240) !important;
  box-shadow: 0 26px 68px oklch(10% 0.012 240 / 0.2) !important;
}

.truth-page .analogy,
.why-page .reason-row {
  align-items: stretch !important;
}

.why-page .compare-table {
  border: 1px solid var(--hairline) !important;
  background: var(--canvas-2) !important;
}

.why-page .compare-table th {
  background: var(--ink) !important;
  color: var(--canvas) !important;
}

.showrooms-page .hero-coverage {
  border: 1px solid var(--hairline) !important;
  background: color-mix(in oklab, var(--canvas-2) 86%, transparent) !important;
}

.showrooms-page .location-map {
  border-color: var(--hairline) !important;
}

.contact-page .direct-phone,
.contact-page .direct-meta-val a,
.contact-page .addr-line a,
.faq-page .faq-a a,
.showrooms-page .detail-row .v a,
.showrooms-page .closing-phone a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
}

.contact-page .direct-phone {
  min-height: 48px !important;
}

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

@media (prefers-reduced-motion: no-preference) {
  .core-page :is(.page-hero, .contact-hero) .wrap,
  .core-page :is(.proof-strip, .section, .contact-body, .showrooms-section) > .wrap {
    animation: corePageRise 620ms ease both;
  }

  .core-page .section:nth-of-type(2) > .wrap { animation-delay: 60ms; }
  .core-page .section:nth-of-type(3) > .wrap { animation-delay: 110ms; }
}

@media (max-width: 760px) {
  .core-page :is(.page-hero, .contact-hero) {
    min-height: 0 !important;
    padding-block: 112px 56px !important;
  }

  .core-page :is(.page-hero, .contact-hero)::after {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 0;
    width: 100%;
    min-height: 104px;
    margin-top: 28px;
  }

  .core-page :is(.hero-headline, .page-title, .h-1) {
    max-width: 100%;
  }

  .core-page .section {
    padding-block: 48px !important;
  }
}

/* Unified interior hero system. Home/front-page hero treatments are excluded
   so the landing page can keep its separate overdrive composition. */
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) {
  --interior-hero-top: clamp(124px, 13vw, 184px);
  --interior-hero-bottom: clamp(56px, 8vw, 104px);
  --interior-hero-min: clamp(440px, 58vh, 680px);
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar.scrolled {
  background: color-mix(in oklab, var(--canvas) 94%, transparent) !important;
  border-bottom-color: var(--hairline) !important;
  backdrop-filter: saturate(120%) blur(6px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(6px) !important;
}

.topbar .brand {
  align-items: center !important;
  gap: 0 !important;
  white-space: nowrap;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

.topbar .brand > span:not(.brand-mark):not(.brand-region) {
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar:not(.scrolled) .brand,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar:not(.scrolled) .brand-region,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar:not(.scrolled) .nav a,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar:not(.scrolled) .nav-dropdown-btn,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar.scrolled .brand,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar.scrolled .brand-region,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar.scrolled .nav a,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar.scrolled .nav-dropdown-btn {
  color: var(--ink-2) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar:not(.scrolled) .brand-mark,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar.scrolled .brand-mark {
  background: var(--ink) !important;
  color: var(--canvas) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar:not(.scrolled) .top-cta,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar.scrolled .top-cta {
  background: var(--ink) !important;
  color: var(--canvas) !important;
  border-color: var(--ink) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar:not(.scrolled) .nav-dropdown a {
  color: color-mix(in oklab, var(--canvas) 92%, white) !important;
  border-bottom-color: oklch(30% 0.012 240) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar:not(.scrolled) .nav-dropdown a:hover,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar:not(.scrolled) .nav-dropdown a:focus-visible {
  color: var(--canvas-2) !important;
  background: oklch(22% 0.014 240) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar .site-nav-dropdown .site-nav-links a,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar:not(.scrolled) .site-nav-dropdown .site-nav-links a,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar.scrolled .site-nav-dropdown .site-nav-links a,
header#topbar:has(.topbar-logo) nav .site-nav-dropdown .site-nav-links a {
  color: oklch(90% 0.012 90) !important;
  border-top-color: oklch(28% 0.012 240) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar .site-nav-dropdown .site-nav-links a:hover,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .topbar .site-nav-dropdown .site-nav-links a:focus-visible,
header#topbar:has(.topbar-logo) nav .site-nav-dropdown .site-nav-links a:hover,
header#topbar:has(.topbar-logo) nav .site-nav-dropdown .site-nav-links a:focus-visible {
  color: var(--canvas-2) !important;
  background: transparent !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero, .blog-hero, .post-hero, .city-hero, .province-hero, .contact-hero, section.hero, .product-hero) {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: block !important;
  align-items: initial !important;
  max-width: none !important;
  min-height: var(--interior-hero-min) !important;
  margin: 0 !important;
  padding-block: var(--interior-hero-top) var(--interior-hero-bottom) !important;
  background: var(--canvas) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--hairline) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero, .blog-hero, .post-hero, .city-hero, .province-hero, .contact-hero, section.hero, .product-hero)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--hairline) 72%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--hairline) 72%, transparent) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  opacity: 0.45 !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero, .blog-hero, .post-hero, .city-hero, .province-hero, .contact-hero)::after {
  content: "FIELD NOTES\A HDPE shell / R-40 cover\A Measured claims only." !important;
  white-space: pre-line !important;
  position: absolute !important;
  top: auto !important;
  right: clamp(20px, 4vw, 56px) !important;
  bottom: clamp(36px, 7vw, 88px) !important;
  left: auto !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: end !important;
  width: min(32vw, 430px) !important;
  min-height: clamp(220px, 28vw, 360px) !important;
  padding: clamp(20px, 3vw, 40px) !important;
  border: 1px solid var(--hairline) !important;
  background:
    repeating-linear-gradient(135deg, transparent 0 36px, color-mix(in oklab, var(--hairline) 75%, transparent) 36px 37px),
    var(--canvas-2) !important;
  color: var(--ink-3) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  line-height: 1.7 !important;
  text-transform: uppercase !important;
}

@media (min-width: 901px) {
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero:not(:has(.page-hero-aside)), .blog-hero, .city-hero, .province-hero, .contact-hero) > .wrap,
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .post-hero {
    padding-right: calc(min(32vw, 430px) + clamp(56px, 8vw, 112px)) !important;
  }
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero:has(.page-hero-aside)::after {
  display: none !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .build-page .page-hero .wrap::after,
.build-page .page-hero .wrap::after {
  display: none !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero, .blog-hero, .city-hero, .province-hero, .contact-hero) > .wrap,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-content,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .post-hero,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .post-hero-inner,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero > .wrap,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-content .wrap {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: 1480px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 4vw, 56px) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .post-hero {
  padding-inline: clamp(20px, 4vw, 56px) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero, .blog-hero, .city-hero, .province-hero, .contact-hero) > .wrap > :not(.page-hero-inner):not(.hero-coverage):not(.trust-row),
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero-inner > div:first-child,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-content > :not(.hero-stats),
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .post-hero > :not(.post-hero-inner),
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .post-hero-inner > *,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-copy,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-content .wrap > * {
  max-width: min(62ch, 100%) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.eyebrow, .page-eyebrow, .hero-eyebrow, .post-eyebrow, .blog-hero .eyebrow, .city-hero .eyebrow, .province-hero .eyebrow, .product-hero .eyebrow, .hero-series) {
  color: var(--steam-deep) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero .h-display, .page-hero .h-1, .page-title, .hero-headline, .hero-title, .blog-hero .h-display, .city-hero .h-display, .province-hero .h-display, .contact-hero .h-1, .post-title, section.hero .hero-h1, .product-hero-model, .hero-name) {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-variation-settings: "wdth" 94, "opsz" 96 !important;
  font-weight: 760 !important;
  font-style: normal !important;
  font-size: clamp(3.25rem, 8vw, 7.75rem) !important;
  line-height: 0.94 !important;
  letter-spacing: 0 !important;
  max-width: 11ch !important;
  margin-top: var(--s-5, 24px) !important;
  margin-bottom: var(--s-5, 24px) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.post-title, .page-title, .hero-headline) {
  max-width: 14ch !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero, .blog-hero, .city-hero, .province-hero, .contact-hero) > .wrap > :is(.h-display, .h-1, .page-title, .hero-headline, .hero-title),
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero-inner :is(.page-title, .h-display, .h-1),
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-content > .hero-h1,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .post-hero > .post-title,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .post-hero-inner > .post-title,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-content .wrap > .hero-name,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-copy > .product-hero-model {
  max-width: 11ch !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero .h-display em, .page-hero .h-1 em, .page-title em, .hero-headline em, .hero-title em, .blog-hero .h-display em, .city-hero .h-display em, .province-hero .h-display em, .contact-hero .h-1 em, .post-title em, section.hero .hero-h1 em, .product-hero-model em, .hero-name em) {
  background: transparent !important;
  color: var(--amber-dim) !important;
  font-style: normal !important;
  padding: 0 !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.intro, .page-sub, .hero-sub, .blog-hero-sub, .city-hero-sub, .province-hero-body, .contact-hero .body-lg, .page-hero .body-md, .post-deck, .product-hero-desc, .hero-tagline) {
  color: var(--ink-2) !important;
  font-family: var(--body) !important;
  font-size: clamp(17px, 0.75vw + 14px, 21px) !important;
  line-height: 1.55 !important;
  max-width: 62ch !important;
  margin-top: var(--s-4, 16px) !important;
  margin-bottom: var(--s-6, 32px) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.post-meta, .post-breadcrumb, .product-hero-seats, .product-hero-financing, .hero-seats, .hero-price-label) {
  color: var(--ink-3) !important;
  font-family: var(--mono) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.product-hero-price, .hero-price) {
  color: var(--steam-deep) !important;
  font-family: var(--mono) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.hero-actions, .hero-ctas, .hero-cta, .product-hero-cta) {
  position: relative !important;
  z-index: 2 !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.btn-hero-primary, .btn-primary-dark, .product-hero .btn-primary, section.hero .hero-cta, .hero-actions .btn-primary, .hero-ctas .btn-hero-primary) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 14px 22px !important;
  background: var(--ink) !important;
  color: var(--canvas) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.btn-hero-ghost, .btn-outline-dark, .product-hero .btn-ghost, .hero-actions .btn-outline, .hero-actions .btn:not(.btn-primary)) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 14px 22px !important;
  background: color-mix(in oklab, var(--canvas-2) 82%, transparent) !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero-aside {
  border-color: var(--hairline) !important;
  background:
    repeating-linear-gradient(135deg, transparent 0 36px, color-mix(in oklab, var(--hairline) 72%, transparent) 36px 37px),
    var(--canvas-2) !important;
  color: var(--ink-3) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .hero-coverage {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 1px !important;
  width: min(100%, 980px) !important;
  margin-top: var(--s-7, 48px) !important;
  background: var(--hairline) !important;
  border: 1px solid var(--hairline) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .hero-coverage-item {
  background: var(--canvas-2) !important;
  padding: var(--s-4, 16px) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-media {
  position: absolute !important;
  inset: auto clamp(20px, 4vw, 56px) clamp(48px, 8vw, 96px) auto !important;
  z-index: 1 !important;
  display: block !important;
  width: min(38vw, 520px) !important;
  height: clamp(240px, 32vw, 420px) !important;
  overflow: hidden !important;
  border: 1px solid var(--hairline) !important;
  background: var(--canvas-2) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0.82 !important;
  filter: saturate(0.86) contrast(1.04) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-scrim {
  display: none !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-content {
  padding-block: 0 !important;
  padding-right: calc(min(38vw, 520px) + clamp(56px, 8vw, 112px)) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1px !important;
  max-width: 960px !important;
  margin-top: var(--s-7, 48px) !important;
  background: var(--hairline) !important;
  border: 1px solid var(--hairline) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div {
  background: var(--canvas-2) !important;
  padding: var(--s-4, 16px) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero :is(.hero-stat-val, .hero-stat-lbl) {
  color: var(--ink) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-bg,
body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-overlay {
  display: none !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.55fr) !important;
  align-items: center !important;
  gap: clamp(32px, 6vw, 96px) !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-img-col {
  order: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: clamp(280px, 34vw, 440px) !important;
  padding: clamp(20px, 4vw, 56px) !important;
  border: 1px solid var(--hairline) !important;
  background:
    repeating-linear-gradient(135deg, transparent 0 36px, color-mix(in oklab, var(--hairline) 75%, transparent) 36px 37px),
    var(--canvas-2) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-img-col img {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  opacity: 0.94 !important;
  transform: none !important;
  filter: drop-shadow(0 24px 48px oklch(20% 0.012 240 / 0.22)) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-copy {
  order: 1 !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero:has(.product-hero-img) .product-hero-img {
  position: absolute !important;
  inset: var(--interior-hero-top) clamp(20px, 4vw, 56px) var(--interior-hero-bottom) auto !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(40vw, 560px) !important;
  height: auto !important;
  overflow: hidden !important;
  border: 1px solid var(--hairline) !important;
  background:
    repeating-linear-gradient(135deg, transparent 0 36px, color-mix(in oklab, var(--hairline) 75%, transparent) 36px 37px),
    var(--canvas-2) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero:has(.product-hero-img) .product-hero-img img {
  width: 86% !important;
  max-width: 520px !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 0.94 !important;
  transform: none !important;
  filter: drop-shadow(0 24px 48px oklch(20% 0.012 240 / 0.22)) !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 0 !important;
}

body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero:has(.product-hero-img) .product-hero-content .wrap {
  padding-right: calc(min(40vw, 560px) + clamp(56px, 8vw, 112px)) !important;
}

@media (max-width: 900px) {
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) {
    --interior-hero-top: clamp(108px, 24vw, 136px);
    --interior-hero-bottom: clamp(48px, 12vw, 72px);
    --interior-hero-min: auto;
  }

  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero, .blog-hero, .post-hero, .city-hero, .province-hero, .contact-hero, section.hero, .product-hero) {
    min-height: auto !important;
  }

  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero, .blog-hero, .post-hero, .city-hero, .province-hero, .contact-hero)::after,
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-media,
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero:has(.product-hero-img) .product-hero-img {
    display: none !important;
  }

  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero, .blog-hero, .city-hero, .province-hero, .contact-hero) > .wrap,
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .post-hero,
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero > .wrap,
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-content .wrap,
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero:has(.product-hero-img) .product-hero-content .wrap,
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-content {
    padding-left: clamp(20px, 6vw, 28px) !important;
    padding-right: clamp(20px, 6vw, 28px) !important;
  }

  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero .h-display, .page-hero .h-1, .page-title, .hero-headline, .hero-title, .blog-hero .h-display, .city-hero .h-display, .province-hero .h-display, .contact-hero .h-1, .post-title, section.hero .hero-h1, .product-hero-model, .hero-name) {
    font-size: clamp(3.2rem, 16vw, 5rem) !important;
    line-height: 0.96 !important;
    max-width: 10ch !important;
  }

  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.intro, .page-sub, .hero-sub, .blog-hero-sub, .city-hero-sub, .province-hero-body, .contact-hero .body-lg, .page-hero .body-md, .post-deck, .product-hero-desc, .hero-tagline) {
    max-width: 100% !important;
  }

  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }

  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-inner {
    grid-template-columns: 1fr !important;
    gap: var(--s-6, 32px) !important;
  }

  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-copy,
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-copy > *,
  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-content .wrap > * {
    max-width: 100% !important;
  }

  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-img-col {
    order: 2 !important;
    min-height: 220px !important;
    padding: var(--s-4, 16px) !important;
  }

  body:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .product-hero-img-col img {
    max-height: 220px !important;
  }
}

.build-page .stat-band {
  background: var(--canvas) !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding-block: clamp(32px, 5vw, 72px) !important;
}

.build-page .stat-band-inner {
  background: var(--hairline) !important;
  border: 1px solid var(--hairline) !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 1px !important;
}

.build-page .stat-cell {
  background: var(--canvas-2) !important;
  text-align: left !important;
  padding: clamp(24px, 3vw, 44px) !important;
}

.build-page .stat-num {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-variation-settings: "wdth" 90, "opsz" 48;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 0.95 !important;
}

.build-page .stat-label {
  color: var(--steam-deep) !important;
}

.build-page .section {
  background: var(--canvas) !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding-block: clamp(72px, 9vw, 136px) !important;
}

.build-page .section:nth-of-type(even) {
  background: var(--canvas-deep) !important;
}

.build-page .section .eyebrow,
.build-page .cta-strip .eyebrow {
  color: var(--steam-deep) !important;
}

.build-page .h-2,
.build-page .h-3,
.build-page .step-title,
.build-page .versus-tag,
.build-page .power-title,
.build-page .loss-title,
.build-page .mech-title,
.build-page .routine-title,
.build-page .product-name,
.build-page .help-title,
.build-page .coverage-title {
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

.build-page .split-img,
.build-page .video-wrap {
  border: 1px solid var(--hairline);
  background: var(--canvas-2) !important;
}

.build-page .video-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.build-page .video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.build-page .prop-grid,
.build-page .compare-grid,
.build-page .steps,
.build-page .versus,
.build-page .power-grid,
.build-page .loss-grid,
.build-page .cost-split,
.build-page .mech-grid,
.build-page .routine-steps,
.build-page .product-grid,
.build-page .help-grid,
.build-page .coverage-grid {
  display: grid !important;
  gap: 1px !important;
  background: var(--hairline) !important;
  border: 1px solid var(--hairline) !important;
}

.build-page .prop-grid,
.build-page .compare-grid,
.build-page .versus,
.build-page .power-grid,
.build-page .cost-split,
.build-page .help-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.build-page .steps,
.build-page .loss-grid,
.build-page .coverage-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.build-page .mech-grid,
.build-page .routine-steps {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

.build-page .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.build-page .prop-cell,
.build-page .compare-col,
.build-page .step-cell,
.build-page .versus-col,
.build-page .power-cell,
.build-page .loss-cell,
.build-page .cost-col,
.build-page .mech-cell,
.build-page .routine-cell,
.build-page .product-cell,
.build-page .help-cell,
.build-page .coverage-cell,
.build-page .legal-block,
.build-page .notice-box,
.build-page .testimonial {
  background: var(--canvas-2) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0;
}

.build-page .compare-col.highlight,
.build-page .versus-col.alt,
.build-page .power-cell:nth-child(2),
.build-page .cost-col:nth-child(2),
.build-page .help-cell:nth-child(2) {
  background: var(--canvas-deep) !important;
}

.build-page .cost-col:nth-child(2) .cost-amount,
.build-page .cost-col:nth-child(2) .cost-tag,
.build-page .cost-col:nth-child(2) .cost-period {
  color: var(--ink) !important;
}

.build-page .step-num,
.build-page .routine-n,
.build-page .loss-pct,
.build-page .cost-amount,
.build-page .coverage-period,
.build-page .power-volt {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-variation-settings: "wdth" 88, "opsz" 48;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.build-page .step-body,
.build-page .versus-row,
.build-page .power-body,
.build-page .power-list,
.build-page .power-note,
.build-page .loss-body,
.build-page .mech-body,
.build-page .routine-body,
.build-page .product-desc,
.build-page .help-body,
.build-page .coverage-body,
.build-page .legal-block p,
.build-page .notice-box p,
.build-page .testi-quote {
  color: var(--ink-2) !important;
}

.build-page .mark,
.build-page .product-link,
.build-page .compare-tag.good,
.build-page .versus-tag.pos {
  color: var(--steam-deep) !important;
}

.build-page .compare-tag.bad,
.build-page .versus-tag.neg {
  color: var(--ink-3) !important;
}

.build-page .testi-stars {
  color: var(--amber) !important;
}

.build-page .cta-strip {
  background: var(--ink) !important;
  color: var(--canvas) !important;
  border: 0 !important;
}

.build-page .cta-strip .h-2,
.build-page .cta-strip p {
  color: var(--canvas) !important;
}

.build-page .cta-strip .btn-primary {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  border-color: var(--canvas) !important;
}

.build-page .cta-strip .btn-outline {
  color: var(--canvas) !important;
  border-color: color-mix(in oklab, var(--canvas) 45%, transparent) !important;
}

@media (max-width: 900px) {
  header.topbar .nav,
  .topbar .nav,
  .topbar-nav,
  .topbar:has(.topbar-logo) nav,
  header#topbar:has(.topbar-logo) nav {
    display: none !important;
  }

  header.topbar .eco-mobile-menu-toggle,
  .topbar .eco-mobile-menu-toggle {
    display: inline-flex !important;
    position: relative;
    flex: 0 0 auto;
  }

  .topbar .top-cta,
  .topbar .topbar-cta {
    display: none !important;
  }

  .topbar .brand,
  .topbar-logo {
    min-height: 44px;
  }

  .topbar:has(.topbar-logo) .topbar-inner,
  header#topbar:has(.topbar-logo) .topbar-inner {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding-inline: 16px !important;
  }

  .topbar-nav a:not(.topbar-cta),
  .topbar:has(.topbar-logo) nav a:not(.nav-cta),
  header#topbar:has(.topbar-logo) nav a:not(.nav-cta) {
    display: none !important;
  }
}

@media (max-width: 800px) {
  .topbar .wrap {
    max-width: 100% !important;
    padding-inline: 12px !important;
  }

  .topbar-inner {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    width: 100% !important;
    padding-inline: 0 !important;
  }

  .brand {
    min-width: 0 !important;
    overflow: hidden;
  }

  .brand span:not(.brand-mark):not(.brand-region) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-cta {
    flex-shrink: 0;
    max-width: 42vw;
    padding: 9px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap;
  }

  .product-hero-img img {
    width: 82% !important;
    opacity: 0.18 !important;
    transform: translate(20%, 8%) !important;
    filter: drop-shadow(0 28px 64px oklch(0% 0 0 / 0.35)) !important;
  }

  .product-hero-overlay {
    background:
      linear-gradient(to bottom, oklch(14% 0.012 240 / 0.98) 0%, oklch(14% 0.012 240 / 0.84) 55%, oklch(14% 0.012 240 / 0.96) 100%) !important;
  }

  .build-page .page-hero .wrap {
    grid-template-columns: 1fr;
  }

  .build-page .page-hero .wrap::after {
    display: none;
  }

  .build-page .page-hero .h-display {
    font-size: clamp(48px, 14vw, 82px) !important;
    max-width: 9ch;
  }

  .province-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100%;
  }

  .province-tab {
    text-align: center;
    padding-inline: 8px !important;
  }
}

@media (max-width: 760px) {
  .topbar-inner,
  .topbar:has(.topbar-logo) .topbar-inner,
  header#topbar:has(.topbar-logo) .topbar-inner {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

@media (max-width: 420px) {
  .topbar .brand,
  .topbar-logo {
    font-size: 16px !important;
  }

  .topbar-inner,
  .topbar:has(.topbar-logo) .topbar-inner,
  header#topbar:has(.topbar-logo) .topbar-inner {
    padding-inline: 12px !important;
  }
}

@media (max-width: 360px) {
  .analogy,
  .analogy-copy,
  .analogy-card,
  .contact-grid,
  .form-col,
  .form,
  .step-progress,
  .value-ledger,
  .contact-sidebar {
    min-width: 0 !important;
    width: 100% !important;
    max-width: calc(100vw - 40px) !important;
    box-sizing: border-box !important;
  }

  .step-progress {
    align-items: flex-start !important;
  }

  .step-track {
    min-width: 0 !important;
  }

  .btn,
  .btn-primary,
  .btn-outline,
  .btn-ghost,
  .btn-hero-primary,
  .btn-hero-ghost {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .compare-vs {
    grid-template-columns: 1fr !important;
  }

  .compare-vs-divider {
    text-align: center !important;
  }
}

@media (max-width: 640px) {
  footer a,
  footer .foot-col a,
  footer .footer-col a,
  footer .footer-links a,
  .model-link,
  .link-arrow,
  .link-arrow-light {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }

  footer .foot-col ul,
  footer .footer-col {
    gap: 2px !important;
  }

  footer .foot-grid,
  footer .footer-inner,
  footer .footer-nav,
  footer .footer-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 24px !important;
  }

  footer .footer-links {
    flex-direction: column !important;
  }

  footer .foot-col,
  footer .footer-col,
  footer .footer-brand {
    width: 100% !important;
    min-width: 0 !important;
  }

  footer .footer-base,
  footer .footer-bottom,
  footer .foot-meta {
    display: grid !important;
    gap: 10px !important;
    text-align: left !important;
  }

  footer .footer-links,
  footer .footer-social {
    justify-content: flex-start !important;
  }
}

@media (max-width: 700px) {
  .compare-wrap,
  body.models-ledger-page .compare-wrap {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  body.models-ledger-page .compare-wrap {
    padding: 10px !important;
    border-inline: 1px solid var(--models-line) !important;
  }

  .compare-table,
  body.models-ledger-page .compare-table {
    min-width: 760px !important;
  }

  body:has(.post-body) .post-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body:has(.post-body) .data-table {
    min-width: 520px !important;
  }

  .modal,
  .cfg-drawer {
    width: min(100vw, 100%) !important;
  }

  .model-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px !important;
    overflow: visible !important;
  }

  .model-pill {
    justify-content: space-between !important;
    min-width: 0 !important;
    padding-inline: 12px !important;
  }
}

@media (max-width: 700px) {
  body:has(.post-body) .post-hero,
  body:has(.post-body) .post-body-wrap,
  body:has(.post-body) .related {
    display: block !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body:has(.post-body) .post-title {
    font-size: clamp(2.1rem, 11vw, 3.35rem) !important;
  }

  body:has(.post-body) .data-table {
    min-width: 560px;
  }

  .spec-strip-inner,
  .model-strip-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .spec-item,
  .model-link {
    border-right: 0 !important;
    padding-inline: 10px !important;
  }

  .stat-band-inner {
    grid-template-columns: 1fr !important;
  }

  .stats-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .build-page .prop-grid,
  .build-page .compare-grid,
  .build-page .versus,
  .build-page .power-grid,
  .build-page .cost-split,
  .build-page .help-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .province-tabs {
    grid-template-columns: 1fr !important;
  }

  body:has(.post-body) .data-table {
    min-width: 500px;
  }
}

/* Hard cover page prototype: warmer premium service-manual direction. */
body.hard-cover-luxury {
  --hc-paper: oklch(96.5% 0.008 86);
  --hc-pearl: oklch(99% 0.004 92);
  --hc-fog: oklch(92.5% 0.01 86);
  --hc-ink: oklch(17% 0.015 245);
  --hc-ink-2: oklch(28% 0.014 245);
  --hc-muted: oklch(46% 0.012 245);
  --hc-line: oklch(78% 0.01 86);
  --hc-steel: oklch(54% 0.03 235);
  --hc-amber: oklch(70% 0.13 76);
  --hc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--hc-paper) !important;
}

body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero {
  min-height: clamp(660px, 86vh, 900px) !important;
  padding-block: clamp(122px, 12vw, 170px) clamp(52px, 7vw, 92px) !important;
  background:
    linear-gradient(118deg, var(--hc-pearl) 0%, var(--hc-paper) 46%, color-mix(in oklab, var(--hc-fog) 72%, var(--hc-paper)) 100%) !important;
  border-bottom-color: color-mix(in oklab, var(--hc-line) 82%, var(--hc-ink)) !important;
}

body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero::before {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--hc-line) 52%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--hc-line) 52%, transparent) 1px, transparent 1px),
    linear-gradient(155deg, transparent 0 48%, color-mix(in oklab, var(--hc-ink) 6%, transparent) 48% 52%, transparent 52%) !important;
  background-size: 56px 56px, 56px 56px, 100% 100% !important;
  opacity: 0.5 !important;
}

body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero::after {
  content: "" !important;
  display: none !important;
}

body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero > .wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.58fr) !important;
  align-items: center !important;
  gap: clamp(36px, 7vw, 112px) !important;
  padding-inline: clamp(20px, 4vw, 56px) !important;
  padding-right: clamp(20px, 4vw, 56px) !important;
  max-width: 1500px !important;
}

body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero > .wrap > .hc-hero-copy,
body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero > .wrap > .hc-hero-panel {
  max-width: none !important;
}

body.hard-cover-luxury .hc-hero-copy {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  align-content: center;
}

body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero .eyebrow {
  color: var(--hc-steel) !important;
}

body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero .h-display {
  max-width: 12ch !important;
  margin: 0 !important;
  color: var(--hc-ink) !important;
  font-size: clamp(4.2rem, 10vw, 10.6rem) !important;
  line-height: 0.88 !important;
  text-wrap: balance;
}

body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero .intro {
  max-width: 58ch !important;
  margin: 0 !important;
  color: var(--hc-ink-2) !important;
  font-size: clamp(1.06rem, 0.72vw + 0.9rem, 1.32rem) !important;
  line-height: 1.58 !important;
}

body.hard-cover-luxury .hc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.hard-cover-luxury .page-hero .btn {
  min-height: 52px;
  border-radius: 2px;
  box-shadow: 0 12px 34px oklch(0% 0 0 / 0);
  transition:
    transform 220ms var(--hc-ease),
    background 220ms var(--hc-ease),
    color 220ms var(--hc-ease),
    border-color 220ms var(--hc-ease),
    box-shadow 220ms var(--hc-ease);
}

body.hard-cover-luxury .page-hero .btn-primary {
  background: var(--hc-ink) !important;
  border-color: var(--hc-ink) !important;
  color: var(--hc-paper) !important;
}

body.hard-cover-luxury .page-hero .btn-outline {
  background: color-mix(in oklab, var(--hc-pearl) 70%, transparent) !important;
  border-color: color-mix(in oklab, var(--hc-ink) 78%, var(--hc-line)) !important;
  color: var(--hc-ink) !important;
}

body.hard-cover-luxury .page-hero .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px oklch(18% 0.02 245 / 0.13);
}

body.hard-cover-luxury .hc-hero-claims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 760px);
  margin-top: clamp(8px, 1vw, 16px);
  border: 1px solid color-mix(in oklab, var(--hc-line) 86%, var(--hc-ink));
  background: color-mix(in oklab, var(--hc-line) 82%, var(--hc-ink));
}

body.hard-cover-luxury .hc-hero-claims span {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: clamp(16px, 2vw, 24px);
  background: color-mix(in oklab, var(--hc-pearl) 88%, transparent);
}

body.hard-cover-luxury .hc-hero-claims strong {
  color: var(--hc-ink);
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.4vw, 3rem);
  font-weight: 820;
  line-height: 0.95;
  letter-spacing: 0;
}

body.hard-cover-luxury .hc-hero-claims small {
  color: var(--hc-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
}

body.hard-cover-luxury .hc-hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 820px);
  margin-top: clamp(8px, 1vw, 16px);
  border: 1px solid color-mix(in oklab, var(--hc-line) 86%, var(--hc-ink));
  background: color-mix(in oklab, var(--hc-line) 82%, var(--hc-ink));
}

body.hard-cover-luxury .hc-hero-proof span {
  min-width: 0;
  padding: clamp(15px, 2vw, 22px);
  background: color-mix(in oklab, var(--hc-pearl) 88%, transparent);
  color: var(--hc-ink-2);
  font-family: var(--mono);
  font-size: clamp(0.68rem, 0.16vw + 0.64rem, 0.78rem);
  letter-spacing: 0.11em;
  line-height: 1.6;
  text-transform: uppercase;
}

body.hard-cover-luxury .hc-hero-panel {
  display: grid;
  gap: 12px;
  width: min(100%, 520px);
  justify-self: end;
}

body.hard-cover-luxury .hc-cover-card {
  position: relative;
  aspect-ratio: 1 / 1.08;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--hc-ink) 45%, var(--hc-line));
  border-radius: 3px;
  background: var(--hc-ink);
  box-shadow:
    0 40px 90px oklch(20% 0.025 245 / 0.18),
    inset 0 1px 0 oklch(100% 0 0 / 0.28);
  transform: translate3d(var(--hc-panel-x, 0), var(--hc-panel-y, 0), 0);
  transition: transform 360ms var(--hc-ease);
}

body.hard-cover-luxury .hc-cover-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: 50% 78%;
  filter: saturate(0.5) contrast(1.12) brightness(0.91);
  transform: scale(1.045);
  animation: hc-photo-breathe 14s var(--hc-ease) infinite alternate;
}

body.hard-cover-luxury .hc-cover-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, oklch(12% 0.012 245 / 0.14), transparent 34%, oklch(12% 0.012 245 / 0.46)),
    linear-gradient(118deg, oklch(76% 0.09 76 / 0.18), transparent 42%);
}

body.hard-cover-luxury .hc-cover-card::after {
  content: "";
  position: absolute;
  inset: 18px;
  pointer-events: none;
  border: 1px solid oklch(96% 0.005 86 / 0.34);
  background:
    linear-gradient(90deg, oklch(96% 0.005 86 / 0.14) 1px, transparent 1px),
    linear-gradient(0deg, oklch(96% 0.005 86 / 0.14) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.58;
}

body.hard-cover-luxury .hc-cover-tag {
  position: absolute;
  left: 28px;
  bottom: 26px;
  z-index: 1;
  display: inline-flex;
  max-width: calc(100% - 56px);
  padding: 10px 12px;
  background: color-mix(in oklab, var(--hc-ink) 82%, transparent);
  color: var(--hc-paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.hard-cover-luxury .hc-panel-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid color-mix(in oklab, var(--hc-line) 82%, var(--hc-ink));
  background: color-mix(in oklab, var(--hc-line) 86%, var(--hc-ink));
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.hard-cover-luxury .hc-panel-ledger span {
  min-width: 0;
  padding: 13px 14px;
  background: color-mix(in oklab, var(--hc-pearl) 90%, transparent);
  color: var(--hc-muted);
}

body.hard-cover-luxury .hc-panel-ledger span:first-child {
  grid-column: 1 / -1;
  background: var(--hc-ink);
  color: var(--hc-paper);
}

body.hard-cover-luxury .hc-mechanism {
  display: grid;
  gap: 18px;
  border: 1px solid color-mix(in oklab, var(--hc-line) 82%, var(--hc-ink));
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--hc-line) 42%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--hc-line) 42%, transparent) 1px, transparent 1px),
    color-mix(in oklab, var(--hc-pearl) 94%, transparent);
  background-size: 34px 34px;
  padding: clamp(18px, 2vw, 26px);
}

body.hard-cover-luxury .hc-mechanism-title {
  color: var(--hc-ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.hard-cover-luxury .hc-mechanism-stack {
  position: relative;
  display: grid;
  gap: 8px;
}

body.hard-cover-luxury .hc-mechanism-stack span {
  position: relative;
  display: block;
  height: 30px;
  border: 1px solid color-mix(in oklab, var(--hc-line) 84%, var(--hc-ink));
  background: color-mix(in oklab, var(--hc-paper) 74%, var(--hc-steel));
  transform-origin: left;
  animation: hc-layer-set 850ms var(--hc-ease) both;
}

body.hard-cover-luxury .hc-mechanism-stack span:nth-child(2) {
  background: color-mix(in oklab, var(--hc-amber) 20%, var(--hc-paper));
  animation-delay: 90ms;
}

body.hard-cover-luxury .hc-mechanism-stack span:nth-child(3) {
  height: 14px;
  background: var(--hc-ink);
  animation-delay: 180ms;
}

body.hard-cover-luxury .hc-mechanism-stack span:nth-child(4) {
  width: 74%;
  justify-self: end;
  background: color-mix(in oklab, var(--hc-steel) 50%, var(--hc-paper));
  animation-delay: 270ms;
}

body.hard-cover-luxury .hc-mechanism-stack span::after {
  content: attr(data-layer);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hc-ink-2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body.hard-cover-luxury .hc-mechanism-stack span:nth-child(3)::after {
  color: var(--hc-paper);
}

body.hard-cover-luxury .hc-mechanism-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid color-mix(in oklab, var(--hc-line) 82%, var(--hc-ink));
  background: color-mix(in oklab, var(--hc-line) 86%, var(--hc-ink));
}

body.hard-cover-luxury .hc-mechanism-copy span {
  min-width: 0;
  padding: 12px 13px;
  background: color-mix(in oklab, var(--hc-pearl) 90%, transparent);
  color: var(--hc-muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
}

body.hard-cover-luxury .stat-band {
  position: relative;
  overflow: hidden;
  background: var(--hc-ink) !important;
  border-bottom-color: color-mix(in oklab, var(--hc-paper) 16%, var(--hc-ink)) !important;
  padding-block: clamp(68px, 8vw, 118px) !important;
}

body.hard-cover-luxury .stat-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, oklch(96% 0.005 86 / 0.055) 1px, transparent 1px),
    linear-gradient(0deg, oklch(96% 0.005 86 / 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.62;
}

body.hard-cover-luxury .stat-band::after {
  content: "";
  position: absolute;
  top: 35%;
  left: -12%;
  width: 124%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--hc-amber) 72%, var(--hc-paper)), transparent);
  opacity: 0.78;
  transform: translate3d(-34%, 0, 0) scaleX(0.62);
  transform-origin: left;
}

body.hard-cover-luxury .stat-band.is-visible::after {
  animation: hc-seal-sweep 1550ms var(--hc-ease) 160ms both;
}

body.hard-cover-luxury .stat-band .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 3vw, 38px);
}

body.hard-cover-luxury .hc-stat-header {
  display: grid;
  grid-template-columns: minmax(0, 0.52fr) minmax(360px, 0.48fr);
  align-items: end;
  gap: clamp(20px, 5vw, 88px);
  color: var(--hc-paper);
}

body.hard-cover-luxury .hc-stat-header .eyebrow {
  color: color-mix(in oklab, var(--hc-amber) 80%, var(--hc-paper)) !important;
}

body.hard-cover-luxury .hc-stat-header p:last-child {
  max-width: 48ch;
  color: color-mix(in oklab, var(--hc-paper) 74%, var(--hc-steel));
  font-size: clamp(1.05rem, 0.7vw + 0.9rem, 1.28rem);
  line-height: 1.5;
}

body.hard-cover-luxury .stat-band-inner {
  border-color: color-mix(in oklab, var(--hc-paper) 18%, var(--hc-ink)) !important;
  background: color-mix(in oklab, var(--hc-paper) 14%, var(--hc-ink)) !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr) !important;
  grid-auto-rows: minmax(122px, auto);
  min-height: 0;
}

body.hard-cover-luxury .stat-cell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  align-content: center;
  column-gap: clamp(22px, 3vw, 48px);
  row-gap: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--hc-ink-2) 74%, var(--hc-ink)), var(--hc-ink)) !important;
  min-height: 122px;
  padding: clamp(22px, 2.4vw, 34px) clamp(26px, 3.2vw, 48px) !important;
  transition:
    transform 360ms var(--hc-ease),
    background 360ms var(--hc-ease),
    border-color 360ms var(--hc-ease);
}

body.hard-cover-luxury .stat-cell:first-child {
  grid-row: span 3;
  grid-template-columns: 1fr;
  align-content: end;
  gap: clamp(18px, 2vw, 28px);
  min-height: clamp(360px, 35vw, 480px);
  padding: clamp(34px, 4vw, 62px) !important;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in oklab, var(--hc-paper) 10%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in oklab, var(--hc-ink-2) 88%, var(--hc-ink)), var(--hc-ink)) !important;
}

body.hard-cover-luxury .stat-cell::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, oklch(96% 0.005 86 / 0.08), transparent 48%);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--hc-ease), transform 620ms var(--hc-ease);
}

body.hard-cover-luxury .stat-cell::after {
  content: "";
  position: absolute;
  right: clamp(28px, 3vw, 48px);
  bottom: clamp(30px, 3vw, 44px);
  left: clamp(28px, 3vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, var(--hc-amber), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 760ms var(--hc-ease);
}

body.hard-cover-luxury .stat-cell:not(:first-child)::after {
  right: clamp(26px, 3vw, 48px);
  bottom: 23px;
  left: calc(clamp(26px, 3.2vw, 48px) + 220px + clamp(22px, 3vw, 48px));
}

body.hard-cover-luxury .stat-cell:hover {
  transform: translate3d(0, -6px, 0);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--hc-ink-2) 92%, var(--hc-amber)), var(--hc-ink)) !important;
}

body.hard-cover-luxury .stat-cell.is-visible::before {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.hard-cover-luxury .stat-cell.is-visible::after {
  transform: scaleX(1);
}

body.hard-cover-luxury .stat-num {
  color: var(--hc-paper) !important;
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  z-index: 1;
  font-family: var(--display);
  font-size: clamp(3.1rem, 5vw, 5.6rem) !important;
  font-weight: 820;
  letter-spacing: 0;
  line-height: 0.9;
  text-align: left;
}

body.hard-cover-luxury .stat-cell:first-child .stat-num {
  grid-row: auto;
  font-size: clamp(6.2rem, 11vw, 12rem) !important;
  line-height: 0.82;
}

body.hard-cover-luxury .stat-cell:nth-child(4) .stat-num {
  font-size: clamp(2.8rem, 4.3vw, 5rem) !important;
}

body.hard-cover-luxury .stat-label {
  color: color-mix(in oklab, var(--hc-amber) 70%, var(--hc-paper)) !important;
  position: relative;
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  margin-top: 0 !important;
  text-align: left;
}

body.hard-cover-luxury .stat-cell:first-child .stat-label {
  grid-column: auto;
  grid-row: auto;
}

body.hard-cover-luxury .stat-note {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  z-index: 1;
  max-width: 28ch;
  margin: 0;
  color: color-mix(in oklab, var(--hc-paper) 66%, var(--hc-steel));
  font-size: clamp(0.92rem, 0.32vw + 0.84rem, 1.04rem);
  line-height: 1.55;
}

body.hard-cover-luxury .stat-cell:first-child .stat-note {
  grid-column: auto;
  grid-row: auto;
  max-width: 24ch;
  font-size: clamp(1rem, 0.45vw + 0.92rem, 1.14rem);
}

body.hard-cover-luxury .hc-cost-plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: clamp(430px, 38vw, 620px);
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid color-mix(in oklab, var(--hc-line) 76%, var(--hc-ink));
  background:
    linear-gradient(90deg, oklch(96% 0.005 86 / 0.08) 1px, transparent 1px),
    linear-gradient(0deg, oklch(96% 0.005 86 / 0.08) 1px, transparent 1px),
    var(--hc-ink);
  background-size: 48px 48px;
  color: var(--hc-paper);
  box-shadow: 0 30px 80px oklch(20% 0.02 245 / 0.11);
}

body.hard-cover-luxury .hc-cost-plate::before {
  content: "";
  position: absolute;
  inset: 10%;
  z-index: -1;
  border: 1px solid color-mix(in oklab, var(--hc-paper) 24%, transparent);
  transform: rotate(-8deg);
}

body.hard-cover-luxury .hc-cost-plate .eyebrow {
  color: color-mix(in oklab, var(--hc-amber) 80%, var(--hc-paper)) !important;
}

body.hard-cover-luxury .hc-cost-main {
  margin-top: clamp(18px, 2vw, 26px);
  color: var(--hc-paper);
  font-family: var(--display);
  font-size: clamp(4.8rem, 10vw, 10.5rem);
  font-weight: 830;
  letter-spacing: 0;
  line-height: 0.85;
}

body.hard-cover-luxury .hc-cost-sub {
  margin-top: 14px;
  color: color-mix(in oklab, var(--hc-paper) 72%, var(--hc-steel));
  font-size: clamp(1rem, 0.6vw + 0.88rem, 1.22rem);
}

body.hard-cover-luxury .hc-cost-rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(28px, 4vw, 54px);
  border: 1px solid color-mix(in oklab, var(--hc-paper) 20%, var(--hc-ink));
  background: color-mix(in oklab, var(--hc-paper) 18%, var(--hc-ink));
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1.45;
  text-transform: uppercase;
}

body.hard-cover-luxury .hc-cost-rows span {
  padding: 13px 14px;
  background: color-mix(in oklab, var(--hc-ink-2) 84%, var(--hc-ink));
  color: color-mix(in oklab, var(--hc-paper) 68%, var(--hc-steel));
}

body.hard-cover-luxury .hc-cost-rows span:nth-child(odd) {
  color: color-mix(in oklab, var(--hc-amber) 78%, var(--hc-paper));
}

body.hard-cover-luxury .section {
  background: var(--hc-paper) !important;
}

body.hard-cover-luxury .section:nth-of-type(even) {
  background: color-mix(in oklab, var(--hc-fog) 68%, var(--hc-paper)) !important;
}

body.hard-cover-luxury .section .eyebrow,
body.hard-cover-luxury .cta-strip .eyebrow {
  color: var(--hc-steel) !important;
}

body.hard-cover-luxury .split {
  align-items: center;
}

body.hard-cover-luxury .split-img,
body.hard-cover-luxury .testimonial {
  border-color: color-mix(in oklab, var(--hc-line) 78%, var(--hc-ink)) !important;
  border-radius: 3px !important;
  box-shadow: 0 30px 80px oklch(20% 0.02 245 / 0.1) !important;
}

body.hard-cover-luxury .split-img {
  position: relative;
}

body.hard-cover-luxury .split-img img {
  filter: saturate(0.72) contrast(1.04);
  transform: scale(1.01);
  transition: transform 700ms var(--hc-ease), filter 700ms var(--hc-ease);
}

body.hard-cover-luxury .split-img:hover img {
  filter: saturate(0.82) contrast(1.07);
  transform: scale(1.04);
}

body.hard-cover-luxury .hc-thermos-section {
  background: color-mix(in oklab, var(--hc-fog) 68%, var(--hc-paper)) !important;
}

body.hard-cover-luxury .hc-thermos-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(380px, 0.72fr);
  align-items: center;
  gap: clamp(42px, 7vw, 112px);
}

body.hard-cover-luxury .hc-thermos-copy {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  max-width: 62ch;
}

body.hard-cover-luxury .hc-thermos-copy .h-2 {
  margin: 0 !important;
  font-size: clamp(3rem, 5.6vw, 6.7rem);
  line-height: 0.94;
}

body.hard-cover-luxury .hc-thermos-copy .body-lg {
  margin: 0 !important;
}

body.hard-cover-luxury .hc-quote {
  max-width: 39ch;
  margin: clamp(8px, 1vw, 16px) 0 0;
  color: var(--hc-ink);
  font-family: var(--display);
  font-size: clamp(1.45rem, 1.6vw, 2.25rem);
  font-weight: 760;
  line-height: 1.05;
}

body.hard-cover-luxury .hc-proof-plate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid color-mix(in oklab, var(--hc-line) 80%, var(--hc-ink));
  background: color-mix(in oklab, var(--hc-line) 84%, var(--hc-ink));
  box-shadow: 0 30px 80px oklch(20% 0.02 245 / 0.08);
}

body.hard-cover-luxury .hc-proof-card {
  display: grid;
  grid-template-rows: auto auto minmax(180px, 1fr) auto;
  gap: clamp(14px, 2vw, 24px);
  min-height: clamp(420px, 35vw, 560px);
  padding: clamp(24px, 3vw, 42px);
  background: var(--hc-pearl);
}

body.hard-cover-luxury .hc-proof-card .eyebrow {
  color: var(--hc-steel) !important;
}

body.hard-cover-luxury .hc-proof-card h3 {
  color: var(--hc-ink);
  font-family: var(--display);
  font-size: clamp(2rem, 3vw, 4rem);
  font-weight: 810;
  line-height: 0.95;
  letter-spacing: 0;
}

body.hard-cover-luxury .hc-proof-card p:last-child {
  color: var(--hc-ink-2);
  font-size: clamp(0.98rem, 0.35vw + 0.9rem, 1.12rem);
  line-height: 1.55;
}

body.hard-cover-luxury .hc-proof-good {
  background: color-mix(in oklab, var(--hc-paper) 72%, var(--hc-amber));
}

body.hard-cover-luxury .hc-heat-visual {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  border: 1px solid color-mix(in oklab, var(--hc-line) 80%, var(--hc-ink));
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--hc-line) 58%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--hc-line) 58%, transparent) 1px, transparent 1px),
    color-mix(in oklab, var(--hc-paper) 92%, transparent);
  background-size: 32px 32px;
}

body.hard-cover-luxury .hc-heat-visual::before {
  content: "";
  position: absolute;
  right: 14%;
  bottom: 28%;
  left: 14%;
  height: 18px;
  background: var(--hc-ink);
}

body.hard-cover-luxury .hc-heat-visual::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 18%;
  left: 18%;
  height: 44px;
  border: 1px solid color-mix(in oklab, var(--hc-ink) 54%, var(--hc-line));
  border-top: 0;
}

body.hard-cover-luxury .hc-heat-visual span {
  position: absolute;
  left: calc(18% + var(--i, 0) * 15%);
  bottom: 42%;
  width: 2px;
  height: 88px;
  background: linear-gradient(180deg, transparent, var(--hc-amber));
  transform-origin: bottom;
  opacity: 0.85;
}

body.hard-cover-luxury .hc-heat-visual span:nth-child(1) { --i: 0; }
body.hard-cover-luxury .hc-heat-visual span:nth-child(2) { --i: 1; }
body.hard-cover-luxury .hc-heat-visual span:nth-child(3) { --i: 2; }
body.hard-cover-luxury .hc-heat-visual span:nth-child(4) { --i: 3; }

body.hard-cover-luxury .hc-heat-escape span {
  animation: hc-heat-rise 1400ms var(--hc-ease) infinite;
}

body.hard-cover-luxury .hc-heat-escape span:nth-child(2) { animation-delay: 140ms; }
body.hard-cover-luxury .hc-heat-escape span:nth-child(3) { animation-delay: 280ms; }
body.hard-cover-luxury .hc-heat-escape span:nth-child(4) { animation-delay: 420ms; }

body.hard-cover-luxury .hc-heat-locked::before {
  height: 28px;
  box-shadow: 0 11px 0 color-mix(in oklab, var(--hc-ink) 78%, var(--hc-amber));
}

body.hard-cover-luxury .hc-heat-locked span {
  height: 46px;
  background: linear-gradient(180deg, var(--hc-amber), transparent);
  opacity: 0.56;
  transform: scaleY(0.58);
}

body.hard-cover-luxury .spec-table {
  border-top: 1px solid color-mix(in oklab, var(--hc-line) 82%, var(--hc-ink));
  border-bottom: 1px solid color-mix(in oklab, var(--hc-line) 82%, var(--hc-ink));
}

body.hard-cover-luxury .spec-table tr {
  border-bottom-color: color-mix(in oklab, var(--hc-line) 82%, var(--hc-ink));
}

body.hard-cover-luxury .spec-table td {
  padding-block: 17px;
}

body.hard-cover-luxury .spec-table td:first-child {
  color: var(--hc-muted);
}

body.hard-cover-luxury .spec-table td:last-child {
  color: var(--hc-ink);
}

body.hard-cover-luxury .testimonial {
  position: relative;
  overflow: hidden;
  background: var(--hc-ink) !important;
  color: var(--hc-paper) !important;
}

body.hard-cover-luxury .testimonial::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, oklch(96% 0.005 86 / 0.08) 1px, transparent 1px),
    linear-gradient(0deg, oklch(96% 0.005 86 / 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
}

body.hard-cover-luxury .testi-stars {
  position: relative;
  color: var(--hc-amber) !important;
}

body.hard-cover-luxury .testi-quote,
body.hard-cover-luxury .testi-by {
  position: relative;
  color: var(--hc-paper) !important;
}

body.hard-cover-luxury .testi-by {
  color: color-mix(in oklab, var(--hc-paper) 68%, var(--hc-steel)) !important;
}

body.hard-cover-luxury .hc-bill-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 1px;
  width: min(100%, 1120px);
  max-width: none !important;
  padding: 0 !important;
  background: color-mix(in oklab, var(--hc-paper) 16%, var(--hc-ink)) !important;
}

body.hard-cover-luxury .hc-bill-copy,
body.hard-cover-luxury .hc-bill-receipt {
  position: relative;
  z-index: 1;
  background: var(--hc-ink);
  padding: clamp(30px, 4vw, 58px);
}

body.hard-cover-luxury .hc-bill-receipt {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 7px;
  font-family: var(--mono);
  padding-inline: clamp(30px, 3vw, 46px);
  text-transform: uppercase;
}

body.hard-cover-luxury .hc-bill-receipt span {
  color: color-mix(in oklab, var(--hc-paper) 58%, var(--hc-steel));
  font-size: 10px;
  letter-spacing: 0.16em;
}

body.hard-cover-luxury .hc-bill-receipt strong {
  margin-bottom: 16px;
  color: var(--hc-paper);
  font-family: var(--display);
  font-size: clamp(2.1rem, 2.75vw, 3.45rem);
  font-weight: 820;
  letter-spacing: 0;
  line-height: 0.95;
  white-space: nowrap;
}

body.hard-cover-luxury .cta-strip {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(128deg, var(--hc-ink) 0%, color-mix(in oklab, var(--hc-ink-2) 88%, var(--hc-steel)) 100%) !important;
}

body.hard-cover-luxury .cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, oklch(96% 0.005 86 / 0.08) 1px, transparent 1px),
    linear-gradient(0deg, oklch(96% 0.005 86 / 0.08) 1px, transparent 1px);
  background-size: 52px 52px;
}

body.hard-cover-luxury .cta-strip .wrap {
  position: relative;
  z-index: 1;
}

body.hard-cover-luxury .cta-strip .btn {
  border-radius: 2px;
}

body.hard-cover-luxury .hc-hero-copy > * {
  animation: hc-rise-in 780ms var(--hc-ease) both;
}

body.hard-cover-luxury .hc-hero-copy > *:nth-child(2) {
  animation-delay: 80ms;
}

body.hard-cover-luxury .hc-hero-copy > *:nth-child(3) {
  animation-delay: 150ms;
}

body.hard-cover-luxury .hc-hero-copy > *:nth-child(4) {
  animation-delay: 220ms;
}

body.hard-cover-luxury .hc-hero-copy > *:nth-child(5) {
  animation-delay: 290ms;
}

body.hard-cover-luxury .hc-hero-panel {
  animation: hc-panel-in 900ms var(--hc-ease) 180ms both;
}

body.hard-cover-luxury .hc-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 720ms var(--hc-ease),
    transform 720ms var(--hc-ease);
  transition-delay: var(--hc-delay, 0ms);
  will-change: opacity, transform;
}

body.hard-cover-luxury .hc-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@keyframes hc-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hc-panel-in {
  from {
    opacity: 0;
    transform: translate3d(28px, 34px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes hc-photo-breathe {
  from {
    transform: scale(1.045);
  }
  to {
    transform: scale(1.075);
  }
}

@keyframes hc-layer-set {
  from {
    opacity: 0;
    transform: translate3d(-18px, 8px, 0) scaleX(0.86);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1);
  }
}

@keyframes hc-heat-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scaleY(0.5);
  }
  38% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -44px, 0) scaleY(1.1);
  }
}

@keyframes hc-seal-sweep {
  0% {
    opacity: 0;
    transform: translate3d(-38%, 0, 0) scaleX(0.24);
  }
  28% {
    opacity: 0.95;
  }
  100% {
    opacity: 0.5;
    transform: translate3d(38%, 0, 0) scaleX(0.82);
  }
}

@media (max-width: 980px) {
  body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero {
    min-height: auto !important;
  }

  body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero > .wrap {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  body.hard-cover-luxury .hc-hero-panel {
    width: 100%;
    max-width: 720px !important;
    justify-self: start;
  }

  body.hard-cover-luxury .hc-cover-card {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  body.hard-cover-luxury .stat-band-inner {
    grid-template-columns: 1fr !important;
  }

  body.hard-cover-luxury .stat-cell:first-child {
    grid-row: auto;
    min-height: 300px;
  }

  body.hard-cover-luxury .hc-thermos-layout,
  body.hard-cover-luxury .hc-bill-note {
    grid-template-columns: 1fr;
  }

  body.hard-cover-luxury .hc-proof-card {
    min-height: 360px;
  }
}

@media (max-width: 700px) {
  body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero {
    padding-block: 94px 44px !important;
  }

  body.hard-cover-luxury .hc-hero-copy {
    gap: 16px;
  }

  body.hard-cover-luxury:not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero .h-display {
    font-size: clamp(4rem, 20vw, 6.4rem) !important;
  }

  body.hard-cover-luxury .hc-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.hard-cover-luxury .hc-hero-actions .btn {
    width: 100%;
  }

  body.hard-cover-luxury .hc-hero-proof,
  body.hard-cover-luxury .hc-mechanism-copy,
  body.hard-cover-luxury .hc-cost-rows,
  body.hard-cover-luxury .hc-proof-plate {
    grid-template-columns: 1fr;
  }

  body.hard-cover-luxury .hc-panel-ledger {
    grid-template-columns: 1fr;
  }

  body.hard-cover-luxury .hc-panel-ledger span:first-child {
    grid-column: auto;
  }

  body.hard-cover-luxury .stat-band {
    padding-block: 64px !important;
  }

  body.hard-cover-luxury .hc-stat-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.hard-cover-luxury .stat-band-inner {
    grid-template-columns: 1fr !important;
    min-height: 0;
  }

  body.hard-cover-luxury .stat-cell {
    grid-template-columns: 1fr;
    min-height: 0;
    row-gap: 10px;
    padding: 24px 22px 28px !important;
  }

  body.hard-cover-luxury .stat-cell:first-child {
    grid-template-columns: 1fr;
    min-height: 270px;
    padding: 28px 22px !important;
  }

  body.hard-cover-luxury .stat-cell:not(:first-child)::after {
    right: 22px;
    left: 22px;
  }

  body.hard-cover-luxury .stat-cell:not(:first-child) .stat-num {
    grid-column: 1;
    grid-row: auto;
    font-size: clamp(3rem, 13vw, 4.2rem) !important;
  }

  body.hard-cover-luxury .stat-cell:first-child .stat-num {
    font-size: clamp(5.4rem, 25vw, 7.7rem) !important;
  }

  body.hard-cover-luxury .stat-cell:not(:first-child) .stat-label,
  body.hard-cover-luxury .stat-cell:not(:first-child) .stat-note {
    grid-column: 1;
    grid-row: auto;
  }

  body.hard-cover-luxury .stat-note {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  body.hard-cover-luxury .hc-cost-plate {
    min-height: 430px;
  }

  body.hard-cover-luxury .hc-thermos-copy .h-2 {
    font-size: clamp(2.6rem, 13vw, 4.6rem);
  }

  body.hard-cover-luxury .hc-proof-card {
    min-height: 340px;
  }

  body.hard-cover-luxury .hc-bill-copy,
  body.hard-cover-luxury .hc-bill-receipt {
    padding: 26px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.hard-cover-luxury .hc-hero-copy > *,
  body.hard-cover-luxury .hc-hero-panel,
  body.hard-cover-luxury .hc-cover-card img,
  body.hard-cover-luxury .hc-mechanism-stack span,
  body.hard-cover-luxury .hc-heat-escape span {
    animation: none !important;
  }

  body.hard-cover-luxury .hc-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.hard-cover-luxury .hc-cover-card {
    transform: none !important;
  }

  body.hard-cover-luxury .stat-band.is-visible::after {
    animation: none !important;
    opacity: 0.35;
    transform: translate3d(0, 0, 0) scaleX(1);
  }
}

/* Models page: use the hard-cover proof ledger language as a full catalog
   system, without touching the front page or individual model pages. */
body.models-ledger-page {
  --models-ink: oklch(15% 0.012 245);
  --models-ink-2: oklch(20% 0.012 245);
  --models-paper: var(--canvas);
  --models-pearl: var(--canvas-2);
  --models-line: var(--hairline);
  --models-steel: var(--ink-3);
  --models-blue: var(--steam);
  --models-amber: var(--amber);
  background: var(--models-paper) !important;
  color: var(--ink) !important;
}

body.models-ledger-page .hero {
  min-height: clamp(720px, 82vh, 900px) !important;
  background: var(--models-paper) !important;
  border-bottom: 1px solid var(--models-line) !important;
}

body.models-ledger-page .hero-content {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.58fr);
  grid-template-areas:
    "title media"
    "sub media"
    "cta media"
    "stats stats";
  align-items: end;
  gap: clamp(22px, 4vw, 56px) clamp(42px, 7vw, 96px);
  padding-top: clamp(130px, 14vw, 188px) !important;
  padding-bottom: clamp(56px, 7vw, 92px) !important;
}

body.models-ledger-page .hero-h1 {
  grid-area: title;
  max-width: 9.4ch;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(5.6rem, 9vw, 10.6rem) !important;
  line-height: 0.88 !important;
}

body.models-ledger-page .hero-h1 em {
  display: block;
  color: var(--steam-deep) !important;
}

body.models-ledger-page .hero-sub {
  grid-area: sub;
  max-width: 58ch !important;
  margin: 0 !important;
  color: var(--ink-2) !important;
}

body.models-ledger-page .hero-cta {
  grid-area: cta;
  justify-self: start;
  margin-top: 4px;
  border: 1px solid var(--ink) !important;
  background: var(--ink) !important;
  color: var(--canvas) !important;
  padding: 14px 22px;
  text-decoration: none !important;
}

body.models-ledger-page .hero-media {
  position: relative !important;
  grid-area: media;
  inset: auto !important;
  z-index: 1 !important;
  align-self: end;
  min-height: clamp(320px, 34vw, 460px);
  border: 1px solid var(--models-line);
  background: var(--models-pearl);
  overflow: hidden;
}

body.models-ledger-page .hero-media::before {
  content: "MODEL FIELD PHOTO";
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  background: color-mix(in oklab, var(--ink) 92%, transparent);
  color: var(--canvas);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1;
  padding: 13px 15px;
}

body.models-ledger-page .hero-media img {
  filter: saturate(0.72) contrast(1.04);
}

body.models-ledger-page .hero-scrim {
  background:
    linear-gradient(180deg, transparent 42%, oklch(12% 0.012 245 / 0.18)),
    linear-gradient(90deg, oklch(12% 0.012 245 / 0.14), transparent 32%) !important;
}

body.models-ledger-page .hero-stats {
  grid-area: stats;
  display: grid !important;
  grid-template-columns: minmax(340px, 0.8fr) minmax(0, 1.2fr) !important;
  gap: 1px !important;
  width: 100%;
  margin-top: clamp(16px, 3vw, 34px) !important;
  padding: 0 !important;
  border: 1px solid color-mix(in oklab, var(--models-line) 80%, var(--ink)) !important;
  background: color-mix(in oklab, var(--canvas) 16%, var(--models-ink)) !important;
  color: var(--canvas);
}

body.models-ledger-page .hero-stats > div {
  display: grid;
  grid-template-columns: minmax(154px, 0.34fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 42px);
  min-width: 0;
  min-height: 118px;
  padding: clamp(22px, 3vw, 34px) clamp(24px, 3vw, 44px);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--models-ink-2) 78%, var(--models-ink)), var(--models-ink)) !important;
}

body.models-ledger-page .hero-stats > div:first-child {
  grid-row: span 3;
  grid-template-columns: 1fr;
  align-content: end;
  min-height: clamp(340px, 34vw, 460px);
  padding: clamp(34px, 4vw, 58px);
  background:
    radial-gradient(circle at 18% 18%, color-mix(in oklab, var(--canvas) 10%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in oklab, var(--models-ink-2) 88%, var(--models-ink)), var(--models-ink)) !important;
}

body.models-ledger-page .hero-stat-val {
  color: var(--canvas) !important;
  font-family: var(--display) !important;
  font-size: clamp(3.1rem, 5vw, 5.8rem) !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 0.9;
}

body.models-ledger-page .hero-stats > div:first-child .hero-stat-val {
  font-size: clamp(6.5rem, 12vw, 12.5rem) !important;
}

body.models-ledger-page .hero-stat-lbl {
  color: color-mix(in oklab, var(--models-amber) 78%, var(--canvas)) !important;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.45;
}

body.models-ledger-page .models-section,
body.models-ledger-page .compare-section {
  background: var(--models-paper) !important;
}

body.models-ledger-page .models-section {
  padding-block: clamp(72px, 9vw, 124px) !important;
}

body.models-ledger-page .section-header {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(300px, 0.34fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: end;
}

body.models-ledger-page .section-header::after {
  content: "MODEL INDEX\A Size first. Proof second. Price last.";
  white-space: pre-line;
  border: 1px solid var(--models-line);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--models-line) 62%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--models-line) 62%, transparent) 1px, transparent 1px),
    var(--models-pearl);
  background-size: 32px 32px;
  padding: clamp(18px, 2.6vw, 32px);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
}

body.models-ledger-page .section-eyebrow,
body.models-ledger-page .compare-section .section-eyebrow {
  color: var(--models-blue) !important;
}

body.models-ledger-page .section-title em {
  color: var(--steam-deep) !important;
}

body.models-ledger-page .model-page-ledger {
  max-width: 1280px;
  margin: 0 auto clamp(28px, 4vw, 54px);
  display: grid;
  grid-template-columns: minmax(320px, 0.74fr) minmax(0, 1fr);
  gap: 1px;
  border: 1px solid var(--models-line);
  background: var(--models-line);
}

body.models-ledger-page .model-page-ledger-main,
body.models-ledger-page .model-page-ledger-rows span {
  background: var(--models-pearl);
}

body.models-ledger-page .model-page-ledger-main {
  padding: clamp(26px, 3vw, 42px);
}

body.models-ledger-page .model-page-ledger-main strong {
  display: block;
  max-width: 22ch;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 4.1rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 0.96;
}

body.models-ledger-page .model-page-ledger-main span {
  display: block;
  max-width: 54ch;
  margin-top: 18px;
  color: var(--ink-2);
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.08rem);
  line-height: 1.55;
}

body.models-ledger-page .model-page-ledger-rows {
  display: grid;
  grid-template-columns: minmax(118px, 0.28fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--models-line);
}

body.models-ledger-page .model-page-ledger-rows span {
  padding: 17px 20px;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}

body.models-ledger-page .model-page-ledger-rows span:nth-child(odd) {
  color: var(--steam-deep);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.models-ledger-page .model-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1px !important;
  background: var(--models-line) !important;
  border-color: var(--models-line) !important;
}

body.models-ledger-page .model-card {
  display: grid !important;
  grid-template-columns: minmax(190px, 0.34fr) minmax(180px, 0.3fr) minmax(260px, 0.62fr) minmax(176px, 0.28fr);
  grid-template-areas:
    "photo series desc price"
    "photo name specs price"
    "photo seats specs price";
  min-height: 236px !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--models-paper) !important;
  color: var(--ink) !important;
}

body.models-ledger-page .model-card:hover,
body.models-ledger-page .model-card:focus-visible {
  background: color-mix(in oklab, var(--models-pearl) 78%, var(--models-paper)) !important;
}

body.models-ledger-page .model-card.is-deluxe {
  grid-column: auto !important;
  background: color-mix(in oklab, var(--models-paper) 84%, var(--models-amber)) !important;
}

body.models-ledger-page .product-photo {
  grid-area: photo;
  width: 100% !important;
  height: 100%;
  min-height: 236px;
  margin: 0 !important;
  border-right: 1px solid var(--models-line);
  border-bottom: 0 !important;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--models-line) 62%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--models-line) 62%, transparent) 1px, transparent 1px),
    var(--models-pearl) !important;
  background-size: 28px 28px;
}

body.models-ledger-page .product-photo img {
  width: min(84%, 250px) !important;
  height: 100% !important;
}

body.models-ledger-page .model-card.is-deluxe .product-photo {
  background:
    linear-gradient(90deg, oklch(96% 0.005 86 / 0.08) 1px, transparent 1px),
    linear-gradient(0deg, oklch(96% 0.005 86 / 0.08) 1px, transparent 1px),
    var(--models-ink) !important;
}

body.models-ledger-page .model-card-top {
  grid-area: series;
  align-items: start !important;
  justify-content: start !important;
  margin: 0 !important;
  padding: clamp(24px, 2.4vw, 34px) clamp(24px, 3vw, 40px) 0;
}

body.models-ledger-page .model-card .name {
  grid-area: name;
  align-self: end;
  margin: 0 !important;
  padding: 0 clamp(24px, 3vw, 40px);
  font-size: clamp(4rem, 6vw, 7rem) !important;
}

body.models-ledger-page .model-card .seats {
  grid-area: seats;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 clamp(24px, 3vw, 40px) clamp(24px, 2.4vw, 34px);
}

body.models-ledger-page .model-card .card-desc {
  grid-area: desc;
  align-self: end;
  max-width: 52ch;
  margin: 0 !important;
  padding: clamp(24px, 2.4vw, 34px) clamp(24px, 3vw, 40px) 0;
  font-size: 0.95rem !important;
}

body.models-ledger-page .model-card .specs {
  grid-area: specs;
  align-self: end;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 0 clamp(24px, 3vw, 40px) clamp(24px, 2.4vw, 34px) !important;
  border-top: 0 !important;
}

body.models-ledger-page .model-card .price-row {
  grid-area: price;
  align-items: end !important;
  margin: 0 !important;
  padding: clamp(24px, 2.4vw, 34px) clamp(24px, 3vw, 40px) !important;
  border-top: 0 !important;
  border-left: 1px solid var(--models-line);
  background: color-mix(in oklab, var(--models-pearl) 68%, transparent);
}

body.models-ledger-page .model-card .price {
  font-size: clamp(1.45rem, 2vw, 2.2rem) !important;
}

body.models-ledger-page .model-card .arrow {
  color: var(--ink) !important;
}

body.models-ledger-page .compare-section {
  padding-block: clamp(78px, 10vw, 132px) !important;
}

body.models-ledger-page .compare-wrap {
  border: 1px solid var(--models-line);
  background: var(--models-pearl);
  padding: clamp(16px, 2vw, 26px);
}

body.models-ledger-page .compare-table th,
body.models-ledger-page .compare-table td {
  background: transparent;
}

body.models-ledger-page .compare-table th.th-deluxe,
body.models-ledger-page .compare-table td.td-deluxe {
  background: color-mix(in oklab, var(--models-amber) 18%, var(--models-pearl));
}

body.models-ledger-page .modal {
  grid-template-columns: minmax(330px, 0.74fr) minmax(500px, 1fr) !important;
  border-color: var(--models-line) !important;
}

body.models-ledger-page .modal-image {
  background: var(--models-ink) !important;
}

body.models-ledger-page .modal-body > div:nth-child(2),
body.models-ledger-page .modal-section,
body.models-ledger-page .modal-spec {
  background: var(--models-pearl) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-content {
  display: block !important;
  padding-right: calc(min(38vw, 520px) + clamp(56px, 8vw, 112px)) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-media {
  position: absolute !important;
  inset: auto clamp(20px, 4vw, 56px) clamp(48px, 8vw, 96px) auto !important;
  display: block !important;
  width: min(38vw, 520px) !important;
  height: clamp(260px, 32vw, 460px) !important;
  min-height: 0 !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-scrim {
  display: block !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats {
  grid-template-columns: minmax(270px, 0.8fr) minmax(0, 1.2fr) !important;
  max-width: min(100%, 790px) !important;
  background: color-mix(in oklab, var(--canvas) 16%, var(--models-ink)) !important;
  border-color: color-mix(in oklab, var(--models-line) 80%, var(--ink)) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div {
  grid-template-columns: minmax(132px, 0.34fr) minmax(0, 1fr) !important;
  grid-column: auto !important;
  min-height: 118px !important;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--models-ink-2) 78%, var(--models-ink)), var(--models-ink)) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:first-child {
  grid-row: span 3 !important;
  grid-template-columns: 1fr !important;
  min-height: clamp(340px, 34vw, 460px) !important;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in oklab, var(--canvas) 10%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in oklab, var(--models-ink-2) 88%, var(--models-ink)), var(--models-ink)) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:not(:first-child) {
  grid-template-columns: 1fr !important;
  align-content: center;
  gap: 10px !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero :is(.hero-stat-val, .hero-stat-lbl) {
  color: var(--canvas) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stat-lbl {
  color: color-mix(in oklab, var(--models-amber) 78%, var(--canvas)) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:not(:first-child) .hero-stat-val {
  font-size: clamp(2.7rem, 4.4vw, 4.8rem) !important;
}

@media (max-width: 1120px) {
  body.models-ledger-page .hero-content,
  body.models-ledger-page .section-header,
  body.models-ledger-page .model-page-ledger {
    grid-template-columns: 1fr;
  }

  body.models-ledger-page .hero-content {
    grid-template-areas:
      "title"
      "sub"
      "cta"
      "media"
      "stats";
  }

  body.models-ledger-page .hero-media {
    min-height: 340px;
  }

  body.models-ledger-page .hero-stats {
    grid-template-columns: 1fr !important;
  }

  body.models-ledger-page .hero-stats > div:first-child {
    grid-row: auto;
    min-height: 260px;
  }

  body.models-ledger-page .model-card {
    grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
    grid-template-areas:
      "photo series"
      "photo name"
      "photo seats"
      "photo desc"
      "photo specs"
      "photo price";
  }

  body.models-ledger-page .model-card .price-row {
    border-left: 0;
    border-top: 1px solid var(--models-line) !important;
  }
}

@media (max-width: 700px) {
  body.models-ledger-page .hero {
    min-height: auto !important;
  }

  body.models-ledger-page .hero-content {
    padding-inline: 20px !important;
    padding-right: 20px !important;
    padding-top: 112px !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.models-ledger-page .hero-h1 {
    font-size: clamp(4.2rem, 18vw, 6.5rem) !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-media {
    display: none !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:first-child {
    grid-row: auto !important;
    min-height: 230px !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:first-child .hero-stat-val {
    font-size: clamp(5rem, 24vw, 7.3rem) !important;
  }

  body.models-ledger-page .models-section,
  body.models-ledger-page .compare-section {
    padding-inline: 20px !important;
  }

  body.models-ledger-page .section-title {
    font-size: clamp(3.4rem, 14vw, 5.3rem) !important;
  }

  body.models-ledger-page .model-page-ledger-rows {
    grid-template-columns: 1fr;
  }

  body.models-ledger-page .model-page-ledger-rows span:nth-child(even) {
    padding-top: 0;
  }

  body.models-ledger-page .model-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "series"
      "name"
      "seats"
      "desc"
      "specs"
      "price";
  }

  body.models-ledger-page .product-photo {
    min-height: 236px;
    border-right: 0;
    border-bottom: 1px solid var(--models-line) !important;
  }

  body.models-ledger-page .model-card .name {
    font-size: clamp(4rem, 20vw, 6.4rem) !important;
  }

  body.models-ledger-page .model-card .specs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.models-ledger-page .compare-wrap {
    margin-inline: -20px;
    border-inline: 0;
  }

  body.models-ledger-page .modal {
    grid-template-columns: 1fr !important;
  }
}

/* Models page polish pass: keep the mechanical proof language, but make the
   page behave like a warm buying catalog instead of a wall of specs. */
body.models-ledger-page {
  --models-card: oklch(98% 0.006 90);
  --models-quiet: oklch(94% 0.006 90);
  --models-rail: oklch(17% 0.012 245);
  --models-rail-2: oklch(22% 0.012 245);
  --models-shadow: oklch(22% 0.01 245 / 0.09);
}

body.models-ledger-page .hero {
  min-height: auto !important;
  padding: clamp(124px, 12vw, 170px) clamp(20px, 4vw, 56px) clamp(64px, 8vw, 104px) !important;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--models-line) 62%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--models-line) 56%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 86% 18%, color-mix(in oklab, var(--models-amber) 12%, transparent), transparent 26%),
    var(--models-paper) !important;
  background-size: 48px 48px, 48px 48px, auto, auto !important;
  border-bottom: 1px solid var(--models-line) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-content {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.62fr) !important;
  grid-template-areas:
    "title media"
    "sub media"
    "cta media"
    "stats stats" !important;
  align-items: end !important;
  gap: clamp(22px, 3vw, 42px) clamp(38px, 6vw, 88px) !important;
  width: min(100%, 1280px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.models-ledger-page .hero-h1 {
  max-width: 10.5ch !important;
  font-size: clamp(4.7rem, 8.2vw, 9.2rem) !important;
  line-height: 0.89 !important;
  text-wrap: balance;
}

body.models-ledger-page .hero-h1 em {
  color: var(--steam-deep) !important;
}

body.models-ledger-page .hero-sub {
  max-width: 58ch !important;
  font-size: clamp(1rem, 0.5vw + 0.92rem, 1.24rem) !important;
  line-height: 1.55 !important;
  color: var(--ink-2) !important;
}

body.models-ledger-page .hero-cta {
  min-height: 48px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: fit-content;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease, color 220ms ease !important;
}

body.models-ledger-page .hero-cta:hover {
  transform: translateY(-2px);
  background: var(--steam-deep) !important;
  border-color: var(--steam-deep) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-media {
  grid-area: media !important;
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: clamp(390px, 38vw, 540px) !important;
  min-height: 0 !important;
  align-self: stretch !important;
  border: 1px solid var(--models-line) !important;
  background: var(--models-quiet) !important;
  overflow: hidden !important;
}

body.models-ledger-page .hero-media::before {
  content: "LINEUP FIELD PHOTO";
  left: 18px;
  bottom: 18px;
  color: var(--canvas);
  background: color-mix(in oklab, var(--models-rail) 92%, transparent);
}

body.models-ledger-page .hero-media::after {
  content: "E1\A E2\A E3\A E4\A E5\A E6";
  white-space: pre-line;
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  color: color-mix(in oklab, var(--canvas) 84%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.8;
  text-align: right;
}

body.models-ledger-page .hero-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(0.78) contrast(1.02) brightness(0.92) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-scrim {
  display: block !important;
  background:
    linear-gradient(180deg, transparent 42%, oklch(13% 0.01 245 / 0.44)),
    linear-gradient(90deg, oklch(13% 0.01 245 / 0.2), transparent 58%) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats {
  grid-area: stats !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: none !important;
  width: 100% !important;
  margin-top: clamp(14px, 2vw, 26px) !important;
  gap: 1px !important;
  border: 1px solid color-mix(in oklab, var(--models-line) 70%, var(--ink)) !important;
  background: color-mix(in oklab, var(--models-line) 70%, var(--ink)) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div,
body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:first-child,
body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:not(:first-child) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-row: auto !important;
  align-content: end !important;
  min-height: 138px !important;
  padding: clamp(22px, 2.4vw, 34px) !important;
  gap: 14px !important;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--models-rail-2) 72%, var(--models-rail)), var(--models-rail)) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stat-val,
body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:first-child .hero-stat-val,
body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:not(:first-child) .hero-stat-val {
  color: var(--canvas) !important;
  font-size: clamp(2.35rem, 3.8vw, 4.9rem) !important;
  line-height: 0.9 !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stat-lbl {
  color: color-mix(in oklab, var(--models-amber) 72%, var(--canvas)) !important;
  max-width: 22ch;
}

body.models-ledger-page .models-section {
  padding: clamp(68px, 8vw, 112px) clamp(20px, 4vw, 56px) clamp(78px, 9vw, 124px) !important;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--models-line) 42%, transparent) 1px, transparent 1px),
    var(--models-paper) !important;
  background-size: 48px 48px !important;
}

body.models-ledger-page .section-header {
  width: min(100%, 1280px);
  margin: 0 auto clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(260px, 0.28fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
}

body.models-ledger-page .section-header > .section-eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 14px;
}

body.models-ledger-page .section-header > .section-title {
  grid-column: 1;
  grid-row: 2;
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3.7rem, 6.4vw, 7rem) !important;
  line-height: 0.92 !important;
  text-wrap: balance;
}

body.models-ledger-page .section-header::after {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  content: "CATALOG NOTE\A Start with seats. Then footprint. Then power.";
  padding: clamp(18px, 2vw, 26px);
  min-height: 132px;
  display: grid;
  align-content: end;
  border: 1px solid var(--models-line);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--models-line) 62%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--models-line) 62%, transparent) 1px, transparent 1px),
    var(--models-card);
  background-size: 28px 28px;
}

body.models-ledger-page .model-page-ledger {
  width: min(100%, 1280px);
  margin: 0 auto clamp(24px, 3vw, 40px);
  grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1fr);
  border: 1px solid var(--models-line);
  background: var(--models-line);
}

body.models-ledger-page .model-page-ledger-main {
  padding: clamp(22px, 2.4vw, 34px);
}

body.models-ledger-page .model-page-ledger-main strong {
  max-width: 26ch;
  font-size: clamp(1.7rem, 2vw, 2.55rem);
  line-height: 1.02;
}

body.models-ledger-page .model-page-ledger-main span {
  max-width: 58ch;
  margin-top: 14px;
  font-size: 0.98rem;
}

body.models-ledger-page .model-page-ledger-rows span {
  padding: 14px 18px;
}

body.models-ledger-page .model-list {
  width: min(100%, 1280px);
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.6vw, 22px) !important;
  background: transparent !important;
  border: 0 !important;
}

body.models-ledger-page .model-card,
body.models-ledger-page .model-card.is-deluxe {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "photo"
    "series"
    "name"
    "seats"
    "desc"
    "specs"
    "price" !important;
  min-height: auto !important;
  overflow: hidden;
  border: 1px solid var(--models-line) !important;
  background: var(--models-card) !important;
  color: var(--ink) !important;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, background 240ms ease, box-shadow 240ms ease !important;
}

body.models-ledger-page .model-card:hover,
body.models-ledger-page .model-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--steam-deep) 44%, var(--models-line)) !important;
  background: color-mix(in oklab, var(--models-card) 92%, var(--steam) 8%) !important;
  box-shadow: 0 18px 40px var(--models-shadow);
  outline: none;
}

body.models-ledger-page .model-card:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--steam) 34%, transparent), 0 18px 40px var(--models-shadow);
}

body.models-ledger-page .product-photo {
  grid-area: photo;
  width: 100% !important;
  height: clamp(230px, 23vw, 310px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--models-line) !important;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--models-line) 56%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--models-line) 56%, transparent) 1px, transparent 1px),
    color-mix(in oklab, var(--models-quiet) 88%, var(--canvas)) !important;
  background-size: 28px 28px;
}

body.models-ledger-page .product-photo img {
  width: min(88%, 310px) !important;
  height: 92% !important;
  object-fit: contain !important;
  filter: saturate(0.94) contrast(1.02) !important;
}

body.models-ledger-page .model-card.is-deluxe {
  grid-column: span 3 !important;
  grid-template-columns: minmax(320px, 0.68fr) minmax(0, 1fr) minmax(240px, 0.34fr) !important;
  grid-template-areas:
    "photo series price"
    "photo name price"
    "photo seats price"
    "photo desc price"
    "photo specs price" !important;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--models-amber) 12%, var(--models-card)), var(--models-card) 48%) !important;
}

body.models-ledger-page .model-card.is-deluxe .product-photo {
  height: 100% !important;
  min-height: 360px !important;
  border-bottom: 0 !important;
  border-right: 1px solid var(--models-line) !important;
  background:
    linear-gradient(90deg, oklch(96% 0.005 86 / 0.12) 1px, transparent 1px),
    linear-gradient(0deg, oklch(96% 0.005 86 / 0.12) 1px, transparent 1px),
    var(--models-rail) !important;
}

body.models-ledger-page .model-card.is-deluxe .product-photo img {
  width: min(92%, 520px) !important;
  height: 92% !important;
}

body.models-ledger-page .model-card-top {
  grid-area: series;
  margin: 0 !important;
  padding: clamp(20px, 2vw, 28px) clamp(22px, 2.4vw, 30px) 0 !important;
}

body.models-ledger-page .model-card .name {
  grid-area: name;
  align-self: end;
  margin: 0 !important;
  padding: 8px clamp(22px, 2.4vw, 30px) 0 !important;
  font-size: clamp(4rem, 5.2vw, 6.5rem) !important;
  line-height: 0.86 !important;
}

body.models-ledger-page .model-card .name span {
  display: inline-block;
  margin-left: 0.16em;
  color: var(--steam-deep);
  font-size: 0.46em;
  vertical-align: baseline;
}

body.models-ledger-page .model-card .seats {
  grid-area: seats;
  margin: 0 !important;
  padding: 12px clamp(22px, 2.4vw, 30px) 0 !important;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.45;
}

body.models-ledger-page .model-card .card-desc {
  grid-area: desc;
  align-self: start;
  max-width: 54ch;
  margin: 0 !important;
  padding: 18px clamp(22px, 2.4vw, 30px) 0 !important;
  color: var(--ink-2);
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}

body.models-ledger-page .model-card .specs {
  grid-area: specs;
  align-self: end;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px) 0 !important;
  padding: 0 !important;
  border: 1px solid var(--models-line) !important;
  background: var(--models-line) !important;
}

body.models-ledger-page .model-card .specs > div {
  min-width: 0;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--models-card) 88%, var(--models-quiet)) !important;
}

body.models-ledger-page .model-card .price-row {
  grid-area: price;
  align-items: end !important;
  margin: clamp(22px, 2.4vw, 30px) 0 0 !important;
  padding: clamp(18px, 2vw, 26px) clamp(22px, 2.4vw, 30px) !important;
  border-left: 0 !important;
  border-top: 1px solid var(--models-line) !important;
  background: color-mix(in oklab, var(--models-quiet) 76%, transparent) !important;
}

body.models-ledger-page .model-card .price {
  font-size: clamp(1.8rem, 2.4vw, 2.65rem) !important;
  line-height: 0.95;
}

body.models-ledger-page .model-card .arrow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--models-line);
  background: var(--models-card);
  color: var(--ink) !important;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease, color 220ms ease;
}

body.models-ledger-page .model-card:hover .arrow,
body.models-ledger-page .model-card:focus-visible .arrow {
  transform: translateX(3px);
  background: var(--ink);
  color: var(--canvas) !important;
}

body.models-ledger-page .compare-section {
  padding: clamp(72px, 9vw, 122px) clamp(20px, 4vw, 56px) !important;
  background: var(--models-quiet) !important;
}

body.models-ledger-page .compare-wrap {
  width: min(100%, 1280px);
  margin: 0 auto;
  border: 1px solid var(--models-line);
  background: var(--models-card);
  padding: clamp(12px, 1.6vw, 22px);
  overflow-x: auto;
}

body.models-ledger-page .compare-table {
  min-width: 920px;
}

body.models-ledger-page .compare-table th,
body.models-ledger-page .compare-table td {
  background: var(--models-card);
  border-color: var(--models-line);
}

body.models-ledger-page .compare-table th.th-deluxe,
body.models-ledger-page .compare-table td.td-deluxe {
  background: color-mix(in oklab, var(--models-amber) 13%, var(--models-card));
}

body.models-ledger-page .modal {
  border: 1px solid var(--models-line) !important;
  background: var(--models-card) !important;
  box-shadow: 0 28px 80px oklch(10% 0.012 245 / 0.28) !important;
}

body.models-ledger-page .modal-image {
  background:
    linear-gradient(90deg, oklch(96% 0.005 86 / 0.08) 1px, transparent 1px),
    linear-gradient(0deg, oklch(96% 0.005 86 / 0.08) 1px, transparent 1px),
    var(--models-rail) !important;
  background-size: 28px 28px;
}

body.models-ledger-page .modal-body > div:nth-child(2),
body.models-ledger-page .modal-section,
body.models-ledger-page .modal-spec {
  border: 1px solid var(--models-line) !important;
  background: color-mix(in oklab, var(--models-card) 78%, var(--models-quiet)) !important;
}

@media (max-width: 1180px) {
  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-content {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "sub"
      "cta"
      "media"
      "stats" !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-media {
    height: clamp(320px, 48vw, 480px) !important;
  }

  body.models-ledger-page .model-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.models-ledger-page .model-card.is-deluxe {
    grid-column: span 2 !important;
  }
}

@media (max-width: 760px) {
  body.models-ledger-page .hero {
    padding: 110px 18px 58px !important;
  }

  body.models-ledger-page .hero-h1 {
    font-size: clamp(3.5rem, 16vw, 5.7rem) !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-media {
    display: block !important;
    height: 260px !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div,
  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:first-child,
  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:not(:first-child) {
    min-height: 116px !important;
    padding: 18px !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stat-val,
  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:first-child .hero-stat-val,
  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:not(:first-child) .hero-stat-val {
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
  }

  body.models-ledger-page .section-header {
    grid-template-columns: 1fr;
  }

  body.models-ledger-page .section-header::after {
    grid-column: 1;
    grid-row: 3;
    min-height: 96px;
  }

  body.models-ledger-page .section-header > .section-title {
    font-size: clamp(3.2rem, 13vw, 4.8rem) !important;
  }

  body.models-ledger-page .models-section {
    padding-block: 104px 48px !important;
  }

  body.models-ledger-page .model-page-ledger {
    grid-template-columns: 1fr;
  }

  body.models-ledger-page .model-list,
  body.models-ledger-page .model-card.is-deluxe {
    grid-template-columns: 1fr !important;
  }

  body.models-ledger-page .model-card.is-deluxe {
    grid-column: auto !important;
    grid-template-areas:
      "photo"
      "series"
      "name"
      "seats"
      "desc"
      "specs"
      "price" !important;
  }

  body.models-ledger-page .product-photo,
  body.models-ledger-page .model-card.is-deluxe .product-photo {
    height: 210px !important;
    min-height: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--models-line) !important;
  }

  body.models-ledger-page .product-photo img {
    width: min(80%, 230px) !important;
  }

  body.models-ledger-page .model-card-top {
    padding: 18px 20px 0 !important;
  }

  body.models-ledger-page .model-card .name {
    padding-inline: 20px !important;
    font-size: clamp(3.35rem, 14vw, 4.7rem) !important;
  }

  body.models-ledger-page .model-card .seats,
  body.models-ledger-page .model-card .card-desc {
    padding-inline: 20px !important;
  }

  body.models-ledger-page .model-card .card-desc {
    padding-top: 12px !important;
  }

  body.models-ledger-page .model-card .specs,
  body.models-ledger-page .model-card .price-row {
    margin-top: 16px !important;
    margin-inline: 20px !important;
  }

  body.models-ledger-page .model-card .price-row {
    margin-inline: 0 !important;
    padding: 18px 20px !important;
  }

  body.models-ledger-page .modal {
    grid-template-columns: 1fr !important;
  }
}

/* Final Models hero layout correction: section owns the copy/media split because
   the photo is a sibling of .hero-content in this page template. */
body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero {
  display: grid !important;
  grid-template-columns:
    minmax(20px, 1fr)
    minmax(0, 690px)
    minmax(360px, 520px)
    minmax(20px, 1fr) !important;
  grid-template-areas: ". copy media ." !important;
  column-gap: clamp(36px, 6vw, 88px) !important;
  align-items: end !important;
  padding-inline: 0 !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-content {
  grid-area: copy !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "title"
    "sub"
    "cta"
    "stats" !important;
  gap: clamp(18px, 2.4vw, 28px) !important;
  width: 100% !important;
  max-width: none !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-h1 {
  max-width: 13ch !important;
  font-size: clamp(4.4rem, 7.25vw, 8.2rem) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-h1 em {
  color: var(--steam-deep) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-media {
  grid-area: media !important;
  width: 100% !important;
  height: clamp(390px, 38vw, 520px) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: clamp(8px, 1.4vw, 18px) !important;
}

body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div,
body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:first-child,
body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:not(:first-child) {
  min-height: 128px !important;
  padding: clamp(20px, 2vw, 28px) !important;
}

@media (max-width: 1180px) {
  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero {
    grid-template-columns: minmax(18px, 1fr) minmax(0, 860px) minmax(18px, 1fr) !important;
    grid-template-areas:
      ". copy ."
      ". media ." !important;
    row-gap: clamp(26px, 4vw, 42px) !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-content {
    grid-template-areas:
      "title"
      "sub"
      "cta"
      "stats" !important;
  }
}

@media (max-width: 760px) {
  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero {
    grid-template-columns: 18px minmax(0, 1fr) 18px !important;
    grid-template-areas:
      ". copy ."
      ". media ." !important;
    padding-top: 104px !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-media {
    height: 250px !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats {
    grid-template-columns: 1fr !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div,
  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:first-child,
  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:not(:first-child) {
    min-height: 92px !important;
    padding: 18px 20px !important;
  }

  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stat-val,
  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:first-child .hero-stat-val,
  body.models-ledger-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) section.hero .hero-stats > div:not(:first-child) .hero-stat-val {
    font-size: clamp(2.05rem, 10vw, 3.1rem) !important;
  }
}

/* No-hero catalog top: the Models page should start like a chooser, not a
   second homepage. */
body.models-ledger-page .models-section {
  padding-top: clamp(88px, 8vw, 120px) !important;
}

body.models-ledger-page .section-header {
  margin-bottom: clamp(18px, 2.6vw, 34px);
}

body.models-ledger-page .section-header > .section-title {
  max-width: 15ch;
  font-size: clamp(3rem, 4.9vw, 5.6rem) !important;
  line-height: 0.94 !important;
}

body.models-ledger-page .section-header::after {
  min-height: 104px;
  padding: clamp(14px, 1.7vw, 22px);
}

body.models-ledger-page .model-page-ledger {
  margin-bottom: clamp(18px, 2.4vw, 30px);
}

body.models-ledger-page .model-page-ledger-main {
  padding: clamp(18px, 2vw, 28px);
}

body.models-ledger-page .model-page-ledger-main strong {
  font-size: clamp(1.45rem, 1.6vw, 2rem);
  max-width: 30ch;
}

body.models-ledger-page .model-page-ledger-main span {
  margin-top: 10px;
  font-size: 0.95rem;
}

body.models-ledger-page .model-page-ledger-rows span {
  padding: 11px 16px;
}

@media (max-width: 760px) {
  body.models-ledger-page .models-section {
    padding-top: 68px !important;
  }

  body.models-ledger-page .section-header > .section-title {
    font-size: clamp(2.55rem, 11vw, 3.8rem) !important;
  }

  body.models-ledger-page .section-header::after {
    min-height: 76px;
  }
}

/* Build pages: carry the hard-cover proof-ledger direction across the whole
   Build section while leaving the hard-cover prototype itself intact. */
body.build-page:not(.hard-cover-luxury) {
  --build-paper: oklch(96.5% 0.008 86);
  --build-pearl: oklch(99% 0.004 92);
  --build-fog: oklch(92.5% 0.01 86);
  --build-ink: oklch(17% 0.015 245);
  --build-ink-2: oklch(28% 0.014 245);
  --build-muted: oklch(46% 0.012 245);
  --build-line: oklch(78% 0.01 86);
  --build-deep-line: oklch(31% 0.012 245);
  --build-steel: oklch(55% 0.045 235);
  --build-blue: oklch(58% 0.13 240);
  --build-amber: oklch(70% 0.13 76);
  --build-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--build-paper) !important;
  color: var(--build-ink) !important;
}

body.build-page:not(.hard-cover-luxury) .page-hero {
  min-height: clamp(660px, 82vh, 880px) !important;
  padding-block: clamp(118px, 12vw, 172px) clamp(56px, 7vw, 96px) !important;
  background:
    linear-gradient(118deg, var(--build-pearl) 0%, var(--build-paper) 46%, color-mix(in oklab, var(--build-fog) 72%, var(--build-paper)) 100%) !important;
  border-bottom-color: color-mix(in oklab, var(--build-line) 82%, var(--build-ink)) !important;
}

body.build-page:not(.hard-cover-luxury) .page-hero::before {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--build-line) 54%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--build-line) 54%, transparent) 1px, transparent 1px) !important;
  background-size: 54px 54px !important;
  opacity: 0.52 !important;
}

body.build-page:not(.hard-cover-luxury) .page-hero::after {
  display: none !important;
}

body.build-page:not(.hard-cover-luxury) .page-hero > .wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 0.82fr) minmax(340px, 0.52fr) !important;
  grid-template-areas:
    "eyebrow panel"
    "title panel"
    "intro panel"
    "actions panel";
  grid-template-rows: auto auto auto auto;
  align-items: end;
  align-content: center;
  gap: clamp(22px, 4vw, 56px) clamp(40px, 7vw, 102px) !important;
  max-width: 1480px !important;
  padding-inline: clamp(20px, 4vw, 56px) !important;
}

body.build-page:not(.hard-cover-luxury):not(:has(.home-hero)):not(:has(.lifestyle-hero)) .page-hero:not(:has(.page-hero-aside)) > .wrap,
body.build-page:not(.hard-cover-luxury) .page-hero > .wrap {
  padding-left: clamp(20px, 4vw, 56px) !important;
  padding-right: clamp(20px, 4vw, 56px) !important;
}

body.build-page:not(.hard-cover-luxury) .page-hero .eyebrow {
  grid-area: eyebrow;
  color: var(--build-blue) !important;
}

body.build-page:not(.hard-cover-luxury) .page-hero .h-display {
  grid-area: title;
  max-width: 9.6ch !important;
  margin: 0 !important;
  color: var(--build-ink) !important;
  font-size: clamp(4.8rem, 8.5vw, 10rem) !important;
  font-weight: 820 !important;
  line-height: 0.88 !important;
  letter-spacing: 0 !important;
}

body.build-page:not(.hard-cover-luxury) .page-hero .intro {
  grid-area: intro;
  max-width: 58ch !important;
  margin: 0 !important;
  color: var(--build-ink-2) !important;
  font-size: clamp(1.05rem, 0.55vw + 0.98rem, 1.32rem) !important;
  line-height: 1.56 !important;
}

body.build-page:not(.hard-cover-luxury) .page-hero > .wrap > :not(.build-hero-panel) {
  max-width: min(62ch, 100%) !important;
}

body.build-page:not(.hard-cover-luxury) .page-hero > .wrap > .h-display {
  max-width: 9.6ch !important;
}

body.build-page:not(.hard-cover-luxury) .build-hero-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(4px, 1vw, 12px);
}

body.build-page:not(.hard-cover-luxury) .build-hero-actions .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 15px 22px !important;
  border: 1px solid var(--build-ink) !important;
  border-radius: 0 !important;
  font-family: var(--mono);
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    transform 220ms var(--build-ease),
    background-color 220ms var(--build-ease),
    color 220ms var(--build-ease),
    opacity 220ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) .build-hero-actions .btn-primary {
  background: var(--build-ink) !important;
  color: var(--build-paper) !important;
}

body.build-page:not(.hard-cover-luxury) .build-hero-actions .btn-outline {
  background: color-mix(in oklab, var(--build-pearl) 72%, transparent) !important;
  color: var(--build-ink) !important;
}

body.build-page:not(.hard-cover-luxury) .build-hero-actions .btn:hover,
body.build-page:not(.hard-cover-luxury) .build-hero-actions .btn:focus-visible {
  transform: translate3d(0, -2px, 0);
}

body.build-page:not(.hard-cover-luxury) .build-hero-panel {
  grid-area: panel;
  justify-self: stretch;
  align-self: center;
  display: grid;
  grid-template-rows: auto minmax(170px, 1fr) auto auto auto;
  gap: clamp(18px, 2.4vw, 28px);
  min-width: 0;
  min-height: clamp(430px, 39vw, 600px);
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid color-mix(in oklab, var(--build-line) 64%, var(--build-ink));
  background:
    radial-gradient(circle at 16% 12%, color-mix(in oklab, var(--build-pearl) 10%, transparent), transparent 28%),
    linear-gradient(180deg, oklch(22% 0.012 245), oklch(14% 0.015 245));
  box-shadow:
    0 34px 90px oklch(15% 0.012 245 / 0.2),
    inset 0 1px 0 color-mix(in oklab, var(--build-pearl) 12%, transparent);
  color: var(--build-paper);
  transform: translate3d(var(--build-panel-x, 0), var(--build-panel-y, 0), 0);
  transition: transform 380ms var(--build-ease);
  animation: build-panel-in 760ms var(--build-ease) 120ms both;
  contain: paint;
}

body.build-page:not(.hard-cover-luxury) .build-panel-kicker {
  color: color-mix(in oklab, var(--build-amber) 84%, var(--build-paper));
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.build-page:not(.hard-cover-luxury) .build-panel-title {
  color: var(--build-paper);
  font-family: var(--display);
  font-size: clamp(2rem, 3.1vw, 3.55rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.95;
}

body.build-page:not(.hard-cover-luxury) .build-hero-panel > p {
  max-width: 42ch;
  margin: 0;
  color: oklch(82% 0.012 90);
  font-size: 0.98rem;
  line-height: 1.58;
}

body.build-page:not(.hard-cover-luxury) .build-schematic {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  border: 1px solid var(--build-deep-line);
  background:
    linear-gradient(90deg, oklch(98% 0.004 90 / 0.07) 1px, transparent 1px),
    linear-gradient(0deg, oklch(98% 0.004 90 / 0.07) 1px, transparent 1px),
    oklch(13% 0.014 245);
  background-size: 30px 30px;
}

body.build-page:not(.hard-cover-luxury) .build-schematic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, oklch(72% 0.13 76 / 0.16), transparent);
  opacity: 0;
  transform: translate3d(-80%, 0, 0);
  animation: build-ledger-scan 4.6s var(--build-ease) 1s infinite;
}

body.build-page:not(.hard-cover-luxury) .build-schematic::after {
  content: "FACTORY SECTION";
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: oklch(72% 0.018 90);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.build-page:not(.hard-cover-luxury) .build-schematic span {
  position: absolute;
  left: 13%;
  right: 13%;
  height: 12px;
  border: 1px solid color-mix(in oklab, var(--build-amber) 46%, var(--build-deep-line));
  background: linear-gradient(90deg, oklch(72% 0.13 76 / 0.18), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: build-layer-draw 780ms var(--build-ease) both;
}

body.build-page:not(.hard-cover-luxury) .build-schematic span:nth-child(1) {
  top: 42px;
  animation-delay: 220ms;
}

body.build-page:not(.hard-cover-luxury) .build-schematic span:nth-child(2) {
  top: 74px;
  left: 18%;
  animation-delay: 330ms;
}

body.build-page:not(.hard-cover-luxury) .build-schematic span:nth-child(3) {
  top: 106px;
  right: 20%;
  animation-delay: 440ms;
}

body.build-page:not(.hard-cover-luxury) .build-schematic span:nth-child(4) {
  top: 138px;
  left: 22%;
  animation-delay: 550ms;
}

body.build-page:not(.hard-cover-luxury) .build-panel-rows {
  display: grid;
  grid-template-columns: minmax(112px, 0.46fr) minmax(0, 1fr);
  gap: 1px;
  border: 1px solid var(--build-deep-line);
  background: var(--build-deep-line);
}

body.build-page:not(.hard-cover-luxury) .build-panel-rows span,
body.build-page:not(.hard-cover-luxury) .build-panel-rows strong {
  min-width: 0;
  padding: 13px 14px;
  background: oklch(12% 0.014 245);
  line-height: 1.2;
}

body.build-page:not(.hard-cover-luxury) .build-panel-rows span {
  color: color-mix(in oklab, var(--build-blue) 72%, var(--build-paper));
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.build-page:not(.hard-cover-luxury) .build-panel-rows strong {
  color: var(--build-paper);
  font-family: var(--display);
  font-size: clamp(1.08rem, 1.4vw, 1.5rem);
  font-weight: 780;
  letter-spacing: 0;
}

body.build-page:not(.hard-cover-luxury) .stat-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 132px) !important;
  background: oklch(12.5% 0.016 245) !important;
  border-bottom-color: color-mix(in oklab, var(--build-line) 45%, var(--build-ink)) !important;
  color: var(--build-paper);
}

body.build-page:not(.hard-cover-luxury) .stat-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, oklch(98% 0.004 90 / 0.055) 1px, transparent 1px),
    linear-gradient(0deg, oklch(98% 0.004 90 / 0.055) 1px, transparent 1px);
  background-size: 58px 58px;
}

body.build-page:not(.hard-cover-luxury) .stat-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(108px, 14vw, 178px);
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--build-amber), transparent);
  opacity: 0.6;
  transform: scaleX(0);
  transform-origin: left center;
}

body.build-page:not(.hard-cover-luxury) .stat-band.is-visible::after {
  animation: build-line-open 880ms var(--build-ease) 180ms both;
}

body.build-page:not(.hard-cover-luxury) .stat-band .wrap {
  display: grid;
  gap: clamp(24px, 4vw, 42px);
}

body.build-page:not(.hard-cover-luxury) .build-stat-header {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 0.72fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: end;
}

body.build-page:not(.hard-cover-luxury) .build-stat-header .eyebrow {
  margin: 0;
  color: var(--build-blue) !important;
}

body.build-page:not(.hard-cover-luxury) .build-stat-header p:last-child {
  max-width: 52ch;
  margin: 0;
  color: oklch(82% 0.012 90);
  font-size: clamp(1.35rem, 2vw, 2.35rem);
  font-weight: 720;
  line-height: 1.22;
}

body.build-page:not(.hard-cover-luxury) .stat-band-inner {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 1px !important;
  border: 1px solid var(--build-deep-line) !important;
  background: var(--build-deep-line) !important;
}

body.build-page:not(.hard-cover-luxury) .stat-cell {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(250px, 22vw, 335px);
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 3.4vw, 50px) !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in oklab, var(--build-pearl) 8%, transparent), transparent 34%),
    linear-gradient(180deg, oklch(21% 0.012 245), oklch(13.5% 0.015 245)) !important;
  color: var(--build-paper);
  transition:
    transform 260ms var(--build-ease),
    background-color 260ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) .stat-cell::before {
  content: "";
  position: absolute;
  left: clamp(28px, 3.4vw, 50px);
  right: clamp(28px, 3.4vw, 50px);
  bottom: clamp(24px, 3vw, 42px);
  height: 1px;
  background: linear-gradient(90deg, var(--build-amber), transparent);
  opacity: 0.82;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--build-ease) 140ms;
}

body.build-page:not(.hard-cover-luxury) .stat-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color 260ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) .stat-cell.is-visible::before {
  transform: scaleX(1);
}

body.build-page:not(.hard-cover-luxury) .stat-cell:hover {
  transform: translate3d(0, -4px, 0);
}

body.build-page:not(.hard-cover-luxury) .stat-cell:hover::after {
  border-color: color-mix(in oklab, var(--build-amber) 52%, transparent);
}

body.build-page:not(.hard-cover-luxury) .stat-num {
  color: var(--build-paper) !important;
  font-family: var(--display) !important;
  font-size: clamp(4.6rem, 7vw, 8.2rem) !important;
  font-weight: 840 !important;
  letter-spacing: 0 !important;
  line-height: 0.84 !important;
}

body.build-page:not(.hard-cover-luxury) .stat-label {
  margin-top: clamp(24px, 2.8vw, 38px);
  color: color-mix(in oklab, var(--build-amber) 82%, var(--build-paper)) !important;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1.42;
  text-transform: uppercase;
}

body.build-page:not(.hard-cover-luxury) .stat-note {
  max-width: 29ch;
  margin: clamp(20px, 2vw, 28px) 0 0;
  color: oklch(78% 0.012 90);
  font-size: clamp(1rem, 0.45vw + 0.9rem, 1.18rem);
  font-weight: 650;
  line-height: 1.45;
}

body.build-page:not(.hard-cover-luxury) .section {
  padding-block: clamp(78px, 10vw, 142px) !important;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--build-line) 44%, transparent) 1px, transparent 1px),
    var(--build-paper) !important;
  background-size: 54px 54px !important;
  border-bottom-color: var(--build-line) !important;
}

body.build-page:not(.hard-cover-luxury) .section:nth-of-type(even) {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--build-line) 38%, transparent) 1px, transparent 1px),
    color-mix(in oklab, var(--build-fog) 52%, var(--build-paper)) !important;
  background-size: 54px 54px !important;
}

body.build-page:not(.hard-cover-luxury) .section .wrap {
  position: relative;
}

body.build-page:not(.hard-cover-luxury) .section .eyebrow,
body.build-page:not(.hard-cover-luxury) .cta-strip .eyebrow,
body.build-page:not(.hard-cover-luxury) .feature-eyebrow {
  color: var(--build-blue) !important;
}

body.build-page:not(.hard-cover-luxury) .h-2,
body.build-page:not(.hard-cover-luxury) .h-3,
body.build-page:not(.hard-cover-luxury) .feature-title,
body.build-page:not(.hard-cover-luxury) .step-title,
body.build-page:not(.hard-cover-luxury) .power-title,
body.build-page:not(.hard-cover-luxury) .loss-title,
body.build-page:not(.hard-cover-luxury) .mech-title,
body.build-page:not(.hard-cover-luxury) .routine-title,
body.build-page:not(.hard-cover-luxury) .product-name,
body.build-page:not(.hard-cover-luxury) .help-title,
body.build-page:not(.hard-cover-luxury) .coverage-title {
  color: var(--build-ink) !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

body.build-page:not(.hard-cover-luxury) .body-lg,
body.build-page:not(.hard-cover-luxury) .feature-desc,
body.build-page:not(.hard-cover-luxury) .step-body,
body.build-page:not(.hard-cover-luxury) .power-body,
body.build-page:not(.hard-cover-luxury) .power-list,
body.build-page:not(.hard-cover-luxury) .power-note,
body.build-page:not(.hard-cover-luxury) .loss-body,
body.build-page:not(.hard-cover-luxury) .mech-body,
body.build-page:not(.hard-cover-luxury) .routine-body,
body.build-page:not(.hard-cover-luxury) .product-desc,
body.build-page:not(.hard-cover-luxury) .help-body,
body.build-page:not(.hard-cover-luxury) .coverage-body,
body.build-page:not(.hard-cover-luxury) .legal-block p,
body.build-page:not(.hard-cover-luxury) .notice-box p,
body.build-page:not(.hard-cover-luxury) .testi-quote {
  color: var(--build-ink-2) !important;
}

body.build-page:not(.hard-cover-luxury) .split {
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 0.54fr) !important;
  align-items: center !important;
  gap: clamp(34px, 6vw, 94px) !important;
}

body.build-page:not(.hard-cover-luxury) .split-img,
body.build-page:not(.hard-cover-luxury) .video-wrap {
  overflow: hidden;
  border: 1px solid var(--build-line) !important;
  background:
    repeating-linear-gradient(135deg, transparent 0 32px, color-mix(in oklab, var(--build-line) 72%, transparent) 32px 33px),
    var(--build-pearl) !important;
}

body.build-page:not(.hard-cover-luxury) .split-img img {
  filter: saturate(0.76) contrast(1.04);
  transition: transform 760ms var(--build-ease), filter 760ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) .split-img:hover img {
  transform: scale(1.035);
  filter: saturate(0.9) contrast(1.06);
}

body.build-page:not(.hard-cover-luxury) .feature-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 1px !important;
  border: 1px solid var(--build-line) !important;
  background: var(--build-line) !important;
}

body.build-page:not(.hard-cover-luxury) .feature-card {
  grid-column: span 2;
  display: grid;
  grid-template-rows: minmax(210px, 0.62fr) 1fr;
  min-height: 470px;
  overflow: hidden;
  background: var(--build-pearl) !important;
  color: var(--build-ink) !important;
  text-decoration: none !important;
  transition:
    transform 260ms var(--build-ease),
    background-color 260ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) .feature-card:nth-child(1),
body.build-page:not(.hard-cover-luxury) .feature-card:nth-child(2) {
  grid-column: span 3;
}

body.build-page:not(.hard-cover-luxury) .feature-card:hover,
body.build-page:not(.hard-cover-luxury) .feature-card:focus-visible {
  background: color-mix(in oklab, var(--build-fog) 62%, var(--build-pearl)) !important;
  transform: translate3d(0, -4px, 0);
}

body.build-page:not(.hard-cover-luxury) .feature-img {
  min-height: 220px;
  border-bottom: 1px solid var(--build-line);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--build-line) 55%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--build-line) 55%, transparent) 1px, transparent 1px),
    var(--build-fog) !important;
  background-size: 30px 30px !important;
}

body.build-page:not(.hard-cover-luxury) .feature-img img {
  filter: saturate(0.76) contrast(1.04);
  transform: scale(1);
  transition: transform 760ms var(--build-ease), filter 760ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) .feature-card:hover .feature-img img,
body.build-page:not(.hard-cover-luxury) .feature-card:focus-visible .feature-img img {
  transform: scale(1.045);
  filter: saturate(0.92) contrast(1.06);
}

body.build-page:not(.hard-cover-luxury) .feature-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 42px) !important;
}

body.build-page:not(.hard-cover-luxury) .feature-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 2.7vw, 3.1rem);
  line-height: 0.96;
}

body.build-page:not(.hard-cover-luxury) .feature-link,
body.build-page:not(.hard-cover-luxury) .product-link,
body.build-page:not(.hard-cover-luxury) .mark,
body.build-page:not(.hard-cover-luxury) .compare-tag.good,
body.build-page:not(.hard-cover-luxury) .versus-tag.pos {
  color: var(--build-blue) !important;
}

body.build-page:not(.hard-cover-luxury) .feature-link {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.build-page:not(.hard-cover-luxury) :is(
  .prop-grid,
  .compare-grid,
  .steps,
  .versus,
  .power-grid,
  .loss-grid,
  .cost-split,
  .mech-grid,
  .routine-steps,
  .product-grid,
  .help-grid,
  .coverage-grid,
  .panel-grid
) {
  border: 1px solid var(--build-line) !important;
  background: var(--build-line) !important;
}

body.build-page:not(.hard-cover-luxury) :is(
  .prop-cell,
  .compare-col,
  .step-cell,
  .versus-col,
  .power-cell,
  .loss-cell,
  .cost-col,
  .mech-cell,
  .routine-cell,
  .product-cell,
  .help-cell,
  .coverage-cell,
  .legal-block,
  .notice-box,
  .testimonial,
  .panel-cell
) {
  position: relative;
  overflow: hidden;
  background: var(--build-pearl) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition:
    transform 260ms var(--build-ease),
    background-color 260ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) :is(
  .prop-cell,
  .compare-col,
  .step-cell,
  .versus-col,
  .power-cell,
  .loss-cell,
  .cost-col,
  .mech-cell,
  .routine-cell,
  .product-cell,
  .help-cell,
  .coverage-cell,
  .legal-block,
  .notice-box,
  .testimonial,
  .panel-cell
)::after {
  content: "";
  position: absolute;
  inset: auto clamp(20px, 2vw, 32px) clamp(18px, 2vw, 28px) clamp(20px, 2vw, 32px);
  height: 1px;
  background: linear-gradient(90deg, var(--build-amber), transparent);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) :is(
  .prop-cell,
  .compare-col,
  .step-cell,
  .versus-col,
  .power-cell,
  .loss-cell,
  .cost-col,
  .mech-cell,
  .routine-cell,
  .product-cell,
  .help-cell,
  .coverage-cell,
  .legal-block,
  .notice-box,
  .testimonial,
  .panel-cell
):hover {
  transform: translate3d(0, -3px, 0);
  background: color-mix(in oklab, var(--build-fog) 52%, var(--build-pearl)) !important;
}

body.build-page:not(.hard-cover-luxury) :is(
  .prop-cell,
  .compare-col,
  .step-cell,
  .versus-col,
  .power-cell,
  .loss-cell,
  .cost-col,
  .mech-cell,
  .routine-cell,
  .product-cell,
  .help-cell,
  .coverage-cell,
  .legal-block,
  .notice-box,
  .testimonial,
  .panel-cell
):hover::after,
body.build-page:not(.hard-cover-luxury) :is(
  .prop-cell,
  .compare-col,
  .step-cell,
  .versus-col,
  .power-cell,
  .loss-cell,
  .cost-col,
  .mech-cell,
  .routine-cell,
  .product-cell,
  .help-cell,
  .coverage-cell,
  .legal-block,
  .notice-box,
  .testimonial,
  .panel-cell
).is-visible::after {
  transform: scaleX(1);
}

body.build-page:not(.hard-cover-luxury) .versus-col.alt,
body.build-page:not(.hard-cover-luxury) .power-cell:nth-child(2),
body.build-page:not(.hard-cover-luxury) .cost-col:nth-child(2),
body.build-page:not(.hard-cover-luxury) .help-cell:nth-child(2) {
  background: color-mix(in oklab, var(--build-fog) 72%, var(--build-paper)) !important;
}

body.build-page:not(.hard-cover-luxury) :is(.step-num, .routine-n, .loss-pct, .cost-amount, .coverage-period, .power-volt) {
  color: var(--build-ink) !important;
  font-size: clamp(3rem, 5vw, 5.7rem) !important;
  line-height: 0.88 !important;
}

body.build-page:not(.hard-cover-luxury) .cta-strip {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, oklch(98% 0.004 90 / 0.05) 1px, transparent 1px),
    linear-gradient(0deg, oklch(98% 0.004 90 / 0.05) 1px, transparent 1px),
    oklch(12.5% 0.016 245) !important;
  background-size: 54px 54px !important;
  border: 0 !important;
  color: var(--build-paper) !important;
}

body.build-page:not(.hard-cover-luxury) .cta-strip .h-2,
body.build-page:not(.hard-cover-luxury) .cta-strip p {
  color: var(--build-paper) !important;
}

body.build-page:not(.hard-cover-luxury) .cta-strip .btn-primary {
  background: var(--build-paper) !important;
  color: var(--build-ink) !important;
  border-color: var(--build-paper) !important;
}

body.build-page:not(.hard-cover-luxury) .cta-strip .btn-outline {
  color: var(--build-paper) !important;
  border-color: color-mix(in oklab, var(--build-paper) 45%, transparent) !important;
}

body.build-page:not(.hard-cover-luxury) .build-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 680ms var(--build-ease) var(--build-delay, 0ms),
    transform 680ms var(--build-ease) var(--build-delay, 0ms);
  will-change: opacity, transform;
}

body.build-page:not(.hard-cover-luxury) .build-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@keyframes build-panel-in {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(var(--build-panel-x, 0), var(--build-panel-y, 0), 0);
  }
}

@keyframes build-layer-draw {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes build-ledger-scan {
  0%, 54% {
    opacity: 0;
    transform: translate3d(-80%, 0, 0);
  }
  64% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(80%, 0, 0);
  }
}

@keyframes build-line-open {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 0.6;
    transform: scaleX(1);
  }
}

@media (max-width: 1120px) {
  body.build-page:not(.hard-cover-luxury) .page-hero > .wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "intro"
      "actions"
      "panel";
    align-items: start;
  }

  body.build-page:not(.hard-cover-luxury) .build-hero-panel {
    width: min(100%, 760px);
    justify-self: start;
    min-height: 440px;
  }

  body.build-page:not(.hard-cover-luxury) .build-stat-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 900px) {
  body.build-page:not(.hard-cover-luxury) .page-hero {
    min-height: auto !important;
    padding-block: clamp(104px, 24vw, 138px) clamp(48px, 13vw, 72px) !important;
  }

  body.build-page:not(.hard-cover-luxury) .page-hero .h-display {
    font-size: clamp(3.15rem, 15vw, 5rem) !important;
    max-width: 10ch !important;
  }

  body.build-page:not(.hard-cover-luxury) .build-hero-panel {
    min-height: 0;
    grid-template-rows: auto minmax(150px, auto) auto auto auto;
  }

  body.build-page:not(.hard-cover-luxury) .split,
  body.build-page:not(.hard-cover-luxury) .prop-grid,
  body.build-page:not(.hard-cover-luxury) .compare-grid,
  body.build-page:not(.hard-cover-luxury) .versus,
  body.build-page:not(.hard-cover-luxury) .power-grid,
  body.build-page:not(.hard-cover-luxury) .cost-split,
  body.build-page:not(.hard-cover-luxury) .help-grid {
    grid-template-columns: 1fr !important;
  }

  body.build-page:not(.hard-cover-luxury) .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.build-page:not(.hard-cover-luxury) .feature-card,
  body.build-page:not(.hard-cover-luxury) .feature-card:nth-child(1),
  body.build-page:not(.hard-cover-luxury) .feature-card:nth-child(2) {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  body.build-page:not(.hard-cover-luxury) .build-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.build-page:not(.hard-cover-luxury) .build-hero-panel {
    padding: 18px;
  }

  body.build-page:not(.hard-cover-luxury) .build-panel-rows {
    grid-template-columns: 1fr;
  }

  body.build-page:not(.hard-cover-luxury) .stat-band {
    padding-block: 58px !important;
  }

  body.build-page:not(.hard-cover-luxury) .stat-band-inner,
  body.build-page:not(.hard-cover-luxury) .feature-grid,
  body.build-page:not(.hard-cover-luxury) .routine-steps,
  body.build-page:not(.hard-cover-luxury) .product-grid,
  body.build-page:not(.hard-cover-luxury) .coverage-grid,
  body.build-page:not(.hard-cover-luxury) .loss-grid,
  body.build-page:not(.hard-cover-luxury) .mech-grid,
  body.build-page:not(.hard-cover-luxury) .panel-grid {
    grid-template-columns: 1fr !important;
  }

  body.build-page:not(.hard-cover-luxury) .stat-cell,
  body.build-page:not(.hard-cover-luxury) .feature-card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.build-page:not(.hard-cover-luxury) .build-hero-panel,
  body.build-page:not(.hard-cover-luxury) .build-schematic::before,
  body.build-page:not(.hard-cover-luxury) .build-schematic span,
  body.build-page:not(.hard-cover-luxury) .stat-band.is-visible::after {
    animation: none !important;
  }

  body.build-page:not(.hard-cover-luxury) .build-reveal,
  body.build-page:not(.hard-cover-luxury) .build-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Critique correction: non-hard-cover Build pages now follow the actual
   hard-cover composition recipe instead of a generic dark spec-card. */
body.build-page:not(.hard-cover-luxury) .page-hero > .wrap {
  grid-template-columns: minmax(0, 0.94fr) minmax(390px, 0.58fr) !important;
  grid-template-areas:
    "eyebrow panel"
    "title panel"
    "intro panel"
    "actions panel"
    "proof panel" !important;
  align-items: center !important;
}

body.build-page:not(.hard-cover-luxury) .build-hero-proof {
  grid-area: proof;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 760px);
  margin-top: clamp(8px, 1.4vw, 18px);
  border: 1px solid color-mix(in oklab, var(--build-line) 82%, var(--build-ink));
  background: color-mix(in oklab, var(--build-line) 82%, var(--build-ink));
}

body.build-page:not(.hard-cover-luxury) .build-hero-proof span {
  min-width: 0;
  padding: 14px 16px;
  background: color-mix(in oklab, var(--build-pearl) 92%, transparent);
  color: var(--build-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
}

body.build-page:not(.hard-cover-luxury) .build-hero-panel {
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  width: min(100%, 520px);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  justify-self: end;
  align-self: center;
  contain: none;
}

body.build-page:not(.hard-cover-luxury) .build-feature-card {
  position: relative;
  aspect-ratio: 1 / 1.06;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--build-ink) 45%, var(--build-line));
  border-radius: 3px;
  background: var(--build-ink);
  box-shadow:
    0 40px 90px oklch(20% 0.025 245 / 0.18),
    inset 0 1px 0 oklch(100% 0 0 / 0.28);
  transform: translate3d(var(--build-panel-x, 0), var(--build-panel-y, 0), 0);
  transition: transform 360ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) .build-feature-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.58) contrast(1.12) brightness(0.92);
  transform: scale(1.045);
  animation: hc-photo-breathe 14s var(--build-ease) infinite alternate;
}

body.build-page:not(.hard-cover-luxury) .build-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, oklch(12% 0.012 245 / 0.12), transparent 34%, oklch(12% 0.012 245 / 0.48)),
    linear-gradient(118deg, oklch(76% 0.09 76 / 0.18), transparent 42%);
}

body.build-page:not(.hard-cover-luxury) .build-feature-card::after {
  content: "";
  position: absolute;
  inset: 18px;
  pointer-events: none;
  border: 1px solid oklch(96% 0.005 86 / 0.34);
  background:
    linear-gradient(90deg, oklch(96% 0.005 86 / 0.14) 1px, transparent 1px),
    linear-gradient(0deg, oklch(96% 0.005 86 / 0.14) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.58;
}

body.build-page:not(.hard-cover-luxury) .build-feature-tag {
  position: absolute;
  left: 28px;
  bottom: 26px;
  z-index: 1;
  display: inline-flex;
  max-width: calc(100% - 56px);
  padding: 10px 12px;
  background: color-mix(in oklab, var(--build-ink) 82%, transparent);
  color: var(--build-paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism {
  display: grid;
  gap: 18px;
  border: 1px solid color-mix(in oklab, var(--build-line) 82%, var(--build-ink));
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--build-line) 42%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--build-line) 42%, transparent) 1px, transparent 1px),
    color-mix(in oklab, var(--build-pearl) 94%, transparent);
  background-size: 34px 34px;
  padding: clamp(18px, 2vw, 26px);
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-title {
  margin: 0;
  color: var(--build-ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack {
  position: relative;
  display: grid;
  gap: 8px;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span {
  position: relative;
  display: block;
  height: 30px;
  border: 1px solid color-mix(in oklab, var(--build-line) 84%, var(--build-ink));
  background: color-mix(in oklab, var(--build-paper) 74%, var(--build-steel));
  transform-origin: left;
  animation: hc-layer-set 850ms var(--build-ease) both;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span:nth-child(2) {
  background: color-mix(in oklab, var(--build-amber) 20%, var(--build-paper));
  animation-delay: 90ms;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span:nth-child(3) {
  height: 14px;
  background: var(--build-ink);
  animation-delay: 180ms;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span:nth-child(4) {
  width: 74%;
  justify-self: end;
  background: color-mix(in oklab, var(--build-steel) 50%, var(--build-paper));
  animation-delay: 270ms;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span::after {
  content: attr(data-layer);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--build-ink-2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span:nth-child(3)::after {
  color: var(--build-paper);
}

body.build-page:not(.hard-cover-luxury) .build-panel-rows {
  border-color: color-mix(in oklab, var(--build-line) 82%, var(--build-ink));
  background: color-mix(in oklab, var(--build-line) 86%, var(--build-ink));
}

body.build-page:not(.hard-cover-luxury) .build-panel-rows span,
body.build-page:not(.hard-cover-luxury) .build-panel-rows strong {
  background: color-mix(in oklab, var(--build-pearl) 90%, transparent);
}

body.build-page:not(.hard-cover-luxury) .build-panel-rows span {
  color: var(--build-muted);
}

body.build-page:not(.hard-cover-luxury) .build-panel-rows strong {
  color: var(--build-ink);
}

body.build-page:not(.hard-cover-luxury) .build-mechanism > p:last-child {
  margin: 0;
  color: var(--build-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

body.build-page:not(.hard-cover-luxury) .stat-band-inner {
  grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr) !important;
  grid-auto-rows: minmax(122px, auto);
  min-height: 0;
  border-color: color-mix(in oklab, var(--build-paper) 18%, var(--build-ink)) !important;
  background: color-mix(in oklab, var(--build-paper) 14%, var(--build-ink)) !important;
}

body.build-page:not(.hard-cover-luxury) .stat-cell {
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  align-content: center;
  column-gap: clamp(22px, 3vw, 48px);
  row-gap: 8px;
  min-height: 122px;
  padding: clamp(22px, 2.4vw, 34px) clamp(26px, 3.2vw, 48px) !important;
}

body.build-page:not(.hard-cover-luxury) .stat-cell:first-child {
  grid-row: span 3;
  grid-template-columns: 1fr;
  align-content: end;
  gap: clamp(18px, 2vw, 28px);
  min-height: clamp(360px, 35vw, 480px);
  padding: clamp(34px, 4vw, 62px) !important;
}

body.build-page:not(.hard-cover-luxury) .stat-cell:not(:first-child)::before {
  inset: 1px;
  height: auto;
  background: radial-gradient(circle at 50% 0%, oklch(96% 0.005 86 / 0.08), transparent 48%);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--build-ease), transform 620ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) .stat-cell::before {
  inset: 1px;
  height: auto;
  background: radial-gradient(circle at 50% 0%, oklch(96% 0.005 86 / 0.08), transparent 48%);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--build-ease), transform 620ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) .stat-cell::after {
  right: clamp(28px, 3vw, 48px);
  bottom: clamp(30px, 3vw, 44px);
  left: clamp(28px, 3vw, 48px);
}

body.build-page:not(.hard-cover-luxury) .stat-cell:not(:first-child)::after {
  bottom: 23px;
  left: calc(clamp(26px, 3.2vw, 48px) + 220px + clamp(22px, 3vw, 48px));
}

body.build-page:not(.hard-cover-luxury) .stat-cell.is-visible::before {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.build-page:not(.hard-cover-luxury) .stat-num {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  z-index: 1;
  font-size: clamp(3.1rem, 5vw, 5.6rem) !important;
  text-align: left;
}

body.build-page:not(.hard-cover-luxury) .stat-cell:first-child .stat-num {
  grid-row: auto;
  font-size: clamp(6.2rem, 11vw, 12rem) !important;
  line-height: 0.82 !important;
}

body.build-page:not(.hard-cover-luxury) .stat-cell:nth-child(4) .stat-num {
  font-size: clamp(2.8rem, 4.3vw, 5rem) !important;
}

body.build-page:not(.hard-cover-luxury) .stat-label {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  margin-top: 0 !important;
  text-align: left;
}

body.build-page:not(.hard-cover-luxury) .stat-cell:first-child .stat-label {
  grid-column: auto;
  grid-row: auto;
}

body.build-page:not(.hard-cover-luxury) .stat-note {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  z-index: 1;
  max-width: 28ch;
  margin: 0;
  color: color-mix(in oklab, var(--build-paper) 66%, var(--build-steel));
  font-size: clamp(0.92rem, 0.32vw + 0.84rem, 1.04rem);
  font-weight: 500;
  line-height: 1.55;
}

body.build-page:not(.hard-cover-luxury) .stat-cell:first-child .stat-note {
  grid-column: auto;
  grid-row: auto;
  max-width: 24ch;
  font-size: clamp(1rem, 0.45vw + 0.92rem, 1.14rem);
}

@media (max-width: 1120px) {
  body.build-page:not(.hard-cover-luxury) .page-hero > .wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "intro"
      "actions"
      "proof"
      "panel" !important;
  }

  body.build-page:not(.hard-cover-luxury) .build-hero-panel {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  body.build-page:not(.hard-cover-luxury) .build-hero-proof {
    grid-template-columns: 1fr;
  }

  body.build-page:not(.hard-cover-luxury) .stat-band-inner,
  body.build-page:not(.hard-cover-luxury) .stat-cell,
  body.build-page:not(.hard-cover-luxury) .stat-cell:first-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    min-height: 0;
  }

  body.build-page:not(.hard-cover-luxury) .stat-cell:not(:first-child)::after {
    left: clamp(28px, 3vw, 48px);
  }

  body.build-page:not(.hard-cover-luxury) .stat-num,
  body.build-page:not(.hard-cover-luxury) .stat-label,
  body.build-page:not(.hard-cover-luxury) .stat-note {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 680px) {
  body.build-page:not(.hard-cover-luxury) .build-feature-card {
    aspect-ratio: 1 / 0.92;
  }

  body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span::after {
    font-size: 8px;
    letter-spacing: 0.1em;
  }
}

/* Build-page motion pass: service-manual choreography, not generic sparkle. */
body.build-page:not(.hard-cover-luxury) .page-hero::before {
  transform: translate3d(0, calc(var(--build-hero-drift, 0px) * -0.32), 0);
  will-change: transform;
}

body.build-page:not(.hard-cover-luxury) .build-feature-card {
  transform:
    perspective(900px)
    rotateX(var(--build-card-rx, 0deg))
    rotateY(var(--build-card-ry, 0deg))
    translate3d(0, 0, 0);
  transform-style: preserve-3d;
  will-change: transform;
}

body.build-page:not(.hard-cover-luxury) .build-feature-card::after {
  animation: build-grid-breathe 6.4s var(--build-ease) 1.1s infinite;
}

body.build-page:not(.hard-cover-luxury) .build-feature-tag {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: build-tag-lock 620ms var(--build-ease) 540ms both;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism {
  transform: translate3d(0, 0, 0);
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span {
  overflow: hidden;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(99% 0.004 92 / 0.38), transparent);
  opacity: 0;
  transform: translate3d(-112%, 0, 0);
  animation: build-row-sweep 5.8s var(--build-ease) infinite;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span:nth-child(2)::before {
  animation-delay: 540ms;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span:nth-child(3)::before {
  animation-delay: 1080ms;
}

body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span:nth-child(4)::before {
  animation-delay: 1620ms;
}

body.build-page:not(.hard-cover-luxury) .build-hero-proof span.build-reveal {
  transform: translate3d(0, 16px, 0) scale(0.965);
  transition:
    opacity 520ms var(--build-ease) var(--build-delay, 0ms),
    transform 520ms var(--build-ease) var(--build-delay, 0ms),
    background-color 220ms var(--build-ease),
    color 220ms var(--build-ease);
}

body.build-page:not(.hard-cover-luxury) .build-hero-proof span.build-reveal.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

body.build-page:not(.hard-cover-luxury) .build-hero-proof span:hover {
  background: var(--build-ink);
  color: var(--build-paper);
}

body.build-page:not(.hard-cover-luxury) :is(
  .feature-card,
  .prop-cell,
  .compare-col,
  .step-cell,
  .versus-col,
  .power-cell,
  .loss-cell,
  .cost-col,
  .mech-cell,
  .routine-cell,
  .product-cell,
  .help-cell,
  .coverage-cell,
  .legal-block,
  .notice-box,
  .testimonial,
  .panel-cell
).build-reveal {
  transform: translate3d(0, 30px, 0) scale(0.986);
}

body.build-page:not(.hard-cover-luxury) :is(
  .feature-card,
  .prop-cell,
  .compare-col,
  .step-cell,
  .versus-col,
  .power-cell,
  .loss-cell,
  .cost-col,
  .mech-cell,
  .routine-cell,
  .product-cell,
  .help-cell,
  .coverage-cell,
  .legal-block,
  .notice-box,
  .testimonial,
  .panel-cell
).build-reveal.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

body.build-page:not(.hard-cover-luxury) :is(
  .feature-card,
  .prop-cell,
  .compare-col,
  .step-cell,
  .versus-col,
  .power-cell,
  .loss-cell,
  .cost-col,
  .mech-cell,
  .routine-cell,
  .product-cell,
  .help-cell,
  .coverage-cell,
  .legal-block,
  .notice-box,
  .testimonial,
  .panel-cell
).build-reveal.is-visible:hover {
  transform: translate3d(0, -4px, 0) scale(1);
}

body.build-page:not(.hard-cover-luxury) .stat-cell.build-reveal {
  transform: translate3d(0, 24px, 0);
}

body.build-page:not(.hard-cover-luxury) .stat-cell.build-reveal.is-visible {
  transform: translate3d(0, 0, 0);
}

body.build-page:not(.hard-cover-luxury) .stat-cell.build-reveal.is-visible:hover {
  transform: translate3d(0, -4px, 0);
}

body.build-page:not(.hard-cover-luxury) .stat-cell.is-counting .stat-num {
  animation: build-stat-lock 680ms var(--build-ease) both;
}

body.build-page:not(.hard-cover-luxury) .stat-cell.is-counted .stat-num {
  text-shadow: 0 0 24px oklch(70% 0.13 76 / 0.12);
}

body.build-page:not(.hard-cover-luxury) :is(
  .loss-cell,
  .cost-col,
  .step-cell,
  .routine-cell,
  .coverage-cell,
  .power-cell
).is-counting :is(.loss-pct, .cost-amount, .step-num, .routine-n, .coverage-period, .power-volt) {
  animation: build-stat-lock 680ms var(--build-ease) both;
}

body.build-page:not(.hard-cover-luxury) .build-hero-actions .btn:active,
body.build-page:not(.hard-cover-luxury) .cta-strip .btn:active,
body.build-page:not(.hard-cover-luxury) .feature-card:active {
  transform: translate3d(0, 0, 0) scale(0.985);
}

body.build-page:not(.hard-cover-luxury) .split-img.build-reveal,
body.build-page:not(.hard-cover-luxury) .video-wrap.build-reveal {
  clip-path: inset(0 0 10% 0);
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 720ms var(--build-ease) var(--build-delay, 0ms),
    transform 720ms var(--build-ease) var(--build-delay, 0ms),
    clip-path 720ms var(--build-ease) var(--build-delay, 0ms);
}

body.build-page:not(.hard-cover-luxury) .split-img.build-reveal.is-visible,
body.build-page:not(.hard-cover-luxury) .video-wrap.build-reveal.is-visible {
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0);
}

@keyframes build-grid-breathe {
  0%, 100% {
    opacity: 0.46;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.74;
    transform: translate3d(6px, -5px, 0);
  }
}

@keyframes build-tag-lock {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes build-row-sweep {
  0%, 58% {
    opacity: 0;
    transform: translate3d(-112%, 0, 0);
  }

  68% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(112%, 0, 0);
  }
}

@keyframes build-stat-lock {
  from {
    transform: translate3d(0, 12px, 0);
    opacity: 0.72;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.build-page:not(.hard-cover-luxury) .page-hero::before,
  body.build-page:not(.hard-cover-luxury) .build-feature-card,
  body.build-page:not(.hard-cover-luxury) .build-feature-card::after,
  body.build-page:not(.hard-cover-luxury) .build-feature-tag,
  body.build-page:not(.hard-cover-luxury) .build-mechanism-stack span::before,
  body.build-page:not(.hard-cover-luxury) .stat-cell.is-counting .stat-num {
    animation: none !important;
    transform: none !important;
  }

  body.build-page:not(.hard-cover-luxury) .build-hero-proof span.build-reveal,
  body.build-page:not(.hard-cover-luxury) :is(
    .feature-card,
    .prop-cell,
    .compare-col,
    .step-cell,
    .versus-col,
    .power-cell,
    .loss-cell,
    .cost-col,
    .mech-cell,
    .routine-cell,
    .product-cell,
    .help-cell,
    .coverage-cell,
    .legal-block,
    .notice-box,
    .testimonial,
    .panel-cell
  ).build-reveal,
  body.build-page:not(.hard-cover-luxury) .split-img.build-reveal,
  body.build-page:not(.hard-cover-luxury) .video-wrap.build-reveal {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Energy Efficiency: turn the page into one power-bill argument. */
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .stat-band {
  padding-block: clamp(54px, 7vw, 92px) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .stat-band-inner {
  grid-auto-rows: minmax(104px, auto);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .stat-cell {
  min-height: 104px;
  padding: clamp(18px, 2vw, 28px) clamp(22px, 2.7vw, 40px) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child {
  min-height: clamp(270px, 26vw, 360px);
  padding: clamp(30px, 4vw, 54px) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child .stat-num {
  font-size: clamp(5.4rem, 9.5vw, 10rem) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-section {
  padding-block: clamp(72px, 8vw, 118px) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-wrap,
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-wrap,
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-wrap {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-section-copy,
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-copy {
  display: grid;
  grid-template-columns: minmax(180px, 0.24fr) minmax(0, 0.76fr);
  gap: clamp(20px, 5vw, 76px);
  align-items: end;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-section-copy .eyebrow,
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-copy .eyebrow {
  align-self: end;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-section-copy .h-2,
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-copy .h-2 {
  max-width: 14ch;
  font-size: clamp(3rem, 5.4vw, 6.8rem);
  line-height: 0.9;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-section-copy .body-lg,
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-copy .body-lg {
  grid-column: 2;
  max-width: 58ch;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  gap: 1px;
  border: 1px solid var(--build-line);
  background: var(--build-line);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-panel {
  display: grid;
  align-content: start;
  min-height: 0;
  padding: clamp(28px, 4vw, 58px) !important;
  overflow: hidden;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-panel--traditional {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--build-line) 40%, transparent) 1px, transparent 1px),
    var(--build-pearl) !important;
  background-size: 54px 54px !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-panel--eco {
  background:
    linear-gradient(90deg, oklch(98% 0.004 90 / 0.05) 1px, transparent 1px),
    linear-gradient(0deg, oklch(98% 0.004 90 / 0.05) 1px, transparent 1px),
    oklch(12.5% 0.016 245) !important;
  background-size: 54px 54px !important;
  color: var(--build-paper);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-panel .cost-tag {
  margin: 0 0 14px;
  color: var(--build-muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-panel--eco .cost-tag,
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-panel--eco .cost-period {
  color: color-mix(in oklab, var(--build-blue) 72%, var(--build-paper));
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-panel .cost-amount {
  color: var(--build-ink) !important;
  font-family: var(--display);
  font-size: clamp(4.2rem, 7.5vw, 8.8rem) !important;
  font-weight: 840;
  line-height: 0.84;
  letter-spacing: 0;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-panel--eco .cost-amount {
  color: var(--build-paper) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-panel .cost-period {
  margin-top: 12px;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-divider {
  display: grid;
  place-items: center;
  background: var(--build-paper);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-divider span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--build-ink);
  color: var(--build-ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-loss-stack,
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-rows {
  display: grid;
  gap: 1px;
  margin-top: clamp(28px, 3.4vw, 48px);
  border: 1px solid color-mix(in oklab, var(--build-line) 78%, var(--build-ink));
  background: color-mix(in oklab, var(--build-line) 78%, var(--build-ink));
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-section .loss-cell {
  display: grid;
  grid-template-columns: minmax(148px, 0.32fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  min-height: 0;
  padding: clamp(18px, 2.2vw, 30px) !important;
  background: color-mix(in oklab, var(--build-paper) 86%, var(--build-pearl)) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-section .loss-pct {
  color: var(--build-ink) !important;
  font-family: var(--display);
  font-size: clamp(2.7rem, 3.6vw, 4.4rem) !important;
  font-weight: 820;
  line-height: 0.9;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-section .loss-title {
  margin: 0;
  font-size: clamp(1.1rem, 0.55vw + 0.96rem, 1.34rem);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-section .loss-body {
  max-width: 36ch;
  margin-top: 8px;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-savings-callout {
  margin-top: clamp(16px, 2vw, 28px);
  color: color-mix(in oklab, var(--build-amber) 86%, var(--build-paper));
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-rows > div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px 18px;
  padding: clamp(16px, 2vw, 24px);
  background: oklch(16% 0.015 245);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-rows span {
  grid-row: span 2;
  color: color-mix(in oklab, var(--build-blue) 74%, var(--build-paper));
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-rows strong {
  color: var(--build-paper);
  font-family: var(--display);
  font-size: clamp(1.2rem, 1vw + 1rem, 1.8rem);
  line-height: 1.02;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-rows p {
  max-width: 34ch;
  margin: 0;
  color: oklch(78% 0.012 90);
  line-height: 1.5;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assumption-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px clamp(20px, 2.4vw, 34px);
  background: color-mix(in oklab, var(--build-paper) 82%, var(--build-amber));
  color: var(--build-ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-section {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--build-line) 44%, transparent) 1px, transparent 1px),
    color-mix(in oklab, var(--build-fog) 46%, var(--build-paper)) !important;
  background-size: 54px 54px !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-wrap {
  grid-template-columns: minmax(0, 0.72fr) minmax(420px, 0.52fr);
  align-items: start;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-copy {
  grid-column: 1 / -1;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-diagram {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 12px;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid color-mix(in oklab, var(--build-line) 76%, var(--build-ink));
  background:
    linear-gradient(90deg, oklch(98% 0.004 90 / 0.06) 1px, transparent 1px),
    linear-gradient(0deg, oklch(98% 0.004 90 / 0.06) 1px, transparent 1px),
    oklch(12.5% 0.016 245);
  background-size: 36px 36px;
  color: var(--build-paper);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-layer {
  display: grid;
  grid-template-columns: minmax(120px, 0.38fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 72px;
  padding: 16px 18px;
  border: 1px solid color-mix(in oklab, var(--build-paper) 16%, transparent);
  background: oklch(17% 0.014 245);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-layer--cover {
  background: color-mix(in oklab, var(--build-amber) 22%, oklch(17% 0.014 245));
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-layer--shell {
  background: color-mix(in oklab, var(--build-blue) 18%, oklch(17% 0.014 245));
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-layer span {
  color: color-mix(in oklab, var(--build-amber) 84%, var(--build-paper));
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-layer strong {
  color: var(--build-paper);
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.2vw + 1rem, 2rem);
  line-height: 1;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid {
  display: grid;
  gap: 1px;
  border: 1px solid var(--build-line);
  background: var(--build-line);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-cell {
  display: grid;
  grid-template-columns: 54px minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
  min-height: 118px;
  padding: clamp(20px, 2.5vw, 34px) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .label-mono {
  margin: 0 !important;
  color: var(--build-blue);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-title {
  margin: 0;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-body {
  max-width: 46ch;
  margin: 0;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-section {
  padding-block: clamp(68px, 8vw, 118px) !important;
  background:
    linear-gradient(90deg, oklch(98% 0.004 90 / 0.05) 1px, transparent 1px),
    linear-gradient(0deg, oklch(98% 0.004 90 / 0.05) 1px, transparent 1px),
    oklch(12.5% 0.016 245) !important;
  background-size: 54px 54px !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-wrap {
  grid-template-columns: minmax(0, 0.96fr) minmax(340px, 0.52fr);
  align-items: stretch;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-card,
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-section .testimonial {
  border: 1px solid color-mix(in oklab, var(--build-paper) 16%, transparent);
  background: oklch(16% 0.015 245) !important;
  color: var(--build-paper);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-card {
  display: grid;
  align-content: end;
  min-height: clamp(340px, 31vw, 480px);
  padding: clamp(32px, 5vw, 70px);
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-card .eyebrow {
  color: var(--build-amber) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-card .h-2 {
  max-width: 13ch;
  color: var(--build-paper) !important;
  font-size: clamp(3.1rem, 6.2vw, 7.4rem);
  line-height: 0.88;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-card .body-lg {
  max-width: 42ch;
  margin-top: clamp(24px, 3vw, 42px);
  color: oklch(80% 0.012 90) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-section .testimonial {
  display: grid;
  align-content: end;
  min-height: clamp(300px, 29vw, 440px);
  padding: clamp(28px, 3.8vw, 54px) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-section .testi-quote {
  color: var(--build-paper) !important;
}

body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-section .testi-by {
  color: color-mix(in oklab, var(--build-blue) 72%, var(--build-paper)) !important;
}

@media (max-width: 1120px) {
  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-section-copy,
  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-copy,
  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-board,
  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-wrap,
  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-wrap {
    grid-template-columns: 1fr;
  }

  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-section-copy .body-lg,
  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-copy .body-lg {
    grid-column: auto;
  }

  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-divider {
    min-height: 52px;
  }

  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-diagram {
    position: relative;
    top: auto;
  }
}

@media (max-width: 720px) {
  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .stat-band {
    padding-block: 48px !important;
  }

  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child {
    min-height: 0;
  }

  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-section-copy .h-2,
  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-copy .h-2,
  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-card .h-2 {
    max-width: 100%;
    font-size: clamp(2.7rem, 13vw, 4.8rem);
  }

  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-board {
    border-inline: 0;
    margin-inline: calc(clamp(20px, 4vw, 56px) * -1);
  }

  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-section .loss-cell,
  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-assembly-layer,
  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-cell {
    grid-template-columns: 1fr;
  }

  body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-ledger-panel .cost-amount {
    font-size: clamp(3.6rem, 17vw, 5.4rem) !important;
  }
}

/* Page-by-page Build section elevation. These pages should feel like one
   family: service-manual proof, not generic spa brochure panels. */
body.build-page:not(.hard-cover-luxury) {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--hairline) 38%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in oklab, var(--hairline) 34%, transparent) 1px, transparent 1px),
    var(--canvas) !important;
  background-size: 88px 88px;
}

body.build-page:not(.hard-cover-luxury) .page-hero {
  position: relative;
  isolation: isolate;
  min-height: auto !important;
  padding-block: clamp(108px, 12vw, 164px) clamp(64px, 7vw, 104px) !important;
  overflow: hidden;
}

body.build-page:not(.hard-cover-luxury) .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, oklch(94% 0.006 90 / 0.05) 1px, transparent 1px),
    linear-gradient(180deg, oklch(94% 0.006 90 / 0.05) 1px, transparent 1px),
    radial-gradient(circle at 85% 22%, oklch(54% 0.13 240 / 0.16), transparent 34%),
    var(--ink);
  background-size: 96px 96px, 96px 96px, auto, auto;
}

body.build-page:not(.hard-cover-luxury) .page-hero::after {
  content: "";
  position: absolute;
  right: clamp(20px, 7vw, 96px);
  bottom: clamp(28px, 6vw, 76px);
  width: clamp(112px, 18vw, 260px);
  aspect-ratio: 1;
  border: 1px solid oklch(92% 0.008 90 / 0.18);
  background:
    linear-gradient(135deg, transparent 48%, oklch(92% 0.008 90 / 0.28) 49%, oklch(92% 0.008 90 / 0.28) 51%, transparent 52%),
    linear-gradient(45deg, transparent 48%, oklch(92% 0.008 90 / 0.14) 49%, oklch(92% 0.008 90 / 0.14) 51%, transparent 52%);
  opacity: 0.75;
  pointer-events: none;
}

body.ecozone-page .page-hero::after {
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 22px oklch(54% 0.13 240 / 0.08),
    inset 0 0 0 54px oklch(72% 0.16 75 / 0.08);
}

body.bacteria-resistant-page .page-hero::after {
  clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
}

body.installation-page .page-hero::after {
  width: clamp(180px, 30vw, 420px);
  aspect-ratio: 16 / 9;
}

body.operate-page .page-hero::after {
  width: clamp(150px, 22vw, 320px);
  border-radius: 50%;
}

body.warranty-page .page-hero::after {
  clip-path: polygon(50% 0, 94% 18%, 86% 78%, 50% 100%, 14% 78%, 6% 18%);
}

body.features-page .page-hero::after {
  width: clamp(190px, 30vw, 440px);
  aspect-ratio: 5 / 3;
}

body.build-page:not(.hard-cover-luxury) .page-hero .wrap {
  position: relative;
  z-index: 1;
}

body.build-page:not(.hard-cover-luxury) .page-hero .h-display {
  max-width: 8ch;
  text-wrap: balance;
}

body.features-page .page-hero .h-display {
  max-width: 10ch;
}

body.build-page:not(.hard-cover-luxury) .page-hero .intro {
  max-width: 58ch !important;
}

body.build-page:not(.hard-cover-luxury) .stat-band {
  padding-block: clamp(28px, 4vw, 56px) !important;
}

body.build-page:not(.hard-cover-luxury) .stat-band-inner {
  border: 1px solid oklch(32% 0.012 240);
  box-shadow: 0 24px 80px oklch(10% 0.012 240 / 0.18);
}

body.build-page:not(.hard-cover-luxury) .stat-cell {
  text-align: left !important;
}

body.build-page:not(.hard-cover-luxury) .stat-num {
  font-family: var(--display) !important;
  font-variation-settings: "wdth" 92, "opsz" 48;
  font-weight: 760 !important;
  line-height: 0.95 !important;
}

body.build-page:not(.hard-cover-luxury) .section {
  background-color: color-mix(in oklab, var(--canvas) 88%, transparent);
}

body.build-page:not(.hard-cover-luxury) .section:nth-of-type(even) {
  background-color: color-mix(in oklab, var(--canvas-deep) 86%, transparent);
}

body.build-page:not(.hard-cover-luxury) .versus,
body.build-page:not(.hard-cover-luxury) .steps,
body.build-page:not(.hard-cover-luxury) .prop-grid,
body.build-page:not(.hard-cover-luxury) .power-grid,
body.build-page:not(.hard-cover-luxury) .coverage-grid,
body.build-page:not(.hard-cover-luxury) .routine-steps,
body.build-page:not(.hard-cover-luxury) .feature-grid {
  border: 1px solid var(--hairline-2);
  box-shadow: 0 18px 60px oklch(20% 0.012 240 / 0.08);
}

body.build-page:not(.hard-cover-luxury) .versus-col,
body.build-page:not(.hard-cover-luxury) .step-cell,
body.build-page:not(.hard-cover-luxury) .prop-cell,
body.build-page:not(.hard-cover-luxury) .power-cell,
body.build-page:not(.hard-cover-luxury) .coverage-cell,
body.build-page:not(.hard-cover-luxury) .routine-cell,
body.build-page:not(.hard-cover-luxury) .feature-card {
  transition:
    transform 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}

body.build-page:not(.hard-cover-luxury) .versus-col:hover,
body.build-page:not(.hard-cover-luxury) .step-cell:hover,
body.build-page:not(.hard-cover-luxury) .prop-cell:hover,
body.build-page:not(.hard-cover-luxury) .power-cell:hover,
body.build-page:not(.hard-cover-luxury) .coverage-cell:hover,
body.build-page:not(.hard-cover-luxury) .routine-cell:hover,
body.build-page:not(.hard-cover-luxury) .feature-card:hover {
  transform: translateY(-4px);
}

body.build-page:not(.hard-cover-luxury) .notice-box,
body.build-page:not(.hard-cover-luxury) .legal-block,
body.build-page:not(.hard-cover-luxury) .testimonial {
  border: 1px solid var(--hairline-2);
}

@media (prefers-reduced-motion: no-preference) {
  body.build-page:not(.hard-cover-luxury) .stat-cell,
  body.build-page:not(.hard-cover-luxury) .section > .wrap > * {
    animation: buildProofRise 680ms cubic-bezier(.16, 1, .3, 1) both;
  }

  body.build-page:not(.hard-cover-luxury) .stat-cell:nth-child(2) { animation-delay: 70ms; }
  body.build-page:not(.hard-cover-luxury) .stat-cell:nth-child(3) { animation-delay: 140ms; }
  body.build-page:not(.hard-cover-luxury) .stat-cell:nth-child(4) { animation-delay: 210ms; }
}

@keyframes buildProofRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 700px) {
  body.build-page:not(.hard-cover-luxury) {
    background-size: 56px 56px;
  }

  body.build-page:not(.hard-cover-luxury) .page-hero {
    padding-block: 104px 56px !important;
  }

  body.build-page:not(.hard-cover-luxury) .page-hero::after {
    opacity: 0.28;
    right: -32px;
    bottom: 16px;
  }

  body.build-page:not(.hard-cover-luxury) .stat-band {
    padding-block: 20px !important;
  }

  body.build-page:not(.hard-cover-luxury) .stat-cell {
    padding: 22px !important;
  }
}

/* Final core-page layer lives after the broad interior hero rules so these
   standalone pages keep the same elevated spec-sheet composition. */
body.core-page :is(.page-hero, .contact-hero) {
  min-height: clamp(420px, 54vh, 640px) !important;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--hairline) 72%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--hairline) 72%, transparent) 1px, transparent 1px),
    var(--canvas) !important;
  background-size: 48px 48px, 48px 48px, auto !important;
}

body.core-page:not(:has(.home-hero)):not(:has(.lifestyle-hero)) :is(.page-hero, .contact-hero)::after,
body.core-page :is(.page-hero, .contact-hero)::after {
  content: var(--hero-note) !important;
  z-index: 0 !important;
  opacity: 1 !important;
}

body.core-page :is(.page-hero, .contact-hero) > .wrap {
  position: relative !important;
  z-index: 1 !important;
}

body.core-page :is(.hero-headline, .page-title, .h-1) {
  font-size: clamp(46px, 7.4vw, 112px) !important;
  line-height: 0.95 !important;
}

body.core-page :is(.hero-sub, .page-sub, .body-lg, .body-md) {
  font-size: clamp(17px, 0.7vw + 14px, 21px) !important;
  line-height: 1.5 !important;
}

.topbar .site-nav-link,
footer a,
.footer-nav a,
.foot-col a,
.footer-col a,
.footer-links a,
.footer-social a {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.contact-page .direct-phone,
.contact-page .direct-meta-val a,
.contact-page .addr-line a,
.showrooms-page .detail-row .v a,
.showrooms-page .closing-phone a {
  min-height: 48px !important;
}

.faq-page .faq-nav-link {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 760px) {
  body.core-page :is(.page-hero, .contact-hero) {
    min-height: 0 !important;
    padding-block: 104px 52px !important;
  }

  body.core-page :is(.page-hero, .contact-hero)::after {
    width: 100% !important;
    min-height: 100px !important;
  }
}

/* Blog and location pages: keep SEO surfaces dense, but make them feel like
   the same Eco Spas manual instead of separate microsites. */
body.blog-index-page .blog-hero,
body.blog-post-page .post-hero,
body.location-page :is(.province-hero, .city-hero, .page-hero) {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--hairline) 70%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklab, var(--hairline) 70%, transparent) 1px, transparent 1px),
    var(--canvas) !important;
  background-size: 48px 48px, 48px 48px, auto !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--hairline) !important;
}

body.blog-index-page .blog-hero::after,
body.blog-post-page .post-hero::after,
body.location-page :is(.province-hero, .city-hero, .page-hero)::after {
  content: "FIELD ROUTE\A OWNER NOTES\A MEASURED CLAIMS" !important;
  white-space: pre-line;
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(28px, 5vw, 64px);
  z-index: 0;
  width: min(320px, 34vw);
  min-height: 132px;
  display: flex;
  align-items: end;
  border: 1px solid var(--hairline);
  background:
    repeating-linear-gradient(135deg, transparent 0 34px, color-mix(in oklab, var(--hairline) 82%, transparent) 34px 35px),
    color-mix(in oklab, var(--canvas-2) 88%, transparent);
  padding: 20px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.75;
  text-transform: uppercase;
}

body.blog-index-page .blog-hero > .wrap,
body.blog-post-page .post-hero > *,
body.location-page :is(.province-hero, .city-hero, .page-hero) > .wrap {
  position: relative;
  z-index: 1;
}

body.blog-index-page .blog-hero .h-display,
body.blog-post-page .post-title,
body.location-page :is(.h-display, .hero-title, .h-1) {
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

body.blog-index-page .blog-hero-sub,
body.blog-post-page .post-meta,
body.blog-post-page .post-breadcrumb,
body.location-page :is(.province-hero-body, .city-hero-sub, .hero-sub) {
  color: var(--ink-2) !important;
}

body.blog-index-page .article-card,
body.location-page :is(.city-card, .climate-fact, .spec-list, .model-card, .faq-item),
body.blog-post-page :is(.callout, .data-table, .comparison-table, .price-table, .verdict-card) {
  border: 1px solid var(--hairline) !important;
  background: color-mix(in oklab, var(--canvas-2) 88%, var(--canvas)) !important;
  box-shadow: 0 18px 48px color-mix(in oklab, var(--ink) 6%, transparent) !important;
}

body.blog-index-page .article-card,
body.location-page :is(.city-card, .model-card, .faq-item),
body.blog-post-page :is(.callout, .data-table, .comparison-table, .price-table, .verdict-card) {
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
}

body.blog-index-page .article-card:hover,
body.location-page :is(.city-card, .model-card, .faq-item):hover,
body.blog-post-page :is(.callout, .data-table, .comparison-table, .price-table, .verdict-card):hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--steam) 42%, var(--hairline)) !important;
}

body.blog-post-page .post-breadcrumb a,
body.location-page .province-tab,
body.location-page :is(.climate-copy, .faq-answer, .why-body) a {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.location-page .province-switcher {
  border-bottom: 1px solid var(--hairline);
  padding-block: 14px !important;
}

body.location-page .province-tabs {
  gap: 8px !important;
}

body.location-page .province-tab {
  justify-content: center;
  padding: 8px 16px !important;
}

body.location-page .hero-actions .btn,
body.location-page .hero-ctas a,
body.location-page .cta-ctas a {
  min-height: 48px !important;
}

body.location-page .hero-actions .btn:not(.btn-primary),
body.location-page .btn-hero-ghost {
  background: var(--canvas-2) !important;
  color: var(--ink) !important;
  border-color: var(--hairline-2) !important;
}

body.blog-post-page .post-body {
  font-size: clamp(16px, 0.35vw + 14.5px, 18px);
  line-height: 1.72;
}

body.blog-post-page .post-body h2 {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(24px, 4vw, 48px);
}

@media (prefers-reduced-motion: no-preference) {
  body.blog-index-page .article-card,
  body.blog-post-page .post-body > *,
  body.location-page :is(.stats-strip, .section, .why-section, .stats-band, .models-section) > .wrap {
    animation: corePageRise 620ms ease both;
  }
}

@media (max-width: 760px) {
  body.blog-index-page .blog-hero,
  body.blog-post-page .post-hero,
  body.location-page :is(.province-hero, .city-hero, .page-hero) {
    padding-block: 104px 52px !important;
  }

  body.blog-index-page .blog-hero::after,
  body.blog-post-page .post-hero::after,
  body.location-page :is(.province-hero, .city-hero, .page-hero)::after {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    min-height: 96px;
    margin-top: 28px;
  }
}

/* Build pages: keep the shared service-manual hero, but make the proof panel
   compact enough that each topic reaches its actual argument quickly. */
body.build-page:not(.hard-cover-luxury):not(.installation-page) .page-hero {
  padding-block: clamp(112px, 11vw, 158px) clamp(56px, 6vw, 88px) !important;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .page-hero .wrap {
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.42fr) !important;
  grid-template-areas:
    "eyebrow panel"
    "title panel"
    "intro panel"
    "proof panel"
    "actions panel" !important;
  grid-template-rows: auto auto auto auto auto !important;
  gap: clamp(14px, 2.4vw, 30px) clamp(36px, 6vw, 84px) !important;
  align-items: end !important;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-hero-panel {
  width: min(100%, 420px);
  gap: 10px;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-feature-card {
  aspect-ratio: 4 / 3;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-feature-tag {
  left: 18px;
  bottom: 18px;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-mechanism {
  gap: 10px;
  padding: clamp(15px, 1.7vw, 20px);
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-mechanism-stack {
  gap: 6px;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-mechanism-stack span {
  height: 18px;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-mechanism-stack span:nth-child(3) {
  height: 10px;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-panel-rows span,
body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-panel-rows strong {
  padding: 9px 10px;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-panel-rows strong {
  font-size: clamp(1rem, 1.1vw, 1.22rem);
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-mechanism > p:last-child {
  font-size: 0.9rem;
  line-height: 1.45;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-band {
  padding-block: 0 !important;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-band-inner {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  grid-auto-rows: auto !important;
  border-inline: 1px solid oklch(30% 0.012 240);
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-cell,
body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-cell:first-child {
  grid-row: auto !important;
  grid-column: auto !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  min-height: 240px !important;
  padding: clamp(24px, 3vw, 40px) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-cell:first-child .stat-num {
  font-size: clamp(40px, 5vw, 72px) !important;
  line-height: 0.95 !important;
}

body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-label,
body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-note {
  grid-column: auto !important;
  grid-row: auto !important;
}

@media (max-width: 900px) {
  body.build-page:not(.hard-cover-luxury):not(.installation-page) .page-hero .wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "intro"
      "actions"
      "proof"
      "panel" !important;
    align-items: start !important;
  }

  body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-hero-panel {
    width: min(100%, 620px);
    justify-self: start;
  }

  body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-band-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-cell,
  body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-cell:first-child {
    min-height: 170px !important;
  }
}

@media (max-width: 620px) {
  body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-mechanism {
    display: none;
  }

  body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-feature-card {
    aspect-ratio: 16 / 9;
  }

  body.build-page:not(.hard-cover-luxury):not(.installation-page) .build-hero-proof {
    grid-template-columns: 1fr;
  }

  body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-cell,
  body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-cell:first-child {
    min-height: 150px !important;
    padding: 18px !important;
  }

  body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-num,
  body.build-page:not(.hard-cover-luxury):not(.installation-page) .stat-cell:first-child .stat-num {
    font-size: clamp(28px, 9vw, 42px) !important;
  }
}

/* Installation: this page should read like a route plan, not a generic feature
   card stack. The buyer needs confidence about access, base, power, and fill. */
body.installation-page.build-page:not(.hard-cover-luxury) .page-hero {
  min-height: auto !important;
  padding-block: clamp(124px, 12vw, 172px) clamp(56px, 7vw, 92px) !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .page-hero .wrap::after {
  content: none !important;
  display: none !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .page-hero .wrap {
  grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.42fr) !important;
  grid-template-areas:
    "eyebrow panel"
    "title panel"
    "intro panel"
    "proof panel"
    "actions panel" !important;
  grid-template-rows: auto auto auto auto auto !important;
  align-items: end !important;
  gap: clamp(14px, 2.4vw, 30px) clamp(36px, 6vw, 84px) !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .page-hero .eyebrow {
  grid-area: eyebrow !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .page-hero .h-display {
  grid-area: title !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .page-hero .intro {
  grid-area: intro !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .page-hero .h-display {
  max-width: 8.5ch !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .build-hero-panel {
  width: min(100%, 420px);
  gap: 10px;
}

body.installation-page.build-page:not(.hard-cover-luxury) .build-feature-card {
  aspect-ratio: 4 / 3;
}

body.installation-page.build-page:not(.hard-cover-luxury) .build-feature-tag {
  left: 18px;
  bottom: 18px;
}

body.installation-page.build-page:not(.hard-cover-luxury) .build-mechanism {
  gap: 10px;
  padding: clamp(15px, 1.7vw, 20px);
}

body.installation-page.build-page:not(.hard-cover-luxury) .build-mechanism-stack {
  gap: 6px;
}

body.installation-page.build-page:not(.hard-cover-luxury) .build-mechanism-stack span {
  height: 18px;
}

body.installation-page.build-page:not(.hard-cover-luxury) .build-mechanism-stack span:nth-child(3) {
  height: 10px;
}

body.installation-page.build-page:not(.hard-cover-luxury) .build-panel-rows span,
body.installation-page.build-page:not(.hard-cover-luxury) .build-panel-rows strong {
  padding: 9px 10px;
}

body.installation-page.build-page:not(.hard-cover-luxury) .build-panel-rows strong {
  font-size: clamp(1rem, 1.1vw, 1.22rem);
}

body.installation-page.build-page:not(.hard-cover-luxury) .build-mechanism > p:last-child {
  font-size: 0.9rem;
  line-height: 1.45;
}

body.installation-page.build-page:not(.hard-cover-luxury) .build-hero-proof {
  margin-top: 0;
}

body.installation-page.build-page:not(.hard-cover-luxury) .stat-band {
  padding-block: 0 !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .stat-band-inner {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  border-inline: 1px solid oklch(30% 0.012 240);
}

body.installation-page.build-page:not(.hard-cover-luxury) .stat-cell {
  grid-row: auto !important;
  grid-column: auto !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  align-content: space-between !important;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body.installation-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child {
  grid-row: auto !important;
  min-height: 260px !important;
  padding: clamp(26px, 3.2vw, 42px) !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child .stat-num {
  font-size: clamp(40px, 5vw, 72px) !important;
  line-height: 0.95 !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .stat-label,
body.installation-page.build-page:not(.hard-cover-luxury) .stat-note {
  grid-column: auto !important;
  grid-row: auto !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .stat-num {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 72px) !important;
  font-weight: 700;
  letter-spacing: 0 !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .install-readiness-section {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--hairline) 52%, transparent) 1px, transparent 1px),
    var(--canvas) !important;
  background-size: 56px 56px, auto !important;
}

body.installation-page .install-readiness-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.72fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

body.installation-page .install-readiness-copy {
  max-width: 720px;
  position: sticky;
  top: 110px;
}

body.installation-page .install-readiness-copy .h-2 {
  margin-top: var(--s-4);
  max-width: 13ch;
}

body.installation-page .install-note {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--hairline-2);
  background: var(--canvas-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.7;
  text-transform: uppercase;
}

body.installation-page .install-readiness-board {
  border: 1px solid var(--hairline-2);
  background:
    repeating-linear-gradient(135deg, transparent 0 36px, color-mix(in oklab, var(--hairline) 70%, transparent) 36px 37px),
    var(--canvas-2);
  box-shadow: 0 28px 72px color-mix(in oklab, var(--ink) 9%, transparent);
}

body.installation-page .install-board-head,
body.installation-page .install-check-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s-4);
  padding: clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--hairline);
}

body.installation-page .install-board-head {
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--ink);
  color: var(--canvas);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.installation-page .install-board-head strong {
  color: var(--amber);
  font-weight: 400;
}

body.installation-page .install-check-row:last-child {
  border-bottom: 0;
}

body.installation-page .install-check-num {
  color: var(--steam-deep);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
}

body.installation-page .install-check-row strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.1;
}

body.installation-page .install-check-row p {
  margin-top: var(--s-2);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

body.installation-page .versus {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
}

body.installation-page .power-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

body.installation-page .power-cell {
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

body.installation-page .power-note {
  margin-top: auto !important;
}

body.installation-page .install-surface-section .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(360px, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

body.installation-page .install-surface-copy {
  max-width: 720px;
}

body.installation-page .install-surface-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--hairline-2);
  background: var(--hairline-2);
  box-shadow: 0 24px 64px color-mix(in oklab, var(--ink) 8%, transparent);
}

body.installation-page .install-surface-card {
  min-height: 230px;
  padding: clamp(20px, 3vw, 34px);
  background: var(--canvas-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body.installation-page .install-surface-card span {
  color: var(--steam-deep);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
}

body.installation-page .install-surface-card strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
}

body.installation-page .install-surface-card p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

/* Operate page: keep the owner-manual usefulness, but give the surface a
   softer limewash tactility so it does not read as another technical grid. */
body.operate-page.build-page:not(.hard-cover-luxury) {
  --operate-limewash: oklch(96.5% 0.009 90);
  --operate-stone: oklch(92.5% 0.011 88);
  --operate-cool-stone: oklch(91% 0.013 220);
  --operate-mortar: oklch(81% 0.008 96);
  background:
    linear-gradient(118deg, oklch(98% 0.006 92 / 0.96) 0%, transparent 42%),
    linear-gradient(26deg, transparent 0 18%, oklch(90.5% 0.012 96 / 0.56) 45%, transparent 78%),
    linear-gradient(164deg, var(--operate-limewash) 0%, var(--operate-stone) 54%, oklch(95% 0.009 82) 100%) !important;
  background-size: auto !important;
}

body.operate-page.build-page:not(.hard-cover-luxury) .page-hero {
  background: oklch(15% 0.014 238) !important;
  border-bottom-color: oklch(28% 0.012 240 / 0.74);
}

body.operate-page.build-page:not(.hard-cover-luxury) .page-hero::before {
  background:
    linear-gradient(24deg, transparent 0 20%, oklch(72% 0.16 75 / 0.08) 47%, transparent 74%),
    linear-gradient(136deg, oklch(38% 0.032 224 / 0.18) 0%, transparent 48%),
    linear-gradient(154deg, oklch(20% 0.016 236) 0%, oklch(12.5% 0.012 244) 58%, oklch(18% 0.014 232) 100%) !important;
  background-size: auto !important;
}

body.operate-page.build-page:not(.hard-cover-luxury) .page-hero::after {
  display: none;
}

body.operate-page.build-page:not(.hard-cover-luxury) .page-hero .eyebrow {
  color: oklch(66% 0.12 240) !important;
}

body.operate-page.build-page:not(.hard-cover-luxury) .page-hero .h-display {
  color: oklch(96% 0.008 90) !important;
}

body.operate-page.build-page:not(.hard-cover-luxury) .page-hero .intro {
  color: oklch(78% 0.024 235) !important;
}

body.operate-page.build-page:not(.hard-cover-luxury) .section {
  border-bottom-color: color-mix(in oklab, var(--operate-mortar) 64%, transparent);
  background:
    linear-gradient(146deg, oklch(98% 0.006 92 / 0.76) 0%, transparent 44%),
    linear-gradient(24deg, transparent 0 22%, oklch(89% 0.013 96 / 0.46) 52%, transparent 82%),
    linear-gradient(166deg, var(--operate-limewash) 0%, var(--operate-stone) 100%) !important;
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-feature-card::after {
  content: none !important;
  animation: none !important;
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-feature-card::before {
  background:
    linear-gradient(180deg, oklch(12% 0.012 245 / 0.04), transparent 36%, oklch(12% 0.012 245 / 0.42)),
    linear-gradient(126deg, oklch(72% 0.16 75 / 0.12), transparent 46%) !important;
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-mechanism {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(220px, 18vw, 292px);
  align-content: end;
  padding-top: clamp(142px, 12vw, 172px) !important;
  border-color: color-mix(in oklab, var(--operate-mortar) 62%, var(--build-ink));
  background:
    linear-gradient(154deg, oklch(17% 0.014 242) 0%, oklch(11.5% 0.012 246) 62%, oklch(19% 0.02 232) 100%) !important;
  background-size: auto !important;
  box-shadow: 0 32px 78px color-mix(in oklab, var(--ink) 24%, transparent);
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-mechanism::before {
  content: "<16";
  position: absolute;
  left: clamp(18px, 2.6vw, 34px);
  top: clamp(14px, 2vw, 28px);
  z-index: 0;
  color: oklch(96% 0.008 90);
  font-family: var(--display);
  font-size: clamp(5.4rem, 11vw, 9.4rem);
  font-weight: 860;
  letter-spacing: -0.055em;
  line-height: 0.72;
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-mechanism::after {
  content: "MIN / MONTH";
  position: absolute;
  left: clamp(22px, 3vw, 42px);
  top: clamp(104px, 11.5vw, 152px);
  z-index: 0;
  color: var(--amber);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-mechanism > * {
  position: relative;
  z-index: 1;
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-mechanism-stack,
body.operate-page.build-page:not(.hard-cover-luxury) .build-panel-rows {
  display: none !important;
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-mechanism-title {
  color: color-mix(in oklab, var(--steam) 86%, var(--canvas-2));
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-mechanism > p:last-child {
  max-width: 28ch;
  color: oklch(83% 0.018 92);
  font-size: clamp(1rem, 1vw, 1.18rem);
  line-height: 1.45;
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-hero-proof {
  gap: clamp(10px, 1.2vw, 16px);
  border: 0;
  background: transparent;
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-hero-proof span {
  border: 1px solid color-mix(in oklab, var(--operate-mortar) 68%, var(--canvas-2));
  border-radius: 2px;
  background:
    linear-gradient(148deg, color-mix(in oklab, var(--canvas-2) 90%, var(--steam) 4%) 0%, color-mix(in oklab, var(--operate-stone) 70%, var(--canvas-2) 30%) 100%);
  color: color-mix(in oklab, var(--ink-2) 88%, var(--steam-deep) 12%);
  box-shadow: 0 12px 30px color-mix(in oklab, var(--ink) 9%, transparent);
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-hero-proof span:first-child {
  background:
    linear-gradient(148deg, oklch(18% 0.014 242) 0%, oklch(12% 0.012 246) 100%);
  color: oklch(96% 0.008 90);
  border-color: oklch(44% 0.018 238);
}

body.operate-page.build-page:not(.hard-cover-luxury) .build-hero-proof span:nth-child(2) {
  background:
    linear-gradient(148deg, color-mix(in oklab, var(--canvas-2) 84%, var(--amber) 14%) 0%, color-mix(in oklab, var(--operate-stone) 68%, var(--canvas-2) 32%) 100%);
}

body.operate-page .operate-routine-section {
  background:
    linear-gradient(130deg, oklch(98% 0.006 90 / 0.72) 0%, transparent 40%),
    linear-gradient(32deg, transparent 0 20%, oklch(89% 0.013 92 / 0.5) 52%, transparent 84%),
    linear-gradient(168deg, var(--operate-limewash) 0%, var(--operate-cool-stone) 100%) !important;
  background-size: auto !important;
}

body.operate-page .operate-routine-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(560px, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

body.operate-page .operate-routine-copy {
  max-width: 640px;
  position: sticky;
  top: 110px;
}

body.operate-page .operate-routine-copy .h-2 {
  margin-top: var(--s-4);
  max-width: 12ch;
}

body.operate-page .operate-routine-copy .body-lg {
  margin-top: var(--s-5);
}

body.operate-page .operate-total {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid color-mix(in oklab, var(--operate-mortar) 76%, var(--canvas-2));
  border-radius: 2px;
  background:
    linear-gradient(142deg, color-mix(in oklab, var(--canvas-2) 92%, var(--amber) 8%), color-mix(in oklab, var(--operate-stone) 86%, var(--canvas-2) 14%));
  color: var(--steam-deep);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
  box-shadow: 0 18px 44px color-mix(in oklab, var(--ink) 7%, transparent);
}

body.operate-page .operate-routine-board {
  display: grid;
  gap: var(--s-5);
}

body.operate-page .operate-routine-board .routine-steps {
  grid-template-columns: 1fr !important;
  gap: var(--s-3) !important;
  background: transparent !important;
}

body.operate-page .operate-routine-board .routine-cell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 84px minmax(150px, 0.34fr) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: start;
  padding: clamp(22px, 2.8vw, 34px) !important;
  border: 1px solid color-mix(in oklab, var(--operate-mortar) 78%, var(--canvas-2));
  border-radius: 2px;
  background:
    linear-gradient(154deg, color-mix(in oklab, var(--canvas-2) 90%, var(--steam) 4%) 0%, color-mix(in oklab, var(--operate-limewash) 82%, var(--canvas-2) 18%) 54%, color-mix(in oklab, var(--operate-stone) 78%, var(--canvas-2) 22%) 100%) !important;
  box-shadow: 0 18px 46px color-mix(in oklab, var(--ink) 7%, transparent);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, box-shadow 220ms ease;
}

body.operate-page .operate-routine-board .routine-cell::after {
  position: absolute;
  right: clamp(14px, 3vw, 34px);
  bottom: clamp(42px, 4.6vw, 64px);
  z-index: 0;
  color: oklch(54% 0.13 240 / 0.18);
  font-family: var(--display);
  font-size: clamp(3.4rem, 6vw, 6.4rem);
  font-weight: 860;
  letter-spacing: -0.045em;
  line-height: 0.78;
  text-transform: uppercase;
}

body.operate-page .operate-routine-board .routine-cell > * {
  position: relative;
  z-index: 1;
}

body.operate-page .operate-routine-board .routine-cell:nth-child(1)::after {
  content: "TEST";
}

body.operate-page .operate-routine-board .routine-cell:nth-child(2)::after {
  content: "FEED";
  color: oklch(72% 0.16 75 / 0.18);
}

body.operate-page .operate-routine-board .routine-cell:nth-child(3)::after {
  content: "RINSE";
}

body.operate-page .operate-routine-board .routine-cell:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--steam) 24%, var(--operate-mortar));
  box-shadow: 0 28px 62px color-mix(in oklab, var(--ink) 10%, transparent);
}

body.operate-page .operate-routine-board .routine-n {
  position: static;
  grid-column: 1;
  grid-row: 1 / span 3;
  font-family: var(--display);
  font-size: clamp(54px, 5vw, 82px);
  font-weight: 780;
  line-height: 0.82;
  color: color-mix(in oklab, var(--ink) 84%, var(--steam) 16%) !important;
  text-shadow: 0 10px 28px color-mix(in oklab, var(--ink) 12%, transparent);
}

body.operate-page .operate-routine-board .routine-time {
  grid-column: 2;
  margin: 0;
  color: var(--amber-deep);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.operate-page .operate-routine-board .routine-title {
  grid-column: 2;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 720;
  line-height: 1.05;
}

body.operate-page .operate-routine-board .routine-body {
  grid-column: 3;
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

body.operate-page .operate-video-panel {
  border: 1px solid color-mix(in oklab, var(--operate-mortar) 78%, var(--canvas-2));
  border-radius: 2px;
  background:
    linear-gradient(148deg, color-mix(in oklab, var(--canvas-2) 88%, var(--steam) 5%) 0%, color-mix(in oklab, var(--operate-stone) 74%, var(--canvas-2) 26%) 100%);
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 22px 56px color-mix(in oklab, var(--ink) 9%, transparent);
}

body.operate-page .operate-video-panel .label-mono {
  margin-bottom: var(--s-4);
  color: var(--steam-deep);
}

body.operate-page .operate-video-panel .video-wrap {
  max-width: none !important;
  border: 1px solid color-mix(in oklab, var(--ink) 18%, var(--operate-mortar));
  border-radius: 2px;
  box-shadow: 0 16px 36px color-mix(in oklab, var(--ink) 13%, transparent);
}

body.operate-page.build-page:not(.hard-cover-luxury) .product-grid,
body.operate-page.build-page:not(.hard-cover-luxury) .help-grid {
  gap: var(--s-3) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.operate-page.build-page:not(.hard-cover-luxury) .product-cell,
body.operate-page.build-page:not(.hard-cover-luxury) .help-cell {
  border: 1px solid color-mix(in oklab, var(--operate-mortar) 78%, var(--canvas-2));
  border-radius: 2px;
  background:
    linear-gradient(152deg, color-mix(in oklab, var(--canvas-2) 90%, var(--steam) 3%) 0%, color-mix(in oklab, var(--operate-limewash) 80%, var(--canvas-2) 20%) 100%) !important;
  box-shadow: 0 14px 34px color-mix(in oklab, var(--ink) 6%, transparent);
}

body.operate-page.build-page:not(.hard-cover-luxury) .product-cell:hover,
body.operate-page.build-page:not(.hard-cover-luxury) .help-cell:hover {
  background:
    linear-gradient(152deg, color-mix(in oklab, var(--canvas-2) 90%, var(--amber) 6%) 0%, color-mix(in oklab, var(--operate-limewash) 78%, var(--canvas-2) 22%) 100%) !important;
  border-color: color-mix(in oklab, var(--steam) 20%, var(--operate-mortar));
}

body.operate-page.build-page:not(.hard-cover-luxury) .cta-strip {
  background:
    linear-gradient(146deg, oklch(98% 0.006 92 / 0.8) 0%, transparent 44%),
    linear-gradient(26deg, transparent 0 24%, oklch(89% 0.013 96 / 0.54) 52%, transparent 84%),
    linear-gradient(164deg, var(--operate-limewash) 0%, var(--operate-stone) 100%) !important;
  border-color: color-mix(in oklab, var(--operate-mortar) 72%, transparent) !important;
}

@media (max-width: 900px) {
  body.installation-page.build-page:not(.hard-cover-luxury) .page-hero .wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "intro"
      "actions"
      "proof"
      "panel" !important;
    align-items: start !important;
  }

  body.installation-page.build-page:not(.hard-cover-luxury) .build-hero-panel {
    width: min(100%, 620px);
    justify-self: start;
  }

  body.installation-page.build-page:not(.hard-cover-luxury) .stat-band-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.installation-page.build-page:not(.hard-cover-luxury) .stat-cell,
  body.installation-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child {
    min-height: 170px !important;
  }

  body.installation-page .install-readiness-grid,
  body.installation-page .install-surface-section .wrap {
    grid-template-columns: 1fr;
  }

  body.installation-page .install-readiness-copy {
    position: static;
  }

  body.installation-page .versus,
  body.installation-page .power-grid {
    grid-template-columns: 1fr !important;
  }

  body.operate-page .operate-routine-wrap {
    grid-template-columns: 1fr;
  }

  body.operate-page .operate-routine-copy {
    position: static;
  }
}

@media (max-width: 620px) {
  body.installation-page.build-page:not(.hard-cover-luxury) .page-hero .h-display {
    max-width: 9.2ch !important;
  }

  body.installation-page.build-page:not(.hard-cover-luxury) .build-mechanism {
    display: none;
  }

  body.installation-page.build-page:not(.hard-cover-luxury) .build-feature-card {
    aspect-ratio: 16 / 9;
  }

  body.installation-page.build-page:not(.hard-cover-luxury) .build-hero-proof {
    grid-template-columns: 1fr;
  }

  body.installation-page.build-page:not(.hard-cover-luxury) .stat-band-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.installation-page.build-page:not(.hard-cover-luxury) .stat-cell {
    min-height: 150px !important;
    padding: 18px !important;
  }

  body.installation-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child {
    min-height: 150px !important;
    padding: 18px !important;
  }

  body.installation-page.build-page:not(.hard-cover-luxury) .stat-num,
  body.installation-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child .stat-num {
    font-size: clamp(28px, 9vw, 42px) !important;
  }

  body.installation-page .install-board-head,
  body.installation-page .install-check-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  body.installation-page .install-surface-grid {
    grid-template-columns: 1fr;
  }

  body.operate-page .operate-routine-board .routine-cell {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  body.operate-page .operate-routine-board .routine-n {
    grid-row: 1 / span 3;
    font-size: clamp(42px, 14vw, 58px);
  }

  body.operate-page .operate-routine-board .routine-body {
    grid-column: 2;
  }
}

/* ====================================================================
   How To Operate -- aesthetic upgrade
   Stamp seal, water care shelf with category tabs and monogram cards,
   richer help section with icons and owner hours table.
   ==================================================================== */

body.operate-page .operate-stamp {
  --stamp-rule: color-mix(in oklab, var(--operate-mortar) 70%, var(--canvas-2));
  position: relative;
  margin-top: clamp(28px, 4vw, 40px);
  padding: clamp(22px, 3vw, 30px) clamp(24px, 3vw, 36px) clamp(20px, 2.6vw, 26px);
  border: 1px solid color-mix(in oklab, var(--operate-mortar) 78%, var(--canvas-2));
  border-radius: 2px;
  background:
    linear-gradient(155deg, color-mix(in oklab, var(--canvas-2) 96%, var(--amber) 4%) 0%, color-mix(in oklab, var(--operate-stone) 84%, var(--canvas-2) 16%) 100%);
  box-shadow:
    0 22px 50px color-mix(in oklab, var(--ink) 8%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--canvas-2) 92%, var(--operate-mortar) 8%);
  overflow: hidden;
}
body.operate-page .operate-stamp::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed color-mix(in oklab, var(--operate-mortar) 60%, transparent);
  border-radius: 1px;
  pointer-events: none;
}
body.operate-page .operate-stamp-rule {
  display: block;
  width: 64px;
  height: 1px;
  margin-bottom: clamp(14px, 1.4vw, 18px);
  background: linear-gradient(90deg, var(--steam-deep), transparent);
}
body.operate-page .operate-stamp-body {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 24px);
  flex-wrap: wrap;
}
body.operate-page .operate-stamp-num {
  font-family: var(--display);
  font-variation-settings: "wdth" 88, "opsz" 96;
  font-weight: 760;
  font-size: clamp(58px, 7vw, 96px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-shadow: 0 8px 18px color-mix(in oklab, var(--ink) 8%, transparent);
}
body.operate-page .operate-stamp-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
}
body.operate-page .operate-stamp-unit {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steam-deep);
}
body.operate-page .operate-stamp-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
body.operate-page .operate-stamp-seal {
  display: block;
  margin-top: clamp(14px, 1.6vw, 20px);
  padding-top: clamp(12px, 1.4vw, 16px);
  border-top: 1px solid color-mix(in oklab, var(--operate-mortar) 56%, transparent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--steam-deep) 72%, var(--ink-3) 28%);
}

/* Water Care Shelf */
body.operate-page .operate-shelf-section {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--canvas-deep) 92%, var(--canvas-2) 8%) 0%, color-mix(in oklab, var(--canvas-deep) 100%, var(--operate-stone) 0%) 100%) !important;
}
body.operate-page .operate-shelf-header {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 760px;
}
body.operate-page .operate-shelf-header .h-2 {
  margin: 0;
  max-width: 16ch;
}
body.operate-page .operate-shelf-sub {
  font-size: clamp(15px, 0.4vw + 13.5px, 17px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
}
body.operate-page .operate-shelf {
  display: grid;
  gap: clamp(28px, 3.6vw, 44px);
}
body.operate-page .operate-shelf-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  padding-block: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid color-mix(in oklab, var(--operate-mortar) 56%, transparent);
}
body.operate-page .operate-shelf-row:first-child {
  border-top-color: color-mix(in oklab, var(--ink) 16%, transparent);
}
body.operate-page .operate-shelf-tab {
  display: grid;
  gap: 10px;
  padding-top: 6px;
  position: sticky;
  top: 100px;
}
body.operate-page .operate-shelf-tab-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
body.operate-page .operate-shelf-tab-label {
  font-family: var(--display);
  font-variation-settings: "wdth" 92, "opsz" 32;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 720;
  letter-spacing: -0.018em;
  line-height: 1;
  color: var(--ink);
}
body.operate-page .operate-shelf-tab-note {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 22ch;
}
body.operate-page .operate-shelf-row .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3) !important;
}

/* Product cell upgrades (scoped to operate page only) */
body.operate-page.build-page:not(.hard-cover-luxury) .operate-shelf .product-cell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: var(--s-3);
  padding: clamp(18px, 2vw, 24px) !important;
  border-radius: 2px;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}
body.operate-page.build-page:not(.hard-cover-luxury) .operate-shelf .product-cell::before {
  content: attr(data-monogram);
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 4px 8px;
  border: 1px solid color-mix(in oklab, var(--operate-mortar) 70%, transparent);
  background: color-mix(in oklab, var(--canvas-2) 92%, var(--steam) 4%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: color-mix(in oklab, var(--steam-deep) 70%, var(--ink) 30%);
  border-radius: 1px;
}
body.operate-page.build-page:not(.hard-cover-luxury) .operate-shelf .product-cell .product-name {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--display);
  font-variation-settings: "wdth" 95, "opsz" 18;
  font-weight: 660;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.operate-page.build-page:not(.hard-cover-luxury) .operate-shelf .product-cell .product-desc {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  min-height: 3.2em;
}
body.operate-page.build-page:not(.hard-cover-luxury) .operate-shelf .product-cell .product-link {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: clamp(10px, 1.2vw, 14px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steam-deep);
  border-top: 1px dashed color-mix(in oklab, var(--operate-mortar) 56%, transparent);
  padding-top: 10px;
}
body.operate-page.build-page:not(.hard-cover-luxury) .operate-shelf .product-cell .product-link::after {
  content: "→";
  transition: transform 220ms ease;
}
body.operate-page.build-page:not(.hard-cover-luxury) .operate-shelf .product-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px color-mix(in oklab, var(--ink) 9%, transparent);
}
body.operate-page.build-page:not(.hard-cover-luxury) .operate-shelf .product-cell:hover .product-link::after {
  transform: translateX(4px);
}
body.operate-page.build-page:not(.hard-cover-luxury) .operate-shelf .product-cell:hover::before {
  border-color: color-mix(in oklab, var(--steam) 30%, var(--operate-mortar));
  color: var(--steam-deep);
}

/* Help / Resources upgrade */
body.operate-page .operate-help-section {
  background:
    linear-gradient(180deg, var(--canvas) 0%, color-mix(in oklab, var(--canvas) 90%, var(--operate-stone) 10%) 100%) !important;
}
body.operate-page .operate-help-header {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(36px, 4vw, 56px);
  max-width: 720px;
}
body.operate-page .operate-help-header .h-2 {
  margin: 0;
  max-width: 14ch;
}
body.operate-page .operate-help-sub {
  font-size: clamp(15px, 0.4vw + 13.5px, 17px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch;
}
body.operate-page .operate-help-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--s-3) !important;
  background: transparent !important;
}
body.operate-page.build-page:not(.hard-cover-luxury) .operate-help-cell {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(28px, 3.4vw, 40px) !important;
  border-radius: 2px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--canvas-2) 92%, var(--steam) 4%) 0%, color-mix(in oklab, var(--operate-limewash) 80%, var(--canvas-2) 20%) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--operate-mortar) 76%, var(--canvas-2)) !important;
}
body.operate-page.build-page:not(.hard-cover-luxury) .operate-help-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--steam) 6%, transparent) 0%, transparent 38%);
  pointer-events: none;
}
body.operate-page .operate-help-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, var(--operate-mortar) 72%, transparent);
  background: color-mix(in oklab, var(--canvas-2) 96%, var(--steam) 2%);
  color: var(--steam-deep);
  border-radius: 2px;
  margin-bottom: 4px;
}
body.operate-page .operate-help-icon svg {
  width: 22px;
  height: 22px;
}
body.operate-page .operate-help-eyebrow {
  margin: 0 !important;
  color: var(--ink-3);
}
body.operate-page .operate-help-cell .help-title {
  margin: 0;
}
body.operate-page .operate-help-cell .help-body {
  margin-top: 0;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}
body.operate-page .operate-help-contacts {
  display: grid;
  gap: 6px;
}
body.operate-page .operate-help-contacts a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid color-mix(in oklab, var(--operate-mortar) 60%, transparent);
  padding-bottom: 3px;
  transition: color 220ms ease, border-color 220ms ease;
  width: max-content;
  max-width: 100%;
}
body.operate-page .operate-help-contacts a:hover {
  color: var(--steam-deep);
  border-bottom-color: var(--steam);
}
body.operate-page .operate-hours {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--operate-mortar) 56%, transparent);
  background: color-mix(in oklab, var(--canvas-2) 90%, var(--operate-stone) 10%);
  border-radius: 2px;
}
body.operate-page .operate-hours li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
body.operate-page .operate-hours-dots {
  border-top: 1px dotted color-mix(in oklab, var(--operate-mortar) 70%, transparent);
  height: 1px;
  align-self: center;
  transform: translateY(2px);
}
body.operate-page .operate-hours-closed {
  color: var(--ink-3);
}
body.operate-page .operate-help-foot {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  line-height: 1.55;
}
body.operate-page .operate-help-btn {
  margin-top: 6px;
  justify-self: start;
}

@media (max-width: 900px) {
  body.operate-page .operate-shelf-row {
    grid-template-columns: 1fr;
  }
  body.operate-page .operate-shelf-tab {
    position: static;
  }
  body.operate-page .operate-help-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  body.operate-page .operate-stamp-num {
    font-size: clamp(48px, 14vw, 72px);
  }
  body.operate-page .operate-shelf-tab-label {
    font-size: clamp(24px, 6vw, 32px);
  }
}

/* ====================================================================
   Bacteria Resistant -- aesthetic upgrade
   Materials face-off with pore visualisation, owner-outcome cards.
   Structure follows the page's content (surface vs surface, then
   downstream owner outcomes), not a generic build-page template.
   ==================================================================== */

body.bacteria-resistant-page {
  --bact-bad: oklch(58% 0.15 28);
  --bact-bad-soft: oklch(94% 0.045 30);
  --bact-good: oklch(55% 0.12 195);
  --bact-good-soft: oklch(95% 0.025 195);
  --bact-stone: oklch(94.5% 0.008 90);
  --bact-line: oklch(80% 0.008 90);
}

body.bacteria-resistant-page .bacteria-split {
  margin-bottom: clamp(56px, 6vw, 88px);
}

body.bacteria-resistant-page .bacteria-faceoff {
  position: relative;
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid color-mix(in oklab, var(--bact-line) 60%, transparent);
}
body.bacteria-resistant-page .bacteria-faceoff-eyebrow {
  margin-bottom: clamp(20px, 2.4vw, 28px);
  color: var(--ink-2);
}
body.bacteria-resistant-page .bacteria-faceoff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
body.bacteria-resistant-page .bacteria-card {
  position: relative;
  display: grid;
  gap: clamp(20px, 2vw, 26px);
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: 2px;
  background: color-mix(in oklab, var(--canvas-2) 96%, var(--bact-stone) 4%);
  border: 1px solid color-mix(in oklab, var(--bact-line) 70%, transparent);
  box-shadow: 0 22px 56px color-mix(in oklab, var(--ink) 7%, transparent);
  overflow: hidden;
  isolation: isolate;
}
body.bacteria-resistant-page .bacteria-card--bad {
  background: linear-gradient(160deg, color-mix(in oklab, var(--canvas-2) 96%, var(--bact-bad) 3%) 0%, color-mix(in oklab, var(--bact-bad-soft) 60%, var(--canvas-2) 40%) 100%);
  border-color: color-mix(in oklab, var(--bact-bad) 22%, var(--bact-line));
}
body.bacteria-resistant-page .bacteria-card--good {
  background: linear-gradient(160deg, color-mix(in oklab, var(--canvas-2) 96%, var(--bact-good) 4%) 0%, color-mix(in oklab, var(--bact-good-soft) 70%, var(--canvas-2) 30%) 100%);
  border-color: color-mix(in oklab, var(--bact-good) 22%, var(--bact-line));
}
body.bacteria-resistant-page .bacteria-card-head {
  display: grid;
  gap: 8px;
}
body.bacteria-resistant-page .bacteria-card-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bact-bad);
  width: max-content;
  padding: 4px 10px;
  border: 1px solid color-mix(in oklab, var(--bact-bad) 40%, transparent);
  border-radius: 1px;
  background: color-mix(in oklab, var(--canvas-2) 88%, var(--bact-bad) 6%);
}
body.bacteria-resistant-page .bacteria-card-tag--ours {
  color: var(--bact-good);
  border-color: color-mix(in oklab, var(--bact-good) 40%, transparent);
  background: color-mix(in oklab, var(--canvas-2) 88%, var(--bact-good) 6%);
}
body.bacteria-resistant-page .bacteria-card-title {
  font-family: var(--display);
  font-variation-settings: "wdth" 92, "opsz" 32;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
body.bacteria-resistant-page .bacteria-pore-grid {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px 18px 14px;
  border: 1px solid color-mix(in oklab, var(--bact-line) 70%, transparent);
  border-radius: 2px;
  background: color-mix(in oklab, var(--canvas-2) 92%, var(--operate-stone, var(--bact-stone)) 8%);
  min-height: 240px;
}

/* Magnification scale tag (top-left) */
body.bacteria-resistant-page .bacteria-pore-scale,
body.bacteria-resistant-page .bacteria-solid-scale {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3, color-mix(in oklab, var(--ink) 55%, var(--canvas)));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
}
body.bacteria-resistant-page .bacteria-pore-scale::before,
body.bacteria-resistant-page .bacteria-solid-scale::before {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

/* Acrylic side: dots in a grid + callout under */
body.bacteria-resistant-page .bacteria-pore-dots {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
body.bacteria-resistant-page .bacteria-pore-dots span {
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
}
body.bacteria-resistant-page .bacteria-pore-grid--bad .bacteria-pore-dots span {
  background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--bact-bad) 70%, transparent) 0%, color-mix(in oklab, var(--bact-bad) 30%, transparent) 60%, transparent 100%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bact-bad) 50%, transparent);
}
body.bacteria-resistant-page .bacteria-pore-callout {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bact-bad);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px dotted color-mix(in oklab, var(--bact-bad) 35%, transparent);
}

/* HDPE side: continuous polymer surface */
body.bacteria-resistant-page .bacteria-pore-grid--good {
  background:
    linear-gradient(150deg, color-mix(in oklab, var(--canvas-2) 80%, var(--bact-good) 5%) 0%, color-mix(in oklab, var(--canvas-2) 92%, var(--bact-good) 2%) 100%);
}
body.bacteria-resistant-page .bacteria-solid {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  height: 100%;
  min-height: 220px;
}
body.bacteria-resistant-page .bacteria-solid-surface {
  position: relative;
  border-radius: 2px;
  border: 1px solid color-mix(in oklab, var(--bact-good) 22%, var(--bact-line));
  overflow: hidden;
  background:
    repeating-linear-gradient(
      180deg,
      color-mix(in oklab, var(--bact-good) 6%, var(--canvas-2)) 0px,
      color-mix(in oklab, var(--bact-good) 6%, var(--canvas-2)) 1px,
      color-mix(in oklab, var(--canvas-2) 96%, var(--bact-good) 2%) 1px,
      color-mix(in oklab, var(--canvas-2) 96%, var(--bact-good) 2%) 8px
    ),
    linear-gradient(150deg, color-mix(in oklab, var(--bact-good-soft) 60%, var(--canvas-2)) 0%, color-mix(in oklab, var(--canvas-2) 92%, var(--bact-good) 3%) 100%);
}
body.bacteria-resistant-page .bacteria-solid-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 38%, color-mix(in oklab, var(--canvas-2) 60%, transparent) 70%);
  pointer-events: none;
}
body.bacteria-resistant-page .bacteria-solid-surface::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 1px solid color-mix(in oklab, var(--bact-good) 50%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(0deg, transparent 49%, color-mix(in oklab, var(--bact-good) 70%, transparent) 49.5%, color-mix(in oklab, var(--bact-good) 70%, transparent) 50.5%, transparent 51%),
    linear-gradient(90deg, transparent 49%, color-mix(in oklab, var(--bact-good) 70%, transparent) 49.5%, color-mix(in oklab, var(--bact-good) 70%, transparent) 50.5%, transparent 51%);
  pointer-events: none;
}
body.bacteria-resistant-page .bacteria-solid-foot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 4px;
}
body.bacteria-resistant-page .bacteria-solid-num {
  font-family: var(--display);
  font-variation-settings: "wdth" 88, "opsz" 96;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 720;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--bact-good);
}
body.bacteria-resistant-page .bacteria-solid-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
body.bacteria-resistant-page .bacteria-solid-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bact-good);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px dotted color-mix(in oklab, var(--bact-good) 35%, transparent);
}
body.bacteria-resistant-page .bacteria-spec {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}
body.bacteria-resistant-page .bacteria-spec li {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
body.bacteria-resistant-page .bacteria-spec li > span:first-child {
  color: var(--ink-2);
}
body.bacteria-resistant-page .bacteria-spec li > span:last-child {
  font-weight: 600;
  color: var(--ink);
}
body.bacteria-resistant-page .bacteria-card--bad .bacteria-spec li > span:last-child {
  color: var(--bact-bad);
}
body.bacteria-resistant-page .bacteria-card--good .bacteria-spec li > span:last-child {
  color: var(--bact-good);
}
body.bacteria-resistant-page .bacteria-spec-dots {
  border-top: 1px dotted color-mix(in oklab, var(--bact-line) 70%, transparent);
  height: 1px;
  align-self: center;
  transform: translateY(2px);
}
body.bacteria-resistant-page .bacteria-card-foot {
  margin: 0;
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid color-mix(in oklab, var(--bact-line) 50%, transparent);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
}

/* Outcomes section */
body.bacteria-resistant-page .bacteria-outcomes-section {
  background: linear-gradient(180deg, var(--canvas) 0%, color-mix(in oklab, var(--canvas) 92%, var(--bact-stone) 8%) 100%);
}
body.bacteria-resistant-page .bacteria-outcomes-header {
  display: grid;
  gap: var(--s-4);
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
body.bacteria-resistant-page .bacteria-outcomes-header .h-2 {
  margin: 0;
  max-width: 16ch;
}
body.bacteria-resistant-page .bacteria-outcomes-sub {
  font-size: clamp(15px, 0.4vw + 13.5px, 17px);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 56ch;
}
body.bacteria-resistant-page .bacteria-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
body.bacteria-resistant-page .bacteria-outcome {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(28px, 3vw, 40px);
  border-radius: 2px;
  border: 1px solid color-mix(in oklab, var(--bact-line) 65%, transparent);
  background: linear-gradient(160deg, color-mix(in oklab, var(--canvas-2) 94%, var(--bact-good) 2%) 0%, color-mix(in oklab, var(--bact-stone) 70%, var(--canvas-2) 30%) 100%);
  box-shadow: 0 22px 50px color-mix(in oklab, var(--ink) 7%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease;
}
body.bacteria-resistant-page .bacteria-outcome:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 64px color-mix(in oklab, var(--ink) 10%, transparent);
}
body.bacteria-resistant-page .bacteria-outcome::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed color-mix(in oklab, var(--bact-line) 50%, transparent);
  border-radius: 1px;
  pointer-events: none;
  z-index: 0;
}
body.bacteria-resistant-page .bacteria-outcome > * {
  position: relative;
  z-index: 1;
}
body.bacteria-resistant-page .bacteria-outcome-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
body.bacteria-resistant-page .bacteria-outcome-num {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 88, "opsz" 96;
  font-weight: 720;
  font-size: clamp(48px, 5vw, 76px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
body.bacteria-resistant-page .bacteria-outcome-unit {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: center;
}
body.bacteria-resistant-page .bacteria-outcome-title {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 95, "opsz" 24;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 660;
  line-height: 1.2;
  color: var(--ink);
}
body.bacteria-resistant-page .bacteria-outcome-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
body.bacteria-resistant-page .bacteria-outcomes-foot {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(24px, 2.4vw, 32px);
  border-top: 1px solid color-mix(in oklab, var(--bact-line) 50%, transparent);
  font-family: var(--display);
  font-variation-settings: "wdth" 95, "opsz" 24;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  max-width: 60ch;
}

@media (max-width: 900px) {
  body.bacteria-resistant-page .bacteria-faceoff-grid {
    grid-template-columns: 1fr;
  }
  body.bacteria-resistant-page .bacteria-outcomes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body.bacteria-resistant-page .bacteria-pore-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  body.bacteria-resistant-page .bacteria-card-title {
    font-size: clamp(22px, 6vw, 28px);
  }
}

/* ====================================================================
   bacteria-resistant — stat-band restyle
   The default build-page stat-band is a dark cosmos panel that fights
   the rest of this page (which is a light material audit). Swap it for
   a paper-stock spec sheet that reads as a continuation of the
   face-off cards: dotted leaders, mono labels, muted bact-good accent,
   tight per-cell vertical rhythm, no detached "focus" border.
   ==================================================================== */
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-band {
  background:
    linear-gradient(180deg, var(--canvas) 0%, color-mix(in oklab, var(--canvas) 92%, var(--bact-stone) 8%) 100%) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--bact-line) 50%, transparent) !important;
  padding-block: clamp(56px, 7vw, 96px) !important;
  position: relative;
  overflow: hidden;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-band::before,
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-band::after {
  content: none !important;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-band .wrap {
  display: grid;
  gap: clamp(28px, 3.4vw, 44px);
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .build-stat-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid color-mix(in oklab, var(--bact-line) 55%, transparent);
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .build-stat-header .eyebrow {
  margin: 0 !important;
  color: var(--bact-good) !important;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .build-stat-header p:last-child {
  max-width: 32ch;
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: var(--display);
  font-variation-settings: "wdth" 92, "opsz" 36;
  font-size: clamp(1.6rem, 1.6vw + 0.9rem, 2.6rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em;
  text-align: left !important;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-band-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid color-mix(in oklab, var(--bact-line) 70%, transparent) !important;
  background: var(--canvas-2) !important;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 22px 50px color-mix(in oklab, var(--ink) 5%, transparent);
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell,
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child {
  position: relative;
  display: grid !important;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: clamp(22px, 2.2vw, 32px) clamp(20px, 2vw, 28px) !important;
  background: var(--canvas-2) !important;
  color: var(--ink) !important;
  border-right: 1px solid color-mix(in oklab, var(--bact-line) 55%, transparent);
  transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1);
  flex-direction: unset !important;
  justify-content: unset !important;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:last-child {
  border-right: 0;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell::before,
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:hover {
  background: color-mix(in oklab, var(--canvas-2) 88%, var(--bact-good) 4%) !important;
  transform: none !important;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:focus,
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:focus-visible {
  outline: none !important;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell .stat-label,
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child .stat-label {
  order: -1;
  margin: 0 !important;
  color: var(--ink-3, color-mix(in oklab, var(--ink) 55%, var(--canvas))) !important;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.3;
  display: flex !important;
  align-items: center;
  gap: 8px;
  grid-column: auto !important;
  grid-row: auto !important;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell .stat-label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--bact-good);
  display: inline-block;
  flex-shrink: 0;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell .stat-num,
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child .stat-num,
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:nth-child(4) .stat-num {
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-variation-settings: "wdth" 88, "opsz" 96;
  font-size: clamp(2.6rem, 3.2vw, 3.8rem) !important;
  font-weight: 720 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.92 !important;
  text-align: left;
  grid-column: auto !important;
  grid-row: auto !important;
}

body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell .stat-note,
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:first-child .stat-note {
  max-width: none !important;
  margin: 4px 0 0 !important;
  padding-top: 12px;
  border-top: 1px dotted color-mix(in oklab, var(--bact-line) 65%, transparent);
  color: var(--ink-2) !important;
  font-family: var(--body, var(--font-body)) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

@media (max-width: 1080px) {
  body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-band-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:nth-child(2) {
    border-right: 0;
  }
  body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:nth-child(-n+2) {
    border-bottom: 1px solid color-mix(in oklab, var(--bact-line) 55%, transparent);
  }
}

@media (max-width: 620px) {
  body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-band-inner {
    grid-template-columns: 1fr !important;
  }
  body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell {
    border-right: 0;
    border-bottom: 1px solid color-mix(in oklab, var(--bact-line) 55%, transparent) !important;
  }
  body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .stat-cell:last-child {
    border-bottom: 0 !important;
  }
}

/* Hero "Material proof assembly" panel — drop the empty layer stack and
   tighten the box, since the spec table below already does the work. */
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .build-mechanism {
  gap: 12px !important;
  padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 22px) !important;
}
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .build-mechanism-stack {
  display: none !important;
}
body.bacteria-resistant-page.build-page:not(.hard-cover-luxury) .build-mechanism > p:last-child {
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
}

/* ====================================================================
   easy-installation — site-survey/pre-flight checklist treatment
   The story is "4 things to confirm before delivery → same-day install."
   Lean into checklist + route language: vertical route line through
   the readiness board, prominent timeline contrast for old vs Eco,
   tightened hero panel matching the bacteria pattern.
   ==================================================================== */
body.installation-page.build-page:not(.hard-cover-luxury) {
  --inst-route: oklch(54% 0.10 200);
  --inst-route-soft: oklch(94% 0.020 200);
  --inst-amber: oklch(76% 0.13 76);
  --inst-line: oklch(82% 0.008 90);
}

/* Hero panel: drop the empty layer stack, mirror bacteria-resistant. */
body.installation-page.build-page:not(.hard-cover-luxury) .build-mechanism {
  gap: 12px !important;
  padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 22px) !important;
}
body.installation-page.build-page:not(.hard-cover-luxury) .build-mechanism-stack {
  display: none !important;
}
body.installation-page.build-page:not(.hard-cover-luxury) .build-mechanism > p:last-child {
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
}

/* Readiness Board: connect the 4 numbered checks with a vertical route line.
   Each number becomes a circular node sitting on the line. */
body.installation-page .install-readiness-board {
  position: relative;
}

body.installation-page .install-check-row {
  position: relative;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  align-items: start;
  padding-block: clamp(22px, 2.6vw, 30px) !important;
}

/* Vertical route line behind the number column */
body.installation-page .install-check-row::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--inst-route) 80%, transparent) 0%,
    color-mix(in oklab, var(--inst-route) 55%, transparent) 100%);
  z-index: 0;
}
body.installation-page .install-check-row:first-of-type::before {
  top: 50%;
}
body.installation-page .install-check-row:last-of-type::before {
  bottom: 50%;
}

/* Numbered nodes: small circle on the route line */
body.installation-page .install-check-num {
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 4px;
  border: 1px solid var(--inst-route);
  border-radius: 50%;
  background: var(--canvas-2);
  color: var(--inst-route) !important;
  font-family: var(--mono);
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  font-weight: 600;
}

/* Subtle ring pulse on hover wrapper */
body.installation-page .install-check-row:hover .install-check-num {
  background: color-mix(in oklab, var(--canvas-2) 86%, var(--inst-route) 8%);
}

/* Status footer cell */
body.installation-page .install-readiness-board::after {
  content: "↓ ready for delivery day · same-day install when 4 checks clear";
  display: block;
  padding: clamp(14px, 1.8vw, 18px) clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--hairline);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklab, var(--inst-route) 10%, transparent) 14px 15px),
    color-mix(in oklab, var(--inst-route-soft) 60%, var(--canvas-2));
  color: var(--inst-route);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Versus comparison: punchier visual hierarchy with big total numbers
   instead of tiny mono footer. The contrast is the message. */
body.installation-page.build-page:not(.hard-cover-luxury) .versus-col {
  display: flex !important;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 44px) !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .versus-col .versus-tag {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: clamp(20px, 2.2vw, 28px) !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .versus-col.alt {
  background: color-mix(in oklab, var(--canvas-2) 85%, var(--inst-route) 6%) !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .versus-row {
  padding: 12px 0 !important;
  border-bottom: 1px dotted color-mix(in oklab, var(--inst-line) 70%, transparent) !important;
  font-size: 14px !important;
  line-height: 1.5;
}

body.installation-page.build-page:not(.hard-cover-luxury) .versus-row:last-of-type {
  border-bottom: 0 !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .versus-col p:last-of-type {
  margin-top: auto !important;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid color-mix(in oklab, var(--inst-line) 60%, transparent);
  font-family: var(--display) !important;
  font-variation-settings: "wdth" 92, "opsz" 32;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--ink-3) !important;
}

body.installation-page.build-page:not(.hard-cover-luxury) .versus-col.alt p:last-of-type {
  color: var(--inst-route) !important;
  border-top-color: color-mix(in oklab, var(--inst-route) 35%, transparent) !important;
}

/* Power cells: small voltage indicator above the volt number */
body.installation-page.build-page:not(.hard-cover-luxury) .power-cell {
  position: relative;
}
body.installation-page.build-page:not(.hard-cover-luxury) .power-cell .power-volt {
  position: relative;
  display: inline-block;
}
body.installation-page.build-page:not(.hard-cover-luxury) .power-cell .power-volt::after {
  content: "";
  position: absolute;
  left: 0;
  width: clamp(120px, 11vw, 180px);
  bottom: -10px;
  height: 6px;
  background: linear-gradient(90deg, var(--inst-amber), color-mix(in oklab, var(--inst-amber) 30%, transparent) 70%, transparent);
  opacity: 0.85;
}
body.installation-page.build-page:not(.hard-cover-luxury) .power-cell:nth-child(2) .power-volt::after {
  background: linear-gradient(90deg, var(--inst-route), color-mix(in oklab, var(--inst-route) 35%, transparent) 70%, transparent);
  opacity: 0.95;
}

/* Surface cards: add a small section-cut indicator at the top so each
   card reads as a tiny ground-profile, not just a numbered card */
body.installation-page .install-surface-card {
  position: relative;
}
body.installation-page .install-surface-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(20px, 3vw, 34px);
  width: clamp(48px, 5vw, 70px);
  height: 3px;
  background: var(--inst-route);
  opacity: 0.85;
}
body.installation-page .install-surface-card:nth-child(2)::before { background: var(--inst-amber); }
body.installation-page .install-surface-card:nth-child(3)::before { background: color-mix(in oklab, var(--inst-route) 70%, var(--inst-amber)); }
body.installation-page .install-surface-card:nth-child(4)::before { background: color-mix(in oklab, var(--inst-amber) 70%, var(--inst-route)); }

/* ============================================================
   ECOZONE PAGE — Water-path flow elevations
   ============================================================ */
body.ecozone-page.build-page:not(.hard-cover-luxury) {
  --eco-ozone: oklch(58% 0.14 215);
  --eco-ozone-soft: oklch(94% 0.025 215);
  --eco-oxygen: oklch(70% 0.11 175);
  --eco-line: oklch(82% 0.008 215);
}

/* Hero panel: drop empty layer stack, mirrors bacteria/installation */
body.ecozone-page.build-page:not(.hard-cover-luxury) .build-mechanism-stack {
  display: none !important;
}
body.ecozone-page.build-page:not(.hard-cover-luxury) .build-mechanism > p:last-child {
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
}

/* 4-step water path: connect cells with progressive hue + flow arrows */
body.ecozone-page .steps {
  position: relative;
  background: var(--eco-line) !important;
}
body.ecozone-page .step-cell {
  position: relative;
  transition: background .2s ease;
}
body.ecozone-page .step-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--eco-ozone);
  opacity: 0.85;
}
body.ecozone-page .step-cell:nth-child(1)::before { background: var(--eco-ozone); }
body.ecozone-page .step-cell:nth-child(2)::before { background: color-mix(in oklab, var(--eco-ozone) 75%, var(--eco-oxygen)); }
body.ecozone-page .step-cell:nth-child(3)::before { background: color-mix(in oklab, var(--eco-oxygen) 75%, var(--eco-ozone)); }
body.ecozone-page .step-cell:nth-child(4)::before { background: var(--eco-oxygen); }

body.ecozone-page .step-cell .step-num {
  font-family: var(--display) !important;
  font-variation-settings: "wdth" 92, "opsz" 48 !important;
  font-weight: 700 !important;
  font-size: clamp(38px, 4vw, 60px) !important;
  color: color-mix(in oklab, var(--eco-ozone) 30%, var(--ink-3)) !important;
  line-height: 1 !important;
}
body.ecozone-page .step-cell:nth-child(2) .step-num {
  color: color-mix(in oklab, var(--eco-ozone) 35%, color-mix(in oklab, var(--eco-oxygen) 65%, var(--ink-3))) !important;
}
body.ecozone-page .step-cell:nth-child(3) .step-num {
  color: color-mix(in oklab, var(--eco-oxygen) 50%, var(--ink-3)) !important;
}
body.ecozone-page .step-cell:nth-child(4) .step-num {
  color: var(--eco-oxygen) !important;
}

/* Flow arrow inside cell, top-right corner (desktop only) */
@media (min-width: 901px) {
  body.ecozone-page .step-cell { overflow: visible !important; }
  body.ecozone-page .step-cell:not(:last-child)::after {
    content: "→" !important;
    position: absolute !important;
    inset: auto !important;
    top: clamp(20px, 2vw, 32px) !important;
    right: clamp(16px, 2vw, 28px) !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    transform: none !important;
    color: color-mix(in oklab, var(--eco-ozone) 55%, var(--ink-3)) !important;
    font-family: var(--mono);
    font-size: 18px;
    line-height: 1;
    z-index: 2;
    opacity: 0.85 !important;
  }
  body.ecozone-page .step-cell:nth-child(2)::after { color: color-mix(in oklab, var(--eco-ozone) 50%, var(--eco-oxygen)); }
  body.ecozone-page .step-cell:nth-child(3)::after { color: color-mix(in oklab, var(--eco-oxygen) 65%, var(--ink-3)); }
}

/* Stat band: subtle ozone glow on the molecular cells */
body.ecozone-page .stat-cell:nth-child(3) .stat-num {
  color: var(--eco-oxygen) !important;
}
body.ecozone-page .stat-cell:nth-child(1) .stat-num {
  color: color-mix(in oklab, var(--eco-ozone) 50%, var(--canvas)) !important;
}

/* Versus: big totals at bottom (mirrors installation pattern) */
body.ecozone-page .versus-col {
  display: flex !important;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 44px) !important;
}
body.ecozone-page .versus-col.alt {
  background: color-mix(in oklab, var(--canvas-2) 85%, var(--eco-ozone) 6%) !important;
}
body.ecozone-page .versus-row {
  padding: 12px 0 !important;
  border-bottom: 1px dotted color-mix(in oklab, var(--eco-line) 70%, transparent) !important;
}
body.ecozone-page .versus-row:last-of-type {
  border-bottom: 0 !important;
}
body.ecozone-page .versus-col p:last-of-type {
  margin-top: auto !important;
  padding-top: clamp(20px, 2.4vw, 28px) !important;
  border-top: 1px solid color-mix(in oklab, var(--eco-line) 60%, transparent) !important;
  font-family: var(--display) !important;
  font-variation-settings: "wdth" 92, "opsz" 32 !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--ink-3) !important;
}
body.ecozone-page .versus-col.alt p:last-of-type {
  color: var(--eco-oxygen) !important;
  border-top-color: color-mix(in oklab, var(--eco-oxygen) 35%, transparent) !important;
}

/* ============================================================
   ENERGY-EFFICIENCY PAGE — proportional heat-loss + thermal route
   ============================================================ */
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) {
  --en-amber: oklch(72% 0.16 75);
  --en-amber-deep: oklch(58% 0.16 65);
  --en-blue: oklch(60% 0.13 230);
  --en-line: oklch(82% 0.008 90);
}

/* Hero panel: drop empty layer stack, mirrors other build pages */
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .build-mechanism-stack {
  display: none !important;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .build-mechanism > p:last-child {
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
}

/* Loss-cell percentage visualization: subtle proportional bar
   under each big % number so 70/20/10 reads as scale, not just digits */
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-section .loss-cell {
  position: relative;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-section .loss-cell::after {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--en-amber-deep), color-mix(in oklab, var(--en-amber) 35%, transparent)) !important;
  transform: none !important;
  opacity: 0.85 !important;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-section .loss-cell:nth-child(1)::after {
  width: 70% !important;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-section .loss-cell:nth-child(2)::after {
  width: 20% !important;
  opacity: 0.6 !important;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-proof-section .loss-cell:nth-child(3)::after {
  width: 10% !important;
  opacity: 0.4 !important;
}

/* Mech-cell route: progressive thermal coloring, top-down (cover -> heater) */
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-cell {
  position: relative;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-cell::after {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 3px !important;
  height: auto !important;
  background: var(--en-amber) !important;
  transform: none !important;
  opacity: 0.9 !important;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-cell:nth-child(2)::after {
  background: color-mix(in oklab, var(--en-amber) 60%, var(--en-blue)) !important;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-cell:nth-child(3)::after {
  background: color-mix(in oklab, var(--en-blue) 60%, var(--en-amber)) !important;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-cell:nth-child(4)::after {
  background: var(--en-blue) !important;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-cell:nth-child(2) .label-mono {
  color: color-mix(in oklab, var(--en-blue) 70%, var(--en-amber)) !important;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-cell:nth-child(3) .label-mono {
  color: color-mix(in oklab, var(--en-blue) 80%, var(--en-amber)) !important;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-route-grid .mech-cell:nth-child(4) .label-mono {
  color: var(--en-blue) !important;
}

/* Wager card: highlight the $30/month claim with subtle underline */
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-card .h-2 {
  position: relative;
}
body.energy-efficiency-page.build-page:not(.hard-cover-luxury) .energy-wager-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  left: clamp(32px, 5vw, 70px) !important;
  bottom: clamp(24px, 3vw, 38px) !important;
  width: clamp(60px, 6vw, 88px) !important;
  height: 3px !important;
  background: var(--en-amber) !important;
  transform: none !important;
  opacity: 1 !important;
}


/* ============================================================
   WARRANTY PAGE — coverage stamp + legal-document polish
   ============================================================ */
body.warranty-page.build-page:not(.hard-cover-luxury) {
  --warr-amber: oklch(72% 0.16 75);
  --warr-amber-deep: oklch(58% 0.16 65);
  --warr-line: oklch(82% 0.008 90);
  --warr-stamp: oklch(45% 0.13 60);
}

/* Hero panel compact, mirrors other build pages */
body.warranty-page.build-page:not(.hard-cover-luxury) .build-mechanism-stack {
  display: none !important;
}
body.warranty-page.build-page:not(.hard-cover-luxury) .build-mechanism > p:last-child {
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
}

/* Coverage cells: warranty-stamp treatment.
   Lifetime cells get warm amber accent (commitment).
   2-year cell gets neutral muted accent (solid but bounded). */
body.warranty-page.build-page:not(.hard-cover-luxury) .coverage-cell {
  position: relative;
}
body.warranty-page.build-page:not(.hard-cover-luxury) .coverage-cell::after {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  width: auto !important;
  background: var(--warr-amber) !important;
  transform: none !important;
  opacity: 1 !important;
}
body.warranty-page.build-page:not(.hard-cover-luxury) .coverage-cell:nth-child(3)::after {
  background: color-mix(in oklab, var(--ink-3) 70%, var(--warr-line)) !important;
  opacity: 0.6 !important;
}

/* "COVERED" mono tag above the period in lifetime cells */
body.warranty-page.build-page:not(.hard-cover-luxury) .coverage-cell::before {
  content: "✓ Covered";
  display: block;
  margin-bottom: clamp(12px, 1.4vw, 18px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warr-stamp);
}
body.warranty-page.build-page:not(.hard-cover-luxury) .coverage-cell:nth-child(3)::before {
  content: "✓ Covered · 24 months";
  color: var(--ink-3);
}

/* Tighten the coverage-period to feel like a stamp */
body.warranty-page.build-page:not(.hard-cover-luxury) .coverage-cell .coverage-period {
  position: relative;
  display: inline-block;
}
body.warranty-page.build-page:not(.hard-cover-luxury) .coverage-cell:not(:nth-child(3)) .coverage-period {
  color: var(--warr-stamp) !important;
}

/* Exclusion rows: legal-document polish with hierarchy ruling */
body.warranty-page.build-page:not(.hard-cover-luxury) .exclusion-list {
  border-top: 1px solid color-mix(in oklab, var(--warr-line) 80%, var(--ink-3)) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--warr-line) 80%, var(--ink-3)) !important;
}
body.warranty-page.build-page:not(.hard-cover-luxury) .exclusion-row {
  position: relative;
  padding: clamp(14px, 1.6vw, 20px) clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px) clamp(56px, 6vw, 80px) !important;
  border-bottom: 1px dotted color-mix(in oklab, var(--warr-line) 70%, transparent) !important;
}
body.warranty-page.build-page:not(.hard-cover-luxury) .exclusion-row:last-child {
  border-bottom: 0 !important;
}
body.warranty-page.build-page:not(.hard-cover-luxury) .exclusion-row .exclusion-n {
  position: absolute !important;
  left: clamp(12px, 1.4vw, 18px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  color: var(--warr-stamp) !important;
}
body.warranty-page.build-page:not(.hard-cover-luxury) .exclusion-row .exclusion-text {
  font-family: var(--display) !important;
  font-variation-settings: "wdth" 92, "opsz" 24 !important;
  font-size: clamp(16px, 1vw + 12px, 19px) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}

/* Legal block: pilcrow paragraph markers + tighter rhythm */
body.warranty-page.build-page:not(.hard-cover-luxury) .legal-block p {
  position: relative;
  padding-left: clamp(22px, 2vw, 30px) !important;
  margin-bottom: clamp(18px, 2vw, 26px) !important;
}
body.warranty-page.build-page:not(.hard-cover-luxury) .legal-block p::before {
  content: "§";
  position: absolute;
  left: 0;
  top: 0;
  color: color-mix(in oklab, var(--warr-stamp) 70%, var(--ink-3));
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
}
body.warranty-page.build-page:not(.hard-cover-luxury) .legal-block .date {
  margin-top: clamp(20px, 2.4vw, 30px) !important;
  padding-top: clamp(14px, 1.6vw, 20px) !important;
  border-top: 1px solid color-mix(in oklab, var(--warr-line) 70%, transparent);
  padding-left: 0 !important;
}
body.warranty-page.build-page:not(.hard-cover-luxury) .legal-block .date::before {
  content: none;
}


/* ============================================================
   FONT UNIFICATION — match homepage on all elevated build pages.
   Homepage system (style.css):
     --font-display: Playfair Display  (italic accents only)
     --font-body:    Inter Tight       (everything: headlines + body)
   Headlines are Inter Tight 600 with -0.02em tracking; Playfair
   appears italic on accent words only. Hard-cover keeps its
   own luxury serif system via :not(.hard-cover-luxury).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter+Tight:wght@300;400;500;600;700&display=swap');

body.build-page:not(.hard-cover-luxury) {
  --display: 'Inter Tight', system-ui, sans-serif;
  --body: 'Inter Tight', system-ui, sans-serif;
  --mono: 'Inter Tight', system-ui, sans-serif;
  --build-display: 'Inter Tight', system-ui, sans-serif;
  --build-body: 'Inter Tight', system-ui, sans-serif;
  --build-mono: 'Inter Tight', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;
}

/* Everything in Inter Tight by default */
body.build-page:not(.hard-cover-luxury),
body.build-page:not(.hard-cover-luxury) :is(
  h1, h2, h3, h4, h5, h6, p, a, span, strong, em, li, td, th,
  .eyebrow, .label-mono, .versus-tag, .stat-label, .cost-tag, .cost-period,
  .install-check-num, .step-num, .loss-pct, .cost-amount, .coverage-period,
  .power-volt, .routine-n, .energy-savings-callout, .install-board-head,
  .install-note, .energy-assumption-note, .exclusion-n,
  .h-display, .h-2, .h-3, .step-title, .mech-title, .coverage-title,
  .loss-title, .build-mechanism-title, .testi-quote, .build-stat-num, .stat-num
) {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
}

/* Headlines: tight tracking, weight 600, no display-font variation settings */
body.build-page:not(.hard-cover-luxury) :is(
  h1, h2, h3, .h-display, .h-2, .h-3, .step-title, .mech-title,
  .coverage-title, .loss-title, .build-mechanism-title
) {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-variation-settings: normal !important;
}

/* Italic accents (em inside headlines) flip to Playfair italic, like homepage */
body.build-page:not(.hard-cover-luxury) :is(.h-display, h1, h2) em,
body.build-page:not(.hard-cover-luxury) :is(.h-display, h1, h2) i {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* Numeric data displays — Inter Tight, weight 600 */
body.build-page:not(.hard-cover-luxury) :is(
  .stat-num, .build-stat-num, .step-num, .loss-pct, .cost-amount,
  .coverage-period, .power-volt, .routine-n, .install-check-num
) {
  font-weight: 600 !important;
  font-variation-settings: normal !important;
}

/* Body copy: weight 300 like homepage's body-lg/body-md */
body.build-page:not(.hard-cover-luxury) :is(
  .lede, .body-lg, .body-md, p:not(.eyebrow):not(.label-mono):not(.versus-tag)
) {
  font-weight: 300 !important;
}