/* ─────────────────────────────────────────────────────────────────────────
   Sun Tech Oregon HVAC · Design B (Calibration × Ambient Airflow)
   Slot b — ambient airflow signature; NO comfort-dial
   All selectors scoped under [data-design="b"].dq-design
   Thermal contract: --thermal-temp (0=cold,1=warm) written by scroll in JS;
   NEVER locally pinned — always read via var(--thermal-temp, 0.5)
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. TOKEN SYSTEM ──────────────────────────────────────────────────── */
[data-design="b"] {
  /* Calibration instrument-panel tokens */
  --face:        #E6E7E5;
  --face-deep:   #D4D5D2;
  --ink:         #0E1014;
  --ink-soft:    #3C404A;
  --muted:       #7C7F86;
  --rule:        #1F2127;
  --phosphor:    #3FA86A;
  --amber:       #D89426;
  --signal-blue: #1F6BBF;
  --critical:    #B5251A;
  --seal:        #3FA86A;

  /* Thermal spine — cool ↔ warm pole tokens */
  --cool-bg:     #0F2A32;   /* deep teal/blue — cold end */
  --warm-bg:     #2A1800;   /* deep amber/brown — warm end */
  --cool-accent: #1A5A6E;   /* cool teal accent */
  --warm-accent: #8A4800;   /* warm amber accent */
  --cool-particle: #2BB4C8; /* air stream teal */
  --warm-particle: #D98026; /* air stream amber */
  --cool-iso:    rgba(44, 180, 200, 0.22);
  --warm-iso:    rgba(217, 128, 38, 0.22);

  /* Thermal state — initial 0.5 on :root; scroll writes it on html */
  /* ⚠ NEVER reassign --thermal-temp here — that would shadow scroll writes */
  --thermal-bg:     color-mix(in oklab, var(--cool-bg)     calc(var(--thermal-temp, 0.5) * 100%), var(--warm-bg)     calc((1 - var(--thermal-temp, 0.5)) * 100%));
  --thermal-accent: color-mix(in oklab, var(--cool-accent)  calc(var(--thermal-temp, 0.5) * 100%), var(--warm-accent) calc((1 - var(--thermal-temp, 0.5)) * 100%));
  --thermal-particle: color-mix(in oklab, var(--cool-particle) calc(var(--thermal-temp, 0.5) * 100%), var(--warm-particle) calc((1 - var(--thermal-temp, 0.5)) * 100%));
  --thermal-iso:    color-mix(in oklab, var(--cool-iso)     calc(var(--thermal-temp, 0.5) * 100%), var(--warm-iso)    calc((1 - var(--thermal-temp, 0.5)) * 100%));

  /* Design-b primary (required by contract) */
  --design-b-primary: var(--signal-blue);

  /* Typography */
  --font-display: "IBM Plex Sans Condensed", "Söhne Schmal", "Helvetica Neue Condensed", sans-serif;
  --font-body:    "IBM Plex Sans", "Söhne", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", "Söhne Mono", ui-monospace, monospace;

  /* Spacing */
  --space-tick:  2px;
  --space-step:  4px;
  --space-em:    8px;
  --space-cell:  16px;
  --space-bezel: 24px;
  --space-panel: 48px;
  --space-rack:  96px;
  --space-bay:   144px;

  /* Motion */
  --dur-snap:   100ms;
  --dur-damp:   320ms;
  --dur-trace:  720ms;
  --dur-sweep:  1200ms;
  --dur-drift:  3000ms;
  --ease-damp:  cubic-bezier(.4, .8, .4, 1);
  --ease-snap:  cubic-bezier(.7, 0, .84, 0);
  --ease-trace: cubic-bezier(.22, 1, .36, 1);
  --ease-drift: cubic-bezier(.45, .05, .55, .95);

  /* Radius */
  --radius-zero:  0;
  --radius-pin:   2px;
  --radius-bezel: 4px;

  /* Shadow */
  --shadow-bezel: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.4);
  --shadow-press: inset 0 1px 0 rgba(0,0,0,.3);

  background: var(--face);
  color: var(--ink-soft);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}

/* Dark scheme */
@media (prefers-color-scheme: dark) {
  [data-design="b"] {
    --face:        #101216;
    --face-deep:   #181B20;
    --ink:         #E8EAE7;
    --ink-soft:    #B4B8BE;
    --muted:       #7A7E86;
    --rule:        #9099A4;
    --phosphor:    #52C77F;
    --amber:       #F0AE40;
    --signal-blue: #3F8FE5;
    --critical:    #E4493B;
    --seal:        #52C77F;
    --shadow-bezel: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.55);
    --cool-bg:     #061518;
    --warm-bg:     #1A0C00;
  }
}

/* Box-sizing reset — scoped */
[data-design="b"].dq-design * {
  box-sizing: border-box;
  min-width: 0;
}

/* ── 2. HEADER (Element 1) ─────────────────────────────────────────────── */
/* Exactly: logo + one 22s atmospheric animation + hamburger — nothing else */
[data-design="b"] .cal-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--face);
  border-bottom: 1px solid var(--rule);
}

[data-design="b"] .cal-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-cell);
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-cell) clamp(14px, 5vw, 48px);
  min-height: 58px;
}

/* Atmospheric layer: phosphor blip tracing the base rule, 22s — H-3 compliant */
[data-design="b"] .cal-header__scope {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  opacity: .9;
  background: linear-gradient(
    90deg,
    transparent 0 46%,
    var(--phosphor) 50%,
    transparent 54% 100%
  );
  background-size: 220% 100%;
  animation: b-scope-sweep 22s linear infinite;
}

@keyframes b-scope-sweep {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

[data-design="b"] .cal-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}

/* Hamburger */
[data-design="b"] .cal-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 8px;
  cursor: pointer;
  background: var(--face-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  transition: box-shadow var(--dur-snap) var(--ease-damp);
  flex-shrink: 0;
}

[data-design="b"] .cal-burger__line {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transition: transform var(--dur-snap) var(--ease-snap);
}

[data-design="b"] .cal-burger[aria-expanded="true"] .cal-burger__line:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

[data-design="b"] .cal-burger[aria-expanded="true"] .cal-burger__line:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

@media (hover: hover) {
  [data-design="b"] .cal-burger:hover { box-shadow: var(--shadow-bezel); }
}

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

/* Drawer */
[data-design="b"] .cal-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
}

[data-design="b"] .cal-drawer[hidden] { display: none; }

[data-design="b"] .cal-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, .55);
  opacity: 0;
  transition: opacity 200ms var(--ease-trace);
}

[data-design="b"] .cal-drawer__sheet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  background: var(--face);
  border-bottom: 2px solid var(--rule);
  box-shadow: var(--shadow-bezel);
  padding: var(--space-bezel) clamp(14px, 5vw, 48px) var(--space-panel);
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
  transform: translateY(-100%);
  transition: transform 260ms var(--ease-damp);
}

[data-design="b"] .cal-drawer.is-open .cal-drawer__scrim { opacity: 1; }
[data-design="b"] .cal-drawer.is-open .cal-drawer__sheet  { transform: none; }

[data-design="b"] .cal-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-em);
}

[data-design="b"] .cal-drawer__id {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}

[data-design="b"] .cal-drawer__esc {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

[data-design="b"] .cal-navlink {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--space-em) 0;
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur-snap) var(--ease-damp);
}

@media (hover: hover) {
  [data-design="b"] .cal-navlink:hover { color: var(--signal-blue); }
}

[data-design="b"] .cal-drawer__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
  margin-top: var(--space-em);
  padding-top: var(--space-cell);
  border-top: 1px solid var(--rule);
}

[data-design="b"] .cal-drawer__phone {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .04em;
  padding: var(--space-em) 0;
}

/* ── 3. AIRFLOW SIGNATURE (Element 5 — Site B) ────────────────────────── */
/*
 * Position: fixed behind all content, z-index:0.
 * Duct lines + vent registers: static geometry, thermally tinted.
 * Air-stream particles: translate along duct paths via CSS keyframes.
 * Tint reads var(--thermal-temp, 0.5) → cool teal ↔ warm amber.
 * GPU-cheap: ONLY transform + opacity + clip-path animated.
 * prefers-reduced-motion: animation:none → static thermally-tinted frame.
 */
[data-design="b"] .b-airflow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

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

/* Duct lines — thin, thermally-tinted structural geometry */
[data-design="b"] .b-duct {
  fill: none;
  stroke: var(--thermal-accent);
  stroke-width: 1.5;
  opacity: 0.25;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

[data-design="b"] .b-duct--lo {
  stroke-width: 1;
  opacity: 0.18;
}

/* Vent registers — small geometric indicators */
[data-design="b"] .b-vent {
  fill: none;
  stroke: var(--thermal-accent);
  stroke-width: 1;
  opacity: 0.3;
}

/* Air-stream particle groups */
[data-design="b"] .b-particle {
  fill: var(--thermal-particle);
  opacity: 0.55;
  /* Each particle rendered as a blurred ellipse — elongated in flow direction */
  filter: blur(2px);
}

/*
 * Horizontal streams — particles flow left → right along upper duct
 * translateX across the duct segment width (~500px segments)
 * Staggered delays so streams feel continuous
 */
[data-design="b"] .b-stream--h1 {
  animation: b-flow-h 7s var(--ease-drift) infinite;
}

[data-design="b"] .b-stream--h1b {
  animation: b-flow-h 7s var(--ease-drift) 2.3s infinite;
}

[data-design="b"] .b-stream--h1c {
  animation: b-flow-h 7s var(--ease-drift) 4.6s infinite;
}

[data-design="b"] .b-stream--lo {
  animation: b-flow-h 9s var(--ease-drift) 1.5s infinite;
}

@keyframes b-flow-h {
  0%   { transform: translateX(-60px); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { transform: translateX(540px); opacity: 0; }
}

/* Vertical streams — particles flow top → bottom along branch ducts */
[data-design="b"] .b-stream--v1 {
  animation: b-flow-v 6s var(--ease-drift) 0.8s infinite;
}

[data-design="b"] .b-stream--v2 {
  animation: b-flow-v 6s var(--ease-drift) 3.2s infinite;
}

@keyframes b-flow-v {
  0%   { transform: translateY(-40px); opacity: 0; }
  10%  { opacity: 0.8; }
  85%  { opacity: 0.55; }
  100% { transform: translateY(320px); opacity: 0; }
}

/* prefers-reduced-motion: static thermally-tinted frame — ducts + stilled air */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-stream--h1,
  [data-design="b"] .b-stream--h1b,
  [data-design="b"] .b-stream--h1c,
  [data-design="b"] .b-stream--lo,
  [data-design="b"] .b-stream--v1,
  [data-design="b"] .b-stream--v2 {
    animation: none;
    /* static: particles held at mid-duct position, tinted by --thermal-temp */
    transform: translateX(160px);
    opacity: 0.45;
  }
  [data-design="b"] .b-stream--v1,
  [data-design="b"] .b-stream--v2 {
    transform: translateY(120px);
  }
}

/* ── 4. HERO (Element 3 + dominant airflow visual) ────────────────────── */
[data-design="b"] .b-hero {
  position: relative;
  z-index: 1;
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Thermal backdrop layer — cool→warm atmospheric substrate */
[data-design="b"] .b-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

[data-design="b"] .b-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    var(--thermal-bg) 0%,
    color-mix(in oklab, var(--thermal-bg) 60%, var(--face) 40%) 60%,
    var(--face) 100%
  );
  opacity: 0.72;
  animation: b-hero-breathe 5s var(--ease-drift) infinite;
}

/* The hero backdrop breathes gently — HERO-1 single animated layer */
@keyframes b-hero-breathe {
  0%, 100% { opacity: 0.68; }
  50%       { opacity: 0.78; }
}

/* Isotherm lines — diagnostic thermal field geometry */
[data-design="b"] .b-hero__iso {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

[data-design="b"] .b-iso__line {
  fill: none;
  stroke: var(--thermal-iso);
  stroke-width: 1;
  opacity: 0;
  animation: b-iso-draw 3s var(--ease-trace) forwards;
}

[data-design="b"] .b-iso--1 { stroke-width: 1.2; }
[data-design="b"] .b-iso--3 { stroke-width: 0.7; }

@keyframes b-iso-draw {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
  }
}

/* After draw: hold visible with subtle drift */
[data-design="b"] .b-iso--1 {
  animation: b-iso-draw 2.4s var(--ease-trace) 0.2s forwards,
             b-iso-drift 8s var(--ease-drift) 2.6s infinite;
}
[data-design="b"] .b-iso--2 {
  animation: b-iso-draw 2.4s var(--ease-trace) 0.6s forwards,
             b-iso-drift 9s var(--ease-drift) 3.0s infinite;
}
[data-design="b"] .b-iso--3 {
  animation: b-iso-draw 2.4s var(--ease-trace) 1.0s forwards,
             b-iso-drift 10s var(--ease-drift) 3.4s infinite;
}

@keyframes b-iso-drift {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50%       { transform: translateY(3px); opacity: 0.55; }
}

[data-design="b"] .b-hero__panel {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding: var(--space-rack) clamp(14px, 5vw, 48px);
  background: transparent;
  border: none;
}

/* Two-column hero body: text left, dominant airflow right */
[data-design="b"] .b-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-panel);
  align-items: center;
  margin-top: var(--space-panel);
}

[data-design="b"] .b-hero__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 3 text elements — all opacity:1 at first paint, NO JS gate */
[data-design="b"] .b-hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--space-cell);
  max-width: 22ch;
  opacity: 1;  /* HARD FLOOR: visible at first paint */
}

[data-design="b"] .b-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(15px, 2vw, 18px);
  color: var(--ink-soft);
  margin: 0 0 var(--space-em);
  max-width: 55ch;
  opacity: 1;  /* HARD FLOOR: visible at first paint */
}

[data-design="b"] .b-hero__proof {
  margin: 0 0 var(--space-panel);
  opacity: 1;  /* HARD FLOOR: visible at first paint */
}

[data-design="b"] .b-hero__trust {
  margin-top: var(--space-em);
}

/* ── DOMINANT AIRFLOW VISUAL — hero right column ─────────────────────── */
/*
 * The duct-network diagram: wide louvred registers, duct trunks,
 * branch drops, return trunk, all with flowing air particles.
 * This is the STAR of the hero. Line weights are thick enough to read
 * clearly. Thermally tinted by --thermal-temp throughout.
 */
[data-design="b"] .b-hero__flow {
  position: relative;
  background: var(--face-deep);
  border: 1px solid var(--thermal-accent);
  border-radius: var(--radius-bezel);
  box-shadow: var(--shadow-bezel),
              0 0 0 1px color-mix(in srgb, var(--thermal-accent) 20%, transparent),
              inset 0 0 48px color-mix(in srgb, var(--thermal-particle) 6%, transparent);
  padding: var(--space-cell);
  overflow: hidden;
}

[data-design="b"] .b-hero__flow-svg {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
}

/* Duct lines — PROMINENT: thick enough to unmistakably read as ducts */
[data-design="b"] .b-hero-duct {
  fill: none;
  stroke: var(--thermal-accent);
  stroke-linecap: square;
  stroke-linejoin: miter;
}

[data-design="b"] .b-hero-duct--main {
  stroke-width: 4;
  opacity: 0.85;
}

[data-design="b"] .b-hero-duct--branch {
  stroke-width: 3;
  opacity: 0.7;
}

[data-design="b"] .b-hero-duct--return {
  stroke-width: 4;
  opacity: 0.6;
  stroke-dasharray: none;
}

/* Vent registers — louvred rectangles, clearly registers */
[data-design="b"] .b-hero-vent {
  fill: none;
  stroke: var(--thermal-accent);
}

[data-design="b"] .b-hero-vent--supply rect {
  stroke-width: 2.5;
  opacity: 0.9;
}

[data-design="b"] .b-hero-vent--supply line {
  stroke-width: 1.5;
  opacity: 0.7;
}

[data-design="b"] .b-hero-vent--outlet rect {
  stroke-width: 2;
  opacity: 0.8;
}

[data-design="b"] .b-hero-vent--outlet line {
  stroke-width: 1.5;
  opacity: 0.65;
}

[data-design="b"] .b-hero-vent--return rect {
  stroke-width: 2;
  opacity: 0.65;
}

[data-design="b"] .b-hero-vent--return line {
  stroke-width: 1.5;
  opacity: 0.5;
}

/* Hero air particles — brighter and larger than the ambient background layer */
[data-design="b"] .b-hero-particle {
  fill: var(--thermal-particle);
  opacity: 0.8;
  filter: blur(3px);
}

/* Horizontal trunk flow — three groups, staggered */
[data-design="b"] .b-hero-stream--trunk1 {
  animation: b-hero-flow-h 5s var(--ease-drift) 0s infinite;
}

[data-design="b"] .b-hero-stream--trunk2 {
  animation: b-hero-flow-h 5s var(--ease-drift) 1.7s infinite;
}

[data-design="b"] .b-hero-stream--trunk3 {
  animation: b-hero-flow-h 5s var(--ease-drift) 3.3s infinite;
}

@keyframes b-hero-flow-h {
  0%   { transform: translateX(-80px); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { transform: translateX(500px); opacity: 0; }
}

/* Vertical branch drops */
[data-design="b"] .b-hero-stream--drop1 {
  animation: b-hero-flow-v 4s var(--ease-drift) 0.4s infinite;
}

[data-design="b"] .b-hero-stream--drop2 {
  animation: b-hero-flow-v 4s var(--ease-drift) 1.8s infinite;
}

[data-design="b"] .b-hero-stream--drop3 {
  animation: b-hero-flow-v 4s var(--ease-drift) 3.1s infinite;
}

@keyframes b-hero-flow-v {
  0%   { transform: translateY(-30px); opacity: 0; }
  10%  { opacity: 0.85; }
  85%  { opacity: 0.65; }
  100% { transform: translateY(180px); opacity: 0; }
}

/* Return trunk — right-to-left flow */
[data-design="b"] .b-hero-stream--return {
  animation: b-hero-flow-rtl 6s var(--ease-drift) 0.9s infinite;
}

@keyframes b-hero-flow-rtl {
  0%   { transform: translateX(80px); opacity: 0; }
  8%   { opacity: 0.7; }
  85%  { opacity: 0.5; }
  100% { transform: translateX(-500px); opacity: 0; }
}

/* SVG text labels inside the flow diagram */
[data-design="b"] .b-flow-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  fill: var(--muted);
  text-transform: uppercase;
}

[data-design="b"] .b-flow-readout {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  fill: var(--thermal-accent);
  opacity: 0.9;
}

[data-design="b"] .b-flow-readout--sm {
  font-size: 8px;
  opacity: 0.7;
}

/* Flow status strip below diagram */
[data-design="b"] .b-hero__flow-status {
  display: flex;
  gap: var(--space-cell);
  flex-wrap: wrap;
  margin-top: var(--space-cell);
  padding-top: var(--space-cell);
  border-top: 1px solid var(--rule);
}

[data-design="b"] .b-flow-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
}

[data-design="b"] .b-flow-val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.04em;
}

[data-design="b"] .cal-frontpanel__silk {
  display: flex;
  justify-content: space-between;
  gap: var(--space-cell);
  flex-wrap: wrap;
  padding-bottom: var(--space-cell);
  border-bottom: 1px solid var(--rule);
}

[data-design="b"] .cal-frontpanel__desc {
  /* used as h1 — styled via .b-hero__headline */
}

[data-design="b"] .cal-frontpanel__serial {
  margin-top: var(--space-bezel);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-cell);
}

/* ── 5. SHARED INSTRUMENT PRIMITIVES ─────────────────────────────────── */
[data-design="b"] .cal-panel {
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: var(--radius-zero);
  padding: var(--space-bezel);
}

[data-design="b"] .cal-silk {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  color: var(--muted);
}

[data-design="b"] .cal-silk--ch { color: var(--ink-soft); }

[data-design="b"] .cal-readout {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

[data-design="b"] .cal-readout--live {
  color: var(--phosphor);
  font-size: clamp(48px, 9vw, 88px);
  line-height: 1;
}

[data-design="b"] .cal-readout--sm { font-size: 22px; }

[data-design="b"] .cal-readout__unit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .08em;
}

[data-design="b"] .cal-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-step);
  padding: var(--space-cell);
  background: var(--face-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  box-shadow: var(--shadow-bezel);
}

[data-design="b"] .cal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  padding: 3px 9px;
  border-radius: var(--radius-pin);
  box-shadow: var(--shadow-bezel);
}

[data-design="b"] .cal-badge--spec {
  color: var(--phosphor);
  border: 1px solid var(--phosphor);
}

[data-design="b"] .cal-badge--warn {
  color: var(--amber);
  border: 1px solid var(--amber);
}

[data-design="b"] .cal-badge--armed {
  color: var(--signal-blue);
  border: 1px solid var(--signal-blue);
}

/* (gauge/meter/needle removed — Site B uses the airflow visual, not a dial) */

/* ── 6. ANIMATED CTA (Element 2) ──────────────────────────────────────── */
[data-design="b"] .cal-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-em);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
  text-decoration: none;
  background: var(--face-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  padding: 14px 22px;
  will-change: transform;
  animation: b-cta-breath 4.4s var(--ease-drift) infinite;
  transition:
    transform var(--dur-snap) var(--ease-damp),
    box-shadow var(--dur-snap) var(--ease-damp);
  min-height: 44px;
}

@keyframes b-cta-breath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 107, 191, 0); }
  50%       { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-blue) 22%, transparent); }
}

[data-design="b"] .b-hero__cta { margin-bottom: var(--space-panel); }

[data-design="b"] .cal-cta__key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  padding: 2px 5px;
  box-shadow: var(--shadow-bezel);
}

[data-design="b"] .cal-cta__arm {
  position: absolute;
  left: 10px;
  top: -1px;
  height: 2px;
  width: calc(100% - 20px);
  transform: scaleX(0);
  transform-origin: left;
  background: var(--signal-blue);
  transition: transform var(--dur-damp) var(--ease-damp);
}

[data-design="b"] .cal-cta__arrow {
  transition: transform var(--dur-snap) var(--ease-damp);
}

[data-design="b"] .cal-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--face), 0 0 0 4px var(--signal-blue);
  animation-play-state: paused;
}

[data-design="b"] .cal-cta:focus-visible .cal-cta__arm {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cal-cta:hover {
    animation-play-state: paused;
    color: var(--ink);
  }
  [data-design="b"] .cal-cta:hover .cal-cta__arm  { transform: scaleX(1); }
  [data-design="b"] .cal-cta:hover .cal-cta__arrow { transform: translateY(3px); }
}

[data-design="b"] .cal-cta:active {
  box-shadow: var(--shadow-press);
  transform: translateY(1px);
}

/* ── 7. POINTER (between hero and #quote) ─────────────────────────────── */
[data-design="b"] .b-pointer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-step);
  padding: var(--space-bezel) 0;
  pointer-events: none;
}

[data-design="b"] .b-pointer__svg {
  width: 60px;
  height: 48px;
  overflow: visible;
}

/* The hairline warms from teal → amber as --thermal-temp rises */
[data-design="b"] .b-pointer__line {
  stroke: var(--thermal-accent);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: b-pointer-draw 1.8s var(--ease-trace) 0.4s forwards,
             b-pointer-pulse 5s var(--ease-drift) 2.2s infinite;
}

[data-design="b"] .b-pointer__tip {
  stroke: var(--thermal-accent);
  stroke-width: 1.5;
  fill: none;
  opacity: 0;
  animation: b-pointer-tip 0.6s var(--ease-trace) 2.0s forwards;
}

@keyframes b-pointer-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes b-pointer-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

@keyframes b-pointer-tip {
  to { opacity: 1; }
}

[data-design="b"] .b-pointer__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  animation: b-pointer-label 0.6s var(--ease-trace) 2.4s forwards;
}

@keyframes b-pointer-label {
  to { opacity: 1; }
}

/* ── 8. SERVICES (Element 4 mid-page) ──────────────────────────────────── */
[data-design="b"] .b-services {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-rack) clamp(14px, 5vw, 48px);
}

[data-design="b"] .b-services__header {
  margin-bottom: var(--space-panel);
}

[data-design="b"] .b-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--space-bezel);
  margin-bottom: var(--space-panel);
}

[data-design="b"] .b-svc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
  transition: box-shadow var(--dur-damp) var(--ease-damp);
}

@media (hover: hover) {
  [data-design="b"] .b-svc-card:hover {
    box-shadow: var(--shadow-bezel), inset 0 2px 0 var(--thermal-accent);
  }
}

[data-design="b"] .b-svc-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}

[data-design="b"] .b-svc-card__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

[data-design="b"] .b-svc-card__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--signal-blue);
  text-decoration: none;
  padding: var(--space-em) 0;
  border-top: 1px solid var(--rule);
  margin-top: auto;
}

/* Scope display inside services section */
[data-design="b"] .b-services__scope-wrap {
  margin-top: var(--space-panel);
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
}

[data-design="b"] .cal-ambient-b {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-rack) clamp(14px, 5vw, 48px);
}

[data-design="b"] .cal-b__caption {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: var(--space-em) 0;
}

[data-design="b"] .cal-scope {
  background: var(--face-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  box-shadow: var(--shadow-bezel);
  padding: var(--space-cell);
}

[data-design="b"] .cal-scope__svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  display: block;
}

[data-design="b"] .cal-scope__grid line {
  stroke: var(--rule);
  stroke-width: .5;
  opacity: .6;
}

[data-design="b"] .cal-scope__limit {
  stroke: var(--amber);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: .8;
}

[data-design="b"] .cal-scope__series {
  stroke: var(--ink-soft);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

[data-design="b"] .cal-scope__beam {
  stroke: var(--phosphor);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14 1400;
  filter: drop-shadow(0 0 3px var(--phosphor));
  animation: b-scope-trace 14s linear infinite;
}

@keyframes b-scope-trace {
  from { stroke-dashoffset: 1414; }
  to   { stroke-dashoffset: 0; }
}

[data-design="b"] .cal-ambient-b.is-paused .cal-scope__beam {
  animation-play-state: paused;
}

/* ── 9. ABOUT / SPEC SHEET ────────────────────────────────────────────── */
[data-design="b"] .b-about {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-panel);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-rack) clamp(14px, 5vw, 48px);
  /* thermal accent at section boundary */
  border-top: 2px solid var(--thermal-accent);
}

[data-design="b"] .b-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: var(--space-cell);
}

[data-design="b"] .b-spec-table tr {
  border-bottom: 1px solid var(--rule);
}

[data-design="b"] .b-spec-table td {
  padding: var(--space-em) var(--space-em);
  vertical-align: top;
}

[data-design="b"] .b-spec-table__key {
  color: var(--muted);
  letter-spacing: .08em;
  white-space: nowrap;
  padding-right: var(--space-bezel);
  width: 40%;
}

[data-design="b"] .b-spec-table__val {
  color: var(--ink);
}

/* ── 10. TAP-QUALIFY FUNNEL (INT-1 interactive) ──────────────────────── */
/* Scroll-warm endpoint — page is warmest here */
[data-design="b"] .b-funnel {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-rack) clamp(14px, 5vw, 48px);
  border-top: 2px solid var(--thermal-accent);
}

[data-design="b"] .b-funnel__panel {
  max-width: 640px;
}

[data-design="b"] .b-funnel__intro {
  color: var(--ink-soft);
  font-size: 15px;
  margin: var(--space-cell) 0 var(--space-panel);
}

/* Step blocks */
[data-design="b"] .b-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
  animation: b-step-in var(--dur-trace) var(--ease-trace) both;
}

[data-design="b"] .b-step--hidden { display: none; }

[data-design="b"] .b-step:not(.b-step--hidden) { display: flex; }

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

[data-design="b"] .b-step__label {
  margin-bottom: var(--space-step);
}

/* Channel buttons (funnel options) — reuse cal-chan pattern */
[data-design="b"] .cal-chanrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-em);
}

[data-design="b"] .cal-chan {
  position: relative;
  cursor: pointer;
}

/* Funnel option buttons — the tap targets */
[data-design="b"] .b-funnel-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--face-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  padding: 12px 16px;
  min-height: 44px;
  min-width: 44px;
  box-shadow: var(--shadow-bezel);
  cursor: pointer;
  transition:
    color var(--dur-snap) var(--ease-damp),
    box-shadow var(--dur-snap) var(--ease-damp);
}

[data-design="b"] .b-funnel-opt.is-selected,
[data-design="b"] .b-funnel-opt:focus-visible {
  color: var(--ink);
  box-shadow: var(--shadow-bezel), inset 0 2px 0 var(--signal-blue);
  outline: none;
}

@media (hover: hover) {
  [data-design="b"] .b-funnel-opt:hover {
    color: var(--ink);
    box-shadow: var(--shadow-bezel), inset 0 2px 0 var(--thermal-accent);
  }
}

/* Contact action section */
[data-design="b"] .b-funnel__action {
  gap: var(--space-panel);
}

[data-design="b"] .b-action__urgent {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
}

[data-design="b"] .b-action__urgent[hidden] { display: none; }
[data-design="b"] .b-action__planning[hidden] { display: none; }

[data-design="b"] .b-action__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  background: var(--face-deep);
  border: 2px solid var(--amber);
  border-radius: var(--radius-pin);
  padding: 16px 28px;
  min-height: 60px;
  text-decoration: none;
  letter-spacing: .02em;
  transition: box-shadow var(--dur-snap) var(--ease-damp);
}

@media (hover: hover) {
  [data-design="b"] .b-action__call:hover {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 30%, transparent);
  }
}

[data-design="b"] .b-action__planning {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
}

[data-design="b"] .b-action__notes-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-step);
  margin-top: var(--space-em);
}

[data-design="b"] .b-action__notes {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  background: var(--face-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  box-shadow: var(--shadow-bezel);
  padding: var(--space-cell);
  resize: vertical;
  width: 100%;
  max-width: 100%;
}

[data-design="b"] .b-action__notes:focus {
  outline: none;
  border-color: var(--signal-blue);
}

[data-design="b"] .b-action__book {
  align-self: flex-start;
  margin-top: var(--space-em);
}

[data-design="b"] .b-funnel__micro {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0;
}

/* Progress dots */
[data-design="b"] .b-funnel__progress {
  display: flex;
  gap: var(--space-em);
  margin-top: var(--space-panel);
  padding-top: var(--space-cell);
  border-top: 1px solid var(--rule);
}

[data-design="b"] .b-funnel__step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule);
  transition: background var(--dur-damp) var(--ease-damp);
}

[data-design="b"] .b-funnel__step-dot--active {
  background: var(--thermal-accent);
}

/* ── 11. FOOTER — Serial Plate ─────────────────────────────────────────── */
[data-design="b"] .b-footer {
  position: relative;
  z-index: 1;
  background: var(--face-deep);
  border-top: 1px solid var(--rule);
  margin-top: var(--space-bay);
}

[data-design="b"] .b-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-panel) clamp(14px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
}

[data-design="b"] .b-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-step);
}

[data-design="b"] .b-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-panel);
  margin: var(--space-em) 0;
}

[data-design="b"] .b-footer__phone {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .02em;
}

[data-design="b"] .b-footer__email {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--signal-blue);
  text-decoration: none;
  letter-spacing: .02em;
  align-self: center;
}

[data-design="b"] .b-footer__creds,
[data-design="b"] .b-footer__area {
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .1em;
}

[data-design="b"] .b-footer__bar {
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--rule) 0,
    var(--rule) 8px,
    transparent 8px,
    transparent 12px
  );
  margin: var(--space-em) 0;
  opacity: 0.6;
}

[data-design="b"] .b-footer__build {
  font-size: 11px;
  letter-spacing: .1em;
}

[data-design="b"] .b-footer__copy {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* ── 12. RESPONSIVE BREAKPOINTS ───────────────────────────────────────── */
@media (max-width: 768px) {
  [data-design="b"] .b-hero__body {
    grid-template-columns: 1fr;
    gap: var(--space-bezel);
  }
  [data-design="b"] .b-about {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .b-services__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  }
  [data-design="b"] .cal-ambient-b {
    grid-template-columns: 1fr;
    gap: var(--space-bezel);
  }
  [data-design="b"] .b-hero {
    min-height: auto;
    padding-bottom: var(--space-rack);
  }
  [data-design="b"] .b-hero__flow-svg {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 560px) {
  [data-design="b"] .b-funnel-opt {
    flex: 1 1 auto;
  }
  [data-design="b"] .b-hero__flow-status {
    flex-direction: column;
    gap: var(--space-em);
  }
}

@media (max-width: 390px) {
  [data-design="b"] .cal-logo { font-size: 16px; }
  [data-design="b"] .cal-navlink { font-size: 19px; }
  [data-design="b"] .cal-cta { width: 100%; justify-content: center; }
  [data-design="b"] .b-action__call { width: 100%; }
  [data-design="b"] .b-hero__headline { font-size: clamp(24px, 7vw, 38px); }
  [data-design="b"] .b-hero__flow-svg { aspect-ratio: 4 / 3; }
}

@media (max-width: 320px) {
  [data-design="b"] .cal-header__bar {
    padding-left: 12px;
    padding-right: 12px;
  }
  [data-design="b"] .b-hero__panel,
  [data-design="b"] .b-services,
  [data-design="b"] .b-about,
  [data-design="b"] .b-funnel {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ── 13. REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Header scope: static position */
  [data-design="b"] .cal-header__scope {
    animation: none;
    background-position: 8% 0;
  }
  /* Hero backdrop: no breathing, isotherms static */
  [data-design="b"] .b-hero__gradient {
    animation: none;
    opacity: 0.72;
  }
  [data-design="b"] .b-iso--1,
  [data-design="b"] .b-iso--2,
  [data-design="b"] .b-iso--3 {
    animation: none;
    opacity: 0.7;
    clip-path: inset(0 0 0 0);
  }
  /* Hero airflow diagram: streams static at mid-duct — thermally tinted frame */
  [data-design="b"] .b-hero-stream--trunk1,
  [data-design="b"] .b-hero-stream--trunk2,
  [data-design="b"] .b-hero-stream--trunk3 {
    animation: none;
    transform: translateX(200px);
    opacity: 0.5;
  }
  [data-design="b"] .b-hero-stream--drop1,
  [data-design="b"] .b-hero-stream--drop2,
  [data-design="b"] .b-hero-stream--drop3 {
    animation: none;
    transform: translateY(80px);
    opacity: 0.5;
  }
  [data-design="b"] .b-hero-stream--return {
    animation: none;
    transform: translateX(-200px);
    opacity: 0.4;
  }
  /* CTA: no breath pulse */
  [data-design="b"] .cal-cta {
    animation: none;
  }
  [data-design="b"] .cal-cta,
  [data-design="b"] .cal-cta__arm,
  [data-design="b"] .cal-cta__arrow { transition: none; }
  /* Pointer: static */
  [data-design="b"] .b-pointer__line,
  [data-design="b"] .b-pointer__tip,
  [data-design="b"] .b-pointer__label {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
    clip-path: none;
  }
  /* Scope beam: hidden, series held drawn */
  [data-design="b"] .cal-scope__beam { animation: none; opacity: 0; }
  /* Drawer: no slide transition */
  [data-design="b"] .cal-drawer__sheet,
  [data-design="b"] .cal-drawer__scrim { transition: none; }
  /* Funnel steps: no animation */
  [data-design="b"] .b-step { animation: none; }
}

/* ── 14. HARD OVERFLOW GUARD (mobile — no horizontal scroll) ──────────── */
[data-design="b"].dq-design {
  overflow-x: hidden;
}

[data-design="b"].dq-design * {
  max-width: 100%;
}

/* 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; }