/* ================================================================
   DESIGN-B: drawdown-laboratory → scoped [data-design="b"]
   McConnor Painting · McCall, ID
   ~1000 CSS lines
   ================================================================ */

/* ── TOKEN BLOCK ──────────────────────────────────────────────── */
[data-design="b"] {
  /* Design-b primary (required expose) */
  --design-b-primary: #B83A20;

  /* Color tokens (remapped from drawdown-laboratory) */
  --dl-paper:          #F3F0E8;
  --dl-surface:        #FFFFFF;
  --dl-ink:            #1A1814;
  --dl-ink-2:          #4A4640;
  --dl-muted:          #7A746B;
  --dl-border:         #D8D2C5;
  --dl-border-strong:  #1A1814;
  --dl-specimen:       #B83A20;   /* calibrated oxide red */
  --dl-specimen-2:     #2D5A78;   /* calibrated slate blue */
  --dl-specimen-3:     #C8923A;   /* calibrated ochre */
  --dl-success:        #4A6B3A;
  --dl-warn:           #C8923A;
  --dl-critical:       #8B2A18;

  /* Typography tokens */
  --dl-display: 'Inter', system-ui, -apple-system, sans-serif;
  --dl-mono:    'JetBrains Mono', ui-monospace, 'IBM Plex Mono', monospace;

  /* Spacing tokens (painter's units) */
  --dl-hair:    2px;
  --dl-pin:     4px;
  --dl-bristle: 8px;
  --dl-line:    12px;
  --dl-stroke:  16px;
  --dl-coat:    24px;
  --dl-roll:    40px;
  --dl-stride:  72px;
  --dl-wall:    120px;

  /* Radius tokens */
  --dl-r-card: 2px;
  --dl-r-chip: 1px;
  --dl-r-pill: 999px;

  /* Motion tokens */
  --dl-ease-settle: cubic-bezier(0.16, 0.84, 0.20, 1.00);
  --dl-ease-roll:   cubic-bezier(0.50, 0.00, 0.20, 1.00);
  --dl-dur-quick:   180ms;
  --dl-dur-base:    360ms;
  --dl-dur-coat:    720ms;
  --dl-dur-dry:     22s;

  /* Page base */
  background: var(--dl-paper);
  color: var(--dl-ink);
  font-family: var(--dl-display);
  font-size: 17px;
  line-height: 1.55;
  box-sizing: border-box;
}

[data-design="b"] *, [data-design="b"] *::before, [data-design="b"] *::after {
  box-sizing: inherit;
}

/* ── E1: HEADER ───────────────────────────────────────────────── */
[data-design="b"] .rf-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--dl-paper);
  border-bottom: 1px solid var(--dl-ink);
}

[data-design="b"] .rf-light-rule {
  position: relative; height: 2px; width: 100%;
  background: var(--dl-border);
  overflow: hidden;
}

[data-design="b"] .rf-light-rule__band {
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    var(--dl-specimen-3) 0%,
    var(--dl-specimen)   28%,
    var(--dl-specimen-2) 62%,
    var(--dl-specimen-3) 100%
  );
  background-size: 220% 100%;
  animation: b-light-drift 28s linear infinite;
  opacity: 0.55;
}

@keyframes b-light-drift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 220% 50%; }
}

[data-design="b"] .rf-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dl-stroke);
  padding: var(--dl-coat) clamp(var(--dl-stroke), 4vw, var(--dl-roll));
  max-width: 1320px; margin: 0 auto;
}

[data-design="b"] .rf-logo {
  display: inline-flex; align-items: baseline; gap: var(--dl-line);
  text-decoration: none; color: var(--dl-ink);
}

[data-design="b"] .rf-logo__ref {
  font-family: var(--dl-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dl-muted);
  border: 1px solid var(--dl-border); padding: 2px 6px;
  border-radius: var(--dl-r-pill);
}

[data-design="b"] .rf-logo__mark {
  font-family: var(--dl-display);
  font-weight: 600; font-size: 19px; letter-spacing: -0.012em;
}

[data-design="b"] .rf-burger {
  appearance: none; background: transparent; border: 1px solid var(--dl-ink);
  width: 44px; height: 44px; padding: 12px;
  display: inline-flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; border-radius: var(--dl-r-card);
  transition: background var(--dl-dur-quick) var(--dl-ease-settle);
  flex-shrink: 0;
}

[data-design="b"] .rf-burger:hover { background: var(--dl-surface); }

[data-design="b"] .rf-burger__line {
  display: block; height: 1px; background: var(--dl-ink);
  transition: transform var(--dl-dur-base) var(--dl-ease-settle);
}

[data-design="b"] .rf-burger[aria-expanded="true"] .rf-burger__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
[data-design="b"] .rf-burger[aria-expanded="true"] .rf-burger__line:nth-child(2) {
  transform: scaleX(0);
}
[data-design="b"] .rf-burger[aria-expanded="true"] .rf-burger__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Drawer */
[data-design="b"] .rf-drawer {
  position: fixed; inset: 0; background: var(--dl-paper);
  padding: 80px clamp(var(--dl-stroke), 6vw, var(--dl-stride));
  z-index: 40; overflow-y: auto;
  animation: b-drawer-in var(--dl-dur-coat) var(--dl-ease-roll);
}

[data-design="b"] .rf-drawer[hidden] { display: none; }
[data-design="b"] .rf-drawer[data-open="true"] { display: block; }

@keyframes b-drawer-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

[data-design="b"] .rf-drawer__close {
  position: absolute; top: 24px; right: clamp(var(--dl-stroke), 6vw, var(--dl-stride));
  appearance: none; background: transparent; border: 1px solid var(--dl-ink);
  width: 44px; height: 44px; font-size: 20px; cursor: pointer;
  border-radius: var(--dl-r-card); color: var(--dl-ink);
  display: flex; align-items: center; justify-content: center;
}

[data-design="b"] .rf-drawer__list {
  list-style: none; padding: 0; margin: 0 0 var(--dl-roll);
  display: flex; flex-direction: column; gap: var(--dl-stroke);
}

[data-design="b"] .rf-drawer__list a {
  font-family: var(--dl-display); font-size: clamp(24px, 6vw, 44px);
  color: var(--dl-ink); text-decoration: none;
  border-bottom: 1px solid var(--dl-border); padding-bottom: var(--dl-line);
  display: block;
  transition: color var(--dl-dur-quick) var(--dl-ease-settle);
}

[data-design="b"] .rf-drawer__list a:hover { color: var(--dl-specimen); }

[data-design="b"] .rf-drawer__ctas {
  display: flex; flex-direction: column; gap: var(--dl-line);
  padding-top: var(--dl-roll);
  border-top: 1px solid var(--dl-border);
}

[data-design="b"] .rf-drawer__phone {
  font-family: var(--dl-mono); font-size: 18px; letter-spacing: 0.04em;
  color: var(--dl-ink); text-decoration: none;
  padding: var(--dl-line) 0;
}

[data-design="b"] .rf-drawer__funnel-cta {
  display: inline-block;
  padding: 14px 20px;
  background: var(--dl-ink); color: var(--dl-paper);
  font-family: var(--dl-display); font-weight: 600; font-size: 15px;
  text-decoration: none; border-radius: var(--dl-r-card);
  border: 1px solid var(--dl-ink);
  transition: background var(--dl-dur-quick) var(--dl-ease-settle);
  align-self: flex-start;
  min-height: 44px;
}

/* ── HERO ─────────────────────────────────────────────────────── */
[data-design="b"] .dl-hero {
  position: relative;
  min-height: clamp(480px, 75vh, 720px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--dl-paper);
  border-bottom: 1px solid var(--dl-ink);
}

/* E3 — Hero substrate: specimen strips + glow + SVG lines */
[data-design="b"] .dl-hero__substrate {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}

/* Vertical specimen column — drawn in on load, stays ambient */
[data-design="b"] .dl-hero__specimen-col {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: clamp(120px, 28vw, 360px);
  display: flex; flex-direction: column;
}

[data-design="b"] .dl-hero__strip {
  flex: 1 1 auto;
  transform-origin: right center;
  animation: b-strip-arrive 1.4s var(--dl-ease-settle) both,
             b-strip-breathe 9s var(--dl-ease-roll) infinite;
}

/* Stagger arrivals + give each strip a unique breath phase */
[data-design="b"] .dl-hero__strip--1 {
  background: var(--dl-specimen);
  animation-delay: 0s, 0s;
}
[data-design="b"] .dl-hero__strip--2 {
  background: var(--dl-ink);
  animation-delay: 0.12s, 1.5s;
}
[data-design="b"] .dl-hero__strip--3 {
  background: var(--dl-specimen-2);
  animation-delay: 0.24s, 3s;
}
[data-design="b"] .dl-hero__strip--4 {
  background: var(--dl-specimen-3);
  animation-delay: 0.36s, 4.5s;
}
[data-design="b"] .dl-hero__strip--5 {
  background: var(--dl-paper);
  border-left: 1px solid var(--dl-border);
  animation-delay: 0.48s, 6s;
}

@keyframes b-strip-arrive {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Sustained ambient — brightness pulses, keeps hero alive at rest */
@keyframes b-strip-breathe {
  0%, 100% { filter: brightness(1);   }
  50%       { filter: brightness(1.12); }
}

/* North-light glow — single radial drifting */
[data-design="b"] .dl-hero__glow {
  position: absolute; inset: -20%;
  background: radial-gradient(
    ellipse at 70% 30%,
    rgba(255, 240, 215, 0.38) 0%,
    rgba(255, 240, 215, 0.14) 30%,
    transparent 60%
  );
  animation: b-hero-glow 14s var(--dl-ease-roll) infinite alternate;
  mix-blend-mode: screen;
}

@keyframes b-hero-glow {
  0%   { transform: translate(-8%, -5%)  scale(1.0); opacity: 0.6; }
  50%  { transform: translate(5%,  8%)  scale(1.12); opacity: 0.9; }
  100% { transform: translate(-4%, 12%) scale(0.95); opacity: 0.55; }
}

/* SVG hairlines */
[data-design="b"] .dl-hero__lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

[data-design="b"] .dl-hero__line {
  stroke: var(--dl-ink); stroke-width: 0.5; opacity: 0;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: b-line-draw 1.2s var(--dl-ease-roll) 0.6s forwards;
}

[data-design="b"] .dl-hero__line--h2 {
  stroke: var(--dl-border); stroke-width: 0.5;
  animation-delay: 0.65s;
}

[data-design="b"] .dl-hero__line--v1 {
  stroke: var(--dl-border); stroke-width: 0.5;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation-delay: 0.8s;
}

@keyframes b-line-draw {
  to { stroke-dashoffset: 0; opacity: 0.35; }
}

[data-design="b"] .dl-hero__lrv-label,
[data-design="b"] .dl-hero__ref-label {
  font-family: var(--dl-mono); font-size: 10px;
  fill: var(--dl-muted); letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0;
  animation: b-label-fade 0.8s var(--dl-ease-settle) 1.4s forwards;
}

[data-design="b"] .dl-hero__ref-label { animation-delay: 1.5s; }

@keyframes b-label-fade {
  to { opacity: 0.6; }
}

/* Hero content — on top of substrate */
[data-design="b"] .dl-hero__content {
  position: relative; z-index: 1;
  max-width: 680px;
  padding: var(--dl-wall) clamp(var(--dl-stroke), 5vw, var(--dl-stride));
  display: flex; flex-direction: column; gap: var(--dl-stroke);
}

[data-design="b"] .dl-hero__eyebrow {
  font-family: var(--dl-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dl-muted);
  /* opacity:1 at first paint */
  opacity: 1;
}

[data-design="b"] .dl-hero__headline {
  font-family: var(--dl-display); font-weight: 700;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.08; letter-spacing: -0.02em;
  color: var(--dl-ink);
  margin: 0;
  max-width: 18ch;
  /* opacity:1 at first paint — hard rule */
  opacity: 1;
}

[data-design="b"] .dl-hero__subtitle {
  font-size: clamp(15px, 2vw, 19px);
  color: var(--dl-ink-2); margin: 0;
  max-width: 48ch;
  /* opacity:1 at first paint */
  opacity: 1;
}

[data-design="b"] .dl-hero__proof {
  font-family: var(--dl-mono); font-size: 13px;
  color: var(--dl-muted); margin: 0;
  letter-spacing: 0.04em;
  /* opacity:1 at first paint */
  opacity: 1;
}

/* ── E2: ANIMATED CTA ─────────────────────────────────────────── */
[data-design="b"] .rf-cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--dl-line);
  padding: 14px 20px 14px 16px;
  background: var(--dl-paper); color: var(--dl-ink);
  border: 1px solid var(--dl-ink); border-radius: var(--dl-r-card);
  text-decoration: none; cursor: pointer; overflow: hidden;
  font-family: var(--dl-display); font-weight: 600; font-size: 15px;
  letter-spacing: 0.01em;
  animation: b-cta-breath 5s var(--dl-ease-settle) infinite;
  transition: transform var(--dl-dur-quick) var(--dl-ease-settle);
  align-self: flex-start;
  min-height: 44px;
}

[data-design="b"] .rf-cta__ref {
  font-family: var(--dl-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dl-muted);
  border-right: 1px solid var(--dl-border); padding-right: var(--dl-line);
}

[data-design="b"] .rf-cta__arrow {
  display: inline-flex; color: var(--dl-ink);
}

[data-design="b"] .rf-cta__notch {
  position: absolute; bottom: 0; right: 0;
  width: 28px; height: 6px;
  background: var(--dl-specimen);
  transition: height var(--dl-dur-base) var(--dl-ease-settle);
}

[data-design="b"] .rf-cta__sheen {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: skewX(-12deg); pointer-events: none; opacity: 0;
  z-index: -1;
}

[data-design="b"] .rf-cta:hover { transform: translateY(-1px); }
[data-design="b"] .rf-cta:hover .rf-cta__notch { height: 9px; }
[data-design="b"] .rf-cta:hover .rf-cta__sheen {
  animation: b-cta-sheen 720ms var(--dl-ease-roll) 1;
  opacity: 1;
}

[data-design="b"] .rf-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--dl-specimen), transparent 60%);
}

[data-design="b"] .rf-cta:active {
  transform: translateY(1px) scale(0.985);
  animation-play-state: paused;
}

@keyframes b-cta-breath {
  0%, 100% { box-shadow: 0 0 0 0   color-mix(in oklab, var(--dl-specimen), transparent 80%); }
  50%       { box-shadow: 0 0 0 4px color-mix(in oklab, var(--dl-specimen), transparent 92%); }
}

@keyframes b-cta-sheen {
  from { left: -40%; }
  to   { left: 110%; }
}

/* ── E6: POINTER ──────────────────────────────────────────────── */
[data-design="b"] .dl-pointer {
  display: flex;
  justify-content: center;
  padding: clamp(40px, 8vw, 80px) 16px clamp(56px, 10vw, 96px);
  /* wrapper is always opacity:1 — never reveal-gated */
  opacity: 1;
}

[data-design="b"] .dl-pointer__hit {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--dl-ink-2);
  min-height: 80px; /* bbox height >= 8px guaranteed */
}

[data-design="b"] .dl-pointer__tick {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

[data-design="b"] .dl-pointer__rule {
  display: block;
  width: 1px;
  height: 56px;
  background: currentColor;
  transform-origin: top center;
  animation: b-pointer-extend 5s ease-in-out infinite;
}

[data-design="b"] .dl-pointer__label {
  font-family: var(--dl-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* resting at 0 opacity but the wrapper stays visible via tick + rule */
  opacity: 0;
  animation: b-pointer-stamp 5s ease-in-out infinite;
}

@keyframes b-pointer-extend {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%       { transform: scaleY(1);  opacity: 0.85; }
}

@keyframes b-pointer-stamp {
  0%, 30%, 100% { opacity: 0; }
  50%, 70%       { opacity: 0.85; }
}

/* ── E5: FUNNEL ───────────────────────────────────────────────── */
[data-design="b"] .dl-funnel-section {
  padding: var(--dl-stride) clamp(var(--dl-stroke), 4vw, var(--dl-roll));
  max-width: 1320px; margin: 0 auto;
  border-top: 1px solid var(--dl-border);
}

[data-design="b"] .rf-builder__head {
  display: flex; flex-direction: column; gap: var(--dl-line);
  margin-bottom: var(--dl-roll);
}

[data-design="b"] .rf-builder__eyebrow {
  font-family: var(--dl-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dl-muted);
}

[data-design="b"] .rf-builder__title {
  font-family: var(--dl-display); font-weight: 600;
  font-size: clamp(24px, 4vw, 40px); letter-spacing: -0.012em;
  color: var(--dl-ink); margin: 0;
}

[data-design="b"] .rf-builder__lede {
  font-size: 17px; color: var(--dl-ink-2); max-width: 60ch; margin: 0;
  line-height: 1.6;
}

[data-design="b"] .rf-builder {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: var(--dl-roll); align-items: start;
}

[data-design="b"] .rf-builder__form {
  display: flex; flex-direction: column; gap: var(--dl-stroke);
  border: 1px solid var(--dl-ink); padding: var(--dl-coat);
  background: var(--dl-surface); border-radius: var(--dl-r-card);
}

[data-design="b"] .rf-builder__field {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--dl-line);
}

/* Step visibility — inactive steps dimmed, not hidden (all steps visible) */
[data-design="b"] .dl-funnel__step[data-step-active="false"] {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--dl-dur-base) var(--dl-ease-settle);
}

[data-design="b"] .dl-funnel__step[data-step-active="true"] {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--dl-dur-base) var(--dl-ease-settle);
}

[data-design="b"] .rf-builder__legend {
  font-family: var(--dl-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dl-ink);
  display: inline-flex; align-items: center; gap: var(--dl-line);
  padding-bottom: var(--dl-pin); border-bottom: 1px solid var(--dl-border);
  width: 100%;
}

[data-design="b"] .rf-builder__legend span {
  font-size: 11px; color: var(--dl-muted); font-weight: 600;
}

[data-design="b"] .rf-builder__chips {
  display: flex; flex-wrap: wrap; gap: var(--dl-bristle);
}

[data-design="b"] .rf-buildchip {
  appearance: none; background: var(--dl-paper); color: var(--dl-ink);
  border: 1px solid var(--dl-border); border-radius: var(--dl-r-card);
  padding: 10px 14px; font-family: var(--dl-display); font-size: 14px;
  cursor: pointer; min-height: 44px;
  transition: background var(--dl-dur-quick) var(--dl-ease-settle),
              border-color var(--dl-dur-quick) var(--dl-ease-settle),
              transform var(--dl-dur-quick) var(--dl-ease-settle);
}

[data-design="b"] .rf-buildchip:hover { border-color: var(--dl-ink); }

[data-design="b"] .rf-buildchip[data-selected="true"] {
  background: var(--dl-ink); color: var(--dl-paper);
  border-color: var(--dl-ink);
  transform: translateY(-1px);
}

[data-design="b"] .rf-builder__input {
  display: flex; flex-direction: column; gap: 4px;
}

[data-design="b"] .rf-builder__input span {
  font-family: var(--dl-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dl-muted);
}

[data-design="b"] .rf-builder__input input {
  appearance: none; border: 0; border-bottom: 1px solid var(--dl-border);
  background: transparent; padding: 10px 0; font-size: 16px;
  font-family: var(--dl-display); color: var(--dl-ink);
  transition: border-color var(--dl-dur-quick) var(--dl-ease-settle);
  width: 100%;
}

[data-design="b"] .rf-builder__input input:focus-visible {
  outline: none; border-color: var(--dl-ink);
}

[data-design="b"] .rf-builder__submit {
  appearance: none; align-self: flex-start;
  background: var(--dl-ink); color: var(--dl-paper);
  border: 1px solid var(--dl-ink); padding: 14px 20px;
  font-family: var(--dl-display); font-weight: 600; font-size: 15px;
  cursor: pointer; border-radius: var(--dl-r-card);
  min-height: 44px;
  transition: transform var(--dl-dur-quick) var(--dl-ease-settle),
              background var(--dl-dur-quick) var(--dl-ease-settle);
}

[data-design="b"] .rf-builder__submit:hover { transform: translateY(-1px); }
[data-design="b"] .rf-builder__submit:active { transform: translateY(1px); }

/* Funnel specimen card */
[data-design="b"] .rf-builder__card {
  position: sticky; top: 88px;
  background: var(--dl-surface); border: 1px solid var(--dl-ink);
  border-radius: var(--dl-r-card); overflow: hidden;
}

[data-design="b"] .rf-builder__card-ref {
  padding: var(--dl-line) var(--dl-stroke);
  border-bottom: 1px solid var(--dl-border);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--dl-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dl-muted);
}

[data-design="b"] .rf-builder__card-stamp {
  font-family: var(--dl-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--dl-success); border: 1px solid var(--dl-success);
  padding: 2px 8px; border-radius: var(--dl-r-pill);
  animation: b-stamp 720ms var(--dl-ease-settle);
}

@keyframes b-stamp {
  0%   { transform: scale(1.4) rotate(-4deg); opacity: 0; }
  60%  { transform: scale(0.96) rotate(-1deg); opacity: 1; }
  100% { transform: scale(1) rotate(-2deg); opacity: 1; }
}

[data-design="b"] .rf-builder__card-field {
  position: relative; aspect-ratio: 5 / 3;
  background: var(--card-color, var(--dl-border));
  transition: background var(--dl-dur-base) var(--dl-ease-settle);
  overflow: hidden;
}

[data-design="b"] .rf-builder__card-wipe {
  position: absolute; inset: 0;
  background: var(--card-color-next, transparent);
  transform: translateX(-101%);
  transition: transform var(--dl-dur-coat) var(--dl-ease-roll);
}

[data-design="b"] .rf-builder__card[data-wiping="true"] .rf-builder__card-wipe {
  transform: translateX(0);
}

[data-design="b"] .rf-builder__card-meta {
  padding: var(--dl-stroke);
  display: grid; gap: var(--dl-pin);
}

[data-design="b"] .rf-builder__card-line {
  display: grid; grid-template-columns: 90px 1fr;
  align-items: baseline;
  border-bottom: 1px dotted var(--dl-border); padding: 4px 0;
}

[data-design="b"] .rf-builder__card-line dt {
  font-family: var(--dl-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--dl-muted); text-transform: uppercase;
}

[data-design="b"] .rf-builder__card-line dd {
  font-family: var(--dl-mono); font-size: 12px; color: var(--dl-ink);
  margin: 0; font-variant-numeric: tabular-nums;
}

[data-design="b"] .dl-funnel__card-note {
  padding: var(--dl-stroke);
  border-top: 1px solid var(--dl-border);
  display: flex; flex-direction: column; gap: var(--dl-line);
}

[data-design="b"] .dl-funnel__card-note p {
  font-size: 13px; color: var(--dl-ink-2); margin: 0; line-height: 1.5;
}

[data-design="b"] .dl-funnel__phone-link {
  font-family: var(--dl-mono); font-size: 13px; color: var(--dl-ink);
  text-decoration: none; letter-spacing: 0.04em;
}

[data-design="b"] .dl-funnel__trust {
  display: flex; flex-wrap: wrap; gap: var(--dl-line);
  align-items: center;
  margin-top: var(--dl-roll);
  padding-top: var(--dl-stroke);
  border-top: 1px solid var(--dl-border);
  font-family: var(--dl-mono); font-size: 12px;
  color: var(--dl-muted); letter-spacing: 0.04em;
}

/* ── SERVICES (Fan Deck — E3/E4 visual) ───────────────────────── */
[data-design="b"] .dl-services {
  background: var(--dl-surface);
  border-top: 1px solid var(--dl-ink);
  border-bottom: 1px solid var(--dl-border);
}

[data-design="b"] .dl-services__inner {
  max-width: 1320px; margin: 0 auto;
  padding: var(--dl-stride) clamp(var(--dl-stroke), 4vw, var(--dl-roll));
}

[data-design="b"] .dl-services__head {
  display: flex; flex-direction: column; gap: var(--dl-line);
  margin-bottom: var(--dl-roll);
}

[data-design="b"] .rf-ambient-a__title {
  font-family: var(--dl-display); font-weight: 600;
  font-size: clamp(24px, 4vw, 40px); letter-spacing: -0.012em;
  color: var(--dl-ink); margin: 0;
}

[data-design="b"] .rf-fan {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--dl-stroke);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

[data-design="b"] .rf-fan__chip {
  position: relative; overflow: hidden;
  background: var(--dl-surface);
  border: 1px solid var(--dl-ink);
  border-radius: var(--dl-r-card);
  display: flex; flex-direction: column;
  min-height: 220px;
  transition: transform var(--dl-dur-base) var(--dl-ease-settle);
}

[data-design="b"] .rf-fan__chip:hover { transform: translateY(-2px); }

[data-design="b"] .rf-fan__field {
  position: relative; flex: 1 1 auto;
  background: var(--chip-color, var(--dl-specimen));
  overflow: hidden;
}

[data-design="b"] .rf-fan__wipe {
  position: absolute; inset: 0;
  background: var(--chip-color-next, transparent);
  transform: translateX(-101%);
  transition: transform var(--dl-dur-coat) var(--dl-ease-roll);
}

[data-design="b"] .rf-fan__chip[data-transitioning="true"] .rf-fan__wipe {
  transform: translateX(0);
}

[data-design="b"] .rf-fan__meta {
  padding: var(--dl-line) var(--dl-stroke);
  display: grid; gap: 2px;
  border-top: 1px solid var(--dl-border);
}

[data-design="b"] .rf-fan__ref {
  font-family: var(--dl-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dl-muted);
}

[data-design="b"] .rf-fan__name {
  font-family: var(--dl-display); font-weight: 600; font-size: 17px;
  color: var(--dl-ink);
}

[data-design="b"] .rf-fan__readout {
  font-family: var(--dl-mono); font-size: 12px; color: var(--dl-ink-2);
}

/* ── E4: PROCESS (North-Light ambient panel) ───────────────────── */
[data-design="b"] .rf-ambient-b {
  padding: var(--dl-stride) clamp(var(--dl-stroke), 4vw, var(--dl-roll));
  max-width: 1320px; margin: 0 auto;
}

[data-design="b"] .rf-northlight {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  border: 1px solid var(--dl-ink); border-radius: var(--dl-r-card);
  overflow: hidden; min-height: 360px;
}

[data-design="b"] .rf-northlight__field {
  position: relative; background: var(--nl-color, var(--dl-specimen-2));
  overflow: hidden; min-height: 320px;
}

[data-design="b"] .rf-northlight__glow {
  position: absolute; inset: -20%;
  background: radial-gradient(
    circle at var(--nl-x, 30%) var(--nl-y, 20%),
    rgba(255, 240, 215, 0.42) 0%,
    rgba(255, 240, 215, 0.18) 22%,
    transparent 55%
  );
  animation: b-northlight-drift 22s var(--dl-ease-roll) infinite alternate;
  mix-blend-mode: screen;
}

@keyframes b-northlight-drift {
  0%   { transform: translate(-10%, -8%);  opacity: 0.55; }
  50%  { transform: translate(15%,  20%);  opacity: 0.85; }
  100% { transform: translate(-5%,  35%);  opacity: 0.60; }
}

[data-design="b"] .rf-northlight__meta {
  background: var(--dl-surface);
  padding: var(--dl-coat) var(--dl-coat) var(--dl-roll);
  border-left: 1px solid var(--dl-ink);
  display: flex; flex-direction: column; gap: var(--dl-line);
}

[data-design="b"] .rf-northlight__eyebrow {
  font-family: var(--dl-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dl-muted);
}

[data-design="b"] .rf-northlight__title {
  font-family: var(--dl-display); font-weight: 600;
  font-size: clamp(22px, 3vw, 34px); letter-spacing: -0.012em;
  color: var(--dl-ink); margin: 0;
}

[data-design="b"] .rf-northlight__body {
  font-size: 16px; line-height: 1.6; color: var(--dl-ink-2); margin: 0;
  max-width: 40ch;
}

[data-design="b"] .rf-northlight__readout {
  display: grid; grid-template-columns: 60px 1fr; gap: 2px var(--dl-line);
  margin: var(--dl-stroke) 0 0; padding-top: var(--dl-stroke);
  border-top: 1px solid var(--dl-border);
}

[data-design="b"] .rf-northlight__readout dt {
  font-family: var(--dl-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--dl-muted); text-transform: uppercase; align-self: center;
}

[data-design="b"] .rf-northlight__readout dd {
  font-family: var(--dl-mono); font-size: 12px; color: var(--dl-ink);
  margin: 0; font-variant-numeric: tabular-nums; line-height: 1.5;
}

/* ── ABOUT ────────────────────────────────────────────────────── */
[data-design="b"] .dl-about {
  background: var(--dl-paper);
  border-top: 1px solid var(--dl-border);
}

[data-design="b"] .dl-about__inner {
  max-width: 1320px; margin: 0 auto;
  padding: var(--dl-stride) clamp(var(--dl-stroke), 4vw, var(--dl-roll));
  display: flex; flex-direction: column; gap: var(--dl-roll);
}

[data-design="b"] .dl-about__body {
  max-width: 66ch;
  display: flex; flex-direction: column; gap: var(--dl-stroke);
}

[data-design="b"] .dl-about__body p {
  margin: 0; font-size: 17px; line-height: 1.65; color: var(--dl-ink-2);
}

[data-design="b"] .dl-about__chips {
  display: grid; gap: var(--dl-stroke);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

[data-design="b"] .dl-about__chip {
  min-height: auto;
}

/* ── REPEAT CTA ───────────────────────────────────────────────── */
[data-design="b"] .dl-repeat-cta {
  background: var(--dl-ink);
  border-top: 1px solid var(--dl-ink);
}

[data-design="b"] .dl-repeat-cta__inner {
  max-width: 1320px; margin: 0 auto;
  padding: var(--dl-stride) clamp(var(--dl-stroke), 4vw, var(--dl-roll));
  display: flex; flex-direction: column; gap: var(--dl-roll);
  align-items: flex-start;
}

[data-design="b"] .dl-repeat-cta__heading {
  font-family: var(--dl-display); font-weight: 700;
  font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.016em;
  color: var(--dl-paper); margin: 0;
}

[data-design="b"] .dl-repeat-cta__sub {
  font-size: 17px; line-height: 1.6; color: var(--dl-muted);
  max-width: 60ch; margin: 0;
}

[data-design="b"] .dl-repeat-cta .rf-cta {
  background: var(--dl-paper); color: var(--dl-ink);
}

/* ── FOOTER ───────────────────────────────────────────────────── */
[data-design="b"] .dl-footer {
  background: var(--dl-surface);
  border-top: 1px solid var(--dl-ink);
}

[data-design="b"] .dl-footer__inner {
  max-width: 1320px; margin: 0 auto;
  padding: var(--dl-stride) clamp(var(--dl-stroke), 4vw, var(--dl-roll));
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: var(--dl-roll);
}

[data-design="b"] .dl-footer__col {
  display: flex; flex-direction: column; gap: var(--dl-line);
}

[data-design="b"] .dl-footer__name {
  font-family: var(--dl-display); font-weight: 600; font-size: 19px;
  color: var(--dl-ink);
}

[data-design="b"] .dl-footer__tagline {
  font-size: 14px; color: var(--dl-muted); margin: 0;
}

[data-design="b"] .dl-footer__phone {
  font-family: var(--dl-mono); font-size: 16px; letter-spacing: 0.04em;
  color: var(--dl-ink); text-decoration: none;
  margin-top: var(--dl-line);
}

[data-design="b"] .dl-footer__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}

[data-design="b"] .dl-footer__list li,
[data-design="b"] .dl-footer__list a {
  font-size: 14px; color: var(--dl-ink-2); text-decoration: none;
  font-family: var(--dl-mono); letter-spacing: 0.02em;
}

[data-design="b"] .dl-footer__list a:hover { color: var(--dl-specimen); }

[data-design="b"] .dl-footer__bottom {
  border-top: 1px solid var(--dl-border);
  padding: var(--dl-coat) clamp(var(--dl-stroke), 4vw, var(--dl-roll));
  max-width: 1320px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--dl-stroke); flex-wrap: wrap;
}

[data-design="b"] .dl-footer__legal,
[data-design="b"] .dl-footer__copy {
  font-family: var(--dl-mono); font-size: 11px; color: var(--dl-muted);
  letter-spacing: 0.04em;
}

[data-design="b"] .dl-footer__cta {
  background: var(--dl-paper);
}

/* ── REDUCED MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .rf-light-rule__band { animation: none; background-position: 50% 50%; }
  [data-design="b"] .rf-drawer          { animation: none; }
  [data-design="b"] .rf-burger__line    { transition: none; }
  [data-design="b"] .rf-cta             { animation: none; }
  [data-design="b"] .rf-cta__sheen      { display: none; }
  [data-design="b"] .dl-hero__strip     { animation: none; opacity: 1; transform: none; }
  [data-design="b"] .dl-hero__glow      { animation: none; }
  [data-design="b"] .dl-hero__line      { animation: none; opacity: 0.35; stroke-dashoffset: 0; }
  [data-design="b"] .dl-hero__lrv-label,
  [data-design="b"] .dl-hero__ref-label { animation: none; opacity: 0.6; }
  [data-design="b"] .rf-fan__wipe       { transition: none; }
  [data-design="b"] .rf-northlight__glow { animation-play-state: paused; }
  [data-design="b"] .dl-pointer__rule   { animation: none; opacity: 0.7; }
  [data-design="b"] .dl-pointer__label  { animation: none; opacity: 0.7; }
  [data-design="b"] .rf-builder__card-wipe  { transition: none; }
  [data-design="b"] .rf-builder__card-stamp { animation: none; }
  [data-design="b"] .rf-builder__card-field { transition: none; }
}

/* ── RESPONSIVE BREAKPOINTS ───────────────────────────────────── */
@media (max-width: 1024px) {
  [data-design="b"] .dl-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  [data-design="b"] .rf-builder {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .rf-builder__card {
    position: static;
  }
  [data-design="b"] .rf-northlight {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .rf-northlight__meta {
    border-left: 0; border-top: 1px solid var(--dl-ink);
  }
}

@media (max-width: 768px) {
  [data-design="b"] .dl-hero__content {
    padding: clamp(64px, 12vw, var(--dl-wall)) var(--dl-stroke);
    max-width: 100%;
  }
  [data-design="b"] .dl-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--dl-roll);
  }
  [data-design="b"] .dl-services__inner,
  [data-design="b"] .rf-ambient-b,
  [data-design="b"] .dl-about__inner,
  [data-design="b"] .dl-funnel-section {
    padding: var(--dl-roll) var(--dl-stroke);
  }
}

@media (max-width: 560px) {
  [data-design="b"] .rf-logo__ref { display: none; }
  [data-design="b"] .rf-logo__mark { font-size: 17px; }
  [data-design="b"] .dl-footer__inner { grid-template-columns: 1fr; }
  [data-design="b"] .dl-repeat-cta__inner { padding: var(--dl-roll) var(--dl-stroke); }
  [data-design="b"] .dl-funnel__trust { flex-direction: column; align-items: flex-start; }
  [data-design="b"] .dl-funnel__trust span:not(:first-child):not([aria-hidden]) {
    display: none;
  }
}

@media (max-width: 390px) {
  [data-design="b"] .rf-header__bar { padding: var(--dl-line) var(--dl-stroke); }
  [data-design="b"] .rf-builder__form { padding: var(--dl-stroke); }
  [data-design="b"] .dl-hero { min-height: 480px; }
}

/* ── MOBILE OVERFLOW HARD STOPS (REQUIRED) ────────────────────── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}

[data-design="b"] * {
  min-width: 0;
}

[data-design="b"] img,
[data-design="b"] svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

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