/* ═══════════════════════════════════════════════════════════
   Illume Aesthetics — Design A (Counselor remapped to [data-design="a"])
   All selectors scoped [data-design="a"] — zero counselor-scoped rules.
   ~12–16 trade-rooted color tokens on [data-design="a"] block.
   Budgeted ~1000 CSS lines.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
[data-design="a"] {
  /* Palette — Counselor remapped */
  --design-a-primary:     #1F3A2E;   /* forest — editorial accent */
  --co-bg:                #F5F2EC;
  --co-bg-deep:           #EAE5DA;
  --co-bg-edge:           #DCD5C5;
  --co-paper:             #FBF9F4;
  --co-ink:               #181715;
  --co-ink-soft:          #3A352F;
  --co-ink-mute:          #6B655C;
  --co-forest:            #1F3A2E;
  --co-forest-deep:       #122821;
  --co-copper:            #9C5A2E;
  --co-copper-deep:       #6E3D1A;
  --co-sand:              #C9BFA5;
  --co-rule:              rgba(24,23,21,.22);
  --co-rule-faint:        rgba(24,23,21,.08);

  /* Typography */
  --co-display:           'Fraunces', Georgia, serif;
  --co-body:              'Inter', system-ui, sans-serif;
  --co-mono:              'JetBrains Mono', 'Courier New', monospace;

  /* Spacing scale (×4) */
  --co-hair:   1px;
  --co-tight:  4px;
  --co-snug:   8px;
  --co-margin: 16px;
  --co-gutter: 24px;
  --co-bay:    40px;
  --co-stanza: 64px;
  --co-chapter: 96px;
  --co-folio:  144px;

  /* Radius */
  --co-r-0:    0;
  --co-r-1:    2px;
  --co-r-card: 4px;
  --co-r-pill: 999px;

  /* Motion */
  --co-ease-quiet:  cubic-bezier(.22,.65,.27,1);
  --co-ease-settle: cubic-bezier(.2,.8,.2,1);
  --co-ease-press:  cubic-bezier(.4,0,.2,1);
  --co-d-press:     160ms;
  --co-d-register:  260ms;
  --co-d-settle:    500ms;
  --co-d-arc:       700ms;

  /* Shadow */
  --co-shadow-funnel: 0 30px 60px -40px rgba(24,23,21,.18);

  /* Funnel progress */
  --co-fn-pct: 0;

  background: var(--co-bg);
  color: var(--co-ink);
  font-family: var(--co-body);
  font-size: clamp(17px,1.4vw,20px);
  line-height: 1.55;
}

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,300;1,9..144,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── 2. RESET / BASE ────────────────────────────────────────── */
[data-design="a"].dq-design *, [data-design="a"].dq-design *::before, [data-design="a"].dq-design *::after {
  box-sizing: border-box;
}
[data-design="a"].dq-design a { color: inherit; text-decoration: none; }
[data-design="a"].dq-design button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }
[data-design="a"].dq-design fieldset { border: none; margin: 0; padding: 0; }
[data-design="a"].dq-design legend { padding: 0; float: none; width: 100%; }

/* ── 3. EYEBROW / LABELS ────────────────────────────────────── */
[data-design="a"] .co-eyebrow {
  font-family: var(--co-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--co-ink-mute);
  margin-bottom: var(--co-margin);
}

/* ── 4. E1 — HEADER ─────────────────────────────────────────── */
[data-design="a"] .co-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--co-bg);
  border-bottom: 1px solid var(--co-rule-faint);
  isolation: isolate;
}
[data-design="a"] .co-header__wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 200% at 15% 50%, rgba(31,58,46,.18), transparent 55%),
    radial-gradient(140% 220% at 90% 50%, rgba(156,90,46,.16), transparent 60%);
  animation: co-header-wash 32s var(--co-ease-quiet) infinite alternate;
  opacity: .8;
}
@keyframes co-header-wash {
  0%   { opacity: .7; transform: translate3d(0,0,0); }
  50%  { opacity: 1;  transform: translate3d(.5%,0,0); }
  100% { opacity: .8; transform: translate3d(0,0,0); }
}
[data-design="a"] .co-header__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(var(--co-margin),4vw,var(--co-bay));
  height: 60px;
}
[data-design="a"] .co-header__right {
  display: flex; align-items: center; gap: var(--co-gutter);
}
[data-design="a"] .co-header__bar-prog {
  position: relative; z-index: 1;
  height: 2px; background: var(--co-rule-faint);
}
[data-design="a"] .co-header__prog-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--co-forest), var(--co-copper));
  transform: scaleX(var(--co-fn-pct, 0)); transform-origin: left;
  transition: transform var(--co-d-arc) var(--co-ease-quiet);
}

/* Logo */
[data-design="a"] .co-logo {
  display: flex; align-items: center; gap: var(--co-snug);
  text-decoration: none;
}
[data-design="a"] .co-logo__mark {
  font-family: var(--co-display);
  font-size: clamp(17px,2.2vw,22px);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  color: var(--co-ink);
  position: relative; overflow: hidden;
}
/* Logo shimmer: slow light-glint ~11s cycle, stays inside restrained ensemble */
[data-design="a"] .co-logo__mark::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform: translateX(-110%);
  animation: co-logo-shimmer 11s 3s var(--co-ease-quiet) infinite;
}
@keyframes co-logo-shimmer {
  0%,85% { transform: translateX(-110%); }
  92%   { transform: translateX(110%); }
  100%  { transform: translateX(110%); }
}
[data-design="a"] .co-logo__bar {
  display: block; width: 1px; height: 18px;
  background: var(--co-copper); flex: none;
}
[data-design="a"] .co-logo__sub {
  font-family: var(--co-mono); font-size: 10px;
  color: var(--co-ink-mute); letter-spacing: .12em; text-transform: uppercase;
}
@media (max-width: 640px) { [data-design="a"] .co-logo__sub { display: none; } }

/* Progress label */
[data-design="a"] .co-progress-label {
  font-family: var(--co-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--co-ink-mute);
  white-space: nowrap;
}

/* Menu button */
[data-design="a"] .co-menu-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--co-margin);
  background: transparent; border: 1px solid var(--co-rule);
  border-radius: var(--co-r-pill);
  font-family: var(--co-body); font-size: 13px; font-weight: 500;
  color: var(--co-ink); cursor: pointer;
  transition: background var(--co-d-press) var(--co-ease-press),
              border-color var(--co-d-press) var(--co-ease-press);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .co-menu-btn:hover {
    background: var(--co-bg-deep); border-color: var(--co-ink);
  }
}
[data-design="a"] .co-menu-btn__icon {
  display: flex; flex-direction: column; gap: 4px; width: 16px;
}
[data-design="a"] .co-menu-btn__icon span {
  display: block; height: 1px; background: var(--co-ink);
  transition: transform var(--co-d-register) var(--co-ease-settle),
              opacity var(--co-d-register) var(--co-ease-settle);
}
[data-design="a"] .co-menu-btn[aria-expanded="true"] .co-menu-btn__icon span:first-child {
  transform: translateY(5px) rotate(45deg);
}
[data-design="a"] .co-menu-btn[aria-expanded="true"] .co-menu-btn__icon span:last-child {
  transform: translateY(-5px) rotate(-45deg);
}

/* Drawer — focus trapped, display:none when closed (never opacity:0 gate) */
[data-design="a"] .co-drawer {
  position: fixed; inset: 0; z-index: 50;
  display: none;
}
[data-design="a"] .co-drawer[data-open="true"] { display: flex; }
[data-design="a"] .co-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(24,23,21,.45);
  animation: co-fade-in 200ms var(--co-ease-quiet) forwards;
}
@keyframes co-fade-in { from { opacity: 0; } to { opacity: 1; } }
[data-design="a"] .co-drawer__panel {
  position: relative; z-index: 1;
  width: min(320px, 90vw); margin-left: auto;
  background: var(--co-paper);
  padding: var(--co-stanza) var(--co-bay) var(--co-bay);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  animation: co-drawer-in var(--co-d-settle) var(--co-ease-settle) forwards;
}
@keyframes co-drawer-in { to { transform: translateX(0); } }
[data-design="a"] .co-drawer__close {
  position: absolute; top: var(--co-margin); right: var(--co-margin);
  padding: 10px; color: var(--co-ink-mute); cursor: pointer;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--co-r-1);
  transition: color var(--co-d-press) var(--co-ease-press);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .co-drawer__close:hover { color: var(--co-ink); }
}
[data-design="a"] .co-drawer__inner { display: flex; flex-direction: column; gap: var(--co-gutter); }
[data-design="a"] .co-drawer__label {
  font-family: var(--co-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--co-ink-mute);
}
[data-design="a"] .co-drawer__phone {
  font-family: var(--co-display); font-size: clamp(28px,5vw,36px);
  font-weight: 300; font-variation-settings: "opsz" 60, "SOFT" 100;
  color: var(--co-ink); text-decoration: none;
  transition: color var(--co-d-press) var(--co-ease-press);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .co-drawer__phone:hover { color: var(--co-copper); }
}
[data-design="a"] .co-drawer__note {
  font-size: 14px; color: var(--co-ink-mute); line-height: 1.6;
}

/* ── 5. HERO — Step 1 ────────────────────────────────────────── */
/* ONE animated layer: co-hero__wash (chromatic breath, ~22s+29s coprime)
   No directional primitive in the wash itself.
   hero_role="funnel_step_1" — pointer inside hero is permitted per trade.md */
[data-design="a"] .co-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--co-bay),8vw,var(--co-chapter)) clamp(var(--co-margin),4vw,var(--co-bay))
           clamp(var(--co-bay),8vw,var(--co-chapter));
  min-height: 85vh;
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: 1px solid var(--co-rule-faint);
}
[data-design="a"] .co-hero__wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
[data-design="a"] .co-hero__wash::before,
[data-design="a"] .co-hero__wash::after {
  content: ""; position: absolute; inset: -10%;
  filter: blur(8px); mix-blend-mode: multiply;
}
[data-design="a"] .co-hero__wash::before {
  background:
    radial-gradient(50% 45% at 30% 35%, rgba(31,58,46,.28), transparent 60%),
    radial-gradient(40% 40% at 78% 70%, rgba(156,90,46,.26), transparent 65%);
  animation: co-hero-wash-a 22s var(--co-ease-quiet) infinite alternate;
}
[data-design="a"] .co-hero__wash::after {
  background:
    radial-gradient(60% 50% at 80% 30%, rgba(201,191,165,.32), transparent 60%),
    radial-gradient(40% 40% at 20% 75%, rgba(31,58,46,.18), transparent 65%);
  animation: co-hero-wash-b 29s var(--co-ease-quiet) infinite alternate;
}
@keyframes co-hero-wash-a {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .85; }
  100% { transform: translate3d(-2.5%,1.5%,0) scale(1.04); opacity: 1; }
}
@keyframes co-hero-wash-b {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .75; }
  100% { transform: translate3d(1.5%,-1.5%,0) scale(1.05); opacity: 1; }
}
[data-design="a"] .co-hero__inner {
  position: relative; z-index: 1;
  max-width: 720px;
  display: flex; flex-direction: column; gap: var(--co-bay);
}
[data-design="a"] .co-hero__copy { display: flex; flex-direction: column; gap: var(--co-snug); }
[data-design="a"] .co-hero__title {
  font-family: var(--co-display);
  font-size: clamp(36px,5.5vw,72px);
  font-weight: 300;
  font-variation-settings: "opsz" 96, "SOFT" 100;
  line-height: 1.12;
  color: var(--co-ink);
  margin: 0;
}
[data-design="a"] .co-hero__title em {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 0;
  color: var(--co-forest);
}
[data-design="a"] .co-hero__reassurance {
  font-size: clamp(14px,1.1vw,16px);
  color: var(--co-ink-mute);
  margin: 0;
  margin-top: var(--co-snug);
}

/* Drawn hairline beneath headline — permitted substrate motif for premium-funnel */
[data-design="a"] .co-hero__rule-wrap {
  overflow: hidden; height: 1px;
  margin-top: var(--co-margin);
}
[data-design="a"] .co-hero__rule {
  display: block; width: 100%; height: 1px;
  background: var(--co-copper);
  transform: scaleX(0); transform-origin: left;
  animation: co-rule-draw 1200ms 300ms var(--co-ease-quiet) forwards;
}
@keyframes co-rule-draw { to { transform: scaleX(1); } }

/* ── 6. E2 — FUNNEL OPTION BUTTONS (step-advance) ──────────── */
[data-design="a"] .co-funnel__q {
  font-family: var(--co-display);
  font-size: clamp(20px,2.8vw,28px);
  font-weight: 300;
  font-variation-settings: "opsz" 60, "SOFT" 100;
  color: var(--co-ink);
  line-height: 1.25;
  margin: 0 0 var(--co-gutter);
}
[data-design="a"] .co-funnel__step--hero .co-funnel__q {
  font-size: clamp(18px,2.4vw,24px);
  margin-top: 0;
}
[data-design="a"] .co-funnel__options {
  display: flex; flex-direction: column; gap: var(--co-margin);
}
[data-design="a"] .co-funnel__opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--co-margin);
  background: var(--co-paper);
  color: var(--co-ink);
  border: 1px solid var(--co-rule-faint);
  border-radius: var(--co-r-pill);
  padding: 16px 24px;
  min-height: 56px;
  font-family: var(--co-body); font-size: clamp(15px,1.1vw,17px); font-weight: 500;
  text-align: left; cursor: pointer;
  transition:
    background var(--co-d-press) var(--co-ease-press),
    border-color var(--co-d-press) var(--co-ease-press),
    transform var(--co-d-press) var(--co-ease-press);
  /* staggered mount animation */
  opacity: 0;
  transform: translateY(8px);
  animation: co-opt-in 320ms var(--co-ease-settle) both;
}
[data-design="a"] .co-funnel__opt:nth-child(1) { animation-delay: 80ms; }
[data-design="a"] .co-funnel__opt:nth-child(2) { animation-delay: 140ms; }
[data-design="a"] .co-funnel__opt:nth-child(3) { animation-delay: 200ms; }
[data-design="a"] .co-funnel__opt:nth-child(4) { animation-delay: 260ms; }
[data-design="a"] .co-funnel__opt:nth-child(5) { animation-delay: 320ms; }
[data-design="a"] .co-funnel__opt:nth-child(6) { animation-delay: 380ms; }
@keyframes co-opt-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .co-funnel__opt:hover {
    background: var(--co-bg-deep);
    border-color: var(--co-ink);
    transform: translateY(-1px);
  }
}
[data-design="a"] .co-funnel__opt:active {
  transform: translateY(1px) scale(.99);
  background: var(--co-bg-deep);
}
[data-design="a"] .co-funnel__opt:focus-visible {
  outline: 2px solid var(--co-forest); outline-offset: 2px;
}
/* Copper dot — appears on hover, CTA dot rhyme */
[data-design="a"] .co-funnel__opt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--co-copper); flex: none; opacity: 0;
  transition: opacity var(--co-d-press) var(--co-ease-press);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .co-funnel__opt:hover .co-funnel__opt-dot { opacity: 1; }
}

/* ── 7. E6 — POINTER (bridge + step variants) ───────────────── */
/* Always visible: opacity:1 at first paint, no reveal-gate.
   The bridge pointer sits ≤1 element from #funnel.           */
[data-design="a"] .co-pointer {
  position: relative; z-index: 5; pointer-events: none;
  padding: 0 clamp(var(--co-margin),4vw,var(--co-bay));
}
[data-design="a"] .co-pointer--bridge {
  max-width: 1480px; margin: 0 auto;
  padding-top: var(--co-gutter); padding-bottom: var(--co-snug);
}
[data-design="a"] .co-pointer--hero {
  padding-left: 0; padding-right: 0;
  margin: calc(var(--co-snug) * -1) 0 0;
}
[data-design="a"] .co-pointer--step {
  padding: 0; margin-bottom: var(--co-margin);
}
[data-design="a"] .co-pointer__inner {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--co-snug); pointer-events: auto;
}
/* Label always visible (not opacity:0 gated) */
[data-design="a"] .co-pointer__label {
  font-family: var(--co-body); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--co-ink-mute);
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 1; /* always visible — no reveal-gate */
  animation: co-pointer-label-pulse 7s 1s var(--co-ease-quiet) infinite;
}
@keyframes co-pointer-label-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .55; }
}
[data-design="a"] .co-pointer__label::before {
  content: ""; width: 20px; height: 1px; background: var(--co-copper); flex: none;
}
/* Rule: draws in on load, breathes thereafter */
[data-design="a"] .co-pointer__rule {
  width: 1px; height: 72px;
  background: linear-gradient(to bottom, transparent, var(--co-copper) 35%, var(--co-forest) 100%);
  transform-origin: top center;
  transform: scaleY(1); /* always rendered */
  animation: co-pointer-breath 5.4s 1.2s var(--co-ease-quiet) infinite;
}
@keyframes co-pointer-breath {
  0%,100% { opacity: 1; }
  50%     { opacity: .45; }
}
/* Glyph: visible, gentle bob */
[data-design="a"] .co-pointer__glyph {
  width: 18px; height: 18px; color: var(--co-forest);
  opacity: 1; /* always visible */
  animation: co-pointer-glyph-bob 5.4s 1.5s var(--co-ease-quiet) infinite;
}
@keyframes co-pointer-glyph-bob {
  0%,100% { opacity: 1; transform: translateY(0); }
  50%     { opacity: .5; transform: translateY(4px); }
}

/* ── 8. E5 — FUNNEL SECTION ─────────────────────────────────── */
[data-design="a"] .co-funnel-section {
  padding: var(--co-stanza) clamp(var(--co-margin),4vw,var(--co-bay));
  background: var(--co-bg);
}
[data-design="a"] .co-funnel {
  max-width: 720px; margin: 0 auto;
  background: var(--co-paper);
  border: 1px solid var(--co-rule-faint);
  border-radius: var(--co-r-card);
  box-shadow: var(--co-shadow-funnel);
  overflow: hidden;
}
/* Progress bar */
[data-design="a"] .co-funnel__progress {
  display: flex; align-items: center; gap: var(--co-margin);
  padding: var(--co-margin) var(--co-gutter);
  border-bottom: 1px solid var(--co-rule-faint);
}
[data-design="a"] .co-funnel__progress-num {
  font-family: var(--co-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--co-ink-mute); white-space: nowrap; flex: none;
}
[data-design="a"] .co-funnel__progress-bar {
  flex: 1; height: 2px; background: var(--co-rule-faint);
  border-radius: 2px; position: relative; overflow: hidden;
}
[data-design="a"] .co-funnel__progress-fill {
  display: block; position: absolute; inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, var(--co-forest), var(--co-copper));
  transform: scaleX(var(--co-fn-pct, 0.17)); transform-origin: left;
  transition: transform var(--co-d-arc) var(--co-ease-quiet);
}

/* Funnel steps container */
[data-design="a"] .co-funnel__steps {
  position: relative;
  padding: clamp(var(--co-gutter),4vw,var(--co-bay));
  min-height: 420px;
  overflow: hidden;
}

/* Individual step — absolute positioned, transitions */
[data-design="a"] .co-funnel__step {
  position: absolute;
  inset: clamp(var(--co-gutter),4vw,var(--co-bay));
  opacity: 0; pointer-events: none;
  transform: translateY(16px);
  transition:
    opacity var(--co-d-arc) var(--co-ease-quiet),
    transform var(--co-d-arc) var(--co-ease-quiet);
}
[data-design="a"] .co-funnel__step[data-active="true"] {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
/* Hero step is in-flow (not inside funnel container) */
[data-design="a"] .co-funnel__step--hero {
  position: static;
  inset: unset;
  opacity: 1; pointer-events: auto;
  transform: none;
  transition: none;
}

/* Back button */
[data-design="a"] .co-funnel__actions {
  margin-top: var(--co-bay);
}
[data-design="a"] .co-funnel__back {
  font-family: var(--co-body); font-size: 13px; font-weight: 500;
  color: var(--co-ink-mute); letter-spacing: .04em;
  padding: 8px 0; min-height: 44px; min-width: 44px;
  cursor: pointer; background: none; border: none;
  transition: color var(--co-d-press) var(--co-ease-press);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .co-funnel__back:hover { color: var(--co-ink); }
}

/* Contact step */
[data-design="a"] .co-funnel__contact-note {
  font-size: 14px; color: var(--co-ink-mute);
  margin: calc(-1 * var(--co-snug)) 0 var(--co-gutter);
}
[data-design="a"] .co-funnel__fields {
  display: flex; flex-direction: column; gap: var(--co-margin);
  margin-bottom: var(--co-bay);
}
[data-design="a"] .co-funnel__field-wrap {
  display: flex; flex-direction: column; gap: var(--co-tight);
}
[data-design="a"] .co-funnel__label {
  font-family: var(--co-body); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--co-ink-mute);
}
[data-design="a"] .co-funnel__field {
  background: var(--co-bg); color: var(--co-ink);
  border: 1px solid var(--co-bg-edge);
  border-radius: var(--co-r-card);
  padding: 14px var(--co-margin);
  font-family: var(--co-body); font-size: 16px;
  min-height: 52px;
  transition: border-color var(--co-d-register) var(--co-ease-press);
}
[data-design="a"] .co-funnel__field:focus {
  outline: none;
  border-color: var(--co-forest);
  box-shadow: 0 0 0 3px rgba(31,58,46,.12);
}
[data-design="a"] .co-funnel__select { cursor: pointer; }
[data-design="a"] .co-funnel__submit-wrap { margin-bottom: var(--co-margin); }

/* Done / completion step */
[data-design="a"] .co-funnel__step--done {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--co-margin);
}
[data-design="a"] .co-funnel__check {
  width: 64px; height: 64px;
  background: var(--co-forest); color: var(--co-paper);
  border-radius: 50%;
  display: grid; place-items: center;
  transform: scale(0.95);
  animation: co-check-pop 600ms var(--co-ease-settle) forwards;
}
@keyframes co-check-pop {
  0%   { transform: scale(0.95); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
[data-design="a"] .co-funnel__done-title {
  font-family: var(--co-display);
  font-size: clamp(22px,3vw,32px);
  font-weight: 300;
  font-variation-settings: "opsz" 60, "SOFT" 100;
  color: var(--co-ink); margin: 0;
}
[data-design="a"] .co-funnel__done-body {
  font-size: 15px; color: var(--co-ink-soft);
  max-width: 480px; text-align: center;
}

/* ── 9. E2 — CTA PILL (magnetic hover, copper dot) ─────────── */
[data-design="a"] .co-cta {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px;
  background: var(--co-ink); color: var(--co-bg);
  font-family: var(--co-body); font-size: 15px; font-weight: 600;
  letter-spacing: -.005em;
  border: 0; border-radius: var(--co-r-pill); cursor: pointer;
  text-decoration: none; isolation: isolate; overflow: hidden;
  transition: transform var(--co-d-press) var(--co-ease-press);
  animation: co-cta-breath 5.4s var(--co-ease-quiet) infinite;
  min-height: 56px;
}
[data-design="a"] .co-cta__bg {
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(
    120px 120px at var(--co-cta-x, 50%) var(--co-cta-y, 50%),
    rgba(156,90,46,.45), transparent 70%
  );
  opacity: 0;
  transition: opacity var(--co-d-register) var(--co-ease-press);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .co-cta:hover .co-cta__bg { opacity: 1; }
}
[data-design="a"] .co-cta__label,
[data-design="a"] .co-cta__dot { position: relative; z-index: 1; }
[data-design="a"] .co-cta__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--co-copper); flex: none;
  transition:
    transform var(--co-d-register) var(--co-ease-press),
    background var(--co-d-press) var(--co-ease-press);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .co-cta:hover .co-cta__dot {
    background: var(--co-bg);
    transform: translateX(4px) scale(1.2);
  }
}
[data-design="a"] .co-cta:active { transform: translateY(1px) scale(.99); }
[data-design="a"] .co-cta:focus-visible { outline: 2px solid var(--co-copper); outline-offset: 3px; }
@keyframes co-cta-breath {
  0%,100% { box-shadow: 0 0 0 0 rgba(156,90,46,0); }
  50%      { box-shadow: 0 0 0 8px rgba(156,90,46,.10); }
}
[data-design="a"] .co-cta--submit { width: 100%; justify-content: center; }
[data-design="a"] .co-cta--done { margin-top: var(--co-snug); }

/* ── 10. E4 — REASSURANCE BAR (scroll-linked — TRIAD-2) ─────── */
/* Scroll-driven opacity on entry — genuine scroll-linked motion  */
[data-design="a"] .co-reassurance {
  padding: var(--co-stanza) clamp(var(--co-margin),4vw,var(--co-bay));
  background: var(--co-bg-deep);
  border-top: 1px solid var(--co-rule-faint);
  border-bottom: 1px solid var(--co-rule-faint);
}
[data-design="a"] .co-reassurance__inner {
  max-width: 1200px; margin: 0 auto;
}
[data-design="a"] .co-reassurance__rule {
  height: 1px; width: 0;
  background: var(--co-copper);
  margin-bottom: var(--co-bay);
  /* JS sets width% via scroll progress — TRIAD-2 scroll-linked motion */
  transition: none;
}
[data-design="a"] .co-reassurance__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--co-gutter);
}
[data-design="a"] .co-trust-item {
  display: flex; align-items: flex-start; gap: var(--co-snug);
  font-size: 14px; color: var(--co-ink-soft); line-height: 1.5;
  opacity: 0; transform: translateY(12px);
  transition:
    opacity 500ms var(--co-ease-settle),
    transform 500ms var(--co-ease-settle);
}
[data-design="a"] .co-trust-item[data-in="true"] {
  opacity: 1; transform: translateY(0);
}
[data-design="a"] .co-trust-item__icon {
  color: var(--co-copper); font-size: 10px; flex: none;
  margin-top: 3px;
}
[data-design="a"] .co-trust-item__text { line-height: 1.5; }

/* ── 11. FOOTER ─────────────────────────────────────────────── */
[data-design="a"] .co-footer {
  background: var(--co-forest-deep);
  color: var(--co-sand);
  padding: var(--co-chapter) clamp(var(--co-margin),4vw,var(--co-bay)) var(--co-stanza);
}
[data-design="a"] .co-footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--co-bay);
}
@media (max-width: 768px) {
  [data-design="a"] .co-footer__inner { grid-template-columns: 1fr; }
}
[data-design="a"] .co-footer__brand {
  display: flex; flex-direction: column; gap: var(--co-snug);
}
[data-design="a"] .co-footer__name {
  font-family: var(--co-display);
  font-size: 22px; font-weight: 300;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  color: var(--co-bg);
}
[data-design="a"] .co-footer__rule {
  display: block; width: 32px; height: 1px;
  background: var(--co-copper);
}
[data-design="a"] .co-footer__loc {
  font-family: var(--co-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--co-sand);
}
[data-design="a"] .co-footer__contact {
  display: flex; flex-direction: column; gap: var(--co-snug);
}
[data-design="a"] .co-footer__phone {
  font-family: var(--co-display);
  font-size: clamp(20px,2.5vw,26px);
  font-weight: 300;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  color: var(--co-bg);
  transition: color var(--co-d-press) var(--co-ease-press);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .co-footer__phone:hover { color: var(--co-copper); }
}
[data-design="a"] .co-footer__addr,
[data-design="a"] .co-footer__email {
  font-size: 14px; color: var(--co-sand); line-height: 1.6;
}
[data-design="a"] .co-footer__legal {
  font-size: 12px; color: var(--co-ink-mute);
  line-height: 1.6; display: flex; flex-direction: column; gap: var(--co-snug);
}
[data-design="a"] .co-footer__legal p { margin: 0; }

/* ── 12. TRIAD-2 — SCROLL-LINKED MOTION ────────────────────── */
/* The reassurance rule width is driven by scroll progress via JS
   (transforms only — width via scaleX on a full-width element).
   This satisfies TRIAD-2: genuine scroll-driven motion, not fade-in. */
[data-design="a"] .co-reassurance__rule {
  /* Full-width element; JS sets transform:scaleX(progress) */
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
}

/* ═══════════════════════════════════════════════════════════
   13. PREFERS-REDUCED-MOTION — all atmospheric loops off;
       structural transitions degrade to ≤120ms; functionality preserved
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .co-header__wash,
  [data-design="a"] .co-hero__wash::before,
  [data-design="a"] .co-hero__wash::after,
  [data-design="a"] .co-logo__mark::after,
  [data-design="a"] .co-pointer__label,
  [data-design="a"] .co-pointer__rule,
  [data-design="a"] .co-pointer__glyph,
  [data-design="a"] .co-cta { animation: none !important; }
  [data-design="a"] .co-hero__rule { transition-duration: 80ms !important; }
  [data-design="a"] .co-funnel__step {
    transition-duration: 80ms !important;
    transform: none !important;
  }
  [data-design="a"] .co-funnel__check { animation: none !important; transform: scale(1) !important; }
  [data-design="a"] .co-funnel__opt { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-design="a"] .co-trust-item { transition-duration: 80ms !important; }
  [data-design="a"] .co-pointer__label { opacity: 1 !important; }
  [data-design="a"] .co-pointer__rule { opacity: 1 !important; }
  [data-design="a"] .co-pointer__glyph { opacity: 1 !important; transform: none !important; }
  [data-design="a"] .co-reassurance__rule { transition: none; transform: scaleX(1) !important; }
}

/* ═══════════════════════════════════════════════════════════
   14. MOBILE — no h-scroll; scoped to .dq-design per contract
   APPENDED AT BOTTOM, SCOPED to .dq-design
   ═══════════════════════════════════════════════════════════ */
[data-design="a"].dq-design,
[data-design="a"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="a"].dq-design * {
  min-width: 0;
}
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

/* Responsive layout adjustments */
@media (max-width: 560px) {
  [data-design="a"] .co-hero {
    min-height: 100svh;
    padding-top: clamp(var(--co-bay),8vw,var(--co-chapter));
  }
  [data-design="a"] .co-funnel__steps { min-height: 360px; }
  [data-design="a"] .co-footer__inner { grid-template-columns: 1fr; }
  [data-design="a"] .co-reassurance__grid { grid-template-columns: 1fr; }
  [data-design="a"] .co-funnel__opt { padding: 16px var(--co-margin); min-height: 56px; }
}
@media (max-width: 390px) {
  [data-design="a"] .co-header__right .co-progress-label { display: none; }
}

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