/* ═══════════════════════════════════════════════════════════
   Portland HVAC Pros — Design B  (Phasor remapped → [data-design="b"])
   Thermal airflow signature · cool teal → warm amber spine
   ~1000 CSS lines · NO phasor-scoped selectors remain
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Token system ─────────────────────────────────────── */
[data-design="b"] {
  /* Phasor palette (remapped) */
  --ph-graphite:   #16191c;
  --ph-graphite-2: #1f2226;
  --ph-paper:      #f4f1ea;
  --ph-ink:        #e9e6e0;
  --ph-ink-dark:   #1a1a1a;
  --ph-muted:      #7b818a;
  --ph-line:       #2a2e34;
  --ph-line-paper: #d8d2c2;
  --ph-copper:     #c08552;
  --ph-phosphor:   #b8e6a8;
  --ph-arc:        #4dd0c9;
  --ph-hot:        #d94a3b;
  --ph-success:    #7fb069;

  /* Thermal spine — exposed per trade.md CSS custom property contract */
  --thermal-temp:   0.15;   /* 0=coldest / 1=warmest; driven by scroll */
  --p:              calc(var(--thermal-temp) * 100%);

  /* Cool/warm colour pairs for thermal interpolation */
  --cool-bg:        #0d1418;
  --warm-bg:        #1a130c;
  --cool-ink:       #dde8eb;
  --warm-ink:       #efe2d3;
  --cool-accent:    var(--ph-arc);
  --warm-accent:    var(--ph-copper);
  --cool-particle:  #4dd0c9;
  --warm-particle:  #d4853e;

  /* LIVE thermal tokens — interpolated by --thermal-temp */
  --thermal-bg:     color-mix(in oklab, var(--warm-bg)     var(--p), var(--cool-bg));
  --thermal-ink:    color-mix(in oklab, var(--warm-ink)    var(--p), var(--cool-ink));
  --thermal-accent: color-mix(in oklab, var(--warm-accent) var(--p), var(--cool-accent));
  --thermal-air:    color-mix(in oklab, var(--warm-particle) var(--p), var(--cool-particle));

  /* Design B primary (exposed) */
  --design-b-primary: var(--thermal-accent);

  /* Typography */
  --font-display: 'GT America Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-body:    'Söhne', 'Inter', -apple-system, sans-serif;

  /* Motion */
  --ease-needle:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-current: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-stamp:   cubic-bezier(0.5, -0.05, 0.4, 1.15);
  --dur-flick:    120ms;
  --dur-settle:   240ms;
  --dur-register: 420ms;
  --dur-sweep:    24s;
  --dur-breath:   4.6s;
  --dur-hum:      18s;

  /* Spacing */
  --space-pin-1:   4px;
  --space-pin-2:   8px;
  --space-pin-3:   12px;
  --space-clamp-4: 16px;
  --space-clamp-5: 24px;
  --space-clamp-6: 32px;
  --space-bay-7:   48px;
  --space-bay-8:   72px;
  --space-rack-9:  112px;

  /* Elevation */
  --elev-ring:    inset 0 0 0 1px var(--ph-line);
  --elev-bright:  inset 0 1px 0 0 color-mix(in oklab, var(--ph-ink) 14%, transparent);

  /* Radius */
  --rad-0:  0px;
  --rad-1:  2px;
  --rad-pin: 999px;
}

/* ── 2. Base / reset ─────────────────────────────────────── */
[data-design="b"].dq-design {
  background: var(--thermal-bg);
  color: var(--thermal-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  transition: background 0.8s var(--ease-current),
              color 0.8s var(--ease-current);
}

[data-design="b"].dq-design *,
[data-design="b"].dq-design *::before,
[data-design="b"].dq-design *::after {
  box-sizing: border-box;
}

[data-design="b"].dq-design a { color: inherit; }

/* ── 3. ELEMENT 1 — Animated minimalist header ───────────── */
[data-design="b"] .ph-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--thermal-bg) 92%, transparent);
  border-bottom: 1px solid var(--ph-line);
  backdrop-filter: blur(8px);
}

[data-design="b"] .ph-header__trace {
  position: absolute; inset: auto 0 -1px 0; height: 40px;
  pointer-events: none; opacity: 0.65;
}

[data-design="b"] .ph-header__trace svg {
  width: 100%; height: 100%; display: block;
}

[data-design="b"] .ph-trace__rail {
  stroke: var(--ph-line); stroke-width: 1;
}

/* Sinewave — thermally tinted, 24s cycle (H-3) */
[data-design="b"] .ph-trace__wave {
  fill: none;
  stroke: var(--thermal-air);
  stroke-width: 1.25; stroke-linecap: round;
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--thermal-air) 55%, transparent));
  stroke-dasharray: 12 8;
  animation: b-trace-shift var(--dur-sweep) linear infinite;
  transition: stroke 0.8s var(--ease-current);
}

[data-design="b"] .ph-trace__dot {
  fill: var(--thermal-air);
  filter: drop-shadow(0 0 6px var(--thermal-air));
  transition: fill 0.8s var(--ease-current);
}

@keyframes b-trace-shift {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}

[data-design="b"] .ph-header__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 48px);
  max-width: 1440px; margin: 0 auto;
}

[data-design="b"] .ph-logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ph-ink); text-decoration: none;
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
}

[data-design="b"] .ph-logo__pin { color: var(--thermal-air); font-size: 9px; }
[data-design="b"] .ph-logo__sep { color: var(--ph-muted); margin: 0 2px; }

[data-design="b"] .ph-burger {
  appearance: none; background: transparent;
  border: 1px solid var(--ph-line);
  width: 44px; height: 44px;
  display: inline-flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 5px; cursor: pointer;
  transition: border-color var(--dur-flick) var(--ease-needle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ph-burger:hover {
    border-color: var(--thermal-accent);
  }
}

[data-design="b"] .ph-burger:focus-visible {
  outline: 2px solid var(--thermal-accent); outline-offset: 2px;
}

[data-design="b"] .ph-burger__bar {
  display: block; width: 18px; height: 1px; background: var(--ph-ink);
}

/* Drawer — display:none when closed, not opacity:0 */
[data-design="b"] .ph-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 50; display: none;
}

[data-design="b"] .ph-drawer {
  position: fixed; inset: 0; background: var(--ph-graphite-2);
  z-index: 60; padding: 80px clamp(20px, 6vw, 80px) clamp(40px, 6vw, 80px);
  transform: translateY(-100%);
  transition: transform 320ms var(--ease-needle);
  overflow-y: auto;
}

[data-design="b"] .ph-drawer[style*="display:none"],
[data-design="b"] .ph-drawer[style*="display: none"] {
  pointer-events: none;
}

/* When drawer is visible (display is set by JS to block/flex) */
[data-design="b"] .ph-drawer.is-open {
  transform: translateY(0);
}

[data-design="b"] .ph-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 40px;
}

[data-design="b"] .ph-drawer__brand {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.1em; color: var(--ph-muted); text-transform: uppercase;
}

[data-design="b"] .ph-drawer__close {
  appearance: none; background: transparent;
  border: 1px solid var(--ph-line);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ph-ink);
  transition: border-color var(--dur-flick) var(--ease-needle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ph-drawer__close:hover { border-color: var(--thermal-accent); }
}

[data-design="b"] .ph-nav {
  display: flex; flex-direction: column; gap: 20px;
  margin-bottom: 48px;
}

[data-design="b"] .ph-nav a {
  font-family: var(--font-display);
  font-size: clamp(26px, 5.5vw, 52px);
  color: var(--ph-ink); text-decoration: none;
  border-bottom: 1px solid var(--ph-line); padding-bottom: 16px;
  letter-spacing: -0.01em;
  transition: color var(--dur-flick) var(--ease-needle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ph-nav a:hover { color: var(--thermal-accent); }
}

[data-design="b"] .ph-drawer__actions {
  display: flex; flex-direction: column; gap: 16px;
}

[data-design="b"] .ph-drawer__phone {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; padding: 16px 0;
  border-bottom: 1px solid var(--ph-line);
}

[data-design="b"] .ph-drawer__phone-plate {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.1em; color: var(--thermal-air); text-transform: uppercase;
}

[data-design="b"] .ph-drawer__phone-num {
  font-family: var(--font-display); font-size: clamp(22px, 4vw, 36px);
  color: var(--ph-ink); letter-spacing: -0.01em;
}

[data-design="b"] .ph-drawer__cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--thermal-accent); color: var(--ph-graphite);
  padding: 16px 24px; text-decoration: none;
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid color-mix(in oklab, var(--thermal-accent) 80%, #000);
  border-radius: var(--rad-1);
  min-height: 44px;
  transition: background var(--dur-flick) var(--ease-needle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ph-drawer__cta:hover {
    background: color-mix(in oklab, var(--thermal-accent) 88%, #fff);
  }
}

/* ── 4. HERO — thermal airflow backdrop ─────────────────── */
[data-design="b"] .ph-hero {
  position: relative; overflow: hidden;
  min-height: clamp(460px, 70vh, 720px);
  display: flex; align-items: flex-end;
  padding: clamp(64px, 10vw, 160px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 96px);
}

/* Thermal background gradient — reads --thermal-temp */
[data-design="b"] .ph-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(
      ellipse 80% 60% at 60% 30%,
      color-mix(in oklab, var(--thermal-air) 28%, transparent) 0%,
      transparent 70%
    ),
    linear-gradient(
      168deg,
      var(--thermal-bg) 0%,
      color-mix(in oklab, var(--thermal-bg) 80%, #0a0e10) 100%
    );
  transition: background 0.8s var(--ease-current);
}

/* ── 5. ELEMENT 3/5 — Airflow (Site B signature) ─────────── */
[data-design="b"] .ph-airflow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: hidden;
}

[data-design="b"] .ph-airflow__ducts {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Duct lines — static structural geometry */
[data-design="b"] .ph-duct {
  fill: none;
  stroke: color-mix(in oklab, var(--thermal-air) 30%, transparent);
  stroke-width: 1.5;
  transition: stroke 0.8s var(--ease-current);
}

[data-design="b"] .ph-duct--minor {
  stroke: color-mix(in oklab, var(--thermal-air) 15%, transparent);
  stroke-width: 1;
}

[data-design="b"] .ph-duct--branch {
  stroke: color-mix(in oklab, var(--thermal-air) 22%, transparent);
  stroke-width: 1.5;
}

[data-design="b"] .ph-vent-line {
  stroke: color-mix(in oklab, var(--thermal-air) 40%, transparent);
  stroke-width: 1;
  transition: stroke 0.8s var(--ease-current);
}

/* Air particles — animated via CSS transform only (GPU-cheap) */
[data-design="b"] .ph-air-particle {
  fill: var(--thermal-air);
  filter: drop-shadow(0 0 5px color-mix(in oklab, var(--thermal-air) 70%, transparent));
  transition: fill 0.8s var(--ease-current);
  opacity: 0.85;
}

/* Horizontal flow: left → right across main duct */
[data-design="b"] .ph-air--h {
  animation: b-air-horizontal var(--dur, 11s) var(--ease-current) infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes b-air-horizontal {
  0%   { transform: translateX(-40px);   opacity: 0; }
  8%   { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translateX(1480px);  opacity: 0; }
}

/* Vertical flow — left branch (downward through duct) */
[data-design="b"] .ph-air--v1 {
  animation: b-air-v1 var(--dur, 10s) var(--ease-current) infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes b-air-v1 {
  0%   { transform: translateY(0);    opacity: 0; }
  8%   { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(520px); opacity: 0; }
}

/* Vertical flow — center branch */
[data-design="b"] .ph-air--v2 {
  animation: b-air-v2 var(--dur, 11s) var(--ease-current) infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes b-air-v2 {
  0%   { transform: translateY(0);    opacity: 0; }
  8%   { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(520px); opacity: 0; }
}

/* Vertical flow — right branch */
[data-design="b"] .ph-air--v3 {
  animation: b-air-v3 var(--dur, 10s) var(--ease-current) infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes b-air-v3 {
  0%   { transform: translateY(0);    opacity: 0; }
  8%   { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(520px); opacity: 0; }
}

/* Hero copy — sits on top of airflow, z-index above backdrop */
[data-design="b"] .ph-hero__copy {
  position: relative; z-index: 2;
  max-width: 720px;
}

[data-design="b"] .ph-kicker {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--thermal-air); margin: 0 0 24px 0;
  transition: color 0.8s var(--ease-current);
}

/* Hero headline — opacity:1 at FIRST PAINT (HARD RULE) */
[data-design="b"] .ph-headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.5vw, 72px);
  line-height: 1.06; letter-spacing: -0.02em;
  color: var(--thermal-ink); margin: 0 0 22px 0;
  opacity: 1; /* NEVER opacity:0 on hero text */
  transition: color 0.8s var(--ease-current);
}

/* Hero subtitle — opacity:1 at first paint */
[data-design="b"] .ph-lede {
  font-family: var(--font-body); font-size: clamp(15px, 2vw, 18px);
  line-height: 1.55; color: var(--ph-muted);
  max-width: 54ch; margin: 0 0 36px 0;
  opacity: 1;
}

/* ── 6. ELEMENT 2 — Animated CTA ────────────────────────── */
[data-design="b"] .ph-cta {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 22px; min-height: 52px;
  background: var(--thermal-accent); color: var(--ph-graphite);
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--thermal-accent) 80%, #000);
  border-radius: var(--rad-1);
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 22%, transparent);
  overflow: hidden;
  transition: background var(--dur-flick) var(--ease-needle),
              border-color 0.8s var(--ease-current);
  will-change: transform;
  cursor: pointer;
}

[data-design="b"] .ph-cta__plate { font-size: 11px; opacity: 0.7; }
[data-design="b"] .ph-cta__label { letter-spacing: 0.04em; font-weight: 500; }
[data-design="b"] .ph-cta__arrow {
  display: inline-flex;
  transition: transform var(--dur-flick) var(--ease-needle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ph-cta:hover {
    background: color-mix(in oklab, var(--thermal-accent) 88%, #fff);
  }
  [data-design="b"] .ph-cta:hover .ph-cta__arrow {
    transform: rotate(8deg) translateX(2px);
  }
}

[data-design="b"] .ph-cta:focus-visible {
  outline: 2px solid var(--ph-phosphor); outline-offset: 3px;
}

[data-design="b"] .ph-cta:active {
  transform: translateY(1px) scale(0.997);
  box-shadow: var(--elev-press,
    inset 0 1px 0 0 color-mix(in oklab, #000 28%, transparent),
    inset 0 0 0 1px var(--ph-line));
}

/* CTA pulse — phosphor underline travelling L→R every 4.6s */
[data-design="b"] .ph-cta__pulse {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--ph-phosphor) 40%,
    var(--ph-phosphor) 60%, transparent 100%);
  filter: drop-shadow(0 0 6px var(--ph-phosphor));
  transform: translateX(-100%);
  animation: b-cta-pulse var(--dur-breath) var(--ease-current) infinite;
}

@keyframes b-cta-pulse {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}

/* Paper variant (funnel submit) */
[data-design="b"] .ph-cta--paper {
  background: var(--ph-graphite); color: var(--ph-paper);
  border-color: var(--ph-graphite);
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ph-cta--paper:hover {
    background: color-mix(in oklab, var(--ph-graphite) 86%, var(--thermal-accent));
  }
}

/* Footer variant */
[data-design="b"] .ph-cta--footer {
  background: transparent;
  border: 1px solid var(--ph-line);
  color: var(--ph-ink);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ph-cta--footer:hover {
    border-color: var(--thermal-accent);
    color: var(--thermal-accent);
  }
}

/* ── 7. ELEMENT 6 — Pointer (hero → funnel) ─────────────── */
/* Wrapper: MUST be visibly rendered — opacity:1, height ≥ 8px */
[data-design="b"] .ph-pointer-wrap {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 4vw, 48px);
  background: var(--thermal-bg);
  border-bottom: 1px solid var(--ph-line);
  opacity: 1; /* NEVER opacity:0 — hard rule */
  transition: background 0.8s var(--ease-current);
}

[data-design="b"] .ph-pointer {
  display: flex; align-items: center; gap: 20px;
  color: var(--ph-muted);
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  min-height: 48px; /* HARD: bbox height ≥ 8px */
  width: 100%; max-width: 560px;
}

/* Thermal isotherm hairline — warms in color as it draws */
[data-design="b"] .ph-pointer__iso {
  display: flex; align-items: center; gap: 8px; flex: 1;
}

[data-design="b"] .ph-pointer__iso-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg,
    var(--thermal-air) 0%,
    color-mix(in oklab, var(--ph-copper) 60%, var(--thermal-air)) 100%);
  animation: b-iso-draw 3.5s var(--ease-needle) infinite;
  transform-origin: left;
}

@keyframes b-iso-draw {
  0%   { transform: scaleX(0.15); opacity: 0.4; }
  55%  { transform: scaleX(1);    opacity: 1; }
  100% { transform: scaleX(0.15); opacity: 0.4; }
}

[data-design="b"] .ph-pointer__iso-dot {
  width: 6px; height: 6px; border-radius: var(--rad-pin);
  background: var(--thermal-air);
  filter: drop-shadow(0 0 4px var(--thermal-air));
  animation: b-iso-dot 3.5s var(--ease-needle) infinite;
  flex-shrink: 0;
  transition: background 0.8s var(--ease-current);
}

@keyframes b-iso-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  55%      { opacity: 1;   transform: scale(1.2); }
}

[data-design="b"] .ph-pointer__label {
  white-space: nowrap;
  color: color-mix(in oklab, var(--ph-muted) 80%, var(--thermal-air));
  transition: color 0.8s var(--ease-current);
}

[data-design="b"] .ph-pointer__chev-wrap {
  display: flex; align-items: center; flex-shrink: 0;
}

[data-design="b"] .ph-pointer__chev {
  color: var(--thermal-air);
  animation: b-pointer-chev 4s var(--ease-current) infinite;
  transition: color 0.8s var(--ease-current);
}

@keyframes b-pointer-chev {
  0%, 100% { transform: translateY(0);   opacity: 0.45; }
  50%      { transform: translateY(4px); opacity: 0.9; }
}

/* ── 8. ELEMENT 5 — Tap-qualify funnel ──────────────────── */
[data-design="b"] .ph-interactive {
  background: var(--ph-paper); color: var(--ph-ink-dark);
  padding: clamp(48px, 9vw, 112px) clamp(20px, 4vw, 48px);
}

[data-design="b"] .ph-qual {
  max-width: 680px; margin: 0 auto;
  background: var(--ph-paper);
  border: 1px solid var(--ph-line-paper);
  padding: clamp(24px, 4vw, 48px);
}

[data-design="b"] .ph-qual__plate {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ph-copper); margin: 0 0 10px 0;
}

[data-design="b"] .ph-qual__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ph-ink-dark); margin: 0 0 22px 0;
}

/* Pip progress bar */
[data-design="b"] .ph-qual__pips {
  display: flex; gap: 6px; list-style: none; padding: 0;
  margin: 0 0 28px 0;
}

[data-design="b"] .ph-qual__pips li {
  height: 2px; flex: 1;
  background: var(--ph-line-paper);
  position: relative; overflow: hidden;
  border-radius: 1px;
}

[data-design="b"] .ph-qual__pips li.is-active {
  background: var(--ph-copper);
}

[data-design="b"] .ph-qual__pips li.is-active::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--ph-phosphor), transparent);
  transform: translateX(-100%);
  animation: b-pip-trace 1.2s var(--ease-current);
}

@keyframes b-pip-trace {
  to { transform: translateX(100%); }
}

/* Steps — display:none when inactive (HARD: not opacity:0) */
[data-design="b"] .ph-qual__step {
  border: 0; padding: 0; margin: 0;
  display: none;
}

[data-design="b"] .ph-qual__step.is-active {
  display: block;
  animation: b-step-in 280ms var(--ease-needle) forwards;
}

@keyframes b-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-design="b"] .ph-qual__legend {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ph-muted); margin-bottom: 16px; display: block;
}

/* Option grid — tap chips */
[data-design="b"] .ph-qual__opts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 8px;
}

[data-design="b"] .ph-qual__opts label {
  position: relative; cursor: pointer;
  border: 1px solid var(--ph-line-paper);
  padding: 18px 16px; min-height: 56px;
  display: flex; align-items: center;
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.04em;
  background: color-mix(in oklab, var(--ph-paper) 96%, #000);
  transition: border-color var(--dur-flick) var(--ease-needle),
              background var(--dur-flick) var(--ease-needle);
}

[data-design="b"] .ph-qual__opts input {
  position: absolute; opacity: 0; inset: 0; cursor: pointer;
  margin: 0; width: 100%; height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ph-qual__opts label:hover {
    border-color: var(--ph-copper);
  }
}

[data-design="b"] .ph-qual__opts label:has(input:checked) {
  border-color: var(--ph-copper);
  background: color-mix(in oklab, var(--ph-copper) 14%, var(--ph-paper));
  box-shadow: inset 3px 0 0 0 var(--ph-copper);
}

[data-design="b"] .ph-qual__opts label:focus-within {
  outline: 2px solid var(--ph-copper); outline-offset: 2px;
}

/* Selection summary plate */
[data-design="b"] .ph-qual__summary {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.06em; color: var(--ph-muted);
  border: 1px solid var(--ph-line-paper); padding: 12px 14px;
  margin-bottom: 20px; min-height: 44px;
}

/* Contact fields */
[data-design="b"] .ph-qual__fields {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-bottom: 16px;
}

[data-design="b"] .ph-field { display: flex; flex-direction: column; gap: 5px; }

[data-design="b"] .ph-field__lbl {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ph-muted);
}

[data-design="b"] .ph-field input {
  background: transparent; color: var(--ph-ink-dark);
  border: 0; border-bottom: 1px solid var(--ph-line-paper);
  padding: 10px 0; font-family: var(--font-body); font-size: 16px;
  transition: border-color 240ms var(--ease-needle);
  border-radius: 0; min-height: 44px;
}

[data-design="b"] .ph-field input:focus {
  outline: none; border-bottom-color: var(--ph-copper);
}

/* Call-now link inside funnel */
[data-design="b"] .ph-qual__call {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; margin-bottom: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--ph-line-paper);
}

[data-design="b"] .ph-qual__call-plate {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ph-muted);
}

[data-design="b"] .ph-qual__call-num {
  font-family: var(--font-display); font-size: 18px;
  color: var(--ph-copper); letter-spacing: 0.02em;
}

[data-design="b"] .ph-qual__fineprint {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.04em; color: var(--ph-muted); margin-top: 12px;
}

/* ── 9. ELEMENT 4 — Ambient segment B: Services + topology ─ */
[data-design="b"] .ph-ambient-b {
  display: grid; gap: clamp(32px, 6vw, 96px);
  grid-template-columns: 1.2fr 1fr;
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 48px);
  max-width: 1440px; margin: 0 auto;
  border-top: 1px solid var(--ph-line);
}

[data-design="b"] .ph-h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 52px); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--thermal-ink);
  margin: 0 0 32px 0;
  transition: color 0.8s var(--ease-current);
}

[data-design="b"] .ph-services {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--ph-line);
}

[data-design="b"] .ph-services li {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: baseline; gap: 16px;
  padding: 20px 4px; border-bottom: 1px solid var(--ph-line);
  font-family: var(--font-body); color: var(--thermal-ink);
  transition: background var(--dur-flick) var(--ease-needle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ph-services li:hover {
    background: color-mix(in oklab, var(--ph-graphite-2) 60%, transparent);
  }
}

[data-design="b"] .ph-services .num {
  font-family: var(--font-display); color: var(--thermal-air);
  font-size: 12px; letter-spacing: 0.06em;
  transition: color 0.8s var(--ease-current);
}

[data-design="b"] .ph-services .name { font-size: 17px; }

[data-design="b"] .ph-services .spec {
  font-family: var(--font-display); color: var(--ph-muted);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
}

/* Circuit topology diagram */
[data-design="b"] .ph-ambient-b__topo {
  align-self: center; justify-self: stretch;
  background: var(--ph-graphite-2);
  box-shadow: var(--elev-ring),
              inset 0 1px 0 0 color-mix(in oklab, #fff 8%, transparent);
  padding: 24px;
}

[data-design="b"] .ph-ambient-b__topo svg {
  width: 100%; height: auto; display: block;
}

[data-design="b"] .ph-topo__paths path {
  fill: none; stroke: var(--ph-line); stroke-width: 1.25;
  transition: stroke 200ms var(--ease-needle),
              filter 200ms var(--ease-needle);
}

[data-design="b"] .ph-topo__paths path.is-live {
  stroke: var(--thermal-air);
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--thermal-air) 60%, transparent));
}

[data-design="b"] .ph-topo__nodes circle {
  fill: var(--ph-graphite-2); stroke: var(--ph-line); stroke-width: 1.5;
  transition: fill 200ms var(--ease-needle),
              stroke 200ms var(--ease-needle);
}

[data-design="b"] .ph-topo__nodes circle.is-live {
  fill: var(--thermal-air); stroke: var(--thermal-air);
  filter: drop-shadow(0 0 8px var(--thermal-air));
}

[data-design="b"] .ph-topo__labels text {
  font-family: var(--font-display); font-size: 9px;
  fill: var(--ph-muted); letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── 10. About section ───────────────────────────────────── */
[data-design="b"] .ph-about {
  padding: clamp(64px, 9vw, 112px) clamp(20px, 4vw, 48px);
  background: var(--ph-graphite-2);
  border-top: 1px solid var(--ph-line);
}

[data-design="b"] .ph-about__inner {
  max-width: 800px; margin: 0 auto;
}

[data-design="b"] .ph-about__body {
  max-width: 68ch;
}

[data-design="b"] .ph-about__body p {
  font-size: 17px; line-height: 1.65;
  color: var(--ph-muted); margin: 0 0 18px 0;
}

[data-design="b"] .ph-about__chips {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px;
}

[data-design="b"] .ph-chip {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--thermal-air); padding: 8px 14px;
  border: 1px solid color-mix(in oklab, var(--thermal-air) 40%, transparent);
  border-radius: var(--rad-1);
  transition: color 0.8s var(--ease-current),
              border-color 0.8s var(--ease-current);
}

/* ── 11. Service area ────────────────────────────────────── */
[data-design="b"] .ph-service-area {
  padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 48px);
  border-top: 1px solid var(--ph-line);
}

[data-design="b"] .ph-service-area__inner {
  max-width: 800px; margin: 0 auto;
}

[data-design="b"] .ph-area-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 24px;
}

[data-design="b"] .ph-area-list li {
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.04em; color: var(--ph-muted);
  padding: 8px 0; border-bottom: 1px solid var(--ph-line);
}

/* ── 12. Footer ─────────────────────────────────────────── */
[data-design="b"] .ph-footer {
  background: var(--ph-graphite-2);
  border-top: 1px solid var(--ph-line);
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
}

[data-design="b"] .ph-footer__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; gap: 28px 48px;
  grid-template-columns: 1fr 1fr auto;
  grid-template-rows: auto auto;
  align-items: start;
}

[data-design="b"] .ph-footer__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ph-ink); grid-column: 1 / -1;
}

[data-design="b"] .ph-footer__contact {
  display: flex; flex-direction: column; gap: 8px;
}

[data-design="b"] .ph-footer__phone {
  font-family: var(--font-display); font-size: 20px;
  color: var(--thermal-air); text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.8s var(--ease-current);
}

[data-design="b"] .ph-footer__address {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.04em; color: var(--ph-muted);
  font-style: normal;
}

[data-design="b"] .ph-footer__fb {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.06em; color: var(--ph-muted);
  text-decoration: none; text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ph-footer__fb:hover { color: var(--thermal-air); }
}

[data-design="b"] .ph-footer__cta-wrap {
  align-self: start;
}

[data-design="b"] .ph-footer__legal {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.04em; color: var(--ph-muted);
  grid-column: 1 / -1; margin: 0; border-top: 1px solid var(--ph-line);
  padding-top: 16px;
}

/* ── 13. TRIAD-2 — Scroll-linked thermal warming (parallax) ─
   Drives --thermal-temp via JS on scroll.
   The hero background + all thermal tokens respond, creating
   a genuine scroll-linked temperature rise toward the funnel.
   Achieved via CSS custom properties updated by JS scroll handler.
   This is REAL scroll-driven motion, not a fade-in. ─────────── */

/* Scroll-parallax on hero: the airflow SVG drifts upward slightly
   as user scrolls — a genuine parallax offset driven by scroll position */
[data-design="b"] .ph-airflow {
  will-change: transform;
}

/* ── 14. Breakpoints ─────────────────────────────────────── */
@media (max-width: 880px) {
  [data-design="b"] .ph-ambient-b {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  [data-design="b"] .ph-qual__fields {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .ph-qual__opts {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .ph-footer__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  [data-design="b"] .ph-header__bar { padding: 14px 16px; }
  [data-design="b"] .ph-hero { padding-left: 16px; padding-right: 16px; }
}

/* ── 15. prefers-reduced-motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Stills all looping animations but PRESERVES --thermal-temp updates
     (token state changes are still allowed per trade.md criteria 4) */
  [data-design="b"] .ph-trace__wave { animation: none; }
  [data-design="b"] .ph-trace__dot animateMotion { display: none; }
  [data-design="b"] .ph-air-particle { animation: none; opacity: 0.5; }
  [data-design="b"] .ph-pointer__iso-line { animation: none; transform: scaleX(0.7); opacity: 0.7; }
  [data-design="b"] .ph-pointer__iso-dot { animation: none; opacity: 0.7; }
  [data-design="b"] .ph-pointer__chev { animation: none; }
  [data-design="b"] .ph-cta__pulse { animation: none; opacity: 0.4; transform: none; }
  [data-design="b"] .ph-qual__step { animation: none; }
  [data-design="b"] .ph-qual__pips li.is-active::after { animation: none; }
  [data-design="b"] .ph-topo__paths path { transition: none; }
  [data-design="b"] .ph-topo__nodes circle { transition: none; }
  [data-design="b"] .ph-drawer { transition: none; }
  [data-design="b"] .ph-cta__arrow { transition: none; }

  /* Airflow resolves to a valid STATIC thermally-tinted frame
     (not blank — particles frozen at mid-opacity, ducts visible) */
  [data-design="b"] .ph-air-particle { opacity: 0.45; }
  [data-design="b"] .ph-duct { opacity: 0.5; }
}

/* ── 16. Mobile overflow guard (scoped, MANDATORY) ───────── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}

[data-design="b"].dq-design * {
  min-width: 0;
}

[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="b"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="b"] [data-mf-role="cta"] { opacity: 1 !important; }