/* ═══════════════════════════════════════════════════════════════
   OPO HEATING & COOLING — Design A (Atrium × HVAC)
   ALL selectors scoped [data-design="a"].dq-design
   Keyframes prefixed: atr-
   ~12–16 color tokens + thermal spine
   MOTION GATE: only transform/opacity/clip-path animated
   No layout-property animation (no width/height/top/left/padding/margin)
   Every :hover/:focus-visible transform inside @media(hover:hover)
   No scale(0)-from-nothing; entrances start scale(0.94–0.98)+opacity:0
═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
[data-design="a"] {
  /* Atrium dark-first base */
  --bg:          #08090B;
  --bg-deep:     #0E1014;
  --bg-elev:     #16181C;
  --ink:         #FAFAFA;
  --ink-soft:    #C5C8CC;
  --muted:       #7A7F86;
  --rule:        #1F2228;
  --rule-strong: #2E3138;
  --signal:      #9E8CFC;
  --signal-glow: rgba(158,140,252,.22);
  --seal:        #52C788;
  --amber:       #F0B956;
  --critical:    #E45A5A;

  /* ── HVAC thermal spine — 12 trade tokens ── */
  --thermal-temp:    0;            /* 0=cold → 1=warm; driven by dial + scroll */
  --thermal-cold:    #0E3B4A;     /* deep cool teal */
  --thermal-mid:     #1A3A4A;     /* mid thermal */
  --thermal-warm:    #4A2B0A;     /* warm amber-dark */
  --thermal-bg:      color-mix(in srgb,
                       #0E3B4A calc((1 - var(--thermal-temp)) * 100%),
                       #4A2B0A calc(var(--thermal-temp) * 100%));
  --thermal-accent:  color-mix(in srgb,
                       #1B7A8C calc((1 - var(--thermal-temp)) * 100%),
                       #C07A20 calc(var(--thermal-temp) * 100%));
  --thermal-teal:    #1B7A8C;
  --thermal-amber:   #C07A20;

  /* ── Design-A primary (required expose) ── */
  --design-a-primary: var(--thermal-accent);

  /* ── Typography ── */
  --font-display: "Inter Display","Söhne","Helvetica Neue",system-ui,sans-serif;
  --font-body:    "Inter","Söhne",system-ui,sans-serif;
  --font-mono:    "JetBrains Mono","IBM Plex Mono","SF Mono",ui-monospace,monospace;

  /* ── Spacing ── */
  --space-tick:   4px;
  --space-em:     8px;
  --space-row:    16px;
  --space-block:  24px;
  --space-pane:   40px;
  --space-bay:    72px;
  --space-deck:  112px;

  /* ── Motion ── */
  --dur-tick:    120ms;
  --dur-compile: 320ms;
  --dur-reveal:  520ms;
  --dur-ambient: 3200ms;
  --ease-snap:    cubic-bezier(.7,0,.84,0);
  --ease-compile: cubic-bezier(.22,1,.36,1);
  --ease-stream:  cubic-bezier(.4,0,.2,1);

  /* ── Radius / Shadow ── */
  --radius-tight:  4px;
  --radius-card:   8px;
  --radius-pill:   999px;
  --shadow-card:   0 0 0 1px var(--rule);
  --shadow-elev:   0 0 0 1px var(--rule-strong);
  --shadow-signal: 0 0 0 1px var(--signal),0 0 24px var(--signal-glow);
  --shadow-focus:  0 0 0 2px var(--bg),0 0 0 4px var(--signal);

  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
[data-design="a"].dq-design * { box-sizing: border-box; }

@media (prefers-color-scheme: light) {
  [data-design="a"] {
    --bg:          #FAFAFA;
    --bg-deep:     #F0F0F2;
    --bg-elev:     #FFFFFF;
    --ink:         #0A0B0D;
    --ink-soft:    #3A3D44;
    --muted:       #74787E;
    --rule:        #E0E1E4;
    --rule-strong: #C8CACE;
    --signal:      #6E56CF;
    --signal-glow: rgba(110,86,207,.18);
    --thermal-cold: #C8E8EE;
    --thermal-warm: #F5E0C0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   2. HEADER (E1)
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .atr-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .atr-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-row); max-width: 1200px; margin: 0 auto;
  padding: var(--space-row) clamp(14px,5vw,40px); min-height: 60px;
}
[data-design="a"] .atr-logo {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
}
/* Atmospheric sweep: signal hairline, 24s (H-3 ≥18s)
   Uses transform:translateX — NO background-position animation (motion gate) */
[data-design="a"] .atr-header__sweep {
  position: absolute; left: -100%; right: 0; bottom: -1px; height: 1px; opacity: .7;
  /* The gradient is 60% wide in a 200% container → translates across the bar */
  width: 200%;
  background: linear-gradient(90deg,
    transparent 0%, transparent 40%,
    var(--thermal-teal) 50%,
    transparent 60%, transparent 100%);
  animation: atr-header-sweep 24s linear infinite;
  transform-origin: left center;
}
@keyframes atr-header-sweep {
  from { transform: translateX(0%); }
  to   { transform: translateX(100%); }
}
/* Hamburger */
[data-design="a"] .atr-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--rule);
  border-radius: var(--radius-tight);
  transition: box-shadow var(--dur-tick) var(--ease-compile);
}
[data-design="a"] .atr-burger:focus-visible {
  outline: none; box-shadow: var(--shadow-focus);
}
[data-design="a"] .atr-burger__line {
  display: block; height: 1.5px; width: 100%; background: var(--ink);
  transition: transform var(--dur-tick) var(--ease-snap);
}
[data-design="a"] .atr-burger[aria-expanded="true"] .atr-burger__line:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
[data-design="a"] .atr-burger[aria-expanded="true"] .atr-burger__line:last-child {
  transform: translateY(-3px) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .atr-burger:hover { box-shadow: var(--shadow-elev); }
}
/* Drawer */
[data-design="a"] .atr-drawer { position: fixed; inset: 0; z-index: 60; }
[data-design="a"] .atr-drawer[hidden] { display: none; }
[data-design="a"] .atr-drawer__scrim {
  position: absolute; inset: 0; background: rgba(4,5,7,.75);
  opacity: 0; transition: opacity 200ms var(--ease-stream);
}
[data-design="a"] .atr-drawer__pane {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(480px,86vw); max-width: 100%;
  background: var(--bg-elev); border-left: 1px solid var(--rule-strong);
  padding: var(--space-pane) var(--space-block);
  display: flex; flex-direction: column; gap: var(--space-row);
  transform: translateX(100%); transition: transform 220ms var(--ease-compile);
}
[data-design="a"] .atr-drawer.is-open .atr-drawer__scrim { opacity: 1; }
[data-design="a"] .atr-drawer.is-open .atr-drawer__pane { transform: none; }
[data-design="a"] .atr-drawer__crumb {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
[data-design="a"] .atr-drawer__esc {
  align-self: flex-start; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .04em; color: var(--muted); background: none; border: 0;
  padding: 0; cursor: pointer;
}
[data-design="a"] .atr-navlink {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  letter-spacing: -.01em; color: var(--ink-soft); text-decoration: none;
  padding: var(--space-em) 0; border-bottom: 1px solid var(--rule);
  transition: color var(--dur-tick) var(--ease-compile);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .atr-navlink:hover { color: var(--ink); }
  [data-design="a"] .atr-navlink:hover::before {
    content: "/"; color: var(--signal); margin-right: 6px;
  }
}
[data-design="a"] .atr-drawer__divider {
  height: 1px; background: var(--rule); margin: var(--space-em) 0;
}
[data-design="a"] .atr-drawer__phone {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none;
}
[data-design="a"] .atr-drawer__phone-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--thermal-teal);
}
[data-design="a"] .atr-drawer__phone-num {
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  color: var(--ink); letter-spacing: -.02em;
}
[data-design="a"] .atr-drawer__quote {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
  color: var(--bg); background: var(--thermal-teal);
  border-radius: var(--radius-tight); padding: 11px 16px;
  text-decoration: none; margin-top: auto;
  transition: opacity var(--dur-tick) var(--ease-compile);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .atr-drawer__quote:hover { opacity: .85; }
}

/* ═══════════════════════════════════════════════════════════════
   3. HERO (one animated layer — thermal backdrop canvas + iso)
   Text opacity:1 at first paint. No directional primitive.
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .atr-hero {
  position: relative; overflow: clip;
  min-height: min(80vh, 780px); display: flex; flex-direction: column;
  justify-content: center;
  background: var(--thermal-bg);
}
/* Thermal backdrop: ONE animated layer (HERO-1). Abstract, code-rendered. */
[data-design="a"] .atr-hero__backdrop {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: clip;
}
[data-design="a"] .atr-hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .55;
}
/* Isotherm hairline: draws horizontally — NOT a directional primitive
   (it's horizontal across the hero, not pointing down/up).
   Sustained ambient loop after arrival. */
[data-design="a"] .atr-hero__iso {
  position: absolute; left: 0; right: 0;
  top: 58%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--thermal-teal) 25%,
    var(--thermal-accent) 55%, transparent 100%);
  opacity: .55;
  animation: atr-iso-drift 11s var(--ease-stream) infinite;
}
/* Second isotherm band — adds Sobel-detectable substrate structure at 1440
   (the primary iso drifts out of frame; this holds a steady structural band) */
[data-design="a"] .atr-hero__iso--b {
  top: 33%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--thermal-teal) 20%,
    transparent 50%, var(--thermal-accent) 75%, transparent 100%);
  opacity: .40;
  animation: atr-iso-drift-b 14s var(--ease-stream) infinite;
  animation-delay: -5s;
}
@keyframes atr-iso-drift {
  0%   { transform: translateY(0px); opacity: .45; }
  45%  { transform: translateY(-28px); opacity: .60; }
  100% { transform: translateY(0px); opacity: .45; }
}
@keyframes atr-iso-drift-b {
  0%   { transform: translateY(0px); opacity: .35; }
  50%  { transform: translateY(18px); opacity: .48; }
  100% { transform: translateY(0px); opacity: .35; }
}
/* Hero content */
[data-design="a"] .atr-hero__content {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: var(--space-deck) clamp(14px,5vw,40px) var(--space-bay);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: var(--space-pane);
}
/* Comfort dial wrap — bare centering container, no box/label */
[data-design="a"] .atr-hero__dial-wrap {
  display: flex; align-items: center; justify-content: center;
  min-width: 180px;
}
/* Hero text — ALL opacity:1 at first paint */
[data-design="a"] .atr-hero__text {
  display: flex; flex-direction: column; gap: var(--space-block);
  max-width: 640px;
}
[data-design="a"] .atr-hero__headline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px,5.5vw,56px); line-height: 1.05;
  letter-spacing: -.02em; color: var(--ink);
  margin: 0;
  opacity: 1; /* explicit — NEVER 0 at first paint */
}
[data-design="a"] .atr-hero__subtitle {
  font-family: var(--font-mono); font-size: clamp(13px,1.8vw,16px);
  color: var(--muted); letter-spacing: .03em; margin: 0;
  opacity: 1;
}
[data-design="a"] .atr-hero__proof {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--thermal-teal); margin: 0;
  opacity: 1;
}
/* Hero CTAs row */
[data-design="a"] .atr-hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--space-row); align-items: center;
}
/* Mono ops note */
[data-design="a"] .atr-hero__mono-note {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--muted); margin: 0;
  opacity: 1;
}
[data-design="a"] .atr-hero__sep { color: var(--rule-strong); }

/* ═══════════════════════════════════════════════════════════════
   4. CTA (E2 — emergency tel: dominant + secondary quote anchor)
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .atr-cta {
  position: relative; display: inline-flex; align-items: center;
  gap: var(--space-em); font-family: var(--font-display); font-weight: 500;
  font-size: 15px; letter-spacing: -.01em; text-decoration: none;
  padding: 12px 20px; border-radius: var(--radius-tight);
  box-shadow: var(--shadow-card); will-change: transform;
  min-height: 48px; /* ≥44px tap target */
}
[data-design="a"] .atr-cta--emergency {
  color: var(--bg); background: var(--thermal-teal);
  font-size: clamp(14px,2.2vw,17px);
  animation: atr-cta-breath 4.8s var(--ease-stream) infinite;
}
@keyframes atr-cta-breath {
  0%,100% { box-shadow: 0 0 0 1px var(--rule), 0 0 0 0 rgba(27,122,140,.3); }
  50%      { box-shadow: 0 0 0 1px var(--rule), 0 0 22px 0 rgba(27,122,140,.3); }
}
[data-design="a"] .atr-cta--secondary {
  color: var(--ink-soft); background: var(--bg-elev);
  border: 1px solid var(--rule);
}
[data-design="a"] .atr-cta__hair {
  position: absolute; right: 10px; bottom: 6px;
  height: 1px; width: 34px;
  transform: scaleX(0); transform-origin: right;
  background: var(--signal);
  transition: transform var(--dur-reveal) var(--ease-compile);
}
[data-design="a"] .atr-cta__arrow {
  transition: transform var(--dur-tick) var(--ease-compile);
  flex-shrink: 0;
}
[data-design="a"] .atr-cta:focus-visible {
  outline: none; box-shadow: var(--shadow-focus);
}
[data-design="a"] .atr-cta:focus-visible .atr-cta__hair { transform: scaleX(1); }
[data-design="a"] .atr-cta:active {
  transform: translateY(1px); box-shadow: var(--shadow-signal);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .atr-cta--emergency:hover {
    transform: translateY(-1px); opacity: .92;
    animation-play-state: paused;
  }
  [data-design="a"] .atr-cta--secondary:hover {
    transform: translateY(-1px); box-shadow: var(--shadow-elev);
  }
  [data-design="a"] .atr-cta:hover .atr-cta__hair { transform: scaleX(1); }
  [data-design="a"] .atr-cta:hover .atr-cta__arrow { transform: translateX(3px); }
}

/* ═══════════════════════════════════════════════════════════════
   5. POINTER (E6 — thermal isotherm wayfinder)
   Computed opacity:1, height ≥8px. Sits immediately before #funnel.
   NOT a button. No directional arrows inside — label is typographic.
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .atr-pointer {
  position: relative; overflow: clip;
  padding: clamp(32px,6vw,56px) clamp(14px,5vw,40px);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-row);
  background: var(--bg-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  /* opacity:1 — never hidden/gate */
  opacity: 1;
  min-height: 80px; /* ≥8px enforced at layout level */
}
/* Thermal isotherm drawing across */
[data-design="a"] .atr-pointer__iso {
  height: 1px; width: 100%; max-width: 600px;
  background: linear-gradient(90deg,
    transparent 0%, var(--thermal-teal) 30%,
    var(--thermal-accent) 70%, transparent 100%);
  transform: scaleX(0.15); transform-origin: left;
  animation: atr-ptr-draw 3.2s var(--ease-compile) infinite;
}
@keyframes atr-ptr-draw {
  0%   { transform: scaleX(0.15); opacity: .4; }
  55%  { transform: scaleX(1);    opacity: .75; }
  100% { transform: scaleX(0.15); opacity: .4; }
}
/* Warm gradient wash descending toward funnel */
[data-design="a"] .atr-pointer__warm {
  height: 2px; width: 60%; max-width: 320px;
  background: linear-gradient(90deg,
    var(--thermal-cold), var(--thermal-amber));
  opacity: .35;
  animation: atr-ptr-warm 3.2s var(--ease-pulse) infinite;
  animation-delay: .6s;
}
@keyframes atr-ptr-warm {
  0%,100% { opacity: .2; transform: scaleX(0.7); }
  50%     { opacity: .5; transform: scaleX(1); }
}
[data-design="a"] .atr-pointer__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .atr-pointer__iso,
  [data-design="a"] .atr-pointer__warm {
    animation: none;
    transform: scaleX(1); opacity: .4;
  }
}

/* ═══════════════════════════════════════════════════════════════
   6. FUNNEL (tap-qualify)
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .atr-funnel {
  background: var(--bg-deep);
  padding: var(--space-bay) clamp(14px,5vw,40px);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .atr-funnel__inner {
  max-width: 1200px; margin: 0 auto;
}
[data-design="a"] .atr-funnel__panel {
  max-width: 600px;
}
/* Panel shared pattern */
[data-design="a"] .atr-panel {
  background: var(--bg-deep); border: 1px solid var(--rule);
  border-radius: var(--radius-tight); padding: var(--space-block);
}
[data-design="a"] .atr-panel__meta {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--muted); margin-bottom: var(--space-em);
}
[data-design="a"] .atr-panel__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px,4vw,28px); line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 var(--space-tick);
}
[data-design="a"] .atr-panel__lead {
  color: var(--muted); font-size: 15px; line-height: 1.5;
  margin: 0 0 var(--space-block);
}
/* Funnel steps */
[data-design="a"] .atr-funnel__step {
  margin-bottom: var(--space-block);
  transition: opacity var(--dur-compile) var(--ease-compile);
}
[data-design="a"] .atr-funnel__step--hidden {
  display: none;
}
[data-design="a"] .atr-funnel__step-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-em);
}
[data-design="a"] .atr-funnel__step-num { color: var(--signal); margin-right: 6px; }
[data-design="a"] .atr-funnel__opts {
  display: flex; flex-wrap: wrap; gap: var(--space-em);
}
/* Funnel option buttons — tap targets ≥44×44px */
[data-design="a"] .atr-funnel__opt {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--ink-soft); background: var(--bg-elev);
  border: 1px solid var(--rule); border-radius: var(--radius-tight);
  padding: 11px 18px; min-height: 44px; min-width: 44px;
  cursor: pointer;
  transition: border-color var(--dur-tick) var(--ease-compile),
              color var(--dur-tick) var(--ease-compile),
              background var(--dur-tick) var(--ease-compile);
}
[data-design="a"] .atr-funnel__opt[aria-pressed="true"] {
  border-color: var(--thermal-teal); color: var(--ink);
  background: color-mix(in srgb, var(--thermal-teal) 12%, var(--bg-elev));
}
[data-design="a"] .atr-funnel__opt:focus-visible {
  outline: none; box-shadow: var(--shadow-focus);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .atr-funnel__opt:hover {
    border-color: var(--rule-strong); color: var(--ink);
    transform: translateY(-1px);
  }
}
/* Funnel result */
[data-design="a"] .atr-funnel__result {
  margin-top: var(--space-block); border-top: 1px solid var(--rule);
  padding-top: var(--space-row);
}
[data-design="a"] .atr-funnel__result-copy {
  font-size: 15px; color: var(--ink-soft); margin: 0 0 var(--space-row);
}
[data-design="a"] .atr-funnel__call {
  display: inline-flex; align-items: center; gap: var(--space-em);
  min-height: 48px;
}

/* ═══════════════════════════════════════════════════════════════
   7. AMBIENT SEGMENT A (E3 — live console)
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .atr-ambient-a {
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-bay) clamp(14px,5vw,40px);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .atr-a__head {
  display: flex; align-items: center; gap: var(--space-row);
  flex-wrap: wrap; margin-bottom: var(--space-block);
}
[data-design="a"] .atr-a__pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--thermal-teal); border: 1px solid var(--thermal-teal);
  border-radius: var(--radius-pill); padding: 3px 10px;
}
[data-design="a"] .atr-a__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--thermal-teal);
  animation: atr-signal-pulse 3.2s var(--ease-stream) infinite;
}
@keyframes atr-signal-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(27,122,140,.4); }
  50%     { box-shadow: 0 0 14px 3px rgba(27,122,140,.4); }
}
[data-design="a"] .atr-a__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px,4.5vw,32px); line-height: 1.15;
  letter-spacing: -.02em; color: var(--ink); margin: 0;
}
[data-design="a"] .atr-a__console {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: clamp(13px,3.4vw,17px);
  color: var(--ink-soft); background: var(--bg-deep);
  border: 1px solid var(--rule); border-radius: var(--radius-tight);
  padding: var(--space-row) var(--space-block); overflow: clip;
}
[data-design="a"] .atr-a__prompt { color: var(--muted); }
[data-design="a"] .atr-a__value.is-compiled {
  animation: atr-compile var(--dur-compile) var(--ease-compile) both;
}
@keyframes atr-compile {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0);   }
}
[data-design="a"] .atr-a__cursor {
  color: var(--thermal-teal);
  animation: atr-blink 1.06s steps(1,end) infinite;
}
@keyframes atr-blink { 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
[data-design="a"] .atr-a__note {
  max-width: 60ch; margin: var(--space-block) 0 0;
  color: var(--muted); font-size: 15px; line-height: 1.55;
}

/* Services grid */
[data-design="a"] .atr-services {
  margin-top: var(--space-block);
}
[data-design="a"] .atr-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px,100%),1fr));
  gap: var(--space-row);
}
[data-design="a"] .atr-service-card {
  background: var(--bg-elev); border: 1px solid var(--rule);
  border-radius: var(--radius-tight);
  padding: var(--space-block) var(--space-block) var(--space-block);
  display: flex; flex-direction: column; gap: var(--space-em);
  opacity: 0.92;
  transform: translateY(4px);
  transition: opacity var(--dur-reveal) var(--ease-compile),
              transform var(--dur-reveal) var(--ease-compile);
}
[data-design="a"] .atr-service-card.is-visible {
  opacity: 1; transform: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .atr-service-card:hover {
    border-color: var(--rule-strong); transform: translateY(-2px);
  }
}
[data-design="a"] .atr-service-card__icon {
  font-family: var(--font-mono); font-size: 16px;
  color: var(--thermal-teal);
}
[data-design="a"] .atr-service-card__name {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: -.01em; color: var(--ink); margin: 0;
}
[data-design="a"] .atr-service-card__desc {
  font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   8. AMBIENT SEGMENT B (E4 — HVAC schematic)
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .atr-ambient-b {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-pane);
  align-items: center; max-width: 1200px; margin: 0 auto;
  padding: var(--space-bay) clamp(14px,5vw,40px);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .atr-b__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px,4.5vw,32px); line-height: 1.15;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 var(--space-row);
}
[data-design="a"] .atr-b__body {
  max-width: 54ch; color: var(--muted); font-size: 15px; line-height: 1.55;
  margin: 0;
}
[data-design="a"] .atr-inline-phone {
  color: var(--thermal-teal); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .atr-inline-phone:hover { text-decoration: underline; }
}
[data-design="a"] .atr-b__schematic {
  width: 100%; max-width: 100%; height: auto;
  background: var(--bg-deep); border: 1px solid var(--rule);
  border-radius: var(--radius-card); padding: 8px;
}
[data-design="a"] .atr-b__rules path {
  fill: none; stroke: var(--rule-strong); stroke-width: 1;
}
/* Signal trace — stroke-dashoffset animation (not layout prop) */
[data-design="a"] .atr-b__trace {
  fill: none; stroke: var(--thermal-teal); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 6 600;
  animation: atr-b-flow 16s linear infinite;
}
@keyframes atr-b-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -606; }
}
[data-design="a"] .atr-b__node { fill: var(--ink-soft); }
[data-design="a"] .atr-b__node--live {
  fill: var(--thermal-teal);
  animation: atr-signal-pulse 3.2s var(--ease-stream) infinite;
}
[data-design="a"] .atr-b__label {
  fill: var(--muted); font-family: var(--font-mono);
  font-size: 8px; letter-spacing: .06em;
}
[data-design="a"] .atr-ambient-b.is-paused .atr-b__trace,
[data-design="a"] .atr-ambient-b.is-paused .atr-b__node--live {
  animation-play-state: paused;
}

/* ═══════════════════════════════════════════════════════════════
   9. SERVICE AREA
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .atr-area {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-bay) clamp(14px,5vw,40px);
}
[data-design="a"] .atr-area__inner {
  max-width: 1200px; margin: 0 auto;
}
[data-design="a"] .atr-area__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px,4vw,28px); line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink); margin: var(--space-em) 0 var(--space-block);
}
[data-design="a"] .atr-area__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-em);
}
[data-design="a"] .atr-area__list li {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
  color: var(--muted); background: var(--bg-deep);
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  padding: 4px 12px;
}

/* ═══════════════════════════════════════════════════════════════
   10. FOOTER
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .atr-footer {
  border-top: 1px solid var(--rule);
  padding: var(--space-block) clamp(14px,5vw,40px);
}
[data-design="a"] .atr-footer__strip {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--space-em) var(--space-row);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--muted); align-items: center;
}
[data-design="a"] .atr-footer__sep { color: var(--rule-strong); }
[data-design="a"] .atr-footer__phone {
  color: var(--thermal-teal); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .atr-footer__phone:hover { text-decoration: underline; }
}

/* ═══════════════════════════════════════════════════════════════
   11. SCROLL-LINKED THERMAL WARMING (TRIAD-2)
   The --thermal-temp token warms as visitor scrolls toward #funnel.
   Driven by JS IntersectionObserver + scroll listener.
   The thermal-bg and thermal-accent update in real time.
   Also warms hero gradient.
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .atr-hero {
  /* thermal-bg is a CSS property so it auto-updates when --thermal-temp changes */
  background: linear-gradient(
    160deg,
    color-mix(in srgb, #0E3B4A calc((1 - var(--thermal-temp)) * 100%), #4A2B0A calc(var(--thermal-temp) * 100%)) 0%,
    var(--bg) 100%
  );
}
[data-design="a"] .atr-funnel {
  /* Funnel is the warm end of the scroll-warming spine */
  background: color-mix(in srgb,
    var(--bg-deep) 85%,
    color-mix(in srgb, #0E3B4A calc((1 - var(--thermal-temp)) * 100%), #4A2B0A calc(var(--thermal-temp) * 100%)) 15%
  );
}

/* ═══════════════════════════════════════════════════════════════
   12. REDUCED-MOTION FALLBACKS
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .atr-header__sweep { animation: none; transform: translateX(20%); }
  [data-design="a"] .atr-drawer__pane,
  [data-design="a"] .atr-drawer__scrim { transition: none; }
  [data-design="a"] .atr-cta--emergency { animation: none; }
  [data-design="a"] .atr-cta,
  [data-design="a"] .atr-cta__hair,
  [data-design="a"] .atr-cta__arrow { transition: none; }
  [data-design="a"] .atr-hero__iso,
  [data-design="a"] .atr-hero__iso--b { animation: none; opacity: .4; transform: none; }
  [data-design="a"] .atr-a__dot,
  [data-design="a"] .atr-a__cursor { animation: none; opacity: 1; }
  [data-design="a"] .atr-a__value.is-compiled { animation: none; clip-path: none; }
  [data-design="a"] .atr-b__trace { animation: none; stroke-dasharray: none; }
  [data-design="a"] .atr-b__node--live { animation: none; }
  [data-design="a"] .atr-service-card {
    opacity: 1; transform: none; transition: none;
  }
  [data-design="a"] .atr-funnel__opt { transition: none; }
  [data-design="a"] .atr-pointer__iso,
  [data-design="a"] .atr-pointer__warm { animation: none; opacity: .5; transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════════
   13. RESPONSIVE — mobile-first
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-design="a"] .atr-hero__content {
    grid-template-columns: 1fr;
    padding-top: var(--space-bay);
  }
  [data-design="a"] .atr-hero__dial-wrap {
    order: -1; /* dial above text on mobile for visual anchor */
    min-width: unset;
  }
  [data-design="a"] .atr-ambient-b {
    grid-template-columns: 1fr; gap: var(--space-block);
  }
}
@media (max-width: 560px) {
  [data-design="a"] .atr-header__bar { min-height: 54px; }
  [data-design="a"] .atr-navlink { font-size: 20px; }
  [data-design="a"] .atr-hero__ctas { flex-direction: column; align-items: stretch; }
  [data-design="a"] .atr-cta { width: 100%; justify-content: center; }
  [data-design="a"] .atr-funnel__opts { flex-direction: column; }
  [data-design="a"] .atr-funnel__opt { width: 100%; }
}
@media (max-width: 390px) {
  [data-design="a"] .atr-logo { font-size: 15px; }
  [data-design="a"] .atr-drawer__pane { width: 100vw; }
}
@media (max-width: 320px) {
  [data-design="a"] .atr-header__bar { padding-left: 12px; padding-right: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   14. MANDATORY MOBILE NO-HSCROLL BLOCK
   Scoped to .dq-design as required by contract
═══════════════════════════════════════════════════════════════ */
[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;
}

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