/* ═══════════════════════════════════════════════════════════════════
   JML Landscape Maintenance — Design B (Voussoir × Maintenance register)
   Slot-scoped: ALL selectors under [data-design="b"].dq-design
   Keyframes prefixed vou- (shared across both slots is fine; no collision)
   Motion: ONLY transform / opacity / clip-path — zero layout props
   Hover/focus transforms: inside @media (hover:hover) and (pointer:fine)
   Hero text resting opacity: 1 (no opacity:0 anywhere under hero/cta)
═══════════════════════════════════════════════════════════════════ */

/* ── Token root ─────────────────────────────────────────────────── */
[data-design="b"] {
  /* Ground & surface (travertine / basalt dark mode for hero) */
  --b-ground:        #EAE3D4;
  --b-ground-dk:     #18130E;
  --b-surface:       #F6F1E6;
  --b-surface-sunk:  #E1D8C6;

  /* Ink ramp */
  --b-ink:           #211C16;
  --b-muted:         #6E6555;
  --b-faint:         #938974;

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

  /* Accents: sinopia (survey-red) + bronze (keystone) */
  --b-sinopia:       #9C3A2C;
  --b-sinopia-ink:   #FBEFE6;
  --b-bronze:        #9A7B45;

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

  /* Season-wash overlay tones (maintenance-green calm) */
  --b-season-a:      #4A5C3A;   /* deep muted green */
  --b-season-b:      #7A8C5E;   /* mid-season sage */
  --b-season-c:      #C8A84B;   /* amber-autumn accent */

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

  /* Scale */
  --b-t-meta:  12px;
  --b-t-cap:   14px;
  --b-t-body:  17px;
  --b-t-lead:  21px;
  --b-t-h3:    26px;
  --b-t-h2:    clamp(28px, 4vw, 44px);
  --b-t-h1:    clamp(36px, 7vw, 78px);

  /* Line heights */
  --b-lh-body:  1.6;
  --b-lh-tight: 1.08;
  --b-track-display: -0.012em;
  --b-track-kicker:  0.18em;

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

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

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

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

  /* Required design-b primary alias */
  --design-b-primary: var(--b-sinopia);

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

/* Mobile clip + no h-scroll */
[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; }

/* ── Shared layout container ────────────────────────────────────── */
[data-design="b"] .vou-section-head,
[data-design="b"] .vou-opus-index,
[data-design="b"] .vou-track__head,
[data-design="b"] .vou-track__courses,
[data-design="b"] .vou-funnel__head,
[data-design="b"] .vou-funnel__form,
[data-design="b"] .vou-about__body,
[data-design="b"] .vou-about__trust,
[data-design="b"] .vou-area__copy,
[data-design="b"] .vou-footer__inner,
[data-design="b"] .vou-section-cta {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 64px);
  box-sizing: border-box;
  width: 100%;
}

/* ── KICKER ─────────────────────────────────────────────────────── */
[data-design="b"] .vou-kicker {
  font-family: var(--b-font-mono);
  font-size: var(--b-t-meta);
  text-transform: uppercase;
  letter-spacing: var(--b-track-kicker);
  color: var(--b-sinopia);
  margin: 0 0 var(--b-lift);
}

/* ══════════════════════════════════════════════════════════════════
   ELEMENT 1 — Animated minimalist header
══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--b-ground) 88%, transparent);
  backdrop-filter: blur(8px) saturate(1.05);
  border-bottom: 1px solid var(--b-joint);
  overflow: clip;
}
[data-design="b"] .vou-header__bar {
  max-width: 1200px; margin-inline: auto;
  padding: var(--b-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(--b-font-display); font-weight: 600;
  font-size: clamp(16px, 2vw, 22px); letter-spacing: var(--b-track-display);
  color: var(--b-ink); text-decoration: none;
}
[data-design="b"] a.vou-logo { text-decoration: none; }

/* Course-line: sinopia hairline lays in on first paint, then drifts */
[data-design="b"] .vou-header__course {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg,
    transparent 0%, var(--b-sinopia) 12%, var(--b-sinopia) 88%, transparent 100%);
  transform-origin: left center;
  transform: scaleX(0);
  animation: vou-course-lay var(--b-dur-strike) var(--b-ease-course) 120ms forwards,
             vou-course-drift 22s ease-in-out 1.2s infinite;
}
[data-design="b"] .vou-header__hatch {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.04;
  background-image: repeating-linear-gradient(58deg, var(--b-ink) 0 1px, transparent 1px 7px);
  animation: vou-hatch-drift 34s linear infinite;
}

@keyframes vou-course-lay  { to { transform: scaleX(1); } }
@keyframes vou-course-drift { 0%,100% { opacity: 0.9; } 50% { opacity: 0.45; } }
@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(--b-joint); border-radius: var(--b-r-tooled);
  cursor: pointer; box-sizing: border-box;
}
[data-design="b"] .vou-burger span {
  height: 2px; background: var(--b-ink);
  transition: transform var(--b-dur-course) var(--b-ease-seat),
              opacity var(--b-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(--b-ink) 38%, transparent);
  opacity: 0;
  transition: opacity var(--b-dur-strike) var(--b-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(--b-surface); box-shadow: var(--b-elev-lift);
  border-bottom: 2px solid var(--b-sinopia);
  padding: clamp(24px,6vw,64px) clamp(16px,4vw,40px) var(--b-bay);
  transform: translateY(-101%);
  transition: transform var(--b-dur-strike) var(--b-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(--b-ink); cursor: pointer;
}
[data-design="b"] .vou-drawer__nav { display: grid; gap: var(--b-coursing); margin-block: var(--b-bay); }
[data-design="b"] .vou-drawer__nav a {
  font-family: var(--b-font-display); font-size: clamp(26px, 6vw, 42px); color: var(--b-ink);
  text-decoration: none; display: flex; align-items: baseline; gap: var(--b-lift);
  border-bottom: 1px solid var(--b-joint); padding-bottom: var(--b-course);
}
[data-design="b"] .vou-drawer__nav a i {
  font-family: var(--b-font-mono); font-style: normal; font-size: var(--b-t-meta);
  color: var(--b-sinopia); letter-spacing: 0.1em;
}
[data-design="b"] .vou-drawer__acts { display: flex; gap: var(--b-coursing); flex-wrap: wrap; }

/* Drawer hidden baseline override — display:none when closed prevents layout-shift */
[data-design="b"] .vou-drawer:not([data-open="true"]) .vou-drawer__sheet {
  /* transform handles the visual hide; pointer-events blocked via visibility:hidden on parent */
}

/* ══════════════════════════════════════════════════════════════════
   HERO — Element 3 unique animated backdrop + hero lockup
   Dark hero ground (basalt) for visual distinction from slot-a
   Seasonal-wash + drawn paver-row motif (maintenance-thin fallback)
══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-hero {
  position: relative; overflow: clip; isolation: isolate;
  min-height: clamp(520px, 78vh, 820px);
  display: grid; align-items: center;
  padding: var(--b-rampart) clamp(16px,5vw,64px) var(--b-bastion);
  box-sizing: border-box;
  /* Dark basalt ground — distinguishes Site B from any light Site A */
  background: var(--b-ground-dk);
}
[data-design="b"] .vou-hero__bg {
  position: absolute; inset: 0; z-index: 0;
}

/* ── Seasonal wash: low-chroma green→amber field, ≥0.3 opacity, ≥15% lightness amplitude ── */
[data-design="b"] .vou-hero__wash {
  position: absolute; inset: 0; opacity: 0.45;
  background:
    radial-gradient(130% 100% at 70% 100%,
      color-mix(in oklab, var(--b-season-a) 60%, transparent) 0%,
      color-mix(in oklab, var(--b-season-b) 30%, transparent) 40%,
      transparent 70%),
    radial-gradient(80% 60% at 20% 20%,
      color-mix(in oklab, var(--b-season-c) 18%, transparent) 0%,
      transparent 60%),
    linear-gradient(165deg, var(--b-ground-dk) 0%, color-mix(in oklab, var(--b-season-a) 25%, var(--b-ground-dk)) 100%);
  animation: vou-b-wash-cycle var(--b-cyc-wash) ease-in-out infinite;
}
/* Perceptible ongoing ambient motion — ≥15% lightness delta across the cycle */
@keyframes vou-b-wash-cycle {
  0%   { filter: brightness(1.0) saturate(1.0); opacity: 0.45; }
  33%  { filter: brightness(1.22) saturate(1.15); opacity: 0.55; }
  66%  { filter: brightness(0.80) saturate(0.90); opacity: 0.38; }
  100% { filter: brightness(1.0) saturate(1.0); opacity: 0.45; }
}

/* ── Drawn paver-row motif: horizontal courses drawing in via scaleX ── */
/* Fulfills visual-presence floor: drawn-in lines completing within 2s, ≥80px traversal */
[data-design="b"] .vou-hero__pavers {
  position: absolute;
  bottom: clamp(48px, 10%, 96px);
  left: 0; right: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding-inline: clamp(16px, 5vw, 64px);
  pointer-events: none;
}
[data-design="b"] .vou-paver-row {
  display: block;
  height: 7px;
  background: color-mix(in oklab, var(--b-concrete) 40%, var(--b-ground-dk));
  border-top: 1px solid color-mix(in oklab, var(--b-joint) 30%, transparent);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 1;
}
[data-design="b"] .vou-paver-row--1 { animation: vou-row-lay var(--b-dur-strike) var(--b-ease-course) 0.2s forwards; width: clamp(180px, 55%, 480px); }
[data-design="b"] .vou-paver-row--2 { animation: vou-row-lay var(--b-dur-strike) var(--b-ease-course) 0.5s forwards; width: clamp(160px, 65%, 560px); }
[data-design="b"] .vou-paver-row--3 { animation: vou-row-lay var(--b-dur-strike) var(--b-ease-course) 0.8s forwards; width: clamp(200px, 48%, 420px); }
[data-design="b"] .vou-paver-row--4 { animation: vou-row-lay var(--b-dur-strike) var(--b-ease-course) 1.1s forwards; width: clamp(140px, 72%, 600px); }
[data-design="b"] .vou-paver-row--5 { animation: vou-row-lay var(--b-dur-strike) var(--b-ease-course) 1.4s forwards; width: clamp(220px, 42%, 380px); }
/* After initial draw-in, rows pulse gently — sustained ambient motion */
@keyframes vou-row-lay { to { transform: scaleX(1); } }

/* Ongoing ambient motion after draw-in — opacity shift on the entire paver group */
[data-design="b"] .vou-hero__pavers {
  animation: vou-b-paver-breath 8s ease-in-out 2s infinite;
}
@keyframes vou-b-paver-breath {
  0%,100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ── Arch silhouette (low-opacity voussoir signature) ── */
[data-design="b"] .vou-arch {
  position: absolute; right: clamp(-40px,-2vw,0px); bottom: 0;
  width: min(54vw, 600px); height: auto; max-width: 100%;
}
[data-design="b"] .vou-arch .v {
  opacity: 0; transform: translateY(10px);
  animation: vou-b-rise var(--b-dur-rise) var(--b-ease-seat) forwards;
}
[data-design="b"] .vou-arch .v:nth-child(1){animation-delay:.2s}
[data-design="b"] .vou-arch .v:nth-child(2){animation-delay:.35s}
[data-design="b"] .vou-arch .v:nth-child(3){animation-delay:.50s}
[data-design="b"] .vou-arch .v:nth-child(4){animation-delay:.65s}
[data-design="b"] .vou-arch__key{animation-delay:1.0s !important}
[data-design="b"] .vou-arch .v:nth-child(6){animation-delay:.65s}
[data-design="b"] .vou-arch .v:nth-child(7){animation-delay:.50s}
[data-design="b"] .vou-arch .v:nth-child(8){animation-delay:.35s}
[data-design="b"] .vou-arch .v:nth-child(9){animation-delay:.20s}
@keyframes vou-b-rise { to { opacity: 1; transform: translateY(0); } }
[data-design="b"] .vou-arch__centering {
  animation: vou-b-strike 1s var(--b-ease-course) 1.8s forwards;
}
@keyframes vou-b-strike { to { opacity: 0; } }

/* ── Hero lockup (text on dark ground — light text) ── */
[data-design="b"] .vou-hero__lockup {
  position: relative; z-index: 2; max-width: 60ch;
}
/* ALL hero text at opacity:1 at first paint — gate-critical */
[data-design="b"] .vou-hero .vou-kicker { color: var(--b-sinopia); opacity: 1; }
[data-design="b"] .vou-hero__h {
  font-family: var(--b-font-display); font-weight: 600; font-size: var(--b-t-h1);
  line-height: var(--b-lh-tight); letter-spacing: var(--b-track-display);
  color: var(--b-surface); /* light on dark hero */
  margin: 0; text-wrap: balance;
  opacity: 1; /* explicit gate-critical */
}
[data-design="b"] .vou-hero__sub {
  font-size: var(--b-t-lead); color: var(--b-rule);
  margin: var(--b-lift) 0 0; max-width: 48ch;
  opacity: 1; /* explicit gate-critical */
}
[data-design="b"] .vou-hero__proof {
  margin: var(--b-coursing) 0 var(--b-bay);
  opacity: 1; /* explicit gate-critical */
}
[data-design="b"] .vou-hero .vou-stamp {
  background: color-mix(in oklab, var(--b-bronze) 18%, transparent);
  border-color: color-mix(in oklab, var(--b-bronze) 40%, transparent);
  color: var(--b-rule);
}

/* ══════════════════════════════════════════════════════════════════
   ELEMENT 2 — CTA Stone (funnel-anchor, eye-draw)
══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-stone {
  display: inline-flex; align-items: center; gap: var(--b-course);
  font-family: var(--b-font-body); font-weight: 600; font-size: var(--b-t-body);
  padding: 14px 22px; border-radius: var(--b-r-struck); text-decoration: none;
  cursor: pointer; box-sizing: border-box; min-height: 48px;
  transition: transform var(--b-dur-seat) var(--b-ease-seat),
              box-shadow var(--b-dur-seat) var(--b-ease-seat),
              background-color var(--b-dur-course) var(--b-ease-course);
  border: none;
}
[data-design="b"] .vou-stone--primary {
  background: var(--b-sinopia); color: var(--b-sinopia-ink);
  box-shadow: var(--b-elev-bed), inset 0 -2px 0 0 color-mix(in oklab, var(--b-ground-dk) 40%, var(--b-sinopia));
}
[data-design="b"] .vou-stone--quiet {
  background: transparent; color: var(--b-ink);
  box-shadow: inset 0 0 0 1px var(--b-joint);
}
/* CTA eye-draw: course-line draws across top edge */
[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(--b-bronze); transform: scaleX(0); transform-origin: left;
  transition: transform var(--b-dur-course) var(--b-ease-course);
}
[data-design="b"] .vou-cta__wedge {
  display: inline-grid; place-items: center;
  color: currentColor; opacity: 0.75;
  transition: transform var(--b-dur-course) var(--b-ease-seat);
}
/* CTA ambient breath (5s cycle, 3–6s band, sustained ambient) */
[data-design="b"] .vou-cta {
  animation: vou-b-cta-breath var(--b-cyc-breath) var(--b-ease-course) infinite;
}
@keyframes vou-b-cta-breath {
  0%,100% { box-shadow: var(--b-elev-bed), inset 0 -2px 0 0 color-mix(in oklab, var(--b-ground-dk) 40%, var(--b-sinopia)); }
  50%     { box-shadow: var(--b-elev-bed), inset 0 -2px 0 0 color-mix(in oklab, var(--b-ground-dk) 40%, var(--b-sinopia)), inset 0 1px 0 0 color-mix(in oklab, var(--b-bronze) 50%, transparent); }
}
[data-design="b"] .vou-cta:active { transform: translateY(1px); box-shadow: var(--b-elev-seated); }
[data-design="b"] .vou-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--b-ground), 0 0 0 4px var(--b-sinopia);
}
/* Hover/focus transforms MUST be inside @media (hover:hover) and (pointer:fine) */
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .vou-cta:hover::before { transform: scaleX(1); }
  [data-design="b"] .vou-cta:hover { background-color: color-mix(in oklab, var(--b-sinopia) 90%, var(--b-ground-dk)); }
  [data-design="b"] .vou-cta:hover .vou-cta__wedge { transform: translateX(4px); }
  [data-design="b"] .vou-cta:focus-visible::before { transform: scaleX(1); }
  /* Chip hover */
  [data-design="b"] .vou-chip:hover { border-color: var(--b-concrete); }
  /* Drawer nav hover */
  [data-design="b"] .vou-drawer__nav a:hover { color: var(--b-sinopia); }
  /* Stone quiet hover */
  [data-design="b"] .vou-stone--quiet:hover {
    box-shadow: inset 0 0 0 1px var(--b-concrete), inset 0 2px 0 0 var(--b-sinopia);
  }
}

/* ══════════════════════════════════════════════════════════════════
   ELEMENT 6 — Pointer (paver-course lays in; surveyed-grown register)
   HARD: opacity:1 resting, height ≥ 8px, sits immediately before #funnel
══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-pointer {
  display: grid; justify-items: center; gap: var(--b-course);
  padding: var(--b-bay) 0;
  background: var(--b-ground);
  /* Gate-critical: opacity:1 resting, visible height */
  opacity: 1;
  min-height: 80px;
}
[data-design="b"] .vou-pointer__course { display: flex; gap: 6px; }
[data-design="b"] .vou-pointer__stone {
  width: 26px; height: 9px;
  background: var(--b-concrete); border: 1px solid var(--b-joint);
  /* starts at opacity:1 (resting) — entrance is transform-only */
  opacity: 1;
  transform: translateY(-6px);
  animation: vou-b-pt-seat var(--b-dur-course) var(--b-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: 0.5s; }
[data-design="b"] .vou-pointer__stone:nth-child(3){ animation-delay: 1.0s; }
/* animate from transform only — opacity stays at 1→1 (resting) */
@keyframes vou-b-pt-seat {
  from { transform: translateY(-4px); }
  to   { transform: translateY(0); }
}
[data-design="b"] .vou-pointer__plumb {
  width: 2px; height: 34px;
  background: linear-gradient(var(--b-sinopia), transparent);
  animation: vou-b-pt-drop var(--b-cyc-breath) var(--b-ease-course) infinite;
}
@keyframes vou-b-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(--b-font-mono); font-size: var(--b-t-meta);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--b-muted); text-decoration: none;
  opacity: 1; /* gate-critical */
}

/* ══════════════════════════════════════════════════════════════════
   ELEMENT 5 — Routing qualifying funnel
══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-funnel {
  padding: var(--b-bastion) clamp(16px,5vw,64px);
  background: var(--b-ground); box-sizing: border-box;
}
[data-design="b"] .vou-funnel__head {
  max-width: 760px; margin: 0 auto var(--b-bay);
  padding-inline: 0;
}
[data-design="b"] .vou-funnel__head h2 {
  font-family: var(--b-font-display); font-size: var(--b-t-h2);
  color: var(--b-ink); letter-spacing: var(--b-track-display);
  margin: var(--b-course) 0 0;
}
[data-design="b"] .vou-funnel__arch {
  display: block; width: 220px; max-width: 80%; height: auto;
  margin: 0 auto var(--b-bay);
}
[data-design="b"] .vou-funnel__arch [data-vou] {
  transition: fill var(--b-dur-course) var(--b-ease-seat),
              transform var(--b-dur-seat) var(--b-ease-seat);
}
[data-design="b"] .vou-funnel__arch [data-vou].is-set { fill: var(--b-concrete); }
[data-design="b"] .vou-funnel__arch [data-vou="key"].is-locked { fill: var(--b-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(--b-font-display); font-size: var(--b-t-h3);
  color: var(--b-ink); margin-bottom: var(--b-coursing); padding: 0;
}
[data-design="b"] .vou-step.is-active {
  animation: vou-b-step-seat var(--b-dur-strike) var(--b-ease-seat);
}
@keyframes vou-b-step-seat {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
[data-design="b"] .vou-chips {
  display: grid; gap: var(--b-course);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
[data-design="b"] .vou-chip {
  text-align: left; font-family: var(--b-font-body);
  font-size: var(--b-t-body); color: var(--b-ink);
  background: var(--b-surface); border: 1px solid var(--b-joint);
  border-radius: var(--b-r-struck); padding: 16px 18px;
  min-height: 56px; cursor: pointer;
  transition: transform var(--b-dur-seat) var(--b-ease-seat),
              box-shadow var(--b-dur-seat) var(--b-ease-seat),
              border-color var(--b-dur-course) var(--b-ease-course);
  box-shadow: var(--b-elev-bed);
  /* chip text opacity:1 resting — gate-critical */
  opacity: 1;
}
[data-design="b"] .vou-chip small {
  display: block; font-size: var(--b-t-cap); color: var(--b-muted);
  margin-top: 4px; font-weight: 400;
}
[data-design="b"] .vou-chip:active,
[data-design="b"] .vou-chip[aria-pressed="true"] {
  transform: translateY(1px); box-shadow: var(--b-elev-seated);
  border-color: var(--b-sinopia);
}
[data-design="b"] .vou-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--b-ground), 0 0 0 4px var(--b-sinopia);
}
[data-design="b"] .vou-bed { display: grid; gap: var(--b-mortar); margin-bottom: var(--b-coursing); }
[data-design="b"] .vou-bed span { font-size: var(--b-t-cap); color: var(--b-muted); }
[data-design="b"] .vou-bed input,
[data-design="b"] .vou-bed textarea {
  font: inherit; color: var(--b-ink); background: var(--b-surface-sunk);
  border: 1px solid var(--b-joint); border-radius: var(--b-r-tooled);
  padding: 12px 14px; min-height: 48px; width: 100%; box-sizing: border-box;
}
[data-design="b"] .vou-bed input:focus-visible,
[data-design="b"] .vou-bed textarea:focus-visible {
  outline: none; border-color: var(--b-sinopia);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--b-sinopia) 30%, transparent);
}
[data-design="b"] .vou-note {
  font-size: var(--b-t-cap); color: var(--b-muted); margin-top: var(--b-coursing);
  border-left: 2px solid var(--b-sinopia); padding-left: var(--b-lift);
}
[data-design="b"] .vou-funnel__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--b-coursing); margin-top: var(--b-bay);
}
[data-design="b"] .vou-funnel__count {
  font-family: var(--b-font-mono); font-size: var(--b-t-meta); color: var(--b-faint);
}
[data-design="b"] .vou-set { text-align: center; padding: var(--b-bay) 0; }
[data-design="b"] .vou-set[hidden] { display: none; }
[data-design="b"] .vou-set__mark { font-size: 40px; color: var(--b-success); margin: 0; }
[data-design="b"] .vou-set h3 {
  font-family: var(--b-font-display); font-size: var(--b-t-h3); color: var(--b-ink);
}

/* ══════════════════════════════════════════════════════════════════
   SERVICES — Opus index (numbered coursed list)
══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-services {
  padding: var(--b-bastion) 0;
  background: var(--b-surface);
  border-block: 1px solid var(--b-joint);
  box-sizing: border-box;
}
[data-design="b"] .vou-section-head {
  margin-bottom: var(--b-bay);
}
[data-design="b"] .vou-section-head h2 {
  font-family: var(--b-font-display); font-size: var(--b-t-h2);
  color: var(--b-ink); letter-spacing: var(--b-track-display);
  margin: var(--b-course) 0 0; text-wrap: balance;
}
[data-design="b"] .vou-opus-index {
  list-style: none; padding: 0; margin: 0 auto var(--b-bay);
  display: grid; gap: 0;
}
[data-design="b"] .vou-opus-item {
  display: flex; gap: var(--b-bay);
  padding: var(--b-coursing) 0;
  border-bottom: 1px solid var(--b-joint);
  align-items: flex-start;
}
[data-design="b"] .vou-opus-item:last-child { border-bottom: none; }
[data-design="b"] .vou-opus-item b {
  display: block; font-family: var(--b-font-display);
  font-size: var(--b-t-h3); color: var(--b-ink);
  font-weight: 600; margin-bottom: var(--b-course);
}
[data-design="b"] .vou-opus-item p {
  color: var(--b-muted); margin: 0; font-size: var(--b-t-body);
  line-height: var(--b-lh-body);
}
[data-design="b"] .vou-section-cta {
  padding-top: var(--b-bay);
}

/* ══════════════════════════════════════════════════════════════════
   STAMP
══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-stamp {
  font-family: var(--b-font-mono); font-size: var(--b-t-cap);
  color: var(--b-ink); background: color-mix(in oklab, var(--b-bronze) 12%, transparent);
  border: 1px solid var(--b-joint); border-radius: var(--b-r-cobble);
  padding: 4px 12px; display: inline-block;
}
[data-design="b"] .vou-stamp--mono {
  font-family: var(--b-font-mono); font-size: var(--b-t-meta);
  color: var(--b-sinopia); background: none; border: none;
  padding: 0; letter-spacing: 0.1em; white-space: nowrap;
  border-radius: 0;
  /* keep sinopia stamp at opacity:1 */
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════
   ELEMENT 4 — Ambient segment B: coursed process track + cure-tone
   Horizontal, patient — different axis and tempo from the hero rise
══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-track {
  position: relative; overflow: clip; isolation: isolate;
  padding: var(--b-bastion) clamp(16px,5vw,64px);
  background: var(--b-surface);
  border-block: 1px solid var(--b-joint);
  box-sizing: border-box;
}
[data-design="b"] .vou-track__cure {
  position: absolute; inset: 0; z-index: 0; opacity: 0.4;
  background-image:
    repeating-linear-gradient(0deg, var(--b-joint) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--b-joint) 0 1px, transparent 1px 64px);
  animation: vou-b-cure-tone var(--b-cyc-cure) ease-in-out infinite;
}
@keyframes vou-b-cure-tone {
  0%,100% { opacity: 0.28; filter: saturate(0.9); }
  50%     { opacity: 0.52; filter: saturate(1.1) brightness(0.96); }
}
[data-design="b"] .vou-track__head {
  position: relative; z-index: 1;
  margin-bottom: var(--b-bay);
}
[data-design="b"] .vou-track__h {
  font-family: var(--b-font-display); font-size: var(--b-t-h2);
  color: var(--b-ink); letter-spacing: var(--b-track-display);
  margin: var(--b-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;
  display: grid; gap: var(--b-course);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
[data-design="b"] .vou-course-stone {
  background: var(--b-ground); box-shadow: var(--b-elev-bed);
  padding: var(--b-coursing); border-radius: var(--b-r-struck);
  /* initial state for scroll-in animation */
  opacity: 0; transform: translateX(-14px);
  transition: opacity var(--b-dur-course) var(--b-ease-seat),
              transform var(--b-dur-course) var(--b-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: 0.10s; }
[data-design="b"] .vou-track.is-laid .vou-course-stone:nth-child(3){ transition-delay: 0.20s; }
[data-design="b"] .vou-track.is-laid .vou-course-stone:nth-child(4){ transition-delay: 0.30s; }
[data-design="b"] .vou-course-stone i {
  font-family: var(--b-font-mono); font-style: normal;
  font-size: var(--b-t-meta); color: var(--b-sinopia); letter-spacing: 0.12em;
}
[data-design="b"] .vou-course-stone b {
  display: block; font-family: var(--b-font-display); font-size: var(--b-t-h3);
  color: var(--b-ink); margin: var(--b-mortar) 0 var(--b-course); font-weight: 600;
}
[data-design="b"] .vou-course-stone span { color: var(--b-muted); font-size: var(--b-t-cap); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-about {
  padding: var(--b-bastion) 0;
  background: var(--b-ground);
  box-sizing: border-box;
}
[data-design="b"] .vou-about__body {
  margin-bottom: var(--b-bay);
}
[data-design="b"] .vou-about__body p {
  color: var(--b-muted); max-width: 72ch;
  margin: 0 0 var(--b-coursing);
  line-height: var(--b-lh-body);
}
[data-design="b"] .vou-about__trust {
  display: flex; flex-wrap: wrap; gap: var(--b-course);
}

/* ══════════════════════════════════════════════════════════════════
   SERVICE AREA
══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-area {
  padding: var(--b-bastion) 0;
  background: var(--b-surface);
  border-block: 1px solid var(--b-joint);
  box-sizing: border-box;
}
[data-design="b"] .vou-area__copy {
  color: var(--b-muted); max-width: 72ch;
  line-height: var(--b-lh-body);
  padding-inline: clamp(16px, 5vw, 64px);
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════ */
[data-design="b"] .vou-footer {
  background: var(--b-ground-dk);
  padding: var(--b-bastion) 0;
  box-sizing: border-box;
}
[data-design="b"] .vou-footer__inner {
  display: grid; gap: var(--b-bay);
}
[data-design="b"] .vou-footer__brand .vou-logo__mark { color: var(--b-surface); font-size: clamp(18px, 2.2vw, 24px); }
[data-design="b"] .vou-footer__sub { color: var(--b-muted); font-size: var(--b-t-cap); margin: var(--b-mortar) 0 0; }
[data-design="b"] .vou-footer__contact {
  display: flex; flex-direction: column; gap: var(--b-coursing); align-items: flex-start;
}
[data-design="b"] .vou-footer__phone,
[data-design="b"] .vou-footer__email {
  font-family: var(--b-font-mono); font-size: var(--b-t-body);
  color: var(--b-rule); text-decoration: none;
}
[data-design="b"] .vou-footer__trust { display: flex; flex-wrap: wrap; gap: var(--b-course); }
[data-design="b"] .vou-footer .vou-stamp {
  background: color-mix(in oklab, var(--b-bronze) 12%, transparent);
  border-color: color-mix(in oklab, var(--b-bronze) 30%, transparent);
  color: var(--b-rule);
}
[data-design="b"] .vou-footer .vou-stone--primary {
  background: var(--b-sinopia); color: var(--b-sinopia-ink);
}
[data-design="b"] .vou-footer__copy {
  font-size: var(--b-t-cap); color: var(--b-faint);
  grid-column: 1 / -1; margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   REDUCED-MOTION fallbacks (all @ end, per contract)
══════════════════════════════════════════════════════════════════ */
@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-paver-row      { transform: scaleX(1); animation: none; }
  [data-design="b"] .vou-hero__pavers   { animation: none; opacity: 1; }
  [data-design="b"] .vou-arch .v        { opacity: 0.25; transform: none; animation: none; }
  [data-design="b"] .vou-arch__centering{ opacity: 0; 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; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile clip + breakpoints
   Scoped to .dq-design per chrome-kit conflict guard
══════════════════════════════════════════════════════════════════ */
[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; }

@media (max-width: 768px) {
  [data-design="b"] .vou-arch { width: 85vw; opacity: 0.2; }
  [data-design="b"] .vou-hero { min-height: 60vh; padding-top: var(--b-bastion); }
  [data-design="b"] .vou-opus-item { flex-direction: column; gap: var(--b-coursing); }
  [data-design="b"] .vou-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  [data-design="b"] .vou-header__bar { padding: var(--b-course) var(--b-lift); }
  [data-design="b"] .vou-funnel { padding-block: var(--b-story); }
  [data-design="b"] .vou-track { padding-block: var(--b-story); }
  [data-design="b"] .vou-services { padding-block: var(--b-story); }
  [data-design="b"] .vou-about  { padding-block: var(--b-story); }
  [data-design="b"] .vou-area   { padding-block: var(--b-story); }
  [data-design="b"] .vou-footer { padding-block: var(--b-story); }
  [data-design="b"] .vou-hero__sub { font-size: var(--b-t-body); }
  [data-design="b"] .vou-drawer__nav a { font-size: clamp(22px, 8vw, 36px); }
  [data-design="b"] .vou-chips {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  [data-design="b"] .vou-hero__h { font-size: clamp(28px, 9vw, 48px); }
}

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