/* ═══════════════════════════════════════════════════════════════
   DESIGN-B — Portland Roofing Services
   Deltawerk design system · slot-scoped [data-design="b"]
   All selectors under .dq-design[data-design="b"] or
   [data-design="b"] .* — ZERO [data-design="b"] left.
   Keyframes prefixed: dw-
═══════════════════════════════════════════════════════════════ */

/* ── Design-B custom property exposure ──────────────────────── */
[data-design="b"] {
  --design-b-primary: #0B3D91;

  /* Deltawerk token set — remapped to design-b scope */
  --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;

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

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

  /* Motion */
  --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);

  /* Radius */
  --dw-radius-hair: 1px;
  --dw-radius-pin:  2px;
  --dw-radius-bay:  6px;
  --dw-radius-full: 9999px;

  /* Elevation */
  --dw-elev-flat:   none;
  --dw-elev-hair:   0 0 0 1px var(--dw-rule);
  --dw-elev-inset:  inset 0 0 0 1px var(--dw-rule-soft), inset 0 1px 0 0 rgba(0,0,0,0.04);
  --dw-elev-press:  inset 0 1px 0 0 rgba(0,0,0,0.18), 0 0 0 1px var(--dw-rule);
}

/* ── Reset / base ────────────────────────────────────────────── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  box-sizing: border-box;
  font-family: var(--dw-font-body);
  color: var(--dw-ink);
  background: var(--dw-paper);
  line-height: 1.55;
  font-size: 16px;
}

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

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

/* ══════════════════════════════════════════════════════════════
   E1 — ANIMATED MINIMALIST 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.12em;
  text-transform: uppercase;
}

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

[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); }

/* Header atmospheric isobath */
[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;
}

[data-design="b"] .dw-sheet[hidden] { display: none; }

[data-design="b"] .dw-sheet:not([hidden]) {
  transform: translateX(0);
}

[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-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-sheet__ctas {
  display: grid;
  gap: var(--dw-step-cell);
  margin-top: var(--dw-step-row);
}

[data-design="b"] .dw-phone-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  font: 500 18px/1 var(--dw-font-mono);
  color: var(--dw-ink);
  text-decoration: none;
  border: 1px solid var(--dw-rule-soft);
  border-radius: var(--dw-radius-pin);
  letter-spacing: 0.06em;
}

[data-design="b"] .dw-phone-link:hover {
  border-color: var(--dw-signal);
  color: var(--dw-signal);
}

/* ══════════════════════════════════════════════════════════════
   E2 — ANIMATED CTA (primer-rise pump animation)
══════════════════════════════════════════════════════════════ */
[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;
  min-height: 52px;
  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;
  cursor: pointer;
  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);
  opacity: 0;
  transform: scale(0.92);
  pointer-events: 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 {
  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); }
}

[data-design="b"] .dw-cta--sm {
  padding: 12px 20px;
  min-height: 44px;
  font-size: 13px;
}

[data-design="b"] .dw-cta--drawer {
  width: 100%;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   E3 — HERO: unique animated backdrop + text layer
   Backdrop: z-index 0, pointer-events:none
   Text: z-index 1, opacity:1 at first paint
══════════════════════════════════════════════════════════════ */
[data-design="b"] .dw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(480px, 72vh, 720px);
  display: flex;
  align-items: center;
  background: var(--dw-ink);
}

/* Hero backdrop: z-index 0, pointer-events none */
[data-design="b"] .dw-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

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

/* Roof plane fill: visible at first paint via rect fill in SVG */
[data-design="b"] .dw-hero__plane-fill {
  opacity: 1;
}

/* Hero text body: position:relative, z-index 1, opacity:1 at first paint */
[data-design="b"] .dw-hero__body {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 10vw, 112px) clamp(16px, 5vw, 80px);
  max-width: 760px;
  display: grid;
  gap: var(--dw-step-row);
}

[data-design="b"] .dw-hero__eyebrow {
  color: var(--dw-water);
}

[data-design="b"] .dw-hero__headline {
  margin: 0;
  font: 600 clamp(36px, 6.5vw, 80px)/1.0 var(--dw-font-display);
  letter-spacing: -0.022em;
  color: var(--dw-paper);
  opacity: 1; /* HARD: visible at first paint */
}

[data-design="b"] .dw-hero__subtitle {
  margin: 0;
  font: 400 clamp(15px, 1.8vw, 20px)/1.5 var(--dw-font-body);
  color: var(--dw-rule-soft);
  max-width: 56ch;
}

[data-design="b"] .dw-hero__proof {
  margin: 0;
  font: 500 12px/1 var(--dw-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dw-graphite);
}

[data-design="b"] .dw-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dw-step-row);
  margin-top: var(--dw-step-cell);
}

/* ══════════════════════════════════════════════════════════════
   E6 — POINTER: water-shed / roofline register
   Animated, aria-hidden, NOT a button.
   Placed directly before #funnel — ≤1 sibling between.
   opacity:1, bbox height ≥ 8px.
══════════════════════════════════════════════════════════════ */
[data-design="b"] .dw-pointer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dw-step-row);
  padding: clamp(40px, 8vw, 80px) 16px clamp(48px, 9vw, 80px);
  background: var(--dw-paper);
  opacity: 1; /* HARD: visibly rendered */
}

[data-design="b"] .dw-pointer__hit {
  position: relative;
  display: inline-block;
  width: 2px;
  height: 96px; /* bbox height >> 8px */
  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: 10px;
  height: 10px;
  margin-left: -5px;
  background: currentColor;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translateY(-80px) scale(0.4);
  opacity: 0;
  animation: dw-pointer-drip 5s ease-in infinite;
}

[data-design="b"] .dw-pointer__label {
  font: 500 11px/1 var(--dw-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dw-graphite);
  margin-top: var(--dw-step-cell);
}

@keyframes dw-pointer-fill {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  60%      { transform: scaleY(1);   opacity: 0.85; }
}
@keyframes dw-pointer-drip {
  0%, 55%  { transform: translateY(-80px) scale(0.4); opacity: 0; }
  70%      { transform: translateY(-80px) scale(1);   opacity: 1; }
  92%      { transform: translateY(0)     scale(1);   opacity: 1; }
  100%     { transform: translateY(0)     scale(0.2); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   E5 — FUNNEL: 5-step qualifying intake
   id="funnel" data-mf-role="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: 2px solid var(--dw-signal);
}

[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(32px, 5vw, 64px)/1.02 var(--dw-font-display);
  letter-spacing: -0.022em;
  color: var(--dw-ink);
}

[data-design="b"] .dw-funnel__lede {
  margin: 0;
  font: 400 18px/1.55 var(--dw-font-body);
  color: var(--dw-ink-2);
  max-width: 60ch;
}

[data-design="b"] .dw-funnel {
  display: grid;
  grid-template-columns: 1fr min(440px, 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);
}

/* Chips — radio options (funnel-option) */
[data-design="b"] .dw-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--dw-step-cell);
}

[data-design="b"] .dw-chips--col {
  grid-template-columns: 1fr;
}

[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;
  min-height: 44px;
  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);
}

/* Form fields */
[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);
  min-height: 44px;
}

[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);
}

/* Urgency phone inline */
[data-design="b"] .dw-urgency-phone {
  background: var(--dw-paper);
  border: 1px solid var(--dw-rule-soft);
  border-radius: var(--dw-radius-pin);
  padding: var(--dw-step-row);
}

[data-design="b"] .dw-urgency-phone[hidden] { display: none; }

[data-design="b"] .dw-inline-phone {
  color: var(--dw-signal);
  font-weight: 600;
  text-decoration: none;
}

[data-design="b"] .dw-inline-phone:hover {
  text-decoration: underline;
}

/* Funnel nav */
[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);
}

/* Buttons */
[data-design="b"] .dw-btn {
  padding: 12px 22px;
  min-height: 44px;
  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);
  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; }

/* Done state */
[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: 160px 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;
  padding-top: 2px;
}

[data-design="b"] .dw-spec dd { color: var(--dw-ink); margin: 0; }

/* Funnel gauge / assessment panel */
[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);
  border-top: 2px solid var(--dw-signal);
}

[data-design="b"] .dw-gauge {
  border-top: 1px solid var(--dw-rule);
  border-bottom: 1px solid var(--dw-rule);
  padding: var(--dw-step-bay) 0;
}

[data-design="b"] .dw-gauge__value {
  font: 600 clamp(40px, 6vw, 72px)/1 var(--dw-font-mono);
  letter-spacing: -0.02em;
  color: var(--dw-signal);
  font-variant-numeric: tabular-nums;
  display: block;
  min-height: 48px;
}

[data-design="b"] .dw-assess-summary {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
  margin: 0;
  font-family: var(--dw-font-mono);
  font-size: 13px;
  min-height: 40px;
}

[data-design="b"] .dw-assess-summary dt {
  color: var(--dw-ink-2);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 2px;
}

[data-design="b"] .dw-assess-summary dd {
  color: var(--dw-ink);
  margin: 0;
}

[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);
}

@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"] .dw-services {
  background: var(--dw-paper);
  border-top: 1px solid var(--dw-rule-soft);
  padding: var(--dw-step-flood) clamp(16px, 4vw, 40px);
}

[data-design="b"] .dw-section-inner {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  gap: var(--dw-step-row);
}

[data-design="b"] .dw-section-title {
  margin: 0;
  font: 600 clamp(32px, 5vw, 56px)/1.02 var(--dw-font-display);
  letter-spacing: -0.022em;
  color: var(--dw-ink);
}

[data-design="b"] .dw-section-lede {
  margin: 0;
  font: 400 18px/1.55 var(--dw-font-body);
  color: var(--dw-ink-2);
  max-width: 60ch;
}

[data-design="b"] .dw-service-index {
  list-style: none;
  margin: var(--dw-step-bay) 0 0;
  padding: 0;
  border-top: 1px solid var(--dw-rule);
}

[data-design="b"] .dw-service-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--dw-step-row);
  align-items: baseline;
  padding: var(--dw-step-row) 0;
  border-bottom: 1px solid var(--dw-rule-soft);
}

[data-design="b"] .dw-service-row__num {
  font: 500 12px/1 var(--dw-font-mono);
  color: var(--dw-ink-2);
  letter-spacing: 0.1em;
  padding-top: 3px;
}

[data-design="b"] .dw-service-row__name {
  font: 600 17px/1.3 var(--dw-font-display);
  color: var(--dw-ink);
}

[data-design="b"] .dw-service-row__spec {
  font: 400 13px/1.4 var(--dw-font-mono);
  color: var(--dw-ink-2);
  letter-spacing: 0.04em;
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════
   E4 — AMBIENT-B: polder telemetry grid (process 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);
  border-top: 1px solid var(--dw-rule-soft);
}

[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.4;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

[data-design="b"] .dw-polder__cell {
  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.28; }
  100% { opacity: 0; }
}

[data-design="b"] .dw-polder__content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  gap: var(--dw-step-row);
}

[data-design="b"] .dw-polder__title {
  margin: 0;
  font: 600 clamp(32px, 5vw, 56px)/1.02 var(--dw-font-display);
  letter-spacing: -0.022em;
  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-process-steps {
  list-style: none;
  margin: var(--dw-step-bay) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--dw-rule);
}

[data-design="b"] .dw-process-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--dw-step-row);
  padding: var(--dw-step-row) 0;
  border-bottom: 1px solid var(--dw-rule-soft);
}

[data-design="b"] .dw-process-step__num {
  font: 500 12px/1 var(--dw-font-mono);
  color: var(--dw-ink-2);
  letter-spacing: 0.1em;
  padding-top: 4px;
}

[data-design="b"] .dw-process-step__body {
  display: grid;
  gap: 4px;
}

[data-design="b"] .dw-process-step__body strong {
  font: 600 17px/1.3 var(--dw-font-display);
  color: var(--dw-ink);
}

[data-design="b"] .dw-process-step__body span {
  font: 400 15px/1.55 var(--dw-font-body);
  color: var(--dw-ink-2);
}

/* Repeated CTA */
[data-design="b"] .dw-repeat-cta {
  display: flex;
  justify-content: center;
  padding: var(--dw-step-span) clamp(16px, 4vw, 40px);
  background: var(--dw-paper);
  border-top: 1px solid var(--dw-rule-soft);
}

/* ══════════════════════════════════════════════════════════════
   SERVICE AREA
══════════════════════════════════════════════════════════════ */
[data-design="b"] .dw-service-area {
  background: var(--dw-paper-2);
  border-top: 1px solid var(--dw-rule-soft);
  padding: var(--dw-step-flood) clamp(16px, 4vw, 40px);
}

[data-design="b"] .dw-address {
  margin-top: var(--dw-step-row);
  font: 400 16px/1.7 var(--dw-font-mono);
  color: var(--dw-ink-2);
  font-style: normal;
  letter-spacing: 0.04em;
}

[data-design="b"] .dw-address a {
  color: var(--dw-signal);
  text-decoration: none;
  font-weight: 600;
}

[data-design="b"] .dw-address a:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
[data-design="b"] .dw-footer {
  background: var(--dw-ink);
  color: var(--dw-paper);
  padding: var(--dw-step-bank) clamp(16px, 4vw, 40px) var(--dw-step-row);
}

[data-design="b"] .dw-footer__row1 {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--dw-step-bank);
  align-items: start;
  padding-bottom: var(--dw-step-row);
  border-bottom: 1px solid var(--dw-rule);
}

[data-design="b"] .dw-footer__brand {
  display: grid;
  gap: var(--dw-step-cell);
}

[data-design="b"] .dw-footer__brand .dw-logo__mark {
  color: var(--dw-paper);
}

[data-design="b"] .dw-footer__address {
  font: 400 12px/1.5 var(--dw-font-mono);
  color: var(--dw-graphite);
  letter-spacing: 0.06em;
}

[data-design="b"] .dw-footer__nav {
  display: grid;
  gap: var(--dw-step-cell);
}

[data-design="b"] .dw-footer__nav a {
  font: 400 13px/1.4 var(--dw-font-mono);
  color: var(--dw-rule-soft);
  text-decoration: none;
  letter-spacing: 0.06em;
}

[data-design="b"] .dw-footer__nav a:hover { color: var(--dw-paper); }

[data-design="b"] .dw-footer__contact {
  display: grid;
  gap: var(--dw-step-row);
  align-content: start;
}

[data-design="b"] .dw-footer__phone {
  font: 600 16px/1 var(--dw-font-mono);
  color: var(--dw-paper);
  text-decoration: none;
  letter-spacing: 0.06em;
}

[data-design="b"] .dw-footer__phone:hover { color: var(--dw-water); }

[data-design="b"] .dw-footer .dw-cta--sm {
  background: transparent;
  border-color: var(--dw-rule-soft);
  color: var(--dw-paper);
}

[data-design="b"] .dw-footer .dw-cta--sm:hover {
  border-color: var(--dw-signal);
  color: var(--dw-on-signal);
}

[data-design="b"] .dw-footer__row2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--dw-step-row);
}

[data-design="b"] .dw-footer__copy {
  font: 400 12px/1 var(--dw-font-mono);
  color: var(--dw-graphite);
  letter-spacing: 0.06em;
}

[data-design="b"] .dw-footer__pip {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dw-signal);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  [data-design="b"] .dw-funnel {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .dw-footer__row1 {
    grid-template-columns: 1fr;
    gap: var(--dw-step-bank);
  }
}

@media (max-width: 720px) {
  [data-design="b"] .dw-service-row {
    grid-template-columns: 40px 1fr;
  }
  [data-design="b"] .dw-service-row__spec {
    grid-column: 2;
    text-align: left;
  }
  [data-design="b"] .dw-chips {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  [data-design="b"] .dw-header__bar { padding: 16px; }
  [data-design="b"] .dw-logo__mark { font-size: 13px; letter-spacing: 0.10em; }
  [data-design="b"] .dw-sheet { width: 100vw; border-left: none; }
  [data-design="b"] .dw-hero__body { padding: 48px 16px; }
  [data-design="b"] .dw-hero__ctas { flex-direction: column; }
  [data-design="b"] .dw-cta { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
  [data-design="b"] .dw-logo__mark { font-size: 12px; letter-spacing: 0.08em; }
  [data-design="b"] .dw-spec { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════ */
@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"] .dw-cta__primer {
    animation: none;
    transform: translate(0, 0);
    opacity: 0.85;
  }
  [data-design="b"] .dw-cta.is-stamped .dw-cta__stamp {
    animation: none;
    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.6;
  }
  [data-design="b"] .dw-polder__cell {
    animation: none;
    opacity: 0.22;
  }
  [data-design="b"] .dw-funnel__step.is-active {
    animation: none;
  }
  [data-design="b"] .dw-stamp {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   CHROME ISOLATION HARD GUARDS
   No h-scroll; all elements bounded.
══════════════════════════════════════════════════════════════ */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}

[data-design="b"].dq-design * {
  min-width: 0;
}

[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

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