/* ================================================================
   Design B — Opinionated Counsel × High Sierra Drafting
   ALL selectors scoped [data-design="b"]
   ZERO [data-design="b"] selectors anywhere
   Keyframes prefixed oc-b-* (no global namespace clash)
   --design-b-primary exposed as required
   ================================================================ */

/* ── 1. TOKENS ─────────────────────────────────────────────────── */
[data-design="b"] {
  /* Brand exposure */
  --design-b-primary: #1A47B8;

  /* Palette */
  --oc-canvas:      #F5F5F4;
  --oc-paper:       #FFFFFF;
  --oc-ink:         #171717;
  --oc-ink-2:       #3F3F3E;
  --oc-muted:       #7A7A78;
  --oc-rule:        #1A1A1A;
  --oc-soft:        #E5E4E1;
  --oc-stamp:       var(--design-b-primary);
  --oc-stamp-deep:  #102E78;
  --oc-stamp-on:    #FFFFFF;
  --oc-warn:        #C2410C;
  --oc-warn-soft:   #FBE9DC;
  --oc-success:     #15803D;

  /* Blueprint accent for hero substrate */
  --oc-blueprint:   #1A47B8;

  /* Typography */
  --oc-font-display: "Söhne Breit","Inter Display",-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  --oc-font-body:    "Söhne","Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --oc-font-mono:    "JetBrains Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;

  /* Spacing */
  --oc-space-hair:   2px;
  --oc-space-tick:   4px;
  --oc-space-bite:   8px;
  --oc-space-gap:    12px;
  --oc-space-stub:   16px;
  --oc-space-block:  24px;
  --oc-space-tile:   32px;
  --oc-space-bay:    48px;
  --oc-space-deck:   80px;
  --oc-space-yard:  128px;

  /* Radius */
  --oc-radius-0:     0;
  --oc-radius-sm:    4px;
  --oc-radius-md:    8px;
  --oc-radius-lg:    12px;
  --oc-radius-stamp: 2px;

  /* Elevation */
  --oc-elev-flat:  none;
  --oc-elev-rule:  inset 0 0 0 2px var(--oc-rule);
  --oc-elev-stamp: 0 4px 0 0 var(--oc-rule);

  /* Motion */
  --oc-dur-snap:    120ms;
  --oc-dur-stamp:   220ms;
  --oc-dur-settle:  360ms;
  --oc-dur-breathe: 4400ms;
  --oc-dur-scrub:   22000ms;
  --oc-ease-decide: cubic-bezier(.22,.61,.36,1);
  --oc-ease-stamp:  cubic-bezier(.34,1.42,.64,1);
  --oc-ease-bite:   cubic-bezier(.55,.06,.68,.19);
  --oc-ease-scrub:  cubic-bezier(.65,.05,.35,.95);

  /* Page defaults */
  background: var(--oc-canvas);
  color: var(--oc-ink);
  font-family: var(--oc-font-body);
  font-size: 17px;
  line-height: 1.6;
  box-sizing: border-box;
}

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

/* ── 2. HEADER — E1 ─────────────────────────────────────────────── */
[data-design="b"] .oc-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--oc-canvas);
  border-bottom: 2px solid var(--oc-rule);
}

[data-design="b"] .oc-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--oc-space-stub) clamp(20px, 4vw, 48px);
  gap: var(--oc-space-stub);
  max-width: 100%;
}

[data-design="b"] .oc-logo {
  text-decoration: none;
  color: var(--oc-ink);
  flex-shrink: 0;
}

[data-design="b"] .oc-logo__mark {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(17px, 2.2vw, 24px);
  letter-spacing: -0.015em;
  line-height: 1;
}

/* E1: Header scrubber — hairline scrub left→right on 22s cycle */
[data-design="b"] .oc-scrubber {
  position: relative;
  height: 2px;
  background: var(--oc-soft);
  overflow: hidden;
}

[data-design="b"] .oc-scrubber__head {
  position: absolute;
  inset: 0 auto 0 0;
  width: 18%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--oc-ink) 22%,
    var(--oc-stamp) 60%,
    var(--oc-stamp) 78%,
    transparent 100%
  );
  animation: oc-b-header-scrub var(--oc-dur-scrub) var(--oc-ease-scrub) infinite;
  will-change: transform;
}

@keyframes oc-b-header-scrub {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(620%); }
}

/* Hamburger */
[data-design="b"] .oc-hamburger {
  appearance: none;
  background: transparent;
  border: 2px solid var(--oc-rule);
  border-radius: var(--oc-radius-sm);
  padding: 10px 12px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  transition:
    background var(--oc-dur-snap) var(--oc-ease-decide),
    transform  var(--oc-dur-snap) var(--oc-ease-bite);
}

[data-design="b"] .oc-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--oc-ink);
}

[data-design="b"] .oc-hamburger:hover { background: var(--oc-soft); }
[data-design="b"] .oc-hamburger:active { transform: translateY(1px); }

[data-design="b"] .oc-hamburger[aria-expanded="true"] {
  background: var(--oc-ink);
  border-color: var(--oc-ink);
}

[data-design="b"] .oc-hamburger[aria-expanded="true"] .oc-hamburger__bar {
  background: var(--oc-canvas);
}

/* ── 3. DRAWER ─────────────────────────────────────────────────── */
/* Drawer: display:none when hidden; no opacity-based hiding */
[data-design="b"].oc-drawer {
  position: fixed;
  inset: 0;
  background: var(--oc-canvas);
  z-index: 30;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform var(--oc-dur-settle) var(--oc-ease-decide);
}

[data-design="b"].oc-drawer[data-open="true"] {
  transform: translateY(0);
}

[data-design="b"] .oc-drawer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--oc-space-stub) clamp(20px, 4vw, 48px);
  border-bottom: 2px solid var(--oc-rule);
  flex-shrink: 0;
}

[data-design="b"] .oc-drawer__brand {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.015em;
}

[data-design="b"] .oc-drawer__close {
  background: transparent;
  border: 0;
  font-size: 36px;
  line-height: 1;
  color: var(--oc-ink);
  cursor: pointer;
  padding: 0 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-design="b"] .oc-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: var(--oc-space-bay) clamp(20px, 4vw, 48px);
  gap: var(--oc-space-stub);
  flex: 1;
  overflow-y: auto;
}

[data-design="b"] .oc-nav-link {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(36px, 7vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--oc-ink);
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  display: flex;
  align-items: flex-end;
}

[data-design="b"] .oc-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 0;
  background: var(--oc-stamp);
  transition: width var(--oc-dur-settle) var(--oc-ease-decide);
}

[data-design="b"] .oc-nav-link:hover,
[data-design="b"] .oc-nav-link:focus-visible {
  color: var(--oc-stamp);
  outline: none;
}

[data-design="b"] .oc-nav-link:hover::after,
[data-design="b"] .oc-nav-link:focus-visible::after {
  width: 100%;
}

[data-design="b"] .oc-drawer__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-stub);
  padding: var(--oc-space-block) clamp(20px, 4vw, 48px) var(--oc-space-bay);
  border-top: 2px solid var(--oc-rule);
  flex-shrink: 0;
}

[data-design="b"] .oc-drawer__phone {
  font-family: var(--oc-font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 26px);
  color: var(--oc-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  min-height: 44px;
  display: flex;
  align-items: center;
}

[data-design="b"] .oc-drawer__phone:hover { color: var(--oc-stamp); }

[data-design="b"].oc-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23,23,23,0.5);
  z-index: 29;
}

/* ── 4. CTA — E2 ─────────────────────────────────────────────── */
[data-design="b"] .oc-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--oc-space-gap);
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(17px, 1.6vw, 20px);
  letter-spacing: -0.015em;
  padding: 18px 26px;
  background: var(--oc-stamp);
  color: var(--oc-stamp-on);
  text-decoration: none;
  border-radius: var(--oc-radius-md);
  border: 2px solid var(--oc-rule);
  box-shadow: var(--oc-elev-stamp);
  transform: translateY(0);
  transition:
    transform    var(--oc-dur-snap) var(--oc-ease-decide),
    box-shadow   var(--oc-dur-snap) var(--oc-ease-decide),
    background   var(--oc-dur-snap) var(--oc-ease-decide);
  animation: oc-b-cta-breath var(--oc-dur-breathe) var(--oc-ease-decide) infinite;
  min-height: 44px;
  cursor: pointer;
}

[data-design="b"] .oc-cta__arrow {
  display: inline-block;
  transition: transform var(--oc-dur-snap) var(--oc-ease-decide);
}

[data-design="b"] .oc-cta[data-lean="true"],
[data-design="b"] .oc-cta:hover,
[data-design="b"] .oc-cta:focus-visible {
  background: var(--oc-stamp-deep);
  box-shadow: 0 6px 0 0 var(--oc-rule);
  transform: translateY(-2px);
  animation-play-state: paused;
  outline: none;
}

[data-design="b"] .oc-cta:hover .oc-cta__arrow,
[data-design="b"] .oc-cta:focus-visible .oc-cta__arrow {
  transform: translateX(8px);
}

[data-design="b"] .oc-cta:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 var(--oc-rule);
  transition-duration: var(--oc-dur-snap);
  transition-timing-function: var(--oc-ease-bite);
}

@keyframes oc-b-cta-breath {
  0%, 100% { box-shadow: var(--oc-elev-stamp), 0 0 0 0 var(--oc-stamp); }
  50%      { box-shadow: var(--oc-elev-stamp), 0 0 0 8px rgba(26,71,184,0.18); }
}

/* Drawer CTA variant */
[data-design="b"] .oc-cta--drawer {
  width: 100%;
  justify-content: space-between;
}

/* ── 5. HERO + E3 BACKDROP ──────────────────────────────────────── */
[data-design="b"] .oc-hero {
  position: relative;
  min-height: clamp(480px, 70vh, 760px);
  display: flex;
  align-items: center;
  background: var(--oc-canvas);
  border-bottom: 2px solid var(--oc-rule);
  overflow: hidden;
}

/* E3: Blueprint animated backdrop — ONE layer, arrival + sustained ambient */
[data-design="b"] .oc-hero__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Visible at first paint: opacity 0.38, ≥30% hero area */
  opacity: 0.38;
}

[data-design="b"] .oc-blueprint {
  width: 100%;
  height: 100%;
  display: block;
}

/* Grid underlayer — immediate first-paint presence */
[data-design="b"] .oc-bp-grid line {
  stroke: var(--oc-blueprint);
  stroke-width: 0.5;
  opacity: 0.3;
}

/* Elevation house drawing — draws in on arrival, ~0–1.8s */
[data-design="b"] .oc-bp-line {
  stroke: var(--oc-blueprint);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: oc-b-line-draw 1.6s var(--oc-ease-decide) forwards,
             oc-b-bp-ambient 9s var(--oc-ease-scrub) 1.8s infinite;
}

[data-design="b"] .oc-bp-line--h  { animation-delay: 0s,    1.8s; stroke-dasharray: 640; stroke-dashoffset: 640; }
[data-design="b"] .oc-bp-line--v  { animation-delay: 0.2s,  1.8s; stroke-dasharray: 160; stroke-dashoffset: 160; }
[data-design="b"] .oc-bp-line--d  { animation-delay: 0.5s,  1.8s; stroke-dasharray: 340; stroke-dashoffset: 340; }
[data-design="b"] .oc-bp-line--d2 { animation-delay: 0.7s,  1.8s; stroke-dasharray: 340; stroke-dashoffset: 340; }
[data-design="b"] .oc-bp-line--h2 { animation-delay: 0.9s,  1.8s; stroke-dasharray: 640; stroke-dashoffset: 640; }
[data-design="b"] .oc-bp-line--cross { animation-delay: 1.1s, 1.8s; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-width: 1; }

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

/* Sustained ambient: slow opacity breath — perceptible, not imperceptible */
@keyframes oc-b-bp-ambient {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Rectangles (door, windows) */
[data-design="b"] .oc-bp-rect {
  stroke: var(--oc-blueprint);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: oc-b-line-draw 0.8s var(--oc-ease-decide) 1.0s forwards,
             oc-b-bp-ambient 9s var(--oc-ease-scrub) 1.8s infinite;
}

[data-design="b"] .oc-bp-rect--win {
  animation-delay: 1.2s, 1.8s;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
}

/* Dimension lines — appear after elevation (~1.5s), sustained ambient */
[data-design="b"] .oc-bp-dim {
  stroke: var(--oc-blueprint);
  stroke-width: 1;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: oc-b-line-draw 0.7s var(--oc-ease-decide) 1.5s forwards,
             oc-b-bp-ambient 9s var(--oc-ease-scrub) 2.2s infinite;
}

[data-design="b"] .oc-bp-dim--tick {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation-delay: 1.7s, 2.2s;
}

[data-design="b"] .oc-bp-dim-label {
  fill: none;
  stroke: var(--oc-blueprint);
  stroke-width: 1;
  opacity: 0;
  animation: oc-b-fade-in 0.4s var(--oc-ease-decide) 2.0s forwards,
             oc-b-bp-ambient 9s var(--oc-ease-scrub) 2.2s infinite;
}

@keyframes oc-b-fade-in {
  to { opacity: 1; }
}

/* Detail circles */
[data-design="b"] .oc-bp-detail {
  stroke: var(--oc-blueprint);
  stroke-width: 1;
  fill: none;
  opacity: 0;
  animation: oc-b-fade-in 0.4s var(--oc-ease-decide) 1.8s forwards,
             oc-b-bp-ambient 9s var(--oc-ease-scrub) 2.2s infinite;
}
[data-design="b"] .oc-bp-detail--inner {
  animation-delay: 2.0s, 2.2s;
}

/* Hero text content — z-index above backdrop */
[data-design="b"] .oc-hero__content {
  position: relative;
  z-index: 2;
  padding: var(--oc-space-yard) clamp(20px, 6vw, 80px);
  max-width: min(680px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-block);
}

/* Hero text: opacity:1 at first paint — NEVER opacity:0 initially */
[data-design="b"] .oc-hero__kicker {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--oc-muted);
  margin: 0;
  opacity: 1;
}

[data-design="b"] .oc-hero__headline {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(40px, 6.5vw, 88px);
  letter-spacing: -0.030em;
  line-height: 1.0;
  color: var(--oc-ink);
  margin: 0;
  opacity: 1;
  max-width: 18ch;
}

[data-design="b"] .oc-hero__subtitle {
  font-family: var(--oc-font-body);
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.55;
  color: var(--oc-ink-2);
  margin: 0;
  max-width: 48ch;
  opacity: 1;
}

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

/* ── 6. SERVICES — E4 docket folio ─────────────────────────────── */
[data-design="b"] .oc-docket {
  background: var(--oc-paper);
  padding: clamp(64px, 8vw, 96px) clamp(20px, 4vw, 48px);
  border-bottom: 2px solid var(--oc-rule);
}

[data-design="b"] .oc-docket__head {
  margin-bottom: var(--oc-space-bay);
}

[data-design="b"] .oc-docket__kicker {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oc-muted);
  margin: 0 0 var(--oc-space-gap);
}

[data-design="b"] .oc-docket__title {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  color: var(--oc-ink);
}

[data-design="b"] .oc-docket__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-design="b"] .oc-docket__row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: baseline;
  gap: var(--oc-space-bay);
  padding: var(--oc-space-tile) 0;
  border-bottom: 2px solid var(--oc-rule);
  animation: oc-b-breathe-rule 14s var(--oc-ease-scrub) infinite;
  position: relative;
}

[data-design="b"] .oc-docket__row:nth-child(2) { animation-delay: -2s; }
[data-design="b"] .oc-docket__row:nth-child(3) { animation-delay: -4s; }
[data-design="b"] .oc-docket__row:nth-child(4) { animation-delay: -6s; }
[data-design="b"] .oc-docket__row:nth-child(5) { animation-delay: -8s; }
[data-design="b"] .oc-docket__row:nth-child(6) { animation-delay: -10s; }

@keyframes oc-b-breathe-rule {
  0%, 100% { border-bottom-color: var(--oc-rule); }
  50%      { border-bottom-color: var(--oc-soft); }
}

[data-design="b"] .oc-docket__num {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--oc-ink);
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid var(--oc-rule);
  border-radius: var(--oc-radius-stamp);
  background: var(--oc-paper);
  line-height: 1;
  min-width: 44px;
  text-align: center;
  transition:
    background var(--oc-dur-stamp) var(--oc-ease-stamp),
    color      var(--oc-dur-stamp) var(--oc-ease-stamp),
    transform  var(--oc-dur-stamp) var(--oc-ease-stamp);
}

[data-design="b"] .oc-docket__row[data-stamped="true"] .oc-docket__num {
  background: var(--oc-stamp);
  color: var(--oc-stamp-on);
  border-color: var(--oc-stamp);
  transform: scale(1.06);
}

[data-design="b"] .oc-docket__name {
  font-family: var(--oc-font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 22px);
  letter-spacing: -0.01em;
  color: var(--oc-ink);
}

[data-design="b"] .oc-docket__meta {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oc-muted);
}

/* ── 7. ABOUT ─────────────────────────────────────────────────── */
[data-design="b"] .oc-about {
  background: var(--oc-canvas);
  padding: clamp(64px, 8vw, 96px) clamp(20px, 4vw, 48px);
  border-bottom: 2px solid var(--oc-rule);
}

[data-design="b"] .oc-about__head {
  margin-bottom: var(--oc-space-bay);
}

[data-design="b"] .oc-about__kicker {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oc-muted);
  margin: 0 0 var(--oc-space-gap);
}

[data-design="b"] .oc-about__title {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  color: var(--oc-ink);
}

[data-design="b"] .oc-about__body {
  max-width: 64ch;
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-stub);
}

[data-design="b"] .oc-about__lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--oc-ink);
  margin: 0;
}

[data-design="b"] .oc-about__copy {
  font-size: 17px;
  line-height: 1.6;
  color: var(--oc-ink-2);
  margin: 0;
}

/* ── 8. PROCESS ─────────────────────────────────────────────────── */
[data-design="b"] .oc-process {
  background: var(--oc-paper);
  padding: clamp(64px, 8vw, 96px) clamp(20px, 4vw, 48px);
  border-bottom: 2px solid var(--oc-rule);
}

[data-design="b"] .oc-process__head {
  margin-bottom: var(--oc-space-bay);
}

[data-design="b"] .oc-process__kicker {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oc-muted);
  margin: 0 0 var(--oc-space-gap);
}

[data-design="b"] .oc-process__title {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  color: var(--oc-ink);
}

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

[data-design="b"] .oc-process__step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--oc-space-bay);
  align-items: start;
  padding: var(--oc-space-tile) 0;
  border-bottom: 2px solid var(--oc-soft);
}

[data-design="b"] .oc-process__step:last-child {
  border-bottom: none;
}

[data-design="b"] .oc-process__num {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--oc-stamp);
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid var(--oc-stamp);
  border-radius: var(--oc-radius-stamp);
  line-height: 1;
  min-width: 44px;
  text-align: center;
  background: var(--oc-paper);
}

[data-design="b"] .oc-process__detail {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-bite);
}

[data-design="b"] .oc-process__phase {
  font-family: var(--oc-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--oc-ink);
  display: block;
}

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

/* ── 9. REPEAT CTA ───────────────────────────────────────────────── */
[data-design="b"] .oc-repeat-cta {
  background: var(--oc-canvas);
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
  border-bottom: 2px solid var(--oc-rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--oc-space-block);
}

[data-design="b"] .oc-repeat-cta__label {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--oc-ink);
  margin: 0;
  max-width: 36ch;
}

/* ── 10. POINTER — E6 ────────────────────────────────────────────── */
/* HARD GATE: this is the IMMEDIATE preceding sibling of #funnel.
   Height: 48px rendered (≫ 8px gate).
   Opacity: 1 at all breakpoints.
   NOT a button — aria-hidden="true", pointer-events: none on the SVG.
   Animation register: dimension-line draw / T-square settle. */
[data-design="b"] .oc-pointer[data-mf-role="pointer"] {
  background: var(--oc-canvas);
  border-top: 2px solid var(--oc-rule);
  padding: 20px clamp(20px, 4vw, 48px) 0;
  /* Height floor: padding 20px top + SVG 32px = 52px ≫ 8px */
  opacity: 1;
  display: block;
}

[data-design="b"] .oc-pointer__inner {
  /* Inner wrapper — height locked at 32px SVG + 20px padding = 52px total */
  min-height: 32px;
  display: flex;
  align-items: center;
}

[data-design="b"] .oc-pointer__svg {
  width: 100%;
  height: 32px;
  display: block;
  overflow: visible;
}

/* Dimension line: draws left→right, then sustained slow stroke-dashoffset drift */
[data-design="b"] .oc-ptr-line {
  stroke: var(--oc-stamp);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation:
    oc-b-ptr-draw  0.9s var(--oc-ease-decide) 0.1s forwards,
    oc-b-ptr-drift 8s   var(--oc-ease-scrub)  1.1s infinite;
}

@keyframes oc-b-ptr-draw {
  to { stroke-dashoffset: 0; }
}

/* Sustained ambient: slow stroke-dashoffset oscillation — perceptible motion at rest */
@keyframes oc-b-ptr-drift {
  0%   { stroke-dashoffset: 0;   opacity: 1; }
  50%  { stroke-dashoffset: -40; opacity: 0.7; }
  100% { stroke-dashoffset: 0;   opacity: 1; }
}

/* Tick marks — appear after line */
[data-design="b"] .oc-ptr-tick {
  stroke: var(--oc-stamp);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: oc-b-ptr-draw 0.4s var(--oc-ease-decide) 0.9s forwards;
}

[data-design="b"] .oc-ptr-tick--r {
  animation-delay: 1.0s;
}

/* Label background rect */
[data-design="b"] .oc-ptr-label-bg {
  fill: var(--oc-stamp);
  opacity: 0;
  animation: oc-b-fade-in 0.3s var(--oc-ease-decide) 1.1s forwards,
             oc-b-bp-ambient 9s var(--oc-ease-scrub) 1.4s infinite;
}

/* Label text */
[data-design="b"] .oc-ptr-label-text {
  font-family: var(--oc-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-anchor: middle;
  fill: var(--oc-stamp-on);
  dominant-baseline: middle;
  text-transform: uppercase;
  opacity: 0;
  animation: oc-b-fade-in 0.3s var(--oc-ease-decide) 1.2s forwards,
             oc-b-bp-ambient 9s var(--oc-ease-scrub) 1.4s infinite;
}

/* ── 11. FUNNEL — E5 ────────────────────────────────────────────── */
[data-design="b"] .oc-funnel {
  background: var(--oc-canvas);
  padding: clamp(64px, 8vw, 96px) clamp(20px, 4vw, 48px);
  border-bottom: 2px solid var(--oc-rule);
}

[data-design="b"] .oc-funnel__head {
  margin-bottom: var(--oc-space-bay);
}

[data-design="b"] .oc-funnel__kicker {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oc-muted);
  margin: 0 0 var(--oc-space-gap);
}

[data-design="b"] .oc-funnel__title {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  color: var(--oc-ink);
  max-width: 22ch;
}

[data-design="b"] .oc-funnel__progress {
  height: 4px;
  background: var(--oc-soft);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: var(--oc-space-gap);
}

[data-design="b"] .oc-funnel__progress-bar {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--oc-stamp);
  transition: width var(--oc-dur-settle) var(--oc-ease-decide);
}

[data-design="b"] .oc-funnel__progress-bar[data-step="2"] { width: 40%; }
[data-design="b"] .oc-funnel__progress-bar[data-step="3"] { width: 60%; }
[data-design="b"] .oc-funnel__progress-bar[data-step="4"] { width: 80%; }
[data-design="b"] .oc-funnel__progress-bar[data-step="5"] { width: 100%; }

[data-design="b"] .oc-funnel__counter {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--oc-muted);
  margin: 0 0 var(--oc-space-bay);
}

[data-design="b"] .oc-funnel__form {
  background: var(--oc-paper);
  border: 2px solid var(--oc-rule);
  border-radius: var(--oc-radius-lg);
  padding: var(--oc-space-tile);
  position: relative;
  overflow: hidden;
  max-width: 720px;
}

/* Steps: hidden via display:none (never opacity:0) */
[data-design="b"] .oc-funnel__step {
  border: 0;
  padding: 0;
  margin: 0;
  display: none;
  animation: oc-b-step-in var(--oc-dur-settle) var(--oc-ease-stamp);
}

[data-design="b"] .oc-funnel__step[aria-hidden="false"] {
  display: block;
}

@keyframes oc-b-step-in {
  0%   { opacity: 0; transform: translateX(24px) scale(0.98); }
  60%  { opacity: 1; transform: translateX(0) scale(1.005); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

[data-design="b"] .oc-funnel__legend {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.01em;
  color: var(--oc-ink);
  margin: 0 0 var(--oc-space-bay);
  padding: 0;
  max-width: 42ch;
  display: block;
}

[data-design="b"] .oc-funnel__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--oc-space-stub);
  margin-bottom: var(--oc-space-bay);
}

/* Tile radio */
[data-design="b"] .oc-tile-radio {
  display: block;
  cursor: pointer;
}

[data-design="b"] .oc-tile-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

[data-design="b"] .oc-tile-radio__face {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--oc-space-stub);
  background: var(--oc-paper);
  color: var(--oc-ink);
  border: 2px solid var(--oc-rule);
  border-radius: var(--oc-radius-md);
  position: relative;
  min-height: 64px;
  transition:
    transform    var(--oc-dur-stamp) var(--oc-ease-stamp),
    background   var(--oc-dur-stamp) var(--oc-ease-stamp),
    color        var(--oc-dur-stamp) var(--oc-ease-stamp);
}

[data-design="b"] .oc-tile-radio__face::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--oc-stamp-on);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity   var(--oc-dur-stamp) var(--oc-ease-stamp),
    transform var(--oc-dur-stamp) var(--oc-ease-stamp);
}

[data-design="b"] .oc-tile-radio:hover .oc-tile-radio__face {
  transform: translateY(-2px);
  background: var(--oc-soft);
}

[data-design="b"] .oc-tile-radio input:focus-visible + .oc-tile-radio__face {
  box-shadow: 0 0 0 3px rgba(26,71,184,0.32);
}

[data-design="b"] .oc-tile-radio input:checked + .oc-tile-radio__face {
  background: var(--oc-stamp);
  color: var(--oc-stamp-on);
  border-color: var(--oc-stamp);
  transform: scale(1.02) translateY(-1px);
}

[data-design="b"] .oc-tile-radio input:checked + .oc-tile-radio__face::after {
  opacity: 1;
  transform: scale(1);
}

[data-design="b"] .oc-tile-radio__title {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.005em;
}

[data-design="b"] .oc-tile-radio__meta {
  font-family: var(--oc-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--oc-muted);
}

[data-design="b"] .oc-tile-radio input:checked + .oc-tile-radio__face .oc-tile-radio__meta {
  color: rgba(255,255,255,0.78);
}

/* Form fields */
[data-design="b"] .oc-field {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-bite);
  margin-bottom: var(--oc-space-stub);
}

[data-design="b"] .oc-field__label {
  font-family: var(--oc-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--oc-ink);
}

[data-design="b"] .oc-field__input,
[data-design="b"] .oc-field__textarea {
  font-family: var(--oc-font-body);
  font-size: 17px;
  background: transparent;
  color: var(--oc-ink);
  border: 0;
  border-bottom: 2px solid var(--oc-rule);
  border-radius: 0;
  padding: 8px 0;
  outline: none;
  transition: border-color var(--oc-dur-snap) var(--oc-ease-decide);
  width: 100%;
}

[data-design="b"] .oc-field__textarea {
  resize: vertical;
  min-height: 100px;
}

[data-design="b"] .oc-field__input:focus,
[data-design="b"] .oc-field__textarea:focus {
  border-bottom-color: var(--oc-stamp);
  border-bottom-width: 3px;
}

[data-design="b"] .oc-field__help {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  color: var(--oc-muted);
}

/* Funnel nav */
[data-design="b"] .oc-funnel__nav {
  display: flex;
  gap: var(--oc-space-gap);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--oc-space-bay);
}

/* Buttons */
[data-design="b"] .oc-btn {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.005em;
  padding: 14px 22px;
  border-radius: var(--oc-radius-md);
  border: 2px solid var(--oc-rule);
  cursor: pointer;
  background: var(--oc-paper);
  color: var(--oc-ink);
  box-shadow: var(--oc-elev-stamp);
  transform: translateY(0);
  min-height: 44px;
  transition:
    transform    var(--oc-dur-snap) var(--oc-ease-decide),
    box-shadow   var(--oc-dur-snap) var(--oc-ease-decide),
    background   var(--oc-dur-snap) var(--oc-ease-decide);
}

[data-design="b"] .oc-btn--primary {
  background: var(--oc-stamp);
  color: var(--oc-stamp-on);
}

[data-design="b"] .oc-btn--ghost {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  color: var(--oc-ink-2);
}

[data-design="b"] .oc-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--oc-rule);
}

[data-design="b"] .oc-btn--ghost:hover:not(:disabled) {
  background: var(--oc-soft);
  box-shadow: none;
}

[data-design="b"] .oc-btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 var(--oc-rule);
}

[data-design="b"] .oc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Verdict */
[data-design="b"] .oc-funnel__verdict {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-stub);
  padding: var(--oc-space-tile);
  border-radius: var(--oc-radius-md);
  border: 2px solid var(--oc-rule);
}

[data-design="b"] .oc-funnel__verdict--ok {
  background: var(--oc-stamp);
  color: var(--oc-stamp-on);
  border-color: var(--oc-stamp);
}

[data-design="b"] .oc-funnel__verdict-stamp {
  align-self: flex-start;
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 2px solid currentColor;
  border-radius: var(--oc-radius-stamp);
  background: rgba(255,255,255,0.12);
}

[data-design="b"] .oc-funnel__verdict-title {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 36px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
}

[data-design="b"] .oc-funnel__verdict-body {
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
}

/* Below-funnel trust */
[data-design="b"] .oc-funnel__trust {
  margin-top: var(--oc-space-bay);
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-bite);
  max-width: 720px;
}

[data-design="b"] .oc-funnel__trust-line {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--oc-muted);
  margin: 0;
}

[data-design="b"] .oc-funnel__trust-line--note {
  color: var(--oc-ink-2);
  font-family: var(--oc-font-body);
  font-size: 15px;
  letter-spacing: 0;
}

[data-design="b"] .oc-funnel__phone,
[data-design="b"] .oc-funnel__email {
  color: var(--oc-stamp);
  text-decoration: underline;
}

/* ── 12. FOOTER ─────────────────────────────────────────────────── */
[data-design="b"] .oc-footer {
  background: var(--oc-ink);
  color: var(--oc-canvas);
  border-top: 2px solid var(--oc-rule);
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
}

[data-design="b"] .oc-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--oc-space-bay);
  max-width: 1200px;
}

[data-design="b"] .oc-footer__name {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1;
  display: block;
  color: var(--oc-canvas);
}

[data-design="b"] .oc-footer__tagline {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oc-muted);
  display: block;
  margin-top: var(--oc-space-stub);
}

[data-design="b"] .oc-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-stub);
}

[data-design="b"] .oc-footer__link {
  font-family: var(--oc-font-body);
  font-size: 17px;
  color: var(--oc-canvas);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--oc-dur-snap) var(--oc-ease-decide);
}

[data-design="b"] .oc-footer__link:hover {
  color: var(--oc-stamp);
}

[data-design="b"] .oc-footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-stub);
  align-items: flex-end;
}

[data-design="b"] .oc-footer__legal {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--oc-muted);
  margin: 0;
  text-align: right;
  max-width: 40ch;
  line-height: 1.5;
}

[data-design="b"] .oc-footer__copy {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--oc-muted);
  margin: 0;
  text-align: right;
}

/* ── 13. REDUCED-MOTION FALLBACKS ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .oc-scrubber__head { animation: none; transform: translateX(40%); }
  [data-design="b"].oc-drawer { transition: none; }
  [data-design="b"] .oc-nav-link::after { transition: none; }
  [data-design="b"] .oc-cta { animation: none; }
  [data-design="b"] .oc-cta:hover { transform: none; }
  [data-design="b"] .oc-cta__arrow { transition: none; }
  [data-design="b"] .oc-bp-line,
  [data-design="b"] .oc-bp-rect,
  [data-design="b"] .oc-bp-dim,
  [data-design="b"] .oc-bp-dim--tick {
    animation: none;
    stroke-dashoffset: 0;
  }
  [data-design="b"] .oc-bp-dim-label,
  [data-design="b"] .oc-bp-detail { animation: none; opacity: 1; }
  [data-design="b"] .oc-docket__row { animation: none; }
  [data-design="b"] .oc-docket__num { transition: none; }
  [data-design="b"] .oc-funnel__step { animation: none; }
  [data-design="b"] .oc-funnel__progress-bar { transition: none; }
  [data-design="b"] .oc-tile-radio__face { transition: none; }
  [data-design="b"] .oc-tile-radio__face::after { transition: none; }
  [data-design="b"] .oc-ptr-line,
  [data-design="b"] .oc-ptr-tick,
  [data-design="b"] .oc-ptr-label-bg,
  [data-design="b"] .oc-ptr-label-text {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* ── 14. RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 960px) {
  [data-design="b"] .oc-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  [data-design="b"] .oc-footer__meta {
    grid-column: 1 / -1;
    align-items: flex-start;
  }
  [data-design="b"] .oc-footer__legal,
  [data-design="b"] .oc-footer__copy {
    text-align: left;
  }
}

@media (max-width: 768px) {
  [data-design="b"] .oc-docket__row {
    grid-template-columns: 52px 1fr;
    row-gap: 4px;
    gap: var(--oc-space-stub);
  }
  [data-design="b"] .oc-docket__meta {
    grid-column: 1 / -1;
  }
  [data-design="b"] .oc-docket__num { font-size: 18px; min-width: 44px; }
  [data-design="b"] .oc-funnel__form { padding: var(--oc-space-stub); }
  [data-design="b"] .oc-funnel__tiles { grid-template-columns: 1fr; }
  [data-design="b"] .oc-footer__inner { grid-template-columns: 1fr; gap: var(--oc-space-bay); }
  [data-design="b"] .oc-footer__meta { align-items: flex-start; }
  [data-design="b"] .oc-footer__legal,
  [data-design="b"] .oc-footer__copy { text-align: left; max-width: 100%; }
  [data-design="b"] .oc-process__step {
    grid-template-columns: 52px 1fr;
    gap: var(--oc-space-stub);
  }
}

@media (max-width: 560px) {
  [data-design="b"] .oc-header__bar { padding: 12px 16px; }
  [data-design="b"] .oc-logo__mark { font-size: 16px; }
  [data-design="b"] .oc-hero__content { padding: 80px 16px 64px; }
  [data-design="b"] .oc-repeat-cta { flex-direction: column; }
}

@media (max-width: 380px) {
  [data-design="b"] .oc-logo__mark { font-size: 14px; }
}

/* ── MOBILE HARD-CLIP GUARDS (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; }