/* =============================================================
   DESIGN-B — Soundings × Rivera Roofing CO
   All selectors scoped [data-design="b"]
   ~12–16 color tokens on the [data-design="b"] block
   ============================================================= */

/* ── Token root ──────────────────────────────────────────────── */
[data-design="b"] {
  /* Palette — chart-paper cream, sonar cyan, anodized brass */
  --b-bg:           #F0EBDD;
  --b-surface:      #FAF7EE;
  --b-surface-warm: #E8E0CC;
  --b-ink:          #0E2530;
  --b-ink-2:        #23414E;
  --b-muted:        #5C6F76;
  --b-meta:         #8A958F;
  --b-border:       #C9BB9F;
  --b-border-soft:  #DDD2B7;
  --b-accent:       #1A5C7A;
  --b-accent-hover: #154E68;
  --b-accent-active:#0F3D52;
  --b-accent-on:    #FAF7EE;
  --b-brass:        #B08850;
  --b-brass-soft:   #D7BA89;
  --b-phosphor:     #5A8067;
  --b-coral:        #C25B45;
  --b-warn:         #C99352;

  /* Expose primary for host -->  */
  --design-b-primary: #1A5C7A;

  /* Typography */
  --b-font-display: "GT Sectra Display", "Tiempos Headline", Georgia, serif;
  --b-font-sans:    "Inter", -apple-system, system-ui, sans-serif;
  --b-font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Spacing — named to the instrument vocabulary */
  --b-hairline:  1px;
  --b-gradation: 4px;
  --b-mark:      8px;
  --b-register:  12px;
  --b-bearing:   20px;
  --b-course:    32px;
  --b-leg:       48px;
  --b-passage:   80px;
  --b-ocean:     120px;

  /* Motion */
  --b-tick:          120ms;
  --b-register-dur:  220ms;
  --b-settle:        420ms;
  --b-cycle-sonar:   24s;
  --b-cycle-horizon: 18s;
  --b-cycle-logbook: 14s;
  --b-cycle-cta:     4.2s;

  --b-ease-settle:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --b-ease-register: cubic-bezier(0.4, 0, 0.2, 1);
  --b-ease-tick:     cubic-bezier(0.45, 0.05, 0.55, 0.95);

  /* Radius */
  --b-r-mark:  2px;
  --b-r-panel: 6px;
  --b-r-bezel: 999px;

  /* Elevation */
  --b-elev-ring:   inset 0 1px 0 rgba(216,189,138,0.55), 0 0 0 1px var(--b-border);
  --b-elev-lifted: inset 0 1px 0 rgba(216,189,138,0.55), 0 0 0 1px var(--b-border), 0 6px 16px rgba(14,37,48,0.10);

  /* Base */
  background-color: var(--b-bg);
  color: var(--b-ink);
  font-family: var(--b-font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* ── Reset ───────────────────────────────────────────────────── */
[data-design="b"] *, [data-design="b"] *::before, [data-design="b"] *::after {
  box-sizing: border-box;
}
[data-design="b"] h1,[data-design="b"] h2,[data-design="b"] h3,
[data-design="b"] h4,[data-design="b"] p,[data-design="b"] ol,
[data-design="b"] ul,[data-design="b"] figure {
  margin: 0;
}
[data-design="b"] a { color: inherit; }

/* ── Google Fonts import ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');


/* =============================================================
   E1 — HEADER (sonar sweep + logo + hamburger)
   ============================================================= */
[data-design="b"] .rf-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--b-bg);
  border-bottom: 1px solid var(--b-border);
}
[data-design="b"] .rf-header__sonar {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
[data-design="b"] .rf-sonar-svg { width: 100%; height: 100%; display: block; }
[data-design="b"] .rf-sonar-rect {
  transform: translateX(-320px);
  animation: b-sonar-sweep var(--b-cycle-sonar) linear infinite;
}
@keyframes b-sonar-sweep {
  0%   { transform: translateX(-320px); }
  100% { transform: translateX(1760px); }
}
[data-design="b"] .rf-header__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1280px; margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 32px);
  min-height: 64px;
}
[data-design="b"] .rf-logo {
  text-decoration: none; color: var(--b-ink);
}
[data-design="b"] .rf-logo__mark {
  font-family: var(--b-font-display);
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
}
[data-design="b"] .rf-menu-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--b-border);
  border-radius: var(--b-r-mark);
  padding: 8px 14px; cursor: pointer;
  color: var(--b-ink);
  font: 600 12px/1 var(--b-font-sans);
  letter-spacing: 0.08em;
  min-width: 44px; min-height: 44px;
  transition: background var(--b-tick) var(--b-ease-tick),
              border-color var(--b-tick) var(--b-ease-tick);
}
[data-design="b"] .rf-menu-btn:hover { background: var(--b-surface-warm); }
[data-design="b"] .rf-menu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,92,122,0.30);
}
[data-design="b"] .rf-menu-btn__bars {
  width: 16px; height: 10px;
  background:
    linear-gradient(var(--b-ink),var(--b-ink)) top/100% 1px no-repeat,
    linear-gradient(var(--b-ink),var(--b-ink)) center/100% 1px no-repeat,
    linear-gradient(var(--b-ink),var(--b-ink)) bottom/100% 1px no-repeat;
}

/* Drawer */
[data-design="b"] .rf-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 92vw);
  background: var(--b-surface);
  border-left: 1px solid var(--b-border);
  box-shadow: var(--b-elev-lifted);
  transform: translateX(100%);
  transition: transform var(--b-settle) var(--b-ease-settle);
  z-index: 60; padding: 80px 28px 28px;
  overflow-y: auto;
}
[data-design="b"] .rf-drawer[data-open="true"] { transform: translateX(0); }
[data-design="b"] .rf-drawer__close {
  position: absolute; top: 20px; right: 20px;
  background: transparent; border: 1px solid var(--b-border);
  border-radius: var(--b-r-mark);
  padding: 8px; cursor: pointer; color: var(--b-ink);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--b-tick) var(--b-ease-tick);
}
[data-design="b"] .rf-drawer__close:hover { background: var(--b-surface-warm); }
[data-design="b"] .rf-drawer__nav {
  display: flex; flex-direction: column; gap: 18px; margin-bottom: var(--b-leg);
}
[data-design="b"] .rf-drawer__nav a {
  font-family: var(--b-font-display);
  font-size: 28px; color: var(--b-ink); text-decoration: none;
  border-bottom: 1px solid var(--b-border-soft); padding-bottom: 12px;
  min-height: 44px; display: flex; align-items: center;
  transition: color var(--b-tick) var(--b-ease-tick);
}
[data-design="b"] .rf-drawer__nav a:hover { color: var(--b-accent); }
[data-design="b"] .rf-drawer__actions {
  display: flex; flex-direction: column; gap: 16px;
}
[data-design="b"] .rf-drawer__phone {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--b-ink-2); font: 500 16px var(--b-font-mono);
  text-decoration: none; min-height: 44px;
  transition: color var(--b-tick) var(--b-ease-tick);
}
[data-design="b"] .rf-drawer__phone:hover { color: var(--b-accent); }

/* Drawer backdrop */
[data-design="b"] .rf-drawer-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(14,37,48,0.45);
}
[data-design="b"] .rf-drawer-backdrop[data-open="true"] { display: block; }


/* =============================================================
   HERO — E3 backdrop + text + E2 dual CTA
   ============================================================= */
[data-design="b"] .b-hero {
  position: relative;
  min-height: clamp(460px, 72vh, 680px);
  display: flex; align-items: center;
  overflow: hidden;
}
[data-design="b"] .b-hero__backdrop {
  position: absolute; inset: 0;
  z-index: 0;
}
[data-design="b"] .b-roofplane {
  width: 100%; height: 100%;
  display: block;
}

/* Course-lay animation: horizontal courses fade in sequentially,
   then sustain a slow ambient breath cycle — arrival then alive */
[data-design="b"] .b-hcourse-1 { animation: b-course-arrive 0.9s 0.3s var(--b-ease-settle) forwards,
                                              b-course-breathe 8s  1.2s ease-in-out infinite; }
[data-design="b"] .b-hcourse-2 { animation: b-course-arrive 0.9s 0.7s var(--b-ease-settle) forwards,
                                              b-course-breathe 8s  1.6s ease-in-out infinite; }
[data-design="b"] .b-hcourse-3 { animation: b-course-arrive 0.8s 1.1s var(--b-ease-settle) forwards,
                                              b-course-breathe 9s  2.0s ease-in-out infinite; }
[data-design="b"] .b-hcourse-4 { animation: b-course-arrive 0.8s 1.4s var(--b-ease-settle) forwards,
                                              b-course-breathe 9s  2.3s ease-in-out infinite; }
[data-design="b"] .b-hcourse-5 { animation: b-course-arrive 0.7s 1.7s var(--b-ease-settle) forwards,
                                              b-course-breathe 10s 2.7s ease-in-out infinite; }
[data-design="b"] .b-hcourse-6 { animation: b-course-arrive 0.7s 2.0s var(--b-ease-settle) forwards,
                                              b-course-breathe 10s 3.0s ease-in-out infinite; }
[data-design="b"] .b-hcourse-7 { animation: b-course-arrive 0.6s 2.3s var(--b-ease-settle) forwards,
                                              b-course-breathe 11s 3.3s ease-in-out infinite; }
[data-design="b"] .b-hcourse-8 { animation: b-course-arrive 0.6s 2.6s var(--b-ease-settle) forwards,
                                              b-course-breathe 11s 3.6s ease-in-out infinite; }

@keyframes b-course-arrive {
  from { stroke-opacity: 0; }
  to   { stroke-opacity: 0.70; }
}
@keyframes b-course-breathe {
  0%,100% { stroke-opacity: 0.55; }
  50%     { stroke-opacity: 0.90; }
}

/* Ridge draws across: from center outward */
[data-design="b"] .b-ridge {
  animation: b-ridge-draw 1.4s 0.1s var(--b-ease-settle) forwards;
}
@keyframes b-ridge-draw {
  0%   { x1: 450; x2: 450; stroke-opacity: 0; }
  100% { x1: 80;  x2: 820; stroke-opacity: 0.90; }
}
/* Note: SVG attribute animation via @keyframes doesn't work for x1/x2 natively.
   We use a CSS custom approach via stroke-dasharray instead. */
[data-design="b"] .b-ridge {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: b-ridge-dash 1.6s 0.2s var(--b-ease-settle) forwards,
             b-ridge-breathe 12s 2s ease-in-out infinite;
  x1: 80; x2: 820;  /* override to full span */
  stroke-opacity: 0.90;
}
@keyframes b-ridge-dash {
  from { stroke-dashoffset: 800; }
  to   { stroke-dashoffset: 0; }
}
@keyframes b-ridge-breathe {
  0%,100% { stroke-opacity: 0.85; }
  50%     { stroke-opacity: 1.00; }
}

/* Hero content */
[data-design="b"] .b-hero__content {
  position: relative; z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(80px, 12vw, 140px) clamp(20px, 5vw, 48px);
  text-align: left;
}

[data-design="b"] .b-hero__chip {
  display: inline-block;
  font: 600 11px/1 var(--b-font-sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--b-brass);
  border: 1px solid rgba(176,136,80,0.45);
  border-radius: var(--b-r-mark);
  padding: 5px 10px;
  margin-bottom: var(--b-leg);
}

/* Hero text — opacity:1 at first paint, NEVER opacity-gated */
[data-design="b"] .b-hero__headline {
  font-family: var(--b-font-display);
  font-weight: 500;
  font-size: clamp(34px, 6.5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--b-surface);
  margin-bottom: var(--b-course);
  text-shadow: 0 1px 6px rgba(14,37,48,0.50);
}
[data-design="b"] .b-hero__subtitle {
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.55;
  color: rgba(250,247,238,0.80);
  margin-bottom: var(--b-register);
  max-width: 52ch;
}
[data-design="b"] .b-hero__proof {
  font: 500 13px/1 var(--b-font-mono);
  letter-spacing: 0.06em;
  color: rgba(176,136,80,0.85);
  margin-bottom: var(--b-leg);
}

/* Hero CTAs */
[data-design="b"] .b-hero__ctas {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
[data-design="b"] .b-hero__phone-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px;
  padding: 11px 16px;
  font: 500 15px var(--b-font-mono);
  color: rgba(250,247,238,0.80);
  border: 1px solid rgba(250,247,238,0.25);
  border-radius: var(--b-r-mark);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: border-color var(--b-tick) var(--b-ease-tick),
              color var(--b-tick) var(--b-ease-tick),
              background var(--b-tick) var(--b-ease-tick);
}
[data-design="b"] .b-hero__phone-secondary:hover {
  border-color: rgba(176,136,80,0.60);
  color: var(--b-brass-soft);
  background: rgba(14,37,48,0.20);
}


/* =============================================================
   E2 — ANIMATED CTA ("Bezel" button)
   ============================================================= */
[data-design="b"] .rf-cta {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  background: var(--b-accent); color: var(--b-accent-on);
  border-radius: var(--b-r-bezel);
  font: 600 14px/1 var(--b-font-sans);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(216,189,138,0.55), 0 0 0 1px var(--b-accent-active);
  transition: transform var(--b-register-dur) var(--b-ease-register),
              background var(--b-tick) var(--b-ease-tick),
              box-shadow var(--b-tick) var(--b-ease-tick);
  will-change: transform;
  min-height: 44px; min-width: 44px;
  cursor: pointer;
  border: none;
}
[data-design="b"] .rf-cta__ring {
  position: absolute; inset: -8px; border-radius: var(--b-r-bezel);
  border: 1px solid rgba(26,92,122,0.5);
  pointer-events: none;
  animation: b-cta-breath var(--b-cycle-cta) ease-in-out infinite;
}
@keyframes b-cta-breath {
  0%,100% { transform: scale(1);    opacity: 0.55; }
  50%     { transform: scale(1.06); opacity: 0.95; }
}
[data-design="b"] .rf-cta:hover { background: var(--b-accent-hover); }
[data-design="b"] .rf-cta:hover .rf-cta__ring {
  animation: none; inset: -4px; opacity: 1;
  border-color: var(--b-accent);
}
[data-design="b"] .rf-cta:active {
  transform: translateY(1px);
  background: var(--b-accent-active);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18), 0 0 0 1px var(--b-accent-active);
}
[data-design="b"] .rf-cta:focus-visible {
  outline: none;
  box-shadow: inset 0 1px 0 rgba(216,189,138,0.55),
              0 0 0 1px var(--b-accent-active),
              0 0 0 4px rgba(26,92,122,0.30);
}
[data-design="b"] .rf-cta__arrow {
  display: inline-flex;
  transition: transform var(--b-register-dur) var(--b-ease-register);
}
[data-design="b"] .rf-cta[data-near-funnel="true"] .rf-cta__arrow {
  transform: translateY(2px);
}


/* =============================================================
   E6 — POINTER (between hero and funnel)
   Hydraulic-warm register: pressure-fill pipe + drip drop
   ============================================================= */
[data-design="b"] .b-pointer {
  display: flex;
  justify-content: center;
  padding: clamp(40px, 8vw, 80px) 16px clamp(56px, 10vw, 96px);
  /* Ensure visible at all times — never opacity-gated */
  opacity: 1;
  min-height: 160px; /* ensures bbox height > 8px at all widths */
}
[data-design="b"] .sd-pointer__hit {
  position: relative;
  display: inline-block;
  width: 2px;
  height: 96px;
  text-decoration: none;
  color: var(--b-brass);
}
[data-design="b"] .sd-pointer__pipe {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, currentColor 100%);
  transform-origin: top center;
  animation: b-pointer-fill 5s ease-in-out infinite;
}
[data-design="b"] .sd-pointer__drop {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: currentColor;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translateY(-72px) scale(0.4);
  animation: b-pointer-drip 5s ease-in infinite;
}
@keyframes b-pointer-fill {
  0%, 100% { transform: scaleY(0.4); opacity: 0.45; }
  60%      { transform: scaleY(1);   opacity: 0.85; }
}
@keyframes b-pointer-drip {
  0%, 55%  { transform: translateY(-72px) scale(0.4); opacity: 0; }
  70%      { transform: translateY(-72px) scale(1);   opacity: 1; }
  92%      { transform: translateY(0)     scale(1);   opacity: 1; }
  100%     { transform: translateY(0)     scale(0.2); opacity: 0; }
}


/* =============================================================
   E5 — FUNNEL (rf-interactive / rf-sounder)
   ============================================================= */
[data-design="b"] .rf-interactive {
  padding: var(--b-passage) clamp(16px, 4vw, 32px);
  max-width: 1280px; margin: 0 auto;
}
[data-design="b"] .rf-sounder {
  background: var(--b-surface);
  border-radius: var(--b-r-panel);
  box-shadow: var(--b-elev-ring);
  padding: clamp(24px, 4vw, 48px);
  position: relative; overflow: hidden;
}
[data-design="b"] .rf-sounder__head { margin-bottom: var(--b-leg); position: relative; }
[data-design="b"] .b-funnel__sub {
  font-size: 16px; color: var(--b-ink-2); margin-top: var(--b-register);
  max-width: 60ch;
}

/* Step indicators */
[data-design="b"] .rf-sounder__steps {
  position: absolute; top: 0; right: 0;
  display: flex; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
[data-design="b"] .rf-sounder__steps li {
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--b-border);
  display: grid; place-items: center;
  font: 500 12px var(--b-font-mono);
  color: var(--b-meta); background: var(--b-bg);
  transition: color var(--b-tick) var(--b-ease-tick),
              border-color var(--b-tick) var(--b-ease-tick),
              background var(--b-tick) var(--b-ease-tick);
}
[data-design="b"] .rf-sounder__steps li.is-active {
  color: var(--b-accent-on); background: var(--b-accent); border-color: var(--b-accent);
}

/* Panel */
[data-design="b"] .rf-sounder__panel { border: 0; padding: 0; margin: 0; }
[data-design="b"] .rf-sounder__panel[hidden] { display: none; }
[data-design="b"] .rf-sounder__panel[data-entering="true"] {
  animation: b-panel-in var(--b-settle) var(--b-ease-settle);
}
@keyframes b-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Step question */
[data-design="b"] .b-step__question {
  font-family: var(--b-font-display);
  font-size: clamp(20px, 3vw, 28px); font-weight: 500;
  color: var(--b-ink); margin-bottom: var(--b-course);
}

/* Chips */
[data-design="b"] .rf-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: var(--b-course);
}
[data-design="b"] .rf-chip {
  position: relative; cursor: pointer;
  padding: 18px 16px;
  border: 1px solid var(--b-border); border-radius: var(--b-r-panel);
  background: var(--b-bg);
  transition: border-color var(--b-tick) var(--b-ease-tick),
              background var(--b-tick) var(--b-ease-tick),
              transform var(--b-tick) var(--b-ease-tick);
  font: 500 16px/1.2 var(--b-font-display);
  color: var(--b-ink); display: block;
  min-height: 44px;
}
[data-design="b"] .rf-chip input {
  position: absolute; opacity: 0; pointer-events: none;
}
[data-design="b"] .rf-chip:hover { border-color: var(--b-accent); }
[data-design="b"] .rf-chip:has(input:checked) {
  border-color: var(--b-accent);
  background: color-mix(in oklab, var(--b-accent), transparent 88%);
  transform: translateY(-1px);
}
[data-design="b"] .rf-chip:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(26,92,122,0.30);
}

/* Urgency emergency note */
[data-design="b"] .b-urgency__note {
  font-size: 15px; color: var(--b-ink-2);
  background: color-mix(in oklab, var(--b-coral), transparent 88%);
  border: 1px solid rgba(194,91,69,0.30);
  border-radius: var(--b-r-panel);
  padding: 12px 16px; margin-bottom: var(--b-course);
}
[data-design="b"] .b-urgency__call {
  color: var(--b-coral); font: 600 15px var(--b-font-mono);
  text-decoration: none;
}

/* Fields — Step 5 */
[data-design="b"] .rf-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: var(--b-course);
}
[data-design="b"] .rf-field { display: flex; flex-direction: column; gap: 6px; }
[data-design="b"] .rf-field--wide { grid-column: 1 / -1; }
[data-design="b"] .rf-field__lbl {
  font: 600 11px var(--b-font-sans);
  text-transform: uppercase; letter-spacing: 0.10em; color: var(--b-muted);
}
[data-design="b"] .rf-field input,
[data-design="b"] .rf-field textarea {
  background: var(--b-surface-warm);
  border: 1px solid var(--b-border); border-radius: var(--b-r-mark);
  padding: 12px 14px; font: 500 15px/1.4 var(--b-font-mono);
  color: var(--b-ink); outline: none;
  transition: border-color var(--b-tick) var(--b-ease-tick),
              box-shadow var(--b-tick) var(--b-ease-tick);
  resize: vertical;
  min-height: 44px;
}
[data-design="b"] .rf-field input:focus-visible,
[data-design="b"] .rf-field textarea:focus-visible {
  border-color: var(--b-accent);
  box-shadow: 0 0 0 3px rgba(26,92,122,0.30);
}
[data-design="b"] .b-optional { color: var(--b-meta); font-weight: 400; }
[data-design="b"] .b-funnel__note {
  font-size: 13px; color: var(--b-muted); margin-bottom: var(--b-register);
}

/* Nav */
[data-design="b"] .rf-sounder__nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--b-course);
}
[data-design="b"] .rf-sounder__hint {
  font: 500 12px var(--b-font-mono); color: var(--b-meta); letter-spacing: 0.04em;
}
[data-design="b"] .rf-cta--inline {
  padding: 12px 22px; font-size: 13px;
}
[data-design="b"] .rf-cta--ghost {
  background: transparent; color: var(--b-ink);
  box-shadow: inset 0 0 0 1px var(--b-border);
}
[data-design="b"] .rf-cta--ghost:hover { background: var(--b-surface-warm); }

/* Ping (sonar feedback on step advance) */
[data-design="b"] .rf-ping {
  position: absolute; inset: 50% auto auto 50%;
  width: 12px; height: 12px; border-radius: 999px;
  border: 1px solid var(--b-accent);
  transform: translate(-50%,-50%);
  pointer-events: none; opacity: 0;
}
[data-design="b"] .rf-ping.is-pinging { animation: b-ping 700ms var(--b-ease-settle); }
@keyframes b-ping {
  0%   { opacity: 0.9; transform: translate(-50%,-50%) scale(0.5); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(20); }
}

/* Done state */
[data-design="b"] .rf-sounder__done {
  text-align: center; padding: 24px 0;
  animation: b-panel-in var(--b-settle) var(--b-ease-settle);
}
[data-design="b"] .rf-stamp {
  display: inline-block; padding: 8px 18px; margin-bottom: 16px;
  font: 700 14px var(--b-font-sans);
  letter-spacing: 0.20em; color: var(--b-phosphor);
  border: 2px solid var(--b-phosphor); border-radius: var(--b-r-mark);
  transform: rotate(-2deg);
}
[data-design="b"] .rf-sounder__doneMsg {
  font-family: var(--b-font-display);
  font-size: 20px; color: var(--b-ink); margin: 0 0 var(--b-course);
}
[data-design="b"] .b-done__phone {
  font-size: 15px; color: var(--b-ink-2);
}
[data-design="b"] .b-done__phone a {
  color: var(--b-accent); font: 600 15px var(--b-font-mono);
}

/* Below-funnel trust bar */
[data-design="b"] .b-funnel__trust {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: var(--b-leg);
  padding-top: var(--b-course);
  border-top: 1px solid var(--b-border-soft);
  font: 500 13px var(--b-font-mono);
  color: var(--b-muted); letter-spacing: 0.04em;
}
[data-design="b"] .b-trust__divider { color: var(--b-border); }
[data-design="b"] .b-funnel__trust a { color: var(--b-accent); text-decoration: none; }
[data-design="b"] .b-funnel__trust a:hover { text-decoration: underline; }


/* =============================================================
   SHARED SECTION UTILITIES
   ============================================================= */
[data-design="b"] .b-section-inner {
  max-width: 1280px; margin: 0 auto;
  padding: var(--b-passage) clamp(16px, 4vw, 32px);
}

[data-design="b"] .rf-eyebrow {
  font: 600 12px/1 var(--b-font-sans);
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--b-muted); margin: 0 0 var(--b-register);
}
[data-design="b"] .rf-display {
  font-family: var(--b-font-display);
  font-weight: 500; line-height: 1.05; letter-spacing: -0.018em;
  font-size: clamp(36px, 6vw, 72px);
  color: var(--b-ink); margin: 0 0 var(--b-course);
}
[data-design="b"] .rf-display--md {
  font-size: clamp(28px, 4vw, 44px); margin-bottom: var(--b-leg);
}
[data-design="b"] .rf-sr {
  position: absolute; left: -9999px;
}


/* =============================================================
   SERVICES — Manifest
   ============================================================= */
[data-design="b"] .b-services {
  background: var(--b-surface);
  border-top: 1px solid var(--b-border);
  border-bottom: 1px solid var(--b-border);
}
[data-design="b"] .b-manifest {
  list-style: none; padding: 0; margin: 0;
  background: var(--b-surface);
  border-radius: var(--b-r-panel);
  box-shadow: var(--b-elev-ring);
}
[data-design="b"] .b-manifest__row {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--b-bearing);
  row-gap: 4px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--b-border-soft);
  align-items: start;
}
[data-design="b"] .b-manifest__row:last-child { border-bottom: 0; }
[data-design="b"] .b-manifest__num {
  grid-row: 1 / 3; grid-column: 1;
  font: 500 14px var(--b-font-mono);
  color: var(--b-brass); letter-spacing: 0.04em;
  padding-top: 3px;
}
[data-design="b"] .b-manifest__title {
  font-family: var(--b-font-display);
  font-size: 20px; font-weight: 500; color: var(--b-ink);
}
[data-design="b"] .b-manifest__desc {
  font-size: 15px; line-height: 1.55; color: var(--b-ink-2);
}


/* =============================================================
   E3/AMBIENT-A — About with horizon plate
   ============================================================= */
[data-design="b"] .rf-ambient-a {
  display: grid; gap: var(--b-course);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  padding: var(--b-passage) clamp(16px, 4vw, 32px);
  max-width: 1280px; margin: 0 auto;
}
[data-design="b"] .rf-ambient-a__body {
  font-size: 18px; line-height: 1.55; color: var(--b-ink-2); max-width: 56ch;
}
[data-design="b"] .rf-ambient-a__body p + p { margin-top: var(--b-course); }
[data-design="b"] .rf-ambient-a__plate {
  background: var(--b-surface);
  border-radius: var(--b-r-panel);
  box-shadow: var(--b-elev-ring);
  aspect-ratio: 20/11;
  position: relative; overflow: hidden;
}
[data-design="b"] .rf-horizon { width: 100%; height: 100%; display: block; }
[data-design="b"] .rf-horizon__rule {
  transform-origin: center;
  animation: b-horizon-breath var(--b-cycle-horizon) ease-in-out infinite;
}
@keyframes b-horizon-breath {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-4px); }
}
[data-design="b"] .rf-horizon__tick {
  font: 500 9px var(--b-font-mono); fill: var(--b-meta); letter-spacing: 0.06em;
}
[data-design="b"] .rf-bubble {
  animation: b-bubble-rise 11s ease-in infinite;
  opacity: 0;
}
[data-design="b"] .rf-bubble--2 { animation-duration: 14s; animation-delay: 5s; }
@keyframes b-bubble-rise {
  0%   { transform: translateY(0)      scale(1);   opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-200px) scale(0.6); opacity: 0; }
}

/* About key-value rows */
[data-design="b"] .b-about__keyvals {
  margin-top: var(--b-leg);
  display: flex; flex-direction: column; gap: var(--b-register);
  border-top: 1px solid var(--b-border-soft);
  padding-top: var(--b-course);
}
[data-design="b"] .b-kv {
  display: flex; gap: var(--b-course); align-items: baseline;
}
[data-design="b"] .b-kv__label {
  font: 600 11px var(--b-font-sans);
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--b-muted); min-width: 100px; flex-shrink: 0;
}
[data-design="b"] .b-kv__val {
  font: 500 14px var(--b-font-mono);
  color: var(--b-ink-2); letter-spacing: 0.02em;
}


/* =============================================================
   E4 / AMBIENT-B — Process logbook
   ============================================================= */
[data-design="b"] .b-process { background: var(--b-bg); }
[data-design="b"] .rf-ambient-b { padding: var(--b-passage) clamp(16px, 4vw, 32px); }
[data-design="b"] .rf-logbook {
  background: var(--b-surface);
  border-radius: var(--b-r-panel);
  box-shadow: var(--b-elev-ring);
  padding: 6px 0;
}
[data-design="b"] .rf-logbook__row {
  display: grid;
  grid-template-columns: 40px 220px 1fr 140px;
  align-items: center; gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--b-border-soft);
}
[data-design="b"] .rf-logbook__row:last-child { border-bottom: 0; }
[data-design="b"] .rf-logbook__mark {
  font: 500 13px var(--b-font-mono);
  color: var(--b-brass); letter-spacing: 0.04em;
}
[data-design="b"] .rf-logbook__label {
  font: 600 12px/1 var(--b-font-sans);
  text-transform: uppercase; letter-spacing: 0.10em; color: var(--b-ink-2);
}
[data-design="b"] .rf-logbook__trace {
  position: relative; height: 1px;
  background: linear-gradient(to right, var(--b-border) 50%, transparent 50%);
  background-size: 6px 1px;
}
[data-design="b"] .rf-logbook__line {
  position: absolute; inset: 0 100% 0 0;
  background: var(--b-accent);
  transition: inset var(--b-settle) var(--b-ease-settle);
}
[data-design="b"] .rf-logbook__row[data-active="true"] .rf-logbook__line { inset: 0 0 0 0; }
[data-design="b"] .rf-logbook__value {
  font: 500 13px/1 var(--b-font-mono);
  color: var(--b-ink); text-align: right; letter-spacing: 0.02em;
  opacity: 0.35;
  transition: opacity var(--b-settle) var(--b-ease-settle);
}
[data-design="b"] .rf-logbook__row[data-active="true"] .rf-logbook__value { opacity: 1; }


/* =============================================================
   BEFORE / AFTER
   ============================================================= */
[data-design="b"] .b-beforeafter {
  background: var(--b-surface);
  border-top: 1px solid var(--b-border);
}
[data-design="b"] .b-beforeafter__note {
  font-size: 17px; line-height: 1.65; color: var(--b-ink-2);
  max-width: 72ch; margin-bottom: var(--b-leg);
}
[data-design="b"] .b-ba-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--b-course);
}
[data-design="b"] .b-ba-card {
  background: var(--b-bg);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-panel);
  overflow: hidden;
}
[data-design="b"] .b-ba-card__label {
  font: 700 11px var(--b-font-sans);
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 10px 16px 10px;
  border-bottom: 1px solid var(--b-border-soft);
}
[data-design="b"] .b-ba-card--before .b-ba-card__label { color: var(--b-coral); }
[data-design="b"] .b-ba-card--after  .b-ba-card__label { color: var(--b-phosphor); }
[data-design="b"] .b-ba-card__plate { width: 100%; display: block; }
[data-design="b"] .b-ba-card__plate svg { width: 100%; display: block; }
[data-design="b"] .b-ba-card__caption {
  font-size: 14px; line-height: 1.55; color: var(--b-ink-2);
  padding: 12px 16px 16px;
}


/* Repeated funnel CTA */
[data-design="b"] .b-repeat-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--b-course);
  padding: var(--b-leg) clamp(16px, 4vw, 32px);
  background: var(--b-surface);
  border-top: 1px solid var(--b-border-soft);
  border-bottom: 1px solid var(--b-border);
}
[data-design="b"] .b-repeat-cta__caption {
  font-family: var(--b-font-display);
  font-size: 22px; color: var(--b-ink);
}


/* =============================================================
   ROOF SYSTEMS
   ============================================================= */
[data-design="b"] .b-systems { background: var(--b-bg); }
[data-design="b"] .b-systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--b-course);
}
[data-design="b"] .b-system-card {
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-panel);
  padding: var(--b-bearing);
  box-shadow: var(--b-elev-ring);
}
[data-design="b"] .b-system-card__title {
  font-family: var(--b-font-display);
  font-size: 20px; font-weight: 500;
  color: var(--b-ink); margin-bottom: var(--b-register);
  padding-bottom: var(--b-register);
  border-bottom: 1px solid var(--b-brass);
  border-bottom-width: 1px;
}
[data-design="b"] .b-system-card p {
  font-size: 15px; line-height: 1.6; color: var(--b-ink-2);
}


/* =============================================================
   FOOTER — Vessel card
   ============================================================= */
[data-design="b"] .b-footer {
  background: var(--b-ink);
  border-top: 1px solid var(--b-brass);
}
[data-design="b"] .b-footer__inner {
  max-width: 1280px; margin: 0 auto;
  padding: var(--b-passage) clamp(16px, 4vw, 32px);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--b-leg);
}
[data-design="b"] .b-footer__firm {
  font-family: var(--b-font-display);
  font-size: 28px; color: var(--b-surface);
  font-weight: 500; margin-bottom: var(--b-mark);
}
[data-design="b"] .b-footer__area {
  font: 500 14px var(--b-font-mono);
  color: var(--b-muted); letter-spacing: 0.04em;
  margin-bottom: var(--b-gradation);
}
[data-design="b"] .b-footer__creds {
  font: 500 13px var(--b-font-mono);
  color: var(--b-meta); letter-spacing: 0.06em;
}
[data-design="b"] .b-footer__contact .rf-eyebrow { color: var(--b-meta); margin-bottom: var(--b-course); }
[data-design="b"] .b-footer__phone {
  display: block; font: 600 18px var(--b-font-mono);
  color: var(--b-surface); text-decoration: none;
  letter-spacing: 0.04em; margin-bottom: var(--b-course);
  min-height: 44px;
  transition: color var(--b-tick) var(--b-ease-tick);
}
[data-design="b"] .b-footer__phone:hover { color: var(--b-brass-soft); }
[data-design="b"] .rf-cta--footer { width: 100%; justify-content: center; }
[data-design="b"] .b-footer__nav { display: flex; flex-direction: column; gap: var(--b-register); }
[data-design="b"] .b-footer__nav .rf-eyebrow { color: var(--b-meta); margin-bottom: var(--b-course); }
[data-design="b"] .b-footer__nav a {
  font: 500 15px var(--b-font-sans);
  color: rgba(250,247,238,0.65); text-decoration: none;
  min-height: 44px; display: flex; align-items: center;
  transition: color var(--b-tick) var(--b-ease-tick);
}
[data-design="b"] .b-footer__nav a:hover { color: var(--b-surface); }
[data-design="b"] .b-footer__base {
  max-width: 1280px; margin: 0 auto;
  padding: var(--b-course) clamp(16px, 4vw, 32px);
  border-top: 1px solid rgba(201,187,159,0.20);
  font: 400 13px var(--b-font-mono);
  color: var(--b-meta); letter-spacing: 0.04em;
}


/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 860px) {
  [data-design="b"] .rf-ambient-a {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .rf-ambient-a__plate { aspect-ratio: 16/9; }
  [data-design="b"] .b-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  [data-design="b"] .b-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  [data-design="b"] .rf-logbook__row {
    grid-template-columns: 28px 1fr 100px;
  }
  [data-design="b"] .rf-logbook__trace { display: none; }
  [data-design="b"] .b-ba-grid { grid-template-columns: 1fr; }
  [data-design="b"] .b-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  [data-design="b"] .rf-fields { grid-template-columns: 1fr; }
  [data-design="b"] .rf-sounder__steps { top: -8px; }
  [data-design="b"] .b-hero__content {
    padding-top: clamp(60px, 10vw, 100px);
    padding-bottom: clamp(60px, 10vw, 100px);
  }
  [data-design="b"] .b-hero__ctas { flex-direction: column; align-items: flex-start; }
  [data-design="b"] .rf-chips {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  [data-design="b"] .rf-logo__mark { font-size: 18px; }
  [data-design="b"] .rf-menu-btn { padding: 6px 10px; }
  [data-design="b"] .rf-menu-btn__label { display: none; }
  [data-design="b"] .b-manifest__row {
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
  }
}
@media (max-width: 380px) {
  [data-design="b"] .rf-header__bar { min-height: 56px; }
  [data-design="b"] .rf-chips { grid-template-columns: 1fr; }
}


/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .rf-sonar-rect         { animation: none; transform: translateX(720px); }
  [data-design="b"] .rf-drawer             { transition: none; }
  [data-design="b"] .b-hcourse-1,
  [data-design="b"] .b-hcourse-2,
  [data-design="b"] .b-hcourse-3,
  [data-design="b"] .b-hcourse-4,
  [data-design="b"] .b-hcourse-5,
  [data-design="b"] .b-hcourse-6,
  [data-design="b"] .b-hcourse-7,
  [data-design="b"] .b-hcourse-8           { animation: none; stroke-opacity: 0.65; }
  [data-design="b"] .b-ridge               { animation: none; stroke-dashoffset: 0; stroke-opacity: 0.90; }
  [data-design="b"] .rf-cta__ring          { animation: none; opacity: 0.7; }
  [data-design="b"] .rf-cta                { transition: none; }
  [data-design="b"] .sd-pointer__pipe,
  [data-design="b"] .sd-pointer__drop      { animation: none; opacity: 0.5; transform: none; }
  [data-design="b"] .rf-sounder__panel[data-entering="true"] { animation: none; }
  [data-design="b"] .rf-ping.is-pinging    { animation: none; opacity: 0; }
  [data-design="b"] .rf-sounder__done      { animation: none; }
  [data-design="b"] .rf-chip               { transition: none; }
  [data-design="b"] .rf-horizon__rule      { animation: none; }
  [data-design="b"] .rf-bubble             { animation: none; opacity: 0.35; }
  [data-design="b"] .rf-logbook__line,
  [data-design="b"] .rf-logbook__value     { transition: none; }
  [data-design="b"] .rf-logbook__line      { inset: 0 0 0 0; }
  [data-design="b"] .rf-logbook__value     { opacity: 1; }
}


/* =============================================================
   MOBILE OVERFLOW HARD STOPS (required by contract)
   ============================================================= */
[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; }