/* ═══════════════════════════════════════════════════════════════════
   hvac-bedford design-a — Calibration × HVAC
   All selectors scoped [data-design="a"] — ZERO [data-design="a"].dq-design
   Thermal tokens: --thermal-temp (0..1) · --thermal-bg · --thermal-accent
   © 2026 Massiveforge
═══════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────── */
[data-design="a"] {
  /* Calibration instrument-panel 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 tokens — driven by comfort-dial + scroll */
  --thermal-temp:   0.5;   /* 0=cool, 1=warm — set by dial JS + scroll */
  --thermal-cool:   #1a5f6e;
  --thermal-warm:   #c07a18;
  --thermal-bg:     color-mix(in srgb, var(--thermal-cool) calc((1 - var(--thermal-temp)) * 100%), var(--thermal-warm));
  --thermal-accent: color-mix(in srgb, #2f8fa6 calc((1 - var(--thermal-temp)) * 100%), #D89426);

  /* Comfort-dial theme vars — themed to calibration palette */
  --cd-cool:        #2f8fa6;
  --cd-warm:        #D89426;
  --cd-needle:      #D89426;
  --cd-knob:        color-mix(in srgb, #0a1f28 60%, black);
  --cd-knob-stroke: rgba(230,231,229,0.18);
  --cd-ring-bg:     rgba(230,231,229,0.14);
  --cd-paper:       #E6E7E5;
  --cd-accent:      #D89426;
  --cd-mono:        "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Typography */
  --font-display: "IBM Plex Sans Condensed", "Helvetica Neue Condensed", sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains 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:  80px;   /* 80px desktop floor per trade.md */
  --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;

  /* Elevation — bezel recess only, no drop 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);

  /* Design exposure */
  --design-a-primary: var(--thermal-accent);

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

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

/* Dark mode */
@media (prefers-color-scheme: dark) {
  [data-design="a"] {
    --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);
  }
}

/* Mobile overflow guard — scoped to .dq-design */
[data-design="a"].dq-design,
[data-design="a"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="a"].dq-design * { min-width: 0; }
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]) { max-width: 100%; height: auto; }


/* ── 2. SHARED INSTRUMENT PRIMITIVES ───────────────────────────── */

[data-design="a"] .cal-panel {
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: var(--radius-zero);
  padding: var(--space-bezel);
}

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

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

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

[data-design="a"] .cal-readout--live { color: var(--phosphor); }
[data-design="a"] .cal-readout--sm   { font-size: 22px; }

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

[data-design="a"] .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="a"] .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="a"] .cal-badge--spec   { color: var(--phosphor); border: 1px solid var(--phosphor); }
[data-design="a"] .cal-badge--warn   { color: var(--amber);    border: 1px solid var(--amber); }
[data-design="a"] .cal-badge--armed  { color: var(--signal-blue); border: 1px solid var(--signal-blue); }

[data-design="a"] .cal-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.1;
  color: var(--ink);
  margin: var(--space-em) 0 var(--space-bezel);
}

/* Channel selector shared */
[data-design="a"] .cal-chanrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-em);
}

[data-design="a"] .cal-chan { position: relative; cursor: pointer; }
[data-design="a"] .cal-chan input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
}

[data-design="a"] .cal-chan span {
  display: inline-block;
  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 18px;
  box-shadow: var(--shadow-bezel);
  transition: color var(--dur-snap) var(--ease-damp),
              box-shadow var(--dur-snap) var(--ease-damp);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

[data-design="a"] .cal-chan input:checked + span {
  color: var(--ink);
  box-shadow: var(--shadow-bezel), inset 0 2px 0 var(--signal-blue);
}

[data-design="a"] .cal-chan input:focus-visible + span {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
}


/* ── 3. E1 · HEADER ─────────────────────────────────────────────── */

[data-design="a"] .cal-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--face);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
}

[data-design="a"] .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="a"] .cal-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
}

/* E1 atmospheric: phosphor blip tracing the base rule, 22s cycle */
[data-design="a"] .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: a-scope-sweep 22s linear infinite;
}

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

[data-design="a"] .cal-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  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="a"] .cal-burger:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
}

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

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

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

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

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

[data-design="a"] .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="a"] .cal-drawer.is-open .cal-drawer__scrim { opacity: 1; }
[data-design="a"] .cal-drawer.is-open .cal-drawer__sheet { transform: none; }

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

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

[data-design="a"] .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="a"] .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);
  min-height: 44px;
  display: flex;
  align-items: center;
}

[data-design="a"] .cal-drawer__divider {
  height: 1px;
  background: var(--rule);
  margin: var(--space-em) 0;
}

[data-design="a"] .cal-drawer__phone {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-cell) 0;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  min-height: 44px;
}

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

[data-design="a"] .cal-drawer__phone-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .04em;
}

[data-design="a"] .cal-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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;
  margin-top: var(--space-em);
  min-height: 44px;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-navlink:hover { color: var(--signal-blue); }
  [data-design="a"] .cal-drawer__cta:hover { box-shadow: 0 0 0 2px var(--signal-blue); }
  [data-design="a"] .cal-burger:hover { box-shadow: var(--shadow-bezel); }
}


/* ── 4. HERO — Front Panel + Thermal Backdrop (E3) ──────────────── */

[data-design="a"] .cal-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;          /* HARD: hero text stays top-most paint */
  border-bottom: 1px solid var(--rule);
}

/* E3: Thermal hero backdrop — cool→warm animated atmosphere */
[data-design="a"] .cal-hero__thermal-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

[data-design="a"] .cal-thermal-layer {
  position: absolute;
  inset: 0;
  opacity: 1;
}

/* Primary cool→warm gradient field — shifts with --thermal-temp */
[data-design="a"] .cal-thermal-layer--a {
  background: radial-gradient(
    ellipse 80% 60% at 60% 40%,
    color-mix(in srgb, #0a3540 calc((1 - var(--thermal-temp)) * 100%), #5a2a08) 0%,
    transparent 70%
  ),
  linear-gradient(
    160deg,
    color-mix(in srgb, #0d2e38 calc((1 - var(--thermal-temp)) * 100%), #3d1f08) 0%,
    color-mix(in srgb, #081820 calc((1 - var(--thermal-temp)) * 100%), #1a0c04) 100%
  );
  animation: a-thermal-breathe 6s var(--ease-drift) infinite alternate;
}

/* Secondary layer — subtle isotherm shimmer */
[data-design="a"] .cal-thermal-layer--b {
  background: radial-gradient(
    ellipse 50% 40% at 75% 65%,
    color-mix(in srgb, rgba(47,143,166,.18) calc((1 - var(--thermal-temp)) * 100%), rgba(216,148,38,.14)) 0%,
    transparent 70%
  );
  animation: a-thermal-drift 9s var(--ease-drift) infinite alternate-reverse;
}

/* Isotherm sweep line */
[data-design="a"] .cal-thermal-isotherm {
  position: absolute;
  left: 0; right: 0;
  bottom: 35%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--thermal-cool) calc((1 - var(--thermal-temp)) * 100%), var(--thermal-warm)) 30%,
    color-mix(in srgb, var(--thermal-cool) calc((1 - var(--thermal-temp)) * 100%), var(--thermal-warm)) 70%,
    transparent 100%
  );
  opacity: 0.35;
  animation: a-isotherm-pulse 8s var(--ease-drift) infinite;
}

@keyframes a-thermal-breathe {
  from { opacity: 0.82; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.04); }
}

@keyframes a-thermal-drift {
  from { transform: translate(0, 0) scale(1); opacity: 0.6; }
  to   { transform: translate(4%, 3%) scale(1.08); opacity: 0.9; }
}

@keyframes a-isotherm-pulse {
  0%, 100% { opacity: 0.20; transform: scaleX(0.85); }
  50%       { opacity: 0.45; transform: scaleX(1); }
}

/* Hero inner layout */
[data-design="a"] .cal-hero__inner {
  position: relative;
  z-index: 2;             /* HARD: above every backdrop layer */
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(64px,10vh,120px) clamp(14px,5vw,48px);
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-panel);
  align-items: center;
}

[data-design="a"] .cal-hero__silk-row {
  margin-bottom: var(--space-em);
}

/* Hero copy — opacity:1 at FIRST PAINT, no reveal-gate */
[data-design="a"] .cal-hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1.05;
  color: var(--face);           /* light on dark thermal bg */
  margin: 0 0 var(--space-bezel);
  max-width: 16ch;
  opacity: 1;                   /* HARD: never opacity:0 */
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

[data-design="a"] .cal-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: rgba(230,231,229,.85);
  margin: 0 0 var(--space-em);
  max-width: 42ch;
  opacity: 1;                   /* HARD: never opacity:0 */
}

[data-design="a"] .cal-hero__proof {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(230,231,229,.65);
  margin: 0 0 var(--space-bezel);
  opacity: 1;                   /* HARD: never opacity:0 */
}

[data-design="a"] .cal-hero__trust-chip {
  margin-bottom: var(--space-bezel);
  opacity: 1;                   /* HARD: never opacity:0 */
}

/* Dial mount — centered bare container, no plate/border/box */
[data-design="a"] .cal-hero__dial-mount {
  display: flex;
  justify-content: center;
  align-items: center;
}

[data-design="a"] .cal-hero__dial-mount .mf-comfort-dial {
  /* Theme the comfort-dial to calibration's cool→warm palette */
  --cd-cool:        var(--thermal-cool);
  --cd-warm:        var(--thermal-warm);
  --cd-needle:      #D89426;
  --cd-knob:        color-mix(in srgb, #0a1f28 60%, black);
  --cd-knob-stroke: rgba(230,231,229,0.18);
  --cd-ring-bg:     rgba(230,231,229,0.14);
  --cd-paper:       #E6E7E5;
  --cd-accent:      #D89426;
}


/* ── 5. E2 · ANIMATED CTA ───────────────────────────────────────── */

[data-design="a"] .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: a-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;
  opacity: 1;                  /* HARD: never opacity:0 on cta element */
}

@keyframes a-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="a"] .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);
  opacity: 1;                  /* HARD: never opacity:0 */
}

[data-design="a"] .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="a"] .cal-cta__arrow {
  transition: transform var(--dur-snap) var(--ease-damp);
  opacity: 1;                  /* HARD: never opacity:0 */
}

[data-design="a"] .cal-cta:hover,
[data-design="a"] .cal-cta:focus-visible {
  outline: none;
  animation-play-state: paused;
  color: var(--ink);
}

[data-design="a"] .cal-cta:focus-visible .cal-cta__arm { transform: scaleX(1); }
[data-design="a"] .cal-cta:focus-visible {
  box-shadow: 0 0 0 2px var(--face), 0 0 0 4px var(--signal-blue);
}

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

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-cta:hover .cal-cta__arm   { transform: scaleX(1); }
  [data-design="a"] .cal-cta:hover .cal-cta__arrow { transform: translateY(3px); }
}


/* ── 6. E6 · POINTER — thermal-flow wayfinding ──────────────────── */

[data-design="a"] .cal-pointer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-cell);
  padding: var(--space-panel) clamp(14px,5vw,48px);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  opacity: 1;                  /* HARD: must be visible, opacity:1 */
}

/* Isotherm line — warms from cool teal to amber as it draws */
[data-design="a"] .cal-pointer__isotherm {
  width: 100%;
  max-width: 480px;
  height: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--thermal-cool) calc((1 - var(--thermal-temp)) * 100%), var(--thermal-warm)) 0%,
    var(--thermal-warm) 100%
  );
  animation: a-pointer-draw 3s var(--ease-trace) infinite;
  transform-origin: left;
  opacity: 1;                  /* HARD: never opacity:0 */
}

[data-design="a"] .cal-pointer__line {
  width: 100%;
  height: 100%;
}

@keyframes a-pointer-draw {
  0%   { transform: scaleX(0.1); opacity: 0.5; }
  60%  { transform: scaleX(1);   opacity: 1; }
  100% { transform: scaleX(1);   opacity: 0.7; }
}

[data-design="a"] .cal-pointer__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
  opacity: 1;                  /* HARD: never opacity:0 */
}


/* ── 7. TAP-QUALIFY FUNNEL (#quote) — E5/INT-1 ──────────────────── */

[data-design="a"] .cal-funnel-section {
  background: var(--face-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-rack) clamp(14px,5vw,48px);
}

[data-design="a"] .cal-funnel__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-bezel);
}

[data-design="a"] .cal-funnel__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
}

[data-design="a"] .cal-funnel__caption {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}

[data-design="a"] .cal-funnel__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
  animation: a-step-reveal var(--dur-trace) var(--ease-trace) both;
}

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

@keyframes a-step-reveal {
  from { opacity: 0; transform: translateY(10px); }  /* Note: starts opacity:0 BUT this is not a hero/cta element */
  to   { opacity: 1; transform: none; }
}

/* Funnel chan buttons — larger tap targets */
[data-design="a"] .cal-chan--funnel span {
  font-size: 14px;
  padding: 14px 20px;
  min-height: 48px;
}

/* Contact action */
[data-design="a"] .cal-funnel__action[hidden] { display: none; }

[data-design="a"] .cal-funnel__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
  padding: var(--space-bezel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  background: var(--face);
  animation: a-step-reveal var(--dur-trace) var(--ease-trace) both;
}

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

[data-design="a"] .cal-funnel__call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .06em;
  color: var(--face);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pin);
  padding: 16px 28px;
  text-decoration: none;
  min-height: 56px;
  transition: box-shadow var(--dur-snap) var(--ease-damp),
              transform var(--dur-snap) var(--ease-damp);
}

[data-design="a"] .cal-funnel__call-btn--secondary {
  font-size: 18px;
  padding: 13px 24px;
  min-height: 48px;
}

[data-design="a"] .cal-funnel__calltext {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

[data-design="a"] .cal-funnel__calltext a {
  color: var(--signal-blue);
  text-decoration: none;
  font-family: var(--font-mono);
}

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

[data-design="a"] .cal-funnel__progress {
  display: flex;
  align-items: center;
  gap: var(--space-em);
}

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

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-funnel__call-btn:hover {
    box-shadow: 0 0 0 2px var(--signal-blue);
  }
}

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


/* ── 8. SERVICES — Channels Grid ───────────────────────────────── */

[data-design="a"] .cal-services {
  padding: var(--space-rack) clamp(14px,5vw,48px);
  border-bottom: 1px solid var(--rule);
}

[data-design="a"] .cal-services__inner {
  max-width: 1280px;
  margin: 0 auto;
}

[data-design="a"] .cal-services__head {
  margin-bottom: var(--space-panel);
}

[data-design="a"] .cal-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-bezel);
}

[data-design="a"] .cal-channel {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
  transition: box-shadow var(--dur-damp) var(--ease-damp);
}

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

[data-design="a"] .cal-channel__fn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--signal-blue);
  text-decoration: none;
  padding: var(--space-em) 0;
  border-top: 1px solid var(--rule);
  min-height: 44px;
  display: flex;
  align-items: center;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-channel:hover {
    box-shadow: inset 0 2px 0 var(--signal-blue);
  }
  [data-design="a"] .cal-channel__fn:hover {
    color: var(--ink);
  }
}


/* ── 9. E4 · PERFORMANCE SCOPE — The Trace (mid-page ambient) ─── */

[data-design="a"] .cal-ambient-b {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: var(--space-panel);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-rack) clamp(14px,5vw,48px);
}

[data-design="a"] .cal-b__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
}

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

[data-design="a"] .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="a"] .cal-scope__svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  display: block;
}

[data-design="a"] .cal-scope__grid line { stroke: var(--rule); stroke-width: .5; opacity: .6; }
[data-design="a"] .cal-scope__limit    { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; }
[data-design="a"] .cal-scope__series   { stroke: var(--ink-soft); stroke-width: 1.5; stroke-linejoin: round; }
[data-design="a"] .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: a-scope-trace 14s linear infinite;
}

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

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


/* ── 10. ABOUT — Specification Sheet ───────────────────────────── */

[data-design="a"] .cal-about {
  background: var(--face-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-rack) clamp(14px,5vw,48px);
}

[data-design="a"] .cal-about__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--space-panel);
  align-items: start;
}

[data-design="a"] .cal-about__body {
  font-size: clamp(15px,2vw,17px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0;
}

[data-design="a"] .cal-spec-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
}

[data-design="a"] .cal-spec-row {
  display: grid;
  grid-template-columns: minmax(120px,1fr) minmax(0,2fr);
  gap: var(--space-cell);
  padding: var(--space-cell);
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

[data-design="a"] .cal-spec-row:last-child { border-bottom: 0; }

[data-design="a"] .cal-spec-val {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink);
}

[data-design="a"] .cal-spec-val a {
  color: var(--signal-blue);
  text-decoration: none;
}


/* ── 11. FOOTER — Serial Plate ──────────────────────────────────── */

[data-design="a"] .cal-footer {
  background: var(--face);
  border-top: 2px solid var(--rule);
  padding: var(--space-panel) clamp(14px,5vw,48px) var(--space-bezel);
}

[data-design="a"] .cal-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-bezel);
}

[data-design="a"] .cal-footer__plate {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
}

[data-design="a"] .cal-footer__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--ink);
}

[data-design="a"] .cal-footer__spec {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

[data-design="a"] .cal-footer__phone {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--signal-blue);
  text-decoration: none;
  letter-spacing: .04em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

[data-design="a"] .cal-footer__lang,
[data-design="a"] .cal-footer__copy {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
}

/* Barcode-style hairline pattern */
[data-design="a"] .cal-footer__barcode {
  height: 20px;
  background: repeating-linear-gradient(
    90deg,
    var(--rule) 0px, var(--rule) 2px,
    transparent 2px, transparent 6px,
    var(--rule) 6px, var(--rule) 7px,
    transparent 7px, transparent 13px,
    var(--rule) 13px, var(--rule) 16px,
    transparent 16px, transparent 22px
  );
  opacity: 0.4;
}


/* ── 12. THERMAL SCROLL-WARMING (TRIAD-2 scroll-linked motion) ─── */
/* Applied via JS — thermal-warm class toggles on scroll toward CTA */

[data-design="a"].thermal-warm .cal-thermal-layer--a {
  /* Warmer state — JS adds this class when scrolled to funnel */
}


/* ── 13. REDUCED MOTION ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .cal-header__scope { animation: none; background-position: 8% 0; }
  [data-design="a"] .cal-drawer__sheet,
  [data-design="a"] .cal-drawer__scrim { transition: none; }
  [data-design="a"] .cal-cta          { animation: none; }
  [data-design="a"] .cal-cta,
  [data-design="a"] .cal-cta__arm,
  [data-design="a"] .cal-cta__arrow   { transition: none; }
  [data-design="a"] .cal-thermal-layer--a { animation: none; }
  [data-design="a"] .cal-thermal-layer--b { animation: none; }
  [data-design="a"] .cal-thermal-isotherm { animation: none; opacity: 0.3; }
  [data-design="a"] .cal-pointer__isotherm { animation: none; transform: scaleX(1); }
  [data-design="a"] .cal-scope__beam  { animation: none; opacity: 0; }
  [data-design="a"] .cal-funnel__step { animation: none; }
  [data-design="a"] .cal-funnel__contact { animation: none; }
  [data-design="a"] .cal-channel      { transition: none; }
}


/* ── 14. RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 1024px) {
  [data-design="a"] .cal-hero__inner {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .cal-hero__dial-mount {
    display: flex;
    justify-content: center;
  }
  [data-design="a"] .cal-about__inner {
    grid-template-columns: 1fr;
    gap: var(--space-bezel);
  }
}

@media (max-width: 768px) {
  [data-design="a"] .cal-ambient-b {
    grid-template-columns: 1fr;
    gap: var(--space-bezel);
  }
  [data-design="a"] .cal-spec-row {
    grid-template-columns: 1fr;
    gap: var(--space-step);
  }
  [data-design="a"] .cal-hero {
    min-height: 100svh;
  }
}

@media (max-width: 560px) {
  [data-design="a"] .cal-services { padding: 56px clamp(14px,5vw,24px); }
  [data-design="a"] .cal-funnel-section { padding: 56px clamp(14px,5vw,24px); }
  [data-design="a"] .cal-about { padding: 56px clamp(14px,5vw,24px); }
  [data-design="a"] .cal-ambient-b { padding: 56px clamp(14px,5vw,24px); }
  [data-design="a"] .cal-pointer { padding: var(--space-bezel) clamp(14px,5vw,24px); }
}

@media (max-width: 390px) {
  [data-design="a"] .cal-logo { font-size: 17px; }
  [data-design="a"] .cal-hero__inner { padding-left: 12px; padding-right: 12px; }
  [data-design="a"] .cal-cta { width: 100%; justify-content: center; }
  [data-design="a"] .cal-funnel__call-btn { width: 100%; text-align: center; justify-content: center; }
}

@media (max-width: 320px) {
  [data-design="a"] .cal-header__bar { padding-left: 12px; padding-right: 12px; }
  [data-design="a"] .cal-hero__inner { padding-left: 12px; padding-right: 12px; }
}

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