/* ============================================================
   NW Real Estate Restorations — Design A (Drafted Wall, remapped to data-design="a")
   Trade: painting. Slot-scoped [data-design="a"] throughout. Keyframes prefixed a-.
   Era: Sol LeWitt wall-drawing certificates × ozalid/diazo reprographics —
   tracing-paper warmth, blueprint cyan, graphite mark-up.
   ============================================================ */

[data-design="a"] {
  /* Color — tracing-paper / vellum / blueprint-cyan (never pure white, never pure black) */
  --a-bg:         #F2EDE0;  /* tracing-paper page */
  --a-surface:    #FBF6E8;  /* vellum cream — cards, panels */
  --a-surface-2:  #E9E2CE;  /* drafting-table felt */
  --a-ink:        #1C1A17;  /* graphite — primary text */
  --a-ink-2:      #3A352D;  /* warm graphite — body */
  --a-muted:      #7A7268;  /* faded pencil — captions, meta */
  --a-border:     #C7BFAE;  /* drafting-pencil hairline */
  --a-border-2:   #A89E89;  /* weft thread — stronger separator */
  --a-accent:     #0E5C8A;  /* blueprint cyan / diazo — CTA, witness stamp */
  --a-accent-soft:#C8DCE8;  /* ozalid wash — active backgrounds */
  --a-accent-2:   #9A6E3C;  /* ozalid sepia — eyebrows, section labels */
  --a-critical:   #B53024;  /* architect's mark-up red — error */
  --a-success:    #1F6B4A;  /* drafter's green — done state */

  /* Exposed primary token (contract) */
  --design-a-primary: var(--a-accent);

  /* Typography */
  --a-font-display: 'Charter', 'Iowan Old Style', 'Sitka Text', Cambria, Georgia, serif;
  --a-font-body:    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --a-font-spec:    ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', Menlo, Consolas, monospace;

  /* Spacing — drafting ticks */
  --a-step: 4px; --a-row: 8px; --a-cut: 12px; --a-cell: 16px;
  --a-bay: 24px; --a-pane: 32px; --a-bay-2: 48px; --a-wall: 80px; --a-room: 120px;

  /* Motion */
  --a-dur-tick: 140ms; --a-dur-settle: 280ms; --a-dur-stamp: 200ms;
  --a-dur-draw: 4500ms; --a-dur-edge: 14000ms; --a-dur-grid: 28000ms;
  --a-ease-draft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --a-ease-stamp: cubic-bezier(0.6, -0.1, 0.4, 1.1);
  --a-ease-edge:  cubic-bezier(0.45, 0.05, 0.55, 0.95);

  /* Radius — the drafting world is square */
  --a-r-card: 2px; --a-r-panel: 4px; --a-r-stamp: 3px; --a-r-pill: 999px;

  background: var(--a-bg);
  color: var(--a-ink);
  font-family: var(--a-font-body);
  -webkit-font-smoothing: antialiased;
}

[data-design="a"].dq-design { display: block; }
[data-design="a"] *, [data-design="a"] *::before, [data-design="a"] *::after { box-sizing: border-box; }
[data-design="a"] h1, [data-design="a"] h2, [data-design="a"] p,
[data-design="a"] ol, [data-design="a"] ul { margin: 0; }

/* ===== Sticker (badge) ===== */
[data-design="a"] .a-stamp {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--a-r-pill);
  font: 500 11px/1.5 var(--a-font-spec); letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid currentColor;
}
[data-design="a"] .a-stamp--cyan  { color: var(--a-accent); }
[data-design="a"] .a-stamp--sepia { color: var(--a-accent-2); }
[data-design="a"] .a-stamp--green { color: var(--a-success); }

/* ============================================================
   1. Animated minimalist header — ozalid grid pulse + crosshairs + weft burger
   ============================================================ */
[data-design="a"] .a-header {
  position: sticky; top: 0; z-index: 40; background: var(--a-bg);
  border-bottom: 1px solid var(--a-border); isolation: isolate;
}
[data-design="a"] .a-header__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--a-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--a-border) 1px, transparent 1px);
  background-size: 24px 24px; opacity: 0.05;
  animation: a-grid-pulse var(--a-dur-grid) ease-in-out infinite;
}
@keyframes a-grid-pulse { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.11; } }
[data-design="a"] .a-header__cross {
  position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0;
  background:
    linear-gradient(var(--a-accent-2), var(--a-accent-2)) center/100% 1px no-repeat,
    linear-gradient(var(--a-accent-2), var(--a-accent-2)) center/1px 100% no-repeat;
  animation: a-cross-fade 31000ms ease-in-out infinite;
}
[data-design="a"] .a-header__cross--tl { top: 8px; left: 8px; }
[data-design="a"] .a-header__cross--tr { top: 8px; right: 8px; animation-delay: 6000ms; }
@keyframes a-cross-fade { 0%, 100% { opacity: 0; } 40%, 60% { opacity: 0.5; } }
[data-design="a"] .a-header__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--a-cell); max-width: 1200px; margin-inline: auto;
  height: 72px; padding: 0 clamp(16px, 4vw, 32px);
}
[data-design="a"] .a-logo { text-decoration: none; color: var(--a-ink); }
[data-design="a"] .a-logo__mark {
  font: 500 clamp(17px, 2.4vw, 22px)/1.05 var(--a-font-display); letter-spacing: -0.005em;
}
[data-design="a"] .a-burger {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; min-width: 44px;
  background: transparent; border: 1px solid var(--a-border); padding: 10px 12px; border-radius: var(--a-r-stamp);
  cursor: pointer;
  transition: border-color var(--a-dur-tick) var(--a-ease-draft);
}
[data-design="a"] .a-burger:hover { border-color: var(--a-ink); }
[data-design="a"] .a-burger:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--a-accent), transparent 62%); }
[data-design="a"] .a-burger__weft { display: block; width: 18px; height: 1.5px; background: var(--a-ink); }

/* Drawer — full-screen vellum overlay, crosshair registration, sepia-numbered marks */
[data-design="a"] .a-drawer {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in oklab, var(--a-ink), transparent 18%);
  opacity: 0; pointer-events: none;
  transition: opacity var(--a-dur-settle) var(--a-ease-draft);
}
[data-design="a"] .a-drawer[data-open="true"] { opacity: 1; pointer-events: auto; }
[data-design="a"] .a-drawer__sheet {
  position: absolute; inset: 0; background: var(--a-surface);
  padding: clamp(28px, 6vw, 72px) clamp(20px, 5vw, 64px);
  overflow-y: auto;
  transform: translateY(-12px); transition: transform var(--a-dur-settle) var(--a-ease-draft);
}
[data-design="a"] .a-drawer[data-open="true"] .a-drawer__sheet { transform: translateY(0); }
[data-design="a"] .a-drawer__cross {
  position: absolute; width: 18px; height: 18px; pointer-events: none;
  background:
    linear-gradient(var(--a-accent-2), var(--a-accent-2)) center/100% 1px no-repeat,
    linear-gradient(var(--a-accent-2), var(--a-accent-2)) center/1px 100% no-repeat;
  opacity: 0.55;
}
[data-design="a"] .a-drawer__cross--tl { top: 18px; left: 18px; }
[data-design="a"] .a-drawer__cross--br { bottom: 18px; right: 18px; }
[data-design="a"] .a-drawer__close {
  position: absolute; top: 20px; right: 20px; min-height: 44px;
  background: transparent; border: 1px solid var(--a-border); padding: 8px 16px; border-radius: var(--a-r-stamp);
  font: 500 11px/1 var(--a-font-spec); letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-ink); cursor: pointer;
}
[data-design="a"] .a-drawer__close:hover { border-color: var(--a-ink); }
[data-design="a"] .a-drawer__close:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--a-accent), transparent 62%); }
[data-design="a"] .a-drawer__nav {
  display: flex; flex-direction: column; gap: var(--a-bay);
  max-width: 640px; margin: clamp(48px, 9vw, 88px) auto 0;
}
[data-design="a"] .a-drawer__nav a {
  position: relative; display: inline-flex; align-items: baseline;
  font: 500 clamp(26px, 5vw, 34px)/1.1 var(--a-font-display); letter-spacing: -0.01em;
  color: var(--a-ink); text-decoration: none; min-height: 44px;
  border-bottom: 1px solid var(--a-border); padding-bottom: var(--a-cut);
  transition: color var(--a-dur-tick) var(--a-ease-draft);
}
[data-design="a"] .a-drawer__num {
  font: 500 11px/1 var(--a-font-spec); letter-spacing: 0.14em; color: var(--a-accent-2);
  margin-right: var(--a-cell); align-self: center;
}
[data-design="a"] .a-drawer__nav a:hover, [data-design="a"] .a-drawer__nav a:focus-visible { color: var(--a-accent); outline: none; }
[data-design="a"] .a-drawer__funnel { color: var(--a-accent); }
[data-design="a"] .a-drawer__phone {
  font-family: var(--a-font-spec) !important; font-size: clamp(16px, 3vw, 20px) !important;
  letter-spacing: 0.02em;
}
[data-design="a"] .a-drawer__addr {
  max-width: 640px; margin: var(--a-bay-2) auto 0;
  font: 500 12px/1.5 var(--a-font-spec); letter-spacing: 0.04em; color: var(--a-muted);
}

/* ============================================================
   2. Animated CTA — blueprint witness stamp (funnel anchor)
   ============================================================ */
[data-design="a"] .a-cta {
  position: relative; display: inline-flex; align-items: center; gap: var(--a-cut);
  padding: 14px 22px; min-height: 44px;
  background: var(--a-accent); color: var(--a-bg);
  border: 0; border-radius: var(--a-r-stamp);
  box-shadow: inset 0 0 0 1.5px var(--a-accent), inset 0 0 0 4px var(--a-bg), inset 0 0 0 5px var(--a-accent);
  font: 500 12px/1 var(--a-font-spec); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; overflow: visible;
  transition: box-shadow var(--a-dur-tick) var(--a-ease-draft), transform var(--a-dur-tick) var(--a-ease-stamp);
}
[data-design="a"] .a-cta__ring {
  position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 2px; pointer-events: none;
  animation: a-stamp-breath var(--a-dur-draw) ease-in-out infinite;
}
@keyframes a-stamp-breath { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.025); opacity: 1; } }
[data-design="a"] .a-cta__stamp {
  position: relative; z-index: 1; opacity: 0.6;
  padding-right: var(--a-row); border-right: 1px solid color-mix(in oklab, var(--a-bg), transparent 70%);
}
[data-design="a"] .a-cta__label { position: relative; z-index: 1; letter-spacing: 0.06em; }
[data-design="a"] .a-cta__tick {
  position: relative; z-index: 1; width: 40px; height: 12px; color: currentColor;
  transition: transform var(--a-dur-settle) var(--a-ease-draft);
}
[data-design="a"] .a-cta__tick svg { display: block; width: 100%; height: 100%; }
[data-design="a"] .a-cta:hover, [data-design="a"] .a-cta:focus-visible {
  box-shadow: inset 0 0 0 2px var(--a-accent), inset 0 0 0 4px var(--a-bg), inset 0 0 0 5px var(--a-accent);
  outline: none;
}
[data-design="a"] .a-cta:hover .a-cta__tick, [data-design="a"] .a-cta:focus-visible .a-cta__tick { transform: translateX(4px); }
[data-design="a"] .a-cta:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--a-accent), inset 0 0 0 4px var(--a-bg), inset 0 0 0 5px var(--a-accent),
    0 0 0 3px color-mix(in oklab, var(--a-accent), transparent 60%);
}
[data-design="a"] .a-cta:active { transform: translateY(2px); }

/* ============================================================
   HERO — themed-movement schematic: ONE animated layer.
   Drawdown color-fields that keep curing (ambient, perceptible, on-brand).
   No directional primitive. Text opacity:1 at first paint.
   ============================================================ */
[data-design="a"] .a-hero {
  position: relative; overflow: hidden; background: var(--a-bg);
  padding: clamp(72px, 12vh, 140px) clamp(20px, 4vw, 48px) clamp(56px, 9vh, 110px);
  min-height: clamp(520px, 74vh, 760px); display: flex; align-items: center;
}
/* one animated substrate layer (wash group): three soft color-fields curing on long staggered cycles */
[data-design="a"] .a-hero__wash {
  position: absolute; inset: 0; pointer-events: none;
  /* static ozalid grid beneath the moving fields (a non-moving tint is allowed) */
  background-image:
    linear-gradient(to right, var(--a-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--a-border) 1px, transparent 1px);
  background-size: 32px 32px;
}
[data-design="a"] .a-hero__field {
  position: absolute; border-radius: 3px;
  mix-blend-mode: multiply; filter: blur(2px);
  animation: a-hero-cure 13s var(--a-ease-edge) infinite;
}
[data-design="a"] .a-hero__field--1 {
  left: 6%; top: 14%; width: 40%; height: 46%;
  background: color-mix(in oklab, var(--a-accent), transparent 64%);
  animation-delay: 0ms;
}
[data-design="a"] .a-hero__field--2 {
  right: 8%; top: 30%; width: 34%; height: 50%;
  background: color-mix(in oklab, var(--a-accent-2), transparent 66%);
  animation-delay: 2400ms;
}
[data-design="a"] .a-hero__field--3 {
  left: 38%; bottom: 8%; width: 30%; height: 40%;
  background: color-mix(in oklab, var(--a-success), transparent 70%);
  animation-delay: 4800ms;
}
/* arrival is the initial cure-in; the cycle keeps developing/receding forever (ambient, not frozen) */
@keyframes a-hero-cure {
  0%   { opacity: 0.16; transform: scale(0.97); }
  45%  { opacity: 0.62; transform: scale(1.03); }
  70%  { opacity: 0.62; transform: scale(1.03); }
  100% { opacity: 0.16; transform: scale(0.97); }
}
[data-design="a"] .a-hero__inner { position: relative; z-index: 1; max-width: 760px; }
[data-design="a"] .a-hero__kicker {
  font: 500 13px/1 var(--a-font-spec); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--a-accent-2); margin-bottom: var(--a-cell);
}
[data-design="a"] .a-hero__title {
  font: 500 clamp(38px, 6.5vw, 64px)/1.08 var(--a-font-display); letter-spacing: -0.012em;
  color: var(--a-ink); text-wrap: balance; opacity: 1; margin-bottom: var(--a-bay);
}
[data-design="a"] .a-hero__sub {
  font: 400 clamp(17px, 2.4vw, 21px)/1.5 var(--a-font-body); color: var(--a-ink-2);
  max-width: 56ch; margin-bottom: var(--a-cell);
}
[data-design="a"] .a-hero__proof {
  font: 500 13px/1.5 var(--a-font-spec); letter-spacing: 0.02em; color: var(--a-muted);
  margin-bottom: var(--a-bay-2);
}
[data-design="a"] .a-hero__cta { vertical-align: middle; }
[data-design="a"] .a-hero__chip { margin-left: var(--a-cell); vertical-align: middle; }

/* ============================================================
   6. Animated pointer — dimension line (hero -> funnel). Wayfinding only.
   MUST render: opacity 1, bounding-box height >= 8px at all widths.
   ============================================================ */
[data-design="a"] .a-pointer {
  display: flex; justify-content: center; color: var(--a-muted);
  padding: clamp(36px, 7vw, 72px) 16px clamp(48px, 9vw, 96px);
}
[data-design="a"] .a-pointer__hit {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: currentColor;
}
[data-design="a"] .a-pointer__tick { display: block; width: 16px; height: 1px; background: currentColor; opacity: 0.75; }
[data-design="a"] .a-pointer__rule {
  display: block; width: 1px; height: 56px; background: currentColor; transform-origin: top center;
  animation: a-pointer-extend 5s ease-in-out infinite;
}
[data-design="a"] .a-pointer__label {
  font: 500 11px/1 var(--a-font-spec); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--a-accent); opacity: 0; animation: a-pointer-stamp 5s ease-in-out infinite;
}
@keyframes a-pointer-extend { 0%, 100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 0.85; } }
@keyframes a-pointer-stamp { 0%, 30%, 100% { opacity: 0; } 50%, 70% { opacity: 0.9; } }

/* ============================================================
   5. The qualifying funnel (Specify your project)
   ============================================================ */
[data-design="a"] .a-survey { background: var(--a-bg); padding: var(--a-room) clamp(20px, 4vw, 48px); border-top: 1px solid var(--a-border); }
[data-design="a"] .a-survey__hd { max-width: 720px; margin: 0 auto var(--a-bay-2); }
[data-design="a"] .a-survey__title {
  font: 500 clamp(32px, 5vw, 48px)/1.1 var(--a-font-display); letter-spacing: -0.012em;
  color: var(--a-ink); margin: var(--a-cell) 0; text-wrap: balance;
}
[data-design="a"] .a-survey__intro { font: 400 17px/1.55 var(--a-font-body); color: var(--a-ink-2); max-width: 60ch; }
[data-design="a"] .a-survey__form { max-width: 880px; margin: 0 auto; }
[data-design="a"] .a-survey__stack { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--a-border-2); }
[data-design="a"] .a-survey__step {
  border-bottom: 1px solid var(--a-border); position: relative; background: var(--a-bg);
  transition: background var(--a-dur-settle) var(--a-ease-draft);
}
[data-design="a"] .a-survey__step[data-state="active"] {
  background: color-mix(in oklab, var(--a-bg), var(--a-accent) 4%);
  box-shadow: inset 0 -2px 0 0 var(--a-accent);
}
[data-design="a"] .a-survey__step[data-state="locked"] { opacity: 0.5; }
[data-design="a"] .a-survey__step[data-state="scoped"] .a-survey__ans::before {
  content: "SCOPED"; display: inline-block; margin-right: var(--a-row); padding: 2px 8px;
  border: 1px solid var(--a-success); color: var(--a-success); border-radius: var(--a-r-pill);
  font: 500 10px/1.5 var(--a-font-spec); letter-spacing: 0.14em;
}
[data-design="a"] .a-survey__row {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline;
  gap: var(--a-bay); padding: var(--a-bay) 0;
}
[data-design="a"] .a-survey__idx { font: 500 12px/1 var(--a-font-spec); letter-spacing: 0.14em; color: var(--a-accent-2); }
[data-design="a"] .a-survey__q { font: 500 clamp(19px, 2.6vw, 22px)/1.2 var(--a-font-display); color: var(--a-ink); letter-spacing: -0.008em; }
[data-design="a"] .a-survey__ans { font: 500 12px/1.4 var(--a-font-spec); color: var(--a-ink-2); text-align: right; }
[data-design="a"] .a-survey__body {
  border: 0; padding: 0 0 0 64px; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-cell);
  max-height: 0; overflow: hidden;
  transition: max-height var(--a-dur-settle) var(--a-ease-draft), padding var(--a-dur-settle) var(--a-ease-draft);
}
[data-design="a"] .a-survey__step[data-state="active"] .a-survey__body { max-height: 760px; padding-bottom: var(--a-bay); }
[data-design="a"] .a-survey__step--final .a-survey__body { grid-template-columns: 1fr 1fr; }

[data-design="a"] .a-pick {
  display: flex; align-items: center; gap: var(--a-row); padding: 12px 16px; min-height: 44px;
  border: 1px solid var(--a-border); border-radius: var(--a-r-stamp);
  font: 500 12px/1.2 var(--a-font-spec); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--a-ink); cursor: pointer; background: var(--a-surface); position: relative;
  transition: border-color var(--a-dur-tick) var(--a-ease-draft), background var(--a-dur-tick) var(--a-ease-draft), color var(--a-dur-tick) var(--a-ease-draft);
}
[data-design="a"] .a-pick input { position: absolute; opacity: 0; pointer-events: none; }
[data-design="a"] .a-pick:hover { border-color: var(--a-ink); }
[data-design="a"] .a-pick:has(input:checked) { background: var(--a-accent-soft); border-color: var(--a-accent); color: var(--a-accent); }
[data-design="a"] .a-pick:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, var(--a-accent), transparent 62%); outline: none; }

[data-design="a"] .a-field { display: flex; flex-direction: column; gap: var(--a-row); }
[data-design="a"] .a-field--full { grid-column: 1 / -1; }
[data-design="a"] .a-field__lab {
  font: 500 11px/1 var(--a-font-spec); letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-accent-2);
}
[data-design="a"] .a-field input, [data-design="a"] .a-field textarea {
  border: 0; border-bottom: 1px solid var(--a-ink); background: transparent;
  font: 400 16px/1.4 var(--a-font-spec); color: var(--a-ink); padding: 10px 0; outline: none; width: 100%;
  transition: border-color var(--a-dur-tick) var(--a-ease-draft);
}
[data-design="a"] .a-field input:focus, [data-design="a"] .a-field textarea:focus { border-bottom-color: var(--a-accent); border-bottom-width: 2px; }
[data-design="a"] .a-survey__submit { margin-top: var(--a-cell); grid-column: 1 / -1; justify-self: start; }
[data-design="a"] .a-vis-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[data-design="a"] .a-survey__done {
  margin-top: var(--a-bay-2); padding: var(--a-bay); border: 1px solid var(--a-success); color: var(--a-success);
  border-radius: var(--a-r-panel); font: 500 16px/1.5 var(--a-font-spec);
}

/* ============================================================
   3 (reprise). Finish motif — drawdown cure strip (illustrative, not a job photo)
   ============================================================ */
[data-design="a"] .a-finish { background: var(--a-surface); padding: var(--a-room) clamp(20px, 4vw, 48px); border-top: 1px solid var(--a-border); }
[data-design="a"] .a-finish__hd { max-width: 720px; margin: 0 auto var(--a-bay-2); }
[data-design="a"] .a-finish__title {
  font: 500 clamp(30px, 4.5vw, 44px)/1.1 var(--a-font-display); letter-spacing: -0.012em;
  color: var(--a-ink); margin: var(--a-cell) 0; text-wrap: balance;
}
[data-design="a"] .a-finish__body { font: 400 17px/1.55 var(--a-font-body); color: var(--a-ink-2); max-width: 64ch; }
[data-design="a"] .a-finish__strip {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1200px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--a-cell);
}
[data-design="a"] .a-finish__card {
  --card-hue: var(--a-ink);
  position: relative; background: var(--a-surface); border: 1px solid var(--a-border);
  border-radius: var(--a-r-card); overflow: hidden; aspect-ratio: 3 / 4;
  display: flex; flex-direction: column;
}
[data-design="a"] .a-finish__card::before {
  content: ""; flex: 1 1 70%; background: var(--card-hue);
  animation: a-finish-cure 15000ms var(--a-ease-edge) infinite;
}
[data-design="a"] .a-finish__card:nth-child(1)::before { animation-delay: 0ms; }
[data-design="a"] .a-finish__card:nth-child(2)::before { animation-delay: 1600ms; }
[data-design="a"] .a-finish__card:nth-child(3)::before { animation-delay: 3200ms; }
[data-design="a"] .a-finish__card:nth-child(4)::before { animation-delay: 4800ms; }
[data-design="a"] .a-finish__card:nth-child(5)::before { animation-delay: 6400ms; }
[data-design="a"] .a-finish__card:nth-child(6)::before { animation-delay: 8000ms; }
@keyframes a-finish-cure { 0% { opacity: 0.16; } 60% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0.16; } }
[data-design="a"] .a-finish__spec {
  display: block; padding: var(--a-row) var(--a-cut);
  font: 500 10px/1.3 var(--a-font-spec); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--a-ink); border-top: 1px solid var(--a-border); background: var(--a-surface);
}
[data-design="a"] .a-finish[data-paused="true"] .a-finish__card::before { animation-play-state: paused; }
[data-design="a"] .a-finish__note {
  max-width: 1200px; margin: var(--a-bay) auto 0;
  font: 500 12px/1.5 var(--a-font-spec); letter-spacing: 0.02em; color: var(--a-muted);
}

/* ===== Repeated funnel CTA ===== */
[data-design="a"] .a-recta {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--a-bay);
  max-width: 880px; margin: 0 auto; padding: var(--a-wall) clamp(20px, 4vw, 48px);
  background: var(--a-surface);
}
[data-design="a"] .a-recta__line { font: 500 clamp(21px, 3vw, 28px)/1.2 var(--a-font-display); color: var(--a-ink); letter-spacing: -0.01em; }

/* ============================================================
   Services — numbered drafting index
   ============================================================ */
[data-design="a"] .a-services { background: var(--a-surface-2); padding: var(--a-room) clamp(20px, 4vw, 48px); }
[data-design="a"] .a-services__hd { max-width: 760px; margin: 0 auto var(--a-bay-2); }
[data-design="a"] .a-services__title {
  font: 500 clamp(28px, 4vw, 44px)/1.1 var(--a-font-display); letter-spacing: -0.012em;
  color: var(--a-ink); margin: var(--a-cell) 0; text-wrap: balance;
}
[data-design="a"] .a-services__lead { font: 400 17px/1.55 var(--a-font-body); color: var(--a-ink-2); max-width: 64ch; }
[data-design="a"] .a-services__list { list-style: none; max-width: 880px; margin: 0 auto; padding: 0; border-top: 1px solid var(--a-border-2); }
[data-design="a"] .a-services__row {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; gap: var(--a-bay);
  padding: var(--a-bay) 0; border-bottom: 1px solid var(--a-border); position: relative;
}
[data-design="a"] .a-services__row::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--a-accent);
  transition: width var(--a-dur-settle) var(--a-ease-draft);
}
[data-design="a"] .a-services__row:hover::after { width: 84px; }
[data-design="a"] .a-services__idx { font: 500 12px/1 var(--a-font-spec); letter-spacing: 0.14em; color: var(--a-accent-2); }
[data-design="a"] .a-services__name { font: 500 clamp(20px, 2.6vw, 28px)/1.2 var(--a-font-display); color: var(--a-ink); letter-spacing: -0.01em; }
[data-design="a"] .a-services__spec { font: 500 11px/1.4 var(--a-font-spec); letter-spacing: 0.1em; color: var(--a-muted); text-align: right; }

/* ============================================================
   4. Process / Prep — wet-edge hairline
   ============================================================ */
[data-design="a"] .a-wet { background: var(--a-bg); padding: var(--a-room) clamp(20px, 4vw, 48px); }
[data-design="a"] .a-wet__inner { max-width: 880px; margin: 0 auto; }
[data-design="a"] .a-wet__title {
  font: 500 clamp(28px, 4vw, 44px)/1.12 var(--a-font-display); letter-spacing: -0.012em;
  color: var(--a-ink); margin: var(--a-cell) 0 0; max-width: 24ch;
}
[data-design="a"] .a-wet__rule {
  position: relative; height: 1px; width: 100%; background: var(--a-border);
  margin: var(--a-bay-2) 0; overflow: hidden;
}
[data-design="a"] .a-wet__edge {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--a-accent);
  transform: scaleX(0); transform-origin: left center;
  animation: a-wet-edge 26000ms var(--a-ease-edge) infinite;
}
@keyframes a-wet-edge {
  0%   { transform: scaleX(0); transform-origin: left center; }
  54%  { transform: scaleX(1); transform-origin: left center; }
  62%  { transform: scaleX(1); transform-origin: right center; }
  85%  { transform: scaleX(0); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: left center; }
}
[data-design="a"] .a-wet[data-paused="true"] .a-wet__edge { animation-play-state: paused; }
[data-design="a"] .a-wet__body { font: 400 17px/1.6 var(--a-font-body); color: var(--a-ink-2); column-count: 2; column-gap: var(--a-pane); }
[data-design="a"] .a-wet__body :first-child { margin-top: 0; }
[data-design="a"] .a-wet__body p { break-inside: avoid; margin: 0 0 var(--a-cell); }

/* ============================================================
   About / Crew — old/new split
   ============================================================ */
[data-design="a"] .a-about { display: grid; grid-template-columns: 5fr 7fr; }
[data-design="a"] .a-about__old { background: var(--a-surface-2); padding: var(--a-room) clamp(20px, 4vw, 48px); border-right: 2px solid var(--a-accent); }
[data-design="a"] .a-about__pull {
  font: 500 clamp(21px, 3vw, 28px)/1.35 var(--a-font-display); color: var(--a-accent-2);
  margin-top: var(--a-bay); max-width: 30ch; font-style: italic;
}
[data-design="a"] .a-about__new { background: var(--a-surface); padding: var(--a-room) clamp(20px, 4vw, 48px); }
[data-design="a"] .a-about__title { font: 500 clamp(28px, 4vw, 44px)/1.1 var(--a-font-display); letter-spacing: -0.012em; color: var(--a-ink); margin-bottom: var(--a-bay); }
[data-design="a"] .a-about__new p { font: 400 17px/1.55 var(--a-font-body); color: var(--a-ink-2); max-width: 60ch; margin-bottom: var(--a-bay); }
[data-design="a"] .a-about__line { color: var(--a-muted) !important; font-style: italic; }
[data-design="a"] .a-about__phone {
  display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--a-font-spec);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--a-accent); text-decoration: none;
  border-bottom: 1px solid var(--a-accent); padding-bottom: 4px;
}
[data-design="a"] .a-about__phone:hover { color: var(--a-ink); border-color: var(--a-ink); }

/* ============================================================
   Service Area
   ============================================================ */
[data-design="a"] .a-area { background: var(--a-bg); padding: var(--a-room) clamp(20px, 4vw, 48px); max-width: 880px; margin: 0 auto; }
[data-design="a"] .a-area__title { font: 500 clamp(28px, 4vw, 44px)/1.1 var(--a-font-display); letter-spacing: -0.012em; color: var(--a-ink); margin: var(--a-cell) 0; }
[data-design="a"] .a-area__body { font: 400 17px/1.55 var(--a-font-body); color: var(--a-ink-2); max-width: 60ch; }

/* ============================================================
   Footer — drafting-felt surface
   ============================================================ */
[data-design="a"] .a-footer { background: var(--a-ink); color: var(--a-bg); padding: var(--a-wall) clamp(20px, 4vw, 48px) var(--a-bay-2); }
[data-design="a"] .a-footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-bay-2); max-width: 1100px; margin: 0 auto; }
[data-design="a"] .a-footer__name { font: 500 21px/1.1 var(--a-font-display); letter-spacing: -0.008em; margin-bottom: var(--a-row); }
[data-design="a"] .a-footer__meta { font: 400 14px/1.5 var(--a-font-body); color: color-mix(in oklab, var(--a-bg), transparent 32%); }
[data-design="a"] .a-footer__col { display: flex; flex-direction: column; gap: var(--a-row); }
[data-design="a"] .a-footer__phone { font: 500 17px/1 var(--a-font-spec); color: var(--a-bg); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
[data-design="a"] .a-footer__mail { font: 500 13px/1.4 var(--a-font-spec); color: color-mix(in oklab, var(--a-bg), transparent 22%); text-decoration: none; word-break: break-word; min-height: 44px; display: inline-flex; align-items: center; }
[data-design="a"] .a-footer__funnel { font: 500 14px/1 var(--a-font-spec); letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-accent-soft); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
[data-design="a"] .a-footer__funnel:hover, [data-design="a"] .a-footer__phone:hover, [data-design="a"] .a-footer__mail:hover { text-decoration: underline; }
[data-design="a"] .a-footer__social { display: flex; flex-wrap: wrap; gap: var(--a-cell); margin-top: var(--a-row); }
[data-design="a"] .a-footer__social a { font: 500 12px/1 var(--a-font-spec); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklab, var(--a-bg), transparent 30%); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
[data-design="a"] .a-footer__social a:hover { color: var(--a-accent-soft); }
[data-design="a"] .a-footer__rule { height: 1px; background: color-mix(in oklab, var(--a-bg), transparent 80%); max-width: 1100px; margin: var(--a-bay-2) auto var(--a-bay); }
[data-design="a"] .a-footer__legal { font: 500 13px/1.5 var(--a-font-spec); color: color-mix(in oklab, var(--a-bg), transparent 42%); max-width: 1100px; margin: 0 auto; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  [data-design="a"] .a-finish__strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  [data-design="a"] .a-about { grid-template-columns: 1fr; }
  [data-design="a"] .a-about__old { border-right: 0; border-bottom: 2px solid var(--a-accent); }
}
@media (max-width: 720px) {
  [data-design="a"] .a-survey__body { grid-template-columns: 1fr; padding-left: 48px; }
  [data-design="a"] .a-survey__step--final .a-survey__body { grid-template-columns: 1fr; }
  [data-design="a"] .a-survey__row { grid-template-columns: 36px 1fr; }
  [data-design="a"] .a-survey__ans { grid-column: 1 / -1; text-align: left; padding-left: 48px; }
  [data-design="a"] .a-services__row { grid-template-columns: 36px 1fr; }
  [data-design="a"] .a-services__spec { grid-column: 2; text-align: left; }
  [data-design="a"] .a-wet__body { column-count: 1; }
  [data-design="a"] .a-footer__grid { grid-template-columns: 1fr; gap: var(--a-bay); }
}
@media (max-width: 560px) {
  [data-design="a"] .a-header__bar { height: 64px; padding: 0 16px; }
  [data-design="a"] .a-hero { padding: clamp(56px, 16vh, 96px) 16px 56px; min-height: 80vh; }
  [data-design="a"] .a-hero__chip { display: block; margin-left: 0; margin-top: var(--a-cell); }
  [data-design="a"] .a-finish__strip { grid-template-columns: repeat(2, 1fr); gap: var(--a-cut); }
  [data-design="a"] .a-survey, [data-design="a"] .a-finish, [data-design="a"] .a-services,
  [data-design="a"] .a-wet, [data-design="a"] .a-area { padding: var(--a-wall) 16px; }
  [data-design="a"] .a-about__old, [data-design="a"] .a-about__new { padding: var(--a-wall) 16px; }
  [data-design="a"] .a-recta { padding: var(--a-wall) 16px; }
  [data-design="a"] .a-survey__q { font-size: 18px; }
}
@media (max-width: 380px) {
  [data-design="a"] .a-logo__mark { font-size: 16px; }
  [data-design="a"] .a-survey__idx { display: none; }
  [data-design="a"] .a-survey__row { grid-template-columns: 1fr; gap: var(--a-row); }
  [data-design="a"] .a-survey__body { padding-left: 0; }
  [data-design="a"] .a-services__row { grid-template-columns: 1fr; gap: var(--a-row); }
  [data-design="a"] .a-services__spec { grid-column: 1; }
}

/* ============================================================
   Reduced motion — every signature interaction has a fallback (functionality preserved)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .a-header__grid, [data-design="a"] .a-header__cross { animation: none; opacity: 0.07; }
  [data-design="a"] .a-drawer__sheet { transition: none; }
  [data-design="a"] .a-cta__ring { animation: none; }
  [data-design="a"] .a-cta__tick { transition: none; }
  [data-design="a"] .a-cta:active { transform: none; }
  [data-design="a"] .a-hero__field { animation: none; opacity: 0.42; }
  [data-design="a"] .a-pointer__rule, [data-design="a"] .a-pointer__label { animation: none; opacity: 0.75; }
  [data-design="a"] .a-finish__card::before { animation: none; opacity: 1; }
  [data-design="a"] .a-wet__edge { animation: none; transform: scaleX(0.4); transform-origin: left center; }
  [data-design="a"] .a-survey__body, [data-design="a"] .a-survey__step, [data-design="a"] .a-pick { transition: none; }
  [data-design="a"] .a-survey__step[data-state="active"] .a-survey__body { max-height: none; }
}

/* ============================================================
   Mobile no-horizontal-scroll guard (MANDATORY — appended last)
   ============================================================ */
[data-design="a"].dq-design, [data-design="a"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="a"] * { min-width: 0; }
[data-design="a"] img, [data-design="a"] svg:not([data-keep-size]) { max-width: 100%; height: auto; }

/* Phase-3.4 hero visibility floor (forge_assemble) — hero text + CTA always opaque */
[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; }