/* ============================================================
   DESIGN B — "Slate Dusk" — Formwork system, dark inversion.
   Distinct from Site A: ink-paper inverted to slate, blueprint
   register. All selectors scoped [data-design="b"].
   Trade: roofing (planning-only — brief confirms no emergency).
   ============================================================ */

[data-design="b"] {
  /* trade-rooted tokens (Formwork dark column + roofing slate/weathered-metal) */
  --db-bone:       #16140F;   /* surface (page) — ink-paper */
  --db-page:       #1D1B16;   /* raised surface — cards, steps */
  --db-aggregate:  #3A362F;   /* concrete planes / separators */
  --db-shadow:     #7A746A;   /* muted captions / secondary type */
  --db-ink:        #E9E4D9;   /* foreground (sumi, inverted) */
  --db-rust:       #B86340;   /* accent — single CTA, progress */
  --db-rebar:      #9B8E78;   /* hairline rules, focus rings */
  --db-critical:   #C7553F;   /* form error state */
  --db-success:    #8AA478;   /* confirmation state */
  --db-slate:      #2A2B2E;   /* weathered-metal slate (roofing) */
  --db-copper:     #C98A5E;   /* warm edge / hover rim */
  --db-haze:       #44423B;   /* mid haze for backdrops */

  /* exposed primary for A/B harness */
  --design-b-primary: var(--db-rust);

  /* type */
  --db-display: "Neue Haas Grotesk Display", "Inter Display", -apple-system, sans-serif;
  --db-body:    "Neue Haas Grotesk Text", "Inter", -apple-system, sans-serif;
  --db-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* spacing */
  --db-hair: 1px; --db-rebar-w: 2px; --db-joint: 8px; --db-board: 16px;
  --db-bay: 32px; --db-pour: 64px; --db-slab: 112px; --db-monolith: 176px;

  /* motion (curing physics) */
  --db-set:      180ms cubic-bezier(0.32, 0.08, 0.24, 1);
  --db-register: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --db-fill:     820ms cubic-bezier(0.65, 0, 0.35, 1);
  --db-cure:    1400ms cubic-bezier(0.83, 0, 0.17, 1);

  --db-r-cast: 2px;
}

[data-design="b"].dq-design,
[data-design="b"] .dq-design { box-sizing: border-box; background: var(--db-bone); color: var(--db-ink); font-family: var(--db-body); }
[data-design="b"] *, [data-design="b"] *::before, [data-design="b"] *::after { box-sizing: border-box; }
[data-design="b"] .rf-keynote { font-family: var(--db-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--db-shadow); margin: 0; }
[data-design="b"] a { color: var(--db-copper); }

/* ============================================================
   ELEMENT 1 — Animated minimalist header
   ============================================================ */
[data-design="b"] .rf-header { position: sticky; top: 0; z-index: 40; background: var(--db-bone); border-bottom: 1px solid var(--db-rebar); }
[data-design="b"] .rf-header__pour { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
[data-design="b"] .rf-header__line { position: absolute; left: -40%; height: 1px; width: 60%; background: linear-gradient(90deg, transparent 0%, var(--db-ink) 50%, transparent 100%); opacity: 0.16; }
[data-design="b"] .rf-header__line--a { top: 30%; animation: fw-header-draw-a 28s linear infinite; }
[data-design="b"] .rf-header__line--b { top: 70%; animation: fw-header-draw-b 31s linear infinite; }
[data-design="b"] .rf-header__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--db-board); max-width: 1280px; margin: 0 auto; padding: clamp(16px, 3vw, 30px) clamp(16px, 4vw, 48px); }
[data-design="b"] .rf-logo { text-decoration: none; }
[data-design="b"] .rf-logo__mark { font-family: var(--db-display); font-weight: 600; font-size: clamp(17px, 2.2vw, 26px); letter-spacing: -0.015em; color: var(--db-ink); }
[data-design="b"] .rf-logo__reg { font-size: 0.5em; vertical-align: super; color: var(--db-shadow); }
[data-design="b"] .rf-hamburger { background: transparent; border: 0; padding: 10px; min-width: 44px; min-height: 44px; display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; cursor: pointer; }
[data-design="b"] .rf-hamburger__bar { display: block; width: 28px; height: 2px; background: var(--db-ink); transition: transform var(--db-register), background-color var(--db-set); }
[data-design="b"] .rf-hamburger[aria-expanded="true"] .rf-hamburger__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
[data-design="b"] .rf-hamburger[aria-expanded="true"] .rf-hamburger__bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

[data-design="b"] .rf-drawer { position: fixed; inset: 0; background: var(--db-bone); z-index: 50; }
[data-design="b"] .rf-drawer[hidden] { display: none; }
[data-design="b"] .rf-drawer__inner { max-width: 1280px; margin: 0 auto; padding: clamp(72px, 12vh, 130px) clamp(16px, 4vw, 48px) clamp(40px, 8vh, 80px); display: flex; flex-direction: column; gap: var(--db-board); }
[data-design="b"] .rf-drawer__link { font-family: var(--db-display); font-size: clamp(30px, 6vw, 60px); color: var(--db-ink); text-decoration: none; letter-spacing: -0.02em; border-bottom: 1px solid var(--db-rebar); padding-bottom: var(--db-joint); transition: color var(--db-set); }
[data-design="b"] .rf-drawer__link:hover, [data-design="b"] .rf-drawer__link:focus-visible { color: var(--db-rust); outline: none; }
[data-design="b"] .rf-drawer__actions { display: flex; flex-wrap: wrap; gap: var(--db-board); margin-top: var(--db-board); }
[data-design="b"] .rf-drawer__cta { font-family: var(--db-mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 16px 24px; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--db-r-cast); }
[data-design="b"] .rf-drawer__cta--primary { background: var(--db-rust); color: var(--db-bone); }
[data-design="b"] .rf-drawer__cta--phone { background: transparent; color: var(--db-ink); border: 1px solid var(--db-rebar); }
[data-design="b"] .rf-drawer__close { position: absolute; top: clamp(18px, 3vw, 32px); right: clamp(16px, 4vw, 48px); background: transparent; border: 0; min-height: 44px; padding: 8px 12px; font-family: var(--db-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--db-ink); cursor: pointer; }

@keyframes fw-header-draw-a { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 0.16; } 88% { opacity: 0.16; } 100% { transform: translateX(280%); opacity: 0; } }
@keyframes fw-header-draw-b { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 0.12; } 90% { opacity: 0.12; } 100% { transform: translateX(280%); opacity: 0; } }

/* ============================================================
   HERO — themed-movement (ONE animated layer: roofline draw-in
   then ambient course drift). Text opacity:1 at first paint.
   ============================================================ */
[data-design="b"] .rf-hero { position: relative; overflow: hidden; background: var(--db-bone); padding: clamp(64px, 12vw, 132px) clamp(16px, 4vw, 48px) clamp(48px, 8vw, 96px); min-height: 62vh; display: flex; align-items: center; }
[data-design="b"] .rf-hero__backdrop { position: absolute; inset: 0; pointer-events: none; }
[data-design="b"] .rf-hero__roofline { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-design="b"] .rf-hero__field { animation: db-hero-wash 9s ease-in-out infinite; }
[data-design="b"] .rf-hero__ridge { stroke: var(--db-rebar); stroke-width: 2.5; opacity: 0.85; stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: db-ridge-draw 1.8s cubic-bezier(0.65,0,0.35,1) forwards, db-ridge-breath 7s ease-in-out 1.8s infinite; }
[data-design="b"] .rf-hero__course { stroke: var(--db-copper); stroke-width: 1.5; opacity: 0; }
[data-design="b"] .rf-hero__course--1 { animation: db-course-in 0.7s ease-out 0.6s forwards, db-course-drift 8s ease-in-out 2s infinite; }
[data-design="b"] .rf-hero__course--2 { animation: db-course-in 0.7s ease-out 0.9s forwards, db-course-drift 8.6s ease-in-out 2.3s infinite; }
[data-design="b"] .rf-hero__course--3 { animation: db-course-in 0.7s ease-out 1.2s forwards, db-course-drift 9.2s ease-in-out 2.6s infinite; }

[data-design="b"] .rf-hero__inner { position: relative; max-width: 1280px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: var(--db-board); }
[data-design="b"] .rf-hero__keynote { font-family: var(--db-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--db-shadow); margin: 0; opacity: 1; }
[data-design="b"] .rf-hero__title { font-family: var(--db-display); font-weight: 600; font-size: clamp(38px, 7vw, 96px); letter-spacing: -0.02em; line-height: 0.98; color: var(--db-ink); margin: 0; max-width: 16ch; opacity: 1; }
[data-design="b"] .rf-hero__sub { font-family: var(--db-body); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--db-ink); max-width: 56ch; margin: 0; opacity: 1; }
[data-design="b"] .rf-hero__proof { font-family: var(--db-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--db-shadow); margin: 0; padding-top: var(--db-joint); border-top: 1px solid var(--db-aggregate); max-width: 56ch; opacity: 1; }
[data-design="b"] .rf-hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--db-board); margin-top: var(--db-joint); }

@keyframes db-hero-wash { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes db-ridge-draw { to { stroke-dashoffset: 0; } }
@keyframes db-ridge-breath { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.95; } }
@keyframes db-course-in { to { opacity: 0.5; } }
@keyframes db-course-drift { 0%, 100% { opacity: 0.28; transform: translateX(0); } 50% { opacity: 0.6; transform: translateX(10px); } }

/* ============================================================
   ELEMENT 2 — Animated CTA (funnel-anchor, single primary)
   ============================================================ */
[data-design="b"] .rf-cta { position: relative; display: inline-flex; align-items: center; gap: var(--db-board); padding: 18px 28px; min-height: 44px; background: var(--db-rust); color: var(--db-bone); font-family: var(--db-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-radius: var(--db-r-cast); will-change: transform; transition: transform var(--db-set), background-color var(--db-set); animation: db-cta-breath 4.8s ease-in-out infinite; overflow: hidden; }
[data-design="b"] .rf-cta__grain { position: absolute; inset: 0; background: repeating-linear-gradient(6deg, transparent 0 6px, rgba(22,20,15,0.10) 6px 7px); transition: transform var(--db-set); pointer-events: none; }
[data-design="b"] .rf-cta__label { position: relative; }
[data-design="b"] .rf-cta__arrow { position: relative; transition: transform var(--db-register); }
[data-design="b"] .rf-cta::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 12px; height: 1px; background: var(--db-bone); transform: scaleX(0); transform-origin: left center; transition: transform var(--db-register); }
[data-design="b"] .rf-cta:hover::after, [data-design="b"] .rf-cta:focus-visible::after { transform: scaleX(1); }
[data-design="b"] .rf-cta:hover .rf-cta__arrow, [data-design="b"] .rf-cta:focus-visible .rf-cta__arrow { transform: translateX(6px); }
[data-design="b"] .rf-cta:focus-visible { outline: 2px solid var(--db-rebar); outline-offset: 4px; }
[data-design="b"] .rf-cta:active { transform: translateY(2px); }
[data-design="b"] .rf-cta:active .rf-cta__grain { transform: translateX(1px); }
@keyframes db-cta-breath { 0%, 100% { box-shadow: 0 0 0 0 rgba(184,99,64,0.0); } 50% { box-shadow: 0 0 0 8px rgba(184,99,64,0.16); } }

/* ============================================================
   ELEMENT 6 — Pointer (water-shed / course-lay; not a button)
   VISIBLY rendered: opacity 1, height >= 8px at all breakpoints.
   ============================================================ */
[data-design="b"] .rf-pointer { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(28px, 6vw, 56px) 16px clamp(36px, 7vw, 72px); background: var(--db-bone); }
[data-design="b"] .rf-pointer__eave { display: block; width: clamp(120px, 30vw, 260px); height: 2px; background: var(--db-rebar); opacity: 0.85; }
[data-design="b"] .rf-pointer__shed { display: block; width: 2px; height: 56px; background: linear-gradient(180deg, var(--db-copper) 0%, var(--db-rust) 100%); opacity: 0.9; transform-origin: top center; animation: db-shed 5s ease-in-out infinite; }
[data-design="b"] .rf-pointer__label { font-family: var(--db-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--db-shadow); opacity: 0.9; }
@keyframes db-shed { 0%, 100% { transform: scaleY(0.5); opacity: 0.55; } 50% { transform: scaleY(1); opacity: 0.95; } }

/* ============================================================
   ELEMENT 5 — The Funnel
   ============================================================ */
[data-design="b"] .rf-interactive { background: var(--db-bone); padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px); }
[data-design="b"] .rf-interactive__header { max-width: 1280px; margin: 0 auto var(--db-bay); }
[data-design="b"] .rf-interactive__title { font-family: var(--db-display); font-weight: 600; font-size: clamp(30px, 5vw, 60px); letter-spacing: -0.02em; line-height: 1; color: var(--db-ink); margin: var(--db-board) 0; }
[data-design="b"] .rf-interactive__sub { font-family: var(--db-body); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--db-shadow); max-width: 60ch; margin: 0; }
[data-design="b"] .rf-funnel { max-width: 1280px; margin: 0 auto; }
[data-design="b"] .rf-funnel__steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--db-rebar); }
[data-design="b"] .rf-funnel__step { border-bottom: 1px solid var(--db-rebar); transition: background-color var(--db-register); }
[data-design="b"] .rf-funnel__step[data-state="active"] { background: var(--db-page); }
[data-design="b"] .rf-funnel__step[data-state="done"] { background: var(--db-bone); }
[data-design="b"] .rf-funnel__title-block { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--db-board); padding: var(--db-board) var(--db-bay); font-family: var(--db-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--db-ink); }
[data-design="b"] .rf-funnel__index { font-family: var(--db-display); font-size: 24px; letter-spacing: -0.01em; color: var(--db-rebar); }
[data-design="b"] .rf-funnel__label { font-family: var(--db-mono); color: var(--db-ink); }
[data-design="b"] .rf-funnel__stamp { font-family: var(--db-mono); font-size: 11px; letter-spacing: 0.1em; padding: 4px 8px; border: 1px solid var(--db-rebar); color: var(--db-shadow); }
[data-design="b"] .rf-funnel__step[data-state="done"] .rf-funnel__stamp { background: var(--db-rust); border-color: var(--db-rust); color: var(--db-bone); }
[data-design="b"] .rf-funnel__step[data-state="active"] .rf-funnel__stamp { color: var(--db-rust); border-color: var(--db-rust); }
[data-design="b"] .rf-funnel__pour { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--db-fill); overflow: hidden; }
[data-design="b"] .rf-funnel__step[data-state="active"] .rf-funnel__pour { grid-template-rows: 1fr; }
[data-design="b"] .rf-funnel__pour > * { min-height: 0; }
[data-design="b"] .rf-funnel__field { border: 0; padding: var(--db-bay); display: grid; gap: var(--db-board); margin: 0; }
[data-design="b"] .rf-funnel__field legend { font-family: var(--db-body); font-size: clamp(20px, 2.2vw, 28px); color: var(--db-ink); padding: 0 0 var(--db-board); max-width: 36ch; }
[data-design="b"] .rf-funnel__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--db-joint); }
[data-design="b"] .rf-funnel__choices label { display: flex; align-items: center; gap: var(--db-joint); padding: var(--db-board); min-height: 44px; border: 1px solid var(--db-rebar); border-radius: var(--db-r-cast); cursor: pointer; font-family: var(--db-body); color: var(--db-ink); transition: border-color var(--db-set), background-color var(--db-set); }
[data-design="b"] .rf-funnel__choices label:hover { border-color: var(--db-copper); }
[data-design="b"] .rf-funnel__choices input[type="radio"] { accent-color: var(--db-rust); }
[data-design="b"] .rf-funnel__choices label:has(input:checked) { background: var(--db-aggregate); border-color: var(--db-rust); }
[data-design="b"] .rf-funnel__input { display: grid; gap: 6px; padding: var(--db-joint) 0; }
[data-design="b"] .rf-funnel__input span { font-family: var(--db-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--db-shadow); }
[data-design="b"] .rf-funnel__input input { font-family: var(--db-body); font-size: 18px; border: 0; border-bottom: 1px solid var(--db-rebar); padding: 8px 0; background: transparent; color: var(--db-ink); min-height: 44px; }
[data-design="b"] .rf-funnel__input input:focus { outline: none; border-bottom-color: var(--db-rust); border-bottom-width: 2px; }
[data-design="b"] .rf-funnel__actions { display: flex; flex-wrap: wrap; gap: var(--db-board); padding: 0 var(--db-bay) var(--db-bay); }
[data-design="b"] .rf-funnel__next, [data-design="b"] .rf-funnel__submit { font-family: var(--db-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 24px; min-height: 44px; background: var(--db-ink); color: var(--db-bone); border: 0; border-radius: var(--db-r-cast); cursor: pointer; transition: background-color var(--db-set), transform var(--db-set); }
[data-design="b"] .rf-funnel__submit { background: var(--db-rust); }
[data-design="b"] .rf-funnel__next:hover, [data-design="b"] .rf-funnel__submit:hover { transform: translateY(-1px); }
[data-design="b"] .rf-funnel__next:active, [data-design="b"] .rf-funnel__submit:active { transform: translateY(1px); }
[data-design="b"] .rf-funnel__back { font-family: var(--db-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 16px; min-height: 44px; background: transparent; color: var(--db-ink); border: 0; cursor: pointer; }
[data-design="b"] .rf-funnel__done { display: block; margin-top: var(--db-bay); padding: var(--db-bay); border: 1px solid var(--db-rebar); background: var(--db-page); animation: fw-step-in var(--db-fill) both; }
[data-design="b"] .rf-funnel__done[hidden] { display: none; }
[data-design="b"] .rf-funnel__done h3 { font-family: var(--db-display); font-size: clamp(28px, 4vw, 48px); color: var(--db-ink); margin: var(--db-joint) 0; letter-spacing: -0.015em; }
[data-design="b"] .rf-funnel__done p { font-family: var(--db-body); color: var(--db-shadow); max-width: 56ch; }
@keyframes fw-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
[data-design="b"] .rf-funnel__floor { max-width: 1280px; margin: var(--db-bay) auto 0; padding-top: var(--db-board); border-top: 1px solid var(--db-aggregate); display: grid; gap: var(--db-joint); }
[data-design="b"] .rf-funnel__floor p { font-family: var(--db-body); font-size: 16px; line-height: 1.55; color: var(--db-shadow); max-width: 64ch; margin: 0; }
[data-design="b"] .rf-funnel__strings { list-style: none; padding: 0; margin: var(--db-joint) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--db-board); font-family: var(--db-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--db-shadow); }

/* ============================================================
   ELEMENT 4 — Ambient segment B (curing slab) + work index
   ============================================================ */
[data-design="b"] .rf-ambient-b { position: relative; padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px); overflow: hidden; isolation: isolate; }
[data-design="b"] .rf-ambient-b__slab { position: absolute; inset: 0; background: var(--db-slate); animation: db-slab-cure 18s ease-in-out infinite; z-index: -1; }
[data-design="b"] .rf-ambient-b__aggregate { position: absolute; inset: 0; background-image:
  radial-gradient(circle at 12% 18%, var(--db-ink) 0 1px, transparent 1.5px),
  radial-gradient(circle at 78% 32%, var(--db-ink) 0 1px, transparent 1.5px),
  radial-gradient(circle at 34% 64%, var(--db-ink) 0 1px, transparent 1.5px),
  radial-gradient(circle at 89% 81%, var(--db-ink) 0 1px, transparent 1.5px),
  radial-gradient(circle at 6% 92%, var(--db-ink) 0 1px, transparent 1.5px),
  radial-gradient(circle at 56% 12%, var(--db-ink) 0 1px, transparent 1.5px),
  radial-gradient(circle at 22% 44%, var(--db-ink) 0 1px, transparent 1.5px),
  radial-gradient(circle at 71% 58%, var(--db-ink) 0 1px, transparent 1.5px);
  background-size: 100% 100%; opacity: 0.30; animation: db-aggregate-breath 6.4s ease-in-out infinite; }
[data-design="b"] .rf-ambient-b__inner { position: relative; max-width: 1280px; margin: 0 auto; display: grid; gap: var(--db-bay); }
[data-design="b"] .rf-ambient-b .rf-keynote { color: rgba(233,228,217,0.7); }
[data-design="b"] .rf-ambient-b__title { font-family: var(--db-display); font-weight: 500; font-size: clamp(30px, 5vw, 60px); letter-spacing: -0.015em; line-height: 1.02; margin: 0; max-width: 20ch; color: var(--db-ink); }
[data-design="b"] .rf-ambient-b__body { font-family: var(--db-body); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; max-width: 64ch; color: var(--db-ink); }
[data-design="b"] .rf-index { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--db-rebar); }
[data-design="b"] .rf-index__row { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "num title" "num note"; column-gap: var(--db-board); row-gap: 4px; padding: var(--db-board) 0; border-bottom: 1px solid var(--db-rebar); }
[data-design="b"] .rf-index__num { grid-area: num; font-family: var(--db-display); font-size: 24px; color: var(--db-copper); }
[data-design="b"] .rf-index__title { grid-area: title; font-family: var(--db-body); font-size: clamp(18px, 2vw, 22px); color: var(--db-ink); }
[data-design="b"] .rf-index__note { grid-area: note; font-family: var(--db-body); font-size: 15px; color: rgba(233,228,217,0.72); max-width: 60ch; }
@keyframes db-slab-cure { 0%, 100% { background: var(--db-slate); } 50% { background: color-mix(in oklab, var(--db-slate), var(--db-haze) 55%); } }
@keyframes db-aggregate-breath { 0%, 100% { opacity: 0.26; transform: scale(1); } 50% { opacity: 0.40; transform: scale(1.012); } }

/* ============================================================
   Roof Systems (plates)
   ============================================================ */
[data-design="b"] .rf-systems { background: var(--db-bone); padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px); }
[data-design="b"] .rf-systems__inner { max-width: 1280px; margin: 0 auto; display: grid; gap: var(--db-bay); }
[data-design="b"] .rf-systems__title { font-family: var(--db-display); font-weight: 600; font-size: clamp(28px, 4.5vw, 56px); letter-spacing: -0.02em; line-height: 1; margin: var(--db-board) 0 0; color: var(--db-ink); }
[data-design="b"] .rf-systems__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--db-bay); }
[data-design="b"] .rf-plate { background: var(--db-page); border: 1px solid var(--db-rebar); border-radius: var(--db-r-cast); padding: var(--db-bay); display: grid; gap: var(--db-joint); }
[data-design="b"] .rf-plate__note { font-family: var(--db-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--db-shadow); margin: 0; }
[data-design="b"] .rf-plate__title { font-family: var(--db-display); font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.01em; color: var(--db-ink); margin: 0; }
[data-design="b"] .rf-plate__body { font-family: var(--db-body); font-size: 16px; line-height: 1.55; color: rgba(233,228,217,0.75); margin: 0; }

/* ============================================================
   Repeated funnel CTA
   ============================================================ */
[data-design="b"] .rf-recta { background: var(--db-aggregate); padding: clamp(64px, 9vw, 100px) clamp(16px, 4vw, 48px); }
[data-design="b"] .rf-recta__inner { max-width: 1280px; margin: 0 auto; display: grid; gap: var(--db-board); }
[data-design="b"] .rf-recta__title { font-family: var(--db-display); font-weight: 600; font-size: clamp(28px, 4.5vw, 56px); letter-spacing: -0.02em; line-height: 1; color: var(--db-ink); margin: 0; max-width: 18ch; }
[data-design="b"] .rf-cta--repeat { margin-top: var(--db-joint); width: fit-content; }

/* ============================================================
   Footer (title-block)
   ============================================================ */
[data-design="b"] .rf-footer { background: var(--db-bone); border-top: 1px solid var(--db-rebar); padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px) clamp(32px, 5vw, 56px); }
[data-design="b"] .rf-footer__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--db-bay); }
[data-design="b"] .rf-footer__block { display: grid; gap: 6px; align-content: start; }
[data-design="b"] .rf-footer__line { font-family: var(--db-body); font-size: 16px; color: var(--db-shadow); margin: 0; }
[data-design="b"] .rf-footer__line a { color: var(--db-ink); text-decoration: none; }
[data-design="b"] .rf-footer__line a:hover { color: var(--db-rust); }
[data-design="b"] .rf-footer__rule { margin: var(--db-pour) auto var(--db-board); max-width: 1280px; height: 1px; background: var(--db-aggregate); overflow: hidden; }
[data-design="b"] .rf-footer__draw { display: block; height: 1px; width: 40%; background: linear-gradient(90deg, transparent, var(--db-rebar), transparent); animation: db-footer-draw 24s linear infinite; }
[data-design="b"] .rf-footer__copy { max-width: 1280px; margin: 0 auto; font-family: var(--db-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--db-shadow); }
@keyframes db-footer-draw { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ============================================================
   Reduced-motion fallback
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .rf-header__line--a, [data-design="b"] .rf-header__line--b { animation: none; opacity: 0.1; transform: translateX(80%); }
  [data-design="b"] .rf-hero__field { animation: none; opacity: 0.9; }
  [data-design="b"] .rf-hero__ridge { animation: none; stroke-dashoffset: 0; opacity: 0.85; }
  [data-design="b"] .rf-hero__course { animation: none; opacity: 0.45; }
  [data-design="b"] .rf-cta { animation: none; }
  [data-design="b"] .rf-cta::after, [data-design="b"] .rf-cta__arrow { transition: none; }
  [data-design="b"] .rf-pointer__shed { animation: none; transform: scaleY(1); opacity: 0.85; }
  [data-design="b"] .rf-funnel__pour { transition: none; }
  [data-design="b"] .rf-funnel__done { animation: none; }
  [data-design="b"] .rf-ambient-b__slab, [data-design="b"] .rf-ambient-b__aggregate { animation: none; }
  [data-design="b"] .rf-footer__draw { animation: none; transform: translateX(60%); }
}

/* ============================================================
   Mobile breakpoints
   ============================================================ */
@media (max-width: 768px) {
  [data-design="b"] .rf-hero { min-height: 56vh; padding-top: clamp(48px, 10vw, 80px); }
  [data-design="b"] .rf-funnel__title-block { grid-template-columns: 40px 1fr auto; padding: var(--db-board); }
  [data-design="b"] .rf-funnel__field { padding: var(--db-board); }
  [data-design="b"] .rf-funnel__actions { padding: 0 var(--db-board) var(--db-board); }
  [data-design="b"] .rf-ambient-b, [data-design="b"] .rf-interactive, [data-design="b"] .rf-systems { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 560px) {
  [data-design="b"] .rf-header__bar { padding: 16px; }
  [data-design="b"] .rf-index__row { grid-template-columns: 40px 1fr; }
}

/* ============================================================
   MANDATORY mobile no-h-scroll tail (per contract — append at BOTTOM)
   ============================================================ */
[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; }