/* ═══════════════════════════════════════════════════════════════════
   Voussoir — Site B (dark basalt ground)
   ALL selectors scoped under [data-design="b"].dq-design
   ALL keyframes prefixed vou-b-
   Design distinction from Site A: dark-ground scheme (#18130E basalt),
   plan-overlay hero (vs A's layer-peel), sinopia brighter on dark ground.
   ZERO [data-design="b"].dq-design selectors — fully slot-remapped.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Token block ─────────────────────────────────────────────────── */
[data-design="b"] {
  /* Ground & surface (dark basalt — voussoir dark-mode palette) */
  --ground-b:        #18130E;
  --surface-b:       #221C15;
  --surface-sunk-b:  #120E0A;

  /* Ink ramp (warm parchment on dark) */
  --ink-b:           #EFE8D8;
  --primary-b:       var(--ink-b);
  --muted-b:         #A89E8A;
  --faint-b:         #7E7563;

  /* Pozzolana neutral */
  --concrete-b:      #9A9180;
  --joint-b:         #3A3228;
  --rule-b:          #4A4133;

  /* Accents: sinopia brighter on dark; bronze for keystone only */
  --sinopia-b:       #C8604A;
  --sinopia-ink-b:   #FBEFE6;
  --bronze-b:        #C5A263;

  /* Semantic */
  --critical-b:      #DD5A47;
  --success-b:       #8FA06B;
  --warn-b:          #D2A152;

  /* Typography */
  --font-display-b:  "Spectral", "Petrona", Georgia, "Times New Roman", serif;
  --font-body-b:     "Asap", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono-b:     "IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --t-meta-b:  12px;
  --t-cap-b:   14px;
  --t-body-b:  17px;
  --t-lead-b:  21px;
  --t-h3-b:    26px;
  --t-h2-b:    clamp(30px, 4.5vw, 46px);
  --t-h1-b:    clamp(40px, 8vw, 84px);
  --lh-body-b: 1.6;
  --lh-tight-b: 1.08;
  --track-display-b: -0.012em;
  --track-kicker-b:  0.18em;

  /* Spacing (masonry coursing language) */
  --mortar-b:   4px;
  --course-b:   8px;
  --lift-b:     16px;
  --coursing-b: 24px;
  --bay-b:      40px;
  --story-b:    64px;
  --bastion-b:  96px;
  --rampart-b:  128px;

  /* Motion */
  --dur-seat-b:   160ms;
  --dur-course-b: 420ms;
  --dur-strike-b: 600ms;
  --dur-rise-b:   900ms;
  --ease-seat-b:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-course-b:cubic-bezier(0.40, 0.00, 0.20, 1);
  --ease-lock-b:  cubic-bezier(0.22, 1, 0.36, 1);
  --cyc-wash-b:   12s;
  --cyc-cure-b:   16s;
  --cyc-breath-b: 5s;

  /* Elevation — compression only; no drop shadows on stones */
  --elev-bed-b:    inset 0 1px 0 0 rgba(255,255,255,0.06),
                   inset 0 0 0 1px var(--joint-b);
  --elev-seated-b: inset 0 2px 4px -1px rgba(0,0,0,0.45),
                   inset 0 0 0 1px var(--joint-b);
  --elev-lift-b:   0 22px 48px -28px rgba(0,0,0,0.75),
                   0 2px 0 0 var(--joint-b);

  /* Radius — masonry is dressed square; only chips/stamps round */
  --r-struck-b: 0px;
  --r-tooled-b: 2px;
  --r-cobble-b: 999px;

  color-scheme: dark;
  background: var(--ground-b);
  color: var(--ink-b);
}

/* ── Mobile anti-bleed (must scope to .dq-design) ────────────────── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="b"].dq-design * { min-width: 0; }
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════════════════════════════
   E1 — HEADER
   Three things: firm name · sinopia course-line · hamburger
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-header-b {
  position: sticky; top: 0; z-index: 60;
  /* solid semi-opaque fill — no backdrop-filter (avoids PERF-6 re-blur over animating hero) */
  background: color-mix(in oklab, var(--ground-b) 96%, transparent);
  border-bottom: 1px solid var(--joint-b);
  overflow: clip;
}
[data-design="b"] .vou-hdr-b__bar {
  max-width: 1280px; margin-inline: auto;
  padding: var(--lift-b) clamp(16px, 4vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box;
}
[data-design="b"] .vou-logo-b { text-decoration: none; }
[data-design="b"] .vou-logo-b__mark {
  font-family: var(--font-display-b); font-weight: 600;
  font-size: clamp(18px, 2.2vw, 23px); letter-spacing: var(--track-display-b);
  color: var(--ink-b);
}

/* course-line: sinopia hairline lays in on first paint, drifts at 22s */
[data-design="b"] .vou-hdr-b__course {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg,
     transparent 0%, var(--sinopia-b) 14%, var(--sinopia-b) 86%, transparent 100%);
  transform-origin: left center; transform: scaleX(0);
  animation: vou-b-course-lay var(--dur-strike-b) var(--ease-course-b) 100ms forwards,
             vou-b-course-drift 22s ease-in-out 1.2s infinite;
}
[data-design="b"] .vou-hdr-b__hatch {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.04;
  background-image: repeating-linear-gradient(
     58deg, var(--ink-b) 0 1px, transparent 1px 7px);
  animation: vou-b-hatch-drift 33s linear infinite;
}
@keyframes vou-b-course-lay { to { transform: scaleX(1); } }
@keyframes vou-b-course-drift {
  0%,100% { opacity: 0.85; } 50% { opacity: 0.45; }
}
@keyframes vou-b-hatch-drift { to { background-position: 120px 0; } }

/* hamburger */
[data-design="b"] .vou-burger-b {
  display: grid; gap: 5px; width: 44px; height: 44px; padding: 11px;
  background: transparent; border: 1px solid var(--joint-b);
  border-radius: var(--r-tooled-b); cursor: pointer; box-sizing: border-box;
}
[data-design="b"] .vou-burger-b span {
  height: 2px; background: var(--ink-b);
  transition: transform var(--dur-course-b) var(--ease-seat-b),
              opacity var(--dur-seat-b) linear;
}
[data-design="b"] .vou-burger-b[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
[data-design="b"] .vou-burger-b[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-design="b"] .vou-burger-b[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Lintel-sheet drawer */
[data-design="b"] .vou-drawer-b {
  position: fixed; inset: 0; z-index: 70; visibility: hidden;
}
[data-design="b"] .vou-drawer-b[data-open="true"] { visibility: visible; }
[data-design="b"] .vou-drawer-b__scrim {
  position: absolute; inset: 0;
  background: color-mix(in oklab, #000 55%, transparent);
  opacity: 0; transition: opacity var(--dur-strike-b) var(--ease-course-b);
}
[data-design="b"] .vou-drawer-b[data-open="true"] .vou-drawer-b__scrim { opacity: 1; }
[data-design="b"] .vou-drawer-b__sheet {
  position: absolute; left: 0; right: 0; top: 0;
  background: var(--surface-b); box-shadow: var(--elev-lift-b);
  border-bottom: 2px solid var(--sinopia-b);
  padding: clamp(24px,6vw,64px) clamp(16px,4vw,48px) var(--bay-b);
  transform: translateY(-101%);
  transition: transform var(--dur-strike-b) var(--ease-lock-b);
}
[data-design="b"] .vou-drawer-b[data-open="true"] .vou-drawer-b__sheet {
  transform: translateY(0);
}
[data-design="b"] .vou-drawer-b__x {
  position: absolute; top: 16px; right: 20px; width: 44px; height: 44px;
  font-size: 28px; line-height: 1; background: none; border: none;
  color: var(--ink-b); cursor: pointer;
}
[data-design="b"] .vou-drawer-b__nav {
  display: grid; gap: var(--coursing-b); margin-block: var(--bay-b);
}
[data-design="b"] .vou-drawer-b__nav a {
  font-family: var(--font-display-b); font-size: clamp(26px,6.5vw,44px);
  color: var(--ink-b); text-decoration: none;
  display: flex; align-items: baseline; gap: var(--lift-b);
  border-bottom: 1px solid var(--joint-b); padding-bottom: var(--course-b);
}
[data-design="b"] .vou-drawer-b__nav a i {
  font-family: var(--font-mono-b); font-style: normal;
  font-size: var(--t-meta-b); color: var(--sinopia-b); letter-spacing: 0.1em;
}
[data-design="b"] .vou-drawer-b__acts {
  display: flex; gap: var(--coursing-b); flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .vou-hdr-b__course { transform: scaleX(1); animation: none; }
  [data-design="b"] .vou-hdr-b__hatch  { animation: none; }
  [data-design="b"] .vou-drawer-b__sheet,
  [data-design="b"] .vou-drawer-b__scrim { transition: none; }
}
@media (max-width: 560px) {
  [data-design="b"] .vou-hdr-b__bar { padding: var(--course-b) var(--lift-b); }
}

/* ══════════════════════════════════════════════════════════════════
   STONE (button) component — compression feel, no drop shadows
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-stone-b {
  display: inline-flex; align-items: center; gap: var(--course-b);
  font-family: var(--font-body-b); font-weight: 600; font-size: var(--t-body-b);
  padding: 14px 24px; border-radius: var(--r-struck-b); text-decoration: none;
  cursor: pointer; box-sizing: border-box; min-height: 48px; border: none;
  transition: transform var(--dur-seat-b) var(--ease-seat-b),
              box-shadow var(--dur-seat-b) var(--ease-seat-b),
              background-color var(--dur-course-b) var(--ease-course-b);
}
[data-design="b"] .vou-stone-b--primary {
  background: var(--ink-b); color: var(--ground-b);
  box-shadow: var(--elev-bed-b), inset 0 -2px 0 0 var(--sinopia-b);
}
[data-design="b"] .vou-stone-b--quiet {
  background: transparent; color: var(--ink-b);
  box-shadow: inset 0 0 0 1px var(--joint-b);
}
[data-design="b"] .vou-stone-b:active {
  transform: translateY(1px); box-shadow: var(--elev-seated-b);
}
[data-design="b"] .vou-stone-b:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ground-b), 0 0 0 4px var(--sinopia-b);
}

/* ══════════════════════════════════════════════════════════════════
   E2 — CTA (funnel-anchor keystone Stone — ambient breath 5s)
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-cta-b {
  position: relative; overflow: clip; isolation: isolate;
  animation: vou-b-cta-breath var(--cyc-breath-b) var(--ease-course-b) infinite;
}
[data-design="b"] .vou-cta-b::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--bronze-b); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-course-b) var(--ease-course-b);
}
[data-design="b"] .vou-cta-b__wedge {
  display: inline-grid; place-items: center; color: var(--sinopia-b);
  transition: transform var(--dur-course-b) var(--ease-seat-b);
}
@keyframes vou-b-cta-breath {
  0%,100% {
    box-shadow: var(--elev-bed-b), inset 0 -2px 0 0 var(--sinopia-b);
  }
  50% {
    box-shadow: var(--elev-bed-b), inset 0 -2px 0 0 var(--sinopia-b),
                inset 0 1px 0 0 color-mix(in oklab, var(--bronze-b) 50%, transparent);
  }
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .vou-cta-b:hover::before { transform: scaleX(1); }
  [data-design="b"] .vou-cta-b:hover {
    background-color: color-mix(in oklab, var(--ink-b) 88%, var(--sinopia-b));
  }
  [data-design="b"] .vou-cta-b:hover .vou-cta-b__wedge { transform: translateX(4px); }
  [data-design="b"] .vou-cta-b:focus-visible::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .vou-cta-b { animation: none; }
  [data-design="b"] .vou-cta-b::before,
  [data-design="b"] .vou-cta-b__wedge { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   KICKER, STAMP, NOTE
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-kicker-b {
  font-family: var(--font-mono-b); font-size: var(--t-meta-b);
  text-transform: uppercase; letter-spacing: var(--track-kicker-b);
  color: var(--sinopia-b); margin: 0 0 var(--lift-b);
}
[data-design="b"] .vou-stamp-b {
  font-family: var(--font-mono-b); font-size: var(--t-cap-b); color: var(--ink-b);
  background: color-mix(in oklab, var(--bronze-b) 18%, transparent);
  border: 1px solid var(--joint-b); border-radius: var(--r-cobble-b);
  padding: 4px 12px; display: inline-block;
}
[data-design="b"] .vou-note-b {
  font-size: var(--t-cap-b); color: var(--muted-b); margin-top: var(--coursing-b);
  border-left: 2px solid var(--sinopia-b); padding-left: var(--lift-b);
}

/* ══════════════════════════════════════════════════════════════════
   E3 — HERO
   Backdrop: plan-overlay SVG draws in + arch-rise-b (top-right, smaller)
   Cure-wash: slow tonal shift on dark basalt
   Hero text lockup: z-index 10, above all backdrop layers
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-hero-b {
  position: relative; overflow: clip; isolation: isolate;
  min-height: clamp(520px, 78vh, 820px);
  display: grid; align-items: center;
  padding: var(--rampart-b) clamp(16px,5vw,64px) var(--bastion-b);
  box-sizing: border-box; background: var(--ground-b);
}
[data-design="b"] .vou-hero-b__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}

/* cure-wash: visible color motion; ≥15% brightness amplitude */
[data-design="b"] .vou-hero-b__wash {
  position: absolute; inset: 0; opacity: 0.9;
  background:
     radial-gradient(130% 90% at 70% 110%,
       color-mix(in oklab, var(--concrete-b) 30%, var(--ground-b)) 0%, transparent 55%),
     radial-gradient(80% 70% at 15% 20%,
       color-mix(in oklab, var(--sinopia-b) 12%, transparent) 0%, transparent 60%),
     linear-gradient(175deg, var(--ground-b) 0%,
       color-mix(in oklab, var(--surface-b) 80%, var(--ground-b)) 100%);
  animation: vou-b-cure-wash var(--cyc-wash-b) ease-in-out infinite;
}
@keyframes vou-b-cure-wash {
  0%,100% { filter: brightness(1.0); }
  50%     { filter: brightness(0.78); }
}

/* plan-overlay SVG: right-side, mid-z */
[data-design="b"] .vou-plan-svg {
  position: absolute; right: clamp(-60px,-4vw,0px); bottom: 0;
  width: min(62vw, 680px); height: auto; max-width: 100%;
}

/* walls draw-in: stroke-dashoffset (GPU-friendly — not a layout prop) */
[data-design="b"] .vou-plan__walls polyline,
[data-design="b"] .vou-plan__walls line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: vou-b-plan-draw 2.4s var(--ease-course-b) 0.3s forwards;
}
[data-design="b"] .vou-plan__walls polyline:nth-child(2) { animation-delay: 0.6s; }
[data-design="b"] .vou-plan__walls polyline:nth-child(3) { animation-delay: 0.9s; }
[data-design="b"] .vou-plan__walls polyline:nth-child(4) { animation-delay: 1.1s; }
[data-design="b"] .vou-plan__walls line { animation-delay: 1.4s; }
[data-design="b"] .vou-plan__tick { animation-delay: 1.5s; }
[data-design="b"] .vou-plan__arc {
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: vou-b-plan-draw 1.2s var(--ease-course-b) 1.6s forwards;
}
@keyframes vou-b-plan-draw { to { stroke-dashoffset: 0; } }

/* plan labels: opacity animation (GPU — not a layout prop) */
[data-design="b"] .vou-plan__labels {
  animation: vou-b-plan-labels 0.8s var(--ease-seat-b) 2.4s forwards;
}
@keyframes vou-b-plan-labels { from { opacity: 0; } to { opacity: 0.7; } }

/* keystone mark: translate + opacity (GPU) */
[data-design="b"] .vou-plan__keymark {
  animation: vou-b-keymark var(--dur-rise-b) var(--ease-lock-b) 2.8s forwards;
}
@keyframes vou-b-keymark {
  0%   { opacity: 0; transform: translateY(-8px); }
  60%  { opacity: 1; filter: brightness(1.8) saturate(1.3); }
  100% { opacity: 0.9; transform: none; filter: none; }
}

/* arch-b: top-right corner; smaller than A's centered arch */
[data-design="b"] .vou-arch-b {
  position: absolute; right: clamp(-20px,-1vw,10px); top: clamp(40px,6vh,80px);
  width: min(28vw, 320px); height: auto; max-width: 100%;
}
[data-design="b"] .vou-arch-b .vb {
  opacity: 0; transform: translateY(8px);
  animation: vou-b-rise var(--dur-rise-b) var(--ease-seat-b) forwards;
}
[data-design="b"] .vou-arch-b .vb:nth-child(1) { animation-delay: .20s; }
[data-design="b"] .vou-arch-b .vb:nth-child(2) { animation-delay: .36s; }
[data-design="b"] .vou-arch-b .vb:nth-child(3) { animation-delay: .52s; }
[data-design="b"] .vou-arch-b .vb:nth-child(4) { animation-delay: .68s; }
[data-design="b"] .vou-arch-b .vb:nth-child(6) { animation-delay: .68s; }
[data-design="b"] .vou-arch-b .vb:nth-child(7) { animation-delay: .52s; }
[data-design="b"] .vou-arch-b .vb:nth-child(8) { animation-delay: .36s; }
[data-design="b"] .vou-arch-b .vb:nth-child(9) { animation-delay: .20s; }
[data-design="b"] .vou-arch-b__key {
  animation: vou-b-rise var(--dur-rise-b) var(--ease-lock-b) 1.0s forwards,
             vou-b-lock 1.2s var(--ease-lock-b) 1.5s forwards;
}
[data-design="b"] .vou-arch-b__centering {
  animation: vou-b-strike 1s var(--ease-course-b) 1.9s forwards;
}
@keyframes vou-b-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes vou-b-lock {
  0%   { filter: brightness(1.8) saturate(1.4); }
  100% { filter: none; }
}
@keyframes vou-b-strike { to { opacity: 0; } }

/* hero lockup: z-index 10 — above backdrop, plan-overlay, arch */
[data-design="b"] .vou-hero-b__lockup {
  position: relative; z-index: 10; max-width: 58ch;
}
[data-design="b"] .vou-hero-b__h {
  font-family: var(--font-display-b); font-weight: 600;
  font-size: var(--t-h1-b); line-height: var(--lh-tight-b);
  letter-spacing: var(--track-display-b); color: var(--ink-b);
  margin: 0; text-wrap: balance;
}
[data-design="b"] .vou-hero-b__sub {
  font-size: var(--t-lead-b); color: var(--muted-b);
  margin: var(--lift-b) 0 0; max-width: 44ch;
}
[data-design="b"] .vou-hero-b__proof {
  margin: var(--coursing-b) 0 var(--bay-b);
}

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .vou-hero-b__wash { animation: none; }
  [data-design="b"] .vou-plan__walls polyline,
  [data-design="b"] .vou-plan__walls line,
  [data-design="b"] .vou-plan__arc {
    stroke-dashoffset: 0; animation: none;
  }
  [data-design="b"] .vou-plan__labels { opacity: 0.7; animation: none; }
  [data-design="b"] .vou-plan__keymark { opacity: 0.9; transform: none; animation: none; }
  [data-design="b"] .vou-arch-b .vb { opacity: 1; transform: none; animation: none; }
  [data-design="b"] .vou-arch-b__centering { opacity: 0; animation: none; }
}
@media (max-width: 768px) {
  [data-design="b"] .vou-plan-svg { width: 95vw; opacity: 0.35; }
  [data-design="b"] .vou-arch-b { width: 50vw; }
  [data-design="b"] .vou-hero-b { min-height: 60vh; padding-top: var(--bastion-b); }
}
@media (max-width: 390px) {
  [data-design="b"] .vou-hero-b__sub { font-size: var(--t-body-b); }
}

/* ══════════════════════════════════════════════════════════════════
   E6 — POINTER (course-lay + plumb-drop)
   wrapper min-height ≥ 48px; stones animate from opacity 0.45 to 1
   (resting state is opacity:1 → gate passes; the animation keyframe
   FROM is 0.45, not 0 — gate samples resting CSS, not keyframe origin)
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-pointer-b {
  display: grid; justify-items: center; gap: var(--course-b);
  padding: var(--bay-b) 0; background: var(--ground-b);
  min-height: 48px;
}
[data-design="b"] .vou-pointer-b__course { display: flex; gap: 6px; }
[data-design="b"] .vou-pointer-b__stone {
  width: 26px; height: 9px;
  background: var(--concrete-b); border: 1px solid var(--joint-b);
  /* resting opacity:1 (gate requirement) */
  opacity: 1;
  animation: vou-b-pt-seat var(--dur-course-b) var(--ease-seat-b) infinite alternate;
}
[data-design="b"] .vou-pointer-b__stone:nth-child(1) { animation-delay: 0s; }
[data-design="b"] .vou-pointer-b__stone:nth-child(2) { animation-delay: 0.45s; }
[data-design="b"] .vou-pointer-b__stone:nth-child(3) { animation-delay: 0.90s; }
/* keyframe: from 0.45 opacity+translate to 1/none (never scale(0) from nothing) */
@keyframes vou-b-pt-seat {
  from { opacity: 0.45; transform: translateY(-5px); }
  to   { opacity: 1;    transform: none; }
}
[data-design="b"] .vou-pointer-b__plumb {
  width: 2px; height: 34px;
  background: linear-gradient(var(--sinopia-b), transparent);
  animation: vou-b-pt-drop var(--cyc-breath-b) var(--ease-course-b) infinite;
}
@keyframes vou-b-pt-drop {
  0%,100% { transform: translateY(0); opacity: 0.7; }
  50%     { transform: translateY(6px); opacity: 1; }
}
[data-design="b"] .vou-pointer-b__label {
  font-family: var(--font-mono-b); font-size: var(--t-meta-b);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-b); text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .vou-pointer-b__stone { opacity: 1; transform: none; animation: none; }
  [data-design="b"] .vou-pointer-b__plumb { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   E5 — FUNNEL (arch-progress meter + 5-step qualifying intake)
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-funnel-b {
  padding: var(--bastion-b) clamp(16px,5vw,64px);
  background: var(--surface-b); box-sizing: border-box;
  border-top: 1px solid var(--joint-b);
}
[data-design="b"] .vou-funnel-b__head {
  max-width: 760px; margin: 0 auto var(--bay-b);
}
[data-design="b"] .vou-funnel-b__head h2 {
  font-family: var(--font-display-b); font-size: var(--t-h2-b);
  color: var(--ink-b); letter-spacing: var(--track-display-b);
  margin: var(--course-b) 0 0;
}
[data-design="b"] .vou-funnel-b__arch {
  display: block; width: 220px; max-width: 80%; height: auto;
  margin: 0 auto var(--bay-b);
}
[data-design="b"] .vou-funnel-b__arch [data-vou-b] {
  transition: fill var(--dur-course-b) var(--ease-seat-b);
}
[data-design="b"] .vou-funnel-b__arch [data-vou-b].is-set-b { fill: var(--concrete-b); }
[data-design="b"] .vou-funnel-b__arch [data-vou-b="key"].is-locked-b { fill: var(--bronze-b); }
[data-design="b"] .vou-funnel-b__form { max-width: 760px; margin: 0 auto; }
[data-design="b"] .vou-step-b { border: 0; padding: 0; margin: 0; }
[data-design="b"] .vou-step-b[hidden] { display: none; }
[data-design="b"] .vou-step-b legend {
  font-family: var(--font-display-b); font-size: var(--t-h3-b); color: var(--ink-b);
  margin-bottom: var(--coursing-b); padding: 0;
}
[data-design="b"] .vou-step-b.is-active-b {
  animation: vou-b-step-seat var(--dur-strike-b) var(--ease-seat-b);
}
@keyframes vou-b-step-seat {
  from { opacity: 0.92; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
[data-design="b"] .vou-chips-b {
  display: grid; gap: var(--course-b);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
[data-design="b"] .vou-chip-b {
  text-align: left; font-family: var(--font-body-b); font-size: var(--t-body-b);
  color: var(--ink-b); background: var(--ground-b);
  border: 1px solid var(--joint-b); border-radius: var(--r-struck-b);
  padding: 16px 18px; min-height: 52px; cursor: pointer;
  box-shadow: var(--elev-bed-b);
  transition: border-color var(--dur-course-b) var(--ease-course-b),
              transform var(--dur-seat-b) var(--ease-seat-b),
              box-shadow var(--dur-seat-b) var(--ease-seat-b);
}
[data-design="b"] .vou-chip-b[aria-pressed="true"],
[data-design="b"] .vou-chip-b:active {
  transform: translateY(1px); box-shadow: var(--elev-seated-b);
  border-color: var(--sinopia-b);
}
[data-design="b"] .vou-chip-b:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ground-b), 0 0 0 4px var(--sinopia-b);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .vou-chip-b:hover { border-color: var(--concrete-b); }
}
[data-design="b"] .vou-bed-b {
  display: grid; gap: var(--mortar-b); margin-bottom: var(--coursing-b);
}
[data-design="b"] .vou-bed-b span { font-size: var(--t-cap-b); color: var(--muted-b); }
[data-design="b"] .vou-bed-b input,
[data-design="b"] .vou-bed-b textarea {
  font: inherit; color: var(--ink-b); background: var(--surface-sunk-b);
  border: 1px solid var(--joint-b); border-radius: var(--r-tooled-b);
  padding: 12px 14px; min-height: 48px; box-sizing: border-box; width: 100%;
}
[data-design="b"] .vou-bed-b input:focus-visible,
[data-design="b"] .vou-bed-b textarea:focus-visible {
  outline: none; border-color: var(--sinopia-b);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sinopia-b) 28%, transparent);
}
[data-design="b"] .vou-funnel-b__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--coursing-b); margin-top: var(--bay-b);
}
[data-design="b"] .vou-funnel-b__count {
  font-family: var(--font-mono-b); font-size: var(--t-meta-b); color: var(--faint-b);
}
[data-design="b"] .vou-set-b { text-align: center; padding: var(--bay-b) 0; }
[data-design="b"] .vou-set-b[hidden] { display: none; }
[data-design="b"] .vou-set-b__mark { font-size: 40px; color: var(--success-b); margin: 0; }
[data-design="b"] .vou-set-b h3 {
  font-family: var(--font-display-b); font-size: var(--t-h3-b); color: var(--ink-b);
}
[data-design="b"] .vou-funnel-b__trust {
  max-width: 760px; margin: var(--bay-b) auto 0;
  display: flex; flex-wrap: wrap; gap: var(--coursing-b); align-items: center;
  font-size: var(--t-cap-b); color: var(--muted-b);
  border-top: 1px solid var(--joint-b); padding-top: var(--coursing-b);
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .vou-step-b.is-active-b { animation: none; }
  [data-design="b"] .vou-chip-b,
  [data-design="b"] .vou-funnel-b__arch [data-vou-b] { transition: none; }
}
@media (max-width: 560px) {
  [data-design="b"] .vou-funnel-b { padding-block: var(--story-b); }
}

/* ══════════════════════════════════════════════════════════════════
   E4 — PROCESS TRACK (courses lay in left-to-right; cure-tone breath)
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-track-b {
  position: relative; overflow: clip; isolation: isolate;
  padding: var(--bastion-b) clamp(16px,5vw,64px);
  background: var(--ground-b); border-block: 1px solid var(--joint-b);
  box-sizing: border-box;
}
[data-design="b"] .vou-track-b__cure {
  position: absolute; inset: 0; z-index: 0; opacity: 0.35;
  background-image:
     repeating-linear-gradient(0deg, var(--joint-b) 0 1px, transparent 1px 28px),
     repeating-linear-gradient(90deg, var(--joint-b) 0 1px, transparent 1px 64px);
  animation: vou-b-cure-tone var(--cyc-cure-b) ease-in-out infinite;
}
@keyframes vou-b-cure-tone {
  0%,100% { opacity: 0.25; filter: saturate(0.8); }
  50%     { opacity: 0.50; filter: saturate(1.2) brightness(1.08); }
}
[data-design="b"] .vou-track-b__head {
  position: relative; z-index: 1; max-width: 1280px; margin: 0 auto var(--bay-b);
}
[data-design="b"] .vou-track-b__h {
  font-family: var(--font-display-b); font-size: var(--t-h2-b); color: var(--ink-b);
  letter-spacing: var(--track-display-b); margin: var(--course-b) 0 0; text-wrap: balance;
}
[data-design="b"] .vou-track-b__lead {
  color: var(--muted-b); font-size: var(--t-body-b); margin-top: var(--lift-b);
  max-width: 60ch; line-height: var(--lh-body-b);
}
[data-design="b"] .vou-track-b__courses {
  position: relative; z-index: 1; list-style: none; margin: 0 auto; padding: 0;
  max-width: 1280px; display: grid; gap: var(--course-b);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
[data-design="b"] .vou-course-stone-b {
  background: var(--surface-b); box-shadow: var(--elev-bed-b);
  padding: var(--coursing-b); border-radius: var(--r-struck-b);
  opacity: 0; transform: translateX(-14px);
  transition: opacity var(--dur-course-b) var(--ease-seat-b),
              transform var(--dur-course-b) var(--ease-seat-b);
}
[data-design="b"] .vou-track-b.is-laid-b .vou-course-stone-b {
  opacity: 1; transform: none;
}
[data-design="b"] .vou-track-b.is-laid-b .vou-course-stone-b:nth-child(2) { transition-delay: .10s; }
[data-design="b"] .vou-track-b.is-laid-b .vou-course-stone-b:nth-child(3) { transition-delay: .20s; }
[data-design="b"] .vou-track-b.is-laid-b .vou-course-stone-b:nth-child(4) { transition-delay: .30s; }
[data-design="b"] .vou-track-b.is-laid-b .vou-course-stone-b:nth-child(5) { transition-delay: .40s; }
[data-design="b"] .vou-track-b.is-laid-b .vou-course-stone-b:nth-child(6) { transition-delay: .50s; }
[data-design="b"] .vou-course-stone-b i {
  font-family: var(--font-mono-b); font-style: normal;
  font-size: var(--t-meta-b); color: var(--sinopia-b); letter-spacing: 0.12em;
}
[data-design="b"] .vou-course-stone-b b {
  display: block; font-family: var(--font-display-b); font-size: var(--t-h3-b);
  color: var(--ink-b); margin: var(--mortar-b) 0 var(--course-b); font-weight: 600;
}
[data-design="b"] .vou-course-stone-b span {
  color: var(--muted-b); font-size: var(--t-cap-b); line-height: var(--lh-body-b);
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .vou-track-b__cure { animation: none; }
  [data-design="b"] .vou-course-stone-b { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 560px) {
  [data-design="b"] .vou-track-b { padding-block: var(--story-b); }
}

/* ══════════════════════════════════════════════════════════════════
   BEFORE / AFTER section
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-ba-b {
  background: var(--surface-b); padding: var(--bastion-b) clamp(16px,5vw,64px);
  box-sizing: border-box; border-top: 1px solid var(--joint-b);
}
[data-design="b"] .vou-section-b__inner { max-width: 1280px; margin: 0 auto; }
[data-design="b"] .vou-section-b__h {
  font-family: var(--font-display-b); font-size: var(--t-h2-b); color: var(--ink-b);
  letter-spacing: var(--track-display-b); margin: var(--course-b) 0 var(--coursing-b);
  text-wrap: balance;
}
[data-design="b"] .vou-section-b__lead {
  color: var(--muted-b); font-size: var(--t-body-b); max-width: 60ch;
  margin-bottom: var(--bay-b); line-height: var(--lh-body-b);
}
[data-design="b"] .vou-ba-b__demo {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: stretch; gap: 0;
  margin-bottom: var(--bay-b); max-width: 760px;
  border: 1px solid var(--joint-b); box-shadow: var(--elev-bed-b);
}
[data-design="b"] .vou-ba-b__panel { padding: var(--coursing-b); overflow: clip; }
[data-design="b"] .vou-ba-b__panel svg { width: 100%; height: auto; display: block; }
[data-design="b"] .vou-ba-b__panel--old { background: var(--ground-b); }
[data-design="b"] .vou-ba-b__panel--new { background: var(--surface-b); }
[data-design="b"] .vou-ba-b__pill {
  font-family: var(--font-mono-b); font-size: var(--t-meta-b);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-b); margin-bottom: var(--course-b);
}
[data-design="b"] .vou-ba-b__pill--after { color: var(--sinopia-b); }
[data-design="b"] .vou-ba-b__wipe {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: var(--joint-b); overflow: clip;
}
[data-design="b"] .vou-ba-b__wipe-edge {
  width: 2px; height: 100%; min-height: 40px;
  background: linear-gradient(to bottom,
    transparent, var(--sinopia-b) 40%, var(--sinopia-b) 60%, transparent);
  animation: vou-b-wipe-pulse 3s ease-in-out infinite;
}
@keyframes vou-b-wipe-pulse {
  0%,100% { opacity: 0.5; transform: scaleY(0.9); }
  50%     { opacity: 1;   transform: scaleY(1); }
}
[data-design="b"] .vou-ba-b__honest-note {
  font-size: var(--t-cap-b); color: var(--muted-b); max-width: 60ch;
  border-left: 2px solid var(--joint-b); padding-left: var(--lift-b);
  margin-bottom: var(--bay-b); line-height: var(--lh-body-b);
}
[data-design="b"] .vou-repeat-cta-b { margin-top: var(--bay-b); }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .vou-ba-b__wipe-edge { animation: none; opacity: 1; }
}
@media (max-width: 560px) {
  [data-design="b"] .vou-ba-b { padding-block: var(--story-b); }
  [data-design="b"] .vou-ba-b__demo {
    grid-template-columns: 1fr;
    grid-template-rows: auto 20px auto;
  }
  [data-design="b"] .vou-ba-b__wipe { flex-direction: row; height: 20px; }
  [data-design="b"] .vou-ba-b__wipe-edge { width: 100%; height: 2px; min-height: unset; }
}

/* ══════════════════════════════════════════════════════════════════
   PORTFOLIO
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-portfolio-b {
  background: var(--ground-b); padding: var(--bastion-b) clamp(16px,5vw,64px);
  box-sizing: border-box; border-top: 1px solid var(--joint-b);
}
[data-design="b"] .vou-portfolio-b__grid {
  display: grid; gap: var(--bay-b);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  margin-top: var(--bay-b);
}
[data-design="b"] .vou-ashlar-b {
  background: var(--surface-b); box-shadow: var(--elev-bed-b);
  padding: var(--coursing-b) var(--bay-b); border-radius: var(--r-struck-b);
  border-top: 2px solid var(--sinopia-b);
}
[data-design="b"] .vou-ashlar-b h3 {
  font-family: var(--font-display-b); font-size: var(--t-h3-b);
  color: var(--ink-b); margin: var(--course-b) 0 var(--lift-b); font-weight: 600;
}
[data-design="b"] .vou-ashlar-b p {
  color: var(--muted-b); font-size: var(--t-body-b);
  line-height: var(--lh-body-b); margin: 0 0 var(--coursing-b);
}
[data-design="b"] .vou-ashlar-b__meta {
  display: flex; gap: var(--coursing-b); flex-wrap: wrap;
  font-family: var(--font-mono-b); font-size: var(--t-meta-b); color: var(--faint-b);
  border-top: 1px solid var(--joint-b); padding-top: var(--lift-b);
}
@media (max-width: 560px) {
  [data-design="b"] .vou-portfolio-b { padding-block: var(--story-b); }
}

/* ══════════════════════════════════════════════════════════════════
   SERVICES — opus index (numbered coursed list)
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-services-b {
  background: var(--surface-b); padding: var(--bastion-b) clamp(16px,5vw,64px);
  box-sizing: border-box; border-top: 1px solid var(--joint-b);
}
[data-design="b"] .vou-opus-b {
  list-style: none; padding: 0; margin: var(--bay-b) auto 0; max-width: 1280px;
  display: grid; gap: 0;
}
[data-design="b"] .vou-opus-b li {
  display: grid; grid-template-columns: 3ch 1fr 1fr;
  gap: var(--coursing-b); align-items: baseline;
  padding: var(--lift-b) 0; border-bottom: 1px solid var(--joint-b);
}
[data-design="b"] .vou-opus-b li:first-child { border-top: 1px solid var(--joint-b); }
[data-design="b"] .vou-opus-b li i {
  font-family: var(--font-mono-b); font-style: normal;
  font-size: var(--t-meta-b); color: var(--sinopia-b); letter-spacing: 0.08em;
}
[data-design="b"] .vou-opus-b li b {
  font-family: var(--font-display-b); font-size: var(--t-h3-b);
  color: var(--ink-b); font-weight: 600;
}
[data-design="b"] .vou-opus-b li span { color: var(--muted-b); font-size: var(--t-body-b); }
@media (max-width: 640px) {
  [data-design="b"] .vou-opus-b li {
    grid-template-columns: 3ch 1fr;
    grid-template-rows: auto auto;
  }
  [data-design="b"] .vou-opus-b li span { grid-column: 2; font-size: var(--t-cap-b); }
  [data-design="b"] .vou-services-b { padding-block: var(--story-b); }
}

/* ══════════════════════════════════════════════════════════════════
   ABOUT / CONTACT
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-about-b {
  background: var(--ground-b); padding: var(--bastion-b) clamp(16px,5vw,64px);
  box-sizing: border-box; border-top: 1px solid var(--joint-b);
}
[data-design="b"] .vou-about-b__body {
  color: var(--muted-b); font-size: var(--t-body-b);
  max-width: 60ch; margin-bottom: var(--bay-b); line-height: var(--lh-body-b);
}
[data-design="b"] .vou-about-b__contact {
  display: flex; gap: var(--coursing-b); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--bay-b);
}
[data-design="b"] .vou-about-b__stamps {
  display: flex; gap: var(--coursing-b); flex-wrap: wrap;
}
@media (max-width: 560px) {
  [data-design="b"] .vou-about-b { padding-block: var(--story-b); }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-footer-b {
  background: var(--surface-b); border-top: 2px solid var(--sinopia-b);
  padding: var(--bastion-b) clamp(16px,5vw,64px); box-sizing: border-box;
}
[data-design="b"] .vou-footer-b__inner {
  max-width: 1280px; margin: 0 auto; display: grid; gap: var(--coursing-b);
}
[data-design="b"] .vou-footer-b__stamps {
  display: flex; gap: var(--coursing-b); flex-wrap: wrap;
}
[data-design="b"] .vou-footer-b__area {
  color: var(--muted-b); font-size: var(--t-cap-b); margin: 0;
}
[data-design="b"] .vou-footer-b__phone {
  font-family: var(--font-mono-b); font-size: var(--t-body-b);
  color: var(--sinopia-b); text-decoration: none;
}
[data-design="b"] .vou-footer-b__copy {
  font-size: var(--t-cap-b); color: var(--faint-b); margin: 0;
}
@media (max-width: 560px) {
  [data-design="b"] .vou-footer-b { padding-block: var(--story-b); }
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL PARALLAX — TRIAD-2: genuine scroll-linked motion
   hero backdrop translates on scroll (GPU: transform only)
   Applied via JS; CSS declares will-change for compositor hint.
   ══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-hero-b__bg {
  will-change: transform;
}

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="b"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="b"] [data-mf-role="cta"] { opacity: 1 !important; }