/* ═══════════════════════════════════════════════════════════════
   Jericho HVAC · Design B · Calibration × HVAC Airflow
   Slot: b · Trade: hvac · Design: calibration
   All selectors scoped to [data-design="b"].dq-design
   Motion: transform/opacity/clip-path ONLY (no layout props)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKEN SYSTEM ─────────────────────────────────────────── */
[data-design="b"] {
  /* calibration instrument palette */
  --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;

  /* HVAC thermal spine — driven by scroll JS; 0=cool, 1=warm */
  --thermal-temp:    0;
  --thermal-cool:    #1A5F7A;   /* deep cool teal */
  --thermal-warm:    #C47A1A;   /* warm amber */
  --thermal-bg:      color-mix(in srgb, var(--thermal-cool) calc(100% - var(--thermal-temp) * 100%), var(--thermal-warm) calc(var(--thermal-temp) * 100%));
  --thermal-accent:  color-mix(in srgb, #1F6BBF calc(100% - var(--thermal-temp) * 100%), #D89426 calc(var(--thermal-temp) * 100%));

  /* airflow stream tint (reads --thermal-temp for color) */
  --stream-fill:     color-mix(in srgb, rgba(26,95,122,0.35) calc(100% - var(--thermal-temp) * 100%), rgba(196,122,26,0.35) calc(var(--thermal-temp) * 100%));

  /* calibration 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);

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

  /* bezel shadows */
  --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);
  --shadow-rule:  0 1px 0 var(--rule);

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

  background: var(--face);
  color: var(--ink-soft);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

@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);
    --thermal-cool: #0D3D52;
    --thermal-warm: #9C5E10;
  }
}

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

/* content-window container */
[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; }

/* ── 2. 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); }
[data-design="b"] .cal-readout--sm   { font-size: 20px; }
[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--armed  { color: var(--signal-blue); border: 1px solid var(--signal-blue); }

/* ── 3. E1 · HEADER ──────────────────────────────────────────── */
[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: 1280px;
  margin: 0 auto;
  padding: var(--space-cell) clamp(14px, 5vw, 48px);
  min-height: 58px;
}

[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;
}

/* atmospheric: phosphor blip tracing the base rule, 22s cycle (H-3: ≥18s) */
[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; }
}

/* 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);
}
[data-design="b"] .cal-burger:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
}
[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) and (pointer: fine) {
  [data-design="b"] .cal-burger:hover { box-shadow: var(--shadow-bezel); }
}

/* 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;
  min-height: 44px;
  min-width: 44px;
}
[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);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--dur-snap) var(--ease-damp);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cal-navlink:hover { color: var(--signal-blue); }
}
[data-design="b"] .cal-drawer__phone {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-em) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-design="b"] .cal-drawer__cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--face);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pin);
  padding: 13px 24px;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-em);
}

/* ── 4. E3 + E5 · HERO ───────────────────────────────────────── */
[data-design="b"] .cal-hero {
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  align-items: center;
  /* isolation:isolate is inline on the element */
}

/* thermal backdrop: full-bleed, absolute, z=1 */
[data-design="b"] .cal-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* thermal gradient field — the ambient cool→warm substrate */
[data-design="b"] .cal-hero__gradient {
  position: absolute;
  inset: 0;
  /* cool teal ground with an ambient shimmer layer */
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(26,95,122,.55) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 60%, rgba(31,107,191,.25) 0%, transparent 65%),
    linear-gradient(165deg, #0a2533 0%, #122840 35%, #1a1e26 100%);
  /* animate: slow thermal drift using transform only */
  animation: b-thermal-drift 8s var(--ease-drift) infinite alternate;
}
@keyframes b-thermal-drift {
  0%   { transform: scale(1.0) translateY(0); }
  100% { transform: scale(1.04) translateY(-8px); }
}

/* E5 airflow SVG — ambient, site-B signature, z=2 */
[data-design="b"] .cal-hero__airflow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: .55;
}

/* duct geometry lines */
[data-design="b"] .cal-duct {
  stroke: rgba(63,168,106,.35);
  stroke-width: 1.5;
  stroke-dasharray: 8 5;
}
[data-design="b"] .cal-duct--branch {
  stroke: rgba(63,168,106,.2);
  stroke-width: 1;
}

/* vent faces */
[data-design="b"] .cal-vent__face {
  fill: none;
  stroke: rgba(63,168,106,.4);
  stroke-width: 1;
}
[data-design="b"] .cal-vent__slot {
  stroke: rgba(63,168,106,.3);
  stroke-width: .8;
}

/* air stream particles — tinted by --thermal-temp via fill */
[data-design="b"] .cal-stream {
  fill: var(--stream-fill);
  opacity: .8;
}

/* upper duct: left→right flow */
[data-design="b"] .cal-stream--a {
  animation: b-flow-right 4s linear infinite;
}
[data-design="b"] .cal-stream--b {
  animation: b-flow-right 4s linear infinite;
  animation-delay: -1.4s;
}
[data-design="b"] .cal-stream--c {
  animation: b-flow-right 4s linear infinite;
  animation-delay: -2.7s;
}
@keyframes b-flow-right {
  from { transform: translateX(0); }
  to   { transform: translateX(1600px); }
}

/* lower duct: right→left flow */
[data-design="b"] .cal-stream--d {
  animation: b-flow-left 5s linear infinite;
}
[data-design="b"] .cal-stream--e {
  animation: b-flow-left 5s linear infinite;
  animation-delay: -2.1s;
}
@keyframes b-flow-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-1600px); }
}

/* vertical branch streams: downward */
[data-design="b"] .cal-stream--f {
  animation: b-flow-down 3.5s linear infinite;
}
[data-design="b"] .cal-stream--g {
  animation: b-flow-down 3.5s linear infinite;
  animation-delay: -1.8s;
}
@keyframes b-flow-down {
  from { transform: translateY(0); }
  to   { transform: translateY(700px); }
}

/* hero content: above backdrop, centered, windowed */
[data-design="b"] .cal-hero__content {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(56px,10vh,120px) clamp(20px,5vw,64px);
  /* z-index: 10 is inline for hard-rule compliance */
}

[data-design="b"] .cal-hero__panel {
  max-width: 680px;
}

[data-design="b"] .cal-hero__silk-row {
  display: flex;
  gap: var(--space-panel);
  flex-wrap: wrap;
  margin-bottom: var(--space-cell);
}
/* muted color for hero silk on dark bg */
[data-design="b"] .cal-hero .cal-silk {
  color: rgba(180,184,190,.7);
}
[data-design="b"] .cal-hero .cal-silk--ch {
  color: rgba(63,168,106,.8);
}

[data-design="b"] .cal-hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 4.5vw, 52px);
  line-height: 1.08;
  color: #E8EAE7;
  margin: 0 0 var(--space-bezel);
  max-width: 22ch;
  opacity: 1; /* HARD: must be opacity:1 at first paint */
}

[data-design="b"] .cal-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: rgba(180,184,190,.85);
  margin: 0 0 var(--space-cell);
  max-width: 52ch;
  opacity: 1;
}

[data-design="b"] .cal-hero__proof {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(63,168,106,.9);
  margin: 0 0 var(--space-panel);
  opacity: 1;
}

[data-design="b"] .cal-hero__serial {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(124,127,134,.7);
  margin-top: var(--space-cell);
  opacity: 1;
}

/* ── 5. E2 · ANIMATED CTA ────────────────────────────────────── */
[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;
  min-height: 44px;
  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);
}
@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"] .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;
  animation-play-state: paused;
  box-shadow: 0 0 0 2px var(--face), 0 0 0 4px var(--signal-blue);
}
[data-design="b"] .cal-cta:focus-visible .cal-cta__arm {
  transform: scaleX(1);
}
[data-design="b"] .cal-cta:active {
  box-shadow: var(--shadow-press);
  transform: translateY(1px);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cal-cta:hover {
    outline: none;
    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); }
}

/* small CTA variant for service cards */
[data-design="b"] .cal-cta--sm {
  font-size: 13px;
  padding: 10px 16px;
  animation: none;
}

/* ── 6. E6 · POINTER ─────────────────────────────────────────── */
[data-design="b"] .cal-pointer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-em);
  padding: var(--space-bezel) clamp(20px,5vw,64px);
  opacity: 1; /* HARD: must be visible */
  min-height: 80px; /* HARD: bounding-box ≥8px */
}

[data-design="b"] .cal-pointer__iso {
  width: min(320px, 80vw);
  height: 48px;
  display: block;
  overflow: visible;
}

/* isotherm hairline — draws in left→right via clip-path, then oscillates */
[data-design="b"] .cal-pointer__line {
  stroke: url(#b-iso-gradient);
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: b-iso-draw 2.4s var(--ease-trace) forwards,
             b-iso-pulse 4s var(--ease-drift) 2.4s infinite;
}

/* fallback if no SVG linearGradient: use thermal-accent */
[data-design="b"] .cal-pointer__line {
  stroke: var(--thermal-accent);
}

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

[data-design="b"] .cal-pointer__tick {
  stroke: var(--thermal-accent);
  stroke-width: 1;
  opacity: .6;
}

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

/* ── 7. FUNNEL ───────────────────────────────────────────────── */
[data-design="b"] .cal-funnel-wrap {
  padding: var(--space-rack) clamp(20px,5vw,64px);
  max-width: 1280px;
  margin: 0 auto;
  /* thermal warm end */
  background: color-mix(in srgb, var(--face) 92%, var(--thermal-bg) 8%);
}

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

[data-design="b"] .cal-funnel__head {
  margin-bottom: var(--space-panel);
}
[data-design="b"] .cal-funnel__sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: var(--space-em) 0 0;
}

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

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

[data-design="b"] .cal-step__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-em);
}

[data-design="b"] .cal-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-em);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  background: var(--face-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  padding: 12px 18px;
  min-height: 44px;
  cursor: pointer;
  transition:
    color var(--dur-snap) var(--ease-damp),
    box-shadow var(--dur-snap) var(--ease-damp);
}
[data-design="b"] .cal-opt__icon {
  color: var(--muted);
  font-size: 10px;
}
[data-design="b"] .cal-opt:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cal-opt:hover {
    color: var(--ink);
    box-shadow: var(--shadow-bezel), inset 0 2px 0 var(--signal-blue);
  }
}

/* contact action in step 4 */
[data-design="b"] .cal-step--action {
  gap: var(--space-panel);
}
[data-design="b"] .cal-action-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
}
[data-design="b"] .cal-action-emergency,
[data-design="b"] .cal-action-plan {
  display: none; /* shown by JS */
}
[data-design="b"] .cal-action-emergency.is-shown,
[data-design="b"] .cal-action-plan.is-shown {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
}
[data-design="b"] .cal-action__copy {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}
[data-design="b"] .cal-action__call {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--face);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pin);
  padding: 14px 28px;
  min-height: 52px;
  text-decoration: none;
  transition: box-shadow var(--dur-snap) var(--ease-damp);
}
[data-design="b"] .cal-action__call:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--face), 0 0 0 4px var(--signal-blue);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cal-action__call:hover {
    box-shadow: 0 0 0 2px var(--signal-blue);
  }
}

/* funnel ticket confirm */
[data-design="b"] .cal-ticket--funnel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-cell);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-cell);
  animation: b-ticket-arm var(--dur-trace) var(--ease-trace) both;
}
[data-design="b"] .cal-ticket--funnel[hidden] { display: none; }
@keyframes b-ticket-arm {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
[data-design="b"] .cal-ticket__spec {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
}

/* funnel progress rail */
[data-design="b"] .cal-funnel__rail {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: var(--space-panel);
}
[data-design="b"] .cal-rail__step {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
  background: var(--face-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-snap) var(--ease-damp),
              background var(--dur-snap) var(--ease-damp);
}
[data-design="b"] .cal-rail__step--on {
  color: var(--phosphor);
  border-color: var(--phosphor);
}
[data-design="b"] .cal-rail__line {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ── 8. E4 · SERVICES + AMBIENT SCOPE ───────────────────────── */
[data-design="b"] .cal-services {
  padding: var(--space-rack) clamp(20px,5vw,64px);
  background: var(--face-deep);
}
[data-design="b"] .cal-services__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-panel);
}
[data-design="b"] .cal-svc__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
}
[data-design="b"] .cal-svc__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.5vw, 40px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

/* scope (E4) */
[data-design="b"] .cal-ambient-b {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: var(--space-panel);
  align-items: center;
}
[data-design="b"] .cal-b__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
}
[data-design="b"] .cal-b__caption {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
[data-design="b"] .cal-scope {
  background: var(--face);
  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;
}

/* channel cards grid */
[data-design="b"] .cal-chanels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--space-cell);
}
[data-design="b"] .cal-svc-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
  transition: box-shadow var(--dur-damp) var(--ease-damp);
}
[data-design="b"] .cal-svc-panel__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cal-svc-panel:hover {
    box-shadow: inset 0 2px 0 var(--signal-blue);
  }
}

/* ── 9. ABOUT / SPEC SHEET ───────────────────────────────────── */
[data-design="b"] .cal-about {
  padding: var(--space-rack) clamp(20px,5vw,64px);
}
[data-design="b"] .cal-about__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-panel);
  align-items: start;
}
[data-design="b"] .cal-spec-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-step);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  overflow: hidden;
}
[data-design="b"] .cal-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-cell);
  padding: var(--space-cell) var(--space-bezel);
  border-bottom: 1px solid var(--rule);
  background: var(--face-deep);
}
[data-design="b"] .cal-spec-row:last-child { border-bottom: 0; }
[data-design="b"] .cal-spec-row .cal-readout--sm {
  font-size: 15px;
  text-align: right;
  word-break: break-word;
}

/* ── 10. FOOTER ──────────────────────────────────────────────── */
[data-design="b"] .cal-footer {
  border-top: 2px solid var(--rule);
  background: var(--face-deep);
  padding: var(--space-panel) clamp(20px,5vw,64px);
}
[data-design="b"] .cal-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-bezel);
}
[data-design="b"] .cal-footer__firm {
  display: flex;
  align-items: center;
  gap: var(--space-panel);
  flex-wrap: wrap;
}
[data-design="b"] .cal-footer__phone {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
[data-design="b"] .cal-footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
}
[data-design="b"] .cal-footer__area,
[data-design="b"] .cal-footer__build {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--muted);
}
[data-design="b"] .cal-footer__barcode {
  height: 20px;
  background: repeating-linear-gradient(
    90deg,
    var(--rule) 0, var(--rule) 2px,
    transparent 2px, transparent 6px
  );
  opacity: .4;
  border-radius: var(--radius-pin);
}

/* ── 11. SCROLL-LINKED THERMAL WARMING ──────────────────────── */
/* JS drives --thermal-temp on the [data-design="b"] root; */
/* CSS color-mix() in the token system picks up the change.  */
/* The hero gradient also shifts subtly — handled by JS class. */
[data-design="b"].thermal-warm .cal-hero__gradient {
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(196,122,26,.4) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 80% 60%, rgba(216,148,38,.2) 0%, transparent 65%),
    linear-gradient(165deg, #1a1408 0%, #2a1e08 35%, #1a1208 100%);
}

/* ── 12. PREFERS-REDUCED-MOTION ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cal-header__scope { animation: none; background-position: 8% 0; }
  [data-design="b"] .cal-drawer__sheet,
  [data-design="b"] .cal-drawer__scrim { transition: none; }
  [data-design="b"] .cal-hero__gradient { animation: none; }
  /* airflow resolves to static thermal-tinted frame */
  [data-design="b"] .cal-stream--a,
  [data-design="b"] .cal-stream--b,
  [data-design="b"] .cal-stream--c,
  [data-design="b"] .cal-stream--d,
  [data-design="b"] .cal-stream--e,
  [data-design="b"] .cal-stream--f,
  [data-design="b"] .cal-stream--g {
    animation: none;
    transform: translateX(200px); /* static mid-duct position, visible */
  }
  [data-design="b"] .cal-cta                { animation: none; transition: none; }
  [data-design="b"] .cal-cta__arm,
  [data-design="b"] .cal-cta__arrow         { transition: none; }
  [data-design="b"] .cal-scope__beam        { animation: none; opacity: 0; }
  [data-design="b"] .cal-step               { animation: none; }
  [data-design="b"] .cal-ticket--funnel     { animation: none; }
  [data-design="b"] .cal-pointer__line      { clip-path: inset(0 0 0 0); animation: none; }
}

/* ── 13. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  [data-design="b"] .cal-about__inner { grid-template-columns: 1fr; }
  [data-design="b"] .cal-ambient-b    { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  [data-design="b"] .cal-hero         { min-height: 100svh; align-items: flex-start; }
  [data-design="b"] .cal-hero__content { padding-top: clamp(72px,14vh,100px); }
  [data-design="b"] .cal-services,
  [data-design="b"] .cal-about,
  [data-design="b"] .cal-funnel-wrap  { padding-left: 20px; padding-right: 20px; }
  [data-design="b"] .cal-funnel-wrap  { padding-top: clamp(56px,8vh,96px); padding-bottom: clamp(56px,8vh,96px); }
  [data-design="b"] .cal-services     { padding-top: clamp(56px,8vh,96px); padding-bottom: clamp(56px,8vh,96px); }
  [data-design="b"] .cal-about        { padding-top: clamp(56px,8vh,96px); padding-bottom: clamp(56px,8vh,96px); }
}
@media (max-width: 560px) {
  [data-design="b"] .cal-chanels-grid { grid-template-columns: 1fr; }
  [data-design="b"] .cal-step__opts   { flex-direction: column; }
  [data-design="b"] .cal-opt          { width: 100%; justify-content: flex-start; }
}
@media (max-width: 390px) {
  [data-design="b"] .cal-logo         { font-size: 17px; }
  [data-design="b"] .cal-hero__silk-row { gap: var(--space-cell); }
  [data-design="b"] .cal-cta          { width: 100%; justify-content: center; }
  [data-design="b"] .cal-action__call { width: 100%; justify-content: center; }
}
@media (max-width: 320px) {
  [data-design="b"] .cal-header__bar { padding-left: 12px; padding-right: 12px; }
  [data-design="b"] .cal-hero__content { padding-left: 14px; padding-right: 14px; }
}

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