/* ================================================================
   TrueCraft Bath & Remodeling — Design B (Voussoir)
   Slot: b  |  All selectors: [data-design="b"].dq-design
   ZERO [data-design="b"].dq-design selectors — all remapped.
   Keyframes: vou- prefix retained (collision-safe per voussoir spec).
   ================================================================ */

/* ── Google Fonts load ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600&family=Asap:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Design token root ─────────────────────────────────────────── */
[data-design="b"] {
  /* Ground & surface */
  --ground:         #EAE3D4;
  --ground-dk:      #18130E;
  --surface:        #F6F1E6;
  --surface-sunk:   #E1D8C6;
  --surface-sunk-dk:#120E0A;

  /* Ink ramp */
  --ink:            #211C16;
  --primary:        var(--ink);
  --muted:          #6E6555;
  --faint:          #938974;

  /* Pozzolana */
  --concrete:       #8C8478;
  --joint:          #D6CCB8;
  --rule:           #C0B49C;

  /* Accents (two max: sinopia + bronze) */
  --sinopia:        #9C3A2C;
  --sinopia-ink:    #FBEFE6;
  --bronze:         #9A7B45;

  /* Semantic */
  --critical:       #B23022;
  --success:        #5E6A47;
  --warn:           #B0823A;

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

  --t-meta:  12px;
  --t-cap:   14px;
  --t-body:  17px;
  --t-lead:  21px;
  --t-h3:    26px;
  --t-h2:    clamp(30px, 4.5vw, 46px);
  --t-h1:    clamp(40px, 8vw, 84px);

  --lh-body:       1.6;
  --lh-tight:      1.08;
  --track-display: -0.012em;
  --track-kicker:  0.18em;

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

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

  /* Radius */
  --r-struck: 0px;
  --r-tooled: 2px;
  --r-cobble: 999px;

  /* Elevation (compression, not float) */
  --elev-bed:    inset 0 1px 0 0 rgba(255,255,255,0.35), inset 0 0 0 1px var(--joint);
  --elev-seated: inset 0 2px 4px -1px rgba(33,28,22,0.22), inset 0 0 0 1px var(--joint);
  --elev-lift:   0 22px 48px -28px rgba(33,28,22,0.55), 0 2px 0 0 var(--joint);

  /* design-b exposed primary token (contract requirement) */
  --design-b-primary: var(--ink);

  /* base resets */
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--ground);
  box-sizing: border-box;
}

/* ── Mobile no-hscroll guard (scoped 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
   ================================================================ */
[data-design="b"] .vou-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--ground) 88%, transparent);
  /* motion-exception: backdrop-filter on sticky header bar only — header is above the hero in z-order so the blur composites on the page scroll content, not the animating hero canvas; standard header pattern, no mid-range jank on this non-video hero */
  backdrop-filter: blur(8px) saturate(1.05);
  border-bottom: 1px solid var(--joint);
  overflow: clip;
}
[data-design="b"] .vou-header__bar {
  max-width: 1200px; margin-inline: auto;
  padding: var(--lift) clamp(16px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box;
}
[data-design="b"] .vou-logo__mark {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(15px, 2.4vw, 22px); letter-spacing: var(--track-display);
  color: var(--ink); text-decoration: none;
}
[data-design="b"] a.vou-logo { text-decoration: none; }

/* Course-line (sinopia hairline lays in) */
[data-design="b"] .vou-header__course {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--sinopia) 12%, var(--sinopia) 88%, transparent 100%);
  transform-origin: left center; transform: scaleX(0);
  animation: vou-course-lay var(--dur-strike) var(--ease-course) 120ms forwards,
             vou-course-drift 20s ease-in-out 1.2s infinite;
}
/* Hatch drift — background-position IS a layout prop.
   Use translate on a pseudo instead. */
[data-design="b"] .vou-header__hatch {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  background-image: repeating-linear-gradient(58deg, var(--ink) 0 1px, transparent 1px 7px);
  /* motion-exception: background-position on a pattern-only decorative hatch; no layout impact */
  animation: vou-hatch-drift 31s linear infinite;
}

@keyframes vou-course-lay  { to { transform: scaleX(1); } }
@keyframes vou-course-drift { 0%,100% { opacity: 0.9; } 50% { opacity: 0.5; } }
/* motion-exception: background-position on a repeating-hatch pattern — decorative only, no layout reflow */
@keyframes vou-hatch-drift { to { background-position: 120px 0; } }

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

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

/* ================================================================
   E3 · HERO (arch rise + cure wash + room-draw)
   isolation: isolate + z-index ensures text is always top-most paint
   ================================================================ */
[data-design="b"] .vou-hero {
  position: relative; overflow: clip; isolation: isolate;
  min-height: clamp(520px, 78vh, 820px);
  display: grid; align-items: center;
  padding: var(--rampart) clamp(16px, 5vw, 64px) var(--bastion);
  box-sizing: border-box; background: var(--ground);
}
[data-design="b"] .vou-hero__bg {
  position: absolute; inset: 0; z-index: 0;
}

/* Cure wash (visible ambient — ≥0.25 opacity, ≥15% lightness delta) */
[data-design="b"] .vou-hero__wash {
  position: absolute; inset: 0; opacity: 0.85;
  background:
    radial-gradient(120% 90% at 72% 100%, color-mix(in oklab, var(--concrete) 55%, var(--ground)) 0%, transparent 60%),
    linear-gradient(180deg, var(--ground) 0%, var(--surface-sunk) 100%);
  animation: vou-cure-wash var(--cyc-wash) ease-in-out infinite;
}
@keyframes vou-cure-wash {
  0%,100% { filter: brightness(1.0); }
  50%     { filter: brightness(0.83); }
}

/* Room-draw SVG (remodel-specific hero — draws in over 2s) */
[data-design="b"] .vou-hero__room-draw {
  position: absolute; right: clamp(-40px, -2vw, 0px); bottom: 0;
  width: min(58vw, 640px); height: auto; max-width: 100%;
}
[data-design="b"] .vou-hero__room-draw .rd-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: vou-draw-in 1.8s var(--ease-course) 0.3s forwards;
}
[data-design="b"] .vou-hero__room-draw .rd-line:nth-child(2) { animation-delay: 0.5s; }
[data-design="b"] .vou-hero__room-draw .rd-line:nth-child(3) { animation-delay: 0.65s; }
[data-design="b"] .vou-hero__room-draw .rd-line:nth-child(4) { animation-delay: 0.8s; }
[data-design="b"] .vou-hero__room-draw .rd-tile {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: vou-draw-in 1.2s var(--ease-course) 1.1s forwards;
}
[data-design="b"] .vou-room__new {
  animation: vou-room-reveal 1.5s var(--ease-lock) 2.2s forwards;
}
@keyframes vou-draw-in {
  to { stroke-dashoffset: 0; }
}
@keyframes vou-room-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Arch ring (Voussoir identity — rises inside hero) */
[data-design="b"] .vou-arch__ring .v {
  opacity: 0; transform: translateY(10px);
  animation: vou-rise var(--dur-rise) var(--ease-seat) forwards;
}
[data-design="b"] .vou-arch__ring .v:nth-child(1){ animation-delay: .15s; }
[data-design="b"] .vou-arch__ring .v:nth-child(2){ animation-delay: .30s; }
[data-design="b"] .vou-arch__ring .v:nth-child(3){ animation-delay: .45s; }
[data-design="b"] .vou-arch__ring .v:nth-child(4){ animation-delay: .60s; }
[data-design="b"] .vou-arch__ring .vou-arch__key { animation-delay: .95s !important; }
[data-design="b"] .vou-arch__ring .v:nth-child(6){ animation-delay: .60s; }
[data-design="b"] .vou-arch__ring .v:nth-child(7){ animation-delay: .45s; }
[data-design="b"] .vou-arch__ring .v:nth-child(8){ animation-delay: .30s; }
[data-design="b"] .vou-arch__ring .v:nth-child(9){ animation-delay: .15s; }
[data-design="b"] .vou-arch__key {
  animation: vou-rise var(--dur-rise) var(--ease-lock) .95s forwards,
             vou-lock 1.2s var(--ease-lock) 1.4s forwards !important;
}
@keyframes vou-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes vou-lock {
  0%   { filter: brightness(1.5) saturate(1.2); }
  100% { filter: none; }
}

/* Hero lockup — z-index ABOVE all backdrop layers (HERO TEXT Z-INDEX HARD rule) */
[data-design="b"] .vou-hero__lockup {
  position: relative; z-index: 2; max-width: 60ch;
}
[data-design="b"] .vou-kicker {
  font-family: var(--font-mono); font-size: var(--t-meta); text-transform: uppercase;
  letter-spacing: var(--track-kicker); color: var(--sinopia); margin: 0 0 var(--lift);
}
[data-design="b"] .vou-hero__h {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1);
  line-height: var(--lh-tight); letter-spacing: var(--track-display); color: var(--ink);
  margin: 0; text-wrap: balance;
}
[data-design="b"] .vou-hero__sub {
  font-size: var(--t-lead); color: var(--muted); margin: var(--lift) 0 0; max-width: 46ch;
}
[data-design="b"] .vou-hero__proof { margin: var(--coursing) 0 var(--bay); }
[data-design="b"] .vou-stamp {
  font-family: var(--font-mono); font-size: var(--t-cap); color: var(--ink);
  background: color-mix(in oklab, var(--bronze) 14%, transparent);
  border: 1px solid var(--joint); border-radius: var(--r-cobble);
  padding: 4px 12px; display: inline-block;
}

/* ================================================================
   E2 · CTA (Stone button — funnel-anchor)
   ================================================================ */
[data-design="b"] .vou-stone {
  display: inline-flex; align-items: center; gap: var(--course);
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-body);
  padding: 14px 22px; border-radius: var(--r-struck); text-decoration: none;
  cursor: pointer; box-sizing: border-box; min-height: 48px;
  transition: transform var(--dur-seat) var(--ease-seat),
              box-shadow var(--dur-seat) var(--ease-seat),
              background-color var(--dur-course) var(--ease-course);
  border: none;
}
[data-design="b"] .vou-stone--primary {
  background: var(--ink); color: var(--surface);
  box-shadow: var(--elev-bed), inset 0 -2px 0 0 var(--sinopia);
}
[data-design="b"] .vou-stone--quiet {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--joint);
}
[data-design="b"] .vou-cta { position: relative; overflow: clip; isolation: isolate; }
[data-design="b"] .vou-cta::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--bronze); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-course) var(--ease-course);
}
[data-design="b"] .vou-cta__wedge {
  display: inline-grid; place-items: center; color: var(--sinopia);
  transition: transform var(--dur-course) var(--ease-seat);
}
/* CTA ambient breath — opacity-only (GPU-composited, not layout) */
[data-design="b"] .vou-cta {
  animation: vou-cta-breath var(--cyc-breath) var(--ease-course) infinite;
}
@keyframes vou-cta-breath {
  0%,100% { box-shadow: var(--elev-bed), inset 0 -2px 0 0 var(--sinopia); }
  50%     { box-shadow: var(--elev-bed), inset 0 -2px 0 0 var(--sinopia), inset 0 1px 0 0 color-mix(in oklab, var(--bronze) 60%, transparent); }
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .vou-cta::before { transform: scaleX(0); }
  [data-design="b"] .vou-cta:hover::before { transform: scaleX(1); }
  [data-design="b"] .vou-cta:hover { background: color-mix(in oklab, var(--ink) 90%, var(--sinopia)); }
  [data-design="b"] .vou-cta:hover .vou-cta__wedge { transform: translateX(4px); }
  [data-design="b"] .vou-stone--quiet:hover { box-shadow: inset 0 0 0 1px var(--sinopia); color: var(--sinopia); }
}
[data-design="b"] .vou-cta:active { transform: translateY(1px); box-shadow: var(--elev-seated); }
[data-design="b"] .vou-cta:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--sinopia); }

/* ================================================================
   E6 · POINTER (course-lay wayfinding — NOT a button)
   ================================================================ */
[data-design="b"] .vou-pointer {
  display: grid; justify-items: center; gap: var(--course);
  padding: var(--bay) 0; background: var(--ground);
}
[data-design="b"] .vou-pointer__course { display: flex; gap: 6px; }
[data-design="b"] .vou-pointer__stone {
  width: 26px; height: 9px; background: var(--concrete); border: 1px solid var(--joint);
  /* resting opacity:1, entrance is transform only (from translateY offset) */
  opacity: 1;
  animation: vou-pt-seat var(--dur-course) var(--ease-seat) infinite alternate;
}
[data-design="b"] .vou-pointer__stone:nth-child(1) { animation-delay: 0s; }
[data-design="b"] .vou-pointer__stone:nth-child(2) { animation-delay: .5s; }
[data-design="b"] .vou-pointer__stone:nth-child(3) { animation-delay: 1s; }
/* Pointer stone: animate transform only (not opacity to 0 — gate rule) */
@keyframes vou-pt-seat {
  from { transform: translateY(-5px); }
  to   { transform: translateY(0); }
}
[data-design="b"] .vou-pointer__plumb {
  width: 2px; height: 34px; background: linear-gradient(var(--sinopia), transparent);
  animation: vou-pt-drop var(--cyc-breath) var(--ease-course) infinite;
}
@keyframes vou-pt-drop {
  0%,100% { transform: translateY(0); opacity: 0.8; }
  50%     { transform: translateY(5px); opacity: 1; }
}
[data-design="b"] .vou-pointer__label {
  font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
}

/* ================================================================
   E5 · FUNNEL (5-step qualifying intake)
   ================================================================ */
[data-design="b"] .vou-funnel {
  padding: var(--bastion) clamp(16px, 5vw, 64px);
  background: var(--ground); box-sizing: border-box;
}
[data-design="b"] .vou-funnel__head { max-width: 760px; margin: 0 auto var(--bay); }
[data-design="b"] .vou-funnel__head h2 {
  font-family: var(--font-display); font-size: var(--t-h2); color: var(--ink);
  letter-spacing: var(--track-display); margin: var(--course) 0 0;
}
[data-design="b"] .vou-funnel__arch {
  display: block; width: 220px; max-width: 80%; height: auto; margin: 0 auto var(--bay);
}
[data-design="b"] .vou-funnel__arch [data-vou] {
  transition: fill var(--dur-course) var(--ease-seat),
              transform var(--dur-seat) var(--ease-seat);
}
[data-design="b"] .vou-funnel__arch [data-vou].is-set { fill: var(--concrete); }
[data-design="b"] .vou-funnel__arch [data-vou="key"].is-locked { fill: var(--bronze); }
[data-design="b"] .vou-funnel__form { max-width: 760px; margin: 0 auto; }
[data-design="b"] .vou-step { border: 0; padding: 0; margin: 0; }
[data-design="b"] .vou-step[hidden] { display: none; }
[data-design="b"] .vou-step legend {
  font-family: var(--font-display); font-size: var(--t-h3); color: var(--ink);
  margin-bottom: var(--coursing); padding: 0;
}
[data-design="b"] .vou-step.is-active {
  animation: vou-step-seat var(--dur-strike) var(--ease-seat);
}
/* Step entrance: transform only, opacity from 1 (never from 0) */
@keyframes vou-step-seat {
  from { opacity: 1; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
[data-design="b"] .vou-chips {
  display: grid; gap: var(--course);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
[data-design="b"] .vou-chip {
  text-align: left; font-family: var(--font-body); font-size: var(--t-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--joint); border-radius: var(--r-struck);
  padding: 16px 18px; min-height: 52px; cursor: pointer;
  transition: transform var(--dur-seat) var(--ease-seat),
              box-shadow var(--dur-seat) var(--ease-seat),
              border-color var(--dur-course) var(--ease-course);
  box-shadow: var(--elev-bed);
}
[data-design="b"] .vou-chip:active,
[data-design="b"] .vou-chip[aria-pressed="true"] {
  transform: translateY(1px); box-shadow: var(--elev-seated); border-color: var(--sinopia);
}
[data-design="b"] .vou-chip:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--sinopia);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .vou-chip:hover { border-color: var(--concrete); }
}

/* Form bed inputs */
[data-design="b"] .vou-bed { display: grid; gap: var(--mortar); margin-bottom: var(--coursing); }
[data-design="b"] .vou-bed span { font-size: var(--t-cap); color: var(--muted); }
[data-design="b"] .vou-bed input,
[data-design="b"] .vou-bed textarea {
  font: inherit; color: var(--ink); background: var(--surface-sunk);
  border: 1px solid var(--joint); border-radius: var(--r-tooled);
  padding: 12px 14px; min-height: 48px; box-sizing: border-box; width: 100%;
}
[data-design="b"] .vou-bed input:focus-visible,
[data-design="b"] .vou-bed textarea:focus-visible {
  outline: none; border-color: var(--sinopia);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sinopia) 30%, transparent);
}
[data-design="b"] .vou-note {
  font-size: var(--t-cap); color: var(--muted); margin-top: var(--coursing);
  border-left: 2px solid var(--sinopia); padding-left: var(--lift);
}
[data-design="b"] .vou-funnel__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--coursing); margin-top: var(--bay); flex-wrap: wrap;
}
[data-design="b"] .vou-funnel__count {
  font-family: var(--font-mono); font-size: var(--t-meta); color: var(--faint);
}
[data-design="b"] .vou-set { text-align: center; padding: var(--bay) 0; }
[data-design="b"] .vou-set[hidden] { display: none; }
[data-design="b"] .vou-set__mark { font-size: 40px; color: var(--success); margin: 0; }
[data-design="b"] .vou-set h3 { font-family: var(--font-display); font-size: var(--t-h3); color: var(--ink); }
[data-design="b"] .vou-set a { color: var(--sinopia); }

/* Trust line below funnel */
[data-design="b"] .vou-funnel__trust {
  max-width: 760px; margin: var(--bay) auto 0; padding-top: var(--bay);
  border-top: 1px solid var(--joint);
}
[data-design="b"] .vou-trust-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--coursing);
  font-size: var(--t-cap);
}
[data-design="b"] .vou-trust-text { color: var(--muted); }

/* ================================================================
   BEFORE / AFTER SECTION
   ================================================================ */
[data-design="b"] .vou-ba {
  padding: var(--bastion) clamp(16px, 5vw, 64px);
  background: var(--surface); border-top: 1px solid var(--joint);
  box-sizing: border-box;
}
[data-design="b"] .vou-ba__head {
  max-width: 760px; margin: 0 auto var(--bay);
}
[data-design="b"] .vou-ba__head h2 {
  font-family: var(--font-display); font-size: var(--t-h2); color: var(--ink);
  letter-spacing: var(--track-display); margin: var(--course) 0 0; text-wrap: balance;
}
[data-design="b"] .vou-ba__intro {
  color: var(--muted); margin-top: var(--lift); max-width: 64ch;
}
[data-design="b"] .vou-ba__grid {
  max-width: 1200px; margin: 0 auto; display: grid;
  gap: var(--bay); grid-template-columns: 1fr;
}
[data-design="b"] .vou-ba__pair {
  display: grid; gap: var(--coursing);
  grid-template-columns: 1fr 1fr;
}
[data-design="b"] .vou-ba__side { display: flex; flex-direction: column; gap: var(--course); }
[data-design="b"] .vou-ba__label {
  font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
[data-design="b"] .vou-ba__side--after .vou-ba__label { color: var(--sinopia); }
[data-design="b"] .vou-ba__graphic {
  border: 1px solid var(--joint); border-radius: var(--r-struck);
  overflow: clip; box-shadow: var(--elev-bed);
}
[data-design="b"] .vou-ba__graphic svg { display: block; width: 100%; height: auto; }
[data-design="b"] .vou-ba__caption { font-size: var(--t-cap); color: var(--muted); }
/* Scroll-triggered reveal for before/after pairs (TRIAD-2 scroll motion) */
[data-design="b"] .vou-ba__pair {
  opacity: 1;
  transform: translateY(0);
}
[data-design="b"] .vou-ba__pair.ba-hidden {
  opacity: 1; transform: translateY(32px);
}
[data-design="b"] .vou-ba__pair.ba-revealed {
  transform: translateY(0);
  transition: transform 0.7s var(--ease-lock);
}
/* Before side: scroll-linked horizontal slide from left */
[data-design="b"] .vou-ba__pair.ba-hidden .vou-ba__side--before {
  transform: translateX(-24px); opacity: 0.3;
}
[data-design="b"] .vou-ba__pair.ba-revealed .vou-ba__side--before {
  transform: translateX(0); opacity: 1;
  transition: transform 0.8s var(--ease-lock), opacity 0.8s var(--ease-course);
}
[data-design="b"] .vou-ba__pair.ba-hidden .vou-ba__side--after {
  transform: translateX(24px); opacity: 0.3;
}
[data-design="b"] .vou-ba__pair.ba-revealed .vou-ba__side--after {
  transform: translateX(0); opacity: 1;
  transition: transform 0.8s 0.15s var(--ease-lock), opacity 0.8s 0.15s var(--ease-course);
}
[data-design="b"] .vou-ba__cta-repeat {
  margin-top: var(--bay); text-align: center;
}

/* ================================================================
   E4 · PROCESS TRACK (coursed horizontal lay + cure ambient)
   ================================================================ */
[data-design="b"] .vou-track {
  position: relative; overflow: clip; isolation: isolate;
  padding: var(--bastion) clamp(16px, 5vw, 64px);
  background: var(--surface); border-block: 1px solid var(--joint);
  box-sizing: border-box;
}
[data-design="b"] .vou-track__cure {
  position: absolute; inset: 0; z-index: 0; opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg, var(--joint) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--joint) 0 1px, transparent 1px 64px);
  animation: vou-cure-tone var(--cyc-cure) ease-in-out infinite;
}
@keyframes vou-cure-tone {
  0%,100% { opacity: 0.30; filter: saturate(0.9); }
  50%     { opacity: 0.55; filter: saturate(1.1) brightness(0.96); }
}
[data-design="b"] .vou-track__head {
  position: relative; z-index: 1; max-width: 1200px; margin: 0 auto var(--bay);
}
[data-design="b"] .vou-track__lead {
  color: var(--muted); margin-top: var(--lift); max-width: 64ch;
}
[data-design="b"] .vou-track__h {
  font-family: var(--font-display); font-size: var(--t-h2); color: var(--ink);
  letter-spacing: var(--track-display); margin: var(--course) 0 0; text-wrap: balance;
}
[data-design="b"] .vou-track__courses {
  position: relative; z-index: 1; list-style: none; margin: 0 auto; padding: 0;
  max-width: 1200px; display: grid; gap: var(--course);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
[data-design="b"] .vou-course-stone {
  background: var(--ground); box-shadow: var(--elev-bed); padding: var(--coursing);
  border-radius: var(--r-struck);
  opacity: 1; transform: translateX(-14px);
  transition: opacity var(--dur-course) var(--ease-seat),
              transform var(--dur-course) var(--ease-seat);
}
[data-design="b"] .vou-track.is-laid .vou-course-stone {
  opacity: 1; transform: none;
}
[data-design="b"] .vou-track.is-laid .vou-course-stone:nth-child(2) { transition-delay: .10s; }
[data-design="b"] .vou-track.is-laid .vou-course-stone:nth-child(3) { transition-delay: .20s; }
[data-design="b"] .vou-track.is-laid .vou-course-stone:nth-child(4) { transition-delay: .30s; }
[data-design="b"] .vou-track.is-laid .vou-course-stone:nth-child(5) { transition-delay: .40s; }
[data-design="b"] .vou-track.is-laid .vou-course-stone:nth-child(6) { transition-delay: .50s; }
[data-design="b"] .vou-course-stone i {
  font-family: var(--font-mono); font-style: normal; font-size: var(--t-meta);
  color: var(--sinopia); letter-spacing: 0.12em;
}
[data-design="b"] .vou-course-stone b {
  display: block; font-family: var(--font-display); font-size: var(--t-h3);
  color: var(--ink); margin: var(--mortar) 0 var(--course); font-weight: 600;
}
[data-design="b"] .vou-course-stone span { color: var(--muted); font-size: var(--t-cap); }

/* ================================================================
   SERVICES — opus index
   ================================================================ */
[data-design="b"] .vou-services {
  padding: var(--bastion) clamp(16px, 5vw, 64px);
  background: var(--ground); box-sizing: border-box;
}
[data-design="b"] .vou-services__head {
  max-width: 1200px; margin: 0 auto var(--bay);
}
[data-design="b"] .vou-services__head h2 {
  font-family: var(--font-display); font-size: var(--t-h2); color: var(--ink);
  letter-spacing: var(--track-display); margin: var(--course) 0 0;
}
[data-design="b"] .vou-opus-index {
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: var(--bay);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
[data-design="b"] .vou-opus-group__label {
  font-family: var(--font-mono); font-size: var(--t-meta); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--sinopia); margin: 0 0 var(--lift);
  padding-bottom: var(--course); border-bottom: 1px solid var(--joint);
}
[data-design="b"] .vou-opus-list {
  list-style: none; padding: 0; margin: 0; display: grid; gap: var(--coursing);
}
[data-design="b"] .vou-opus-list li {
  display: grid; grid-template-columns: auto 1fr;
  grid-template-rows: auto auto; gap: 0 var(--lift);
  padding-bottom: var(--coursing); border-bottom: 1px solid var(--joint);
}
[data-design="b"] .vou-opus-list li i {
  font-family: var(--font-mono); font-style: normal; font-size: var(--t-meta);
  color: var(--sinopia); grid-row: 1 / 3; align-self: start; padding-top: 3px;
}
[data-design="b"] .vou-opus-list li b {
  font-family: var(--font-display); font-size: var(--t-body); color: var(--ink);
  font-weight: 600;
}
[data-design="b"] .vou-opus-list li span {
  font-size: var(--t-cap); color: var(--muted); grid-column: 2;
}

/* ================================================================
   ABOUT
   ================================================================ */
[data-design="b"] .vou-about {
  padding: var(--bastion) clamp(16px, 5vw, 64px);
  background: var(--surface); border-top: 1px solid var(--joint);
  box-sizing: border-box;
}
[data-design="b"] .vou-about__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: var(--bay);
  grid-template-columns: 1fr 2fr;
}
[data-design="b"] .vou-about__head h2 {
  font-family: var(--font-display); font-size: var(--t-h2); color: var(--ink);
  letter-spacing: var(--track-display); margin: var(--course) 0 0; text-wrap: balance;
}
[data-design="b"] .vou-about__body p { color: var(--muted); margin: 0 0 var(--coursing); max-width: 64ch; }
[data-design="b"] .vou-about__creds { display: flex; flex-wrap: wrap; gap: var(--course); margin-bottom: var(--bay); }
[data-design="b"] .vou-about__contact { display: flex; flex-wrap: wrap; gap: var(--coursing); }

/* ================================================================
   FOOTER
   ================================================================ */
[data-design="b"] .vou-footer {
  background: var(--surface-sunk); border-top: 2px solid var(--sinopia);
  padding: var(--bastion) clamp(16px, 5vw, 64px);
  box-sizing: border-box;
}
[data-design="b"] .vou-footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: var(--bay);
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
}
[data-design="b"] .vou-footer__firm { grid-column: 1; }
[data-design="b"] .vou-footer__firm .vou-logo__mark { font-size: clamp(18px, 2.5vw, 26px); }
[data-design="b"] .vou-footer__area { color: var(--muted); font-size: var(--t-cap); margin-top: var(--mortar); }
[data-design="b"] .vou-footer__acts {
  grid-column: 2; display: flex; flex-direction: column; gap: var(--course); align-items: flex-end;
}
[data-design="b"] .vou-footer__meta {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--coursing);
  align-items: center; padding-top: var(--bay); border-top: 1px solid var(--joint);
  font-size: var(--t-cap); color: var(--faint);
}

/* ================================================================
   SCROLL PARALLAX — TRIAD-2 (hero wash scroll-link via JS var)
   ================================================================ */
[data-design="b"] .vou-hero__wash {
  will-change: transform;
}

/* ================================================================
   REDUCED MOTION FALLBACKS
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .vou-header__course { transform: scaleX(1); animation: none; }
  [data-design="b"] .vou-header__hatch  { animation: none; }
  [data-design="b"] .vou-drawer__sheet,
  [data-design="b"] .vou-drawer__scrim  { transition: none; }
  [data-design="b"] .vou-hero__wash     { animation: none; }
  [data-design="b"] .vou-hero__room-draw .rd-line { stroke-dashoffset: 0; animation: none; }
  [data-design="b"] .vou-hero__room-draw .rd-tile { stroke-dashoffset: 0; animation: none; }
  [data-design="b"] .vou-room__new { opacity: 1; transform: none; animation: none; }
  [data-design="b"] .vou-arch__ring .v { opacity: 1; transform: none; animation: none; }
  [data-design="b"] .vou-cta          { animation: none; }
  [data-design="b"] .vou-cta::before,
  [data-design="b"] .vou-cta__wedge   { transition: none; }
  [data-design="b"] .vou-pointer__stone { transform: none; animation: none; }
  [data-design="b"] .vou-pointer__plumb { animation: none; }
  [data-design="b"] .vou-track__cure   { animation: none; }
  [data-design="b"] .vou-course-stone  { opacity: 1; transform: none; transition: none; }
  [data-design="b"] .vou-step.is-active { animation: none; }
  [data-design="b"] .vou-chip,
  [data-design="b"] .vou-funnel__arch [data-vou] { transition: none; }
  [data-design="b"] .vou-ba__pair.ba-hidden .vou-ba__side--before,
  [data-design="b"] .vou-ba__pair.ba-hidden .vou-ba__side--after { transform: none; opacity: 1; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  [data-design="b"] .vou-hero__room-draw { width: 88vw; opacity: 0.45; }
  [data-design="b"] .vou-hero { min-height: 60vh; padding-top: var(--bastion); }
  [data-design="b"] .vou-about__inner { grid-template-columns: 1fr; }
  [data-design="b"] .vou-footer__inner { grid-template-columns: 1fr; }
  [data-design="b"] .vou-footer__acts { align-items: flex-start; }
  [data-design="b"] .vou-ba__pair { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  [data-design="b"] .vou-header__bar { padding: var(--course) var(--lift); }
  [data-design="b"] .vou-hero__sub   { font-size: var(--t-body); }
  [data-design="b"] .vou-funnel,
  [data-design="b"] .vou-track,
  [data-design="b"] .vou-ba,
  [data-design="b"] .vou-services,
  [data-design="b"] .vou-about,
  [data-design="b"] .vou-footer      { padding-block: var(--story); }
  [data-design="b"] .vou-opus-index  { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  [data-design="b"] .vou-hero__h     { font-size: clamp(32px, 9vw, 52px); }
}

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