/* ══════════════════════════════════════════════════════════════════════════
   McKinney's H&A Services — Design A (Calibration / HVAC)
   Slot: [data-design="a"].dq-design   Design: calibration (remapped from [data-design="a"])
   ALL selectors scoped to [data-design="a"] — ZERO calibration-id selectors remain.
   MOTION GATE: only transform/opacity/clip-path — NO layout props animated.
   Every :hover/:focus-visible transform inside @media(hover:hover) and (pointer:fine).
   No scale(0)-from-nothing. No ease-in on entrances.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens (HVAC thermal layer added on top of calibration base) ── */
[data-design="a"] {
  /* 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 tokens — scroll-driven cool→warm */
  --thermal-temp: 0;            /* 0=cold / 1=warm — driven by dial + scroll */
  --thermal-cool: #1A4A6B;      /* deep teal-blue */
  --thermal-warm: #C47A1A;      /* amber-warm */
  --thermal-bg: color-mix(in srgb, var(--thermal-cool) calc((1 - var(--thermal-temp)) * 100%), var(--thermal-warm) calc(var(--thermal-temp) * 100%));
  --thermal-accent: color-mix(in srgb, var(--phosphor) calc((1 - var(--thermal-temp)) * 100%), var(--amber) calc(var(--thermal-temp) * 100%));

  /* Comfort dial theming (--cd-* vars) */
  --cd-face: var(--face);
  --cd-ring-cool: var(--thermal-cool);
  --cd-ring-warm: var(--thermal-warm);
  --cd-needle: var(--critical);
  --cd-readout: var(--phosphor);
  --cd-tick: var(--muted);

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

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

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

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

@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 no-hscroll guard ── */
[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);
}
[data-design="a"] .cal-silk--ch { color: var(--ink-soft); }
[data-design="a"] .cal-silk--ptr { color: var(--thermal-accent); letter-spacing: .2em; }

[data-design="a"] .cal-readout {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
[data-design="a"] .cal-readout--sm { font-size: 22px; }
[data-design="a"] .cal-readout--live { color: var(--phosphor); }
[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); }

/* ── 3. E1 — Header ── */
[data-design="a"] .cal-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--face);
  border-bottom: 1px solid var(--rule);
}
[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;
}
[data-design="a"] .cal-logo__mark { color: var(--ink); }

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

/* Hamburger */
[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);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-burger:hover { box-shadow: var(--shadow-bezel); }
}

/* 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;
  min-height: 44px;
  min-width: 44px;
}
[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;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-navlink:hover { color: var(--signal-blue); }
}
[data-design="a"] .cal-drawer__phone-row {
  margin-top: var(--space-em);
  padding-top: var(--space-em);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .cal-drawer__tel {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  min-height: 44px;
  display: flex;
  align-items: center;
}

@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; }
}
@media (max-width: 560px) {
  [data-design="a"] .cal-header__bar { min-height: 52px; }
  [data-design="a"] .cal-navlink { font-size: 19px; }
}
@media (max-width: 390px) {
  [data-design="a"] .cal-logo { font-size: 17px; }
}
@media (max-width: 320px) {
  [data-design="a"] .cal-header__bar { padding-left: 12px; padding-right: 12px; }
}

/* ── 4. E3 / HERO — HVAC thermal front panel ── */
[data-design="a"] .cal-hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;               /* HARD: text layer paints above all backdrop layers */
  background: var(--face);
}

/* ONE animated thermal backdrop layer — abstract, GPU-cheap, perceptible ambient */
[data-design="a"] .cal-hero__thermal {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Thermal gradient field — the cool→warm substrate at first paint */
[data-design="a"] .cal-thermal__field {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--thermal-cool) 85%, transparent) 0%,
    color-mix(in srgb, var(--thermal-cool) 55%, var(--face)) 40%,
    color-mix(in srgb, var(--thermal-warm) 18%, var(--face)) 100%
  );
  opacity: .28;
  animation: a-thermal-breathe 8s var(--ease-drift) infinite alternate;
}
@keyframes a-thermal-breathe {
  from { opacity: .22; }
  to   { opacity: .34; }
}

/* Isotherm lines — three slow-sweeping gradient lines (the "drawn-in isotherm" pattern)
   Reveal via clip-path scaleX (GPU only) — opacity:1 at rest, NEVER opacity:0 under hero */
[data-design="a"] .cal-thermal__iso {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--thermal-cool) 60%, transparent) 20%,
    color-mix(in srgb, var(--thermal-cool) 80%, transparent) 50%,
    color-mix(in srgb, var(--thermal-warm) 40%, transparent) 80%,
    transparent 100%
  );
  opacity: .45;           /* opacity:1-class — never 0 at rest */
  clip-path: inset(0 100% 0 0);   /* initially clipped — reveal via clip-path, not opacity */
  animation: a-iso-draw var(--dur-sweep) var(--ease-trace) forwards,
             a-iso-drift 9s var(--ease-drift) 1.4s infinite alternate;
}
@keyframes a-iso-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes a-iso-drift {
  from { opacity: .35; }
  to   { opacity: .55; }
}
[data-design="a"] .cal-thermal__iso--1 { top: 30%; animation-delay: 0s, 1.4s; }
[data-design="a"] .cal-thermal__iso--2 { top: 52%; height: 2px; animation-delay: .25s, 2.1s; opacity: .3; }
[data-design="a"] .cal-thermal__iso--3 { top: 72%; animation-delay: .5s, 3s; }

/* Hero text content — z-index above thermal backdrop */
[data-design="a"] .cal-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-bay) clamp(14px, 5vw, 48px);
}
[data-design="a"] .cal-hero__panel {
  max-width: 720px;
}
[data-design="a"] .cal-hero__silk-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-em);
  padding-bottom: var(--space-cell);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-bezel);
}
[data-design="a"] .cal-hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--space-cell) 0;
  opacity: 1; /* HARD: opacity:1 at first paint — never reveal-gated */
}
[data-design="a"] .cal-hero__subtitle {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--ink-soft);
  margin: 0 0 var(--space-em) 0;
  max-width: 58ch;
  opacity: 1; /* HARD: opacity:1 at first paint */
}
[data-design="a"] .cal-hero__proof {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 var(--space-panel) 0;
  opacity: 1; /* HARD: opacity:1 at first paint */
}
[data-design="a"] .cal-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-cell);
  margin-bottom: var(--space-panel);
}

/* Dial mount — bare centering container only, no card/box/border */
[data-design="a"] .cal-hero__dial-mount {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: var(--space-bezel);
  max-width: 240px;
}

/* ── 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;
}
@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);
}
[data-design="a"] .cal-cta__label { 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: opacity:1 at all times */
}
[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); }
}

/* Small CTA variant (footer) */
[data-design="a"] .cal-cta--sm { padding: 10px 16px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  [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; }
}
@media (max-width: 390px) {
  [data-design="a"] .cal-cta { width: 100%; justify-content: center; }
}

/* ── 6. E6 — Pointer (thermal-flow register) ── */
/* Pointer sits immediately before #quote — 0 siblings between */
[data-design="a"] .cal-pointer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-em);
  padding: var(--space-panel) clamp(14px, 5vw, 48px);
  max-width: 1280px;
  margin: 0 auto;
  /* HARD: visible — computed opacity:1, height ≥ 8px */
  opacity: 1;
  min-height: 48px;
}
/* Isotherm-draw pointer line — thermal-flow register (scaleX for GPU) */
[data-design="a"] .cal-pointer__iso {
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, var(--thermal-cool), var(--thermal-warm));
  transform: scaleX(0);
  transform-origin: left center;
  animation: a-ptr-draw 1.2s var(--ease-trace) 0.2s forwards,
             a-ptr-pulse 4s var(--ease-drift) 1.5s infinite alternate;
}
@keyframes a-ptr-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes a-ptr-pulse {
  from { opacity: .6; }
  to   { opacity: 1; }
}
[data-design="a"] .cal-pointer__label {
  opacity: 1; /* HARD: never opacity:0 */
}

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .cal-pointer__iso {
    animation: none;
    transform: scaleX(1);
  }
}

/* ── 7. Tap-qualify funnel ── */
[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: 1280px;
  margin: 0 auto;
}
[data-design="a"] .cal-intake {
  max-width: 620px;
}
[data-design="a"] .cal-funnel__step[hidden] { display: none; }
[data-design="a"] .cal-funnel__step {
  margin-top: var(--space-bezel);
  animation: a-step-in var(--dur-trace) var(--ease-trace) both;
}
@keyframes a-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
[data-design="a"] .cal-funnel__q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0 0 var(--space-cell) 0;
}
[data-design="a"] .cal-funnel__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-em);
}
[data-design="a"] .cal-funnel__opt {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  padding: 12px 18px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: var(--shadow-bezel);
  transition: color var(--dur-snap) var(--ease-damp),
              box-shadow var(--dur-snap) var(--ease-damp);
  opacity: 1; /* HARD: funnel-option buttons must be opacity:1 at rest */
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-funnel__opt:hover {
    color: var(--ink);
    box-shadow: var(--shadow-bezel), inset 0 2px 0 var(--signal-blue);
  }
}
[data-design="a"] .cal-funnel__opt:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
}
[data-design="a"] .cal-funnel__opt:active {
  box-shadow: var(--shadow-press);
}

/* Step 4 — contact action */
[data-design="a"] .cal-funnel__spec {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .06em;
  margin-bottom: var(--space-cell);
  min-height: var(--space-cell);
}
[data-design="a"] .cal-funnel__urgent[hidden],
[data-design="a"] .cal-funnel__planning[hidden] { display: none; }
[data-design="a"] .cal-funnel__action-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 var(--space-em) 0;
  opacity: 1;
}
[data-design="a"] .cal-funnel__call {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-step);
  text-decoration: none;
  background: var(--ink);
  color: var(--face);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pin);
  padding: var(--space-cell) var(--space-bezel);
  min-height: 56px;
  justify-content: center;
  margin-bottom: var(--space-em);
  transition: box-shadow var(--dur-snap) var(--ease-damp);
}
[data-design="a"] .cal-funnel__call .cal-silk {
  color: var(--phosphor);
  font-size: 11px;
}
[data-design="a"] .cal-funnel__phone {
  font-family: var(--font-mono);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--face);
}
[data-design="a"] .cal-funnel__call--plan { background: var(--face-deep); color: var(--ink); border-color: var(--rule); }
[data-design="a"] .cal-funnel__call--plan .cal-funnel__phone { color: var(--ink); }
[data-design="a"] .cal-funnel__call--plan .cal-silk { color: var(--phosphor); }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-funnel__call:hover { box-shadow: 0 0 0 2px var(--signal-blue); }
}
[data-design="a"] .cal-funnel__micro {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
  margin: 0 0 var(--space-cell) 0;
}
[data-design="a"] .cal-funnel__restart {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: 0;
  padding: var(--space-em) 0;
  cursor: pointer;
  text-decoration: underline;
  min-height: 44px;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-funnel__restart:hover { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .cal-funnel__step { animation: none; }
  [data-design="a"] .cal-funnel__opt { transition: none; }
  [data-design="a"] .cal-funnel__call { transition: none; }
}

/* ── 8. Services section ── */
[data-design="a"] .cal-services {
  padding: var(--space-rack) clamp(14px, 5vw, 48px);
}
[data-design="a"] .cal-services__inner {
  max-width: 1280px;
  margin: 0 auto;
}
[data-design="a"] .cal-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
  margin-bottom: var(--space-panel);
  padding-bottom: var(--space-cell);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .cal-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
[data-design="a"] .cal-channels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-cell);
}
[data-design="a"] .cal-channel { padding: var(--space-bezel); }
[data-design="a"] .cal-channel .cal-silk--ch { display: block; margin-bottom: var(--space-cell); }
[data-design="a"] .cal-channel__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-channel {
    transition: box-shadow var(--dur-damp) var(--ease-damp);
  }
  [data-design="a"] .cal-channel:hover {
    box-shadow: var(--shadow-bezel), inset 0 2px 0 var(--signal-blue);
  }
}

/* ── 9. E4 — Ambient-B (performance scope / The Trace) ── */
[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__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; }

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .cal-scope__beam { animation: none; opacity: 0; }
}
@media (max-width: 768px) {
  [data-design="a"] .cal-ambient-b { grid-template-columns: 1fr; gap: var(--space-bezel); }
}

/* ── 10. About / spec sheet ── */
[data-design="a"] .cal-about {
  background: var(--face-deep);
  border-top: 1px solid var(--rule);
  padding: var(--space-rack) clamp(14px, 5vw, 48px);
}
[data-design="a"] .cal-about__inner {
  max-width: 1280px;
  margin: 0 auto;
}
[data-design="a"] .cal-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--space-panel);
  align-items: start;
}
[data-design="a"] .cal-about__narrative p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 0 var(--space-cell) 0;
}
[data-design="a"] .cal-about__spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
  background: var(--face);
  border: 1px solid var(--rule);
  padding: var(--space-bezel);
}
[data-design="a"] .cal-spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-cell);
  align-items: baseline;
  padding-bottom: var(--space-em);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .cal-spec-row:last-child { border-bottom: 0; padding-bottom: 0; }
[data-design="a"] .cal-spec-val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: .02em;
}
[data-design="a"] .cal-spec-link {
  color: var(--signal-blue);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-spec-link:hover { text-decoration: underline; }
}
@media (max-width: 768px) {
  [data-design="a"] .cal-about__grid { grid-template-columns: 1fr; gap: var(--space-bezel); }
}

/* ── 11. Footer — Serial Plate ── */
[data-design="a"] .cal-footer {
  background: var(--face);
  border-top: 2px solid var(--rule);
  padding: var(--space-rack) clamp(14px, 5vw, 48px);
}
[data-design="a"] .cal-footer__plate {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-panel);
  align-items: start;
}
[data-design="a"] .cal-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-step);
}
[data-design="a"] .cal-footer__brand .cal-logo__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}
[data-design="a"] .cal-footer__data {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
}
[data-design="a"] .cal-footer__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
  align-items: flex-start;
  grid-column: span 1;
}
[data-design="a"] .cal-footer__tel {
  font-family: var(--font-mono);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .cal-footer__tel:hover { color: var(--signal-blue); }
}
[data-design="a"] .cal-footer__serial {
  grid-column: span 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-bezel);
  justify-content: space-between;
  padding-top: var(--space-panel);
  border-top: 1px solid var(--rule);
  margin-top: var(--space-panel);
}
[data-design="a"] .cal-footer__barcode {
  grid-column: span 2;
}
[data-design="a"] .cal-barcode {
  height: 24px;
  background: repeating-linear-gradient(
    90deg,
    var(--rule) 0px,
    var(--rule) 2px,
    transparent 2px,
    transparent 6px,
    var(--rule) 6px,
    var(--rule) 7px,
    transparent 7px,
    transparent 12px,
    var(--rule) 12px,
    var(--rule) 15px,
    transparent 15px,
    transparent 19px,
    var(--rule) 19px,
    var(--rule) 20px,
    transparent 20px,
    transparent 24px
  );
  opacity: .4;
}
@media (max-width: 768px) {
  [data-design="a"] .cal-footer__plate { grid-template-columns: 1fr; }
  [data-design="a"] .cal-footer__serial { grid-column: span 1; }
  [data-design="a"] .cal-footer__barcode { grid-column: span 1; }
}

/* ── 12. Scroll-linked thermal warming (TRIAD-2 premium scroll motion) ── */
/* --thermal-temp is driven by JS (dial + scroll).
   Background of hero and accent elements key off --thermal-bg/--thermal-accent.
   The gradient field in the hero shifts warm as --thermal-temp increases.
   This is the premium scroll-driven motion — not a fade-in-on-scroll. */
[data-design="a"] .cal-thermal__field {
  /* The background uses color-mix(thermal-temp) — updates on every scroll rAF tick */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--thermal-cool) calc((1 - var(--thermal-temp)) * 85%), transparent) 0%,
    color-mix(in srgb, var(--thermal-cool) calc((1 - var(--thermal-temp)) * 55%), var(--face)) 40%,
    color-mix(in srgb, var(--thermal-warm) calc(var(--thermal-temp) * 28%), var(--face)) 100%
  );
}
[data-design="a"] .cal-hero__headline {
  /* Headline accent: phosphor→amber as page warms */
  text-shadow: 0 0 0 transparent; /* no shadow — just ensure GPU layer */
}

/* ── 13. Thermal accent on funnel call ── */
[data-design="a"] .cal-funnel__call {
  border-color: color-mix(in srgb, var(--ink) 80%, var(--thermal-warm) 20%);
}

/* ── 14. Section scroll-reveal (premium scroll — transform-based, not opacity gate) ── */
[data-design="a"] .cal-services,
[data-design="a"] .cal-ambient-b,
[data-design="a"] .cal-about {
  /* Sections start slightly translated — JS drives translateY via class toggle */
}
[data-design="a"] .js-reveal {
  transform: translateY(20px);
  opacity: .92;
  transition: transform 600ms var(--ease-trace), opacity 400ms var(--ease-trace);
}
[data-design="a"] .js-reveal.is-visible {
  transform: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .js-reveal,
  [data-design="a"] .js-reveal.is-visible {
    transform: none;
    opacity: 1;
    transition: none;
  }
  [data-design="a"] .cal-thermal__field { animation: none; }
  [data-design="a"] .cal-thermal__iso { animation: none; transform: scaleX(1); }
  [data-design="a"] .cal-pointer__iso { animation: none; transform: scaleX(1); }
}

/* ── 15. Hero thermal field re-renders on --thermal-temp change ── */
/* color-mix() re-evaluates when the custom property changes — scroll/dial updates
   --thermal-temp on :root inside [data-design="a"], driving the gradient shift. */

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