/* ============================================================
   TRIBUNAL — SLOT B — San Carlos Construction LLC
   All selectors scoped to [data-design="b"].dq-design
   Keyframes prefixed tb-
   Design tokens exposed on [data-design="b"]
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@700;900&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
[data-design="b"] {
  --design-b-primary: #F5E600;

  --tb-ink:        #0E0E0C;
  --tb-ink-soft:   #1A1A18;
  --tb-bone:       #F4F2EC;
  --tb-bone-soft:  #E6E2D7;
  --tb-mute:       #7A766C;
  --tb-signal:     #F5E600;
  --tb-signal-deep:#C9BC00;
  --tb-blood:      #C8201E;
  --tb-rule:       rgba(244,242,236,.22);
  --tb-rule-bone:  rgba(14,14,12,.22);

  --tb-mono: "JetBrains Mono", "Courier New", monospace;

  --tb-ease-hard:   cubic-bezier(.6,0,.4,1);
  --tb-ease-march:  linear;
  --tb-ease-settle: cubic-bezier(.2,.7,.3,1);

  --tb-d-snap:    120ms;
  --tb-d-press:   100ms;
  --tb-d-register:200ms;
  --tb-d-settle:  400ms;

  --tb-hair:  1px;  --tb-tight: 4px;  --tb-snug:  8px;
  --tb-margin:16px; --tb-gutter:24px; --tb-bay:   40px;
  --tb-stanza:64px; --tb-chapter:96px;--tb-folio: 144px;

  --tb-r-0: 0;
  --tb-r-1: 2px;
}

/* ── LAYOUT FLOOR (scoped to article — no chrome leak) ─── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="b"].dq-design * { min-width: 0; }
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

/* ── RESET (scoped) ─────────────────────────────────────── */
[data-design="b"].dq-design *,
[data-design="b"].dq-design *::before,
[data-design="b"].dq-design *::after { box-sizing: border-box; }
[data-design="b"] {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--tb-ink);
  color: var(--tb-bone);
  -webkit-font-smoothing: antialiased;
}
[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 p   { margin: 0; }
[data-design="b"].dq-design fieldset { border: 0; margin: 0; padding: 0; }
[data-design="b"].dq-design legend  { padding: 0; }
[data-design="b"].dq-design a { color: inherit; }

/* ═══════════════════════════════════════════════════════════
   E1 — HEADER (signal marquee)
   Three things: logo · marquee · hamburger
════════════════════════════════════════════════════════════ */
[data-design="b"] .tb-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--tb-ink);
  border-bottom: 1px solid var(--tb-rule);
  isolation: isolate;
}
[data-design="b"] .tb-header__marquee {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--tb-signal) 40%, var(--tb-signal) 60%, transparent);
  background-size: 240px 100%; background-repeat: no-repeat;
  background-position: -240px 0;
  animation: tb-header-marquee 27s var(--tb-ease-march) infinite;
}
@keyframes tb-header-marquee {
  0%   { background-position: -240px 0; }
  85%  { background-position: calc(100% + 240px) 0; }
  100% { background-position: calc(100% + 240px) 0; }
}
[data-design="b"] .tb-header__bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px,4vw,56px);
  max-width: 1480px; margin: 0 auto;
}
[data-design="b"] .tb-logo {
  text-decoration: none; color: var(--tb-bone);
  display: inline-flex; align-items: baseline; gap: 16px; white-space: nowrap;
}
[data-design="b"] .tb-logo__mark {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(18px,2.2vw,26px); letter-spacing: -.01em; text-transform: uppercase;
}
[data-design="b"] .tb-logo__kind {
  font-family: var(--tb-mono); font-size: 10.5px; letter-spacing: .28em;
  color: var(--tb-mute); text-transform: uppercase;
}
@media (max-width: 560px) { [data-design="b"] .tb-logo__kind { display: none; } }

[data-design="b"] .tb-menu-btn {
  appearance: none; background: var(--tb-bone); color: var(--tb-ink); border: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 18px; height: 44px; min-width: 44px; cursor: pointer;
  font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  transition: background var(--tb-d-snap) var(--tb-ease-hard),
              color var(--tb-d-snap) var(--tb-ease-hard);
}
[data-design="b"] .tb-menu-btn__mark {
  width: 12px; height: 12px; background: var(--tb-signal); display: inline-block; flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .tb-menu-btn:hover { background: var(--tb-signal); color: var(--tb-ink); }
  [data-design="b"] .tb-menu-btn:hover .tb-menu-btn__mark { background: var(--tb-ink); }
}
[data-design="b"] .tb-menu-btn:focus-visible { outline: 2px solid var(--tb-signal); outline-offset: 3px; }

/* Drawer */
[data-design="b"] .tb-drawer {
  position: fixed; inset: 0; z-index: 35; background: var(--tb-ink);
  transform: translateY(-100%);
  transition: transform var(--tb-d-settle) var(--tb-ease-hard);
  padding-top: 84px; overflow-y: auto;
}
[data-design="b"] .tb-drawer[hidden] { display: block; } /* override hidden so transition works */
[data-design="b"] .tb-drawer[data-open="false"] { transform: translateY(-100%); visibility: hidden; }
[data-design="b"] .tb-drawer[data-open="true"]  { transform: translateY(0); visibility: visible; }
[data-design="b"] .tb-drawer__inner {
  max-width: 1480px; margin: 0 auto;
  padding: clamp(32px,5vw,72px) clamp(20px,4vw,56px);
  display: grid; gap: 4px;
}
[data-design="b"] .tb-drawer a {
  display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: baseline;
  padding: 20px 0; color: var(--tb-bone); text-decoration: none;
  border-bottom: 1px solid var(--tb-rule); position: relative;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(28px,5vw,64px); text-transform: uppercase;
  letter-spacing: -.02em; line-height: 1;
}
[data-design="b"] .tb-drawer a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: var(--tb-signal);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--tb-d-snap) var(--tb-ease-hard); z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .tb-drawer a:hover { color: var(--tb-ink); }
  [data-design="b"] .tb-drawer a:hover::before { clip-path: inset(0 0 0 0); }
  [data-design="b"] .tb-drawer a:hover .tb-drawer__num,
  [data-design="b"] .tb-drawer a:hover .tb-drawer__label { transform: translateX(24px); }
}
[data-design="b"] .tb-drawer__num,
[data-design="b"] .tb-drawer__label { transition: transform var(--tb-d-snap) var(--tb-ease-hard); }
[data-design="b"] .tb-drawer__num {
  font-family: var(--tb-mono); font-size: 14px; color: var(--tb-mute);
}
[data-design="b"] .tb-drawer__contact {
  display: flex; flex-direction: column; gap: 8px;
  padding: 28px 0 0; grid-column: 1 / -1;
}
[data-design="b"] .tb-drawer__phone,
[data-design="b"] .tb-drawer__email {
  font-family: "Inter", sans-serif; font-size: 16px; color: var(--tb-bone-soft);
  text-decoration: none; padding: 8px 0;
  font-size: clamp(14px,2vw,18px);
}

/* ═══════════════════════════════════════════════════════════
   E3 — HERO (unique animated backdrop: dimension-line drafting)
   One animated layer. No directional primitive. Ambient ongoing.
════════════════════════════════════════════════════════════ */
[data-design="b"] .tb-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--tb-ink); color: var(--tb-bone);
  padding: clamp(80px,10vw,144px) clamp(20px,4vw,56px) clamp(96px,12vw,160px);
  border-bottom: 1px solid var(--tb-rule);
  min-height: 70vh;
}

/* ── Blueprint backdrop (the ONE animated layer) ── */
[data-design="b"] .tb-hero__backdrop {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
[data-design="b"] .tb-blueprint {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Grid lines — soft permanent scaffold */
[data-design="b"] .bp-grid-h,
[data-design="b"] .bp-grid-v {
  stroke: rgba(245,230,0,.10);
  stroke-width: 1;
}

/* House outline — draws in via strokeDashoffset, then persists */
[data-design="b"] .bp-outline {
  fill: none;
  stroke: rgba(244,242,236,.55);
  stroke-width: 1.5;
  stroke-linecap: square;
}
[data-design="b"] .bp-outline-1 {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: tb-bp-draw1 2.0s 0.3s var(--tb-ease-settle) forwards,
             tb-bp-pulse 8s 3s var(--tb-ease-march) infinite;
}
[data-design="b"] .bp-outline-2 {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: tb-bp-draw2 0.8s 2.1s var(--tb-ease-settle) forwards,
             tb-bp-pulse 8s 3.2s var(--tb-ease-march) infinite;
}
[data-design="b"] .bp-outline-3 {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: tb-bp-draw3 0.6s 2.8s var(--tb-ease-settle) forwards,
             tb-bp-pulse 8s 3.5s var(--tb-ease-march) infinite;
}
@keyframes tb-bp-draw1 { to { stroke-dashoffset: 0; } }
@keyframes tb-bp-draw2 { to { stroke-dashoffset: 0; } }
@keyframes tb-bp-draw3 { to { stroke-dashoffset: 0; } }
@keyframes tb-bp-pulse {
  0%,100% { opacity: 0.55; }
  50%     { opacity: 0.80; }
}

/* Detail rectangles (windows, door) — appear after outline */
[data-design="b"] .bp-detail {
  fill: none;
  stroke: rgba(244,242,236,.40);
  stroke-width: 1;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}
[data-design="b"] .bp-detail-1 { animation: tb-bp-detail 0.5s 3.0s var(--tb-ease-hard) forwards; }
[data-design="b"] .bp-detail-2 { animation: tb-bp-detail 0.5s 3.3s var(--tb-ease-hard) forwards; }
[data-design="b"] .bp-detail-3 { animation: tb-bp-detail 0.5s 3.6s var(--tb-ease-hard) forwards; }
@keyframes tb-bp-detail { to { stroke-dashoffset: 0; } }

/* Dimension lines — signal yellow; appear after details; sustained slow blink */
[data-design="b"] .bp-dim,
[data-design="b"] .bp-dim-tick,
[data-design="b"] .bp-scale-bar,
[data-design="b"] .bp-scale-tick {
  stroke: var(--tb-signal);
  stroke-width: 1;
  opacity: 0;
  animation: tb-bp-dim-in 0.3s 4.0s var(--tb-ease-hard) forwards;
}
[data-design="b"] .bp-dim-h1   { animation-delay: 4.0s; }
[data-design="b"] .bp-dim-v1   { animation-delay: 4.3s; }
[data-design="b"] .bp-scale-bar{ animation-delay: 4.6s; }
[data-design="b"] .bp-dim-tick:nth-of-type(1) { animation-delay: 4.0s; }
[data-design="b"] .bp-dim-tick:nth-of-type(2) { animation-delay: 4.0s; }
[data-design="b"] .bp-dim-tick:nth-of-type(3) { animation-delay: 4.3s; }
[data-design="b"] .bp-dim-tick:nth-of-type(4) { animation-delay: 4.3s; }
[data-design="b"] .bp-scale-tick:nth-of-type(1) { animation-delay: 4.6s; }
[data-design="b"] .bp-scale-tick:nth-of-type(2) { animation-delay: 4.6s; }
[data-design="b"] .bp-scale-tick:nth-of-type(3) { animation-delay: 4.6s; }
@keyframes tb-bp-dim-in { to { opacity: 1; } }

/* Dimension labels — signal yellow text */
[data-design="b"] .bp-dim-label {
  font-family: var(--tb-mono); font-size: 12px;
  fill: var(--tb-signal); letter-spacing: .08em; text-anchor: middle;
  opacity: 0;
  animation: tb-bp-dim-in 0.3s 4.2s var(--tb-ease-hard) forwards;
}
[data-design="b"] .bp-dim-label-v { text-anchor: start; }

/* North circle + label */
[data-design="b"] .bp-north-circle {
  fill: none; stroke: rgba(244,242,236,.30); stroke-width: 1;
  opacity: 0;
  animation: tb-bp-dim-in 0.4s 5.0s var(--tb-ease-hard) forwards;
}
[data-design="b"] .bp-north-label {
  font-family: "Archivo Black", sans-serif; font-size: 18px;
  fill: rgba(244,242,236,.50); text-anchor: middle;
  opacity: 0;
  animation: tb-bp-dim-in 0.4s 5.0s var(--tb-ease-hard) forwards;
}

/* Sustained ambient: slow scan line traveling across the blueprint */
[data-design="b"] .tb-hero__backdrop::after {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0; width: 180px;
  background: linear-gradient(90deg, transparent, rgba(245,230,0,.06) 50%, transparent);
  animation: tb-bp-scan 12s 5s var(--tb-ease-march) infinite;
  pointer-events: none;
}
@keyframes tb-bp-scan {
  0%   { transform: translateX(-180px); }
  100% { transform: translateX(100vw); }
}

/* Hero inner layout */
[data-design="b"] .tb-hero__inner {
  position: relative; z-index: 2; max-width: 1480px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,320px);
  gap: clamp(40px,6vw,96px);
  align-items: end;
}
@media (max-width: 880px) {
  [data-design="b"] .tb-hero__inner { grid-template-columns: 1fr; }
}

[data-design="b"] .tb-eyebrow {
  font-family: var(--tb-mono); font-size: 11px; letter-spacing: .28em;
  color: var(--tb-mute); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: var(--tb-bay);
}
[data-design="b"] .tb-eyebrow__sq {
  width: 10px; height: 10px; background: var(--tb-signal); display: inline-block; flex-shrink: 0;
}

[data-design="b"] .tb-hero__title {
  font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(52px,9vw,140px); line-height: .92; letter-spacing: -.04em;
  margin: 0 0 var(--tb-stanza); text-transform: uppercase;
  max-width: 12ch;
}
[data-design="b"] .tb-hero__title em { color: var(--tb-signal); font-style: normal; }

[data-design="b"] .tb-hero__lede {
  font-family: "Inter", sans-serif;
  font-size: clamp(16px,1.4vw,20px); line-height: 1.55;
  color: var(--tb-bone-soft); margin: 0 0 var(--tb-stanza); max-width: 52ch;
}

[data-design="b"] .tb-hero__actions {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
}
[data-design="b"] .tb-hero__meta {
  font-family: var(--tb-mono); font-size: 11px; letter-spacing: .22em;
  color: var(--tb-bone-soft); text-transform: uppercase;
  padding-left: 18px; border-left: 1px solid var(--tb-rule); line-height: 1.6;
}

/* Docket / credentials sidebar */
[data-design="b"] .tb-hero__docket {
  border: 1px solid var(--tb-rule); padding: 24px;
}
[data-design="b"] .tb-hero__docket-label {
  font-family: "Archivo Black", sans-serif; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--tb-rule);
}
[data-design="b"] .tb-hero__docket-row {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--tb-rule);
  font-family: var(--tb-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tb-bone-soft);
}
[data-design="b"] .tb-hero__docket-row:last-child { border-bottom: 0; }
[data-design="b"] .tb-hero__docket-num { color: var(--tb-signal); }
[data-design="b"] .tb-hero__docket-status { color: var(--tb-mute); }

/* ═══════════════════════════════════════════════════════════
   E2 — CTA (block button with signal edge-march)
════════════════════════════════════════════════════════════ */
[data-design="b"] .tb-cta {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px 21px;
  background: var(--tb-bone); color: var(--tb-ink);
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; border: 0;
  transition: transform var(--tb-d-press) var(--tb-ease-hard),
              background var(--tb-d-snap) var(--tb-ease-hard);
  min-height: 44px;
}
[data-design="b"] .tb-cta__arrow {
  font-size: 10px; line-height: 1; color: var(--tb-ink);
  transition: transform var(--tb-d-snap) var(--tb-ease-hard);
}
[data-design="b"] .tb-cta__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--tb-signal); overflow: hidden;
}
[data-design="b"] .tb-cta__rule::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 60px;
  background: var(--tb-ink);
  animation: tb-cta-march 4.4s var(--tb-ease-march) infinite;
}
@keyframes tb-cta-march {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(calc(100vw)); }
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .tb-cta:hover { background: var(--tb-signal); }
  [data-design="b"] .tb-cta:hover .tb-cta__arrow { transform: translateX(4px); }
}
[data-design="b"] .tb-cta:active { transform: translateY(1px); }
[data-design="b"] .tb-cta:focus-visible { outline: 2px solid var(--tb-signal); outline-offset: 3px; }

/* Dark variant — bone text on ink */
[data-design="b"] .tb-cta--ink {
  background: var(--tb-ink); color: var(--tb-bone);
  border: 1px solid var(--tb-rule);
}
[data-design="b"] .tb-cta--ink .tb-cta__arrow { color: var(--tb-signal); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .tb-cta--ink:hover { background: var(--tb-ink-soft); }
}

/* ═══════════════════════════════════════════════════════════
   E6 — POINTER (drafted-measured vertical bar)
   IMMEDIATELY before #funnel. Visible at first paint.
════════════════════════════════════════════════════════════ */
[data-design="b"] .tb-pointer {
  position: relative; z-index: 5;
  background: var(--tb-ink);
  max-width: 1480px; margin: 0 auto;
  padding: 32px clamp(20px,4vw,56px) 0;
  display: flex; justify-content: flex-start;
  pointer-events: none;
}
[data-design="b"] .tb-pointer__inner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  pointer-events: auto;
  padding-left: clamp(20px,4vw,56px);
}
[data-design="b"] .tb-pointer__label {
  font-family: var(--tb-mono); font-size: 11px; letter-spacing: .28em;
  color: var(--tb-bone-soft); text-transform: uppercase;
  opacity: 1;
  animation: tb-pointer-label-in 200ms 1600ms var(--tb-ease-hard) both;
}
@keyframes tb-pointer-label-in {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}
[data-design="b"] .tb-pointer__bar {
  position: relative; width: 6px; height: 120px;
  background: var(--tb-signal);
  transform-origin: top center;
  animation: tb-pointer-snap 120ms 1400ms var(--tb-ease-hard) both;
}
@keyframes tb-pointer-snap {
  from { transform: scaleY(0.3); opacity: 0.5; }
  to   { transform: scaleY(1); opacity: 1; }
}
[data-design="b"] .tb-pointer__tick {
  position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: var(--tb-ink);
  animation: tb-pointer-tick 4.4s 2000ms var(--tb-ease-march) infinite;
}
@keyframes tb-pointer-tick {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(120px - 12px)); }
}

/* ═══════════════════════════════════════════════════════════
   E5 — FUNNEL (5-step project intake)
════════════════════════════════════════════════════════════ */
[data-design="b"] .tb-funnel-section {
  background: var(--tb-ink); color: var(--tb-bone);
  padding: clamp(80px,11vw,144px) clamp(20px,4vw,56px);
  border-bottom: 1px solid var(--tb-rule);
}
[data-design="b"] .tb-funnel-section__head {
  max-width: 760px; margin: 0 auto var(--tb-stanza); text-align: left;
}
[data-design="b"] .tb-funnel-section__head h2 {
  font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(36px,6vw,72px); line-height: .94; letter-spacing: -.03em;
  margin: 0 0 16px; text-transform: uppercase;
}
[data-design="b"] .tb-funnel-section__head h2 em { color: var(--tb-signal); font-style: normal; }
[data-design="b"] .tb-funnel-section__head p {
  font-family: "Inter", sans-serif; font-size: 17px;
  color: var(--tb-bone-soft); margin: 0; max-width: 50ch;
}

[data-design="b"] .tb-funnel {
  max-width: 720px; margin: 0 auto;
  background: var(--tb-bone); color: var(--tb-ink);
  box-shadow: 3px 3px 0 var(--tb-signal), 6px 6px 0 var(--tb-ink-soft);
}
[data-design="b"] .tb-funnel__progress {
  display: flex; align-items: center; gap: 24px;
  padding: 18px 28px; border-bottom: 1px solid var(--tb-rule-bone);
}
[data-design="b"] .tb-funnel__progress-num {
  font-family: var(--tb-mono); font-size: 11px; letter-spacing: .22em;
  color: var(--tb-mute); text-transform: uppercase;
}
[data-design="b"] .tb-funnel__progress-blocks {
  display: inline-flex; gap: 4px; flex: 1; max-width: 220px;
}
[data-design="b"] .tb-funnel__progress-blocks span {
  flex: 1; height: 6px; background: rgba(14,14,12,.12);
  transition: background 100ms var(--tb-ease-hard);
}
[data-design="b"] .tb-funnel__progress-blocks span.tb-on { background: var(--tb-signal); }
[data-design="b"] .tb-funnel__steps {
  position: relative; padding: clamp(28px,5vw,56px); min-height: 460px; overflow: hidden;
}
[data-design="b"] .tb-funnel__step {
  position: absolute; inset: clamp(28px,5vw,56px);
  opacity: 0; pointer-events: none; transform: translateX(12px);
  transition: opacity 200ms var(--tb-ease-hard), transform 100ms var(--tb-ease-hard);
}
[data-design="b"] .tb-funnel__step[data-active="true"] {
  opacity: 1; pointer-events: auto; transform: translateX(0);
}
/* Confirmation step — controlled via display:none/block in JS, not opacity */
[data-design="b"] .tb-funnel__done {
  position: absolute; inset: clamp(28px,5vw,56px);
  opacity: 1; pointer-events: none;
}
[data-design="b"] .tb-funnel__done.tb-active {
  pointer-events: auto;
}
[data-design="b"] .tb-funnel__step h3 {
  font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(22px,3.4vw,34px); line-height: 1.0; letter-spacing: -.02em;
  margin: 0 0 8px; text-transform: uppercase;
}
[data-design="b"] .tb-funnel__step p {
  font-family: "Inter", sans-serif; font-size: 15px;
  color: var(--tb-ink-soft); margin: 0 0 24px;
}
[data-design="b"] .tb-funnel__options {
  display: grid; gap: 0; border: 1px solid var(--tb-ink);
}
[data-design="b"] .tb-opt {
  appearance: none; background: transparent; color: var(--tb-ink);
  border: 0; border-bottom: 1px solid var(--tb-rule-bone);
  padding: 16px 20px; text-align: left;
  font-family: "Inter", sans-serif; font-size: 15px; font-weight: 500;
  display: grid; grid-template-columns: 50px 1fr; align-items: baseline; gap: 14px;
  cursor: pointer;
  transition: background var(--tb-d-snap) var(--tb-ease-hard);
  min-height: 44px;
}
[data-design="b"] .tb-opt:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .tb-opt:hover { background: var(--tb-signal); }
  [data-design="b"] .tb-opt:hover .tb-opt__num { color: var(--tb-ink); }
}
[data-design="b"] .tb-opt:focus-visible { outline: 2px solid var(--tb-signal); outline-offset: -2px; }
[data-design="b"] .tb-opt__num {
  font-family: var(--tb-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--tb-mute); text-transform: uppercase;
}

/* Step 5 fields */
[data-design="b"] .tb-funnel__field {
  display: grid; gap: 6px; margin-bottom: 16px;
}
[data-design="b"] .tb-funnel__field label {
  font-family: var(--tb-mono); font-size: 10.5px; letter-spacing: .22em;
  color: var(--tb-mute); text-transform: uppercase;
}
[data-design="b"] .tb-funnel__field input,
[data-design="b"] .tb-funnel__field textarea {
  background: transparent; color: var(--tb-ink); border: 0;
  border-bottom: 1px solid var(--tb-ink);
  padding: 10px 0; font-family: "Inter", sans-serif; font-size: 16px; outline: none;
  transition: border-color var(--tb-d-snap) var(--tb-ease-hard),
              border-bottom-width var(--tb-d-snap) var(--tb-ease-hard);
  width: 100%;
}
[data-design="b"] .tb-funnel__field input:focus,
[data-design="b"] .tb-funnel__field textarea:focus {
  border-bottom-width: 2px; border-color: var(--tb-signal);
}
[data-design="b"] .tb-funnel__field textarea { resize: vertical; }
[data-design="b"] .tb-funnel__actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 24px; flex-wrap: wrap;
}
[data-design="b"] .tb-funnel__back {
  appearance: none; background: transparent; border: 0; color: var(--tb-mute);
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; cursor: pointer; padding: 8px 0;
  min-height: 44px;
  transition: color var(--tb-d-snap) var(--tb-ease-hard);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .tb-funnel__back:hover { color: var(--tb-ink); }
}

/* Confirmation */
[data-design="b"] .tb-funnel__matter {
  display: flex; align-items: baseline; gap: 14px; padding: 14px 18px;
  background: var(--tb-signal); color: var(--tb-ink); margin-bottom: 24px;
  font-family: var(--tb-mono); font-size: 14px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
[data-design="b"] .tb-funnel__done h3 {
  font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(24px,3.6vw,38px); margin: 0 0 12px;
  text-transform: uppercase; letter-spacing: -.02em;
}
[data-design="b"] .tb-funnel__done p {
  font-family: "Inter", sans-serif; color: var(--tb-ink-soft); margin: 0 0 24px;
}
[data-design="b"] .tb-funnel__writ {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  border-top: 1px solid var(--tb-ink); padding-top: 24px;
}
[data-design="b"] .tb-funnel__writ a {
  font-family: "Archivo Black", sans-serif; font-size: 18px;
  color: var(--tb-ink); text-decoration: none; text-transform: uppercase;
  display: grid; gap: 4px; letter-spacing: -.01em;
}
[data-design="b"] .tb-funnel__writ a small {
  font-family: var(--tb-mono); font-size: 10.5px; letter-spacing: .22em;
  color: var(--tb-mute); text-transform: uppercase;
}
@media (max-width: 560px) {
  [data-design="b"] .tb-funnel__writ { grid-template-columns: 1fr; }
}

/* Trust row below funnel */
[data-design="b"] .tb-funnel__trust {
  max-width: 720px; margin: 32px auto 0;
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-family: var(--tb-mono); font-size: 10.5px; letter-spacing: .18em;
  color: var(--tb-mute); text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   E4 — SERVICES (ambient segment B — stack cards)
   Phase markers snap in on intersection
════════════════════════════════════════════════════════════ */
[data-design="b"] .tb-practice {
  background: var(--tb-bone); color: var(--tb-ink);
  padding: clamp(80px,11vw,144px) clamp(20px,4vw,56px);
  border-bottom: 1px solid var(--tb-rule-bone);
}
[data-design="b"] .tb-practice__head {
  max-width: 1480px; margin: 0 auto var(--tb-stanza);
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end;
}
@media (max-width: 760px) {
  [data-design="b"] .tb-practice__head { grid-template-columns: 1fr; }
}
[data-design="b"] .tb-practice__no {
  font-family: var(--tb-mono); font-size: 11px; letter-spacing: .28em;
  color: var(--tb-mute); text-transform: uppercase;
  margin-bottom: 16px; display: inline-flex; align-items: center; gap: 10px;
}
[data-design="b"] .tb-practice__sq { width: 8px; height: 8px; background: var(--tb-signal); }
[data-design="b"] .tb-practice__title {
  font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(36px,5.5vw,72px); line-height: .94; letter-spacing: -.03em;
  margin: 0; text-transform: uppercase; max-width: 14ch;
}
[data-design="b"] .tb-practice__title em { color: var(--tb-signal); font-style: normal; }
[data-design="b"] .tb-practice__note {
  font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.55;
  color: var(--tb-ink-soft); max-width: 50ch;
}
[data-design="b"] .tb-stack {
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
@media (max-width: 880px) { [data-design="b"] .tb-stack { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { [data-design="b"] .tb-stack { grid-template-columns: 1fr; } }
[data-design="b"] .tb-stack__card {
  background: var(--tb-ink); color: var(--tb-bone);
  padding: clamp(28px,3.4vw,40px); position: relative; min-height: 280px;
  display: flex; flex-direction: column; gap: 14px;
}
[data-design="b"] .tb-stack__card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--tb-signal);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 100ms var(--tb-ease-hard);
}
[data-design="b"] .tb-stack__card[data-in="true"]::before { transform: scaleX(1); }
[data-design="b"] .tb-stack__num {
  font-family: var(--tb-mono); font-size: 11px; letter-spacing: .22em;
  color: var(--tb-signal); text-transform: uppercase; margin: 0;
}
[data-design="b"] .tb-stack__title {
  font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(20px,2.4vw,26px); line-height: 1.05; letter-spacing: -.02em;
  margin: 0; text-transform: uppercase;
}
[data-design="b"] .tb-stack__title em { color: var(--tb-signal); font-style: normal; }
[data-design="b"] .tb-stack__body {
  font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.5;
  color: var(--tb-bone-soft); margin: 0;
}
[data-design="b"] .tb-stack__attr {
  margin-top: auto; font-family: var(--tb-mono); font-size: 10.5px;
  letter-spacing: .18em; color: var(--tb-mute); text-transform: uppercase;
}

/* Re-funnel CTA block */
[data-design="b"] .tb-refunnel {
  background: var(--tb-bone); border-bottom: 1px solid var(--tb-rule-bone);
  padding: clamp(40px,5vw,80px) clamp(20px,4vw,56px);
}
[data-design="b"] .tb-refunnel__inner {
  max-width: 1480px; margin: 0 auto;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
[data-design="b"] .tb-refunnel .tb-eyebrow { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   PROCESS SECTION
════════════════════════════════════════════════════════════ */
[data-design="b"] .tb-process {
  background: var(--tb-ink); color: var(--tb-bone);
  padding: clamp(80px,11vw,144px) clamp(20px,4vw,56px);
  border-bottom: 1px solid var(--tb-rule);
}
[data-design="b"] .tb-process__head {
  max-width: 1480px; margin: 0 auto var(--tb-stanza);
}
[data-design="b"] .tb-process__timeline {
  max-width: 900px; margin: 0 auto;
  display: grid; gap: 0;
}
[data-design="b"] .tb-process__phase {
  display: grid; grid-template-columns: 64px 1fr; gap: 32px; align-items: start;
  padding: 32px 0; border-bottom: 1px solid var(--tb-rule);
  opacity: 0.3;
  transform: translateX(-8px);
  transition: opacity 300ms var(--tb-ease-settle), transform 300ms var(--tb-ease-settle);
}
[data-design="b"] .tb-process__phase[data-in="true"] {
  opacity: 1; transform: translateX(0);
}
[data-design="b"] .tb-process__phase:last-child { border-bottom: 0; }
[data-design="b"] .tb-process__num {
  font-family: "Archivo Black", sans-serif; font-size: clamp(28px,3vw,40px);
  color: var(--tb-signal); line-height: 1; letter-spacing: -.02em;
}
[data-design="b"] .tb-process__body h3 {
  font-family: "Archivo Black", sans-serif; font-size: clamp(18px,2vw,24px);
  letter-spacing: -.01em; text-transform: uppercase;
  margin: 0 0 10px;
}
[data-design="b"] .tb-process__body p {
  font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.6;
  color: var(--tb-bone-soft); max-width: 55ch;
}

/* ═══════════════════════════════════════════════════════════
   ABOUT SECTION
════════════════════════════════════════════════════════════ */
[data-design="b"] .tb-about {
  background: var(--tb-bone); color: var(--tb-ink);
  padding: clamp(80px,11vw,144px) clamp(20px,4vw,56px);
  border-bottom: 1px solid var(--tb-rule-bone);
}
[data-design="b"] .tb-about__inner {
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: 120px 1fr; gap: clamp(40px,6vw,96px);
  align-items: start;
}
@media (max-width: 640px) {
  [data-design="b"] .tb-about__inner { grid-template-columns: 1fr; }
  [data-design="b"] .tb-about__mark { display: none; }
}
[data-design="b"] .tb-about__mark {
  display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 8px;
}
[data-design="b"] .tb-about__mark-sq {
  width: 40px; height: 40px; background: var(--tb-signal);
}
[data-design="b"] .tb-about__mark-rule {
  width: 2px; height: 80px; background: var(--tb-rule-bone);
}
[data-design="b"] .tb-about__body {
  font-family: "Inter", sans-serif; font-size: clamp(16px,1.3vw,18px); line-height: 1.6;
  color: var(--tb-ink-soft); max-width: 60ch; margin-bottom: 16px;
}
[data-design="b"] .tb-about__creds {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px;
}
@media (max-width: 560px) {
  [data-design="b"] .tb-about__creds { grid-template-columns: 1fr; }
}
[data-design="b"] .tb-about__cred {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border: 1px solid var(--tb-rule-bone);
}
[data-design="b"] .tb-about__cred-label {
  font-family: var(--tb-mono); font-size: 10px; letter-spacing: .22em;
  color: var(--tb-mute); text-transform: uppercase;
}
[data-design="b"] .tb-about__cred-value {
  font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; color: var(--tb-ink);
}
[data-design="b"] .tb-about__social {
  display: inline-block; margin-top: 24px;
  font-family: var(--tb-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tb-mute); text-decoration: none;
  transition: color var(--tb-d-snap) var(--tb-ease-hard);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .tb-about__social:hover { color: var(--tb-ink); }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
[data-design="b"] .tb-footer {
  background: var(--tb-ink); color: var(--tb-bone);
  padding: clamp(64px,8vw,96px) clamp(20px,4vw,56px) clamp(40px,5vw,64px);
  border-top: 1px solid var(--tb-rule);
}
[data-design="b"] .tb-footer__inner {
  max-width: 1480px; margin: 0 auto;
  display: grid; gap: 32px;
}
[data-design="b"] .tb-footer__brand {
  display: flex; flex-direction: column; gap: 8px;
}
[data-design="b"] .tb-footer__name {
  font-family: "Archivo Black", sans-serif; font-size: clamp(20px,2.5vw,32px);
  letter-spacing: -.01em; text-transform: uppercase;
}
[data-design="b"] .tb-footer__lic {
  font-family: var(--tb-mono); font-size: 10.5px; letter-spacing: .22em;
  color: var(--tb-mute); text-transform: uppercase;
}
[data-design="b"] .tb-footer__links {
  display: flex; flex-wrap: wrap; gap: 8px 32px;
}
[data-design="b"] .tb-footer__links a {
  font-family: "Inter", sans-serif; font-size: 15px; color: var(--tb-bone-soft);
  text-decoration: none;
  transition: color var(--tb-d-snap) var(--tb-ease-hard);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .tb-footer__links a:hover { color: var(--tb-signal); }
}
[data-design="b"] .tb-footer__rule {
  height: 1px; background: var(--tb-rule);
}
[data-design="b"] .tb-footer__copy {
  font-family: var(--tb-mono); font-size: 10.5px; letter-spacing: .18em;
  color: var(--tb-mute); text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   SCROLL-DRIVEN PARALLAX (TRIAD-2)
   Hero backdrop translates on scroll — genuine scroll-linked
   motion, not a fade-in
════════════════════════════════════════════════════════════ */
[data-design="b"] .tb-hero__backdrop {
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION FALLBACKS
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .tb-header__marquee { animation: none !important; background-position: 0 0 !important; opacity: .6; }
  [data-design="b"] .tb-hero__backdrop::after { animation: none !important; }
  [data-design="b"] .bp-outline-1,
  [data-design="b"] .bp-outline-2,
  [data-design="b"] .bp-outline-3 { animation: none !important; stroke-dashoffset: 0 !important; }
  [data-design="b"] .bp-detail-1,
  [data-design="b"] .bp-detail-2,
  [data-design="b"] .bp-detail-3 { animation: none !important; stroke-dashoffset: 0 !important; }
  [data-design="b"] .bp-dim,
  [data-design="b"] .bp-dim-tick,
  [data-design="b"] .bp-scale-bar,
  [data-design="b"] .bp-scale-tick,
  [data-design="b"] .bp-dim-label,
  [data-design="b"] .bp-north-circle,
  [data-design="b"] .bp-north-label { animation: none !important; opacity: 1 !important; }
  [data-design="b"] .tb-pointer__label { animation: none !important; opacity: 1 !important; }
  [data-design="b"] .tb-pointer__bar  { animation: none !important; opacity: 1 !important; transform: scaleY(1) !important; }
  [data-design="b"] .tb-pointer__tick { animation: none !important; }
  [data-design="b"] .tb-cta__rule::after { animation: none !important; transform: translateX(0) !important; width: 100%; opacity: .3; }
  [data-design="b"] .tb-stack__card::before { transition: none !important; transform: scaleX(1) !important; }
  [data-design="b"] .tb-process__phase { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-design="b"] .tb-funnel__step { transition-duration: 50ms !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE GUARDS
   All rules scoped to .dq-design — no bare [data-design] descendant
════════════════════════════════════════════════════════════ */
@media (max-width: 390px) {
  [data-design="b"] .tb-hero { padding-left: 16px; padding-right: 16px; }
  [data-design="b"] .tb-hero__docket { display: none; }
  [data-design="b"] .tb-funnel__steps { min-height: 520px; }
  [data-design="b"] .tb-process__phase { grid-template-columns: 48px 1fr; gap: 16px; }
  [data-design="b"] .tb-about__creds { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  [data-design="b"] .tb-process__phase { grid-template-columns: 56px 1fr; }
}

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