/* ═══════════════════════════════════════════════════════════════════
   Orin Construction · design-a · Sign Painter system
   ALL selectors scoped [data-design="a"]
   ~12-16 color tokens on the root block
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=Allerta+Stencil&family=JetBrains+Mono:wght@400;600&display=swap');

/* ─── Token block ─────────────────────────────────────────────────── */
[data-design="a"] {
  --design-a-primary: #B8862A;

  /* palette */
  --gesso:      #F2EAD3;
  --gesso-deep: #E5D9B7;
  --ink:        #16130E;
  --ink-soft:   #3D3526;
  --muted:      #8A7E5E;
  --rule:       #2D281C;
  --gold:       #B8862A;
  --vermillion: #B8341E;
  --cobalt:     #1F4A7A;
  --moss:       #3D5A2E;
  --ochre:      #A87325;
  --critical:   #7C1A12;

  /* typography */
  --font-display: "Cooper Black","Goudy Old Style","Bodoni 72",serif;
  --font-script:  "Tangerine","Allura","Caveat Brush",cursive;
  --font-body:    "Crimson Pro","Adobe Caslon Pro",Georgia,serif;
  --font-stencil: "Allerta Stencil","Stencil Std","DIN Next Stencil",sans-serif;
  --font-data:    "JetBrains Mono","Söhne Mono",monospace;

  /* type scale */
  --text-paint:  11px;
  --text-cap:    14px;
  --text-body:   17px;
  --text-deck:   22px;
  --text-mark:   34px;
  --text-head:   44px;
  --text-banner: 88px;

  /* spacing */
  --space-bristle: 2px;
  --space-quad:    4px;
  --space-em:      8px;
  --space-coat:    16px;
  --space-pull:    32px;
  --space-panel:   56px;
  --space-shop:    96px;
  --space-mural:   144px;

  /* motion */
  --dur-tick:    120ms;
  --dur-stroke:  480ms;
  --dur-shadow:  320ms;
  --dur-letter:  720ms;
  --dur-dry:     1400ms;
  --dur-ambient: 21000ms;
  --ease-brush:  cubic-bezier(.65,.05,.36,1);
  --ease-snap:   cubic-bezier(.7,0,.84,0);
  --ease-drop:   cubic-bezier(.34,1.4,.64,1);
  --ease-dry:    cubic-bezier(.45,.05,.55,.95);

  /* radius / shadow */
  --radius-zero: 0;
  --radius-pin:  50%;
  --radius-tab:  6px;
  --shadow-letter: 4px 6px 0 var(--ink);
  --shadow-panel:  2px 2px 0 var(--gesso-deep), 4px 4px 0 var(--rule);
  --shadow-press:  inset 0 2px 0 rgba(0,0,0,.18);
  --shadow-wet:    0 0 0 1px var(--rule), inset 0 0 12px rgba(0,0,0,.06);

  color: var(--ink);
  background: var(--gesso);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
}

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

@media (prefers-color-scheme: dark) {
  [data-design="a"] {
    --gesso:      #0F0D0A;
    --gesso-deep: #1A1611;
    --ink:        #EDE4C9;
    --ink-soft:   #BFB48E;
    --muted:      #857B5D;
    --rule:       #9B8E69;
    --gold:       #D8A640;
    --vermillion: #D85939;
    --cobalt:     #5089C2;
    --moss:       #789A60;
    --ochre:      #D8A04A;
    --critical:   #C0382C;
  }
}

/* ─── Reset helpers ───────────────────────────────────────────────── */
[data-design="a"].dq-design h1,[data-design="a"].dq-design h2,[data-design="a"].dq-design h3,
[data-design="a"].dq-design p,[data-design="a"].dq-design ul,[data-design="a"].dq-design ol,
[data-design="a"].dq-design dl,[data-design="a"].dq-design fieldset,[data-design="a"].dq-design figure {
  margin: 0; padding: 0;
}
[data-design="a"].dq-design ul,[data-design="a"].dq-design ol { list-style: none; }
[data-design="a"].dq-design fieldset { border: 0; }
[data-design="a"].dq-design a { color: inherit; }
[data-design="a"].dq-design button { font-family: inherit; border: none; background: none; }

/* ─── Section windowed-center container ──────────────────────────── */
[data-design="a"] .sp-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 48px);
}

/* ═══════════════════════════════════════════════════════════════════
   E1 — HEADER (Marquee Bar)
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--gesso);
  border-bottom: 1px solid var(--rule);
}

[data-design="a"] .sp-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-coat);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-coat) clamp(16px, 5vw, 40px);
}

/* Logo */
[data-design="a"] .sp-logo { text-decoration: none; }
[data-design="a"] .sp-logo__mark {
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 30px);
  color: var(--ink);
  text-shadow: 3px 4px 0 color-mix(in oklab, var(--gold) 70%, var(--ink));
  letter-spacing: .01em;
}

/* Atmospheric bristle-line — E1 ambient (≥18s cycle, H-3) */
[data-design="a"] .sp-header__bristle {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0, var(--gold) 12%,
    var(--gold) 88%, transparent 100%);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: .9;
  animation: a-bristle-pull 26s var(--ease-brush) infinite;
}

@keyframes a-bristle-pull {
  0%   { transform: scaleX(0); opacity: 0; transform-origin: left center; }
  18%  { opacity: .95; }
  46%  { transform: scaleX(1); opacity: .95; transform-origin: left center; }
  60%  { transform: scaleX(1); transform-origin: left center; }
  61%  { transform-origin: right center; }
  88%  { transform: scaleX(0); transform-origin: right center; opacity: .5; }
  100% { transform: scaleX(0); opacity: 0; }
}

/* Hamburger */
[data-design="a"] .sp-burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  cursor: pointer;
  border: 1px solid var(--rule);
  border-radius: var(--radius-tab);
}
[data-design="a"] .sp-burger__line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition:
    transform var(--dur-tick) var(--ease-brush),
    opacity  var(--dur-tick) var(--ease-brush);
}
[data-design="a"] .sp-burger[aria-expanded="true"] .sp-burger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
[data-design="a"] .sp-burger[aria-expanded="true"] .sp-burger__line:nth-child(2) {
  opacity: 0;
}
[data-design="a"] .sp-burger[aria-expanded="true"] .sp-burger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Drawer (focus-trapped, display:none when closed) */
[data-design="a"] .sp-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-shadow) var(--ease-brush);
}
[data-design="a"] .sp-drawer[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
[data-design="a"] .sp-drawer__panel {
  width: min(90vw, 380px);
  background: var(--gesso);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-panel);
  padding: var(--space-pull);
  transform: translateY(-18px) rotate(-3deg);
  opacity: 0;
  transition:
    transform var(--dur-shadow) var(--ease-drop),
    opacity  var(--dur-shadow) var(--ease-brush);
}
[data-design="a"] .sp-drawer[data-open="true"] .sp-drawer__panel {
  transform: translateY(0) rotate(0);
  opacity: 1;
}
[data-design="a"] .sp-drawer__sig {
  font-family: var(--font-script);
  font-size: var(--text-mark);
  color: var(--gold);
  margin: 0 0 var(--space-coat);
}
[data-design="a"] .sp-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-coat);
}
[data-design="a"] .sp-drawer__nav a {
  font-family: var(--font-stencil);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  display: block;
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-design="a"] .sp-drawer__nav a:hover { color: var(--vermillion); }
[data-design="a"] .sp-drawer__phone,
[data-design="a"] .sp-drawer__funnel-cta {
  display: block;
  margin-top: var(--space-coat);
  font-family: var(--font-data);
  font-size: 15px;
  letter-spacing: .03em;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-design="a"] .sp-drawer__funnel-cta {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .04em;
}
[data-design="a"] .sp-drawer__close {
  margin-top: var(--space-pull);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-script);
  font-size: var(--text-deck);
  color: var(--ink-soft);
  padding: 8px 0;
  min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — Storefront (E3 backdrop + copy)
   isolation:isolate on <section>; copy z-index above backdrop
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-hero {
  position: relative;
  min-height: 70vh;
  background: var(--gesso-deep);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  gap: var(--space-pull);
  padding: var(--space-shop) clamp(16px, 5vw, 48px) var(--space-mural);
  max-width: 100%;
}

/* Backdrop — z-index 0; copy z-index 2 */
[data-design="a"] .sp-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Color-wash fill: a breathing tint that fills slowly — visible motion ≥0.25 opacity */
[data-design="a"] .sp-hero__wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 70% 50%,
    color-mix(in oklab, var(--vermillion) 28%, transparent) 0%,
    color-mix(in oklab, var(--gold) 12%, transparent) 50%,
    transparent 100%
  );
  animation: a-wash-breathe 8s var(--ease-dry) infinite;
}

@keyframes a-wash-breathe {
  0%,100% {
    opacity: .35;
    transform: scale(1);
  }
  50% {
    opacity: .6;
    transform: scale(1.04);
  }
}

/* Swatch column — settles chip-by-chip on load */
[data-design="a"] .sp-hero__swatch-col {
  position: absolute;
  right: clamp(80px, 12vw, 200px);
  top: 0;
  bottom: 0;
  width: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
[data-design="a"] .sp-swatch {
  flex: 1;
  background: var(--c, var(--gesso));
  opacity: 0;
  transform: scaleY(0.6);
  transform-origin: top;
  animation: a-swatch-settle 0.7s var(--ease-drop) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes a-swatch-settle {
  to { opacity: .55; transform: scaleY(1); }
}

/* Spinning brush — sustained ambient life (HERO-1 one-layer contract) */
[data-design="a"] .sp-hero__brush {
  position: absolute;
  right: clamp(14px, 5vw, 60px);
  bottom: 24px;
  width: 40px;
  height: 170px;
  transform-origin: 20px 144px;
  animation: a-brush-twirl var(--dur-ambient) linear infinite;
  opacity: .65;
}
@keyframes a-brush-twirl {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Hero copy — z-index: 2, above all backdrop layers ── */
[data-design="a"] .sp-hero__copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  max-width: 680px;
}

[data-design="a"] .sp-hero__descriptor {
  font-family: var(--font-stencil);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 var(--space-coat);
  opacity: 1;
}

[data-design="a"] .sp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 80px);
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
  text-shadow: var(--shadow-letter);
  max-width: 16ch;
  opacity: 1;
}

[data-design="a"] .sp-hero__deck {
  font-size: clamp(16px, 2.2vw, var(--text-deck));
  color: var(--ink-soft);
  max-width: 46ch;
  margin: var(--space-coat) 0 var(--space-em);
  line-height: 1.6;
  opacity: 1;
}

[data-design="a"] .sp-hero__proof {
  font-family: var(--font-data);
  font-size: var(--text-cap);
  color: var(--muted);
  letter-spacing: .04em;
  margin: 0 0 var(--space-pull);
  opacity: 1;
}

/* Today's Color — grid col 2, z-index 2 */
[data-design="a"] .sp-today {
  position: relative;
  z-index: 2;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  align-self: start;
  margin-top: var(--space-shop);
}
[data-design="a"] .sp-today__chip {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-pin);
  background: var(--vermillion);
  box-shadow: var(--shadow-wet);
  animation: a-wet-sheen 9s var(--ease-dry) infinite;
}
@keyframes a-wet-sheen {
  0%,100% { filter: saturate(1) brightness(1); box-shadow: var(--shadow-wet); }
  50%      { filter: saturate(1.16) brightness(.95); box-shadow: 0 0 0 1px var(--rule), inset 0 0 18px rgba(0,0,0,.12); }
}
[data-design="a"] .sp-today__name {
  font-family: var(--font-script);
  font-size: var(--text-deck);
  color: var(--ink);
  opacity: 1;
}
[data-design="a"] .sp-today__code {
  font-family: var(--font-data);
  font-size: var(--text-paint);
  color: var(--muted);
  letter-spacing: .04em;
  opacity: 1;
}

/* Pause ambient when out of viewport */
[data-design="a"] .sp-hero.is-paused .sp-hero__brush,
[data-design="a"] .sp-hero.is-paused .sp-today__chip,
[data-design="a"] .sp-hero.is-paused .sp-hero__wash {
  animation-play-state: paused;
}

/* ═══════════════════════════════════════════════════════════════════
   E2 — CTA Marquee Button (funnel-anchor)
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  isolation: isolate;
  padding: 16px 32px;
  background: var(--gesso-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-tab);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(15px, 2.4vw, 20px);
  color: var(--gold);
  transform: translate(var(--mx,0), var(--my,0));
  transition: transform var(--dur-tick) var(--ease-brush);
  min-height: 44px;
}

[data-design="a"] .sp-cta__shadow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-tab);
  background: linear-gradient(135deg, var(--ink), var(--ink-soft));
  transform: translate(4px, 6px);
  animation: a-cta-breath 4.5s var(--ease-dry) infinite;
}
@keyframes a-cta-breath {
  0%,100% { transform: translate(4px, 6px); }
  50%      { transform: translate(6px, 9px); }
}

[data-design="a"] .sp-cta__face { position: relative; z-index: 1; }

[data-design="a"] .sp-cta__bristle {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -4px;
  height: 2px;
  background: var(--vermillion);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-stroke) var(--ease-brush);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .sp-cta:hover .sp-cta__shadow,
  [data-design="a"] .sp-cta:focus-visible .sp-cta__shadow {
    transform: translate(6px, 9px);
    animation-play-state: paused;
  }
  [data-design="a"] .sp-cta:hover .sp-cta__bristle,
  [data-design="a"] .sp-cta:focus-visible .sp-cta__bristle {
    transform: scaleX(1);
  }
}

[data-design="a"] .sp-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
[data-design="a"] .sp-cta:active {
  transform: translate(3px, 2px);
  box-shadow: var(--shadow-press);
}
[data-design="a"] .sp-cta:active .sp-cta__shadow {
  transform: translate(1px, 2px);
}

/* Before/after section CTA variant */
[data-design="a"] .sp-cta--ba {
  margin-top: var(--space-pull);
}

/* ═══════════════════════════════════════════════════════════════════
   E6 — POINTER (wet-edge advance between hero & funnel)
   data-mf-role="pointer" — not a button, no click action
   Immediately before #funnel
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-pointer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-em);
  padding: var(--space-pull) clamp(16px, 5vw, 48px);
  background: var(--gesso);
  overflow: hidden;
  opacity: 1;
  min-height: 80px; /* bbox ≥ 8px at all viewports */
}

[data-design="a"] .sp-pointer__label {
  font-family: var(--font-script);
  font-size: var(--text-deck);
  color: var(--ink-soft);
  opacity: 1;
  /* Slow fade-in from transform, NOT from opacity:0 — starts opacity:1 */
  animation: a-pointer-rise 1.2s var(--ease-brush) both;
  animation-delay: 0.8s;
}

@keyframes a-pointer-rise {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}

/* Wet-edge advance: a paint edge draws across the bottom of the pointer zone
   Uses scaleX + transform-origin to avoid animating width (MOTION GATE) */
[data-design="a"] .sp-pointer__edge {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--vermillion) 80%, transparent);
  transform-origin: left center;
  transform: scaleX(0);
  animation: a-wet-edge 3.6s var(--ease-brush) infinite;
  animation-delay: 0.4s;
}
@keyframes a-wet-edge {
  0%   { transform: scaleX(0); transform-origin: left center;  opacity: 0; }
  15%  { opacity: 1; }
  55%  { transform: scaleX(1); transform-origin: left center;  opacity: 1; }
  60%  { transform: scaleX(1); transform-origin: left center; }
  61%  { transform-origin: right center; }
  80%  { transform: scaleX(1); transform-origin: right center; opacity: .6; }
  100% { transform: scaleX(0); transform-origin: right center; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   E5 — FUNNEL (Estimate Request — 4-step interactive)
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-estimate {
  background: var(--gesso-deep);
  padding: var(--space-shop) 0;
}

[data-design="a"] .sp-estimate__inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 40px);
}

[data-design="a"] .sp-estimate__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 44px);
  color: var(--ink);
  text-shadow: var(--shadow-letter);
  margin: 0 0 var(--space-coat);
}

[data-design="a"] .sp-estimate__progress {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-pull);
}
[data-design="a"] .sp-estimate__progress i {
  height: 4px;
  flex: 1;
  background: var(--gesso);
  border: 1px solid var(--rule);
  transition: background var(--dur-tick) var(--ease-brush);
  display: block;
  font-style: normal;
}
[data-design="a"] .sp-estimate__progress i.is-done {
  background: var(--gold);
}

[data-design="a"] .sp-step {
  border: 0;
  padding: 0;
  margin: 0;
  animation: a-step-in var(--dur-stroke) var(--ease-brush);
}
[data-design="a"] .sp-step legend {
  font-family: var(--font-display);
  font-size: var(--text-deck);
  color: var(--ink);
  padding: 0;
  margin-bottom: var(--space-coat);
  width: 100%;
}
@keyframes a-step-in {
  from { opacity: 1; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

[data-design="a"] .sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-em);
}
[data-design="a"] .sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: 44px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-tab);
  cursor: pointer;
  font-family: var(--font-stencil);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 13px;
  transition:
    background var(--dur-tick) var(--ease-brush),
    box-shadow var(--dur-tick) var(--ease-brush);
  opacity: 1;
}
[data-design="a"] .sp-chip:has(:checked) {
  background: var(--gold);
  color: var(--gesso);
  box-shadow: var(--shadow-letter);
}
[data-design="a"] .sp-chip input { clip: rect(0,0,0,0); position: absolute; }

/* Contact fields */
[data-design="a"] .sp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-coat);
}
[data-design="a"] .sp-field span {
  font-family: var(--font-stencil);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--muted);
  opacity: 1;
}
[data-design="a"] .sp-field input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-body);
  color: var(--ink);
  padding: 8px 2px;
  min-height: 44px;
  opacity: 1;
}
[data-design="a"] .sp-field input:focus-visible {
  outline: 0;
  border-bottom-color: var(--vermillion);
}
[data-design="a"] .sp-field__err {
  color: var(--vermillion);
  font-family: var(--font-script);
  font-size: var(--text-deck);
  margin-top: var(--space-coat);
  opacity: 1;
}

/* Done state */
[data-design="a"] .sp-done { text-align: center; padding: var(--space-pull) 0; }
[data-design="a"] .sp-done__sig {
  font-family: var(--font-script);
  font-size: var(--text-head);
  color: var(--gold);
  margin: 0;
  opacity: 1;
}
[data-design="a"] .sp-done__note {
  font-family: var(--font-body);
  color: var(--ink-soft);
  margin-top: var(--space-coat);
  opacity: 1;
}

/* Funnel nav */
[data-design="a"] .sp-funnel__nav {
  display: flex;
  gap: var(--space-coat);
  margin-top: var(--space-pull);
  flex-wrap: wrap;
}
[data-design="a"] .sp-next,
[data-design="a"] .sp-back,
[data-design="a"] .sp-submit {
  min-height: 44px;
  padding: 12px 26px;
  cursor: pointer;
  border-radius: var(--radius-tab);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 16px;
  border: 1px solid var(--rule);
  transition: transform var(--dur-tick) var(--ease-brush),
              box-shadow var(--dur-tick) var(--ease-brush);
  opacity: 1;
}
[data-design="a"] .sp-next,
[data-design="a"] .sp-submit {
  background: var(--gesso-deep);
  color: var(--gold);
  box-shadow: var(--shadow-letter);
}
[data-design="a"] .sp-next:active,
[data-design="a"] .sp-submit:active {
  transform: translate(3px, 2px);
  box-shadow: var(--shadow-press);
}
[data-design="a"] .sp-back {
  background: transparent;
  color: var(--ink-soft);
}

/* Trust strip below funnel */
[data-design="a"] .sp-funnel__trust {
  margin-top: var(--space-pull);
  padding-top: var(--space-coat);
  border-top: 1px solid var(--rule);
}
[data-design="a"] .sp-funnel__trust-line {
  font-family: var(--font-data);
  font-size: var(--text-cap);
  color: var(--muted);
  letter-spacing: .02em;
  margin-bottom: var(--space-em);
}
[data-design="a"] .sp-funnel__trust-note {
  font-size: var(--text-cap);
  color: var(--ink-soft);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   BEFORE / AFTER section
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-beforeafter {
  padding: var(--space-shop) 0;
  background: var(--gesso);
}
[data-design="a"] .sp-section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 44px);
  color: var(--ink);
  margin: 0 0 var(--space-coat);
}
[data-design="a"] .sp-section-sub {
  font-size: var(--text-deck);
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 var(--space-pull);
  line-height: 1.5;
}
[data-design="a"] .sp-ba-note {
  border: 1px solid var(--rule);
  border-radius: var(--radius-tab);
  padding: var(--space-pull);
  background: var(--gesso-deep);
}
[data-design="a"] .sp-ba-note__text {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-soft);
  font-size: var(--text-deck);
}
[data-design="a"] .sp-ba-cta {
  margin-top: var(--space-pull);
}

/* ═══════════════════════════════════════════════════════════════════
   E4 — AMBIENT SEGMENT B (Back Wall — swatch cascade)
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-backwall {
  position: relative;
  background: var(--gesso-deep);
  padding: var(--space-panel) clamp(16px, 5vw, 48px);
  overflow: hidden;
}
/* Backwall rule uses scaleX instead of width to stay on compositor (MOTION GATE) */
[data-design="a"] .sp-backwall__rule {
  display: block;
  height: 3px;
  width: 100%;
  margin-bottom: var(--space-pull);
  background: linear-gradient(90deg, var(--ink) 0, var(--ink-soft) 100%);
  transform-origin: left center;
  transform: scaleX(0);
}
[data-design="a"] .sp-backwall.is-in .sp-backwall__rule {
  transform: scaleX(1);
  transition: transform var(--dur-stroke) var(--ease-brush);
}
[data-design="a"] .sp-backwall__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-em);
  max-width: 1200px;
  margin: 0 auto;
}
[data-design="a"] .sp-backwall__grid span {
  aspect-ratio: 1;
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-wet);
  animation: a-wet-dry 16s var(--ease-dry) infinite;
  display: block;
}
@keyframes a-wet-dry {
  0%,100% { filter: saturate(1) brightness(1); }
  40%     { filter: saturate(1.18) brightness(.94); }
  70%     { filter: saturate(1) brightness(1); }
}
[data-design="a"] .sp-backwall.is-paused .sp-backwall__grid span {
  animation-play-state: paused;
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-services {
  padding: var(--space-shop) 0;
  background: var(--gesso);
}
[data-design="a"] .sp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-pull);
  margin-top: var(--space-pull);
}
[data-design="a"] .sp-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-tab);
  padding: var(--space-pull);
  background: var(--gesso-deep);
  position: relative;
  transition: box-shadow var(--dur-tick) var(--ease-brush),
              transform var(--dur-tick) var(--ease-brush);
}
[data-design="a"] .sp-card__swatch {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pin);
  background: var(--pigment, var(--gold));
  box-shadow: var(--shadow-wet);
  margin-bottom: var(--space-coat);
}
[data-design="a"] .sp-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--ink);
  text-shadow: 2px 3px 0 color-mix(in oklab, var(--ink) 20%, transparent);
  margin: 0 0 var(--space-em);
}
[data-design="a"] .sp-card__body {
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .sp-card:hover {
    box-shadow: var(--shadow-panel);
    transform: translateY(-2px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PROCESS
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-process {
  padding: var(--space-shop) 0;
  background: var(--gesso-deep);
}
[data-design="a"] .sp-process__sub {
  font-size: var(--text-deck);
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 0 var(--space-pull);
  line-height: 1.5;
}
[data-design="a"] .sp-phases {
  display: flex;
  flex-direction: column;
  gap: var(--space-coat);
  margin-top: var(--space-pull);
  counter-reset: none;
}
[data-design="a"] .sp-phase {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-coat);
  align-items: start;
  padding: var(--space-coat);
  border-left: 3px solid var(--gold);
  background: var(--gesso);
  border-radius: 0 var(--radius-tab) var(--radius-tab) 0;
}
[data-design="a"] .sp-phase__num {
  font-family: var(--font-data);
  font-size: var(--text-deck);
  color: var(--gold);
  font-weight: 600;
  opacity: 1;
}
[data-design="a"] .sp-phase__name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 var(--space-em);
}
[data-design="a"] .sp-phase__desc {
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-about {
  padding: var(--space-shop) 0;
  background: var(--gesso);
}
[data-design="a"] .sp-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-mural);
  align-items: start;
}
[data-design="a"] .sp-about__copy p {
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.7;
  margin-top: var(--space-coat);
  max-width: 56ch;
}
[data-design="a"] .sp-facts { display: flex; flex-direction: column; gap: var(--space-coat); }
[data-design="a"] .sp-fact {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-coat);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--space-coat);
}
[data-design="a"] .sp-fact dt {
  font-family: var(--font-stencil);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--muted);
}
[data-design="a"] .sp-fact dd {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE AREA
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-area {
  padding: var(--space-panel) 0;
  background: var(--gesso-deep);
}
[data-design="a"] .sp-area__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-coat);
  margin-top: var(--space-coat);
}
[data-design="a"] .sp-area__list li {
  font-family: var(--font-stencil);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 14px;
  color: var(--ink);
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-tab);
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER — Painter's Mark
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-footer {
  background: var(--ink);
  color: var(--gesso);
  padding: var(--space-shop) 0 var(--space-pull);
}
[data-design="a"] .sp-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 48px);
}
[data-design="a"] .sp-footer__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  color: var(--gold);
  text-shadow: var(--shadow-letter);
  margin: 0 0 var(--space-em);
}
[data-design="a"] .sp-footer__sig {
  font-family: var(--font-script);
  font-size: var(--text-mark);
  color: var(--gesso-deep);
  margin: 0 0 var(--space-pull);
}
[data-design="a"] .sp-footer__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-coat);
  margin-bottom: var(--space-pull);
}
[data-design="a"] .sp-footer__details > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-coat);
  font-size: var(--text-cap);
  color: color-mix(in oklab, var(--gesso) 70%, transparent);
}
[data-design="a"] .sp-footer__details dt {
  font-family: var(--font-stencil);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-size: 12px;
}
[data-design="a"] .sp-footer__details a { color: var(--gold); }
[data-design="a"] .sp-footer__cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 16px;
  text-decoration: none;
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-letter);
  min-height: 44px;
  margin-bottom: var(--space-pull);
}
[data-design="a"] .sp-footer__copy {
  font-family: var(--font-data);
  font-size: var(--text-paint);
  color: var(--muted);
  letter-spacing: .04em;
  margin-top: var(--space-pull);
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLL-DRIVEN MOTION — TRIAD-2
   Parallax scroll-linked on hero→content handoff.
   Uses @keyframes triggered by scroll-timeline API where supported;
   graceful degradation via JS IntersectionObserver translate otherwise.
   ═══════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: scroll()) {
  [data-design="a"] .sp-hero__backdrop {
    animation: a-hero-parallax linear both;
    animation-timeline: scroll(root block);
    animation-range: 0% 40%;
  }
  @keyframes a-hero-parallax {
    from { transform: translateY(0); }
    to   { transform: translateY(60px); }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLL REVEALS — transform-only (MOTION GATE compliant)
   Process phases slide in; cards slide up
   ═══════════════════════════════════════════════════════════════════ */
[data-design="a"] .sp-phase.js-reveal,
[data-design="a"] .sp-card.js-reveal {
  transform: translateY(24px);
  transition: transform 0.25s var(--ease-brush);
}
[data-design="a"] .sp-phase.js-revealed,
[data-design="a"] .sp-card.js-revealed {
  transform: translateY(0);
  transition: transform 0.25s var(--ease-brush);
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION FALLBACKS
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .sp-header__bristle { animation: none; transform: scaleX(1); opacity: .9; }
  [data-design="a"] .sp-drawer,
  [data-design="a"] .sp-drawer__panel,
  [data-design="a"] .sp-burger__line { transition: none; }
  [data-design="a"] .sp-hero__brush { animation: none; }
  [data-design="a"] .sp-today__chip { animation: none; }
  [data-design="a"] .sp-hero__wash { animation: none; opacity: .45; }
  [data-design="a"] .sp-swatch { animation: none; opacity: .55; transform: scaleY(1); }
  [data-design="a"] .sp-cta { transform: none; }
  [data-design="a"] .sp-cta__shadow { animation: none; transform: translate(4px, 6px); }
  [data-design="a"] .sp-cta__bristle { transition: none; }
  [data-design="a"] .sp-pointer__label { animation: none; }
  [data-design="a"] .sp-pointer__edge { animation: none; transform: scaleX(1); opacity: .7; }
  [data-design="a"] .sp-step { animation: none; }
  [data-design="a"] .sp-next:active,
  [data-design="a"] .sp-submit:active { transform: none; }
  [data-design="a"] .sp-backwall__rule { transform: scaleX(1); transition: none; }
  [data-design="a"] .sp-backwall__grid span { animation: none; }
  [data-design="a"] .sp-card { transition: none; }
  [data-design="a"] .sp-phase.js-reveal,
  [data-design="a"] .sp-card.js-reveal { transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════ */

/* 768px */
@media (max-width: 768px) {
  [data-design="a"] .sp-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding-bottom: var(--space-shop);
    min-height: 60vh;
  }
  [data-design="a"] .sp-hero__copy { grid-column: 1; grid-row: 2; }
  [data-design="a"] .sp-today {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    gap: var(--space-coat);
    margin-top: 0;
    align-self: auto;
  }
  [data-design="a"] .sp-today__chip { width: 56px; height: 56px; }
  [data-design="a"] .sp-hero__brush { display: none; }
  [data-design="a"] .sp-hero__swatch-col { display: none; }
  [data-design="a"] .sp-cards { grid-template-columns: 1fr 1fr; }
  [data-design="a"] .sp-about__grid { grid-template-columns: 1fr; gap: var(--space-pull); }
  [data-design="a"] .sp-backwall__grid { grid-template-columns: repeat(6, 1fr); }
}

/* 560px */
@media (max-width: 560px) {
  [data-design="a"] .sp-cards { grid-template-columns: 1fr; }
  [data-design="a"] .sp-funnel__nav button { flex: 1; }
  [data-design="a"] .sp-backwall__grid { grid-template-columns: repeat(5, 1fr); }
}

/* 390px */
@media (max-width: 390px) {
  [data-design="a"] .sp-hero__title { font-size: clamp(32px, 11vw, 48px); }
  [data-design="a"] .sp-cta { padding: 14px 20px; width: 100%; justify-content: center; }
  [data-design="a"] .sp-header__bar { padding: var(--space-coat); }
  [data-design="a"] .sp-logo__mark { font-size: 20px; }
  [data-design="a"] .sp-backwall__grid { grid-template-columns: repeat(4, 1fr); }
  [data-design="a"] .sp-phase { grid-template-columns: 40px 1fr; }
  [data-design="a"] .sp-fact { grid-template-columns: 1fr; gap: 4px; }
  [data-design="a"] .sp-footer__details > div { grid-template-columns: 1fr; gap: 4px; }
}

/* 320px */
@media (max-width: 320px) {
  [data-design="a"] .sp-header__bar { gap: 8px; }
  [data-design="a"] .sp-hero { padding: var(--space-panel) 14px; }
  [data-design="a"] .sp-estimate { padding: var(--space-panel) 0; }
  [data-design="a"] .sp-chip { width: 100%; }
  [data-design="a"] .sp-backwall { padding: var(--space-panel) 14px; }
  [data-design="a"] .sp-backwall__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   OVERFLOW GUARD — NO HORIZONTAL SCROLL AT ANY VIEWPORT
   Must be at BOTTOM of file, 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;
}

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