/* ═══════════════════════════════════════════════════════
   design-a · wrap × premium-funnel · cornels-plumbing-portland
   ALL selectors scoped under [data-design="a"].dq-design
   ALL keyframes prefixed wrap-a-
   ZERO [data-design="a"].dq-design selectors — fully remapped to [data-design="a"]
   ═══════════════════════════════════════════════════════ */

/* ── Token system (verbatim from wrap/design.md, remapped) ── */
[data-design="a"] {
  --design-a-primary: #E5247A;

  /* Palette */
  --canvas:      #F7F4F0;
  --canvas-deep: #EDE7DD;
  --ink:         #0A0913;
  --ink-soft:    #3A364A;
  --muted:       #7C7990;
  --rule:        #1F1C2E;
  --magenta-a:   #E5247A;
  --lime-a:      #A8E834;
  --sun-a:       #FFCF40;
  --ultra-a:     #2B3DD8;
  --seal-a:      #3FAE5C;
  --critical-a:  #D03A2A;
  --gradient-1-a: linear-gradient(135deg, var(--magenta-a), var(--sun-a));
  --gradient-2-a: linear-gradient(135deg, var(--ultra-a), var(--lime-a));

  /* Typography */
  --font-display: "Druk Wide Heavy", "Söhne Breit", "GT America Extended", sans-serif;
  --font-numeric: "Druk Condensed Super", "Cabinet Grotesk Variable", sans-serif;
  --font-body:    "Inter", "Söhne", system-ui, sans-serif;
  --font-data:    "Söhne Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Spacing */
  --space-tick:    4px;
  --space-em:      8px;
  --space-cue:    16px;
  --space-stack:  24px;
  --space-cascade:48px;
  --space-flash:  80px;
  --space-pop:   128px;

  /* Motion */
  --dur-snap:    220ms;
  --dur-pop:     400ms;
  --dur-count:  1100ms;
  --dur-ambient:30000ms;
  --ease-pop:   cubic-bezier(.34, 1.6, .64, 1);
  --ease-count: cubic-bezier(.22, 1, .36, 1);
  --ease-morph: cubic-bezier(.45, .05, .55, .95);

  /* Radius */
  --radius-pop:  12px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card:  0 4px 0 var(--canvas-deep), 0 4px 0 1px var(--rule);
  --shadow-press: 0 1px 0 var(--canvas-deep), 0 1px 0 1px var(--rule);
  --shadow-pop:   0 8px 32px color-mix(in oklab, var(--magenta-a), transparent 78%);
  --shadow-focus: 0 0 0 3px var(--canvas), 0 0 0 6px var(--magenta-a);
}

@media (prefers-color-scheme: dark) {
  [data-design="a"] {
    --canvas:      #0A0913;
    --canvas-deep: #13111C;
    --ink:         #F7F4F0;
    --ink-soft:    #C2BFCE;
    --muted:       #7E7B92;
    --rule:        #9A95B0;
    --magenta-a:   #F44A95;
    --lime-a:      #BDF248;
    --sun-a:       #FFDA66;
    --ultra-a:     #5063EE;
    --seal-a:      #5EC57E;
    --critical-a:  #E45848;
  }
}

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

/* ── Mobile anti-scroll harness (scoped to .dq-design — NEVER bare [data-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;
}

/* ── Base ── */
[data-design="a"].dq-design {
  background: var(--canvas);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-body);
  isolation: isolate;
}

/* ════════════════════════════════════════════════════════
   E1 · ANIMATED MINIMALIST HEADER — Wrap Band
   Three things only: logo, progress indicator, hamburger
   ════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .wrap-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-cue);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-cue) clamp(16px, 5vw, 40px);
}

/* Logo + shimmer (~11s cycle — quiet craft detail) */
[data-design="a"] .wrap-logo {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-decoration: none;
  flex-shrink: 0;
}
[data-design="a"] .wrap-logo__text {
  font-family: var(--font-display);
  font-size: clamp(18px, 4vw, 26px);
  letter-spacing: -.02em;
  color: var(--ink);
  display: block;
}
[data-design="a"] .wrap-logo__shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    color-mix(in oklab, #fff, transparent 45%) 48%,
    color-mix(in oklab, #fff, transparent 45%) 52%,
    transparent 70%);
  transform: translateX(-120%);
  animation: wrap-a-logo-shimmer 11s ease-in-out infinite;
}
@keyframes wrap-a-logo-shimmer {
  0%, 55% { transform: translateX(-120%); }
  70%     { transform: translateX(120%); }
  100%    { transform: translateX(120%); }
}

/* Progress indicator (center) */
[data-design="a"] .wrap-header__prog {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  margin: 0 auto;
}
[data-design="a"] .wrap-header__step-label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
[data-design="a"] .wrap-header__prog-bar {
  width: 100%;
  height: 3px;
  background: var(--canvas-deep);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
[data-design="a"] .wrap-header__prog-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gradient-1-a);
  border-radius: var(--radius-pill);
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform var(--dur-pop) var(--ease-count);
}

/* Hamburger */
[data-design="a"] .wrap-burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--canvas-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pop);
  cursor: pointer;
  flex-shrink: 0;
}
[data-design="a"] .wrap-burger span {
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur-snap) var(--ease-pop), opacity var(--dur-snap);
}
[data-design="a"] .wrap-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
[data-design="a"] .wrap-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
[data-design="a"] .wrap-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Gradient-morph wash — the ONE header animation (H-3: ≥18s cycle → 28s ✓) */
[data-design="a"] .wrap-header__wash {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 3px;
  overflow: hidden;
}
[data-design="a"] .wrap-header__wash span {
  position: absolute;
  inset: 0;
}
[data-design="a"] .wrap-header__wash-a {
  background: var(--gradient-1-a);
  animation: wrap-a-wash-a 28s var(--ease-morph) infinite;
}
[data-design="a"] .wrap-header__wash-b {
  background: var(--gradient-2-a);
  /* resting opacity handled by keyframe — no static opacity:0 */
  animation: wrap-a-wash-b 28s var(--ease-morph) infinite;
}
@keyframes wrap-a-wash-a { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes wrap-a-wash-b { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

/* Drawer — phone only, no nav links */
[data-design="a"] .wrap-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in oklab, var(--canvas), transparent 6%);
}
[data-design="a"] .wrap-drawer[hidden] {
  display: none;
}
[data-design="a"] .wrap-drawer__sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
  padding: clamp(64px, 16vw, 120px) clamp(20px, 8vw, 64px);
  max-width: 560px;
  position: relative;
}
[data-design="a"] .wrap-drawer__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--canvas-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pop);
  color: var(--ink);
  font-size: 18px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-design="a"] .wrap-drawer__label {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
[data-design="a"] .wrap-drawer__phone {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 44px);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.02em;
  min-height: 56px;
  display: flex;
  align-items: center;
}
[data-design="a"] .wrap-drawer__sub {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0;
}
[data-design="a"] .wrap-drawer:not([hidden]) .wrap-drawer__sheet {
  animation: wrap-a-drawer-pop var(--dur-pop) var(--ease-pop) both;
}
@keyframes wrap-a-drawer-pop {
  from { opacity: 0; transform: translateY(-16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════
   HERO — Step 1 of the funnel
   Visual presence floor: button geometry + blob + hairline (no backdrop photo)
   isolation: isolate so hero text z-index is always above blob
   All text opacity:1 at first paint — HARD RULE
   ════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-hero {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  background: var(--canvas);
  padding: clamp(56px, 10vw, 112px) clamp(16px, 5vw, 40px) clamp(48px, 8vw, 80px);
  min-height: 80vh;
  display: flex;
  align-items: center;
}

/* Gradient-morph blob — ONE perceptible ambient layer (HERO-1)
   Sustained ambient motion: keeps breathing visibly at rest (HERO-3 / hero.md v0.2.1)
   blob is behind hero text (z-index: -1) → text is always topmost paint */
[data-design="a"] .wrap-hero__blob {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
[data-design="a"] .wrap-hero__blob span {
  position: absolute;
  width: min(70vw, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(6px);
  top: 10%;
  right: -10%;
}
[data-design="a"] .wrap-hero__blob-a {
  background: var(--gradient-1-a);
  opacity: .28;
  animation: wrap-a-hero-morph-a var(--dur-ambient) var(--ease-morph) infinite;
}
[data-design="a"] .wrap-hero__blob-b {
  background: var(--gradient-2-a);
  /* resting opacity handled by keyframe (0%,100%{opacity:0}) — no static opacity:0 here */
  animation: wrap-a-hero-morph-b var(--dur-ambient) var(--ease-morph) infinite;
}
@keyframes wrap-a-hero-morph-a {
  0%,100% { opacity: .28; transform: scale(1); }
  50%     { opacity: 0;   transform: scale(1.1); }
}
@keyframes wrap-a-hero-morph-b {
  0%,100% { opacity: 0;   transform: scale(1.1); }
  50%     { opacity: .28; transform: scale(1); }
}

[data-design="a"] .wrap-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  width: 100%;
}

/* Value prop — opacity:1 at first paint (HARD RULE: never opacity:0 on hero text) */
[data-design="a"] .wrap-hero__value {
  font-family: var(--font-display);
  font-size: clamp(28px, 5.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 var(--space-cue);
  max-width: 20ch;
  opacity: 1;
}
[data-design="a"] .wrap-hero__reassurance {
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-stack);
  opacity: 1;
}

/* Hairline draw-in — ONE substrate motif (≥80px traversal at perceivable velocity)
   transform-only: opacity stays at .4 throughout (no opacity:0 under hero — HARD RULE) */
[data-design="a"] .wrap-hero__rule {
  width: min(400px, 100%);
  height: 2px;
  background: var(--magenta-a);
  opacity: .4;
  margin: 0 0 var(--space-stack);
  transform: scaleX(0);
  transform-origin: left;
  animation: wrap-a-hairline 1.0s ease-out 0.15s forwards;
}
@keyframes wrap-a-hairline {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ════════════════════════════════════════════════════════
   E6 POINTER — bold, playful, personality-rich signature element
   Rests above form on every step; animated with anticipation + follow-through
   MUST: computed opacity > 0.5, bounding-box height ≥ 8px at all viewports
   NOT a <button>; no click action (PTR-2)
   ════════════════════════════════════════════════════════ */
/* E6 pointer — sits between hero section and #funnel in DOM (sibling gap = 0)
   Visually: centered below hero, above funnel form
   opacity:1 and height ≥ 8px at all viewports (gate: pointer_invisible) */
[data-design="a"] .wrap-pointer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-stack) clamp(16px, 5vw, 40px);
  opacity: 1;
  min-height: 56px;
  background: var(--canvas);
}
[data-design="a"] .wrap-pointer--main {
  /* The canonical E6 pointer — between hero and #funnel in DOM */
  border-bottom: 1px solid transparent;
}
[data-design="a"] .wrap-pointer__svg {
  display: block;
}
/* Animated pointer: anticipation (up 4px) → follow-through (down, then settle)
   Bold, authored motion. Cycle: 3.6s (above 4s minimum) */
[data-design="a"] .wrap-pointer__path-a {
  animation: wrap-a-ptr-pulse 3.6s var(--ease-pop) infinite;
  transform-origin: 40px 20px;
}
@keyframes wrap-a-ptr-pulse {
  0%   { transform: translateY(0)  scale(1);     opacity: 1; }
  18%  { transform: translateY(-5px) scale(1.06); opacity: 1; }
  36%  { transform: translateY(4px)  scale(.97); opacity: 1; }
  52%  { transform: translateY(0)    scale(1);   opacity: 1; }
  100% { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* ════════════════════════════════════════════════════════
   STEP 1 QUESTION UI (hero content, visible at first paint)
   ════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-step__q {
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--space-cue);
  opacity: 1;
}
[data-design="a"] .wrap-chips {
  display: grid;
  gap: var(--space-em);
}

/* ── E2 · STEP-ADVANCE BUTTONS (wrap-chip = the funnel's Element 2)
   Premium-funnel: button geometry IS the visual mass (trade.md visual floor)
   ≥56px tall on mobile; fill ≥0.3 chroma; contrast ≥4.5:1; no opacity:0 resting
   Press feedback <100ms; auto-advances (NO separate Continue button)
   Entrance: stagger ≤200ms per button; transform-only (no opacity from 0 → use scale) */
[data-design="a"] .wrap-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-cue);
  width: 100%;
  min-height: 56px;
  text-align: left;
  padding: var(--space-cue) var(--space-stack);
  cursor: pointer;
  background: var(--canvas-deep);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-pop);
  color: var(--ink);
  font: 500 17px/1.4 var(--font-body);
  /* entrance: stagger applied per :nth-child (transform-only, opacity stays 1) */
  animation: wrap-a-chip-mount var(--dur-pop) var(--ease-pop) both;
  transition: border-color var(--dur-snap), transform var(--dur-snap) var(--ease-pop),
              box-shadow var(--dur-snap);
}
[data-design="a"] .wrap-chips .wrap-chip:nth-child(1) { animation-delay:  0ms; }
[data-design="a"] .wrap-chips .wrap-chip:nth-child(2) { animation-delay: 80ms; }
[data-design="a"] .wrap-chips .wrap-chip:nth-child(3) { animation-delay:160ms; }
[data-design="a"] .wrap-chips .wrap-chip:nth-child(4) { animation-delay:200ms; }
[data-design="a"] .wrap-chips .wrap-chip:nth-child(5) { animation-delay:200ms; }
/* entrance uses scale(0.94→1) + translate(Y8px→0) — opacity stays 1 throughout */
@keyframes wrap-a-chip-mount {
  from { transform: translateY(12px) scale(0.95); }
  to   { transform: none; }
}
[data-design="a"] .wrap-chip::after {
  content: "›";
  font-size: 22px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform var(--dur-snap) var(--ease-pop), color var(--dur-snap);
}
[data-design="a"] .wrap-chip:active,
[data-design="a"] .wrap-chip.is-picked {
  transform: translateY(2px);
  box-shadow: var(--shadow-press);
  border-color: var(--magenta-a);
}
[data-design="a"] .wrap-chip.is-picked::after { color: var(--ink); }

/* Hover — guarded by pointer:fine (no sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .wrap-chip:hover {
    border-color: var(--lime-a);
  }
  [data-design="a"] .wrap-chip:hover::after {
    transform: translateX(4px);
    color: var(--ink);
  }
}

[data-design="a"] .wrap-chip__label { flex: 1; }

/* ════════════════════════════════════════════════════════
   E5 · FUNNEL — Wrap premium multi-step funnel
   Element 3: step-transition motion (wrap-a-step-in keyframe)
   ════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-funnel {
  background: var(--canvas);
  padding: 0 clamp(16px, 5vw, 40px) clamp(48px, 8vw, 80px);
}
[data-design="a"] .wrap-funnel__stage {
  max-width: 600px;
  margin: 0 auto;
  padding-top: var(--space-stack);
}
[data-design="a"] .wrap-pointer--stage {
  max-width: 600px;
  margin: 0 auto;
}
/* funnel question/form view — E3 step transition fires on injected children */
[data-design="a"] .wrap-funnel__view {
  display: grid;
  gap: var(--space-cue);
}
/* E3 · AMBIENT SEGMENT A = step-transition motion (completes ≤600ms per trade.md) */
[data-design="a"] .wrap-funnel__view > * {
  animation: wrap-a-step-in var(--dur-pop) var(--ease-pop) both;
}
@keyframes wrap-a-step-in {
  from { transform: translateX(20px) scale(0.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* funnel question text rendered by JS */
[data-design="a"] .wrap-funnel__q {
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--space-em);
}

/* Contact step fields */
[data-design="a"] .wrap-field {
  display: grid;
  gap: var(--space-tick);
}
[data-design="a"] .wrap-field label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
[data-design="a"] .wrap-field input {
  min-height: 52px;
  padding: 0 var(--space-cue);
  background: var(--canvas-deep);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-pop);
  color: var(--ink);
  font: 400 16px/1.4 var(--font-body);
  width: 100%;
  transition: border-color var(--dur-snap);
}
[data-design="a"] .wrap-field input:focus-visible {
  outline: none;
  border-color: var(--magenta-a);
  border-width: 2px;
}

/* Back button */
[data-design="a"] .wrap-btn-back {
  margin-top: var(--space-stack);
  background: none;
  border: 0;
  color: var(--muted);
  font: 400 14px/1 var(--font-body);
  cursor: pointer;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .wrap-btn-back:hover { color: var(--ink); }
}

/* Contact submit button */
[data-design="a"] .wrap-funnel__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: 100%;
  padding: 0 var(--space-stack);
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  font: 400 18px/1 var(--font-display);
  color: var(--ink);
  background: var(--gradient-1-a);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-snap), transform var(--dur-snap) var(--ease-pop);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .wrap-funnel__submit:hover {
    background: var(--gradient-2-a);
    box-shadow: var(--shadow-pop);
  }
}
[data-design="a"] .wrap-funnel__submit:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-press);
}

/* Funnel done state */
[data-design="a"] .wrap-funnel__done {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-cascade) clamp(16px, 5vw, 40px);
  animation: wrap-a-drawer-pop var(--dur-pop) var(--ease-pop) both;
}
[data-design="a"] .wrap-done__card {
  background: var(--canvas-deep);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-pop);
  padding: clamp(32px, 6vw, 56px) clamp(24px, 5vw, 48px);
  text-align: center;
}
[data-design="a"] .wrap-done__kicker {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-em);
}
[data-design="a"] .wrap-done__headline {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 var(--space-stack);
}
[data-design="a"] .wrap-done__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 var(--space-cascade);
  max-width: 40ch;
  margin-inline: auto;
}
[data-design="a"] .wrap-done__note {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  margin: var(--space-stack) 0 0;
}

/* ════════════════════════════════════════════════════════
   E2 · ANIMATED CTA (Pop button — breathes on 4.5s pulse)
   ════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-em);
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: clamp(15px, 3.4vw, 18px);
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  background: var(--gradient-1-a);
  box-shadow: var(--shadow-card);
  max-width: 100%;
  will-change: transform;
  border: none;
  cursor: pointer;
  animation: wrap-a-cta-breath 4.5s ease-in-out infinite;
  transition: box-shadow var(--dur-snap), transform var(--dur-snap) var(--ease-pop);
}
[data-design="a"] .wrap-cta__arrow {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform var(--dur-snap) var(--ease-pop);
}
@keyframes wrap-a-cta-breath {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.025); }
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .wrap-cta:hover {
    background: var(--gradient-2-a);
    box-shadow: var(--shadow-pop);
    outline: none;
  }
  [data-design="a"] .wrap-cta:hover .wrap-cta__arrow {
    transform: translateX(4px);
  }
}
[data-design="a"] .wrap-cta:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), var(--shadow-pop);
}
[data-design="a"] .wrap-cta:active {
  box-shadow: var(--shadow-press);
  transform: translateY(3px) scale(.99);
  background: var(--magenta-a);
}
[data-design="a"] .wrap-cta--done {
  margin-top: 0;
}

/* ════════════════════════════════════════════════════════
   E3 · AMBIENT SEGMENT A — Big Stat (odometer + gradient-morph)
   ════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-bigstat {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 12vw, 128px) clamp(16px, 5vw, 40px);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--canvas-deep);
}
[data-design="a"] .wrap-bigstat__blob {
  position: absolute;
  width: min(60vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(8px);
  opacity: .55;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
[data-design="a"] .wrap-bigstat__blob span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
[data-design="a"] .wrap-bigstat__blob-a {
  background: var(--gradient-1-a);
  animation: wrap-a-morph-a var(--dur-ambient) var(--ease-morph) infinite;
}
[data-design="a"] .wrap-bigstat__blob-b {
  background: var(--gradient-2-a);
  /* resting opacity from keyframe; no static opacity:0 */
  animation: wrap-a-morph-b var(--dur-ambient) var(--ease-morph) infinite;
}
[data-design="a"] .wrap-bigstat.is-out .wrap-bigstat__blob span {
  animation-play-state: paused;
}
@keyframes wrap-a-morph-a { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:0;transform:scale(1.08);} }
@keyframes wrap-a-morph-b { 0%,100%{opacity:0;transform:scale(1.08);}50%{opacity:1;transform:scale(1);} }
[data-design="a"] .wrap-bigstat__kicker {
  position: relative;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-em);
}
[data-design="a"] .wrap-bigstat__num {
  position: relative;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-numeric);
  font-size: clamp(96px, 30vw, 280px);
  line-height: .88;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
[data-design="a"] .wrap-bigstat__num.is-pulse {
  animation: wrap-a-pulse var(--dur-snap) var(--ease-pop);
}
@keyframes wrap-a-pulse {
  0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); }
}
[data-design="a"] .wrap-bigstat__cap {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.3;
  letter-spacing: -.01em;
  max-width: 16ch;
  margin: var(--space-cue) auto 0;
}

/* ════════════════════════════════════════════════════════
   E4 · AMBIENT SEGMENT B — Card Cascade (trust signals)
   ════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-reel {
  background: var(--canvas);
  padding: clamp(48px, 10vw, 128px) 0;
}
[data-design="a"] .wrap-reel__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 40px);
}
[data-design="a"] .wrap-reel__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 56px);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 var(--space-cascade);
}
[data-design="a"] .wrap-reel__grid {
  display: grid;
  gap: var(--space-stack);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
/* Stack Cards — cascade in on viewport entry */
[data-design="a"] .wrap-card {
  position: relative;
  overflow: hidden;
  background: var(--canvas-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pop);
  padding: var(--space-stack);
  box-shadow: var(--shadow-card);
  opacity: 1;
  transform: translateY(40px) scale(.96);
}
[data-design="a"] .wrap-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gradient-1-a);
}
[data-design="a"] .wrap-card[data-grad="2"]::before {
  background: var(--gradient-2-a);
}
[data-design="a"] .wrap-reel__grid.is-in .wrap-card {
  animation: wrap-a-cascade var(--dur-pop) var(--ease-pop) both;
  animation-delay: calc(var(--i, 0) * 100ms);
}
[data-design="a"] .wrap-reel__grid.is-in .wrap-card::before {
  animation: wrap-a-edge 14s ease-in-out infinite;
}
[data-design="a"] .wrap-reel__grid.is-out .wrap-card::before {
  animation-play-state: paused;
}
@keyframes wrap-a-cascade {
  0%   { opacity: 0; transform: translateY(40px) scale(.96); }
  70%  { opacity: 1; transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes wrap-a-edge {
  0%,100% { filter: hue-rotate(0deg); }
  50%     { filter: hue-rotate(22deg); }
}
[data-design="a"] .wrap-card__num {
  font-family: var(--font-numeric);
  font-size: clamp(40px, 10vw, 72px);
  line-height: .9;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
[data-design="a"] .wrap-card__unit {
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--space-em);
  letter-spacing: .06em;
}

/* ════════════════════════════════════════════════════════
   Emergency CTA section
   ════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-emergency {
  background: var(--canvas-deep);
  padding: clamp(48px, 8vw, 80px) clamp(16px, 5vw, 40px);
  text-align: center;
}
[data-design="a"] .wrap-emergency__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-stack);
}
[data-design="a"] .wrap-emergency__label {
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 36px);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}
[data-design="a"] .wrap-emergency__sub {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ════════════════════════════════════════════════════════
   Footer
   ════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-footer {
  background: var(--ink);
  padding: clamp(40px, 6vw, 72px) clamp(16px, 5vw, 40px) clamp(32px, 4vw, 48px);
}
[data-design="a"] .wrap-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-design="a"] .wrap-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
}
[data-design="a"] .wrap-footer__name {
  font: 600 15px/1 var(--font-display);
  color: var(--canvas);
}
[data-design="a"] .wrap-footer__phone {
  font: 500 15px/1 var(--font-display);
  color: var(--magenta-a);
  text-decoration: none;
}
[data-design="a"] .wrap-footer__meta {
  font: 500 12px/1.6 var(--font-data);
  letter-spacing: .04em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
[data-design="a"] .wrap-footer__copy {
  font: 400 12px/1.65 var(--font-data);
  color: var(--muted);
  margin: 0;
  max-width: 80ch;
  opacity: .7;
}

/* ════════════════════════════════════════════════════════
   TRIAD-2 · SCROLL-LINKED PARALLAX
   Genuine scroll-driven motion on hero→funnel handoff
   (NOT a fade-in-on-scroll — this is scroll-linked translate)
   ════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-funnel__stage[data-scroll-enter="true"] {
  transform: translateY(0);
  opacity: 1;
}
[data-design="a"] .wrap-funnel__stage[data-scroll-enter="false"] {
  transform: translateY(24px);
  opacity: .7;
  transition: transform 280ms var(--ease-morph),
              opacity   260ms linear;
}
[data-design="a"] .wrap-funnel__stage {
  transition: transform 280ms var(--ease-morph),
              opacity   260ms linear;
}

/* ════════════════════════════════════════════════════════
   REDUCED-MOTION fallbacks (every signature interaction)
   ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .wrap-header__wash-a,
  [data-design="a"] .wrap-header__wash-b { animation: none; opacity: .5; }
  [data-design="a"] .wrap-logo__shimmer   { animation: none; }
  [data-design="a"] .wrap-header__prog-fill { transition: none; }
  [data-design="a"] .wrap-drawer:not([hidden]) .wrap-drawer__sheet { animation: none; }
  [data-design="a"] .wrap-hero__blob-a,
  [data-design="a"] .wrap-hero__blob-b   { animation: none; opacity: .18; }
  [data-design="a"] .wrap-hero__rule     { animation: none; transform: scaleX(1); opacity: .4; }
  [data-design="a"] .wrap-pointer__path-a { animation: none; }
  [data-design="a"] .wrap-chip           { animation: none; }
  [data-design="a"] .wrap-chip,
  [data-design="a"] .wrap-chip::after    { transition: none; }
  [data-design="a"] .wrap-cta            { animation: none; }
  [data-design="a"] .wrap-cta__arrow     { transition: none; }
  [data-design="a"] .wrap-bigstat__blob-a,
  [data-design="a"] .wrap-bigstat__blob-b { animation: none; opacity: .5; }
  [data-design="a"] .wrap-bigstat__num.is-pulse { animation: none; }
  [data-design="a"] .wrap-reel__grid.is-in .wrap-card { animation: none; opacity: 1; transform: none; }
  [data-design="a"] .wrap-reel__grid.is-in .wrap-card::before { animation: none; }
  [data-design="a"] .wrap-funnel__view > * { animation: none; }
  [data-design="a"] .wrap-funnel__done   { animation: none; }
  [data-design="a"] .wrap-funnel__stage  { transition: none; }
  [data-design="a"] .wrap-funnel__submit { transition: none; }
  [data-design="a"] .wrap-field input    { transition: none; }
}

/* ════════════════════════════════════════════════════════
   CONTENT WINDOWED-CENTER (principles.md item 13)
   Content in centered max-width container, never flush to edges
   ════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-hero__inner,
[data-design="a"] .wrap-funnel__stage,
[data-design="a"] .wrap-pointer--stage,
[data-design="a"] .wrap-done__card,
[data-design="a"] .wrap-footer__inner {
  max-width: 1280px;
  margin-inline: auto;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — no h-scroll at 320/390/768/1440
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-design="a"] .wrap-header__prog { max-width: 140px; }
  [data-design="a"] .wrap-header__step-label { font-size: 10px; }
  [data-design="a"] .wrap-chip { padding: var(--space-cue) var(--space-cue); }
}
@media (max-width: 560px) {
  [data-design="a"] .wrap-logo__text { font-size: 17px; }
  [data-design="a"] .wrap-hero { min-height: 100svh; }
  [data-design="a"] .wrap-bigstat__num { font-size: 84px; }
  [data-design="a"] .wrap-reel__grid { grid-template-columns: 1fr; }
  [data-design="a"] .wrap-cta { padding: 14px 20px; width: 100%; justify-content: center; }
  [data-design="a"] .wrap-funnel__submit { font-size: 16px; }
}
@media (max-width: 390px) {
  [data-design="a"] .wrap-chip { padding: 12px 14px; font-size: 15px; }
  [data-design="a"] .wrap-hero__inner { padding-inline: 0; }
  [data-design="a"] .wrap-header__bar { padding: var(--space-cue); }
}
@media (max-width: 320px) {
  [data-design="a"] .wrap-logo__text { font-size: 15px; }
  [data-design="a"] .wrap-chip { padding: 10px 12px; font-size: 14px; min-height: 52px; }
  [data-design="a"] .wrap-bigstat__num { font-size: 72px; }
}

/* ════════════════════════════════════════════════════════
   HERO FLOOR — forge_assemble opacity:1 safety net
   Covers all text under [data-mf-role="hero"] and [data-mf-role="cta"]
   ════════════════════════════════════════════════════════ */
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,h3,h4,h5,h6,p,.headline,.subtitle,.proof),
[data-design="a"] [data-mf-role="cta"],
[data-design="a"] .wrap-hero__value,
[data-design="a"] .wrap-hero__reassurance,
[data-design="a"] .wrap-step__q,
[data-design="a"] .wrap-chip,
[data-design="a"] .wrap-chip__label {
  opacity: 1 !important;
}

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