/* ═══════════════════════════════════════════════════════════════════
   The Prineville Handyman — Design A (Dispatch)
   Slot-scoped: ALL selectors under [data-design="a"].dq-design
   Zero [data-design="a"].dq-design selectors remain.
   Exposes --design-a-primary on the root block.
   ~1000 lines target; GPU-only animations (transform/opacity/clip-path).
═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Public+Sans:wght@400;500;600&family=VT323&display=swap');

/* ══════════════════════════════════════════════
   TOKEN BLOCK — [data-design="a"].dq-design
   Exposes --design-a-primary (the slot primary)
══════════════════════════════════════════════ */
[data-design="a"] {
  --console:        #DDDFE2;
  --console-deep:   #C8CBCF;
  --screen:         #0B0E13;
  --ink:            #0A0D12;
  --ink-soft:       #3D424A;
  --muted:          #6E7480;
  --rule:           #1B1E25;
  --phosphor:       #3FB573;
  --phosphor-bright:#52D78A;
  --phosphor-a:     #3FB573;   /* slot alias for pointer SVG */
  --signal-amber:   #D89426;
  --channel-red:    #D03B2A;
  --route-blue:     #2A6BC2;
  --seal:           #3FB573;
  --critical:       #A0231A;

  --design-a-primary: var(--channel-red);

  --font-display:  "Roboto Condensed","Bebas Neue","Oswald",sans-serif;
  --font-body:     "Public Sans","Söhne",system-ui,sans-serif;
  --font-readout:  "VT323","IBM Plex Mono","JetBrains Mono",monospace;
  --font-stencil:  "DIN Next Stencil","Stencil Std",sans-serif;

  --space-em:       8px;
  --space-channel:  16px;
  --space-bay:      24px;
  --space-rack:     48px;
  --space-room:     80px;
  --space-floor:    144px;

  --dur-tick:   100ms;
  --dur-snap:   200ms;
  --dur-strobe: 500ms;
  --dur-pulse:  5000ms;

  --ease-snap:   cubic-bezier(.7,0,.84,0);
  --ease-roll:   cubic-bezier(.34,.04,.26,1);
  --ease-strobe: cubic-bezier(.45,.05,.55,.95);
  --ease-out:    cubic-bezier(.22,.61,.36,1);

  --radius-zero:  0;
  --radius-pin:   2px;
  --radius-lamp:  50%;
  --radius-bezel: 4px;

  --glow: 0 0 6px rgba(63,181,115,.55);
  --shadow-bezel: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.4);
  --shadow-press: inset 0 2px 0 rgba(0,0,0,.32);

  --content-max: 1280px;
  --gutter:      clamp(16px, 4vw, 48px);

  box-sizing: border-box;
  font-family: var(--font-body);
  background: var(--console);
  color: var(--ink);
}

/* Dark mode tokens */
@media (prefers-color-scheme: dark) {
  [data-design="a"] {
    --console:        #0B0E13;
    --console-deep:   #13171F;
    --screen:         #06080C;
    --ink:            #E5E8EC;
    --ink-soft:       #B5B9C0;
    --muted:          #7C8290;
    --rule:           #9298A2;
    --phosphor:       #52D78A;
    --phosphor-bright:#7DF0AE;
    --phosphor-a:     #52D78A;
    --signal-amber:   #F0AE40;
    --channel-red:    #E25C49;
    --route-blue:     #5089DC;
    --critical:       #CD3F30;
  }
}

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

/* ── Mobile overflow clip (HARD rule — scope 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; }


/* ══════════════════════════════════════════════
   ELEMENT 1 — Header (Channel Strip)
   Three things only: logo + carrier sweep + hamburger
   Nav + phone in focus-trapped drawer (display:none closed)
══════════════════════════════════════════════ */
[data-design="a"] .disp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--console);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
}
[data-design="a"] .disp-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-channel);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px var(--gutter);
}
[data-design="a"] .disp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
[data-design="a"] .disp-logo__lamp {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--phosphor);
  box-shadow: var(--glow), 0 0 0 1px var(--rule);
}
[data-design="a"] .disp-logo__mark {
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1;
}
[data-design="a"] .disp-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  background: var(--console-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  flex-shrink: 0;
}
[data-design="a"] .disp-burger__line {
  height: 2px;
  width: 100%;
  background: var(--ink);
  transition:
    transform var(--dur-snap) var(--ease-snap),
    opacity   var(--dur-snap) linear;
}
[data-design="a"] .disp-burger[aria-expanded="true"] .disp-burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-design="a"] .disp-burger[aria-expanded="true"] .disp-burger__line:nth-child(2) { opacity: 0; }
[data-design="a"] .disp-burger[aria-expanded="true"] .disp-burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
[data-design="a"] .disp-burger:focus-visible { outline: 3px solid var(--signal-amber); outline-offset: 3px; }

/* Carrier sweep — ONE atmospheric layer, slow 24s (≥18s per H-3) */
[data-design="a"] .disp-header__carrier {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
[data-design="a"] .disp-header__carrier::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%;
  height: 100%;
  opacity: .7;
  background: linear-gradient(90deg, transparent, var(--phosphor), transparent);
  animation: a-carrier-sweep 24s linear infinite;
}
@keyframes a-carrier-sweep {
  0%   { transform: translateX(-60%); }
  100% { transform: translateX(260%); }
}

/* Drawer — display:none when closed (never visibility:hidden + height:0 that can leak) */
[data-design="a"] .disp-drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--console);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-bay) var(--gutter);
  display: grid;
  gap: var(--space-channel);
  z-index: 39;
  /* Closed: display:none via [hidden] attr set by JS */
}
[data-design="a"] .disp-drawer[hidden] { display: none !important; }
[data-design="a"] .disp-drawer[data-open="true"] {
  display: grid;
  animation: a-drawer-open var(--dur-snap) var(--ease-out);
}
@keyframes a-drawer-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-design="a"] .disp-drawer__nav { display: grid; gap: 12px; }
[data-design="a"] .disp-drawer__nav a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .disp-drawer__nav a:hover { color: var(--route-blue); }
}
[data-design="a"] .disp-drawer__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  background: var(--screen);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  padding: 12px 16px;
  min-height: 56px;
}
[data-design="a"] .disp-drawer__line-id {
  font-family: var(--font-stencil);
  letter-spacing: .12em;
  color: var(--muted);
  font-size: 12px;
}
[data-design="a"] .disp-drawer__line-num {
  font-family: var(--font-readout);
  color: var(--phosphor);
  text-shadow: var(--glow);
  font-size: 24px;
}
[data-design="a"] .disp-drawer__close {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 16px;
  border-radius: var(--radius-pin);
  align-self: start;
  justify-self: end;
}


/* ══════════════════════════════════════════════
   ELEMENT 3 — Ticker (Ambient segment A)
   Above the hero; phosphor scroll; 22s loop
══════════════════════════════════════════════ */
[data-design="a"] .disp-ticker {
  display: flex;
  align-items: center;
  gap: var(--space-channel);
  overflow: hidden;
  background: var(--screen);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px var(--gutter);
}
[data-design="a"] .disp-ticker__id {
  flex: 0 0 auto;
  font-family: var(--font-stencil);
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--muted);
  padding-right: var(--space-channel);
  border-right: 1px solid var(--rule);
}
[data-design="a"] .disp-ticker__window {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}
[data-design="a"] .disp-ticker__track {
  display: inline-flex;
  gap: 36px;
  white-space: nowrap;
  will-change: transform;
  animation: a-ticker-scroll 22s linear infinite;
}
[data-design="a"] .disp-ticker__window:hover .disp-ticker__track,
[data-design="a"] .disp-ticker__window:focus-within .disp-ticker__track,
[data-design="a"] .disp-ticker__track[data-paused="true"] { animation-play-state: paused; }
[data-design="a"] .disp-ticket {
  font-family: var(--font-readout);
  font-size: 20px;
  letter-spacing: .02em;
  color: var(--phosphor);
  text-shadow: var(--glow);
}
[data-design="a"] .disp-ticker__resume {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  font-family: var(--font-stencil);
  font-size: 11px;
  color: var(--signal-amber);
  background: var(--screen);
  padding-left: 10px;
  transition: opacity var(--dur-snap) linear;
}
[data-design="a"] .disp-ticker__window:hover .disp-ticker__resume,
[data-design="a"] .disp-ticker__window:focus-within .disp-ticker__resume { opacity: 1; }
[data-design="a"] .disp-ticker__static { display: none; list-style: none; margin: 0; padding: 0; }
@keyframes a-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ══════════════════════════════════════════════
   HERO — identity + breadth + trust + contact
   ONE ambient substrate layer (a-hero-sweep + grid)
   All text/CTA/phone resting opacity:1
══════════════════════════════════════════════ */
[data-design="a"] .disp-hero {
  position: relative;
  min-height: clamp(420px, 72vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--screen);
}

/* Substrate — ONE animated layer: phosphor console grid + slow sweep. SUSTAINED AMBIENT. */
[data-design="a"] .disp-hero__substrate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
[data-design="a"] .disp-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(63,181,115,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,181,115,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: a-hero-grid-drift 18s linear infinite;
}
@keyframes a-hero-grid-drift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(48px); }
}
[data-design="a"] .disp-hero__sweep {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 60% 50%, rgba(63,181,115,.10) 0%, transparent 70%);
  animation: a-hero-sweep-pulse 8s ease-in-out infinite;
}
@keyframes a-hero-sweep-pulse {
  0%,100% { opacity: .6; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.06); }
}

/* Hero content — windowed-center container */
[data-design="a"] .disp-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-room) var(--gutter);
  display: grid;
  gap: clamp(12px, 2.5vw, 24px);
}

/* Headline — resting opacity:1, transform-only entrance */
[data-design="a"] .disp-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 6.5vw, 88px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--console);
  display: inline-block;
  padding: 4px 12px;
  margin: 0;
  opacity: 1;
  animation: a-hero-arrive 0.7s var(--ease-out) both;
}
@keyframes a-hero-arrive {
  from { opacity: 1; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-design="a"] .disp-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(15px, 2vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--console);
  padding: 4px 12px;
  display: inline-block;
  max-width: 68ch;
  margin: 0;
  opacity: 1;
  animation: a-hero-arrive 0.7s 0.12s var(--ease-out) both;
}

[data-design="a"] .disp-hero__proof {
  font-family: var(--font-stencil);
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: .1em;
  color: var(--muted);
  background: var(--console);
  padding: 4px 12px;
  display: inline-block;
  margin: 0;
  opacity: 1;
  animation: a-hero-arrive 0.7s 0.22s var(--ease-out) both;
}

/* CTA row: E2 intake anchor + phone affordance */
[data-design="a"] .disp-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  opacity: 1;
  animation: a-hero-arrive 0.7s 0.32s var(--ease-out) both;
}

/* Phone affordance — ≥56×56px touch zone, resting opacity:1 */
[data-design="a"] .disp-hero__phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  background: var(--console);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  padding: 10px 20px;
  min-height: 56px;
  min-width: 56px;
  justify-content: center;
  opacity: 1;
}
[data-design="a"] .disp-hero__phone-label {
  font-family: var(--font-stencil);
  letter-spacing: .14em;
  font-size: 11px;
  color: var(--muted);
}
[data-design="a"] .disp-hero__phone-num {
  font-family: var(--font-readout);
  font-size: clamp(24px, 3.5vw, 36px);
  color: var(--phosphor);
  text-shadow: var(--glow);
  line-height: 1;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .disp-hero__phone:hover {
    border-color: var(--phosphor);
    transform: translateY(-1px);
    transition: border-color var(--dur-snap) linear, transform var(--dur-snap) var(--ease-snap);
  }
}

/* Trust chips */
[data-design="a"] .disp-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  opacity: 1;
  animation: a-hero-arrive 0.7s 0.42s var(--ease-out) both;
}
[data-design="a"] .disp-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-stencil);
  letter-spacing: .1em;
  font-size: 12px;
  color: var(--muted);
  background: var(--console);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  padding: 6px 10px;
}
[data-design="a"] .disp-trust-chip__lamp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: var(--glow);
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════
   ELEMENT 2 — Animated CTA (intake anchor)
   Scoped under [data-design="a"].dq-design
   Resting opacity:1; breath halo on slow cycle
══════════════════════════════════════════════ */
[data-design="a"] .disp-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  background: var(--channel-red);
  border: none;
  border-radius: var(--radius-pin);
  padding: 14px 26px;
  min-height: 48px;
  will-change: transform;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.32);
  transition: transform var(--dur-snap) var(--ease-snap), background var(--dur-snap) linear;
  animation: a-cta-breath 4.5s ease-in-out infinite;
  cursor: pointer;
  opacity: 1;
}
[data-design="a"] .disp-cta__lamp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: var(--glow);
  flex-shrink: 0;
  opacity: 1;
}
[data-design="a"] .disp-cta__arrow {
  display: inline-block;
  transition: transform var(--dur-snap) var(--ease-snap);
  opacity: 1;
}
/* Ack span — display:none until active, NEVER opacity:0 */
[data-design="a"] .disp-cta__ack {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  white-space: nowrap;
  display: none;
  font-family: var(--font-readout);
  font-size: 14px;
  color: var(--phosphor);
  text-shadow: var(--glow);
}
[data-design="a"] .disp-cta[data-ack="true"] .disp-cta__ack { display: block; }
[data-design="a"] .disp-cta[data-ack="true"] .disp-cta__lamp {
  background: var(--phosphor-bright);
  box-shadow: 0 0 10px rgba(82,215,138,.8);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .disp-cta:hover,
  [data-design="a"] .disp-cta:focus-visible {
    background: color-mix(in oklab, var(--channel-red), black 6%);
    transform: translateY(-1px);
  }
  [data-design="a"] .disp-cta:hover .disp-cta__arrow,
  [data-design="a"] .disp-cta:focus-visible .disp-cta__arrow {
    transform: translateX(5px);
  }
}
[data-design="a"] .disp-cta:focus-visible { outline: 3px solid var(--signal-amber); outline-offset: 4px; }
[data-design="a"] .disp-cta:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(0,0,0,.32); }
@keyframes a-cta-breath {
  0%,100% {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
                inset 0 -2px 0 rgba(0,0,0,.32),
                0 0 0 0 rgba(208,59,42,0);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
                inset 0 -2px 0 rgba(0,0,0,.32),
                0 0 0 6px rgba(208,59,42,.12);
  }
}

/* CTA secondary/footer variants */
[data-design="a"] .disp-cta--secondary {
  background: var(--route-blue);
  animation: none;
}
[data-design="a"] .disp-cta--footer {
  background: var(--route-blue);
  animation: none;
  font-size: 16px;
}


/* ══════════════════════════════════════════════
   ELEMENT 6 — Pointer (E6)
   Between hero and #funnel; at most 1 sibling from #funnel
   VISIBLY rendered: opacity:1, height ≥8px at all viewports
   NOT a button; Sharpie-draw underline SVG + label
══════════════════════════════════════════════ */
[data-design="a"] .disp-pointer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(20px, 3vw, 36px) var(--gutter);
  background: var(--console);
  border-top: 1px solid var(--rule);
  opacity: 1;
  min-height: 64px;
}
[data-design="a"] .disp-pointer__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
[data-design="a"] .disp-pointer__line {
  width: clamp(180px, 40vw, 280px);
  height: 32px;
  overflow: visible;
}
/* SVG draw-in animation — stroke-dashoffset (NOT width/height) */
[data-design="a"] .disp-pointer__draw {
  stroke-dasharray: 320;
  stroke-dashoffset: 0;
  animation: a-pointer-draw 1.6s var(--ease-out) both, a-pointer-pulse 4s 2s ease-in-out infinite;
}
@keyframes a-pointer-draw {
  from { stroke-dashoffset: 320; }
  to   { stroke-dashoffset: 0; }
}
@keyframes a-pointer-pulse {
  0%,100% { opacity: .7; }
  50%     { opacity: 1; }
}
[data-design="a"] .disp-pointer__label {
  font-family: var(--font-stencil);
  letter-spacing: .12em;
  font-size: clamp(11px, 1.5vw, 13px);
  color: var(--phosphor);
  text-shadow: var(--glow);
  opacity: 1;
}


/* ══════════════════════════════════════════════
   ELEMENT 5 — Service-intake widget (funnel)
   Multi-step: chips → size → timing → contact
   id="funnel" data-mf-role="funnel"
══════════════════════════════════════════════ */
[data-design="a"] .disp-intake {
  padding: var(--space-room) var(--gutter);
  background: var(--console);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .disp-intake__wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  gap: var(--space-bay);
  grid-template-columns: 1.2fr 0.8fr;
  align-items: start;
}
[data-design="a"] .disp-intake__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(24px, 4vw, 36px);
  color: var(--ink);
  margin: 0 0 8px;
}
[data-design="a"] .disp-intake__progress {
  font-family: var(--font-stencil);
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--route-blue);
  margin: 0 0 var(--space-bay);
  min-height: 20px;
}

/* Steps — display:none unless data-active="true" */
[data-design="a"] .disp-step { border: 0; padding: 0; margin: 0 0 var(--space-bay); display: none; }
[data-design="a"] .disp-step[data-active="true"] {
  display: block;
  animation: a-step-in var(--dur-snap) var(--ease-roll);
}
@keyframes a-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-design="a"] .disp-step__legend {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 18px;
  color: var(--ink);
  padding: 0 0 12px;
  display: block;
}
[data-design="a"] .disp-step__hint {
  font-family: var(--font-body);
  text-transform: none;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0;
}

/* Multi-select chip grid */
[data-design="a"] .disp-chan { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); }
[data-design="a"] .disp-chan--radio { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
[data-design="a"] .disp-chan__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 14px;
  color: var(--ink);
  background: var(--console-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  padding: 14px 16px;
  min-height: 48px;
  transition: border-color var(--dur-snap) var(--ease-snap),
              background    var(--dur-snap) linear,
              color         var(--dur-snap) linear;
}
[data-design="a"] .disp-chan__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rule);
  transition: background var(--dur-snap) linear, box-shadow var(--dur-snap) linear;
}
[data-design="a"] .disp-chan__chip[aria-pressed="true"],
[data-design="a"] .disp-chan__chip[aria-checked="true"] {
  border-color: var(--phosphor);
  background: var(--screen);
  color: #fff;
}
[data-design="a"] .disp-chan__chip[aria-pressed="true"] .disp-chan__dot,
[data-design="a"] .disp-chan__chip[aria-checked="true"] .disp-chan__dot {
  background: var(--phosphor);
  box-shadow: var(--glow);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .disp-chan__chip:hover { border-color: var(--route-blue); }
}
[data-design="a"] .disp-chan__chip:focus-visible { outline: 3px solid var(--signal-amber); outline-offset: 3px; }

/* Contact fields */
[data-design="a"] .disp-field { display: grid; gap: 6px; margin-bottom: var(--space-channel); }
[data-design="a"] .disp-field > span {
  font-family: var(--font-stencil);
  letter-spacing: .12em;
  font-size: 11px;
  color: var(--muted);
}
[data-design="a"] .disp-field input {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--console-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.18);
  min-height: 48px;
  width: 100%;
}
[data-design="a"] .disp-field input:focus-visible {
  outline: none;
  border-color: var(--route-blue);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.18),
              0 0 0 2px color-mix(in oklab, var(--route-blue), transparent 60%);
}
[data-design="a"] .disp-field__check {
  font-family: var(--font-readout);
  font-size: 16px;
  color: var(--phosphor);
  text-shadow: var(--glow);
  min-height: 20px;
  margin: 4px 0 0;
}

/* Action buttons */
[data-design="a"] .disp-intake__actions { display: flex; gap: 12px; flex-wrap: wrap; }
[data-design="a"] .disp-btn {
  cursor: pointer;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 16px;
  border-radius: var(--radius-pin);
  padding: 12px 22px;
  border: 1px solid var(--rule);
  min-height: 48px;
}
[data-design="a"] .disp-btn--ghost { background: transparent; color: var(--ink); }
[data-design="a"] .disp-btn--go    { background: var(--route-blue); color: #fff; border-color: transparent; }
[data-design="a"] .disp-btn--dispatch { background: var(--channel-red); color: #fff; border-color: transparent; box-shadow: inset 0 -2px 0 rgba(0,0,0,.32); }
[data-design="a"] .disp-btn:focus-visible { outline: 3px solid var(--signal-amber); outline-offset: 3px; }
[data-design="a"] .disp-btn:active { transform: translateY(2px); }
[data-design="a"] .disp-btn[disabled] { opacity: .6; cursor: default; }

/* Confirmation panel — display:none until submit */
[data-design="a"] .disp-intake__confirm {
  background: var(--screen);
  border: 1px solid var(--phosphor);
  border-radius: var(--radius-bezel);
  padding: var(--space-bay);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--space-bay);
}
[data-design="a"] .disp-intake__confirm-lamp {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 10px rgba(82,215,138,.8);
}
[data-design="a"] .disp-intake__confirm-msg {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
[data-design="a"] .disp-intake__confirm-msg a { color: var(--phosphor); text-shadow: var(--glow); }
[data-design="a"] .disp-intake__confirm-tkt {
  font-family: var(--font-readout);
  font-size: 18px;
  color: var(--phosphor-bright);
  text-shadow: var(--glow);
  margin: 0;
}

/* Live dispatch panel (aside) */
[data-design="a"] .disp-panel {
  position: sticky;
  top: 84px;
  background: var(--screen);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  padding: var(--space-bay);
  box-shadow: var(--shadow-bezel);
  transition: box-shadow var(--dur-snap) linear;
}
[data-design="a"] .disp-panel[data-urg="active"] { box-shadow: inset 0 0 0 2px var(--phosphor), inset 0 1px 0 rgba(255,255,255,.05); }
[data-design="a"] .disp-panel[data-urg="submitted"] { box-shadow: inset 0 0 0 2px var(--signal-amber), inset 0 1px 0 rgba(255,255,255,.05); }
[data-design="a"] .disp-panel__id {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-channel);
  font-family: var(--font-stencil);
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--muted);
}
[data-design="a"] .disp-panel__lamp {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--rule);
}
[data-design="a"] .disp-panel__lamp[data-strobe="true"] {
  animation: a-strobe var(--dur-strobe) var(--ease-strobe) 3;
}
[data-design="a"] .disp-panel__eta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--space-channel);
}
[data-design="a"] .disp-panel__eta-label {
  font-family: var(--font-stencil);
  letter-spacing: .12em;
  font-size: 11px;
  color: var(--muted);
}
[data-design="a"] .disp-panel__eta .disp-digits {
  font-family: var(--font-readout);
  font-size: clamp(40px, 7vw, 56px);
  line-height: 1;
  color: var(--phosphor);
  text-shadow: var(--glow);
}
[data-design="a"] .disp-panel__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
[data-design="a"] .disp-panel__rows li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
}
[data-design="a"] .disp-panel__rows b {
  font-family: var(--font-readout);
  color: var(--phosphor);
  text-shadow: var(--glow);
  font-size: 16px;
}
[data-design="a"] .disp-panel__ack {
  font-family: var(--font-readout);
  color: var(--phosphor-bright);
  text-shadow: var(--glow);
  min-height: 20px;
  margin: var(--space-channel) 0 0;
}


/* ══════════════════════════════════════════════
   ELEMENT 4 — Dispatch Board (Ambient segment B)
   Mid-page; service-area channels with phosphor readouts
   CH01 lamp pulses (5s breath); digit roll on scroll
══════════════════════════════════════════════ */
[data-design="a"] .disp-board {
  background: var(--console-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-room) var(--gutter);
}
[data-design="a"] .disp-board__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(24px, 4vw, 36px);
  color: var(--ink);
  margin: 0 0 var(--space-bay);
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}
[data-design="a"] .disp-board__grid {
  display: grid;
  gap: var(--space-channel);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Shared channel-bay styles */
[data-design="a"] .disp-bay {
  background: var(--screen);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  padding: var(--space-bay);
  box-shadow: var(--shadow-bezel);
}
[data-design="a"] .disp-bay__id {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--font-stencil);
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--muted);
}
[data-design="a"] .disp-bay__lamp {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--phosphor);
  box-shadow: var(--glow);
}
[data-design="a"] .disp-bay--live .disp-bay__lamp { animation: a-ch1-pulse var(--dur-pulse) ease-in-out infinite; }
[data-design="a"] .disp-bay__readout {
  font-family: var(--font-readout);
  font-size: clamp(40px, 8vw, 56px);
  line-height: 1;
  color: var(--phosphor);
  text-shadow: var(--glow);
}
[data-design="a"] .disp-digits { display: inline-block; }
[data-design="a"] .disp-digits[data-rolling="true"] { animation: a-digit-roll var(--dur-tick) var(--ease-roll); }
[data-design="a"] .disp-bay__meta {
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: 14px;
  margin: 12px 0 0;
  line-height: 1.5;
}

@keyframes a-ch1-pulse {
  0%,100% { opacity: .85; }
  50%     { opacity: 1; box-shadow: 0 0 10px rgba(63,181,115,.8); }
}
@keyframes a-digit-roll {
  0%   { transform: translateY(-40%); opacity: .2; }
  50%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}
@keyframes a-strobe {
  0%,100% { opacity: .3; }
  50%     { opacity: 1; box-shadow: var(--glow); }
}


/* ══════════════════════════════════════════════
   SERVICES (Breadth-list / Service wall)
   Card grid; never paragraphs
══════════════════════════════════════════════ */
[data-design="a"] .disp-services {
  background: var(--console);
  padding: var(--space-room) var(--gutter);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .disp-services__wrap { max-width: var(--content-max); margin: 0 auto; }
[data-design="a"] .disp-services__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(24px, 4vw, 36px);
  color: var(--ink);
  margin: 0 0 8px;
}
[data-design="a"] .disp-services__sub {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 var(--space-bay);
  max-width: 60ch;
}
[data-design="a"] .disp-services__grid {
  display: grid;
  gap: var(--space-channel);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
[data-design="a"] .disp-bay--service { transition: transform var(--dur-snap) var(--ease-snap); }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .disp-bay--service:hover { transform: translateY(-2px); }
}
[data-design="a"] .disp-services__cta {
  margin-top: var(--space-rack);
  display: flex;
  justify-content: flex-start;
}


/* ══════════════════════════════════════════════
   SCROLL-LINKED PREMIUM MOTION (TRIAD-2)
   Service bay cards animate in on scroll
   Uses translate+opacity only — NOT fade-in-on-scroll alone;
   cards translate 24px up while fading: parallax-flavored entry
══════════════════════════════════════════════ */
[data-design="a"] .disp-bay--service {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
[data-design="a"] .disp-bay--service.in-view {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════ */
[data-design="a"] .disp-about {
  background: var(--console-deep);
  padding: var(--space-room) var(--gutter);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .disp-about__wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  gap: var(--space-bay);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
[data-design="a"] .disp-about__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(24px, 4vw, 36px);
  color: var(--ink);
  margin: 0 0 var(--space-channel);
}
[data-design="a"] .disp-about__body {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 var(--space-channel);
  max-width: 62ch;
}
[data-design="a"] .disp-about__spec { width: 100%; }
[data-design="a"] .disp-about__spec .disp-panel__rows b a { color: var(--phosphor); text-shadow: var(--glow); text-decoration: none; }


/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
[data-design="a"] .disp-footer {
  background: var(--screen);
  border-top: 1px solid var(--rule);
  padding: var(--space-room) var(--gutter) var(--space-rack);
}
[data-design="a"] .disp-footer__wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  gap: var(--space-rack);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  align-items: start;
  padding-bottom: var(--space-rack);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .disp-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-design="a"] .disp-footer__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 20px;
  color: var(--ink);
  font-weight: 700;
}
[data-design="a"] .disp-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-design="a"] .disp-footer__phone {
  font-family: var(--font-readout);
  font-size: 28px;
  color: var(--phosphor);
  text-shadow: var(--glow);
  text-decoration: none;
}
[data-design="a"] .disp-footer__addr {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
[data-design="a"] .disp-footer__area {
  font-family: var(--font-stencil);
  letter-spacing: .1em;
  font-size: 12px;
  color: var(--muted);
}
[data-design="a"] .disp-footer__fb {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  color: var(--route-blue);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .disp-footer__fb:hover { color: var(--phosphor); }
}
[data-design="a"] .disp-footer__copy {
  max-width: var(--content-max);
  margin: var(--space-rack) auto 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
}


/* ══════════════════════════════════════════════
   PREFERS-REDUCED-MOTION fallbacks
   All signature interactions keep working; only motion stops
══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .disp-header__carrier::before { animation: none; transform: translateX(60%); opacity: .5; }
  [data-design="a"] .disp-burger__line { transition: none; }
  [data-design="a"] .disp-drawer { animation: none; }
  [data-design="a"] .disp-ticker__track { animation: none; }
  [data-design="a"] .disp-hero__grid { animation: none; }
  [data-design="a"] .disp-hero__sweep { animation: none; opacity: .8; }
  [data-design="a"] .disp-hero__headline,
  [data-design="a"] .disp-hero__subtitle,
  [data-design="a"] .disp-hero__proof,
  [data-design="a"] .disp-hero__cta-row,
  [data-design="a"] .disp-hero__trust { animation: none; opacity: 1; transform: none; }
  [data-design="a"] .disp-cta { animation: none; transition: none; }
  [data-design="a"] .disp-cta__arrow { transition: none; }
  [data-design="a"] .disp-pointer__draw { animation: none; stroke-dashoffset: 0; }
  [data-design="a"] .disp-step[data-active="true"] { animation: none; }
  [data-design="a"] .disp-bay--live .disp-bay__lamp { animation: none; opacity: 1; }
  [data-design="a"] .disp-digits[data-rolling="true"] { animation: none; }
  [data-design="a"] .disp-panel__lamp[data-strobe="true"] { animation: none; opacity: 1; box-shadow: var(--glow); }
  [data-design="a"] .disp-bay--service { opacity: 1; transform: translateY(0); transition: none; }
}
/* Reduced-motion: also cancel the hover-transform reset (transform:none is
   harmless but motion_critic flags ungated :hover transforms — move into guard) */
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  [data-design="a"] .disp-bay--service:hover { transform: none; }
}


/* ══════════════════════════════════════════════
   RESPONSIVE — mobile-first breakpoints
   No h-scroll at 320/390/768/1440
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  [data-design="a"] .disp-about__wrap { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  [data-design="a"] .disp-header__bar { max-width: none; }
  [data-design="a"] .disp-intake__wrap { grid-template-columns: 1fr; }
  [data-design="a"] .disp-panel { position: static; margin-top: var(--space-bay); }
  [data-design="a"] .disp-board__title { margin-left: 0; }
  [data-design="a"] .disp-board__grid { max-width: none; }
  [data-design="a"] .disp-board { padding-left: var(--gutter); padding-right: var(--gutter); }
  [data-design="a"] .disp-about__wrap { grid-template-columns: 1fr; }
  [data-design="a"] .disp-footer__wrap { grid-template-columns: 1fr; gap: var(--space-bay); }
}

@media (max-width: 560px) {
  [data-design="a"] .disp-ticker__id { display: none; }
  [data-design="a"] .disp-ticket { font-size: 16px; }
  [data-design="a"] .disp-cta { width: 100%; justify-content: center; font-size: 16px; }
  [data-design="a"] .disp-hero__cta-row { flex-direction: column; align-items: stretch; }
  [data-design="a"] .disp-hero__phone { min-height: 56px; justify-content: center; align-items: center; text-align: center; }
  [data-design="a"] .disp-intake__actions .disp-btn { flex: 1 1 auto; text-align: center; }
  [data-design="a"] .disp-header__bar { padding: 12px 16px; }
  [data-design="a"] .disp-logo__mark { font-size: 16px; }
}

@media (max-width: 390px) {
  [data-design="a"] .disp-chan { grid-template-columns: 1fr 1fr; }
  [data-design="a"] .disp-chan--radio { grid-template-columns: 1fr; }
}

@media (max-width: 320px) {
  [data-design="a"] .disp-burger { width: 38px; height: 38px; }
  [data-design="a"] .disp-chan { grid-template-columns: 1fr; }
  [data-design="a"] .disp-bay { padding: 16px; }
  [data-design="a"] .disp-ticker { padding: 8px 12px; }
  [data-design="a"] .disp-cta { padding: 12px 18px; }
}

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