/* ================================================================
   Deltawerk × Eco Home Roofing — Design B (design-b slot)
   All selectors scoped under [data-design="b"]
   Keyframes prefixed: dw- (Deltawerk vocabulary, remapped to slot b)
   ================================================================ */

/* ── Design tokens ─────────────────────────────────────────────── */
[data-design="b"] {
  --design-b-primary:  #0B3D91;

  --dw-paper:       #F2EDE2;
  --dw-paper-2:     #EAE3D3;
  --dw-ink:         #15171A;
  --dw-ink-2:       #3A3F46;
  --dw-rule:        #2A2F36;
  --dw-rule-soft:   #BFB7A4;
  --dw-signal:      #0B3D91;
  --dw-water:       #3E7DC9;
  --dw-pump:        #C8261C;
  --dw-sluice:      #2F7A3A;
  --dw-graphite:    #6B6F76;
  --dw-on-signal:   #F2EDE2;

  --dw-font-display: "Inter Tight","Helvetica Neue",-apple-system,system-ui,sans-serif;
  --dw-font-body:    "Inter Tight","Helvetica Neue",-apple-system,system-ui,sans-serif;
  --dw-font-mono:    "JetBrains Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;

  --dw-step-hair:  1px;
  --dw-step-pin:   4px;
  --dw-step-cell:  8px;
  --dw-step-row:   16px;
  --dw-step-bay:   24px;
  --dw-step-bank:  40px;
  --dw-step-span:  64px;
  --dw-step-flood: 112px;

  --dw-dur-tick:    120ms;
  --dw-dur-settle:  220ms;
  --dw-dur-prime:   720ms;
  --dw-dur-cycle:   18s;
  --dw-ease-settle: cubic-bezier(0.32, 0.94, 0.4, 1);
  --dw-ease-prime:  cubic-bezier(0.65, 0.05, 0.36, 1);
  --dw-ease-isobath:cubic-bezier(0.45, 0, 0.55, 1);

  --dw-radius-hair: 1px;
  --dw-radius-pin:  2px;
  --dw-radius-bay:  6px;

  background: var(--dw-paper);
  color: var(--dw-ink);
  font: 400 17px/1.55 var(--dw-font-body);
  font-variant-numeric: tabular-nums;
}

/* ── Reset helpers ─────────────────────────────────────────────── */
[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"] dl,[data-design="b"] figure {
  margin: 0;
}

/* ── Eyebrow ───────────────────────────────────────────────────── */
[data-design="b"] .dw-eyebrow {
  font: 500 12px/1 var(--dw-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dw-ink-2);
}

/* ════════════════════════════════════════════════════════════════
   E1 — HEADER
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dw-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--dw-paper);
  border-bottom: 1px solid var(--dw-rule-soft);
}
[data-design="b"] .dw-header__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dw-step-row);
  padding: var(--dw-step-bay) clamp(16px, 4vw, 40px);
  max-width: 1440px; margin-inline: auto;
}
[data-design="b"] .dw-logo { text-decoration: none; color: var(--dw-ink); }
[data-design="b"] .dw-logo__mark {
  font: 600 18px/1 var(--dw-font-display);
  letter-spacing: 0.18em; text-transform: uppercase;
}
[data-design="b"] .dw-burger {
  width: 44px; height: 44px; display: grid; gap: 4px; align-content: center;
  padding: 10px; background: transparent; border: 1px solid var(--dw-rule);
  border-radius: var(--dw-radius-pin); cursor: pointer;
  transition: border-color var(--dw-dur-settle) var(--dw-ease-settle);
  flex-shrink: 0;
}
[data-design="b"] .dw-burger:hover { border-color: var(--dw-signal); }
[data-design="b"] .dw-burger:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--dw-paper), 0 0 0 4px var(--dw-signal);
}
[data-design="b"] .dw-burger__bar {
  display: block; height: 1px; background: var(--dw-ink);
  transition: transform var(--dw-dur-settle) var(--dw-ease-settle);
}
[data-design="b"] .dw-burger[aria-expanded="true"] .dw-burger__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
[data-design="b"] .dw-burger[aria-expanded="true"] .dw-burger__bar:nth-child(2) { transform: scaleX(0); }
[data-design="b"] .dw-burger[aria-expanded="true"] .dw-burger__bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Isobath atmosphere */
[data-design="b"] .dw-header__atmos {
  position: absolute; inset: auto 0 6px 0; height: 6px; overflow: hidden; pointer-events: none;
}
[data-design="b"] .dw-isobath { width: 100%; height: 100%; display: block; }
[data-design="b"] .dw-isobath__line {
  fill: none; stroke: var(--dw-water); stroke-width: 1; stroke-linecap: round;
  opacity: 0.55;
  animation: dw-isobath-drift 27s var(--dw-ease-isobath) infinite,
             dw-isobath-breathe 18s var(--dw-ease-isobath) infinite;
}
@keyframes dw-isobath-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-22px); }
  100% { transform: translateX(0); }
}
@keyframes dw-isobath-breathe {
  0%, 100% { opacity: 0.55; stroke-width: 1; }
  50%      { opacity: 0.95; stroke-width: 1.3; }
}

/* Drawer / sheet */
[data-design="b"] .dw-sheet {
  position: fixed; inset: 0 0 0 auto; width: min(480px, 100vw);
  background: var(--dw-paper);
  border-left: 1px solid var(--dw-rule);
  transform: translateX(100%);
  transition: transform var(--dw-dur-prime) var(--dw-ease-prime);
  z-index: 60;
  overflow-y: auto;
}
[data-design="b"] .dw-sheet:not([hidden]) { transform: translateX(0); }
[data-design="b"] .dw-sheet[hidden] { display: none; }
[data-design="b"] .dw-sheet__inner {
  padding: var(--dw-step-bank) var(--dw-step-bay);
  display: grid; gap: var(--dw-step-row);
}
[data-design="b"] .dw-sheet__close {
  background: transparent; border: 1px solid var(--dw-rule); border-radius: var(--dw-radius-pin);
  padding: 8px 12px; cursor: pointer; font: 500 16px/1 var(--dw-font-mono);
  color: var(--dw-ink); justify-self: end; min-width: 44px; min-height: 44px;
  transition: border-color var(--dw-dur-settle) var(--dw-ease-settle);
}
[data-design="b"] .dw-sheet__close:hover { border-color: var(--dw-signal); }
[data-design="b"] .dw-sheet__ctas {
  display: grid; gap: var(--dw-step-row); margin-top: var(--dw-step-bank);
  padding-top: var(--dw-step-row); border-top: 1px solid var(--dw-rule-soft);
}
[data-design="b"] .dw-nav a {
  display: block; padding: 12px 0;
  font: 500 22px/1.2 var(--dw-font-display);
  color: var(--dw-ink); text-decoration: none;
  border-bottom: 1px solid var(--dw-rule-soft);
}
[data-design="b"] .dw-nav a:hover { color: var(--dw-signal); }
[data-design="b"] .dw-phone-link {
  display: block; padding: 14px 0; text-align: center;
  font: 500 18px/1 var(--dw-font-mono); color: var(--dw-ink); text-decoration: none;
  border: 1px solid var(--dw-rule); border-radius: var(--dw-radius-pin);
  min-height: 44px;
  transition: border-color var(--dw-dur-settle) var(--dw-ease-settle);
}
[data-design="b"] .dw-phone-link:hover { border-color: var(--dw-signal); color: var(--dw-signal); }
[data-design="b"] .dw-sheet__backdrop {
  position: fixed; inset: 0; z-index: 59;
  background: rgba(242,237,226,0.72);
  backdrop-filter: blur(2px);
}
[data-design="b"] .dw-sheet__backdrop[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════
   E3 — HERO (themed-movement schematic: roofline draw + ambient course fill)
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dw-hero {
  position: relative; isolation: isolate;
  min-height: clamp(520px, 72vh, 800px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--dw-ink);
}
[data-design="b"] .dw-hero__backdrop {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
[data-design="b"] .dw-hero__svg {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}

/* Ambient wash — perceptible ongoing motion (v0.2.1 requirement) */
[data-design="b"] .b-hero-wash {
  animation: dw-hero-wash 12s var(--dw-ease-isobath) infinite;
}
@keyframes dw-hero-wash {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 0.90; }
}

/* Roofline draw-in arrival (2.8s), then subtle opacity breath at rest */
[data-design="b"] .b-roofline {
  stroke-dasharray: 3200;
  stroke-dashoffset: 3200;
  animation:
    dw-roofline-draw 2.8s var(--dw-ease-prime) forwards,
    dw-roofline-breathe 9s 2.8s var(--dw-ease-isobath) infinite;
}
@keyframes dw-roofline-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes dw-roofline-breathe {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

/* Course-lay: courses draw in sequentially, then breathe */
[data-design="b"] .b-course {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
}
[data-design="b"] .b-course--1 { animation: dw-course-in 1.4s 1.2s var(--dw-ease-prime) forwards, dw-course-breathe 11s 2.8s var(--dw-ease-isobath) infinite; }
[data-design="b"] .b-course--2 { animation: dw-course-in 1.4s 1.5s var(--dw-ease-prime) forwards, dw-course-breathe 13s 2.8s var(--dw-ease-isobath) infinite; }
[data-design="b"] .b-course--3 { animation: dw-course-in 1.4s 1.8s var(--dw-ease-prime) forwards, dw-course-breathe 17s 2.8s var(--dw-ease-isobath) infinite; }
[data-design="b"] .b-course--4 { animation: dw-course-in 1.4s 2.0s var(--dw-ease-prime) forwards, dw-course-breathe 19s 2.8s var(--dw-ease-isobath) infinite; }
[data-design="b"] .b-course--5 { animation: dw-course-in 1.4s 2.2s var(--dw-ease-prime) forwards, dw-course-breathe 23s 2.8s var(--dw-ease-isobath) infinite; }
[data-design="b"] .b-course--6 { animation: dw-course-in 1.4s 2.4s var(--dw-ease-prime) forwards, dw-course-breathe 29s 2.8s var(--dw-ease-isobath) infinite; }
[data-design="b"] .b-course--7 { animation: dw-course-in 1.4s 2.6s var(--dw-ease-prime) forwards, dw-course-breathe 31s 2.8s var(--dw-ease-isobath) infinite; }
@keyframes dw-course-in {
  to { stroke-dashoffset: 0; }
}
@keyframes dw-course-breathe {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.38; }
}

/* Ridge accent fades in after roofline draws */
[data-design="b"] .b-ridge-accent {
  animation: dw-ridge-in 1.2s 3s var(--dw-ease-settle) forwards, dw-ridge-breathe 15s 4.2s var(--dw-ease-isobath) infinite;
}
@keyframes dw-ridge-in {
  from { stroke-opacity: 0; }
  to   { stroke-opacity: 0.35; }
}
@keyframes dw-ridge-breathe {
  0%, 100% { stroke-opacity: 0.28; }
  50%      { stroke-opacity: 0.55; }
}

/* Isobath in hero */
[data-design="b"] .b-hero-isobath {
  animation: dw-hero-iso 22s var(--dw-ease-isobath) infinite;
}
@keyframes dw-hero-iso {
  0%, 100% { transform: translateX(0) translateY(0); opacity: 0.22; }
  50%      { transform: translateX(-18px) translateY(6px); opacity: 0.38; }
}

/* Hero content */
[data-design="b"] .dw-hero__content {
  position: relative; z-index: 1;
  padding: clamp(64px, 10vh, 128px) clamp(16px, 5vw, 80px);
  max-width: 900px;
  display: grid; gap: var(--dw-step-bay);
}
[data-design="b"] .b-hero-eyebrow {
  color: var(--dw-water);
  font: 500 12px/1 var(--dw-font-mono);
  letter-spacing: 0.18em; text-transform: uppercase;
}
[data-design="b"] .dw-hero__headline {
  font: 600 clamp(36px, 5.5vw, 72px)/1.0 var(--dw-font-display);
  letter-spacing: -0.022em;
  color: var(--dw-paper);
  /* opacity:1 at first paint — NEVER opacity:0 */
}
[data-design="b"] .dw-hero__subtitle {
  font: 400 clamp(17px, 2vw, 22px)/1.45 var(--dw-font-body);
  color: var(--dw-rule-soft);
  max-width: 56ch;
}
[data-design="b"] .dw-hero__proof {
  font: 500 13px/1.3 var(--dw-font-mono);
  letter-spacing: 0.08em; color: var(--dw-graphite);
}
[data-design="b"] .dw-hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--dw-step-row); align-items: center;
  margin-top: var(--dw-step-cell);
}
[data-design="b"] .dw-phone-hero {
  font: 500 16px/1 var(--dw-font-mono);
  color: var(--dw-rule-soft); text-decoration: none;
  padding: 14px 0; min-height: 44px; display: flex; align-items: center;
  letter-spacing: 0.04em;
  transition: color var(--dw-dur-settle) var(--dw-ease-settle);
}
[data-design="b"] .dw-phone-hero:hover { color: var(--dw-water); }

/* ════════════════════════════════════════════════════════════════
   E2 — CTA (primer-fill button)
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dw-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--dw-step-row);
  padding: 16px 28px;
  background: var(--dw-paper-2);
  color: var(--dw-ink);
  border: 1px solid var(--dw-rule);
  border-radius: var(--dw-radius-pin);
  text-decoration: none;
  font: 500 15px/1 var(--dw-font-display);
  letter-spacing: 0.06em; text-transform: uppercase;
  min-height: 48px;
  transition:
    color var(--dw-dur-settle) var(--dw-ease-settle),
    border-color var(--dw-dur-settle) var(--dw-ease-settle),
    transform var(--dw-dur-tick) var(--dw-ease-settle);
}
[data-design="b"] .dw-cta__primer {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(60deg, var(--dw-signal) 0%, var(--dw-signal) 40%, var(--dw-water) 55%, transparent 75%);
  transform: translate(-110%, 0);
  animation: dw-cta-prime 5.2s var(--dw-ease-prime) infinite;
}
[data-design="b"] .dw-cta__arrow {
  display: inline-flex;
  transition: transform var(--dw-dur-settle) var(--dw-ease-settle);
}
[data-design="b"] .dw-cta__stamp {
  position: absolute; right: 12px; bottom: 6px;
  font: 500 11px/1 var(--dw-font-mono);
  letter-spacing: 0.14em; color: var(--dw-on-signal);
  pointer-events: none;
  /* initially hidden via display:none toggled by JS — not opacity:0 */
  display: none;
}
[data-design="b"] .dw-cta:hover {
  color: var(--dw-on-signal); border-color: var(--dw-signal);
}
[data-design="b"] .dw-cta:hover .dw-cta__primer {
  animation: none; transform: translate(0, 0);
  transition: transform var(--dw-dur-prime) var(--dw-ease-prime);
}
[data-design="b"] .dw-cta:hover .dw-cta__arrow { transform: translateX(4px); }
[data-design="b"] .dw-cta:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--dw-paper), 0 0 0 4px var(--dw-signal);
}
[data-design="b"] .dw-cta:active { transform: translateY(1px); }
[data-design="b"] .dw-cta.is-stamped .dw-cta__stamp {
  display: block;
  animation: dw-cta-stamp 600ms var(--dw-ease-settle) forwards;
}
@keyframes dw-cta-prime {
  0%   { transform: translate(-110%, 0); }
  55%  { transform: translate(0, 0); }
  70%  { transform: translate(0, 0); }
  100% { transform: translate(110%, 0); }
}
@keyframes dw-cta-stamp {
  0%   { opacity: 0; transform: scale(0.92); }
  30%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.0); }
}

/* ════════════════════════════════════════════════════════════════
   E6 — POINTER (between hero and funnel)
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dw-pointer {
  display: flex;
  justify-content: center;
  padding: clamp(40px, 8vw, 80px) 16px clamp(56px, 10vw, 96px);
  color: var(--dw-signal);
  /* Wrapper MUST be opacity:1 and have height ≥ 8px */
  opacity: 1;
  min-height: 80px;
}
[data-design="b"] .dw-pointer__hit {
  position: relative;
  display: inline-block;
  width: 2px;
  height: 96px;
  text-decoration: none;
  color: var(--dw-signal);
}
[data-design="b"] .dw-pointer__pipe {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, currentColor 100%);
  transform-origin: top center;
  animation: dw-pointer-fill 5s ease-in-out infinite;
  opacity: 0.7;
}
[data-design="b"] .dw-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);
  opacity: 0;
  animation: dw-pointer-drip 5s ease-in infinite;
}
@keyframes dw-pointer-fill {
  0%, 100% { transform: scaleY(0.4); opacity: 0.45; }
  60%      { transform: scaleY(1);   opacity: 0.85; }
}
@keyframes dw-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
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dw-interactive {
  padding: var(--dw-step-flood) clamp(16px, 4vw, 40px);
  max-width: 1440px; margin-inline: auto;
  background: var(--dw-paper);
  border-top: 1px solid var(--dw-rule-soft);
}
[data-design="b"] .dw-funnel__head {
  display: grid; gap: var(--dw-step-row); max-width: 60ch; margin-bottom: var(--dw-step-span);
}
[data-design="b"] .dw-funnel__title {
  margin: 0; font: 600 clamp(36px, 6vw, 64px)/1.02 var(--dw-font-display);
  letter-spacing: -0.026em; color: var(--dw-ink);
}
[data-design="b"] .dw-funnel__lede { margin: 0; font: 400 18px/1.5 var(--dw-font-body); color: var(--dw-ink-2); }
[data-design="b"] .dw-funnel {
  display: grid; grid-template-columns: 1fr min(400px, 36%); gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
[data-design="b"] .dw-funnel__pane {
  background: var(--dw-paper-2);
  border: 1px solid var(--dw-rule);
  border-radius: var(--dw-radius-bay);
  padding: clamp(20px, 3vw, 40px);
}
[data-design="b"] .dw-funnel__step { display: grid; gap: var(--dw-step-row); }
[data-design="b"] .dw-funnel__step[hidden] { display: none; }
[data-design="b"] .dw-funnel__step.is-active {
  animation: dw-step-in 320ms var(--dw-ease-settle) both;
}
[data-design="b"] .dw-funnel__legend {
  margin: 0; font: 600 22px/1.2 var(--dw-font-display); letter-spacing: -0.018em; color: var(--dw-ink);
}
[data-design="b"] .b-funnel-note {
  font: 400 14px/1.5 var(--dw-font-body); color: var(--dw-ink-2); margin: 0;
}
[data-design="b"] .b-fields { display: grid; gap: var(--dw-step-row); }
[data-design="b"] .dw-chips {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--dw-step-cell);
}
[data-design="b"] .dw-chip { position: relative; display: block; cursor: pointer; }
[data-design="b"] .dw-chip input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
[data-design="b"] .dw-chip span {
  display: grid; gap: 2px; padding: 14px 16px;
  background: var(--dw-paper); border: 1px solid var(--dw-rule); border-radius: var(--dw-radius-pin);
  font: 500 15px/1.2 var(--dw-font-body); color: var(--dw-ink);
  transition:
    border-color var(--dw-dur-settle) var(--dw-ease-settle),
    background var(--dw-dur-settle) var(--dw-ease-settle);
}
[data-design="b"] .dw-chip span small {
  font: 400 12px/1.2 var(--dw-font-mono); color: var(--dw-ink-2); letter-spacing: 0.06em;
}
[data-design="b"] .dw-chip input:checked + span {
  border-color: var(--dw-signal); background: var(--dw-paper);
  box-shadow: inset 0 0 0 1px var(--dw-signal);
}
[data-design="b"] .dw-chip input:focus-visible + span {
  box-shadow: 0 0 0 2px var(--dw-paper-2), 0 0 0 4px var(--dw-signal);
}
[data-design="b"] .dw-field { display: grid; gap: 6px; }
[data-design="b"] .dw-field__label {
  font: 500 14px/1.2 var(--dw-font-body); color: var(--dw-ink);
}
[data-design="b"] .dw-field__label small {
  display: block; font: 400 12px/1.4 var(--dw-font-mono); color: var(--dw-ink-2);
  letter-spacing: 0.06em; margin-top: 2px;
}
[data-design="b"] .dw-input {
  width: 100%; padding: 12px 14px;
  background: var(--dw-paper); border: 1px solid var(--dw-rule); border-radius: var(--dw-radius-pin);
  font: 400 16px/1.3 var(--dw-font-body); color: var(--dw-ink);
  transition: border-color var(--dw-dur-settle) var(--dw-ease-settle);
}
[data-design="b"] .dw-input:focus-visible { outline: none; border-color: var(--dw-signal); }
[data-design="b"] .dw-input--area { resize: vertical; min-height: 88px; font-family: var(--dw-font-body); }
[data-design="b"] .dw-funnel__nav {
  display: flex; gap: var(--dw-step-cell); justify-content: flex-end; align-items: center;
  margin-top: var(--dw-step-bay); padding-top: var(--dw-step-row); border-top: 1px solid var(--dw-rule-soft);
}
[data-design="b"] .dw-btn {
  padding: 12px 22px; border-radius: var(--dw-radius-pin); cursor: pointer;
  font: 500 14px/1 var(--dw-font-display); letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--dw-rule); background: var(--dw-paper); color: var(--dw-ink);
  min-height: 44px;
  transition:
    background var(--dw-dur-settle) var(--dw-ease-settle),
    color var(--dw-dur-settle) var(--dw-ease-settle),
    border-color var(--dw-dur-settle) var(--dw-ease-settle);
}
[data-design="b"] .dw-btn--primary { background: var(--dw-signal); color: var(--dw-on-signal); border-color: var(--dw-signal); }
[data-design="b"] .dw-btn--primary:hover { background: color-mix(in oklab, var(--dw-signal), black 10%); }
[data-design="b"] .dw-btn--ghost { background: transparent; }
[data-design="b"] .dw-btn--ghost:hover { background: var(--dw-paper); }
[data-design="b"] .dw-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--dw-paper-2), 0 0 0 4px var(--dw-signal);
}
[data-design="b"] .dw-btn[hidden] { display: none; }

/* Funnel progress sidebar */
[data-design="b"] .dw-funnel__gauge {
  display: grid; align-content: start; gap: var(--dw-step-row);
  padding: clamp(20px, 3vw, 36px);
  background: var(--dw-paper-2); border: 1px solid var(--dw-rule); border-radius: var(--dw-radius-bay);
  position: sticky; top: calc(80px + var(--dw-step-row));
}
[data-design="b"] .b-progress-steps {
  display: grid; gap: 0;
  border-top: 1px solid var(--dw-rule-soft);
}
[data-design="b"] .b-prog-step {
  display: grid; grid-template-columns: 36px 1fr; gap: var(--dw-step-cell);
  align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--dw-rule-soft);
  font: 400 15px/1.3 var(--dw-font-body); color: var(--dw-graphite);
  transition: color var(--dw-dur-settle) var(--dw-ease-settle);
}
[data-design="b"] .b-prog-step.is-done { color: var(--dw-sluice); }
[data-design="b"] .b-prog-step.is-active { color: var(--dw-signal); font-weight: 600; }
[data-design="b"] .b-prog-num {
  font: 500 12px/1 var(--dw-font-mono); letter-spacing: 0.1em; color: inherit;
}
[data-design="b"] .b-prog-label { font: inherit; }
[data-design="b"] .dw-flowbars {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 48px; align-items: end;
  margin-top: var(--dw-step-cell);
}
[data-design="b"] .dw-flowbars__bar {
  height: 6%; background: linear-gradient(180deg, var(--dw-water), var(--dw-signal));
  border-radius: 1px;
  transition: height var(--dw-dur-prime) var(--dw-ease-prime);
}
[data-design="b"] .dw-funnel__small {
  margin: 0; font: 400 12px/1.4 var(--dw-font-mono); color: var(--dw-ink-2); letter-spacing: 0.06em;
}
[data-design="b"] .dw-funnel__small--gauge {
  padding-top: var(--dw-step-cell); border-top: 1px solid var(--dw-rule-soft);
}
[data-design="b"] .dw-stamp {
  display: inline-block; padding: 6px 14px;
  border: 1.5px solid var(--dw-sluice); color: var(--dw-sluice);
  font: 500 12px/1 var(--dw-font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  transform: rotate(-2deg);
  animation: dw-stamp-in 380ms var(--dw-ease-settle) both;
}
[data-design="b"] .dw-spec {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0;
  font-family: var(--dw-font-mono); font-size: 13px;
}
[data-design="b"] .dw-spec dt {
  color: var(--dw-ink-2); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px;
}
[data-design="b"] .dw-spec dd { color: var(--dw-ink); margin: 0; }

@keyframes dw-step-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes dw-stamp-in {
  0%   { opacity: 0; transform: rotate(-12deg) scale(0.7); }
  60%  { opacity: 1; transform: rotate(-2deg) scale(1.04); }
  100% { opacity: 1; transform: rotate(-2deg) scale(1.0); }
}

/* ════════════════════════════════════════════════════════════════
   SERVICES SECTION
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .b-services {
  padding: var(--dw-step-flood) clamp(16px, 4vw, 40px);
  background: var(--dw-paper-2);
  border-top: 1px solid var(--dw-rule-soft);
}
[data-design="b"] .b-section-inner { max-width: 1040px; margin-inline: auto; }
[data-design="b"] .b-section-title {
  font: 600 clamp(32px, 5vw, 56px)/1.04 var(--dw-font-display);
  letter-spacing: -0.022em; color: var(--dw-ink); margin-bottom: var(--dw-step-row);
}
[data-design="b"] .b-section-lede {
  font: 400 18px/1.55 var(--dw-font-body); color: var(--dw-ink-2);
  max-width: 60ch; margin-bottom: var(--dw-step-span);
}
[data-design="b"] .b-service-list {
  list-style: none; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--dw-rule);
}
[data-design="b"] .b-service-row {
  display: grid;
  grid-template-columns: 48px 1fr 180px;
  gap: var(--dw-step-row);
  padding: var(--dw-step-bank) 0;
  border-bottom: 1px solid var(--dw-rule-soft);
  align-items: start;
}
[data-design="b"] .b-service-idx {
  font: 500 13px/1 var(--dw-font-mono); color: var(--dw-ink-2);
  letter-spacing: 0.1em; padding-top: 4px;
}
[data-design="b"] .b-service-body strong {
  display: block; font: 600 18px/1.2 var(--dw-font-display);
  color: var(--dw-ink); margin-bottom: var(--dw-step-cell);
}
[data-design="b"] .b-service-body p {
  font: 400 16px/1.55 var(--dw-font-body); color: var(--dw-ink-2); max-width: 52ch;
}
[data-design="b"] .b-service-tag {
  font: 500 12px/1.4 var(--dw-font-mono); color: var(--dw-graphite);
  letter-spacing: 0.08em; text-align: right; padding-top: 4px;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════
   E3 — AMBIENT A (service manifold — adapted for roofing)
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dw-ambient-a {
  padding: var(--dw-step-flood) clamp(16px, 4vw, 40px);
  background: var(--dw-paper);
  border-top: 1px solid var(--dw-rule-soft);
  border-bottom: 1px solid var(--dw-rule-soft);
  max-width: 1440px; margin-inline: auto;
}
[data-design="b"] .dw-ambient-a__head {
  display: grid; gap: var(--dw-step-row); max-width: 60ch; margin-bottom: var(--dw-step-span);
}
[data-design="b"] .dw-ambient-a__title {
  margin: 0; font: 600 clamp(40px, 7vw, 80px)/0.98 var(--dw-font-display);
  letter-spacing: -0.028em; color: var(--dw-ink);
}
[data-design="b"] .dw-ambient-a__lede {
  margin: 0; font: 400 22px/1.45 var(--dw-font-body); color: var(--dw-ink-2);
}
[data-design="b"] .dw-manifold {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(8px, 1.5vw, 18px);
  margin-bottom: var(--dw-step-bank);
}
[data-design="b"] .dw-valve {
  position: relative; aspect-ratio: 1/6; min-height: 84px;
  background: var(--dw-paper-2);
  border: 1px solid var(--dw-rule); border-radius: var(--dw-radius-pin);
  overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
}
[data-design="b"] .dw-valve__fill {
  position: absolute; inset: auto 0 0 0; height: 0%;
  background: linear-gradient(180deg, var(--dw-water) 0%, var(--dw-signal) 100%);
  animation: dw-valve-cycle var(--dw-cycle, 17s) var(--dw-ease-isobath) infinite;
  animation-play-state: paused;
}
[data-design="b"] .dw-ambient-a.is-active .dw-valve__fill { animation-play-state: running; }
[data-design="b"] .dw-valve__label {
  position: relative; padding: 4px;
  font: 500 11px/1 var(--dw-font-mono); color: var(--dw-ink-2); letter-spacing: 0.12em;
}
@keyframes dw-valve-cycle {
  0%   { height: 6%; }
  45%  { height: 92%; }
  55%  { height: 92%; }
  100% { height: 6%; }
}
[data-design="b"] .dw-manifold__legend {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--dw-step-row) var(--dw-step-bay);
  border-top: 1px solid var(--dw-rule);
  padding-top: var(--dw-step-bay);
}
[data-design="b"] .dw-manifold__legend li {
  display: grid; grid-template-columns: 36px 1fr; gap: var(--dw-step-cell);
  font: 400 15px/1.45 var(--dw-font-body); color: var(--dw-ink);
}
[data-design="b"] .dw-manifold__legend li::before {
  content: attr(data-index); font-family: var(--dw-font-mono);
  font-size: 12px; color: var(--dw-ink-2); letter-spacing: 0.1em; padding-top: 4px;
}

/* ════════════════════════════════════════════════════════════════
   PROCESS SECTION
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .b-process {
  padding: var(--dw-step-flood) clamp(16px, 4vw, 40px);
  background: var(--dw-paper-2);
  border-top: 1px solid var(--dw-rule-soft);
}
[data-design="b"] .b-process-list {
  list-style: none; padding: 0; margin-top: var(--dw-step-span);
  display: grid; gap: 0;
  border-top: 1px solid var(--dw-rule);
}
[data-design="b"] .b-process-step {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--dw-step-row);
  padding: var(--dw-step-bank) 0;
  border-bottom: 1px solid var(--dw-rule-soft);
}
[data-design="b"] .b-proc-num {
  font: 500 13px/1 var(--dw-font-mono); color: var(--dw-signal);
  letter-spacing: 0.1em; padding-top: 6px;
}
[data-design="b"] .b-proc-body strong {
  display: block; font: 600 18px/1.2 var(--dw-font-display); color: var(--dw-ink);
  margin-bottom: var(--dw-step-cell);
}
[data-design="b"] .b-proc-body p {
  font: 400 16px/1.55 var(--dw-font-body); color: var(--dw-ink-2); max-width: 56ch;
}

/* ════════════════════════════════════════════════════════════════
   E4 — AMBIENT B (polder grid — About section)
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dw-ambient-b {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--dw-step-flood) clamp(16px, 4vw, 40px);
  background: var(--dw-paper);
  max-width: 1440px; margin-inline: auto;
}
[data-design="b"] .dw-polder__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, var(--dw-rule-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dw-rule-soft) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%, 100% calc(100% / 6);
  opacity: 0.55;
}
[data-design="b"] .dw-polder__cell {
  position: absolute;
  background: var(--dw-signal); opacity: 0;
  animation: dw-polder-ping 1.6s var(--dw-ease-prime) forwards;
}
@keyframes dw-polder-ping {
  0%   { opacity: 0; }
  18%  { opacity: 0.34; }
  100% { opacity: 0; }
}
[data-design="b"] .dw-polder__content {
  position: relative; z-index: 1;
  display: grid; gap: var(--dw-step-row); max-width: 880px;
}
[data-design="b"] .dw-polder__title {
  margin: 0; font: 600 clamp(40px, 6vw, 64px)/1.02 var(--dw-font-display);
  letter-spacing: -0.026em; color: var(--dw-ink);
}
[data-design="b"] .dw-polder__lede {
  margin: 0; font: 400 18px/1.55 var(--dw-font-body); color: var(--dw-ink-2); max-width: 60ch;
}
[data-design="b"] .dw-polder__roll {
  margin-top: var(--dw-step-bank);
  display: grid; gap: 0;
  border-top: 1px solid var(--dw-rule);
}
[data-design="b"] .dw-polder__roll > * {
  display: grid; grid-template-columns: 120px 1fr 120px 180px;
  gap: var(--dw-step-row);
  padding: var(--dw-step-row) 0;
  border-bottom: 1px solid var(--dw-rule-soft);
  font: 400 15px/1.4 var(--dw-font-body); color: var(--dw-ink);
}
[data-design="b"] .dw-polder__roll > * > :first-child,
[data-design="b"] .dw-polder__roll > * > :nth-child(3),
[data-design="b"] .dw-polder__roll > * > :nth-child(4) {
  font-family: var(--dw-font-mono); font-size: 13px; color: var(--dw-ink-2); letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════════
   REPEATED CTA SECTION
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .b-cta-repeat {
  padding: var(--dw-step-flood) clamp(16px, 4vw, 40px);
  background: var(--dw-ink);
  border-top: 1px solid var(--dw-rule);
}
[data-design="b"] .b-cta-repeat__inner {
  display: grid; gap: var(--dw-step-row); justify-items: start;
}
[data-design="b"] .b-cta-repeat__headline {
  font: 600 clamp(28px, 4vw, 48px)/1.1 var(--dw-font-display);
  letter-spacing: -0.02em; color: var(--dw-paper);
}
[data-design="b"] .b-cta-repeat__sub {
  font: 400 16px/1.4 var(--dw-font-mono); color: var(--dw-graphite);
  margin-bottom: var(--dw-step-row);
}
[data-design="b"] .b-cta-repeat .dw-cta {
  background: var(--dw-paper-2); color: var(--dw-ink);
}

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .b-footer {
  background: var(--dw-paper); border-top: 1px solid var(--dw-rule);
}
[data-design="b"] .b-footer__inner {
  max-width: 1440px; margin-inline: auto;
  padding: var(--dw-step-flood) clamp(16px, 4vw, 40px);
}
[data-design="b"] .b-footer__row1 {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(24px, 4vw, 64px);
  margin-bottom: var(--dw-step-bank);
}
[data-design="b"] .b-footer__name {
  font: 600 18px/1.2 var(--dw-font-display); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dw-ink);
}
[data-design="b"] .b-footer__tagline {
  font: 400 13px/1.4 var(--dw-font-mono); color: var(--dw-ink-2);
  letter-spacing: 0.06em; margin-top: var(--dw-step-cell);
}
[data-design="b"] .b-footer__nav {
  display: grid; gap: 10px; align-content: start;
}
[data-design="b"] .b-footer__nav a {
  font: 500 14px/1 var(--dw-font-display); color: var(--dw-ink-2);
  text-decoration: none; letter-spacing: 0.04em;
  transition: color var(--dw-dur-settle) var(--dw-ease-settle);
}
[data-design="b"] .b-footer__nav a:hover { color: var(--dw-signal); }
[data-design="b"] .b-footer__phone {
  display: block; font: 500 20px/1 var(--dw-font-mono); color: var(--dw-ink);
  text-decoration: none; letter-spacing: 0.04em; margin-bottom: var(--dw-step-row);
}
[data-design="b"] .b-footer__area {
  font: 400 14px/1.4 var(--dw-font-mono); color: var(--dw-ink-2);
  letter-spacing: 0.04em;
}
[data-design="b"] .b-footer__trust {
  font: 400 13px/1.4 var(--dw-font-mono); color: var(--dw-graphite);
  letter-spacing: 0.04em; margin-top: var(--dw-step-cell);
}
[data-design="b"] .b-footer__rule {
  height: 1px; background: var(--dw-rule-soft); margin-bottom: var(--dw-step-row);
}
[data-design="b"] .b-footer__row2 {
  display: flex; justify-content: space-between; align-items: center;
}
[data-design="b"] .b-footer__copy {
  font: 400 12px/1 var(--dw-font-mono); color: var(--dw-graphite); letter-spacing: 0.06em;
}
[data-design="b"] .b-footer__pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dw-signal);
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION FALLBACKS
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .dw-isobath__line { animation: none; opacity: 0.7; }
  [data-design="b"] .dw-sheet { transition: none; }
  [data-design="b"] .b-roofline { animation: none; stroke-dashoffset: 0; }
  [data-design="b"] .b-course { animation: none; stroke-dashoffset: 0; }
  [data-design="b"] .b-ridge-accent { animation: none; stroke-opacity: 0.35; }
  [data-design="b"] .b-hero-wash { animation: none; }
  [data-design="b"] .b-hero-isobath { animation: none; }
  [data-design="b"] .dw-cta__primer { animation: none; transform: translate(0, 0); opacity: 0.85; }
  [data-design="b"] .dw-cta.is-stamped .dw-cta__stamp { animation: none; display: block; opacity: 1; }
  [data-design="b"] .dw-cta:hover .dw-cta__primer { transition: none; }
  [data-design="b"] .dw-pointer__pipe,
  [data-design="b"] .dw-pointer__drop { animation: none; opacity: 0.5; }
  [data-design="b"] .dw-valve__fill { animation: none; height: 62%; }
  [data-design="b"] .dw-funnel__step.is-active { animation: none; }
  [data-design="b"] .dw-stamp { animation: none; }
  [data-design="b"] .dw-flowbars__bar { transition: none; }
  [data-design="b"] .dw-polder__cell { animation: none; opacity: 0.24; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  [data-design="b"] .b-service-row { grid-template-columns: 48px 1fr; }
  [data-design="b"] .b-service-tag { display: none; }
  [data-design="b"] .dw-polder__roll > * { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  [data-design="b"] .dw-funnel { grid-template-columns: 1fr; }
  [data-design="b"] .dw-funnel__gauge { position: static; }
  [data-design="b"] .dw-chips { grid-template-columns: 1fr; }
  [data-design="b"] .b-footer__row1 { grid-template-columns: 1fr; gap: var(--dw-step-bank); }
}
@media (max-width: 720px) {
  [data-design="b"] .dw-manifold { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  [data-design="b"] .dw-valve { min-height: 64px; }
  [data-design="b"] .b-service-row { grid-template-columns: 40px 1fr; gap: var(--dw-step-cell); }
  [data-design="b"] .b-process-step { grid-template-columns: 40px 1fr; }
  [data-design="b"] .dw-polder__roll > * { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 560px) {
  [data-design="b"] .dw-header__bar { padding: 16px; }
  [data-design="b"] .dw-logo__mark { font-size: 14px; letter-spacing: 0.12em; }
  [data-design="b"] .dw-sheet { width: 100vw; border-left: none; }
  [data-design="b"] .dw-hero__content { padding: 48px 16px; }
  [data-design="b"] .dw-chips { grid-template-columns: 1fr; }
  [data-design="b"] .b-cta-repeat__inner { justify-items: stretch; }
}
@media (max-width: 380px) {
  [data-design="b"] .dw-logo__mark { font-size: 13px; letter-spacing: 0.1em; }
  [data-design="b"] .dw-manifold { gap: 4px; }
  [data-design="b"] .b-service-row { gap: var(--dw-step-cell); }
}

/* ════════════════════════════════════════════════════════════════
   MANDATORY OVERFLOW / NO-H-SCROLL GUARDS
   ════════════════════════════════════════════════════════════════ */
[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; }