/* Home-only hero scene and wave styling. */

.home-page .container {
  max-width: min(100% - 32px, 1320px);
  padding-right: 0;
  padding-left: 0;
}

/* coastal-page-bg lives behind .builder-page (z1) and cannot paint over an
   in-hero scene, so composite brand waves here over the scene, using the same
   breeze SVGs + --conv driver + exact layer geometry as coastal-page-bg for
   continuity into the strips/sections below. .parallax-hero stays transparent
   and keeps isolation:isolate (its z-stack is self-contained). */
.home-page .builder-block.parallax-hero { background: transparent !important; }
.home-page .builder-block.parallax-hero::after { display: none !important; }
.home-page .parallax-hero .hero-bg,
.home-page .parallax-hero .hero-tint { background: transparent !important; }
/* Scene extends to the very top, UNDER the translucent menu (was top:var(--nav-h),
   which left a dark band + hard seam under the menu). Bottom still stops at the
   first menu (--atf-menu-h), so it's sized to the space between the menus while
   bleeding under the top one. */
.home-page .parallax-hero .hero-bg { top: 0 !important; }
/* Media (scene SVG + video) must COVER the full width AND height of its container
   — the band between the top menu and the first sticky menu. The SVG uses
   preserveAspectRatio:slice (cover) and fills its .hero-bg box; the video already
   uses object-fit:cover with the same box bounds. */
.home-page .parallax-hero .hero-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Home 30A residence scene: CSS-driven motion so the SMIL pause guard can keep
   preventing the old hero flicker while this background still moves. */
.home-page .parallax-hero .hero-svg.hero-system-splash {
  opacity: 0.86 !important;
  color: rgb(150, 224, 255);
  --hero-scene-sky-0: rgb(5, 12, 31);
  --hero-scene-sky-1: rgb(20, 46, 84);
  --hero-scene-sky-2: rgb(72, 103, 139);
  --hero-scene-sky-3: rgb(178, 130, 108);
  --hero-scene-sky-4: rgb(240, 178, 128);
  --hero-scene-gulf-0: rgba(42, 66, 100, 0.86);
  --hero-scene-gulf-1: rgb(10, 20, 38);
  --hero-scene-ground-0: rgb(25, 34, 42);
  --hero-scene-ground-1: rgb(9, 16, 25);
  --hero-scene-ink: rgb(32, 58, 79);
  --hero-scene-ink-soft: rgba(116, 154, 178, 0.72);
  --hero-scene-plan-grid: rgba(150, 224, 255, 0.22);
  --hero-scene-plan-line: rgba(174, 226, 255, 0.72);
  --hero-scene-plan-warm: rgba(232, 189, 131, 0.76);
  --hero-scene-material: rgba(174, 226, 255, 0.16);
  --hero-scene-stucco: rgba(190, 194, 181, 0.82);
  --hero-scene-stucco-shadow: rgba(112, 132, 128, 0.74);
  --hero-scene-roof: rgba(21, 42, 61, 0.88);
  --hero-scene-condenser: rgba(42, 66, 76, 0.84);
  --hero-scene-grass: rgba(123, 139, 113, 0.74);
  --hero-scene-line: rgba(174, 226, 255, 0.54);
  --hero-scene-line-strong: rgba(205, 240, 255, 0.78);
  --hero-scene-warm: rgba(232, 189, 131, 0.82);
  --hero-scene-window: rgba(248, 210, 145, 0.92);
  --hero-scene-panel: rgba(12, 28, 52, 0.30);
  --hero-scene-panel-stroke: rgba(178, 226, 255, 0.34);
  --hero-scene-path-light: rgba(248, 205, 124, 0.92);
  --hero-scene-deck: rgba(110, 130, 118, 0.42);
  --hero-scene-villa: rgba(224, 219, 199, 0.88);
  --hero-scene-villa-side: rgba(177, 181, 168, 0.78);
  --hero-scene-villa-roof: rgba(43, 72, 86, 0.88);
  --hero-scene-villa-trim: rgba(223, 236, 230, 0.48);
}

:root[data-theme="light"] .home-page .parallax-hero .hero-svg.hero-system-splash {
  opacity: 0.72 !important;
  color: rgb(8, 111, 128);
  /* Keep the animated SVG in its own normal compositing path. The standalone
     prototype is smooth with normal whole-scene compositing in both modes;
     multiplying this full viewport added a live-only GPU-sensitive pass. */
  mix-blend-mode: normal;
  --hero-scene-sky-0: rgb(218, 237, 248);
  --hero-scene-sky-1: rgb(231, 242, 248);
  --hero-scene-sky-2: rgb(246, 239, 224);
  --hero-scene-sky-3: rgb(229, 202, 154);
  --hero-scene-sky-4: rgb(210, 182, 132);
  --hero-scene-gulf-0: rgba(126, 181, 194, 0.46);
  --hero-scene-gulf-1: rgba(70, 122, 142, 0.44);
  --hero-scene-ground-0: rgb(213, 197, 159);
  --hero-scene-ground-1: rgb(176, 153, 111);
  --hero-scene-ink: rgb(19, 50, 78);
  --hero-scene-ink-soft: rgba(37, 77, 106, 0.62);
  --hero-scene-plan-grid: rgba(5, 103, 128, 0.20);
  --hero-scene-plan-line: rgba(5, 103, 128, 0.56);
  --hero-scene-plan-warm: rgba(175, 126, 45, 0.58);
  --hero-scene-material: rgba(5, 103, 128, 0.10);
  --hero-scene-stucco: rgba(255, 251, 238, 0.88);
  --hero-scene-stucco-shadow: rgba(188, 174, 137, 0.64);
  --hero-scene-roof: rgba(69, 113, 126, 0.46);
  --hero-scene-condenser: rgba(82, 111, 116, 0.62);
  --hero-scene-grass: rgba(119, 128, 88, 0.56);
  --hero-scene-line: rgba(5, 103, 128, 0.42);
  --hero-scene-line-strong: rgba(5, 86, 116, 0.68);
  --hero-scene-warm: rgba(175, 126, 45, 0.70);
  --hero-scene-window: rgba(204, 145, 52, 0.54);
  --hero-scene-panel: rgba(255, 255, 255, 0.36);
  --hero-scene-panel-stroke: rgba(7, 68, 103, 0.28);
  --hero-scene-path-light: rgba(174, 118, 38, 0.58);
  --hero-scene-deck: rgba(146, 126, 86, 0.24);
  --hero-scene-villa: rgba(255, 252, 238, 0.74);
  --hero-scene-villa-side: rgba(213, 202, 168, 0.52);
  --hero-scene-villa-roof: rgba(55, 114, 128, 0.42);
  --hero-scene-villa-trim: rgba(34, 84, 102, 0.34);
}

.home-page .parallax-hero .hero-system-splash .hero-stop-sky-0 { stop-color: var(--hero-scene-sky-0); }
.home-page .parallax-hero .hero-system-splash .hero-stop-sky-1 { stop-color: var(--hero-scene-sky-1); }
.home-page .parallax-hero .hero-system-splash .hero-stop-sky-2 { stop-color: var(--hero-scene-sky-2); }
.home-page .parallax-hero .hero-system-splash .hero-stop-sky-3 { stop-color: var(--hero-scene-sky-3); }
.home-page .parallax-hero .hero-system-splash .hero-stop-sky-4 { stop-color: var(--hero-scene-sky-4); }
.home-page .parallax-hero .hero-system-splash .hero-stop-gulf-0 { stop-color: var(--hero-scene-gulf-0); }
.home-page .parallax-hero .hero-system-splash .hero-stop-gulf-1 { stop-color: var(--hero-scene-gulf-1); }
.home-page .parallax-hero .hero-system-splash .hero-stop-ground-0 { stop-color: var(--hero-scene-ground-0); }
.home-page .parallax-hero .hero-system-splash .hero-stop-ground-1 { stop-color: var(--hero-scene-ground-1); }

.home-page .parallax-hero .hero-system-splash .hero-blueprint-plan {
  color: var(--hero-scene-plan-line);
  opacity: 0.34;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hero-scene-line) 10%, transparent));
  mix-blend-mode: screen;
  transform-box: view-box;
  transform-origin: 0 0;
}

:root[data-theme="light"] .home-page .parallax-hero .hero-system-splash .hero-blueprint-plan {
  opacity: 0.22;
  mix-blend-mode: multiply;
}

.home-page .parallax-hero .hero-system-splash .hero-plan-grid-line {
  fill: none;
  stroke: var(--hero-scene-plan-grid);
  stroke-width: 0.85;
}

.home-page .parallax-hero .hero-system-splash .hero-blueprint-walls,
.home-page .parallax-hero .hero-system-splash .hero-blueprint-flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .parallax-hero .hero-system-splash .hero-blueprint-walls {
  stroke: var(--hero-scene-plan-line);
  stroke-width: 1.15;
  opacity: 0.34;
}

.home-page .parallax-hero .hero-system-splash .hero-blueprint-flow {
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: 0.45;
}

.home-page .parallax-hero .hero-system-splash .hero-blueprint-flow circle,
.home-page .parallax-hero .hero-system-splash .hero-blueprint-flow path:not(.hero-plan-line) {
  stroke: var(--hero-scene-plan-warm);
  opacity: 0.32;
}

.home-page .parallax-hero .hero-system-splash .hero-plan-line {
  fill: none;
  animation: none;
}

.home-page .parallax-hero .hero-system-splash .hero-plan-line--layout {
  stroke: var(--hero-scene-plan-line);
  stroke-width: 1.1;
  opacity: 0.26;
}

.home-page .parallax-hero .hero-system-splash .hero-plan-line--service-run {
  stroke: var(--hero-scene-plan-warm);
  stroke-width: 1.35;
  stroke-dasharray: 18 28;
  opacity: 0.42;
  animation: heroSystemFlow 42s linear infinite;
}

.home-page .parallax-hero .hero-system-splash .hero-plan-line--handoff {
  stroke: var(--hero-scene-plan-warm);
  stroke-width: 1.4;
  stroke-dasharray: 20 34;
  opacity: 0.30;
  animation: heroSystemFlow 50s linear infinite;
}

.home-page .parallax-hero .hero-system-splash .hero-material-wash {
  fill: var(--hero-scene-material);
  opacity: 0.24;
  mix-blend-mode: screen;
  animation: none;
}

:root[data-theme="light"] .home-page .parallax-hero .hero-system-splash .hero-material-wash {
  opacity: 0.12;
  mix-blend-mode: multiply;
}

.home-page .parallax-hero .hero-system-splash .hero-cloud {
  fill: rgba(225, 235, 245, 0.14);
  opacity: 0.16;
  animation: heroCloudBreath 22s ease-in-out infinite alternate;
}

:root[data-theme="light"] .home-page .parallax-hero .hero-system-splash .hero-cloud {
  fill: rgba(255, 255, 255, 0.20);
}

.home-page .parallax-hero .hero-system-splash .hero-horizon-line {
  stroke: var(--hero-scene-warm);
  stroke-width: 1.2;
  opacity: 0.58;
}

.home-page .parallax-hero .hero-system-splash .hero-gulf-band {
  fill: none;
  stroke: var(--hero-scene-line);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.25;
}

.home-page .parallax-hero .hero-system-splash .hero-dune-ridge {
  fill: none;
  stroke: var(--hero-scene-warm);
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0.24;
  stroke-dasharray: 28 18;
}

.home-page .parallax-hero .hero-system-splash .hero-dune-ridge--shoreline {
  opacity: 0.32;
  stroke: var(--hero-scene-line);
  stroke-dasharray: 42 26;
}

.home-page .parallax-hero .hero-system-splash .hero-dune-foreground {
  fill: color-mix(in srgb, var(--hero-scene-ground-1) 76%, transparent);
  opacity: 0.72;
}

.home-page .parallax-hero .hero-system-splash .hero-boardwalk-deck {
  fill: color-mix(in srgb, var(--hero-scene-deck) 84%, transparent);
  stroke: var(--hero-scene-line);
  stroke-width: 1;
  opacity: 0.72;
}

.home-page .parallax-hero .hero-system-splash .hero-boardwalk {
  opacity: 0.70;
}

.home-page .parallax-hero .hero-system-splash .hero-boardwalk-rail,
.home-page .parallax-hero .hero-system-splash .hero-boardwalk-posts {
  fill: none;
  stroke: var(--hero-scene-line);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.48;
}

.home-page .parallax-hero .hero-system-splash .hero-path-lights {
  fill: var(--hero-scene-path-light);
  opacity: 0.28;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hero-scene-path-light) 45%, transparent));
}

:root[data-theme="light"] .home-page .parallax-hero .hero-system-splash .hero-path-lights {
  opacity: 0.18;
}

.home-page .parallax-hero .hero-system-splash .hero-flow-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  opacity: 0.34;
  stroke-dasharray: 18 28;
  animation: heroSystemFlow 22s linear infinite;
}

.home-page .parallax-hero .hero-system-splash .hero-service-route {
  color: var(--hero-scene-warm);
  opacity: 0.54;
}

.home-page .parallax-hero .hero-system-splash .hero-route-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14 18;
  opacity: 0.32;
  animation: heroSystemFlow 31s linear infinite;
}

.home-page .parallax-hero .hero-system-splash .hero-route-line--continuation {
  color: var(--hero-scene-line);
  opacity: 0.22;
  animation-duration: 36s;
}

.home-page .parallax-hero .hero-system-splash .hero-route-line--compact {
  opacity: 0.16;
  animation-duration: 34s;
}

.home-page .parallax-hero .hero-system-splash .hero-pad,
.home-page .parallax-hero .hero-system-splash .hero-villa-shadow {
  fill: rgba(0, 0, 0, 0.22);
}

.home-page .parallax-hero .hero-system-splash .hero-court-connector {
  fill: color-mix(in srgb, var(--hero-scene-warm) 30%, var(--hero-scene-ground-1));
  stroke: color-mix(in srgb, var(--hero-scene-warm) 54%, transparent);
  stroke-width: 1.1;
  opacity: 0.26;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.12));
}

.home-page .parallax-hero .hero-system-splash .hero-luxury-villa {
  opacity: 0.70;
}

:root[data-theme="light"] .home-page .parallax-hero .hero-system-splash .hero-luxury-villa {
  opacity: 0.50;
}

.home-page .parallax-hero .hero-system-splash .hero-sideyard-service {
  opacity: 0.90;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
}

:root[data-theme="light"] .home-page .parallax-hero .hero-system-splash .hero-sideyard-service {
  opacity: 0.76;
  filter: drop-shadow(0 8px 12px rgba(13, 41, 52, 0.08));
}

.home-page .parallax-hero .hero-system-splash .hero-villa-main {
  fill: var(--hero-scene-villa);
  stroke: rgba(220, 235, 232, 0.22);
  stroke-width: 1;
}

.home-page .parallax-hero .hero-system-splash .hero-villa-veranda {
  fill: color-mix(in srgb, var(--hero-scene-villa) 44%, transparent);
  stroke: var(--hero-scene-villa-trim);
  stroke-width: 0.9;
  opacity: 0.64;
}

.home-page .parallax-hero .hero-system-splash .hero-villa-wing {
  fill: var(--hero-scene-villa-side);
  stroke: rgba(220, 235, 232, 0.16);
  stroke-width: 1;
}

.home-page .parallax-hero .hero-system-splash .hero-villa-roof {
  fill: var(--hero-scene-villa-roof);
  stroke: var(--hero-scene-ink-soft);
  stroke-width: 1;
}

.home-page .parallax-hero .hero-system-splash .hero-villa-glass rect {
  fill: var(--hero-scene-window);
  opacity: 0.70;
}

.home-page .parallax-hero .hero-system-splash .hero-villa-trim {
  fill: none;
  stroke: var(--hero-scene-villa-trim);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.62;
}

.home-page .parallax-hero .hero-system-splash .hero-villa-colonnade {
  fill: none;
  stroke: var(--hero-scene-villa-trim);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.58;
}

.home-page .parallax-hero .hero-system-splash .hero-lantern-row {
  opacity: 0.44;
}

.home-page .parallax-hero .hero-system-splash .hero-condenser-shell {
  fill: var(--hero-scene-condenser);
  stroke: var(--hero-scene-ink-soft);
  stroke-width: 1;
}

.home-page .parallax-hero .hero-system-splash .hero-condenser-top {
  fill: color-mix(in srgb, var(--hero-scene-condenser) 82%, var(--hero-scene-line));
  stroke: var(--hero-scene-ink-soft);
  stroke-width: 1;
  opacity: 0.84;
}

.home-page .parallax-hero .hero-system-splash .hero-condenser-photo {
  opacity: 0.98;
  filter:
    drop-shadow(0 14px 20px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 15px color-mix(in srgb, var(--hero-scene-warm) 14%, transparent))
    saturate(0.86)
    contrast(1.06)
    brightness(0.92);
}

:root[data-theme="light"] .home-page .parallax-hero .hero-system-splash .hero-condenser-photo {
  opacity: 0.88;
  filter:
    drop-shadow(0 9px 14px rgba(12, 40, 52, 0.18))
    saturate(0.76)
    contrast(1.02)
    brightness(0.98);
}

.home-page .parallax-hero .hero-system-splash .hero-service-court {
  fill: color-mix(in srgb, var(--hero-scene-deck) 74%, transparent);
  stroke: var(--hero-scene-line);
  stroke-width: 0.9;
  opacity: 0.58;
}

.home-page .parallax-hero .hero-system-splash .hero-equipment-clearance {
  fill: none;
  stroke: var(--hero-scene-warm);
  stroke-width: 1;
  stroke-dasharray: 18 14;
  opacity: 0.38;
}

.home-page .parallax-hero .hero-system-splash .hero-service-pavers,
.home-page .parallax-hero .hero-system-splash .hero-lineset,
.home-page .parallax-hero .hero-system-splash .hero-privacy-screen path {
  fill: none;
  stroke: var(--hero-scene-line);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.44;
}

.home-page .parallax-hero .hero-system-splash .hero-service-pavers {
  stroke: var(--hero-scene-warm);
  opacity: 0.18;
}

.home-page .parallax-hero .hero-system-splash .hero-lineset {
  stroke: var(--hero-scene-warm);
  stroke-width: 1.35;
  opacity: 0.66;
}

.home-page .parallax-hero .hero-system-splash .hero-lineset--secondary,
.home-page .parallax-hero .hero-system-splash .hero-lineset--compact {
  stroke: var(--hero-scene-warm);
  opacity: 0.38;
}

.home-page .parallax-hero .hero-system-splash .hero-lineset-junction {
  fill: var(--hero-scene-warm);
  opacity: 0.64;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--hero-scene-warm) 58%, transparent));
}

.home-page .parallax-hero .hero-system-splash .hero-privacy-screen {
  opacity: 0.52;
}

.home-page .parallax-hero .hero-system-splash .hero-privacy-screen path:first-child {
  fill: color-mix(in srgb, var(--hero-scene-villa-side) 42%, transparent);
  stroke: var(--hero-scene-villa-trim);
  opacity: 0.82;
}

.home-page .parallax-hero .hero-system-splash .hero-service-kit {
  fill: color-mix(in srgb, var(--hero-scene-condenser) 78%, var(--hero-scene-warm));
  stroke: var(--hero-scene-warm);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.66;
}

.home-page .parallax-hero .hero-system-splash .hero-clipboard path {
  fill: none;
  stroke: var(--hero-scene-warm);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

.home-page .parallax-hero .hero-system-splash .hero-clipboard path:first-child {
  fill: color-mix(in srgb, var(--hero-scene-villa) 42%, transparent);
  stroke: var(--hero-scene-villa-trim);
  opacity: 0.64;
}

.home-page .parallax-hero .hero-system-splash .hero-clipboard .hero-checkmark {
  stroke: var(--hero-scene-line-strong);
  stroke-width: 1.35;
  opacity: 0.82;
}

.home-page .parallax-hero .hero-system-splash .hero-landscape-light path {
  fill: none;
  stroke: var(--hero-scene-warm);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.52;
}

.home-page .parallax-hero .hero-system-splash .hero-lantern {
  fill: var(--hero-scene-path-light);
  opacity: 0.70;
  filter: drop-shadow(0 0 7px var(--hero-scene-path-light));
}

.home-page .parallax-hero .hero-system-splash .hero-condenser-louvers,
.home-page .parallax-hero .hero-system-splash .hero-fan-ring {
  stroke: var(--hero-scene-line);
  stroke-width: 1.1;
  opacity: 0.72;
}

.home-page .parallax-hero .hero-system-splash .hero-fan-well {
  fill: rgba(0, 0, 0, 0.30);
}

.home-page .parallax-hero .hero-system-splash .hero-fan-rotor {
  fill: var(--hero-scene-line-strong);
  opacity: 0.76;
  transform-origin: 0 0;
  animation: heroFanSpin 8s linear infinite;
}

.home-page .parallax-hero .hero-system-splash .hero-conditioned-air .hero-flow-line {
  opacity: 0.28;
}

.home-page .parallax-hero .hero-system-splash .hero-conditioned-air .hero-flow-line--return {
  opacity: 0.12;
}

.home-page .parallax-hero .hero-system-splash .hero-panel-back {
  fill: var(--hero-scene-panel);
  stroke: var(--hero-scene-panel-stroke);
  stroke-width: 1.2;
}

.home-page .parallax-hero .hero-system-splash .hero-compact-service-moment {
  display: none;
  opacity: 0.90;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.18));
}

.home-page .parallax-hero .hero-system-splash .hero-sea-oats {
  fill: none;
  stroke: var(--hero-scene-grass);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

.home-page .parallax-hero .hero-system-splash .hero-sea-oats ellipse {
  fill: color-mix(in srgb, var(--hero-scene-grass) 72%, var(--hero-scene-warm));
  stroke: none;
  opacity: 0.82;
}

@keyframes heroSystemFlow {
  to { stroke-dashoffset: -88; }
}

@keyframes heroFanSpin {
  to { transform: rotate(360deg); }
}

@keyframes heroCloudBreath {
  0% { opacity: 0.08; }
  100% { opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .parallax-hero .hero-system-splash .hero-cloud,
  .home-page .parallax-hero .hero-system-splash .hero-material-wash,
  .home-page .parallax-hero .hero-system-splash .hero-plan-line,
  .home-page .parallax-hero .hero-system-splash .hero-flow-line,
  .home-page .parallax-hero .hero-system-splash .hero-route-line,
  .home-page .parallax-hero .hero-system-splash .hero-fan-rotor {
    animation: none !important;
  }
}

@media (max-width: 980px) {
  .home-page .parallax-hero .hero-system-splash .hero-luxury-villa,
  .home-page .parallax-hero .hero-system-splash .hero-court-connector,
  .home-page .parallax-hero .hero-system-splash .hero-sideyard-service--wide,
  .home-page .parallax-hero .hero-system-splash .hero-service-route--wide,
  .home-page .parallax-hero .hero-system-splash .hero-conditioned-air--wide,
  .home-page .parallax-hero .hero-system-splash .hero-path-lights,
  .home-page .parallax-hero .hero-system-splash .hero-route-line--compact {
    display: none;
  }

  .home-page .parallax-hero .hero-system-splash .hero-blueprint-plan {
    transform: translate(300px, 300px) scale(0.58);
    opacity: 0.20;
  }

  .home-page .parallax-hero .hero-system-splash .hero-compact-service-moment {
    display: block;
    transform-box: view-box;
    transform-origin: 0 0;
    transform: translate(840px, 560px) scale(0.76);
    opacity: 0.76;
  }
}

@media (max-width: 699px) {
  .home-page .parallax-hero .hero-system-splash .hero-blueprint-plan {
    transform: translate(500px, 350px) scale(0.42);
    opacity: 0.16;
  }

  .home-page .parallax-hero .hero-system-splash .hero-material-wash {
    display: none;
  }

  .home-page .parallax-hero .hero-system-splash .hero-service-pavers {
    display: none;
  }

  .home-page .parallax-hero .hero-system-splash .hero-compact-service-moment {
    transform: translate(760px, 590px) scale(0.66);
    opacity: 0.62;
  }
}

/* Home-only content-template extraction. Keep this file home-only and loaded before content-templates.css. */
/* Home first-two-sections (services + areas) are a quick-scan list, not the
    interior editorial magazine — tighten density (hero_motif_polish Phase 3).
    Scoped to .home-page so interior cards keep the prototype/internal.css density.
    Home uses .le-mag-grid (not -large), so target the card directly. */
.home-page .le-mag-card {
  padding-top: 26px !important;
  padding-bottom: 30px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  gap: 36px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.4s ease, border-color 0.4s ease !important;
}
.home-page .le-mag-card:hover {
  transform: translateY(-5px) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(140, 220, 255, 0.3) !important;
}
:root[data-theme="light"] .home-page .le-mag-card {
  background: rgba(0, 51, 102, 0.02) !important;
  border-color: rgba(0, 51, 102, 0.08) !important;
}
:root[data-theme="light"] .home-page .le-mag-card:hover {
  background: rgba(0, 51, 102, 0.04) !important;
  border-color: rgba(0, 119, 190, 0.2) !important;
}

.home-page .le-mag-card .le-mag-mark { width: 140px; height: 140px; }

/* Straighten the home list-row CTA column (desktop): the flex-fallback card gave
   .le-mag-actions a variable width, so the coral pills landed at 7 different x's
   (~84px spread = crooked). Let the body absorb the slack and fix the actions width
   → the pills align in one clean column; "Read more" arrows stay right-aligned.
   Home list rows only; no visual redesign, just alignment. */
@media (min-width: 768px) {
  .home-page .le-mag-card .le-mag-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .home-page .le-mag-card .le-mag-actions {
    flex: 0 0 208px !important;
    justify-content: space-between !important;
  }
}

/* Home service/area cards didn't stack on mobile: internal.css (which carries the
   `.le .le-mag-card → 1fr` mobile stack) isn't loaded on home, and the existing stack
   rule is `.le`-scoped while home is `.home-page`. So the 3-col flex fallback crammed
   the title into a narrow middle column and clipped "Read More". Force a clean single-
   column stack on home, with the numeral rail + the actions as horizontal rows. */
@media (max-width: 767px) {
  .home-page .le-mag-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .home-page .le-mag-rail {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 12px !important;
  }
  .home-page .le-mag-actions {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}

/* Home services/areas content — center to the SAME theme content column the
   post-area uses (var(--content-max-width,1200px) / --content-pad-x). The bare
   .le-mag-grid had no width/centering on home (internal.css isn't loaded here),
   so it ran edge-to-edge / off-center vs the rest of the page. Layout-only =
   identical in both themes. Scoped to #home-content-area so interior role pages
   (wider editorial grid) are untouched. */
.home-page #home-content-area .le-mag-grid,
.home-page #home-content-area .section-list__intro {
  max-width: var(--content-max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-pad-x, 10px);
  padding-right: var(--content-pad-x, 10px);
}

/* "The Coastal Breeze Difference" divider motif (features-grid header). The .mark
   was inheriting Bootstrap's <mark> cream highlight (background:rgb(252,248,227));
   render the brand logo MONOCHROME on a transparent ground instead. */
.home-page .features-grid-block .why-anchor .mark--brand-logo {
  background-color: transparent !important;   /* kill Bootstrap .mark cream */
  padding: 0 !important;
  width: auto;
  height: 84px;
  opacity: 1;
}
.home-page .features-grid-block .why-anchor__logo {
  display: block;
  height: 100%;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  margin: 0 auto;
  filter: grayscale(1) brightness(1.9) contrast(1.05);   /* DARK: light mono mark */
  opacity: 0.85;
}
:root[data-theme="light"] .home-page .features-grid-block .why-anchor__logo {
  filter: grayscale(1) brightness(0.35) contrast(1.1);   /* LIGHT: dark mono mark */
  opacity: 0.7;
}
/* The trust bar / heading already divides subsequent sections — delete the 2nd+
   features-grid motif. Order-independent (no brittle positional #home-post-N ids):
   any features-grid preceded by another features-grid drops its motif. */
.home-page .block-wrapper--features-grid ~ .block-wrapper--features-grid .why-anchor {
  display: none !important;
}
/* ============================================================
   HOME SERVICE / AREA DIRECTORY — card polish (UX/UI pass, 2026-06-03)
   The home .le-mag-card rows read flat (near-invisible surface, a tiny
   default "i" numeral) and the coral "Schedule" pill shouts. Elevate to a
   refined "service plate": layered surface + depth, a Cormorant chapter
   numeral, a champagne hover-spine, and a tamed ghost CTA. Home-scoped
   (.home-page) so interior role cards (prototype/internal.css) are untouched.
   Dark is the default; light overrides follow.
   ============================================================ */

/* ── Card: material, depth, and a champagne chapter-spine that lights on hover ── */
.home-page .le-mag-card {
  background: linear-gradient(152deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.012) 62%) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 44px -30px rgba(0,8,24,0.72) !important;
  overflow: hidden !important;
}
.home-page .le-mag-card::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 16px !important; bottom: 16px !important;
  width: 2px !important; border-radius: 0 2px 2px 0 !important;
  background: linear-gradient(180deg, transparent, rgba(221,189,131,0.65), transparent) !important;
  opacity: 0.4 !important;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
}
.home-page .le-mag-card:hover {
  transform: translateY(-5px) !important;
  background: linear-gradient(152deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.02) 62%) !important;
  border-color: rgba(221,189,131,0.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 32px 62px -34px rgba(0,8,24,0.85) !important;
}
.home-page .le-mag-card:hover::after { opacity: 1 !important; }

/* ── Chapter numeral: Cormorant display serif, champagne, editorial anchor ── */
.home-page .le-mag-rail {
  align-self: flex-start !important;
  padding-top: 3px !important;
  min-width: 56px !important;
}
.home-page .le-mag-num {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 0.9 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  color: #e3c587 !important;
  /* a bare `span { color … !important }` block rule (earlier @layer) otherwise wins the
     color cascade despite lower specificity — text-fill paints the glyphs regardless. */
  -webkit-text-fill-color: #e3c587 !important;
  font-feature-settings: "lnum" 1 !important;
}
.home-page .le-mag-rail .le-mag-tag {
  display: block !important;
  margin-top: 9px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(221,189,131,0.55) !important;
  white-space: nowrap !important;
}

/* ── Ghost coral CTA: keep the schedule identity, lose the shout (fills on hover) ── */
.home-page .le-mag-split-cta {
  background: transparent !important;
  border: 1.5px solid rgba(201,122,90,0.6) !important;
  color: rgb(226,164,134) !important;
  box-shadow: none !important;
}
.home-page .le-mag-split-cta:hover {
  /* --le-grad-warm is .le-scoped (undefined on .home-page → transparent fill, dark
     text unreadable); use the explicit coral gradient, matching the base home rule. */
  background: linear-gradient(110deg, rgb(255, 200, 175) 0%, rgb(255, 160, 130) 100%) !important;
  border-color: transparent !important;
  color: rgb(38,16,6) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -10px rgba(160,76,50,0.5) !important;
}

/* ── Read More: quiet by default, champagne + advancing arrow on hover ── */
.home-page .le-mag-arrow {
  color: rgba(224,238,255,0.58) !important;
  font-weight: 600 !important;
  transition: color 0.3s ease !important;
}
.home-page .le-mag-arrow svg { transition: transform 0.3s ease !important; }
.home-page .le-mag-card:hover .le-mag-arrow { color: #e3c587 !important; }
.home-page .le-mag-card:hover .le-mag-arrow svg { transform: translateX(3px) !important; }

/* ── Light theme ── */
:root[data-theme="light"] .home-page .le-mag-card {
  background: linear-gradient(152deg, rgba(255,253,248,0.92), rgba(247,242,232,0.6)) !important;
  border-color: rgba(193,154,84,0.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 18px 40px -30px rgba(20,48,79,0.4) !important;
}
:root[data-theme="light"] .home-page .le-mag-card:hover {
  border-color: rgba(193,154,84,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 30px 56px -34px rgba(20,48,79,0.5) !important;
}
:root[data-theme="light"] .home-page .le-mag-num { color: #915f1e !important; -webkit-text-fill-color: #915f1e !important; }
:root[data-theme="light"] .home-page .le-mag-rail .le-mag-tag { color: rgba(151,113,43,0.72) !important; }
:root[data-theme="light"] .home-page .le-mag-split-cta { border-color: rgba(176,90,55,0.55) !important; color: rgb(176,74,47) !important; }
:root[data-theme="light"] .home-page .le-mag-split-cta:hover { background: linear-gradient(110deg, rgb(194, 104, 73) 0%, rgb(160, 76, 50) 100%) !important; color: #fff !important; }
:root[data-theme="light"] .home-page .le-mag-arrow { color: rgba(20,60,110,0.6) !important; }
:root[data-theme="light"] .home-page .le-mag-card:hover .le-mag-arrow { color: #b08433 !important; }

/* prefers-reduced-motion: kill the card-lift + CTA-lift + arrow-advance for this new
   home service-card block (matches the project's existing PRM discipline). */
@media (prefers-reduced-motion: reduce) {
  .home-page .le-mag-card:hover { transform: none !important; }
  .home-page .le-mag-split-cta:hover { transform: none !important; }
  .home-page .le-mag-arrow svg,
  .home-page .le-mag-card:hover .le-mag-arrow svg { transition: none !important; transform: none !important; }
}
/* Maintenance badge uses the prototype's cool concierge accent. */
#home-post-area [data-block-type="pricing-table"] .pricing-table-block__badge,
:root[data-theme="light"] #home-post-area [data-block-type="pricing-table"] .pricing-table-block__badge {
  background: linear-gradient(110deg, rgb(120, 200, 255), rgb(80, 140, 220)) !important;
  color: rgb(10, 21, 48) !important;
  border-color: transparent !important;
}
:root[data-theme="dark"] #home-post-area [data-block-type="pricing-table"] .pricing-table-block__badge {
  background: linear-gradient(110deg, rgb(120, 200, 255), rgb(80, 140, 220)) !important;
  color: rgb(16, 26, 42) !important;
}
/* ── D2 · Feather the home content-panel overlays (kill hard section seams below fold) ──
   #home-content-area / #home-post-area muted the page-bg waves with a FLAT translucent
   rectangle, so each panel ended in a hard horizontal edge against the waves (the "hard
   edges below the fold"). Ramp the overlay in/out at top+bottom so the panel dissolves
   into the page instead of cutting. Both themes. */
.home-page #home-content-area,
.home-page #home-post-area {
  background: linear-gradient(to bottom,
    transparent 0, rgba(244, 239, 226, 0.30) 80px,
    rgba(244, 239, 226, 0.30) calc(100% - 80px), transparent 100%) !important;
}
:root[data-theme="dark"] .home-page #home-content-area,
:root[data-theme="dark"] .home-page #home-post-area {
  background: linear-gradient(to bottom,
    transparent 0, rgba(2, 6, 15, 0.38) 80px,
    rgba(2, 6, 15, 0.38) calc(100% - 80px), transparent 100%) !important;
}
/* Home decorative card marks/numerals: match the interior .le-mag-mark feather. */
.home-page .le-mag-mark {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 100%) !important;
          mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 100%) !important;
}
/* ============================================================
   IN-PAGE MENU STACKING FIX  (TAG-20260620-MENU-Z)
   The fixed in-page menu (#home-post-strip, z-index:34) sits inside .home-page
   (a z-index:1 stacking context). Its sibling .home-content-area is z-index:40,
   so the listings painted OVER the menu while scrolling past. Raise the menu
   above the content (40) but below the main nav (.cb-nav = 50).
   ============================================================ */
.home-page #home-post-strip,
.home-page .home-post-strip {
  z-index: 45 !important;
}
/* ============================================================
   IN-PAGE MENU APPEARANCE  (TAG-20260620-INPAGE-MENU)
   The scrollspy rail read flat. Lift it to a crafted floating glass rail:
   a subtle depth gradient (still fully opaque, so the strip-crossfade stays
   legible), a refined top hairline, a separating drop-shadow, more letter
   air, and an underline that grows from centre on hover. Active stays
   brand-cyan — gold is reserved for actions/editorial. Scoped to
   #home-post-strip so the (recently-tuned) category strips are untouched.
   ============================================================ */
.home-page #home-post-strip {
  background: linear-gradient(180deg, rgb(6, 12, 24) 0%, rgb(2, 6, 14) 100%) !important;
  border-top: 1px solid rgba(190, 220, 250, 0.22) !important;
  border-bottom: 1px solid rgba(190, 220, 250, 0.08) !important;
  box-shadow: 0 14px 34px -24px rgba(0, 6, 18, 0.9) !important;
}
:root[data-theme="light"] .home-page #home-post-strip {
  background: linear-gradient(180deg, rgb(253, 249, 241) 0%, rgb(249, 243, 232) 100%) !important;
  border-top: 1px solid rgba(176, 138, 60, 0.26) !important;
  border-bottom: 1px solid rgba(40, 30, 20, 0.08) !important;
  box-shadow: 0 14px 30px -24px rgba(120, 96, 40, 0.28) !important;
}
.home-page #home-post-strip .home-post-strip__items a {
  letter-spacing: 0.2em !important;
}
/* underline grows from centre on hover (matches the active rail's position) */
.home-page #home-post-strip .home-post-strip__items a:not(.active)::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(140, 220, 255, 0.75), transparent) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform 0.3s ease !important;
}
.home-page #home-post-strip .home-post-strip__items a:not(.active):hover::after {
  transform: scaleX(1) !important;
}
.home-page #home-post-strip .home-post-strip__items a:hover {
  color: rgb(225, 240, 255) !important;
}
:root[data-theme="light"] .home-page #home-post-strip .home-post-strip__items a:hover {
  color: rgb(10, 64, 110) !important;
}
/* active rail: a touch more presence */
.home-page #home-post-strip .home-post-strip__items a.active::after {
  height: 2px !important;
  box-shadow: 0 0 10px rgba(140, 220, 255, 0.8) !important;
}
.home-page {
  --home-sect: clamp(1.9rem, 3.3vw, 3rem);
  --fluid-pad-y: var(--home-sect) !important;
}
/* Zero the redundant inter-block margin — BUT exclude the ABF elements that use a
   deliberate NEGATIVE margin to dock the category strip into the hero fold
   (.home-services-strip-wrapper / --atf-menu-pull-buffer at ~line 1925) and the
   hero itself. A blanket reset here had clobbered that pull-up and dropped the
   strip out of the ABF. */
.home-page .block-wrapper:not(.block-wrapper--category-strip-block):not(.home-services-strip-wrapper):not(.block-wrapper--parallax-hero-block) {
  margin-top: 0 !important;
}
.home-page .block-wrapper > section,
.home-page .block-wrapper > .builder-block {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Systematic prose-half cadence: every post-area section gets the SAME --home-sect
   outer padding so the rhythm is deliberate, not accidental. The trust strip
   (#home-post-area [data-block-type="headline-block"]) shipped with 0 wrapper padding — the SOLE cause of the 48px seam
   breaks around it. This is OUTER padding only (inner block content untouched) and
   home-scoped (.home-post-area / #home-post-* are home-only — no interior or shared
   element is affected). The dense section-list zone (services/areas, with docked
   strips) keeps its own functional spacing intentionally. */
.home-page .home-post-area > .block-wrapper[id^="home-post-"],
.home-page #home-post-area [data-block-type="headline-block"] {
  padding-top: var(--home-sect) !important;
  padding-bottom: var(--home-sect) !important;
}

/* Home map-trail motifs: a page-level dashed route borrowed from the hero's
   schematic line language. The SVG lives behind the content, while the small
   HVAC glyphs sit in the outer gutters so the section lists read as guided
   service maps instead of isolated rows. */
.home-page #home-content-area,
.home-page #home-post-area {
  position: relative !important;
  overflow: visible !important;
}

.home-page #home-content-area > .block-wrapper,
.home-page #home-post-area > .block-wrapper {
  position: relative !important;
  z-index: 1 !important;
}

.home-page .home-map-trail {
  --home-trail-cool: rgba(173, 232, 255, 0.84);
  --home-trail-warm: rgba(226, 197, 135, 0.78);
  --home-trail-soft: rgba(190, 220, 250, 0.18);
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.home-page .home-map-trail--section-lists {
  inset-block-start: clamp(-52px, -4vw, -26px) !important;
  inset-block-end: -24px !important;
}

.home-page .home-map-trail--post {
  inset-block-start: -36px !important;
}

.home-page .home-map-trail__svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.home-page .home-map-trail__path {
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
  stroke-width: 1.45 !important;
  stroke-dasharray: 10 16 !important;
  opacity: 0.88 !important;
  animation: homeMapTrailDash 30s linear infinite !important;
}

.home-page .home-map-trail__path--cool {
  stroke: var(--home-trail-cool) !important;
  filter: drop-shadow(0 0 6px rgba(126, 224, 255, 0.75)) !important;
}
.home-page .home-map-trail__path--warm {
  stroke: var(--home-trail-warm) !important;
  filter: drop-shadow(0 0 6px rgba(226, 197, 135, 0.65)) !important;
  animation-duration: 36s !important;
  animation-direction: reverse !important;
}

.home-page .home-map-trail__motif {
  position: absolute !important;
  width: clamp(82px, 7vw, 126px) !important;
  height: clamp(82px, 7vw, 126px) !important;
  color: rgba(140, 220, 255, 0.76) !important;
  opacity: 0.16 !important;
  transform: rotate(var(--trail-motif-rotate, 0deg)) scale(var(--trail-motif-scale, 1)) !important;
  transform-origin: 50% 50% !important;
  filter: drop-shadow(0 0 16px rgba(67, 190, 240, 0.10)) !important;
}

.home-page .home-map-trail__motif .le-motif {
  width: 100% !important;
  height: 100% !important;
}

.home-page .home-map-trail__motif--supply {
  --trail-motif-rotate: 5deg;
  left: max(18px, calc((100vw - var(--le-section-max, 1180px)) / 2 - 92px)) !important;
  top: 10% !important;
}

.home-page .home-map-trail__motif--branch {
  --trail-motif-rotate: -8deg;
  right: max(18px, calc((100vw - var(--le-section-max, 1180px)) / 2 - 96px)) !important;
  top: 41% !important;
  color: rgba(226, 197, 135, 0.76) !important;
  opacity: 0.15 !important;
}

.home-page .home-map-trail__motif--valve {
  --trail-motif-rotate: 9deg;
  left: max(18px, calc((100vw - var(--le-section-max, 1180px)) / 2 - 84px)) !important;
  top: 70% !important;
  opacity: 0.13 !important;
}

.home-page .home-map-trail__motif--filter {
  --trail-motif-rotate: -5deg;
  right: max(18px, calc((100vw - var(--le-section-max, 1180px)) / 2 - 92px)) !important;
  top: 24% !important;
  color: rgba(226, 197, 135, 0.72) !important;
  opacity: 0.13 !important;
}

.home-page .home-map-trail__motif--coil {
  --trail-motif-rotate: 8deg;
  left: max(18px, calc((100vw - var(--le-section-max, 1180px)) / 2 - 94px)) !important;
  top: 68% !important;
}

:root[data-theme="light"] .home-page .home-map-trail {
  --home-trail-cool: rgba(0, 63, 125, 0.22);
  --home-trail-warm: rgba(153, 104, 28, 0.20);
  --home-trail-soft: rgba(20, 50, 100, 0.12);
}

:root[data-theme="light"] .home-page .home-map-trail__motif {
  color: rgba(0, 63, 125, 0.62) !important;
  opacity: 0.13 !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
}

:root[data-theme="light"] .home-page .home-map-trail__motif--branch,
:root[data-theme="light"] .home-page .home-map-trail__motif--filter {
  color: rgba(153, 104, 28, 0.58) !important;
}

/* --- Parking off-screen decoration -----------------------------------------
   Measured on the live homepage at 1280x800: 9.39 Mpx of animated element area
   across 88 running animations, against the standalone prototype's 3.06 Mpx
   across 41 — and 5.76 Mpx of that, 61%, is off-screen while the visitor is
   looking at the hero. The scene is not the outlier; a page's worth of
   decoration animating where nobody can see it is.

   These two are the safe part of that: the map trails animate
   stroke-dashoffset and the footer animates background-position, both
   paint-only properties that keep ticking and invalidating for the life of
   the page no matter where the viewport is. Parking them while off-screen
   cannot change anything the visitor sees, by construction.

   Deliberately NOT parked: `_reveal-fallback`, the reveal-on-scroll fallback.
   Pausing that off-screen could strand its content at opacity 0 — the whole
   point of a fallback is that it finishes. If you extend the parked set, apply
   the same test: would freezing this while off-screen leave anything in a
   wrong state when it scrolls in? */
.home-page .is-anim-parked,
.home-page .is-anim-parked * {
  animation-play-state: paused !important;
}

@keyframes homeMapTrailDash {
  to { stroke-dashoffset: -116; }
}

@keyframes homeMapTrailPulse {
  0%, 100% { opacity: 0.38; transform: translateY(0); }
  46% { opacity: 0.68; transform: translateY(4px); }
}

@media (max-width: 1099px) and (min-width: 760px) {
  .home-page .home-map-trail {
    display: block !important;
    inset-inline: -28px !important;
    opacity: 0.56 !important;
  }

  .home-page .home-map-trail__path {
    stroke-width: 1.25 !important;
    opacity: 0.64 !important;
  }

  .home-page .home-map-trail__entry {
    display: block !important;
    stroke-width: 1.25 !important;
    opacity: 0.58 !important;
  }

  .home-page .home-map-trail__connector,
  .home-page .home-map-trail__arrow,
  .home-page .home-map-trail__motif {
    display: none !important;
  }
}

@media (max-width: 759px) {
  .home-page .home-map-trail {
    display: block !important;
    inset-inline: -8px !important;
    opacity: 0.44 !important;
  }

  .home-page .home-map-trail--section-lists {
    inset-block-start: -18px !important;
    inset-block-end: -12px !important;
  }

  .home-page .home-map-trail--post {
    inset-block-start: -18px !important;
  }

  .home-page .home-map-trail__path {
    stroke-width: 1.2 !important;
    stroke-dasharray: 8 18 !important;
    opacity: 0.68 !important;
  }

  .home-page .home-map-trail__entry {
    display: block !important;
    stroke-width: 1.2 !important;
    stroke-dasharray: 8 16 !important;
    opacity: 0.52 !important;
  }

  .home-page .home-map-trail__path--warm {
    opacity: 0.62 !important;
  }

  .home-page .home-map-trail__connector,
  .home-page .home-map-trail__arrow,
  .home-page .home-map-trail__motif {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-map-trail__path,
  .home-page .home-map-trail__entry,
  .home-page .home-map-trail__connector,
  .home-page .home-map-trail__arrow {
    animation: none !important;
  }
}

/* Distributed home motif system: each major section owns a quiet anchor in its
   gutter so the motif language travels down the page instead of sitting as one
   pasted overlay on top of the section-list rows. */
.home-page :is(#home-services, #home-areas) {
  position: relative !important;
  overflow: clip !important;
}

.home-page :is(#home-services, #home-areas) > :is(.section-list, .builder-block, .container) {
  position: relative !important;
  z-index: 1 !important;
}

.home-page .home-section-motif {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
  color: rgba(140, 220, 255, 0.92) !important;
  opacity: 0.18 !important;
  transform: rotate(var(--home-motif-rotate, 0deg)) scale(var(--home-motif-scale, 1)) !important;
  transform-origin: 50% 50% !important;
  filter: drop-shadow(0 0 18px rgba(67, 190, 240, 0.10)) !important;
}

.home-page .home-section-motif .le-motif {
  width: 100% !important;
  height: 100% !important;
}

:root[data-theme="light"] .home-page .home-section-motif {
  color: rgba(0, 63, 125, 0.72) !important;
  opacity: 0.12 !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
}

.home-page .home-section-motif--services-primary {
  --home-motif-rotate: 0deg;
  --home-motif-scale: 1;
  width: clamp(118px, 10.5vw, 176px) !important;
  height: clamp(118px, 10.5vw, 176px) !important;
  left: max(14px, calc((100vw - var(--le-section-max, 1180px)) / 2 - 86px)) !important;
  top: clamp(225px, 24%, 340px) !important;
}

.home-page .home-section-motif--services-secondary {
  --home-motif-rotate: 0deg;
  width: clamp(106px, 9vw, 152px) !important;
  height: clamp(106px, 9vw, 152px) !important;
  right: max(14px, calc((100vw - var(--le-section-max, 1180px)) / 2 - 76px)) !important;
  top: clamp(500px, 55%, 720px) !important;
  opacity: 0.14 !important;
}

.home-page .home-section-motif--areas-primary {
  --home-motif-rotate: 0deg;
  width: clamp(122px, 11vw, 184px) !important;
  height: clamp(122px, 11vw, 184px) !important;
  right: max(14px, calc((100vw - var(--le-section-max, 1180px)) / 2 - 90px)) !important;
  top: clamp(220px, 20%, 330px) !important;
  color: rgba(226, 197, 135, 0.84) !important;
  opacity: 0.15 !important;
}

.home-page .home-section-motif--areas-secondary {
  --home-motif-rotate: 0deg;
  width: clamp(102px, 8.6vw, 148px) !important;
  height: clamp(102px, 8.6vw, 148px) !important;
  left: max(14px, calc((100vw - var(--le-section-max, 1180px)) / 2 - 76px)) !important;
  top: clamp(560px, 54%, 780px) !important;
  opacity: 0.13 !important;
}

@media (max-width: 700px) {
  .home-page .home-section-motif {
    display: none !important;
  }
}
/* 2 — Trust strip (#home-post-area [data-block-type="headline-block"]): it's a .category-strip--trust DARK BANNER at
   template width (matches the home's services/areas strips). The ugliness was the
   token layout — a 4-col grid that spread them edge-to-edge and orphaned
   "Family-owned" onto a 2nd line. Fix: center the five tokens as ONE balanced row
   inside the banner; the banner's own dark fill covers the full width, so no
   inner box/hairline is needed (an earlier hairline band made an ugly box-in-box). */
#home-post-area [data-block-type="headline-block"] .headline-block,
#home-post-area [data-block-type="headline-block"] .container,
#home-post-area [data-block-type="headline-block"] .headline-block__simple {
  max-width: var(--le-section-max, 1180px) !important;
  margin-inline: auto !important;
}
#home-post-area [data-block-type="headline-block"] .headline-block__subtitle {
  display: flex !important;              /* was a 4-col grid */
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 6px 0 !important;
  border: none !important;
}
#home-post-area [data-block-type="headline-block"] .headline-block__trust-token {
  padding: 8px clamp(14px, 2.2vw, 26px) !important;
}
/* 3 — Every OTHER below-fold post-area block (features-grid "Why"/"Process",
   pricing-table "Maintenance", paragraph "Expertise", faq) shipped with
   max-width:none on its .builder-block, so its content ran out to the 5% wrapper
   gutter — ~58px wider per side than the trust strip above (rule 2) and the
   services/areas content column. Lock every post-area builder-block to the SAME
   --le-section-max (1180) theme column, centered, so the whole below-fold stack
   reads as one content width. The headline owns its own rule above, so it's
   excluded here. Layout-only (identical in both themes); scoped to #home-post-area
   so #home-content-area and interior role pages are untouched. */
.home-page #home-post-area > .block-wrapper:not([data-block-type="headline-block"]) > .builder-block {
  max-width: var(--le-section-max, 1180px) !important;
  margin-inline: auto !important;
}
.home-page .section-list {
  position: relative !important;
  overflow: hidden !important;
  --section-flow-blue: rgba(140, 220, 255, 0.22);
  --section-flow-gold: rgba(226, 197, 135, 0.24);
  --section-flow-soft: rgba(190, 220, 250, 0.10);
}

.home-page .section-list::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: clamp(24px, 4vw, 52px) max(10px, calc((100vw - var(--le-section-max, 1180px)) / 2 - 16px)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    linear-gradient(90deg, transparent, var(--section-flow-blue), var(--section-flow-gold), transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(226, 197, 135, 0.18), rgba(140, 220, 255, 0.14), transparent) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(140, 220, 255, 0.14), rgba(226, 197, 135, 0.12), transparent) left / 1px 100% no-repeat,
    linear-gradient(180deg, transparent, rgba(226, 197, 135, 0.16), rgba(140, 220, 255, 0.12), transparent) right / 1px 100% no-repeat;
  opacity: 0.74 !important;
}

.home-page .section-list::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: max(16px, calc((100vw - var(--le-section-max, 1180px)) / 2 + 18px)) !important;
  right: max(16px, calc((100vw - var(--le-section-max, 1180px)) / 2 + 18px)) !important;
  top: clamp(150px, 18%, 245px) !important;
  height: clamp(48px, 7vw, 88px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(140, 220, 255, 0.16) 11px 12px, transparent 12px 22px),
    linear-gradient(90deg, transparent, rgba(226, 197, 135, 0.18) 24%, rgba(140, 220, 255, 0.12) 56%, transparent);
  opacity: 0.32 !important;
  clip-path: polygon(0 32%, 26% 10%, 58% 44%, 100% 20%, 100% 58%, 58% 82%, 26% 48%, 0 70%) !important;
}

:root[data-theme="light"] .home-page .section-list::before {
  --section-flow-blue: rgba(0, 63, 125, 0.15);
  --section-flow-gold: rgba(153, 104, 28, 0.18);
  --section-flow-soft: rgba(20, 50, 100, 0.10);
  opacity: 0.62 !important;
}

:root[data-theme="light"] .home-page .section-list::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(0, 63, 125, 0.12) 11px 12px, transparent 12px 22px),
    linear-gradient(90deg, transparent, rgba(153, 104, 28, 0.14) 24%, rgba(0, 63, 125, 0.10) 56%, transparent) !important;
  opacity: 0.28 !important;
}

.home-page .section-list .section-list__intro,
.home-page .section-list .le-mag-grid {
  position: relative !important;
  z-index: 1 !important;
}

.home-page .section-list .le-mag-grid {
  display: block !important;
  isolation: isolate !important;
}

.home-page .section-list .le-mag-grid::before,
.home-page .section-list .le-mag-grid::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.home-page .section-list .le-mag-grid::before {
  top: 0 !important;
  bottom: 0 !important;
  left: clamp(44px, 7vw, 108px) !important;
  width: 1px !important;
  background: linear-gradient(to bottom, transparent, rgba(140, 220, 255, 0.20), rgba(226, 197, 135, 0.18), transparent) !important;
  opacity: 0.68 !important;
}

.home-page .section-list .le-mag-grid::after {
  top: 0 !important;
  bottom: 0 !important;
  right: clamp(182px, 17vw, 276px) !important;
  width: clamp(92px, 8vw, 124px) !important;
  border-left: 1px solid rgba(226, 197, 135, 0.08) !important;
  border-right: 1px solid rgba(140, 220, 255, 0.08) !important;
  background:
    linear-gradient(180deg, transparent, rgba(226, 197, 135, 0.055), rgba(140, 220, 255, 0.050), transparent) !important;
  opacity: 0.24 !important;
}

:root[data-theme="light"] .home-page .section-list .le-mag-grid::before {
  background: linear-gradient(to bottom, transparent, rgba(0, 63, 125, 0.14), rgba(169, 120, 42, 0.14), transparent) !important;
}

:root[data-theme="light"] .home-page .section-list .le-mag-grid::after {
  border-left-color: rgba(153, 104, 28, 0.10) !important;
  border-right-color: rgba(0, 63, 125, 0.10) !important;
  background:
    linear-gradient(180deg, transparent, rgba(153, 104, 28, 0.06), rgba(0, 63, 125, 0.05), transparent) !important;
}

.home-page .section-list .le-mag-card {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) minmax(188px, auto) !important;  /* numeral | content | CTA */
  align-items: center !important;
  column-gap: clamp(18px, 2.4vw, 34px) !important; row-gap: 4px !important;
  padding: 18px 10px !important;            /* slim (was 26/28/30 + 36 gap → 180px tall) */
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(190, 220, 250, 0.10) !important;   /* menu/index hairline rules */
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: background .2s ease, box-shadow .2s ease !important;  /* no transform/padding → no hover reflow */
}
.home-page .section-list .le-mag-card::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: clamp(198px, 17.4vw, 284px) !important;
  width: clamp(70px, 6vw, 104px) !important;
  height: 1px !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(140, 220, 255, 0.22) 36%, rgba(226, 197, 135, 0.16) 68%, transparent 100%) !important;
  opacity: 0.36 !important;
  transform: translateY(-50%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.home-page .section-list .le-mag-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  right: clamp(190px, 17.2vw, 276px) !important;
  width: clamp(74px, 6vw, 102px) !important;
  height: clamp(48px, 4.5vw, 62px) !important;
  border: 1px solid rgba(190, 220, 250, 0.10) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(140, 220, 255, 0.12), transparent 68%),
    linear-gradient(135deg, rgba(226, 197, 135, 0.08), rgba(140, 220, 255, 0.045)) !important;
  opacity: 0.44 !important;
  transform: translateY(-50%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.home-page .section-list .le-mag-card:last-child { border-bottom: 1px solid rgba(190, 220, 250, 0.12) !important; }
:root[data-theme="light"] .home-page .section-list .le-mag-card { border-top-color: rgba(20, 50, 100, 0.12) !important; }
:root[data-theme="light"] .home-page .section-list .le-mag-card:last-child { border-bottom-color: rgba(20, 50, 100, 0.12) !important; }
:root[data-theme="light"] .home-page .section-list .le-mag-card::before {
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 63, 125, 0.16) 36%, rgba(168, 120, 42, 0.12) 68%, transparent 100%) !important;
  opacity: 0.30 !important;
}
:root[data-theme="light"] .home-page .section-list .le-mag-card::after {
  border-color: rgba(0, 63, 125, 0.10) !important;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 63, 125, 0.075), transparent 68%),
    linear-gradient(135deg, rgba(153, 104, 28, 0.07), rgba(0, 63, 125, 0.035)) !important;
  opacity: 0.42 !important;
}

.home-page .section-list .le-mag-card:hover {
  transform: none !important;              /* NO movement — override the inherited translateY card-lift */
  background: linear-gradient(90deg, rgba(221,189,131,0.10), rgba(140, 220, 255, 0.035) 48%, transparent 78%) !important;
  box-shadow: inset 1px 0 0 0 rgba(201,164,86,0.95) !important;  /* left gold hairline, no reflow */
}
.home-page .section-list .le-mag-card:hover .le-mag-num { color: #e3c587 !important; }  /* numeral brightens on hover */
:root[data-theme="light"] .home-page .section-list .le-mag-card:hover {
  background: linear-gradient(90deg, rgba(150,112,42,0.08), transparent 70%) !important;
}

/* numeral rail — compact editorial index marker */
.home-page .section-list .le-mag-rail { min-width: 0 !important; align-self: center !important; padding: 0 !important; }
.home-page .section-list .le-mag-num { font-size: 22px !important; line-height: 1 !important; }
.home-page .section-list .le-mag-rail .le-mag-tag { display: none !important; }   /* drop the repeated SERVICE/AREA tag — the numeral is enough */

/* content — title + one-line blurb */
.home-page .section-list .le-mag-body { display: block !important; }
.home-page .section-list .le-mag-body h3 {
  font-size: clamp(18px, 2vw, 23px) !important;
  /* Increased from 2px — the 19px halo glow bleeds downward into the paragraph
     when margin is too tight. 10px clears the diffuse edge. */
  margin: 0 0 10px !important; line-height: 1.15 !important;
}
.home-page .section-list .le-mag-body :is(h3, p) {
  max-width: calc(100% - clamp(112px, 11vw, 164px)) !important;
}
.home-page .section-list .le-mag-body p {
  /* Full excerpt, italic Cormorant serif descriptor — matches the interior listing's
     elegant lead + the serif titles (was plain 13.5px sans). Fills the body width (no
     max-width cap, which bunched it + left a dead gap before the CTA). (TAG-20260622) */
  margin: 0 !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
  opacity: 0.88 !important;
}
.home-page .section-list .le-mag-body :is(.le-mag-meta, .le-mag-badges) { display: none !important; }  /* drop sub-meta/badges in the menu row */

/* HVAC motif glyph — one upright concept-sheet symbol per row, kept out of grid math. */
.home-page .section-list .le-mag-rail,
.home-page .section-list .le-mag-body {
  position: relative !important;
  z-index: 1 !important;
}
.home-page .section-list .le-mag-actions {
  /* The whole-card link overlay is z-index:5; preserve a real Schedule hit area. */
  position: relative !important;
  z-index: 10 !important;
}
.home-page .section-list .le-mag-mark {
  display: block !important;
  position: absolute !important;
  width: clamp(62px, 5.6vw, 88px) !important;
  height: clamp(62px, 5.6vw, 88px) !important;
  right: clamp(198px, 17.4vw, 284px) !important;
  top: 50% !important;
  color: rgba(140, 220, 255, 0.92) !important;
  opacity: 0.36 !important;
  z-index: 0 !important;
  mix-blend-mode: screen !important;
  filter: none !important;
  overflow: visible !important;
  transform: translateY(-50%) scale(var(--motif-scale, 1)) !important;
}
.home-page .section-list .le-mag-mark .le-motif * {
  stroke-dasharray: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.home-page .section-list .le-mag-mark--slot-1,
.home-page .section-list .le-mag-mark--slot-2,
.home-page .section-list .le-mag-mark--slot-3,
.home-page .section-list .le-mag-mark--slot-4,
.home-page .section-list .le-mag-mark--slot-5,
.home-page .section-list .le-mag-mark--slot-6,
.home-page .section-list .le-mag-mark--slot-7 {
  right: clamp(198px, 17.4vw, 284px) !important;
  top: 50% !important;
}
.home-page .section-list .le-mag-card:hover .le-mag-mark {
  opacity: 0.42 !important;
  filter: none !important;
  transform: translateY(-50%) scale(var(--motif-hover-scale, 1.035)) !important;
}
#home-services .section-list .le-mag-mark--primary { color: rgba(140, 220, 255, 0.92) !important; }
#home-areas .section-list .le-mag-mark--primary { color: rgba(226, 197, 135, 0.84) !important; opacity: 0.31 !important; }
:root[data-theme="light"] .home-page .section-list .le-mag-mark {
  color: rgba(0, 63, 125, 0.82) !important;
  opacity: 0.30 !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
}
:root[data-theme="light"] .home-page .section-list .le-mag-card:hover .le-mag-mark {
  opacity: 0.36 !important;
}
:root[data-theme="light"] #home-services .section-list .le-mag-mark--primary { color: rgba(0, 63, 125, 0.74) !important; }
:root[data-theme="light"] #home-areas .section-list .le-mag-mark--primary { color: rgba(153, 104, 28, 0.66) !important; opacity: 0.27 !important; }

/* In-page menu jump offset (TAG-20260622): the post-block sections (#home-post-N →
   Why us / Process / Reviews / Plans / Expertise / FAQ) shipped scroll-margin-top:0,
   so clicking those in-page links landed the section HIDDEN behind the fixed nav +
   in-page strip (~164px) — the menu read as "non-functional". Give them the same
   offset that #home-services / #home-areas already use. */
.home-page [id^="home-post-"]:not(#home-post-strip):not(#home-post-strip-items) {
  scroll-margin-top: calc(var(--nav-h, 104px) + 60px + 12px) !important;
}

/* actions — CTA + arrow, kept inline-right and tight to content */
.home-page .section-list .le-mag-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  grid-column: auto !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.home-page .section-list .le-mag-arrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: rgba(224, 238, 255, 0.72) !important;
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: color .2s ease !important;
}
.home-page .section-list .le-mag-arrow svg {
  display: block !important;
  flex: 0 0 18px !important;
  opacity: 0.76 !important;
  transform: none !important;
}
.home-page .section-list .le-mag-split-cta {
  min-width: 112px !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.home-page .section-list .le-mag-split-label {
  display: inline-block !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  white-space: nowrap !important;
}
:root[data-theme="light"] .home-page .section-list .le-mag-arrow {
  color: rgba(20, 60, 110, 0.72) !important;
}
/* Arrow brightens, does NOT translate (kills the inherited translateX on the arrow + its svg). */
.home-page .section-list .le-mag-card:hover .le-mag-arrow,
.home-page .section-list .le-mag-card:hover .le-mag-arrow svg { transform: none !important; color: #e3c587 !important; }

@media (max-width: 700px) {
  /* stack on phones: numeral+title row, blurb, CTA */
  .home-page .section-list .le-mag-card {
    grid-template-columns: 36px 1fr !important;
    padding: 16px 4px !important;
  }
  .home-page .section-list .le-mag-card::before { display: none !important; }
  .home-page .section-list .le-mag-card::after { display: none !important; }
  .home-page .section-list .le-mag-mark--primary {
    display: none !important;
  }
  .home-page .section-list .le-mag-actions {
    grid-column: 1 / -1 !important;
    justify-content: space-between !important;
    margin-top: 8px !important;
    gap: 12px !important;
  }
  .home-page .section-list .le-mag-arrow {
    font-size: 11px !important;
    gap: 8px !important;
  }
  .home-page .section-list .le-mag-body :is(h3, p) {
    max-width: none !important;
  }
}

/* Heading breathing room: the section-list intro sat flush (0px) under the docked
   category strip. Pad it so the heading clears the strip and the section opens
   with air. (TAG-20260621-SL-MENU cont.) */
.home-page .section-list .section-list__intro {
  padding-top: clamp(1.75rem, 4vw, 3.25rem) !important;
}
/* Flip the row CTAs: Read-More (secondary) left, gold SCHEDULE (primary) in the
   terminal/rightmost emphasis position. DOM order is [schedule, arrow]; order:1
   on the schedule pushes it after the arrow. */
.home-page .section-list .le-mag-actions .le-mag-split-cta { order: 1 !important; }
.home-page .section-list .le-mag-actions .le-mag-arrow { order: 0 !important; }
/* Home strip — active item (was inheriting unscoped light-blue gradient) */
:root[data-theme="light"] .home-page #home-post-strip .home-post-strip__items a.active {
  color: rgb(10, 35, 75) !important;
}
:root[data-theme="light"] .home-page #home-post-strip .home-post-strip__items a.active::after {
  background: linear-gradient(90deg, transparent, rgba(10, 50, 120, 0.72), transparent) !important;
  box-shadow: 0 0 10px rgba(10, 50, 120, 0.28) !important;
}
/* Hover underline also gets navy in light mode */
:root[data-theme="light"] .home-page #home-post-strip .home-post-strip__items a:not(.active)::after {
  background: linear-gradient(90deg, transparent, rgba(10, 50, 120, 0.55), transparent) !important;
}
/* Home FAQ — also ensure .faq-block__question is flex so toggle stays at end */
#home-post-area [data-block-type="faq-block"] .faq-block__question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Home FAQ items: elevate flat hairline rows → glass cards (matching interior) */
#home-post-area [data-block-type="faq-block"] .faq-block__list {
  display: flex !important; flex-direction: column !important;
  gap: 10px !important; padding: 0 !important;
}
#home-post-area [data-block-type="faq-block"] .faq-block__item {
  border: 1px solid rgba(190, 220, 250, 0.16) !important;
  border-top: 1px solid rgba(190, 220, 250, 0.16) !important;
  border-radius: 10px !important;
  background: rgba(8, 18, 40, 0.54) !important;
  padding: clamp(18px, 3vw, 28px) clamp(20px, 3.5vw, 32px) !important;
  margin: 0 !important;
  transition: border-color 0.22s ease, background 0.22s ease !important;
}
#home-post-area [data-block-type="faq-block"] .faq-block__item:last-of-type {
  border-bottom: 1px solid rgba(190, 220, 250, 0.16) !important;
}
#home-post-area [data-block-type="faq-block"] .faq-block__item:hover,
#home-post-area [data-block-type="faq-block"] .faq-block__item[open] {
  border-color: rgba(130, 200, 248, 0.28) !important;
  background: rgba(12, 24, 52, 0.70) !important;
}

/* Light mode home FAQ rows keep their hierarchy in the rule, not a white plate. */
:root[data-theme="light"] #home-post-area [data-block-type="faq-block"] .faq-block__item {
  background: transparent !important;
  border-color: rgba(30, 60, 110, 0.12) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] #home-post-area [data-block-type="faq-block"] .faq-block__item:last-of-type {
  border-bottom-color: rgba(30, 60, 110, 0.12) !important;
}
:root[data-theme="light"] #home-post-area [data-block-type="faq-block"] .faq-block__item:hover,
:root[data-theme="light"] #home-post-area [data-block-type="faq-block"] .faq-block__item[open] {
  background: transparent !important;
  border-color: rgba(30, 60, 110, 0.22) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] #home-post-area [data-block-type="faq-block"] .faq-block__question {
  color: rgb(12, 30, 64) !important;
}
:root[data-theme="light"] #home-post-area [data-block-type="faq-block"] .faq-block__answer,
:root[data-theme="light"] #home-post-area [data-block-type="faq-block"] .faq-block__answer p {
  color: rgba(28, 52, 86, 0.82) !important;
}
@media (max-height: 560px) and (orientation: landscape) and (max-width: 1099px) {
  .home-page .block-wrapper--parallax-hero-block,
  .home-page .parallax-hero.le-cover {
    height: auto !important;
    min-height: 0 !important;
  }

  .home-page .parallax-hero__content {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
  }

  .home-page .parallax-hero--home .hero-title {
    font-size: clamp(0.95rem, 3.2vh, 1.15rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 2px !important;
  }

  .home-page .parallax-hero--home .hero-subtitle {
    font-size: clamp(0.62rem, 2.0vh, 0.72rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
    max-width: 95% !important;
  }

  .home-page .hero-combo-pill {
    margin-top: 2px !important;
  }

  .home-page .parallax-hero--home .hero-actions {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }

  .home-page .parallax-hero--home .hero-actions .btn,
  .home-page .parallax-hero--home .hero-actions .hero-combo-pill,
  .home-page .parallax-hero--home .hero-actions .hero-split-link {
    font-size: 10.5px !important;
    padding: 3px 10px !important;
    height: auto !important;
    min-height: 26px !important;
  }

  .home-page .parallax-hero--home .trust-strip {
    margin-top: 2px !important;
    margin-bottom: 1px !important;
    font-size: 9px !important;
    gap: 4px !important;
  }

  .home-page .parallax-hero--home .hero-celestial-clock__body {
    top: 15% !important;
  }
  .hero-blueprint-scene .hero-blueprint-unit {
    transform: translate(250px, 420px) scale(1.25) !important;
  }
  .hero-blueprint-scene .condenser-glow {
    transform: translate(-410px, 80px) !important;
  }
  .hero-blueprint-scene .hero-blueprint-circuit {
    transform: translate(-445px, 97px) !important;
  }
  .hero-blueprint-scene .dune-brand-mark {
    transform: translate(310px, 100px) scale(0.85) !important;
  }
}
/* Home mobile strip CLS guard: the compact service/area strips are rendered in
   the first viewport and then upgraded by JS to swipeable rows. Reserve the
   measured final heights and keep the row origin stable so font load / overflow
   activation cannot resize or horizontally jump the fold. */
:root[data-theme="light"] .home-page #home-svc-strip,
:root[data-theme="light"] .home-page #home-loc-strip,
:root[data-theme="light"] .home-page #home-post-area .category-strip--trust {
  /* The watercolor field is the light-theme surface. These in-flow indexes use
     rules and type for structure; a second cream plate only fragments the page. */
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 1099px) {
  .home-page .parallax-hero__content {
    flex: 1;
    justify-content: flex-start !important;
  }

  .home-page .home-services-strip-wrapper,
  .home-page #home-svc-strip {
    min-height: 80px !important;
  }

  .home-page #home-loc-strip {
    min-height: 95px !important;
  }

  .home-page #home-svc-strip .category-strip__items,
  .home-page #home-loc-strip .category-strip__items {
    justify-content: flex-start !important;
  }
}

/* Short landscape keeps the phone's stacked/swipeable service and area menus.
   Their portrait reservations are intentionally roomier for finger reach; here
   the label spacing tightens while the interactive track remains untouched. */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 1099px) {
  .home-page .home-services-strip-wrapper,
  .home-page #home-svc-strip,
  .home-page #home-loc-strip {
    min-height: 64px !important;
  }
}

/* Home-only structural rules omitted by the blocks-core route split. These
   restore the actual Why, Process, Plans, and Expertise markup to the prototype
   layouts without making non-home core routes download home presentation CSS. */
#home-post-area [data-block-id="2257"] .features-grid-block__grid,
#home-post-area [data-block-id="2261"] .features-grid-block__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

#home-post-area [data-block-id="2261"] .features-grid-block__grid {
  gap: 22px !important;
  counter-reset: process-step;
}

#home-post-area [data-block-id="2257"] .service-card {
  padding: 24px !important;
  border: 1px solid rgba(190, 220, 250, 0.14) !important;
  border-radius: 14px !important;
  background: rgba(8, 18, 36, 0.22);
  text-align: left !important;
}

:root[data-theme="light"] #home-post-area [data-block-id="2257"] .service-card,
:root[data-theme="light"] #home-post-area [data-block-type="testimonials"] .testimonial-card {
  /* Light mode deliberately uses one continuous paper/watercolor field. */
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#home-post-area [data-block-id="2261"] .service-card {
  counter-increment: process-step;
  padding: 20px 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

#home-post-area [data-block-id="2261"] .service-card::before {
  content: counter(process-step, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 38px;
  font-style: italic;
  line-height: 1;
  color: rgb(180, 220, 255);
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block > .container {
  max-width: 900px !important;
  padding-inline: 0 !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__header {
  max-width: none !important;
  margin: 0 0 22px !important;
  text-align: left !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__title {
  margin: 0 0 14px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 54px !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  text-align: left !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__subtitle {
  max-width: 62ch;
  margin: 0 !important;
  font-size: 17px;
  line-height: 1.65;
  text-align: left !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block .row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 0 !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block .row > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__plan {
  padding: 30px 28px !important;
  gap: 0 !important;
  border: 1px solid rgba(190, 220, 250, 0.20) !important;
  border-radius: 18px !important;
  background: rgba(8, 18, 36, 0.32);
  box-shadow: none !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__plan--featured {
  border-color: rgba(120, 160, 230, 0.50) !important;
  background: linear-gradient(140deg, rgba(120, 200, 255, 0.12), rgba(35, 61, 127, 0.18));
}

:root[data-theme="light"] #home-post-area [data-block-type="pricing-table"] .pricing-table-block__plan,
:root[data-theme="light"] #home-post-area [data-block-type="pricing-table"] .pricing-table-block__plan--featured {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__plan-name {
  margin: 0 0 8px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__plan-price {
  gap: 8px !important;
  margin-bottom: 22px !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__amount {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__description {
  margin-bottom: 14px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__features {
  flex: 1;
  margin: 0 0 22px !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__features li {
  position: relative;
  display: block !important;
  margin-bottom: 8px;
  padding-left: 22px;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__features li::before {
  position: absolute;
  left: 0;
  color: rgb(190, 226, 255);
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__action .btn {
  display: inline-flex !important;
  width: auto !important;
  min-height: 44px;
  padding: 13px 22px !important;
  border: 1px solid rgba(200, 225, 250, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(10, 25, 50, 0.30) !important;
  color: rgb(232, 244, 255) !important;
}

#home-post-area [data-block-type="pricing-table"] .pricing-table-block__plan--featured .pricing-table-block__action .btn {
  border-color: transparent !important;
  background: linear-gradient(110deg, rgb(120, 200, 255), rgb(80, 140, 220)) !important;
  color: rgb(10, 21, 48) !important;
}

#home-post-area [data-block-type="paragraph-block"] .paragraph-block {
  background: transparent !important;
  border-color: transparent !important;
}

#home-post-area [data-block-type="paragraph-block"] .paragraph-block .row {
  display: block !important;
  margin: 0 !important;
}

#home-post-area [data-block-type="paragraph-block"] .paragraph-block .row > div {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

#home-post-area [data-block-type="paragraph-block"] .paragraph-block__content {
  column-count: 2;
  column-gap: 32px;
}

:root[data-theme="light"] .home-page .section-list .le-mag-card {
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .home-page .section-list .le-mag-card:hover {
  background: linear-gradient(90deg, rgba(150, 112, 42, 0.08), transparent 70%) !important;
}

@media (max-width: 800px) {
  #home-post-area [data-block-id="2257"] .features-grid-block__grid,
  #home-post-area [data-block-id="2261"] .features-grid-block__grid,
  #home-post-area [data-block-type="pricing-table"] .pricing-table-block .row {
    grid-template-columns: 1fr !important;
  }

  #home-post-area [data-block-type="paragraph-block"] .paragraph-block__content {
    column-count: 1;
  }

  #home-post-area [data-block-type="pricing-table"] .pricing-table-block__title {
    font-size: 40px !important;
  }
}


/* ============================================================================
   HOME HERO — BLUEPRINT SHORELINE SCENE
   ----------------------------------------------------------------------------
   Transplanted from design/prototypes/blueprint-transformation-scene-20260704/.
   The prototype remains the source of truth for this artwork: its rules are
   extracted and re-scoped under .hero-blueprint-scene rather than rewritten, so
   a change there can be re-extracted rather than hand-merged. The prototype's
   :root vars land on the scope class, .scene.light-mode maps onto
   :root[data-theme="light"], and its own chrome (theme switcher, alternate
   themes, lettering) is excluded.

   Two things this scene depends on, both guarded by the prototype's proof.js:
   the shoreline ramp must stay many low-alpha constant-offset bands (a gradient
   cannot follow a band that slopes and undulates, and an animated blur stalls
   every animation on the page under load), and each wave's outermost band must
   stay submerged beneath the gulf fill or the water visibly detaches.
   ============================================================================ */
.hero-blueprint-scene {
      color-scheme: dark;
      --ink: #f8fbff;
      --muted: rgba(238, 246, 255, 0.72);
      --teal: #8cdcff;
      --gold: #e2c587;
      --sand: #efe6d2;
      --wet-sand: #dfd4ba;
      --white-sand: #f5efdf;
      --unit-face: rgba(9, 47, 61, 0.035);
      --unit-side: rgba(5, 30, 43, 0.05);
      --unit-top: rgba(24, 74, 84, 0.025);
      --unit-line: rgba(140, 220, 255, 0.82);
      --trane-red: #d5362b;
      --trane-plate: rgba(13, 17, 17, 0.035);
      --font-scene: "Coastal Lato", "Avenir Next", sans-serif;
      --ease-scene: cubic-bezier(0.77, 0, 0.175, 1);
      --route-duration: 8s;
      --service-flow-duration: 4s;
      --fan-spin-duration: 2s;
      --shoreline-duration: 7.2s;

      /* Dune and Text Variables */
      --dune-fill: url(#dune-moonlight);
      
      /* Theme Variables */
      --grid-color: rgba(140, 220, 255, 0.06);
      --unit-side-stroke: rgba(140, 220, 255, 0.76);
      --unit-face-stroke: rgba(140, 220, 255, 0.86);
      --unit-top-stroke: rgba(209, 239, 245, 0.92);
      --unit-cap-stroke: rgba(140, 220, 255, 0.62);
      --unit-contour-stroke: rgba(140, 220, 255, 0.28);
      --unit-edge-stroke: rgba(209, 239, 245, 0.66);
      --unit-rim-stroke: rgba(209, 239, 245, 0.66);
      --unit-grille-stroke: rgba(140, 220, 255, 0.26);
      --unit-grille-frame-stroke: rgba(140, 220, 255, 0.44);
      --unit-grille-lines-stroke: rgba(140, 220, 255, 0.82);
      --unit-side-grille-stroke: rgba(140, 220, 255, 0.62);
      --unit-top-grille-ring-stroke: rgba(209, 239, 245, 0.72);
      --unit-top-grille-ring-inner-stroke: rgba(140, 220, 255, 0.5);
      --unit-top-grille-brace-stroke: rgba(140, 220, 255, 0.4);
      --unit-top-grille-spokes-stroke: rgba(140, 220, 255, 0.34);
      --unit-cap-fastener-stroke: rgba(209, 239, 245, 0.62);
      --unit-anchor-bolt-stroke: rgba(209, 239, 245, 0.7);
      
      /* Base & Foot & Highlights */
      --unit-base-fill: rgba(5, 26, 37, 0.045);
      --unit-base-stroke: rgba(140, 220, 255, 0.62);
      --unit-foot-fill: rgba(5, 26, 37, 0.035);
      --unit-foot-stroke: rgba(140, 220, 255, 0.5);
      --unit-cabinet-highlight-stroke: rgba(140, 220, 255, 0.5);
      --unit-top-highlight-stroke: rgba(140, 220, 255, 0.5);
      --unit-fan-blade-fill: rgba(140, 220, 255, 0.035);
      --unit-fan-blade-stroke: rgba(209, 239, 245, 0.64);
      --unit-fan-hub-stroke: rgba(209, 239, 245, 0.86);

      /* Coil Fins & Panel Seams */
      --unit-coil-fins-stroke: rgba(140, 220, 255, 0.3);
      --unit-coil-fins-side-stroke: rgba(140, 220, 255, 0.26);
      --unit-panel-seam-fill: rgba(140, 220, 255, 0.035);
      --unit-panel-seam-stroke: rgba(209, 239, 245, 0.48);

      /* Animation Variable Keyframes (Default/Night) */
      --hybrid-blue-stroke: rgba(110, 220, 255, 0.86);
      --hybrid-blue-fill: rgba(110, 220, 255, 0.08);
      --hybrid-blue-glow-core: rgba(110, 220, 255, 0.95);
      --hybrid-blue-glow: rgba(110, 220, 255, 0.65);
      
      --hybrid-red-stroke: rgba(255, 30, 30, 0.96);
      --hybrid-red-fill: rgba(255, 30, 30, 0.08);
      --hybrid-red-glow-core: rgba(255, 30, 30, 0.98);
      --hybrid-red-glow: rgba(255, 30, 30, 0.88);
}
:root[data-theme="light"] .hero-blueprint-scene {
      color-scheme: light;
      border-color: rgba(8, 107, 148, 0.28);
      
      /* Grid and background */
      --grid-color: rgba(0, 91, 130, 0.05);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle at 72% 24%, rgba(255, 245, 220, 0.6), transparent 45%),
        radial-gradient(circle at 18% 14%, rgba(200, 240, 255, 0.5), transparent 40%),
        linear-gradient(180deg, #6ecad0 0%, #a4e5e7 35%, #d6f2f2 50%, #ffffff 72%, #ffffff 100%);
      
      --dune-fill: #ffffff;
      
      /* Headline & text colors */
      
      /* Light theme line colors */
      --teal: #086b94;
      --unit-face: rgba(8, 107, 148, 0.035);
      --unit-side: rgba(8, 107, 148, 0.04);
      --unit-top: rgba(8, 107, 148, 0.025);
      --unit-line: rgba(8, 107, 148, 0.85);

      --unit-side-stroke: rgba(8, 107, 148, 0.76);
      --unit-face-stroke: rgba(8, 107, 148, 0.86);
      --unit-top-stroke: rgba(8, 107, 148, 0.85);
      --unit-cap-stroke: rgba(8, 107, 148, 0.62);
      --unit-contour-stroke: rgba(8, 107, 148, 0.35);
      --unit-edge-stroke: rgba(8, 107, 148, 0.66);
      --unit-rim-stroke: rgba(8, 107, 148, 0.66);
      --unit-grille-stroke: rgba(8, 107, 148, 0.3);
      --unit-grille-frame-stroke: rgba(8, 107, 148, 0.45);
      --unit-grille-lines-stroke: rgba(8, 107, 148, 0.82);
      --unit-side-grille-stroke: rgba(8, 107, 148, 0.62);
      --unit-top-grille-ring-stroke: rgba(8, 107, 148, 0.72);
      --unit-top-grille-ring-inner-stroke: rgba(8, 107, 148, 0.5);
      --unit-top-grille-brace-stroke: rgba(8, 107, 148, 0.4);
      --unit-top-grille-spokes-stroke: rgba(8, 107, 148, 0.34);
      --unit-cap-fastener-stroke: rgba(8, 107, 148, 0.62);
      --unit-anchor-bolt-stroke: rgba(8, 107, 148, 0.7);

      --unit-base-fill: rgba(8, 107, 148, 0.05);
      --unit-base-stroke: rgba(8, 107, 148, 0.7);
      --unit-foot-fill: rgba(8, 107, 148, 0.04);
      --unit-foot-stroke: rgba(8, 107, 148, 0.65);
      --unit-cabinet-highlight-stroke: rgba(8, 107, 148, 0.6);
      --unit-top-highlight-stroke: rgba(8, 107, 148, 0.6);
      --unit-fan-blade-fill: rgba(8, 107, 148, 0.06);
      --unit-fan-blade-stroke: rgba(8, 107, 148, 0.75);
      --unit-fan-hub-stroke: rgba(8, 107, 148, 0.85);

      --unit-coil-fins-stroke: rgba(8, 107, 148, 0.4);
      --unit-coil-fins-side-stroke: rgba(8, 107, 148, 0.35);
      --unit-panel-seam-fill: rgba(8, 107, 148, 0.04);
      --unit-panel-seam-stroke: rgba(8, 107, 148, 0.6);

      /* Daytime Animation Variables */
      --hybrid-blue-stroke: rgba(8, 107, 148, 0.95);
      --hybrid-blue-fill: rgba(8, 107, 148, 0.12);
      --hybrid-blue-glow-core: rgba(8, 107, 148, 0.8);
      --hybrid-blue-glow: rgba(8, 107, 148, 0.35);

      --hybrid-red-stroke: rgba(192, 46, 35, 0.98);
      --hybrid-red-fill: rgba(192, 46, 35, 0.12);
      --hybrid-red-glow-core: rgba(192, 46, 35, 0.8);
      --hybrid-red-glow: rgba(192, 46, 35, 0.35);
}
:root[data-theme="light"] .hero-blueprint-scene .trane-unit {
      background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 46%, rgba(255, 255, 255, 0) 72%);
      filter: drop-shadow(0 8px 32px rgba(8, 107, 148, 0.12));
}
:root:not([data-theme="light"]) .hero-blueprint-scene :is(
      .unit-top-rim,
.hero-blueprint-scene .unit-grille-frame,
.hero-blueprint-scene .unit-side-grille,
.hero-blueprint-scene .unit-face,
.hero-blueprint-scene .unit-side,
.hero-blueprint-scene .unit-top,
.hero-blueprint-scene .unit-edge,
.hero-blueprint-scene .unit-corner-post,
.hero-blueprint-scene .unit-base,
.hero-blueprint-scene .unit-foot,
.hero-blueprint-scene .page-circuit
    ) {
      filter: none;
}
:root:not([data-theme="light"]) .hero-blueprint-scene {
      --line-glow-color: rgba(140, 220, 255, 0.55);
}
:root:not([data-theme="light"]) .hero-blueprint-scene :is(
      .unit-face,
.hero-blueprint-scene .unit-side,
.hero-blueprint-scene .unit-top,
.hero-blueprint-scene .unit-edge,
.hero-blueprint-scene .unit-corner-post,
.hero-blueprint-scene .unit-cabinet-highlight,
.hero-blueprint-scene .unit-top-highlight,
.hero-blueprint-scene .unit-base,
.hero-blueprint-scene .unit-foot,
.hero-blueprint-scene .unit-seam,
.hero-blueprint-scene .unit-logo-rail
    ) {
      --line-glow-color: rgba(255, 110, 110, 0.55);
}
:root:not([data-theme="light"]) .hero-blueprint-scene :is(
      .unit-top-grille-ring,
.hero-blueprint-scene .unit-top-grille-ring--inner,
.hero-blueprint-scene .unit-top-grille-brace,
.hero-blueprint-scene .unit-top-grille-spokes,
.hero-blueprint-scene .unit-motor-ring,
.hero-blueprint-scene .unit-fan-blade,
.hero-blueprint-scene .unit-fan-hub,
.hero-blueprint-scene .unit-grille-lines,
.hero-blueprint-scene .unit-coil-fins,
.hero-blueprint-scene .unit-coil-fins--side,
.hero-blueprint-scene .unit-cabinet-highlight,
.hero-blueprint-scene .unit-top-highlight,
.hero-blueprint-scene .unit-seam,
.hero-blueprint-scene .unit-logo-rail
    ) {
      filter: none !important;
}
:root[data-theme="light"] .hero-blueprint-scene :is(
      .unit-top-rim,
.hero-blueprint-scene .unit-top-grille-ring,
.hero-blueprint-scene .unit-top-grille-ring--inner,
.hero-blueprint-scene .unit-top-grille-brace,
.hero-blueprint-scene .unit-top-grille-spokes,
.hero-blueprint-scene .unit-motor-ring,
.hero-blueprint-scene .unit-fan-blade,
.hero-blueprint-scene .unit-fan-hub,
.hero-blueprint-scene .unit-grille-frame,
.hero-blueprint-scene .unit-grille-lines,
.hero-blueprint-scene .unit-coil-fins,
.hero-blueprint-scene .unit-side-grille,
.hero-blueprint-scene .unit-coil-fins--side,
.hero-blueprint-scene .unit-face,
.hero-blueprint-scene .unit-side,
.hero-blueprint-scene .unit-top,
.hero-blueprint-scene .unit-edge,
.hero-blueprint-scene .unit-corner-post,
.hero-blueprint-scene .unit-cabinet-highlight,
.hero-blueprint-scene .unit-top-highlight,
.hero-blueprint-scene .unit-base,
.hero-blueprint-scene .unit-foot,
.hero-blueprint-scene .unit-seam,
.hero-blueprint-scene .unit-logo-rail,
.hero-blueprint-scene .page-circuit
    ) {
      filter: none !important;
}
.hero-blueprint-scene {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      aspect-ratio: 16 / 9;
      min-block-size: 560px;
      border: 1px solid rgba(226, 197, 135, 0.28);
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(4, 10, 24, 0.28), rgba(4, 10, 24, 0.06) 36%, rgba(4, 10, 24, 0) 100%),
        radial-gradient(circle at 72% 24%, rgba(226, 197, 135, 0.2), transparent 27%),
        radial-gradient(circle at 18% 14%, rgba(140, 220, 255, 0.2), transparent 30%),
        radial-gradient(ellipse at 17% 86%, transparent, transparent),
        radial-gradient(ellipse at 66% 78%, transparent, transparent),
        linear-gradient(180deg, #0d2038 0%, #15405b 44%, #2e7482 58%, #ffffff 76%, #ffffff 100%);
      box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
:root:not([data-theme="light"]) .hero-blueprint-scene::after {
      background:
        linear-gradient(90deg, rgba(3, 9, 20, 0.46), transparent 18%, transparent 84%, rgba(3, 9, 20, 0.22)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 20% 76%, rgba(7, 14, 22, 0.08) 100%);
      /* Keep the night underpaint behind the sky/text only: white quartz sand
         stays visibly white instead of inheriting the scene's edge vignette. */
      mask-image: linear-gradient(180deg, #000 0 48%, transparent 73%);
}
.hero-blueprint-scene .skyline,
.hero-blueprint-scene .material-wash,
.hero-blueprint-scene .routing {
      position: absolute;
      inset: 0;
}
.hero-blueprint-scene > :is(
      svg.skyline,
.hero-blueprint-scene svg.routing
    ) {
      width: 100%;
      height: 100%;
}
.hero-blueprint-scene .skyline {
      z-index: 0;
}
/*
  No container-level filter here. `.routing` holds only `.page-circuit`, which
  already carries its own crisp `cbCircuitTrace` filter — this rule used to
  layer a second, much larger blue-tinted blur on top of the whole group (9px
  by day, up to 28px at night), independent of and in addition to that
  per-path fix. See the identical comment in the prototype for the full
  reasoning: it explains a blur specifically worse "on transition to blue"
  (the static halo is blue-tinted), and because the dash's stroke-dashoffset
  animates every frame, this ancestor's Gaussian blur could not be cached and
  was recomputed at 28px every single frame for as long as the page was open.
*/
.hero-blueprint-scene .routing {
      z-index: 5;
      pointer-events: none;
}
.hero-blueprint-scene .trane-unit {
      position: relative;
      z-index: 2;
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
      filter: drop-shadow(0 8px 24px rgba(4, 12, 20, 0.28));
      background: transparent;
}
.hero-blueprint-scene .unit-cabinet-highlight,
.hero-blueprint-scene .unit-top-highlight {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .unit-cabinet-highlight {
      stroke: var(--unit-cabinet-highlight-stroke);
      stroke-width: 0.85;
      opacity: 0.7;
}
.hero-blueprint-scene .unit-top-highlight {
      stroke: var(--unit-top-highlight-stroke);
      stroke-width: 0.8;
      opacity: 0.62;
}
.hero-blueprint-scene .unit-side {
      fill: var(--unit-side);
      stroke: var(--unit-side-stroke);
      stroke-width: 1;
}
.hero-blueprint-scene .unit-face {
      fill: var(--unit-face);
      stroke: var(--unit-face-stroke);
      stroke-width: 1.05;
}
.hero-blueprint-scene .unit-top {
      fill: var(--unit-top);
      stroke: var(--unit-top-stroke);
      stroke-width: 1.1;
}
.hero-blueprint-scene .unit-face,
.hero-blueprint-scene .unit-side,
.hero-blueprint-scene .unit-top,
.hero-blueprint-scene .unit-grille-frame,
.hero-blueprint-scene .unit-grille-lines,
.hero-blueprint-scene .unit-side-grille,
.hero-blueprint-scene .unit-coil-fins,
.hero-blueprint-scene .unit-coil-fins--side,
.hero-blueprint-scene .unit-top-rim,
.hero-blueprint-scene .unit-top-grille-ring,
.hero-blueprint-scene .unit-top-grille-ring--inner,
.hero-blueprint-scene .unit-top-grille-brace,
.hero-blueprint-scene .unit-top-grille-spokes,
.hero-blueprint-scene .unit-motor-ring,
.hero-blueprint-scene .unit-fan-blade,
.hero-blueprint-scene .unit-fan-hub,
.hero-blueprint-scene .unit-base,
.hero-blueprint-scene .unit-foot {
      filter: drop-shadow(0 0 2px var(--teal));
}
.hero-blueprint-scene .unit-cap-depth,
.hero-blueprint-scene .unit-concept-contour {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .unit-cap-depth {
      stroke: var(--unit-cap-stroke);
      stroke-width: 0.8;
}
.hero-blueprint-scene .unit-concept-contour {
      stroke: var(--unit-contour-stroke);
      stroke-width: 0.56;
      stroke-dasharray: 1.5 3.5;
}
.hero-blueprint-scene .unit-edge,
.hero-blueprint-scene .unit-top-rim {
      fill: none;
      stroke: var(--unit-edge-stroke);
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .unit-edge {
      stroke-width: 1;
      opacity: 0.82;
}
.hero-blueprint-scene .unit-top-rim {
      stroke-width: 0.9;
      opacity: 0.72;
}
.hero-blueprint-scene .unit-base,
.hero-blueprint-scene .unit-foot {
      stroke-width: 0.8;
}
.hero-blueprint-scene .unit-base {
      fill: var(--unit-base-fill);
      stroke: var(--unit-base-stroke);
}
.hero-blueprint-scene .unit-foot {
      fill: var(--unit-foot-fill);
      stroke: var(--unit-foot-stroke);
}
.hero-blueprint-scene .unit-installation-datum {
      fill: none;
      stroke: rgba(226, 197, 135, 0.3);
      stroke-width: 0.65;
      stroke-dasharray: 2 5;
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .unit-grille-field {
      fill: rgba(2, 19, 29, 0.025);
      stroke: var(--unit-grille-stroke);
      stroke-width: 0.8;
}
.hero-blueprint-scene .unit-coil-fins,
.hero-blueprint-scene .unit-panel-seam,
.hero-blueprint-scene .unit-corner-post {
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .unit-coil-fins {
      fill: none;
      stroke: var(--unit-coil-fins-stroke);
      stroke-width: 0.48;
      stroke-linecap: round;
}
.hero-blueprint-scene .unit-coil-fins--side {
      stroke: var(--unit-coil-fins-side-stroke);
}
.hero-blueprint-scene .unit-panel-seam {
      fill: var(--unit-panel-seam-fill);
      stroke: var(--unit-panel-seam-stroke);
      stroke-width: 0.66;
}
.hero-blueprint-scene .unit-corner-post {
      fill: rgba(140, 220, 255, 0.055);
      stroke: rgba(209, 239, 245, 0.52);
      stroke-width: 0.62;
}
.hero-blueprint-scene .unit-grille-lines {
      fill: none;
      stroke: var(--unit-grille-lines-stroke);
      stroke-width: 1.25;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.76;
}
.hero-blueprint-scene .unit-top-grille-ring,
.hero-blueprint-scene .unit-top-grille-brace,
.hero-blueprint-scene .unit-top-grille-spokes,
.hero-blueprint-scene .unit-motor-ring {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .unit-top-grille-ring {
      stroke: var(--unit-top-grille-ring-stroke);
      stroke-width: 0.9;
}
.hero-blueprint-scene .unit-top-grille-ring--inner {
      stroke: var(--unit-top-grille-ring-inner-stroke);
      stroke-width: 0.68;
}
.hero-blueprint-scene .unit-top-grille-brace {
      stroke: var(--unit-top-grille-brace-stroke);
      stroke-width: 0.58;
}
.hero-blueprint-scene .unit-top-grille-spokes {
      stroke: var(--unit-top-grille-spokes-stroke);
      stroke-width: 0.52;
}
.hero-blueprint-scene .unit-motor-ring {
      stroke: var(--unit-rim-stroke);
      stroke-width: 0.6;
}
.hero-blueprint-scene .unit-top-fastener,
.hero-blueprint-scene .unit-cap-fastener,
.hero-blueprint-scene .unit-anchor-bolt,
.hero-blueprint-scene .unit-service-port {
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .unit-top-fastener {
      fill: none;
      stroke: rgba(226, 197, 135, 0.52);
      stroke-width: 0.55;
}
.hero-blueprint-scene .unit-cap-fastener {
      fill: rgba(140, 220, 255, 0.025);
      stroke: var(--unit-cap-fastener-stroke);
      stroke-width: 0.5;
}
.hero-blueprint-scene .unit-anchor-bolt {
      fill: rgba(226, 197, 135, 0.08);
      stroke: var(--unit-anchor-bolt-stroke);
      stroke-width: 0.5;
}
.hero-blueprint-scene .unit-service-port {
      fill: rgba(5, 26, 37, 0.04);
      stroke: rgba(226, 197, 135, 0.72);
      stroke-width: 0.62;
}
.hero-blueprint-scene .unit-grille-frame {
      fill: none;
      stroke: var(--unit-grille-frame-stroke);
      stroke-width: 1.2;
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .unit-side-grille {
      fill: none;
      stroke: var(--unit-side-grille-stroke);
      stroke-width: 1.1;
      stroke-linecap: round;
      opacity: 0.72;
}
.hero-blueprint-scene .unit-screw {
      fill: rgba(6, 26, 36, 0.04);
      stroke: rgba(226, 197, 135, 0.64);
      stroke-width: 0.8;
}
.hero-blueprint-scene .unit-logo-plate {
      fill: var(--trane-plate);
      stroke: rgba(209, 239, 245, 0.4);
      stroke-width: 0.8;
      filter: none;
}
.hero-blueprint-scene .unit-logo-red,
.hero-blueprint-scene .unit-wordmark path {
      fill: var(--trane-red);
      stroke: none;
}
.hero-blueprint-scene .unit-logo-rail {
      fill: rgba(213, 54, 43, 0.06);
      stroke: rgba(213, 54, 43, 0.78);
      stroke-width: 0.58;
      opacity: 0.82;
}
.hero-blueprint-scene .unit-construction,
.hero-blueprint-scene .unit-dimension,
.hero-blueprint-scene .unit-centerline,
.hero-blueprint-scene .unit-callout {
      fill: none;
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .unit-construction {
      stroke: rgba(140, 220, 255, 0.24);
      stroke-width: 0.65;
      stroke-dasharray: 2 5;
}
.hero-blueprint-scene .unit-dimension {
      stroke: rgba(226, 197, 135, 0.46);
      stroke-width: 0.7;
}
.hero-blueprint-scene .unit-centerline {
      stroke: rgba(140, 220, 255, 0.32);
      stroke-width: 0.65;
      stroke-dasharray: 8 4 2 4;
}
.hero-blueprint-scene .unit-callout {
      stroke: rgba(226, 197, 135, 0.34);
      stroke-width: 0.7;
}
.hero-blueprint-scene .unit-fan-rotor {
      transform-box: view-box;
      transform-origin: 86px 54px;
      animation: unitFanSpin var(--fan-spin-duration) linear infinite;
}
.hero-blueprint-scene .unit-fan-blade {
      fill: var(--unit-fan-blade-fill);
      stroke: var(--unit-fan-blade-stroke);
      stroke-width: 0.7;
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .unit-fan-hub {
      fill: rgba(226, 197, 135, 0.1);
      stroke: var(--unit-fan-hub-stroke);
      stroke-width: 0.7;
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .dash {
      stroke-dasharray: 10 16;
      animation: dashMove var(--route-duration) linear infinite;
}
.hero-blueprint-scene .page-circuit {
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .page-circuit {
      fill: none;
      stroke: rgba(140, 220, 255, 0.6);
      stroke-width: 1.45;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.76;
}
:root:not([data-theme="light"]) .hero-blueprint-scene .page-circuit {
      stroke: rgba(173, 232, 255, 0.84);
      opacity: 0.92;
      filter: drop-shadow(0 0 7px rgba(126, 224, 255, 0.94)) drop-shadow(0 0 16px rgba(54, 164, 255, 0.54));
}
:root[data-theme="light"] .hero-blueprint-scene .page-circuit {
      stroke: rgba(8, 107, 148, 0.82);
}
.hero-blueprint-scene .page-circuit--compact {
      display: none;
}
.hero-blueprint-scene .sand-contour {
      fill: none;
      stroke: rgba(245, 239, 223, 0.18);
      stroke-width: 1.15;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.82;
      vector-effect: non-scaling-stroke;
}
.hero-blueprint-scene .sand-contour--wet {
      stroke: rgba(216, 244, 239, 0.42);
      opacity: 0.82;
}
.hero-blueprint-scene .sand-contour--shade {
      stroke: rgba(73, 116, 119, 0.16);
      opacity: 0.5;
}

.hero-blueprint-scene .shoreline-drift {
      transform-origin: 720px 500px;
      will-change: transform;
      animation: shorelineDrift var(--drift-duration) ease-in-out infinite alternate;
}
.hero-blueprint-scene .shoreline-wave {
      will-change: transform, opacity;
      animation: shorelineSwash var(--swash-duration) var(--swash-delay, 0s) infinite;
}
.hero-blueprint-scene .shoreline--near {
      --drift-duration: 19s;
      --drift-from: -22px;
      --drift-to: 20px;
      --drift-tilt-from: -0.18deg;
      --drift-tilt-to: 0.2deg;
      --swash-duration: 7.4s;
      --swash-out: -14px;
      --swash-in: 23px;
      --swash-min: 0.26;
      --swash-max: 1;
}
.hero-blueprint-scene .shoreline--far {
      --drift-duration: 26s;
      --drift-from: 18px;
      --drift-to: -16px;
      --drift-tilt-from: 0.16deg;
      --drift-tilt-to: -0.14deg;
      --swash-duration: 9.1s;
      --swash-delay: -4.3s;
      --swash-out: -10px;
      --swash-in: 15px;
      --swash-min: 0.3;
      --swash-max: 0.9;
}
.hero-blueprint-scene .shoreline-sheet,
.hero-blueprint-scene .shoreline-lip {
      stroke: none;
}
.hero-blueprint-scene .shoreline--near .shoreline-sheet { fill: rgba(93, 158, 166, 0.034);
}
.hero-blueprint-scene .shoreline--far .shoreline-sheet { fill: rgba(93, 158, 166, 0.028);
}
.hero-blueprint-scene .shoreline--near .shoreline-lip { fill: rgba(78, 140, 150, 0.062);
}
.hero-blueprint-scene .shoreline--far .shoreline-lip { fill: rgba(78, 140, 150, 0.05);
}
.hero-blueprint-scene .shoreline-foam {
      fill: none;
      stroke: rgba(255, 255, 255, 0.8);
      stroke-width: 1.4;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
      /*
        The 2.5px white halo is gone by request - no blur on animated elements.
        The landward shade stays, because without it white foam has nothing to
        separate it from the white dune below, but it is now a zero-radius
        offset shadow: a hard 1.5px drop, no Gaussian, nothing to re-blur per
        frame. Do not restore a blur radius here.
      */
      filter: drop-shadow(0 1.5px 0 rgba(52, 112, 118, 0.42));
      animation: shorelineFoam var(--swash-duration) var(--swash-delay, 0s) infinite;
}
.hero-blueprint-scene .shoreline-stain {
      /*
        Was blur(1.6px), removed by request. Little is lost: this path is
        filled with the #dampSand gradient, which already fades to
        stop-opacity 0 at its landward edge, so the softness that reads as
        "damp sand soaking in" comes from the gradient rather than from the
        filter. Soften with gradient stops here, never with a blur - this
        element animates on a 14s cycle and a filter on it is re-rastered
        for the life of the page.
      */
      animation: shorelineSoak 14s ease-in-out infinite;
}

/* Day: warm wet-sand grey rather than the night's slate-blue. */
:root[data-theme="light"] .hero-blueprint-scene .damp-stop-0 { stop-color: #6e6c5c; stop-opacity: 0.32; }
:root[data-theme="light"] .hero-blueprint-scene .damp-stop-1 { stop-color: #7c7a6a; stop-opacity: 0.17; }
:root[data-theme="light"] .hero-blueprint-scene .damp-stop-2 { stop-color: #8a8878; stop-opacity: 0; }

/*
  The condenser's own ground glow, cross-fading blue/red on the unit's shared
  8s clock. Its broad ellipse gives the nighttime pool enough spatial reach to
  read against the moonlit falloff. Two static-colour ellipses opacity-pulsing
  on the same keyframes, 4s out of phase, replace an animated stop-color: this
  engine leaves SVG stop-color inert. SMIL is disabled in the home hero after a
  prior flicker, and an 8px filter bloom re-rasterized on every frame. Ordinary
  alpha paint is the deliberately cheap, crisp alternative.
*/
@keyframes condenserGlowPulse {
  0%, 100% { opacity: var(--condenser-glow-peak, 0.5); }
  50% { opacity: 0; }
}

.hero-blueprint-scene .condenser-glow-blue,
.hero-blueprint-scene .condenser-glow-red {
  animation: condenserGlowPulse 8s ease-in-out infinite;
  animation-delay: 0s;
  --condenser-glow-peak: 0.6;
  /* Both themes animate only opacity on these SVG ellipses. Keep the compositor
     hint at the shared rule so changing themes cannot change the raster path. */
  will-change: opacity;
}

.hero-blueprint-scene .condenser-glow-red {
  animation-delay: -4s;
}

/* B/Tracer advances the condenser side cycle by six seconds. Advance both
   ground-pool channels by the same amount so the pool hue and cabinet sides
   remain phase-locked: blue -6s, red another half-cycle behind at -10s. A
   keeps the base 0s/-4s pair above. */
.hero-blueprint-scene.trace-holo .condenser-glow-blue {
  animation-delay: -6s;
}

.hero-blueprint-scene.trace-holo .condenser-glow-red {
  animation-delay: -10s;
}

/*
  The Moon/Dark theme activates this static radial exposure map regardless of
  the clock hour. Moonlight leaves the dune cool silver, while the
  condenser's ordinary-paint ellipses own the only concentrated highlight and
  the surrounding sand falls decisively into cool shadow. There is no filter,
  blend mode, or opacity animation on the falloff, so it does not reintroduce
  the cross-device flicker path.
*/
.hero-blueprint-scene .moonlit-condenser-falloff {
  opacity: 0;
  filter: none;
  mix-blend-mode: normal;
}

:root[data-theme="dark"] .home-page .parallax-hero--home .moonlit-condenser-falloff {
  opacity: 1;
}

.hero-blueprint-scene .condenser-light-base {
  opacity: 0;
  filter: none;
  mix-blend-mode: normal;
}

.hero-blueprint-scene .condenser-ambient-bloom {
  opacity: 0;
  filter: none;
  mix-blend-mode: normal;
}

:root[data-theme="dark"] .home-page .parallax-hero--home .condenser-light-base {
  opacity: 0.62;
}

:root[data-theme="dark"] .home-page .parallax-hero--home .condenser-ambient-bloom {
  opacity: 0.68;
}

:root[data-theme="dark"] .home-page .parallax-hero--home .condenser-glow-blue,
:root[data-theme="dark"] .home-page .parallax-hero--home .condenser-glow-red {
  --condenser-glow-peak: 0.72;
}

/*
  Normal blending, not screen: screen only lightens toward white, and on sand
  this light to begin with that washed out the hue difference almost
  entirely even once the opacity mechanism was fixed and confirmed running.
  Direct alpha blending actually tints the sand toward blue or red.
*/
:root[data-theme="light"] .hero-blueprint-scene .condenser-glow-blue,
:root[data-theme="light"] .hero-blueprint-scene .condenser-glow-red {
  --condenser-glow-peak: 0.16;
}

/* The dark site theme carries the existing fuller vignette; light stays close to white. */
.hero-blueprint-scene .sand-vignette {
  opacity: 0.75;
}

:root[data-theme="light"] .hero-blueprint-scene .sand-vignette {
  opacity: 0.16;
}

@media (prefers-reduced-motion: reduce) {
  .hero-blueprint-scene .condenser-glow-blue,
  .hero-blueprint-scene .condenser-glow-red {
    animation: none !important;
  }
}
.hero-blueprint-scene.hybrid-holo .page-circuit {
      animation: dashMove var(--route-duration) linear infinite, hybridStrokeFlow 8s infinite ease-in-out;
      animation-delay: 0s, 0s;
}
.hero-blueprint-scene.hybrid-holo :is(
      .unit-grille-frame,
.hero-blueprint-scene .unit-side-grille
    ) {
      animation: hybridStrokeFlow 8s infinite ease-in-out;
      animation-delay: 0s; /* Phase 1 */
}
.hero-blueprint-scene.hybrid-holo :is(
      .unit-grille-lines,
.hero-blueprint-scene .unit-coil-fins,
.hero-blueprint-scene .unit-coil-fins--side
    ) {
      animation: hybridStrokeFlowDetail 8s infinite ease-in-out;
      animation-delay: 0s; /* Phase 1 (tighter detail glow) */
}
.hero-blueprint-scene.hybrid-holo :is(
      .unit-top-rim,
.hero-blueprint-scene .unit-top-grille-ring,
.hero-blueprint-scene .unit-top-grille-ring--inner,
.hero-blueprint-scene .unit-top-grille-brace,
.hero-blueprint-scene .unit-top-grille-spokes,
.hero-blueprint-scene .unit-motor-ring,
.hero-blueprint-scene .unit-top,
.hero-blueprint-scene .unit-face,
.hero-blueprint-scene .unit-side,
.hero-blueprint-scene .unit-edge,
.hero-blueprint-scene .unit-corner-post,
.hero-blueprint-scene .unit-cabinet-highlight,
.hero-blueprint-scene .unit-top-highlight,
.hero-blueprint-scene .unit-base,
.hero-blueprint-scene .unit-foot
    ) {
      animation: hybridStrokeFlow 8s infinite ease-in-out;
      animation-delay: -4s; /* Phase 2: Symmetrical 180deg counter-phase balance */
}
.hero-blueprint-scene.hybrid-holo .unit-fan-blade {
      animation: hybridStrokeAndFillFlow 8s infinite ease-in-out;
      animation-delay: -4s;
}
.hero-blueprint-scene.hybrid-holo .unit-fan-hub {
      animation: hybridHubFlow 8s infinite ease-in-out;
      animation-delay: -4s;
}
.hero-blueprint-scene.hybrid-holo .unit-face { stroke-width: 1.35;
}
.hero-blueprint-scene.hybrid-holo .unit-side { stroke-width: 1.15;
}
.hero-blueprint-scene.hybrid-holo .unit-top { stroke-width: 1.15;
}
.hero-blueprint-scene.hybrid-holo .unit-grille-frame { stroke-width: 0.8;
}
.hero-blueprint-scene.hybrid-holo .unit-top-rim { stroke-width: 1.45;
}
.hero-blueprint-scene.hybrid-holo .page-circuit { stroke-width: 1.75;
}
.hero-blueprint-scene.hybrid-holo .unit-cabinet-highlight { stroke-width: 1.15;
}
.hero-blueprint-scene.hybrid-holo .unit-top-highlight { stroke-width: 1.15;
}
.hero-blueprint-scene.trace-holo .page-circuit {
      animation: dashMove var(--route-duration) linear infinite, hybridTracer 8s infinite ease-in-out;
      animation-delay: 0s, 0s;
}
.hero-blueprint-scene.trace-holo :is(
      .unit-top-rim,
.hero-blueprint-scene .unit-top-grille-ring,
.hero-blueprint-scene .unit-top-grille-ring--inner,
.hero-blueprint-scene .unit-top-grille-brace,
.hero-blueprint-scene .unit-top-grille-spokes,
.hero-blueprint-scene .unit-motor-ring,
.hero-blueprint-scene .unit-top
    ) {
      animation: hybridTracer 8s infinite ease-in-out;
      animation-delay: -4s;
}
.hero-blueprint-scene.trace-holo .unit-fan-blade {
      animation: hybridTracerAndFill 8s infinite ease-in-out;
      animation-delay: -4s;
}
.hero-blueprint-scene.trace-holo .unit-fan-hub {
      animation: hybridTracerHub 8s infinite ease-in-out;
      animation-delay: -4s;
}
.hero-blueprint-scene.trace-holo :is(
      .unit-face,
.hero-blueprint-scene .unit-side,
.hero-blueprint-scene .unit-edge,
.hero-blueprint-scene .unit-corner-post,
.hero-blueprint-scene .unit-cabinet-highlight,
.hero-blueprint-scene .unit-top-highlight,
.hero-blueprint-scene .unit-base,
.hero-blueprint-scene .unit-foot,
.hero-blueprint-scene .unit-grille-frame,
.hero-blueprint-scene .unit-side-grille
    ) {
      animation: hybridTracer 8s infinite ease-in-out;
      animation-delay: -6s;
}
.hero-blueprint-scene.trace-holo :is(
      .unit-grille-lines,
.hero-blueprint-scene .unit-coil-fins,
.hero-blueprint-scene .unit-coil-fins--side
    ) {
      animation: hybridTracerDetail 8s infinite ease-in-out;
      animation-delay: -6s; /* Tighter detail style with no filter */
}

/* Light/B has a much brighter, larger SVG painting surface than the dark
   scene. Cycling dozens of individual stroke/fill paths makes that surface
   repaint continuously and is the remaining cross-machine flicker source.
   Keep the single travelling circuit, the physical fan, water, shoreline and
   condenser source in motion; hold only the decorative cabinet tracer at its
   resting blue state. This is intentionally scoped to Light so the approved
   Night treatment remains untouched. See docs/debt/*-light-hero-tracer-pruning.md. */
:root[data-theme="light"] .home-page .hero-blueprint-scene.trace-holo :is(
      .unit-top-rim,
      .unit-top-grille-ring,
      .unit-top-grille-ring--inner,
      .unit-top-grille-brace,
      .unit-top-grille-spokes,
      .unit-motor-ring,
      .unit-top,
      .unit-face,
      .unit-side,
      .unit-edge,
      .unit-corner-post,
      .unit-cabinet-highlight,
      .unit-top-highlight,
      .unit-base,
      .unit-foot,
      .unit-grille-frame,
      .unit-side-grille,
      .unit-grille-lines,
      .unit-coil-fins,
      .unit-coil-fins--side
    ) {
      animation: none;
      stroke: var(--hybrid-blue-stroke);
}

:root[data-theme="light"] .home-page .hero-blueprint-scene.trace-holo :is(
      .unit-fan-blade,
      .unit-fan-hub
    ) {
      animation: none;
      stroke: var(--hybrid-blue-stroke);
      fill: var(--hybrid-blue-fill);
}

@keyframes dashMove {
      to {
        stroke-dashoffset: -180;
      }
}
@keyframes shorelineDrift {
      from { transform: translateX(var(--drift-from)) rotate(var(--drift-tilt-from)); }
      to { transform: translateX(var(--drift-to)) rotate(var(--drift-tilt-to)); }
}
@keyframes shorelineSwash {
      0% {
        transform: translateY(var(--swash-out));
        opacity: var(--swash-min);
        animation-timing-function: cubic-bezier(0.36, 0, 0.5, 1);
      }

      34% {
        transform: translateY(var(--swash-in));
        opacity: var(--swash-max);
        animation-timing-function: cubic-bezier(0.4, 0, 0.62, 0.5);
      }

      46% {
        transform: translateY(calc(var(--swash-in) + 2px));
        opacity: var(--swash-max);
        animation-timing-function: cubic-bezier(0.22, 0.08, 0.5, 1);
      }

      100% {
        transform: translateY(var(--swash-out));
        opacity: var(--swash-min);
      }
}
@keyframes shorelineFoam {
      0% { opacity: 0.2; }
      30% { opacity: 0.78; }
      46% { opacity: 0.68; }
      100% { opacity: 0.18; }
}
@keyframes shorelineSoak {
      0%, 100% { opacity: 0.62; }
      45% { opacity: 0.9; }
}
@keyframes unitFanSpin {
      to {
        transform: rotate(360deg);
      }
}
/*
  No colour-tinted bloom here. This keyframe is shared by ~15 unit detail lines
  at once (rim, grille, motor ring, face, side, edges...): an 8px drop-shadow
  animating on each of them means the browser recomputes 15 independent
  Gaussian blurs every frame of an 8s cycle. Measured with Chrome's
  Performance.getMetrics, that cost 28.6% of a real 10s window on TaskDuration
  alone, and visually it reads as the whole unit "flashing" into a coloured
  haze rather than cycling colour cleanly. The crisp 1.2px separating outline
  carries the same colour cycle at near-zero cost; the unit's overall
  silhouette glow lives once, on the wrapping .trane-unit, not per detail line.
*/
@keyframes hybridStrokeFlow {
      0%, 100% {
        stroke: var(--hybrid-blue-stroke);
        filter: none;
      }
      50% {
        stroke: var(--hybrid-red-stroke);
        filter: none;
      }
}
@keyframes hybridStrokeAndFillFlow {
      0%, 100% {
        stroke: var(--hybrid-blue-stroke);
        fill: var(--hybrid-blue-fill);
        filter: none;
      }
      50% {
        stroke: var(--hybrid-red-stroke);
        fill: var(--hybrid-red-fill);
        filter: none;
      }
}
@keyframes hybridHubFlow {
      0%, 100% {
        stroke: var(--hybrid-blue-stroke);
        fill: var(--hybrid-blue-fill);
        filter: none;
      }
      50% {
        stroke: var(--hybrid-red-stroke);
        fill: var(--hybrid-red-fill);
        filter: none;
      }
}
@keyframes hybridStrokeFlowDetail {
      0%, 100% {
        stroke: var(--hybrid-blue-stroke);
        filter: none;
      }
      50% {
        stroke: var(--hybrid-red-stroke);
        filter: none;
      }
}
/* Same fix as hybridStrokeFlow: no per-element colour bloom. See its comment. */
@keyframes hybridTracer {
      0%, 100% {
        stroke: var(--hybrid-blue-stroke);
        filter: none;
      }
      50% {
        stroke: var(--hybrid-red-stroke);
        filter: none;
      }
}
@keyframes hybridTracerAndFill {
      0%, 100% {
        stroke: var(--hybrid-blue-stroke);
        fill: var(--hybrid-blue-fill);
        filter: none;
      }
      50% {
        stroke: var(--hybrid-red-stroke);
        fill: var(--hybrid-red-fill);
        filter: none;
      }
}
@keyframes hybridTracerHub {
      0%, 100% {
        stroke: var(--hybrid-blue-stroke);
        fill: var(--hybrid-blue-fill);
        filter: none;
      }
      50% {
        stroke: var(--hybrid-red-stroke);
        fill: var(--hybrid-red-fill);
        filter: none;
      }
}
@keyframes hybridTracerDetail {
      0%, 100% {
        stroke: var(--hybrid-blue-stroke);
        filter: none;
      }
      50% {
        stroke: var(--hybrid-red-stroke);
        filter: none;
      }
}
@media (max-width: 760px) {
  .hero-blueprint-scene {
        min-block-size: 100dvb;
        aspect-ratio: auto;
        border: 0;
        border-radius: 0;
  }
  .hero-blueprint-scene .page-circuit--wide {
        display: none;
  }
  .hero-blueprint-scene .page-circuit--compact {
        display: block;
  }
}
@media (max-width: 980px) and (min-width: 761px) {
  .hero-blueprint-scene {
        aspect-ratio: 4 / 5;
        min-block-size: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blueprint-scene .dash,
.hero-blueprint-scene .material-wash,
.hero-blueprint-scene .shoreline-drift,
.hero-blueprint-scene .shoreline-wave,
.hero-blueprint-scene .shoreline-foam,
.hero-blueprint-scene .shoreline-stain,
.hero-blueprint-scene .unit-fan-rotor,
.hero-blueprint-scene .unit-top-rim,
.hero-blueprint-scene .unit-top-grille-ring,
.hero-blueprint-scene .unit-top-grille-ring--inner,
.hero-blueprint-scene .unit-top-grille-brace,
.hero-blueprint-scene .unit-top-grille-spokes,
.hero-blueprint-scene .unit-motor-ring,
.hero-blueprint-scene .unit-fan-blade,
.hero-blueprint-scene .unit-fan-hub,
.hero-blueprint-scene .unit-grille-frame,
.hero-blueprint-scene .unit-grille-lines,
.hero-blueprint-scene .unit-coil-fins,
.hero-blueprint-scene .unit-side-grille,
.hero-blueprint-scene .unit-coil-fins--side {
        animation: none !important;
  }
}

/* --- Hero integration overrides -------------------------------------------
   The prototype is a standalone framed figure; as a hero background it must
   fill its container and carry no frame of its own. Everything above comes
   from the prototype verbatim, so the corrections live here rather than in the
   extracted block, keeping re-extraction clean. */
.hero-bg.hero-blueprint-scene {
  aspect-ratio: auto;
  min-block-size: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* A one-shot heroSceneFadeIn opacity animation used to sit here, added to mask
   the scene's hard first-paint pop. It did not help - the pop was never the
   thing being reported - and an opacity animation on this container is its own
   hazard: it wraps a subtree containing mix-blend-mode: screen wave layers in
   a temporary stacking context, so the blend target changes when the animation
   ends. Removed rather than kept as dead weight. If the first paint needs
   softening again, do it without animating this element's opacity. */

.hero-blueprint-scene .hero-svg.hero-system-splash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-blueprint-scene .material-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The scene's viewBox is 2:1 under xMidYMid slice. The hero circuit line remains
   responsive across all viewports, connecting the hero condenser to below fold. */
@media (max-width: 900px) {
  .hero-blueprint-scene .hero-blueprint-circuit {
    display: block !important;
  }
}

/* Scene sky. Night is the prototype's default; day maps onto the site's light
   theme, matching how the rest of the transplanted rules are re-scoped. */
.hero-blueprint-scene .cb-shore-sky-0 { stop-color: #0d2038; }
.hero-blueprint-scene .cb-shore-sky-1 { stop-color: #15405b; }
.hero-blueprint-scene .cb-shore-sky-2 { stop-color: #2e7482; }
.hero-blueprint-scene .cb-shore-sky-3 { stop-color: #ffffff; }
.hero-blueprint-scene .cb-shore-sky-4 { stop-color: #ffffff; }

:root[data-theme="light"] .hero-blueprint-scene .cb-shore-sky-0 { stop-color: #6ecad0; }
:root[data-theme="light"] .hero-blueprint-scene .cb-shore-sky-1 { stop-color: #a4e5e7; }
:root[data-theme="light"] .hero-blueprint-scene .cb-shore-sky-2 { stop-color: #d6f2f2; }
:root[data-theme="light"] .hero-blueprint-scene .cb-shore-sky-3 { stop-color: #ffffff; }
:root[data-theme="light"] .hero-blueprint-scene .cb-shore-sky-4 { stop-color: #ffffff; }

/* Uniform strength. Any positional dimming of this line reads as the dash
   going soft partway along its run rather than as an intentional treatment. */
.hero-blueprint-scene .hero-blueprint-circuit {
  opacity: 1;
}

/* The scene now carries its own day palette (see the sky stops above and the
   re-scoped .scene.light-mode rules), so it no longer needs the historical
   light-theme crush in content-templates.css. That rule existed because the old
   splash was hard-coded dark and had to be faded to 7% to keep dark hero text
   legible over it; this one adapts instead. */
/* The unit renders at full strength in both themes: it is the subject of the
   scene, and the copy over it is kept legible by contrast treatment rather than
   by washing the artwork out. */

/* --- Home hero paragraph typography + theme inversion -----------------------
   Day is the geometry source of truth. Night keeps the exact same family,
   weight, style, paint order, and 4px outline, then swaps the near-black fill
   with the warm-white outline. Only colors change between themes. */
.home-page .parallax-hero--home {
  --home-hero-lede-fill: #1a2a3a;
  --home-hero-lede-outline: #f7f4ed;
  --home-hero-lede-outline-glow: rgba(247, 244, 237, 0.74);
  --home-hero-lede-depth: rgba(10, 30, 60, 0.14);
  --home-cta-surface: rgb(247 244 237 / 0.76);
  --home-cta-schedule-surface: linear-gradient(135deg, rgb(27 126 142 / 0.16), rgb(27 126 142 / 0.06));
  --home-cta-ink: #1a2a3a;
  --home-trust-surface: rgb(247 244 237 / 0.42);
  --home-trust-ink: #1a2a3a;
  --home-trust-keyline: #1a2a3a;
  --home-trust-letter-outline: #ffffff;
}

:root[data-theme="dark"] .home-page .parallax-hero--home {
  --home-hero-lede-fill: #f7f4ed;
  --home-hero-lede-outline: #1a2a3a;
  --home-hero-lede-outline-glow: rgba(26, 42, 58, 0.74);
  --home-hero-lede-depth: rgba(247, 244, 237, 0.14);
  --home-cta-surface: rgb(10 30 60 / 0.72);
  --home-cta-schedule-surface: linear-gradient(135deg, rgb(110 171 184 / 0.24), rgb(110 171 184 / 0.1));
  --home-cta-ink: #f7f4ed;
  --home-trust-surface: rgb(16 36 59 / 0.42);
  --home-trust-ink: #f7f4ed;
  --home-trust-keyline: #6eabb8;
  --home-trust-letter-outline: #000000;
}

.home-page .parallax-hero--home .parallax-hero__lede {
  paint-order: stroke fill !important;
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', 'Segoe UI', sans-serif) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

:root[data-theme="dark"] .home-page .parallax-hero--home .parallax-hero__lede {
  color: #ffffff !important;
  -webkit-text-stroke: 3.5px rgba(4, 12, 26, 0.92) !important;
  text-shadow:
    0 0 6px rgba(4, 12, 26, 0.95),
    0 2px 12px rgba(4, 12, 26, 0.85),
    0 4px 20px rgba(0, 4, 14, 0.75),
    0 8px 30px rgba(0, 0, 0, 0.65) !important;
}

:root[data-theme="light"] .home-page .parallax-hero--home .parallax-hero__lede {
  color: #0e2038 !important;
  -webkit-text-stroke: 3.5px rgba(255, 255, 255, 0.92) !important;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.98),
    0 2px 10px rgba(255, 255, 255, 0.85),
    0 4px 16px rgba(10, 30, 60, 0.38),
    0 8px 24px rgba(10, 30, 60, 0.20) !important;
}

/* --- Dark-theme legibility over quartz sand --------------------------------
   The scene's lower third is moonlit quartz-white sand in BOTH themes, which is
   the point of the palette. That inverts the usual assumption for anything the
   page paints down there: dark theme's light-on-dark trust strip measured
   1.01:1 against it. Foreground that sits on the sand therefore takes the
   light-theme treatment regardless of theme. This keeps the hero foreground
   intact and legible rather than restyling it for its own sake.
   The lede now owns its separate mirrored theme palette above. The headline
   sits above the waterline over dark water and is left alone. */
:root[data-theme="dark"] .home-page .parallax-hero--home .trust-strip,
:root[data-theme="dark"] .home-page .parallax-hero--home .trust-strip * {
  color: #1c2436 !important;
  text-shadow:
    0 1px 0 rgb(255, 255, 255),
    0 0 2px rgb(255, 255, 255),
    0 2px 8px rgba(255, 255, 255, 0.82) !important;
}

/* CTA and credential-rail translucency live on their painted fills, never on a
   containing element. A parent opacity would dim the labels together with the
   scene behind them, which is especially apparent against the moving night water. */
:root[data-theme] .home-page .parallax-hero--home .hero-combo-pill {
  background: var(--home-cta-surface) !important;
  border-color: color-mix(in srgb, var(--home-cta-ink) 28%, transparent) !important;
  box-shadow: 0 10px 28px rgb(10 30 60 / 0.18) !important;
  opacity: 1 !important;
}

.home-page .parallax-hero--home .hero-combo-pill__half--schedule {
  background: var(--home-cta-schedule-surface) !important;
  border-inline-end-color: color-mix(in srgb, var(--home-cta-ink) 20%, transparent) !important;
}

:root[data-theme] .home-page .parallax-hero--home .hero-combo-pill :is(.hero-combo-pill__half, .hero-combo-pill__half *) {
  opacity: 1 !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

:root[data-theme="light"] .home-page .parallax-hero--home .hero-combo-pill :is(.hero-combo-pill__half, .hero-combo-pill__half *) {
  color: #1a2a3a !important;
  -webkit-text-fill-color: #1a2a3a !important;
}

:root[data-theme="dark"] .home-page .parallax-hero--home .hero-combo-pill :is(.hero-combo-pill__half, .hero-combo-pill__half *) {
  color: #f7f4ed !important;
  -webkit-text-fill-color: #f7f4ed !important;
}

:root[data-theme] body .home-page .parallax-hero--home .trust-strip {
  opacity: 1 !important;
}


/* --- Hero fit above the category strip -------------------------------------
   The category strip overlays the hero's bottom ~180px, and .le-cover-text
   reserves that with padding-bottom. At short viewport heights the copy is
   still taller than what remains: measured at 1366x768 the trust strip ran 24px
   underneath the strip. Tighten the vertical rhythm there rather than let the
   last row disappear behind it, and prefer trimming gaps over resizing type so
   the hero keeps its intended scale. */
@media (max-height: 950px) {
  .home-page .parallax-hero--home .hero-actions .hero-combo-pill {
    margin-top: 20px !important;
  }
  .home-page .parallax-hero--home .trust-strip {
    margin-top: 16px !important;
  }
  .home-page .parallax-hero--home .parallax-hero__title {
    margin-bottom: 10px !important;
  }
}

@media (max-height: 820px) {
  .home-page .parallax-hero--home .hero-actions .hero-combo-pill {
    margin-top: 12px !important;
  }
  .home-page .parallax-hero--home .trust-strip {
    margin-top: 12px !important;
  }
  .home-page .parallax-hero--home .hero-actions {
    margin-top: 10px !important;
  }
}

/* A wide desktop lede must reflow before it shrinks. The shared component's
   2.4vh type scale quietly reduced it at every shorter height, so this home
   scope holds a fluid width-driven size through the roomy/short-wide range.
   Its measure then expands continuously from 52ch at 900px to 70ch at 760px,
   reclaiming vertical lines before the compact <=720px type step below. The
   viewport-width ceiling keeps the paragraph inside the hero's horizontal
   safety lane. See docs/debt/*-lede-height-width-fluidity.md. */
@media (min-width: 1100px) {
  .home-page .parallax-hero--home .parallax-hero__lede {
    font-size: clamp(18px, 1.5vw, 22px) !important;
    max-width: min(
      calc(100vw - 5rem),
      clamp(52ch, calc(1700px - 120dvh), 72ch)
    ) !important;
  }
}

/* The two stationary home indexes have room for distinct, more legible entry
   scales on wide layouts: services lead at 19px; the denser area directory
   stays at 16px. Keep this desktop-only so compact swipe tracks retain their
   proven 13px, 44px-touch-target rhythm. */
@media (min-width: 1100px) {
  .home-page #home-svc-strip .category-strip__items a {
    font-size: 19px !important;
    line-height: 1.35 !important;
  }

  .home-page #home-loc-strip .category-strip__items a {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
}

/* Below ~720px of viewport height, the title plus expanded lede can no longer
   clear the category strip. Only then does the compact type step engage. */
@media (max-height: 720px) {
  .home-page .parallax-hero--home .parallax-hero__title {
    font-size: clamp(30px, 4.2vw, 58px) !important;
  }
  .home-page .parallax-hero--home .parallax-hero__lede {
    font-size: clamp(14px, 1.15vw, 16px) !important;
    line-height: 1.5 !important;
  }
}

/* A short, wide mobile/tablet viewport has scarce vertical room but substantial
   usable measure. Expand the lede into that horizontal lane first (even when it
   becomes one or two short lines) so responsive fitting does not prematurely
   make the copy small. The title retains its two-line compact-height guard. */
@media (max-height: 720px) and (orientation: landscape) and (max-width: 1099px) {
  .home-page .parallax-hero--home .parallax-hero__lede {
    font-size: clamp(16px, 1.8vw, 18px) !important;
    line-height: 1.45 !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

/* --- Logo-material flower, planted in the trust-to-menu lane ---------------
   The balanced logo leaf, folded-gold material, four-dot center, and complete
   stem remain static SVG paint. Its responsive anchors lower the head into the
   narrow lane between the trust rail and first menu; those opaque menu surfaces
   naturally remain in front. Shorter viewports pull the mark upward rather than
   changing the approved ABF height or adding a layout reserve. */
.hero-blueprint-scene .dune-brand-mark {
  opacity: 0.9;
  transform: translate(320px, 35px) scale(0.85);
  transform-box: view-box;
  transform-origin: 0px 0px;
  filter: none;
  mix-blend-mode: normal;
  pointer-events: none;
}


/* Vertically balance CTA and trust strip on small screens (under 800px) */
@media (max-width: 800px) {
  .home-page .parallax-hero--home .hero-actions {
    margin-top: 1.25rem !important;
    display: flex !important;
    justify-content: center !important;
  }
  .home-page .parallax-hero--home .hero-actions .hero-combo-pill {
    margin-top: 0 !important;
  }
  .home-page .parallax-hero--home .trust-strip {
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content) !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    justify-content: center !important;
  }
  .home-page .parallax-hero--home .trust-strip .sep {
    display: none !important;
  }
}

/* Wide ABF composition: the CTA stays the visual fulcrum while the condenser
   and its dependent illumination/circuit settle to the left and the logo flower
   settles to the right. The source's original 719/600 scene center predates the
   moved cabinet, so it needs the measured 35px/17px correction in addition to
   the unit displacement; the circuit carries the unit displacement directly.
   The 1100px cutover matches the primary-nav/compact scene family; below it the
   established centered compact anchors take over. These are SVG viewBox
   transforms only—no layout reserve or runtime measurement is introduced. See
   docs/debt/*-condenser-dependent-anchors.md. */
@media (min-width: 1100px) {
  .hero-blueprint-scene .hero-blueprint-unit {
    transform: translate(425px, 393px) scale(1.25);
    transform-box: view-box;
    transform-origin: 0 0;
  }

  .hero-blueprint-scene .condenser-glow {
    transform: translate(-235px, 53px);
    transform-box: view-box;
    transform-origin: 0 0;
  }

  .hero-blueprint-scene .hero-blueprint-circuit {
    transform: translate(-270px, 70px);
    transform-box: view-box;
    transform-origin: 0 0;
  }

  .hero-blueprint-scene .dune-brand-mark {
    transform: translate(120px, 65px) scale(0.85);
  }
}

@media (min-width: 1100px) and (max-height: 760px) {
  .hero-blueprint-scene .hero-blueprint-unit {
    transform: translate(425px, 323px) scale(1.25);
  }

  .hero-blueprint-scene .condenser-glow {
    transform: translate(-235px, -17px);
  }

  .hero-blueprint-scene .hero-blueprint-circuit {
    transform: translate(-270px, 0);
  }

  .hero-blueprint-scene .dune-brand-mark {
    transform: translate(120px, -36px) scale(0.85);
  }
}

/* Fluidly scale the CTA sandwich through all compact widths down to the smallest
   phone screen, balancing the condenser to the left and flower to the right of 
   the scene midpoint. These remain transform-only scene coordinates, so they do 
   not reserve layout space or add a runtime layout read. See
   docs/debt/*-responsive-sandwich-anchor.md. */
@media (max-width: 1099px) {
  .hero-blueprint-scene .hero-blueprint-unit {
    transform: translate(
      clamp(425px, calc(696px - 24.6vw), 600px),
      393px
    ) scale(1.25);
    transform-box: view-box;
    transform-origin: 0 0;
  }

  .hero-blueprint-scene .condenser-glow {
    transform: translate(
      clamp(-235px, calc(36px - 24.6vw), -10px),
      53px
    );
    transform-box: view-box;
    transform-origin: 0 0;
  }

  .hero-blueprint-scene .hero-blueprint-circuit {
    transform: translate(
      clamp(-270px, calc(1px - 24.6vw), -45px),
      70px
    );
    transform-box: view-box;
    transform-origin: 0 0;
  }

  .hero-blueprint-scene .dune-brand-mark {
    transform: translate(
      clamp(120px, calc(213px - 8.45vw), 180px),
      clamp(65px, calc(96px - 2.8vw), 85px)
    ) scale(0.85);
  }
}

/* Small portrait: center condenser and flower pair together without changing relative positions;
   position flower head down behind trust strip out from under CTA buttons */
@media (max-width: 800px) {
  .hero-blueprint-scene .hero-blueprint-unit {
    transform: translate(
      clamp(490px, calc(763px - 24.6vw), 667px),
      393px
    ) scale(1.25) !important;
    transform-box: view-box;
    transform-origin: 0 0;
  }

  .hero-blueprint-scene .dune-brand-mark {
    transform: translate(
      clamp(95px, calc(17px + 20vw), 142px),
      clamp(120px, calc(150px - 3vw), 140px)
    ) scale(0.75) !important;
  }
}

/* === NO BLUR ON ANIMATED ELEMENTS IN THIS SCENE ============================
   Standing rule, requested twice and now enforced: nothing this scene animates
   carries a nonzero blur radius, in either theme or either A/B variant. Audited
   by parsing the blur radius out of getComputedStyle().filter on every
   descendant of .hero-blueprint-scene that has a running animation - measured
   worst case is 0px. If you add a filter to an animated element here, that
   audit is what will catch it; do not add one.

   Removed under this rule, in order of how visible each was:
   - the daytime unit halo documented immediately below (2.5px + 7px);
   - the shoreline foam's 2.5px white halo (its landward shade survives as a
     zero-radius offset shadow, which is a hard drop, not a Gaussian);
   - the wet-sand stain's blur(1.6px) (the #dampSand gradient already fades to
     stop-opacity 0, so it was doing most of that softening anyway);
   - the 1.2px separating outline that a prior cycle had settled on as "crisp"
     - it was a hairline rather than a visible blur, and the prototype carries
     it identically, but it is still a per-frame Gaussian on 11 animated paths
     in dark theme and the instruction was unconditional. The keyframes
     (hybridStrokeFlow, hybridTracer*, cbCircuitTrace) still exist and still
     cycle stroke colour; they now carry `filter: none` explicitly rather than
     dropping the property, so no other rule's filter can leak in mid-cycle.

   If any of this needs to come back for legibility, the non-blurring tools are
   stroke weight, stroke colour, opacity, gradient stops, and zero-radius
   offset shadows. Reach for those.

   --- Daytime glow: deliberately absent -------------------------------------
   There was a homepage-only daytime halo here: a 2.5px + 7px double
   drop-shadow, !important, on every [class*="unit-"] path. It was the one
   filter in this file the prototype does not also have, and it was the reason
   the homepage looked blurry where preview.html does not.

   Two reasons it reads worse here than it did in the prototype's night mode.
   Every path it covered is one the hybridTracer/hybridStrokeFlow keyframes
   animate, so the browser re-ran a dozen-plus Gaussian blurs every frame -
   the exact cost preview.html cites when it disables these filters in daytime.
   And this scene renders at a larger scale than the prototype's (1.125 vs 0.96
   device px per user unit at 1440x900, because the hero fills the viewport
   with preserveAspectRatio="slice"), while the strokes underneath are
   non-scaling-stroke and stay pinned at their device width. A px-denominated
   drop-shadow scales with the SVG and the stroke it wraps does not, so the
   same glow reads proportionally fatter here than it ever did there.

   Daytime now matches the prototype: no shadow filters on the unit. Do not
   reintroduce a filter on these paths - if the unit needs more presence
   against white sand, reach for stroke weight, opacity or colour, none of
   which cost a per-frame re-raster. */

/* --- Distant water --------------------------------------------------------
   The far water rocks rather than sits still: lateral travel is what makes
   the crests move along the horizon, plus a small rise, fall and tilt. These
   paths run exactly edge to edge, so the leading scaleX widens each band
   about the scene centre by more than the travel distance, keeping the frame
   covered at every point in the cycle. The two layers travel in opposition
   on different periods so they move against each other rather than as one
   mass. Mirrors the prototype; see its preview.html for the source of truth.

   The first version of this (23s/31s, ±34px/±32px) was real, measured motion,
   but read as static in a casual glance: ease-in-out spends most of a long
   period near-stationary at each turnaround, so a short look has good odds of
   landing there. Shortened to 15s/19s and raised to ±52px/48px, which fixed
   the measurement but was apparently still not enough of a visual read —
   shortened again to 11s/14s and raised to ±58px/54px, using ~80% of the
   72-unit scaleX(1.1) headroom rather than ~72% of it — the proof itself caps
   measured translateX range at 120px to keep this a swell rather than a
   slide, which the previous ±68px/64px draft of this change would have
   risked tripping — so the crests now
   complete a full swing in well under 15s and cover visibly more ground per
   swing. Re-verify the "no sliver at either frame edge" proof checks after
   any further increase here — that headroom is the hard ceiling. */
.hero-blueprint-scene .gulf-body,
.hero-blueprint-scene .gulf-swell {
  transform-origin: 720px 430px;
  will-change: transform;
}

.hero-blueprint-scene .gulf-body {
  animation: gulfRock 15s ease-in-out infinite alternate;
}

.hero-blueprint-scene .gulf-swell {
  animation: gulfRockAlt 19s ease-in-out infinite alternate;
}

@keyframes gulfRock {
  from { transform: scaleX(1.1) translate(-56px, -2.8px) rotate(-0.24deg); }
  to { transform: scaleX(1.1) translate(54px, 2.8px) rotate(0.22deg); }
}

@keyframes gulfRockAlt {
  from { transform: scaleX(1.1) translate(52px, 2.8px) rotate(0.24deg); }
  to { transform: scaleX(1.1) translate(-50px, -2.8px) rotate(-0.22deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-blueprint-scene .gulf-body,
  .hero-blueprint-scene .gulf-swell {
    animation: none !important;
  }
}

/* --- Unit and scene strength ----------------------------------------------
   Two dampers were still standing between the ported unit and the prototype's.
   First, the home hero dims its whole splash SVG to 0.86 (content-home.css
   line 37) - a sensible default for the old atmospheric scene, but this one is
   drawn linework and loses 14% of every stroke to it. Restored to full for the
   blueprint scene only.
   Second, variant B is a single travelling trace, so at any instant most of the
   cabinet sits at its resting stroke, thinner and paler than variant A's. Its
   resting weights are brought up to A's so B reads as strongly as the
   prototype does while keeping its travelling highlight. */
.home-page .parallax-hero .hero-blueprint-scene .hero-svg.hero-system-splash {
  opacity: 1 !important;
}

.hero-blueprint-scene.trace-holo .unit-face { stroke-width: 1.35; }
.hero-blueprint-scene.trace-holo .unit-side,
.hero-blueprint-scene.trace-holo .unit-top { stroke-width: 1.2; }
.hero-blueprint-scene.trace-holo .unit-top-rim { stroke-width: 1.45; }
.hero-blueprint-scene.trace-holo .unit-grille-frame { stroke-width: 0.9; }
.hero-blueprint-scene.trace-holo .unit-grille-lines,
.hero-blueprint-scene.trace-holo .unit-coil-fins,
.hero-blueprint-scene.trace-holo .unit-side-grille { stroke-width: 0.72; }
.hero-blueprint-scene.trace-holo .page-circuit { stroke-width: 1.75; }

/* --- Circuit crispness -----------------------------------------------------
   The blur reported on the dash is the second drop-shadow in the holographic
   keyframes: an 8px halo in rgba(110,220,255,0.65). On the unit's dense
   linework that bloom reads as a hologram, but on a single thin dashed line
   spanning the whole hero it just makes the stroke look out of focus, most
   obviously in the blue phase where the halo is widest against the sky.

   The dash therefore gets its own keyframes: same colour cycle, same timing,
   same travelling dashes, but only the tight 1.2px separating outline. Both
   variants use it, so A and B stay distinguishable by the unit's animation
   rather than by how blurred the line is. The static filter is tightened to
   match so there is no jump when the animation starts. */
@keyframes cbCircuitTrace {
  0%, 100% {
    stroke: var(--hybrid-blue-stroke);
    filter: none;
  }
  50% {
    stroke: var(--hybrid-red-stroke);
    filter: none;
  }
}

.hero-blueprint-scene.trace-holo .hero-blueprint-circuit .page-circuit,
.hero-blueprint-scene.hybrid-holo .hero-blueprint-circuit .page-circuit {
  animation:
    dashMove var(--route-duration) linear infinite,
    cbCircuitTrace 8s infinite ease-in-out;
  animation-delay: 0s, 0s;
}

.hero-blueprint-scene .hero-blueprint-circuit .page-circuit {
  filter: none;
  stroke-width: 1.45;
  stroke-dasharray: 10 16;
}

@media (max-width: 1099px) and (min-width: 760px) {
  .hero-blueprint-scene .hero-blueprint-circuit .page-circuit {
    stroke-width: 1.25;
  }
}

@media (max-width: 759px) {
  .hero-blueprint-scene .hero-blueprint-circuit .page-circuit {
    stroke-width: 1.2;
    stroke-dasharray: 8 18;
  }
}

/* --- Central-time celestial clock -----------------------------------------
   Actual 30A time controls only the twelve-hour arc. Day travels east/left to
   west/right; night reverses from west/right to east/left. The active site
   theme owns the entire visual state: Light shows the sun over white sand;
   Dark shows the moon over silver sand and the localized condenser falloff.
   The marker is an absolute overlay outside the sliced scene SVG so it remains in the rendered
   desktop/tablet/phone viewport. Keep it static: filters, blends, opacity
   fades, and continuous animation are forbidden after the cross-machine
   flicker fix. */
.home-page .parallax-hero--home .hero-celestial-clock {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  filter: none;
  mix-blend-mode: normal;
  animation: none;
  transition: none;
}

.home-page .parallax-hero--home .hero-celestial-clock[hidden] {
  display: none;
}

.home-page .parallax-hero--home .hero-celestial-clock__body {
  position: absolute;
  left: var(--celestial-x);
  top: var(--celestial-y);
  display: none;
  width: clamp(44px, 4vw, 64px);
  height: clamp(44px, 4vw, 64px);
  overflow: visible;
  transform: translate(-50%, -50%);
  filter: none;
  mix-blend-mode: normal;
  animation: none;
  transition: none;
}

:root[data-theme="light"] .home-page .parallax-hero--home[data-celestial-clock="ready"] .hero-celestial-clock__sun,
:root[data-theme="dark"] .home-page .parallax-hero--home[data-celestial-clock="ready"] .hero-celestial-clock__moon {
  display: block;
}

.home-page .parallax-hero--home .hero-celestial-clock__sun {
  fill: #fff4b0;
  stroke: #ffe28b;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.home-page .parallax-hero--home .hero-celestial-clock__moon {
  fill: #e9eef1;
  stroke: #c7d1d8;
  stroke-width: 2.5;
  stroke-linejoin: round;
}

:root[data-theme="light"] .home-page .parallax-hero--home .hero-blueprint-scene {
  --dune-fill: #ffffff;
}

:root[data-theme="dark"] .home-page .parallax-hero--home .hero-blueprint-scene {
  --dune-fill: url(#dune-moonlight);
}

@media (prefers-reduced-motion: reduce) {
  .home-page .parallax-hero--home .hero-celestial-clock,
  .home-page .parallax-hero--home .hero-celestial-clock__body {
    animation: none !important;
    transition: none !important;
  }
}