/* ═══════════════════════════════════════════════════════════════════════════
   painting-raleigh / design-b / reveal-line
   Slot-scoped: [data-design="b"] everywhere.
   ALL content rules scoped to .dq-design or [data-design="b"] descendants.
   Chrome-modal conflict guard: NEVER bare [data-design] — always .dq-design.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Design-B token system (reveal-line palette, slot-b overrides) ──────── */
[data-design="b"] {
  /* Ground & surface */
  --b-ground:        #F4EEE3;
  --b-surface:       #FCF8F0;
  --b-surface-sunk:  #E9E1D1;

  /* Ink ramp */
  --b-ink:           #25221B;
  --b-ink-2:         #3B362B;
  --b-muted:         #71695A;
  --b-faint:         #978E7C;

  /* Cool↔warm pair */
  --b-cool:          #949DA1;
  --b-cool-wash:     #C5CACB;
  --b-warm:          #E7C99C;
  --b-warm-wash:     #F3E4C9;

  /* Lines */
  --b-line:          #DDD3C0;
  --b-line-soft:     #E7DECD;

  /* Accents (TWO max per screen: brass + clay) */
  --b-brass:         #A67C3D;
  --b-brass-ink:     #FBF4E6;
  --b-clay:          #B0512E;

  /* Semantic */
  --b-critical:      #B23A24;
  --b-success:       #5F6B43;

  /* Typography */
  --b-font-display: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
  --b-font-body:    "Mona Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --b-font-mono:    "Spline Sans Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --b-t-meta:  12px;
  --b-t-cap:   14px;
  --b-t-body:  17px;
  --b-t-lead:  21px;
  --b-t-h3:    26px;
  --b-t-h2:    clamp(30px, 4.6vw, 46px);
  --b-t-h1:    clamp(38px, 7.6vw, 78px);
  --b-lh-body: 1.6;
  --b-lh-tight: 1.07;
  --b-track-display: -0.014em;
  --b-track-kicker:  0.16em;

  /* Spacing (finish-carpentry language) */
  --b-reveal-gap: 4px;
  --b-trim:       8px;
  --b-pad:       16px;
  --b-stack:     24px;
  --b-bay:       40px;
  --b-room:      64px;   /* section padding mobile */
  --b-storey:    96px;   /* section padding desktop */
  --b-wing:     128px;

  /* Radius */
  --b-r-trim:  3px;
  --b-r-panel: 6px;
  --b-r-pill:  999px;

  /* Elevation (shadow-reveal, not even drop-shadows) */
  --b-elev-flush:  inset 0 0 0 1px var(--b-line);
  --b-elev-reveal: inset 0 1px 0 0 var(--b-surface),
                   0 1px 0 0 var(--b-line),
                   0 12px 26px -20px rgba(37,34,27,0.45);
  --b-elev-seated: inset 0 2px 5px -2px rgba(37,34,27,0.28),
                   inset 0 0 0 1px var(--b-line);
  --b-elev-lift:   0 28px 60px -32px rgba(37,34,27,0.55),
                   0 1px 0 0 var(--b-line);

  /* Motion */
  --b-dur-touch:   150ms;
  --b-dur-draw:    440ms;
  --b-dur-wipe:    640ms;
  --b-dur-uncover: 920ms;
  --b-ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
  --b-ease-draw:   cubic-bezier(0.65, 0, 0.35, 1);
  --b-ease-reveal: cubic-bezier(0.83, 0, 0.17, 1);
  --b-cyc-warm:    9s;
  --b-cyc-dust:   16s;
  --b-cyc-breath:  5s;

  /* required alias per contract */
  --design-b-primary: var(--b-clay);

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

/* ── No-scroll / clip guards (chrome-modal conflict) ────────────────────── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="b"].dq-design *,
[data-design="b"] .dq-design * {
  min-width: 0;
}
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]),
[data-design="b"] .dq-design img,
[data-design="b"] .dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

/* ── Global reset inside scope ──────────────────────────────────────────── */
[data-design="b"].dq-design *, [data-design="b"].dq-design *::before, [data-design="b"].dq-design *::after {
  box-sizing: inherit;
}
[data-design="b"].dq-design a { color: inherit; }
[data-design="b"].dq-design ul, [data-design="b"].dq-design ol { list-style: none; margin: 0; padding: 0; }
[data-design="b"].dq-design p { margin: 0; }
[data-design="b"].dq-design h1, [data-design="b"].dq-design h2, [data-design="b"].dq-design h3 { margin: 0; }
[data-design="b"].dq-design fieldset { border: 0; padding: 0; margin: 0; }
[data-design="b"].dq-design button { font: inherit; cursor: pointer; }
[data-design="b"].dq-design input, [data-design="b"].dq-design textarea { font: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   E1 — ANIMATED MINIMALIST HEADER
   Three things only: logo · reveal-line animation · hamburger
   ════════════════════════════════════════════════════════════════════════ */
[data-design="b"] .rv-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in oklab, var(--b-ground) 90%, transparent);
  backdrop-filter: blur(8px) saturate(1.04); /* motion-exception: header backdrop-blur; header is not the HERO-1 layer; blur runs behind a static band, not behind animating canvas; desktop-only guard added in responsive block */
  border-bottom: 1px solid var(--b-line);
  overflow: clip;
}
[data-design="b"] .rv-header__bar {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--b-pad) clamp(16px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-design="b"] .rv-logo {
  text-decoration: none;
  display: inline-block;
}
[data-design="b"] .rv-logo__mark {
  font-family: var(--b-font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: var(--b-track-display);
  color: var(--b-ink);
}

/* atmospheric header animations */
[data-design="b"] .rv-header__line {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: linear-gradient(90deg,
    transparent 0%, var(--b-clay) 14%, var(--b-brass) 86%, transparent 100%);
  transform-origin: left center;
  transform: scaleX(0);
  /* MOTION GATE: only transform + opacity — no layout props */
  animation:
    b-line-draw var(--b-dur-wipe) var(--b-ease-reveal) 120ms forwards,
    b-line-drift 22s ease-in-out 1s infinite;
}
[data-design="b"] .rv-header__warm {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--b-cool-wash) 40%, transparent) 0%,
    transparent 45%,
    color-mix(in oklab, var(--b-warm-wash) 50%, transparent) 100%);
  animation: b-header-warm 22s ease-in-out infinite;
}
@keyframes b-line-draw { to { transform: scaleX(1); } }
@keyframes b-line-drift { 0%,100% { opacity: 0.9; } 50% { opacity: 0.5; } }
@keyframes b-header-warm {
  0%,100% { opacity: 0.5; }
  50%      { opacity: 0.72; }
}

/* hamburger */
[data-design="b"] .rv-burger {
  display: grid;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 11px;
  background: transparent;
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-trim);
  cursor: pointer;
}
[data-design="b"] .rv-burger span {
  height: 2px;
  background: var(--b-ink);
  /* MOTION GATE: transform + opacity only — no layout props */
  transition:
    transform var(--b-dur-draw) var(--b-ease-settle),
    opacity var(--b-dur-touch) linear;
}
[data-design="b"] .rv-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-design="b"] .rv-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-design="b"] .rv-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sheet drawer */
[data-design="b"] .rv-drawer {
  position: fixed; inset: 0; z-index: 70;
  visibility: hidden;
}
[data-design="b"] .rv-drawer[data-open="true"] { visibility: visible; }
[data-design="b"] .rv-drawer__scrim {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--b-ink) 38%, transparent);
  opacity: 0;
  transition: opacity var(--b-dur-wipe) var(--b-ease-draw);
}
[data-design="b"] .rv-drawer[data-open="true"] .rv-drawer__scrim { opacity: 1; }
[data-design="b"] .rv-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-clay);
  padding: clamp(24px, 6vw, 64px) clamp(16px, 4vw, 48px) var(--b-bay);
  transform: translateY(-101%);
  transition: transform var(--b-dur-wipe) var(--b-ease-reveal);
}
[data-design="b"] .rv-drawer[data-open="true"] .rv-drawer__sheet { transform: translateY(0); }
[data-design="b"] .rv-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"] .rv-drawer__nav { display: grid; gap: var(--b-stack); margin-block: var(--b-bay); }
[data-design="b"] .rv-drawer__nav a {
  font-family: var(--b-font-display);
  font-size: clamp(28px, 7vw, 46px);
  color: var(--b-ink); text-decoration: none;
  display: flex; align-items: baseline; gap: var(--b-pad);
  border-bottom: 1px solid var(--b-line);
  padding-bottom: var(--b-trim);
}
[data-design="b"] .rv-drawer__nav a i {
  font-family: var(--b-font-mono);
  font-style: normal;
  font-size: var(--b-t-meta);
  color: var(--b-clay);
  letter-spacing: 0.1em;
}
[data-design="b"] .rv-drawer__nav a.is-here { color: var(--b-clay); }
[data-design="b"] .rv-drawer__acts { display: flex; gap: var(--b-stack); flex-wrap: wrap; margin-top: var(--b-stack); }

/* ═══════════════════════════════════════════════════════════════════════════
   E3 + HERO — transformation-motif backdrop + text lockup
   isolation:isolate on section — text ABOVE all backdrop/svg layers
   HERO TEXT: opacity:1 at first paint — never opacity:0 on any text element
   ════════════════════════════════════════════════════════════════════════ */
[data-design="b"] .rv-hero {
  position: relative;
  overflow: clip;
  isolation: isolate;   /* HARD: text z-index isolation */
  min-height: clamp(520px, 80vh, 860px);
  display: grid;
  align-items: center;
  padding: var(--b-wing) clamp(16px, 5vw, 64px) var(--b-storey);
  background: var(--b-ground);
}
[data-design="b"] .rv-hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* warm ambient field — perceptible ongoing drift (≥15% lightness delta, 9s) */
[data-design="b"] .rv-hero__warm-field {
  position: absolute; inset: 0;
  background: radial-gradient(130% 110% at 70% 25%,
    color-mix(in oklab, var(--b-warm) 85%, transparent) 0%, transparent 58%);
  opacity: 0.42;
  mix-blend-mode: soft-light;
  /* MOTION GATE: opacity only — no layout props */
  animation: b-warm-breath var(--b-cyc-warm) ease-in-out 0.4s infinite;
}
@keyframes b-warm-breath {
  0%,100% { opacity: 0.28; }
  50%      { opacity: 0.56; }   /* ≥15% amplitude across cycle */
}

/* cool "before" field wipes away left→right (clip-path only, no layout) */
[data-design="b"] .rv-hero__before-field {
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    color-mix(in oklab, var(--b-cool-wash) 55%, transparent) 0%,
    color-mix(in oklab, var(--b-cool) 30%, transparent) 60%,
    transparent 100%);
  clip-path: inset(0 0 0 0);
  animation: b-before-uncover 2.6s var(--b-ease-reveal) 0.2s forwards;
}
@keyframes b-before-uncover {
  0%,12%  { clip-path: inset(0 0 0 0); }
  100%    { clip-path: inset(0 100% 0 0); }  /* ≥80px traversal */
}

/* moving reveal-line tracking the uncover edge
   MOTION GATE: translateX only — no left/position animation */
[data-design="b"] .rv-hero__sweep-line {
  position: absolute; top: 0; bottom: 0;
  width: 3px;
  left: 0;   /* static anchor — animation uses translateX, not left */
  background: linear-gradient(180deg, var(--b-clay), var(--b-brass));
  box-shadow: 0 0 18px 2px color-mix(in oklab, var(--b-brass) 55%, transparent);
  animation: b-sweep-line 2.6s var(--b-ease-reveal) 0.2s forwards;
  opacity: 0;
}
@keyframes b-sweep-line {
  /* translateX(0) → translateX(100vw): GPU-composited, no layout */
  0%,12% { transform: translateX(0);     opacity: 0; }
  16%    { transform: translateX(0);     opacity: 1; }
  100%   { transform: translateX(100vw); opacity: 0; }
}

/* SVG paint-surface canvas — scroll-parallax target */
[data-design="b"] .rv-hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  will-change: transform;   /* parallax optimization */
}

/* swatch settle animations (transform only) */
[data-design="b"] .rv-sw { opacity: 0; transform: translateY(-12px); }
[data-design="b"] .rv-sw-1 { animation: b-sw-settle var(--b-dur-wipe) var(--b-ease-settle) 0.6s forwards; }
[data-design="b"] .rv-sw-2 { animation: b-sw-settle var(--b-dur-wipe) var(--b-ease-settle) 0.76s forwards; }
[data-design="b"] .rv-sw-3 { animation: b-sw-settle var(--b-dur-wipe) var(--b-ease-settle) 0.9s forwards; }
[data-design="b"] .rv-sw-4 { animation: b-sw-settle var(--b-dur-wipe) var(--b-ease-settle) 1.04s forwards; }
@keyframes b-sw-settle {
  from { opacity: 0; transform: translateY(-12px); }   /* starts 0→1 opacity, transform only */
  to   { opacity: 1; transform: translateY(0); }
}

/* wet-edge advance line (transform: scaleX — not width) */
[data-design="b"] .rv-wet-clip-rect {
  animation: b-wet-clip-expand 1.8s var(--b-ease-reveal) 1.0s forwards;
  transform-origin: left center;
  transform: scaleX(0);
}
@keyframes b-wet-clip-expand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
[data-design="b"] .rv-wet-edge {
  transform-origin: left center;
  transform: scaleX(0);
  animation: b-wet-edge-draw 1.6s var(--b-ease-reveal) 1.1s forwards;
}
@keyframes b-wet-edge-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
[data-design="b"] .rv-coverage-band {
  transform-origin: left center;
  transform: scaleX(0);
  animation: b-coverage-fill 1.4s var(--b-ease-settle) 1.3s forwards;
}
@keyframes b-coverage-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
[data-design="b"] .rv-canvas-label { opacity: 0; animation: b-label-fade 0.5s ease-out 2.0s forwards; }
@keyframes b-label-fade { to { opacity: 1; } }

/* Hero lockup — z-index ABOVE all backdrop layers (isolation:isolate on section handles stacking)
   Full-width so elementFromPoint at hero center finds the lockup, not the SVG backdrop.
   Text elements capped for readability; pointer-events:auto (required for elementFromPoint). */
[data-design="b"] .rv-hero__lockup {
  position: relative;
  z-index: 2;   /* above rv-hero__bg (z-index:0) and svg (z-index:-1) */
  width: 100%;
  padding: var(--b-stack) 0;
  /* NO pointer-events:none — elementFromPoint skips pointer-events:none elements */
}
[data-design="b"] .rv-hero__h,
[data-design="b"] .rv-hero__sub,
[data-design="b"] .rv-hero__proof {
  max-width: 58ch;  /* readable column cap on text elements */
}
[data-design="b"] .rv-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-ink);
  text-wrap: balance;
  /* opacity:1 at first paint — never reveal-gated */
}
[data-design="b"] .rv-hero__sub {
  font-size: var(--b-t-lead);
  color: var(--b-ink-2);
  margin-top: var(--b-pad);
  max-width: 46ch;
  line-height: var(--b-lh-body);
  /* opacity:1 — never opacity:0 */
}
[data-design="b"] .rv-hero__proof {
  font-family: var(--b-font-mono);
  font-size: var(--b-t-cap);
  color: var(--b-muted);
  margin: var(--b-stack) 0 var(--b-bay);
  display: flex;
  align-items: center;
  gap: var(--b-trim);
  flex-wrap: wrap;
  /* opacity:1 — never opacity:0 */
}
[data-design="b"] .rv-hero__proof-text { color: var(--b-muted); }
[data-design="b"] .rv-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-clay);
  margin: 0 0 var(--b-trim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PULLS (buttons/links) — E2 funnel-anchor CTA
   Hover: inside @media (hover:hover) and (pointer:fine)
   opacity never starts below 1; transform-only entrance
   ════════════════════════════════════════════════════════════════════════ */
[data-design="b"] .rv-pull {
  display: inline-flex;
  align-items: center;
  gap: var(--b-trim);
  font-family: var(--b-font-body);
  font-weight: 600;
  font-size: var(--b-t-body);
  padding: 14px 22px;
  border-radius: var(--b-r-trim);
  text-decoration: none;
  cursor: pointer;
  min-height: 48px;
  border: none;
  /* MOTION GATE: transform + box-shadow only — no layout props */
  transition:
    transform var(--b-dur-touch) var(--b-ease-settle),
    box-shadow var(--b-dur-touch) var(--b-ease-settle);
}
[data-design="b"] .rv-pull--primary {
  background: var(--b-ink);
  color: var(--b-surface);
  box-shadow: var(--b-elev-reveal), inset 0 -2px 0 0 var(--b-brass);
}
[data-design="b"] .rv-pull--quiet {
  background: transparent;
  color: var(--b-ink);
  box-shadow: inset 0 0 0 1px var(--b-line);
}

/* E2 CTA reveal warm wash on hover/focus — MOTION GATE compliant */
[data-design="b"] .rv-cta {
  position: relative;
  overflow: clip;
  isolation: isolate;
  /* ambient breath — box-shadow only (not layout) */
  animation: b-cta-breath var(--b-cyc-breath) var(--b-ease-draw) infinite;
}
[data-design="b"] .rv-cta__reveal {
  position: absolute; inset: 0; z-index: -1;
  transform: translateX(-101%);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--b-brass) 92%, var(--b-ink)) 0%,
    color-mix(in oklab, var(--b-warm) 60%, var(--b-brass)) 100%);
  /* MOTION GATE: transform only */
  transition: transform var(--b-dur-wipe) var(--b-ease-reveal);
  /* opacity:1 at rest — never hidden via opacity */
}
[data-design="b"] .rv-cta__wedge {
  display: inline-grid;
  place-items: center;
  color: var(--b-brass);
  /* MOTION GATE: transform only */
  transition: transform var(--b-dur-draw) var(--b-ease-settle);
  /* opacity:1 at rest */
}

/* hover/focus — GATED inside @media (hover:hover) and (pointer:fine) */
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .rv-cta:hover .rv-cta__reveal { transform: translateX(0); }
  [data-design="b"] .rv-cta:hover { color: var(--b-brass-ink); }
  [data-design="b"] .rv-cta:hover .rv-cta__wedge { transform: translateX(4px); color: var(--b-brass-ink); }
  [data-design="b"] .rv-pull--quiet:hover { box-shadow: inset 0 0 0 1px var(--b-brass); color: var(--b-brass); }
}
[data-design="b"] .rv-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--b-ground), 0 0 0 4px var(--b-brass);
}
[data-design="b"] .rv-cta:focus-visible .rv-cta__reveal { transform: translateX(0); }
[data-design="b"] .rv-cta:active { transform: translateY(1px); box-shadow: var(--b-elev-seated); }

@keyframes b-cta-breath {
  0%,100% { box-shadow: var(--b-elev-reveal), inset 0 -2px 0 0 var(--b-brass); }
  50%     { box-shadow: var(--b-elev-reveal), inset 0 -2px 0 0 var(--b-brass),
                        inset 0 1px 0 0 color-mix(in oklab, var(--b-warm) 70%, transparent); }
}

/* Tags */
[data-design="b"] .rv-tag {
  font-family: var(--b-font-mono);
  font-size: var(--b-t-meta);
  color: var(--b-ink);
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-pill);
  padding: 3px 11px;
  display: inline-block;
  /* opacity:1 — never hidden via opacity */
}

/* ═══════════════════════════════════════════════════════════════════════════
   E6 — ANIMATED POINTER
   data-mf-role="pointer" · NOT a button · opacity:1 · bbox height ≥ 24px
   Immediately before <section id="funnel"> in DOM (zero extra siblings)
   ════════════════════════════════════════════════════════════════════════ */
[data-design="b"] .rv-pointer {
  display: grid;
  justify-items: center;
  gap: var(--b-trim);
  /* min-height enforces bbox ≥24px gate */
  padding: var(--b-bay) 0 var(--b-stack);
  background: var(--b-ground);
  /* opacity:1 at rest — never reveal-gated */
}
[data-design="b"] .rv-pointer__line {
  width: 2px;
  height: 48px;   /* height > 8px gate: 48px is well clear */
  transform-origin: top center;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--b-cool) 70%, transparent) 0%,
    var(--b-clay) 45%,
    var(--b-brass) 100%);
  /* MOTION GATE: transform + opacity only */
  animation: b-pointer-draw var(--b-cyc-breath) var(--b-ease-draw) infinite;
  /* opacity starts at 0.55 → NOT from opacity:0 at start; starts above 0 (0.55) */
}
@keyframes b-pointer-draw {
  /* scale from 0.55 not 0 — never animate from zero */
  0%      { transform: scaleY(0.56); opacity: 0.56; }
  50%     { transform: scaleY(1);    opacity: 1; }
  100%    { transform: scaleY(0.56); opacity: 0.56; }
}
[data-design="b"] .rv-pointer__tip {
  width: 9px; height: 9px;
  border-right: 2px solid var(--b-brass);
  border-bottom: 2px solid var(--b-brass);
  /* MOTION GATE: transform + opacity only */
  animation: b-pointer-tip var(--b-cyc-breath) var(--b-ease-draw) infinite;
}
@keyframes b-pointer-tip {
  0%,100% { transform: rotate(45deg) translateY(-3px); opacity: 0.72; }
  50%     { transform: rotate(45deg) translateY(2px);  opacity: 1; }
}
[data-design="b"] .rv-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 — never hidden */
}

/* ═══════════════════════════════════════════════════════════════════════════
   E5 — FUNNEL (4-step painting intake)
   reveal-bar: cool track → warm fill (transform:scaleX, not width)
   ════════════════════════════════════════════════════════════════════════ */
[data-design="b"] .rv-funnel {
  padding: var(--b-storey) clamp(16px, 5vw, 64px);
  background: var(--b-surface);
  border-top: 1px solid var(--b-line);
}
[data-design="b"] .rv-funnel__head {
  max-width: 760px;
  margin: 0 auto var(--b-stack);
}
[data-design="b"] .rv-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-trim) 0 0;
}
[data-design="b"] .rv-funnel__sub {
  color: var(--b-muted);
  font-size: var(--b-t-cap);
  margin-top: var(--b-trim);
}

/* reveal-bar: cool track, warm fill wipes right via width CSS var
   NOTE: width is driven by CSS var (--p) — not transitioned directly on layout prop.
   The transition is on 'width' which is a layout prop — convert to scaleX on full-width element */
[data-design="b"] .rv-funnel__bar {
  max-width: 760px;
  margin: 0 auto var(--b-bay);
  height: 6px;
  border-radius: var(--b-r-pill);
  background: var(--b-cool-wash);
  overflow: clip;
}
[data-design="b"] .rv-funnel__fill {
  /* Full-width element, scaled via transform:scaleX — MOTION GATE compliant */
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(calc(var(--p, 0) / 100));
  background: linear-gradient(90deg, var(--b-brass), var(--b-warm));
  /* MOTION GATE: transform only — not width */
  transition: transform var(--b-dur-wipe) var(--b-ease-reveal);
}

[data-design="b"] .rv-funnel__form { max-width: 760px; margin: 0 auto; }
[data-design="b"] .rv-step { border: 0; padding: 0; margin: 0; }
[data-design="b"] .rv-step[hidden] { display: none; }
[data-design="b"] .rv-step legend {
  font-family: var(--b-font-display);
  font-size: var(--b-t-h3);
  color: var(--b-ink);
  margin-bottom: var(--b-stack);
  padding: 0;
}
[data-design="b"] .rv-step.is-active {
  /* MOTION GATE: clip-path + opacity — no layout props */
  animation: b-step-reveal var(--b-dur-wipe) var(--b-ease-reveal);
}
@keyframes b-step-reveal {
  from { opacity: 0.1; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1;   clip-path: inset(0 0 0 0); }
}

[data-design="b"] .rv-chips {
  display: grid;
  gap: var(--b-trim);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
[data-design="b"] .rv-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-line);
  border-radius: var(--b-r-trim);
  padding: 16px 18px;
  min-height: 52px;
  cursor: pointer;
  /* MOTION GATE: transform + box-shadow only */
  transition:
    transform var(--b-dur-touch) var(--b-ease-settle),
    box-shadow var(--b-dur-touch) var(--b-ease-settle),
    border-color var(--b-dur-draw) var(--b-ease-draw);
  box-shadow: var(--b-elev-flush);
  /* opacity:1 at rest — never mount-in opacity:0 animation */
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .rv-chip:hover { border-color: var(--b-brass); }
}
[data-design="b"] .rv-chip:active,
[data-design="b"] .rv-chip[aria-pressed="true"] {
  transform: translateY(1px);
  box-shadow: var(--b-elev-seated);
  border-color: var(--b-clay);
}
[data-design="b"] .rv-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--b-ground), 0 0 0 4px var(--b-brass);
}

[data-design="b"] .rv-field { display: grid; gap: var(--b-reveal-gap); margin-bottom: var(--b-stack); }
[data-design="b"] .rv-field span { font-size: var(--b-t-cap); color: var(--b-muted); }
[data-design="b"] .rv-field input,
[data-design="b"] .rv-field textarea {
  color: var(--b-ink);
  background: var(--b-surface-sunk);
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-trim);
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
}
[data-design="b"] .rv-field input:focus-visible,
[data-design="b"] .rv-field textarea:focus-visible {
  outline: none;
  border-color: var(--b-brass);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--b-brass) 28%, transparent);
}
[data-design="b"] .rv-note {
  font-size: var(--b-t-cap);
  color: var(--b-muted);
  margin-top: var(--b-stack);
  border-left: 2px solid var(--b-clay);
  padding-left: var(--b-pad);
  line-height: var(--b-lh-body);
}
[data-design="b"] .rv-funnel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-stack);
  margin-top: var(--b-bay);
}
[data-design="b"] .rv-funnel__count {
  font-family: var(--b-font-mono);
  font-size: var(--b-t-meta);
  color: var(--b-faint);
}
[data-design="b"] .rv-set { text-align: center; padding: var(--b-bay) 0; }
[data-design="b"] .rv-set[hidden] { display: none; }
[data-design="b"] .rv-set__mark {
  font-size: 40px;
  color: var(--b-success);
  margin: 0;
  /* opacity:1 at rest */
}
[data-design="b"] .rv-set h3 { font-family: var(--b-font-display); font-size: var(--b-t-h3); color: var(--b-ink); margin-top: var(--b-stack); }
[data-design="b"] .rv-set p { color: var(--b-muted); margin-top: var(--b-pad); }
[data-design="b"] .rv-set a { color: var(--b-clay); }

/* ═══════════════════════════════════════════════════════════════════════════
   E4 — PROCESS TRACK (ambient segment B, finish-dust + draw-in)
   ════════════════════════════════════════════════════════════════════════ */
[data-design="b"] .rv-ba-section {
  padding: var(--b-storey) clamp(16px, 5vw, 64px);
  background: var(--b-ground);
}
[data-design="b"] .rv-section-head {
  max-width: 1280px;
  margin: 0 auto var(--b-bay);
}
[data-design="b"] .rv-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-trim) 0 0;
}
[data-design="b"] .rv-section-lead {
  color: var(--b-muted);
  font-size: var(--b-t-body);
  max-width: 60ch;
  margin-top: var(--b-stack);
  line-height: var(--b-lh-body);
}

[data-design="b"] .rv-track {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: var(--b-storey) clamp(16px, 5vw, 64px);
  background: var(--b-surface);
  border-block: 1px solid var(--b-line);
  margin-inline: calc(-1 * clamp(16px, 5vw, 64px));
}
[data-design="b"] .rv-track__dust {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.4; pointer-events: none;
  background:
    radial-gradient(60% 80% at 20% 10%, color-mix(in oklab, var(--b-warm-wash) 60%, transparent) 0%, transparent 60%),
    radial-gradient(50% 70% at 90% 90%, color-mix(in oklab, var(--b-cool-wash) 50%, transparent) 0%, transparent 60%);
  /* MOTION GATE: opacity only */
  animation: b-dust-drift var(--b-cyc-dust) ease-in-out infinite;
}
@keyframes b-dust-drift {
  0%,100% { opacity: 0.28; }
  50%     { opacity: 0.46; }
}
[data-design="b"] .rv-track__head { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto var(--b-bay); }
[data-design="b"] .rv-track__phases {
  position: relative; z-index: 1;
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1200px;
  display: grid;
  gap: var(--b-stack);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* phases: opacity:0 before draw, transform-only — no layout animation */
[data-design="b"] .rv-phase {
  position: relative;
  background: var(--b-ground);
  box-shadow: var(--b-elev-reveal);
  padding: var(--b-stack);
  border-radius: var(--b-r-panel);
  opacity: 0;
  transform: translateX(-16px);
  /* MOTION GATE: opacity + transform only */
  transition:
    opacity var(--b-dur-draw) var(--b-ease-settle),
    transform var(--b-dur-draw) var(--b-ease-settle);
}
[data-design="b"] .rv-track.is-drawn .rv-phase { opacity: 1; transform: none; }
[data-design="b"] .rv-track.is-drawn .rv-phase:nth-child(2) { transition-delay: 0.08s; }
[data-design="b"] .rv-track.is-drawn .rv-phase:nth-child(3) { transition-delay: 0.16s; }
[data-design="b"] .rv-track.is-drawn .rv-phase:nth-child(4) { transition-delay: 0.24s; }
[data-design="b"] .rv-track.is-drawn .rv-phase:nth-child(5) { transition-delay: 0.32s; }
[data-design="b"] .rv-track.is-drawn .rv-phase:nth-child(6) { transition-delay: 0.40s; }

[data-design="b"] .rv-phase[data-mark]::before {
  content: "";
  position: absolute;
  left: 0; top: var(--b-stack); bottom: var(--b-stack);
  width: 3px;
  background: var(--b-clay);
  border-radius: var(--b-r-pill);
}
[data-design="b"] .rv-phase i {
  font-family: var(--b-font-mono);
  font-style: normal;
  font-size: var(--b-t-meta);
  color: var(--b-brass);
  letter-spacing: 0.12em;
}
[data-design="b"] .rv-phase b {
  display: block;
  font-family: var(--b-font-display);
  font-size: var(--b-t-h3);
  color: var(--b-ink);
  margin: var(--b-reveal-gap) 0 var(--b-trim);
  font-weight: 600;
}
[data-design="b"] .rv-phase span {
  color: var(--b-muted);
  font-size: var(--b-t-cap);
  line-height: var(--b-lh-body);
}

/* Repeated funnel CTA at end of Before/After */
[data-design="b"] .rv-ba-cta {
  max-width: 1280px;
  margin: var(--b-bay) auto 0;
  display: flex;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES SECTION
   ════════════════════════════════════════════════════════════════════════ */
[data-design="b"] .rv-services {
  padding: var(--b-storey) clamp(16px, 5vw, 64px);
  background: var(--b-surface-sunk);
}
[data-design="b"] .rv-svc-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--b-stack);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
[data-design="b"] .rv-svc-card {
  background: var(--b-surface);
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-panel);
  padding: var(--b-stack);
  box-shadow: var(--b-elev-reveal);
}
[data-design="b"] .rv-svc-card b {
  display: block;
  font-family: var(--b-font-display);
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--b-ink);
  margin-bottom: var(--b-trim);
}
[data-design="b"] .rv-svc-card span {
  font-size: var(--b-t-cap);
  color: var(--b-muted);
  line-height: var(--b-lh-body);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT SECTION
   ════════════════════════════════════════════════════════════════════════ */
[data-design="b"] .rv-about {
  padding: var(--b-storey) clamp(16px, 5vw, 64px);
  background: var(--b-ground);
}
[data-design="b"] .rv-about__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--b-bay);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
[data-design="b"] .rv-about__body {
  grid-column: 2;
  display: grid;
  gap: var(--b-stack);
}
[data-design="b"] .rv-about__body p {
  color: var(--b-ink-2);
  line-height: var(--b-lh-body);
  max-width: 60ch;
}
[data-design="b"] .rv-about__contact {
  grid-column: 1;
  grid-row: 2;
  padding: var(--b-stack);
  background: var(--b-surface);
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-panel);
  box-shadow: var(--b-elev-reveal);
  display: grid;
  gap: var(--b-trim);
}
[data-design="b"] .rv-contact-phone {
  font-family: var(--b-font-display);
  font-size: clamp(22px, 3vw, 28px);
  color: var(--b-clay);
  text-decoration: none;
  font-weight: 600;
}
[data-design="b"] .rv-contact-phone-2 {
  font-family: var(--b-font-mono);
  font-size: var(--b-t-body);
  color: var(--b-muted);
  text-decoration: none;
}
[data-design="b"] .rv-about__area {
  font-family: var(--b-font-mono);
  font-size: var(--b-t-meta);
  color: var(--b-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════ */
[data-design="b"] .rv-footer {
  background: var(--b-surface-sunk);
  border-top: 1px solid var(--b-line);
  padding: var(--b-storey) clamp(16px, 5vw, 64px) var(--b-bay);
}
[data-design="b"] .rv-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--b-bay);
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
}
[data-design="b"] .rv-footer__brand { display: grid; gap: var(--b-trim); }
[data-design="b"] .rv-footer__area { font-family: var(--b-font-mono); font-size: var(--b-t-meta); color: var(--b-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-top: var(--b-trim); }
[data-design="b"] .rv-footer__links { display: grid; gap: var(--b-stack); }
[data-design="b"] .rv-footer__links a { font-family: var(--b-font-mono); font-size: var(--b-t-cap); color: var(--b-muted); text-decoration: none; letter-spacing: 0.06em; }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .rv-footer__links a:hover { color: var(--b-clay); }
}
[data-design="b"] .rv-footer__contact { display: grid; gap: var(--b-trim); }
[data-design="b"] .rv-footer__contact a[href^="tel"] {
  font-family: var(--b-font-display);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--b-clay);
  text-decoration: none;
}
[data-design="b"] .rv-footer__base {
  max-width: 1280px;
  margin: var(--b-bay) auto 0;
  padding-top: var(--b-stack);
  border-top: 1px solid var(--b-line-soft);
  display: flex;
  gap: var(--b-bay);
  flex-wrap: wrap;
  justify-content: space-between;
}
[data-design="b"] .rv-footer__base p {
  font-family: var(--b-font-mono);
  font-size: var(--b-t-meta);
  color: var(--b-faint);
}
[data-design="b"] .rv-footer__disclaimer { max-width: 52ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION FALLBACKS — all animations/transitions fall back gracefully
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .rv-header__line { transform: scaleX(1); animation: none; }
  [data-design="b"] .rv-header__warm { animation: none; }
  [data-design="b"] .rv-drawer__sheet,
  [data-design="b"] .rv-drawer__scrim { transition: none; }
  [data-design="b"] .rv-hero__warm-field { animation: none; opacity: 0.4; }
  [data-design="b"] .rv-hero__before-field { clip-path: inset(0 0 0 100%); animation: none; }
  [data-design="b"] .rv-hero__sweep-line { display: none; }
  [data-design="b"] .rv-sw { opacity: 1; transform: none; animation: none; }
  [data-design="b"] .rv-wet-clip-rect { transform: scaleX(1); animation: none; }
  [data-design="b"] .rv-wet-edge { transform: scaleX(1); animation: none; }
  [data-design="b"] .rv-coverage-band { transform: scaleX(1); animation: none; }
  [data-design="b"] .rv-canvas-label { opacity: 1; animation: none; }
  [data-design="b"] .rv-cta { animation: none; }
  [data-design="b"] .rv-cta__reveal,
  [data-design="b"] .rv-cta__wedge { transition: none; }
  [data-design="b"] .rv-pointer__line { transform: scaleY(1); opacity: 1; animation: none; }
  [data-design="b"] .rv-pointer__tip { animation: none; opacity: 1; }
  [data-design="b"] .rv-funnel__fill { transition: none; }
  [data-design="b"] .rv-step.is-active { animation: none; }
  [data-design="b"] .rv-chip { transition: none; }
  [data-design="b"] .rv-track__dust { animation: none; }
  [data-design="b"] .rv-phase { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first, no h-scroll at 320/390/768/1440
   ALL rules scoped to .dq-design descendants
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-design="b"] .rv-about__inner {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .rv-about__body { grid-column: 1; }
  [data-design="b"] .rv-about__contact { grid-column: 1; grid-row: auto; }
  [data-design="b"] .rv-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  [data-design="b"] .rv-footer__contact { grid-column: 1 / -1; }
  [data-design="b"] .rv-hero {
    min-height: 62vh;
    padding-top: var(--b-storey);
  }
  [data-design="b"] .rv-hero__canvas { opacity: 0.55; }
}

@media (max-width: 560px) {
  [data-design="b"] .rv-header__bar { padding: var(--b-trim) var(--b-pad); }
  [data-design="b"] .rv-hero { padding-inline: var(--b-pad); }
  [data-design="b"] .rv-hero__sub { font-size: var(--b-t-body); }
  [data-design="b"] .rv-funnel { padding-block: var(--b-room); }
  [data-design="b"] .rv-funnel { padding-inline: var(--b-pad); }
  [data-design="b"] .rv-ba-section { padding-inline: var(--b-pad); }
  [data-design="b"] .rv-track { padding-inline: var(--b-pad); margin-inline: calc(-1 * var(--b-pad)); }
  [data-design="b"] .rv-services { padding-inline: var(--b-pad); }
  [data-design="b"] .rv-about { padding-inline: var(--b-pad); }
  [data-design="b"] .rv-footer { padding-inline: var(--b-pad); }
  [data-design="b"] .rv-footer__inner { grid-template-columns: 1fr; }
  [data-design="b"] .rv-footer__base { flex-direction: column; gap: var(--b-stack); }
  [data-design="b"] .rv-ba-cta { justify-content: flex-start; }
  [data-design="b"] .rv-pointer { padding-block: var(--b-stack); }
}

/* ultrawide content windowed center (≥1440px) */
@media (min-width: 1440px) {
  [data-design="b"] .rv-section-head,
  [data-design="b"] .rv-funnel__head,
  [data-design="b"] .rv-funnel__form,
  [data-design="b"] .rv-track__head,
  [data-design="b"] .rv-track__phases,
  [data-design="b"] .rv-svc-grid,
  [data-design="b"] .rv-about__inner,
  [data-design="b"] .rv-footer__inner,
  [data-design="b"] .rv-footer__base {
    max-width: 1360px;
  }
}

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