/* ════════════════════════════════════════════════════════════════
   ROSS PAINT CO. — DESIGN B — "Drafted Wall"
   Ozalid / blueprint reprographic. A wall is specified, executed,
   witnessed. Tracing-paper warmth, blueprint cyan, ozalid sepia.
   ALL selectors scoped under [data-design="b"]. Keyframes dwb-*.
   Tokens dwb-* (distinct from any co-loaded Design A drafted-wall).
   ════════════════════════════════════════════════════════════════ */

/* ── Token system ──────────────────────────────────────────────── */
[data-design="b"] {
  /* color */
  --dwb-bg:         #F2EDE0;  /* tracing-paper page */
  --dwb-surface:    #FBF6E8;  /* vellum cream */
  --dwb-surface-2:  #E9E2CE;  /* drafting-table felt */
  --dwb-ink:        #1C1A17;  /* graphite */
  --dwb-ink-2:      #3A352D;  /* warm graphite */
  --dwb-muted:      #7A7268;  /* faded pencil */
  --dwb-border:     #C7BFAE;  /* drafting-pencil hairline */
  --dwb-border-2:   #A89E89;  /* weft thread */
  --dwb-accent:     #0E5C8A;  /* blueprint cyan / diazo */
  --dwb-accent-soft:#C8DCE8;  /* ozalid wash */
  --dwb-accent-2:   #9A6E3C;  /* ozalid sepia */
  --dwb-critical:   #B53024;  /* architect's mark-up red */
  --dwb-success:    #1F6B4A;  /* drafter's green ink */
  --dwb-warn:       #C19211;  /* drafter's yellow highlighter */

  /* Forge-bar toggle reads this for the Site B swatch */
  --design-b-primary: #0E5C8A;

  /* type */
  --dwb-font-display: 'Charter', 'Iowan Old Style', 'Sitka Text', Cambria, Georgia, serif;
  --dwb-font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Inter', sans-serif;
  --dwb-font-spec:    ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;

  /* spacing — 4px base, drafting primitives */
  --dwb-step:  4px;   /* one drafting tick */
  --dwb-row:   8px;   /* weft row */
  --dwb-cut:  12px;   /* a tape-cut */
  --dwb-cell: 16px;   /* a grid cell */
  --dwb-bay:  24px;   /* a drafting bay */
  --dwb-pane: 32px;   /* a window pane */
  --dwb-bay-2:48px;   /* a doubled bay */
  --dwb-wall: 80px;   /* a wall break */
  --dwb-room:120px;   /* a room break */

  /* motion */
  --dwb-dur-tick:   140ms;
  --dwb-dur-settle: 280ms;
  --dwb-dur-draw:  4500ms;
  --dwb-dur-edge: 14000ms;
  --dwb-dur-grid: 28000ms;
  --dwb-ease-draft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dwb-ease-stamp: cubic-bezier(0.6, -0.1, 0.4, 1.1);
  --dwb-ease-edge:  cubic-bezier(0.45, 0.05, 0.55, 0.95);

  /* radius */
  --dwb-radius-card:  2px;
  --dwb-radius-panel: 4px;
  --dwb-radius-stamp: 3px;
  --dwb-radius-pill:  999px;

  /* elevation */
  --dwb-elev-ring:  0 0 0 1px var(--dwb-border);
  --dwb-elev-stamp: 0 1px 0 var(--dwb-border), 0 6px 14px -8px rgba(28, 26, 23, 0.18);
}

/* ── Base / reset within slice ─────────────────────────────────── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design { display: block; }
[data-design="b"] {
  background: var(--dwb-bg);
  color: var(--dwb-ink-2);
  font-family: var(--dwb-font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
[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"] p,
[data-design="b"] ul,
[data-design="b"] ol,
[data-design="b"] figure { margin: 0; }
[data-design="b"] img { display: block; }
[data-design="b"] a { color: var(--dwb-accent); }

/* shared eyebrow */
[data-design="b"] .dwb-eyebrow {
  font-family: var(--dwb-font-spec); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dwb-accent-2); margin: 0 0 var(--dwb-cut);
}

/* shared sticker (badge) */
[data-design="b"] .dwb-sticker {
  display: inline-flex; align-items: center;
  font-family: var(--dwb-font-spec); font-size: 10px; letter-spacing: 0.14em;
  padding: 4px 10px; border-radius: var(--dwb-radius-pill);
  text-transform: uppercase; white-space: nowrap;
}
[data-design="b"] .dwb-sticker--draft   { color: var(--dwb-accent-2); border: 1px solid var(--dwb-accent-2); background: transparent; }
[data-design="b"] .dwb-sticker--issued  { color: var(--dwb-success);  border: 1px solid var(--dwb-success);  background: color-mix(in oklab, var(--dwb-success), transparent 90%); }
[data-design="b"] .dwb-sticker--witness { color: var(--dwb-accent);   border: 1px solid var(--dwb-accent);   background: color-mix(in oklab, var(--dwb-accent), transparent 92%); }

/* ════════════════════════════════════════════════════════════════
   STAMP (= button) — the blueprint witness stamp
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-stamp {
  position: relative; display: inline-flex; align-items: center; gap: var(--dwb-cut);
  padding: 14px 22px; border: 0; background: none;
  font-family: var(--dwb-font-spec); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  border-radius: var(--dwb-radius-stamp); cursor: pointer;
  transition: transform var(--dwb-dur-tick) var(--dwb-ease-draft),
              background-color var(--dwb-dur-tick) var(--dwb-ease-draft),
              box-shadow var(--dwb-dur-tick) var(--dwb-ease-draft);
  will-change: transform;
}
[data-design="b"] .dwb-stamp--primary {
  background: var(--dwb-accent); color: var(--dwb-bg);
  box-shadow: inset 0 0 0 1.5px var(--dwb-accent), inset 0 0 0 4px var(--dwb-bg), inset 0 0 0 5px var(--dwb-accent);
}
[data-design="b"] .dwb-stamp__ring {
  position: absolute; inset: 3px; border: 1px solid currentColor;
  border-radius: 2px; pointer-events: none;
  animation: dwb-stamp-breath var(--dwb-dur-draw) ease-in-out infinite;
}
@keyframes dwb-stamp-breath {
  0%, 100% { transform: scale(1.0); opacity: 0.85; }
  50%      { transform: scale(1.025); opacity: 1; }
}
[data-design="b"] .dwb-stamp__label { position: relative; z-index: 1; }
[data-design="b"] .dwb-stamp__arrow {
  position: relative; z-index: 1; display: inline-flex;
  transition: transform var(--dwb-dur-settle) var(--dwb-ease-draft);
}
[data-design="b"] .dwb-stamp:hover .dwb-stamp__arrow { transform: translateX(4px); }
[data-design="b"] .dwb-stamp--primary:hover {
  box-shadow: inset 0 0 0 2px var(--dwb-accent), inset 0 0 0 4px var(--dwb-bg), inset 0 0 0 5px var(--dwb-accent);
}
[data-design="b"] .dwb-stamp:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1.5px var(--dwb-accent), inset 0 0 0 4px var(--dwb-bg), inset 0 0 0 5px var(--dwb-accent),
    0 0 0 3px color-mix(in oklab, var(--dwb-accent), transparent 55%);
}
[data-design="b"] .dwb-stamp:active {
  transform: translateY(2px);
  animation: dwb-stamp-press 140ms var(--dwb-ease-stamp);
}
@keyframes dwb-stamp-press {
  0% { opacity: 1; } 50% { opacity: 0.86; } 100% { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════
   ELEMENT 1 — Header (grid pulse + crosshairs + weft hamburger)
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--dwb-bg);
  border-bottom: 1px solid var(--dwb-border);
  isolation: isolate;
}
[data-design="b"] .dwb-header__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--dwb-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dwb-border) 1px, transparent 1px);
  background-size: 24px 24px; opacity: 0.04;
  animation: dwb-grid-pulse var(--dwb-dur-grid) ease-in-out infinite;
}
@keyframes dwb-grid-pulse {
  0%, 100% { opacity: 0.04; } 50% { opacity: 0.10; }
}
[data-design="b"] .dwb-header__crosshairs { position: absolute; inset: 0; pointer-events: none; }
[data-design="b"] .dwb-cross {
  position: absolute; width: 14px; height: 14px;
  background:
    linear-gradient(var(--dwb-accent-2), var(--dwb-accent-2)) center/100% 1px no-repeat,
    linear-gradient(var(--dwb-accent-2), var(--dwb-accent-2)) center/1px 100% no-repeat;
  opacity: 0; animation: dwb-cross-fade 31000ms ease-in-out infinite;
}
[data-design="b"] .dwb-cross--tl { top: 8px; left: 8px; }
[data-design="b"] .dwb-cross--tr { top: 8px; right: 8px; animation-delay: 6000ms; }
@keyframes dwb-cross-fade {
  0%, 100% { opacity: 0; } 40%, 60% { opacity: 0.55; }
}
[data-design="b"] .dwb-header__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin-inline: auto;
  padding: var(--dwb-cut) var(--dwb-pane); min-height: 64px;
}
[data-design="b"] .dwb-logo { text-decoration: none; color: var(--dwb-ink); }
[data-design="b"] .dwb-logo__mark {
  font-family: var(--dwb-font-display);
  font-size: 22px; letter-spacing: -0.005em; font-weight: 600;
}
[data-design="b"] .dwb-burger {
  display: inline-flex; flex-direction: column; gap: 4px;
  background: transparent; border: 1px solid var(--dwb-border);
  padding: 10px 12px; border-radius: var(--dwb-radius-stamp); cursor: pointer;
}
[data-design="b"] .dwb-burger__weft {
  display: block; width: 18px; height: 1.5px; background: var(--dwb-ink);
  transition: transform var(--dwb-dur-settle) var(--dwb-ease-draft), opacity var(--dwb-dur-settle) var(--dwb-ease-draft);
}
[data-design="b"] .dwb-burger:hover { border-color: var(--dwb-ink); }
[data-design="b"] .dwb-burger[aria-expanded="true"] .dwb-burger__weft:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
[data-design="b"] .dwb-burger[aria-expanded="true"] .dwb-burger__weft:nth-child(2) { opacity: 0; }
[data-design="b"] .dwb-burger[aria-expanded="true"] .dwb-burger__weft:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

[data-design="b"] .dwb-drawer[hidden] { display: none; }
[data-design="b"] .dwb-drawer {
  position: fixed; inset: 64px 0 0 0; z-index: 39;
  background: var(--dwb-surface);
  padding: var(--dwb-wall) var(--dwb-pane);
  animation: dwb-drawer-in var(--dwb-dur-settle) var(--dwb-ease-draft);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--dwb-bay-2);
}
[data-design="b"] .dwb-drawer::before,
[data-design="b"] .dwb-drawer::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  background:
    linear-gradient(var(--dwb-accent-2), var(--dwb-accent-2)) center/100% 1px no-repeat,
    linear-gradient(var(--dwb-accent-2), var(--dwb-accent-2)) center/1px 100% no-repeat;
}
[data-design="b"] .dwb-drawer::before { top: 18px; left: 18px; }
[data-design="b"] .dwb-drawer::after  { bottom: 18px; right: 18px; }
@keyframes dwb-drawer-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
[data-design="b"] .dwb-drawer__list {
  list-style: none; padding: 0; margin: 0;
  max-width: 640px; margin-inline: auto; width: 100%;
  display: flex; flex-direction: column; gap: var(--dwb-bay);
  counter-reset: dwb-mark;
}
[data-design="b"] .dwb-drawer__list li {
  counter-increment: dwb-mark;
  font-family: var(--dwb-font-display); font-size: 32px;
  border-bottom: 1px solid var(--dwb-border);
  padding-bottom: var(--dwb-cut); position: relative;
}
[data-design="b"] .dwb-drawer__list li::before {
  content: "0" counter(dwb-mark);
  font-family: var(--dwb-font-spec); font-size: 11px;
  color: var(--dwb-accent-2); letter-spacing: 0.14em;
  position: absolute; top: 8px; left: -42px;
}
[data-design="b"] .dwb-drawer__list a {
  color: var(--dwb-ink); text-decoration: none;
  transition: color var(--dwb-dur-tick) var(--dwb-ease-draft);
}
[data-design="b"] .dwb-drawer__list a:hover { color: var(--dwb-accent); }
[data-design="b"] .dwb-drawer__cta {
  max-width: 640px; margin-inline: auto; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--dwb-bay);
}
[data-design="b"] .dwb-drawer__phone {
  display: inline-flex; flex-direction: column; text-decoration: none; color: var(--dwb-ink);
}
[data-design="b"] .dwb-drawer__phone-lbl {
  font-family: var(--dwb-font-spec); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dwb-accent-2);
}
[data-design="b"] .dwb-drawer__phone-num {
  font-family: var(--dwb-font-display); font-size: 22px;
}

/* ════════════════════════════════════════════════════════════════
   HERO — hero.md themed-movement (ONE moving wet-edge wash)
   Text + CTA opacity:1 at first paint. No directional primitive.
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-hero {
  position: relative; isolation: isolate;
  padding: clamp(72px, 12vw, 132px) var(--dwb-pane) clamp(64px, 10vw, 112px);
  background: var(--dwb-bg);
  border-bottom: 1px solid var(--dwb-border);
  overflow: hidden;
}
/* backdrop substrate (visual only — no copy) */
[data-design="b"] .dwb-hero__backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* static drafting-grid tint (non-animated — allowed beneath the one moving layer) */
[data-design="b"] .dwb-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--dwb-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dwb-border) 1px, transparent 1px);
  background-size: 32px 32px; opacity: 0.07;
}
/* THE one moving layer: a blueprint-cyan / ozalid wet-edge wash that
   draws in left→right and settles within ~2s, then holds with a quiet breath */
[data-design="b"] .dwb-hero__wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg,
      color-mix(in oklab, var(--dwb-accent-soft), transparent 18%) 0%,
      color-mix(in oklab, var(--dwb-accent-soft), transparent 42%) 38%,
      transparent 72%);
  transform-origin: left center;
  transform: scaleX(0);
  animation:
    dwb-hero-wash-in 1900ms var(--dwb-ease-edge) both,
    dwb-hero-wash-breathe 9000ms ease-in-out 1900ms infinite;
}
/* the wet edge: a single hairline of cyan that rides the leading edge of the wash */
[data-design="b"] .dwb-hero__edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: linear-gradient(to bottom, transparent, var(--dwb-accent) 22%, var(--dwb-accent) 78%, transparent);
  opacity: 0;
  animation: dwb-hero-edge-ride 1900ms var(--dwb-ease-edge) both;
}
@keyframes dwb-hero-wash-in {
  0%   { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}
@keyframes dwb-hero-wash-breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
@keyframes dwb-hero-edge-ride {
  0%   { left: 0;   opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { left: 72%; opacity: 0; }
}
[data-design="b"] .dwb-hero__inner {
  position: relative; z-index: 1;
  max-width: 880px; margin-inline: auto;
}
[data-design="b"] .dwb-hero__eyebrow { opacity: 1; }
[data-design="b"] .dwb-hero__title {
  opacity: 1;                          /* hard floor: visible at first paint */
  font-family: var(--dwb-font-display);
  font-size: clamp(34px, 6vw, 56px); line-height: 1.12;
  letter-spacing: -0.012em; color: var(--dwb-ink);
  max-width: 18ch; margin: 0 0 var(--dwb-cell);
}
[data-design="b"] .dwb-hero__lead {
  opacity: 1;
  font-size: clamp(17px, 2.3vw, 19px); line-height: 1.55;
  color: var(--dwb-ink-2); max-width: 54ch; margin: 0 0 var(--dwb-cut);
}
[data-design="b"] .dwb-hero__proof {
  opacity: 1;
  font-family: var(--dwb-font-spec); font-size: 12px;
  letter-spacing: 0.06em; color: var(--dwb-muted);
  margin: 0 0 var(--dwb-bay-2);
}
[data-design="b"] .dwb-hero__actions {
  opacity: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--dwb-cell);
}
[data-design="b"] .dwb-hero__chip { background: color-mix(in oklab, var(--dwb-accent), transparent 92%); }

/* ════════════════════════════════════════════════════════════════
   POINTER — wet-edge dimension-line wayfinding (NOT a button)
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-pointer {
  display: flex; justify-content: center;
  padding: clamp(40px, 8vw, 72px) var(--dwb-cell) clamp(48px, 9vw, 80px);
  background: var(--dwb-bg);
  color: var(--dwb-accent-2);
}
[data-design="b"] .dwb-pointer__hit {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  gap: var(--dwb-row); text-decoration: none; color: currentColor; cursor: default;
}
[data-design="b"] .dwb-pointer__tick { display: block; width: 16px; height: 1px; background: currentColor; opacity: 0.7; }
[data-design="b"] .dwb-pointer__rule {
  position: relative; display: block; width: 1px; height: 56px;
  background: var(--dwb-border); overflow: hidden;
}
[data-design="b"] .dwb-pointer__edge {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: var(--dwb-accent); transform-origin: top center; transform: scaleY(0);
  animation: dwb-pointer-extend 5200ms var(--dwb-ease-edge) infinite;
}
[data-design="b"] .dwb-pointer__label {
  font-family: var(--dwb-font-spec); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0;
  animation: dwb-pointer-stamp 5200ms ease-in-out infinite;
}
@keyframes dwb-pointer-extend {
  0%, 100% { transform: scaleY(0); }
  46%, 60% { transform: scaleY(1); }
}
@keyframes dwb-pointer-stamp {
  0%, 28%, 100% { opacity: 0; }
  50%, 70%      { opacity: 0.9; }
}

/* ════════════════════════════════════════════════════════════════
   ELEMENT 5 — THE FUNNEL — "Specify your job"
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-specify {
  padding: var(--dwb-room) var(--dwb-pane);
  background: var(--dwb-bg); border-top: 1px solid var(--dwb-border);
  scroll-margin-top: 72px;
}
[data-design="b"] .dwb-specify__header { max-width: 720px; margin: 0 auto var(--dwb-bay-2); }
[data-design="b"] .dwb-specify__title {
  font-family: var(--dwb-font-display); font-size: clamp(28px, 4.4vw, 38px);
  letter-spacing: -0.012em; line-height: 1.15; margin: 0 0 var(--dwb-cell); color: var(--dwb-ink);
}
[data-design="b"] .dwb-specify__lead { font-size: 17px; line-height: 1.55; color: var(--dwb-ink-2); margin: 0; max-width: 58ch; }
[data-design="b"] .dwb-specify__grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--dwb-pane);
  max-width: 1100px; margin-inline: auto; align-items: start;
}
[data-design="b"] .dwb-step {
  border: 0; padding: 0; margin: 0 0 var(--dwb-bay-2); position: relative;
  opacity: 0.35; transition: opacity var(--dwb-dur-settle) var(--dwb-ease-draft);
}
[data-design="b"] .dwb-step[data-state="active"],
[data-design="b"] .dwb-step[data-state="done"] { opacity: 1; }
[data-design="b"] .dwb-step legend {
  font-family: var(--dwb-font-display); font-size: 22px; color: var(--dwb-ink);
  margin-bottom: var(--dwb-cell); padding: 0;
}
[data-design="b"] .dwb-step__num {
  font-family: var(--dwb-font-spec); font-size: 11px; letter-spacing: 0.14em;
  color: var(--dwb-accent-2); margin-right: var(--dwb-cut);
}
[data-design="b"] .dwb-step__opts { display: flex; flex-wrap: wrap; gap: var(--dwb-row); }
[data-design="b"] .dwb-step__opts--fields { flex-direction: column; gap: var(--dwb-cell); }
[data-design="b"] .dwb-step__opts label:not(.dwb-field) {
  position: relative; display: inline-flex; align-items: center;
  padding: 10px var(--dwb-cell);
  border: 1px solid var(--dwb-border); border-radius: var(--dwb-radius-stamp);
  background: var(--dwb-surface);
  font-family: var(--dwb-font-spec); font-size: 12px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--dwb-ink); cursor: pointer;
  transition: border-color var(--dwb-dur-tick) var(--dwb-ease-draft),
              background var(--dwb-dur-tick) var(--dwb-ease-draft);
}
[data-design="b"] .dwb-step__opts label:not(.dwb-field):hover { border-color: var(--dwb-ink); }
[data-design="b"] .dwb-step__opts input { position: absolute; opacity: 0; pointer-events: none; }
[data-design="b"] .dwb-step__opts label:not(.dwb-field):has(input:checked) {
  background: var(--dwb-accent-soft); border-color: var(--dwb-accent); color: var(--dwb-accent);
}
[data-design="b"] .dwb-field { display: flex; flex-direction: column; gap: var(--dwb-row); width: 100%; max-width: 420px; }
[data-design="b"] .dwb-field--wide { max-width: 100%; }
[data-design="b"] .dwb-field__label {
  font-family: var(--dwb-font-spec); font-size: 11px; letter-spacing: 0.14em;
  color: var(--dwb-accent-2); text-transform: uppercase;
}
[data-design="b"] .dwb-field__hint { color: var(--dwb-muted); text-transform: none; letter-spacing: 0; }
[data-design="b"] .dwb-field input,
[data-design="b"] .dwb-field textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--dwb-ink);
  padding: 8px 0; font-family: var(--dwb-font-spec); font-size: 16px;
  color: var(--dwb-ink); outline: none; width: 100%; resize: vertical;
  transition: border-color var(--dwb-dur-tick) var(--dwb-ease-draft);
}
[data-design="b"] .dwb-field textarea { font-family: var(--dwb-font-body); line-height: 1.5; }
[data-design="b"] .dwb-field input:focus,
[data-design="b"] .dwb-field textarea:focus { border-bottom-color: var(--dwb-accent); border-bottom-width: 2px; }
[data-design="b"] .dwb-field__note {
  font-family: var(--dwb-font-spec); font-size: 12px; color: var(--dwb-critical);
  margin: var(--dwb-row) 0 0; letter-spacing: 0.04em;
}

/* certificate panel */
[data-design="b"] .dwb-cert {
  position: sticky; top: 96px;
  background: var(--dwb-surface);
  border: 1px solid var(--dwb-border);
  border-radius: var(--dwb-radius-panel);
  padding: var(--dwb-bay);
}
[data-design="b"] .dwb-cert::before,
[data-design="b"] .dwb-cert::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  background:
    linear-gradient(var(--dwb-accent-2), var(--dwb-accent-2)) center/100% 1px no-repeat,
    linear-gradient(var(--dwb-accent-2), var(--dwb-accent-2)) center/1px 100% no-repeat;
  opacity: 0.55;
}
[data-design="b"] .dwb-cert::before { top: 8px; left: 8px; }
[data-design="b"] .dwb-cert::after  { bottom: 8px; right: 8px; }
[data-design="b"] .dwb-cert__head {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--dwb-cell); border-bottom: 1px solid var(--dwb-border); margin-bottom: var(--dwb-cell);
}
[data-design="b"] .dwb-cert__title {
  font-family: var(--dwb-font-spec); font-size: 11px; letter-spacing: 0.18em;
  color: var(--dwb-ink); text-transform: uppercase;
}
[data-design="b"] .dwb-cert__lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--dwb-cut); }
[data-design="b"] .dwb-cert__lines li {
  display: grid; grid-template-columns: 88px 1fr; align-items: baseline; gap: var(--dwb-cell);
  font-family: var(--dwb-font-spec); font-size: 13px;
  border-bottom: 1px dashed var(--dwb-border); padding-bottom: var(--dwb-row); padding-left: 22px;
}
[data-design="b"] .dwb-cert__lbl { color: var(--dwb-accent-2); letter-spacing: 0.14em; }
[data-design="b"] .dwb-cert__val { color: var(--dwb-ink); position: relative; min-height: 1.2em; word-break: break-word; }
[data-design="b"] .dwb-cert__val[data-set="true"]::before {
  content: "✓"; position: absolute; left: -22px; top: 0;
  color: var(--dwb-accent); font-size: 14px;
  animation: dwb-check-stamp 200ms var(--dwb-ease-stamp);
}
@keyframes dwb-check-stamp {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
[data-design="b"] .dwb-cert__val.dwb-val--swap { animation: dwb-cert-swap 280ms var(--dwb-ease-draft); }
@keyframes dwb-cert-swap {
  0% { opacity: 0.2; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
[data-design="b"] .dwb-cert__foot {
  margin-top: var(--dwb-bay); padding-top: var(--dwb-cell);
  border-top: 1px solid var(--dwb-border);
  display: flex; flex-direction: column; gap: var(--dwb-cell);
}
[data-design="b"] .dwb-cert__sig {
  font-family: var(--dwb-font-spec); font-size: 11px; letter-spacing: 0.10em;
  color: var(--dwb-muted); text-transform: uppercase;
}
[data-design="b"] [data-dwb-submit][hidden] { display: none !important; }
[data-design="b"] [data-dwb-submit] {
  align-self: flex-start;
  animation: dwb-witness-in 320ms var(--dwb-ease-stamp);
}
@keyframes dwb-witness-in {
  0% { opacity: 0; transform: translateY(6px) scale(0.96); }
  60% { transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
[data-design="b"] .dwb-cert__issued[hidden] { display: none; }
[data-design="b"] .dwb-cert__issued {
  margin-top: var(--dwb-cell); padding-top: var(--dwb-cell);
  border-top: 1px dashed var(--dwb-border);
  display: flex; flex-direction: column; gap: var(--dwb-row);
}
[data-design="b"] .dwb-cert__issued p { font-size: 14px; line-height: 1.5; color: var(--dwb-ink-2); margin: 0; }
[data-design="b"] .dwb-specify__below {
  max-width: 1100px; margin: var(--dwb-bay-2) auto 0;
  font-family: var(--dwb-font-spec); font-size: 12px; letter-spacing: 0.04em;
  color: var(--dwb-muted); line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════════
   BEFORE / AFTER — THE PITCH
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-ba {
  padding: var(--dwb-room) var(--dwb-pane);
  background: var(--dwb-surface); border-top: 1px solid var(--dwb-border);
  scroll-margin-top: 72px;
}
[data-design="b"] .dwb-ba__header { max-width: 720px; margin: 0 auto var(--dwb-wall); }
[data-design="b"] .dwb-ba__title {
  font-family: var(--dwb-font-display); font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -0.012em; line-height: 1.12; color: var(--dwb-ink); margin: 0 0 var(--dwb-cell);
}
[data-design="b"] .dwb-ba__lead { font-size: 18px; line-height: 1.55; color: var(--dwb-ink-2); margin: 0; max-width: 56ch; }
[data-design="b"] .dwb-ba__pairs {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--dwb-wall);
}
[data-design="b"] .dwb-pair__eyebrow {
  font-family: var(--dwb-font-spec); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dwb-accent-2); margin: 0 0 var(--dwb-cell);
}
[data-design="b"] .dwb-pair__frames {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--dwb-cell);
}
[data-design="b"] .dwb-pair__frame {
  position: relative; overflow: hidden;
  border: 1px solid var(--dwb-border); border-radius: var(--dwb-radius-card);
  background: var(--dwb-surface-2);
}
[data-design="b"] .dwb-pair__frame img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
[data-design="b"] .dwb-pair__tag {
  position: absolute; top: var(--dwb-cut); left: var(--dwb-cut); z-index: 1;
  font-family: var(--dwb-font-spec); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--dwb-radius-pill);
  background: color-mix(in oklab, var(--dwb-ink), transparent 12%); color: var(--dwb-bg);
}
[data-design="b"] .dwb-pair__tag--after { background: var(--dwb-accent); }
[data-design="b"] .dwb-pair__cap {
  font-size: 15px; line-height: 1.55; color: var(--dwb-ink-2);
  margin: var(--dwb-cell) 0 0; max-width: 70ch;
}
/* finished-work gallery */
[data-design="b"] .dwb-ba__gallery { max-width: 1100px; margin: var(--dwb-wall) auto 0; }
[data-design="b"] .dwb-ba__gallery-eyebrow { margin-bottom: var(--dwb-bay); }
[data-design="b"] .dwb-gallery {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dwb-cell);
}
[data-design="b"] .dwb-gallery__item {
  position: relative; overflow: hidden;
  border: 1px solid var(--dwb-border); border-radius: var(--dwb-radius-card);
  background: var(--dwb-surface-2);
}
[data-design="b"] .dwb-gallery__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--dwb-dur-settle) var(--dwb-ease-draft);
}
[data-design="b"] .dwb-gallery__item:hover img { transform: scale(1.03); }
[data-design="b"] .dwb-gallery__spec {
  display: block; padding: var(--dwb-row) var(--dwb-cut);
  font-family: var(--dwb-font-spec); font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--dwb-ink);
  border-top: 1px solid var(--dwb-border); background: var(--dwb-surface);
}
[data-design="b"] .dwb-ba__cta { display: flex; justify-content: center; margin-top: var(--dwb-wall); }

/* ════════════════════════════════════════════════════════════════
   ELEMENT 3 — Ambient A — Drawdown strip
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-drawdown {
  padding: var(--dwb-wall) var(--dwb-pane);
  background: var(--dwb-bg);
  border-top: 1px solid var(--dwb-border); border-bottom: 1px solid var(--dwb-border);
}
[data-design="b"] .dwb-drawdown__header { max-width: 720px; margin: 0 auto var(--dwb-bay-2); }
[data-design="b"] .dwb-drawdown__title {
  font-family: var(--dwb-font-display); font-size: clamp(26px, 4vw, 34px); line-height: 1.15;
  letter-spacing: -0.012em; color: var(--dwb-ink); margin: 0 0 var(--dwb-cell);
}
[data-design="b"] .dwb-drawdown__lead { font-size: 17px; line-height: 1.55; color: var(--dwb-ink-2); margin: 0; max-width: 56ch; }
[data-design="b"] .dwb-drawdown__strip {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--dwb-cell); max-width: 1100px; margin-inline: auto;
}
[data-design="b"] .dwb-drawdown__card {
  --card-hue: var(--dwb-ink);
  position: relative; background: var(--dwb-surface);
  border: 1px solid var(--dwb-border); border-radius: var(--dwb-radius-card);
  padding: 0; overflow: hidden; aspect-ratio: 3 / 4;
  display: flex; flex-direction: column;
}
[data-design="b"] .dwb-drawdown__card::before {
  content: ""; flex: 1 1 70%; background: var(--card-hue);
  animation: dwb-drawdown-cure 15000ms var(--dwb-ease-edge) infinite;
}
[data-design="b"] .dwb-drawdown__card:nth-child(1)::before { animation-delay: 0ms; }
[data-design="b"] .dwb-drawdown__card:nth-child(2)::before { animation-delay: 1600ms; }
[data-design="b"] .dwb-drawdown__card:nth-child(3)::before { animation-delay: 3200ms; }
[data-design="b"] .dwb-drawdown__card:nth-child(4)::before { animation-delay: 4800ms; }
[data-design="b"] .dwb-drawdown__card:nth-child(5)::before { animation-delay: 6400ms; }
[data-design="b"] .dwb-drawdown__card:nth-child(6)::before { animation-delay: 8000ms; }
@keyframes dwb-drawdown-cure {
  0%   { opacity: 0.14; }
  60%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0.14; }
}
[data-design="b"] .dwb-card__spec {
  display: block; padding: var(--dwb-row) var(--dwb-cut);
  font-family: var(--dwb-font-spec); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--dwb-ink);
  border-top: 1px solid var(--dwb-border); background: var(--dwb-surface);
}
[data-design="b"] .dwb-drawdown[data-paused="true"] .dwb-drawdown__card::before { animation-play-state: paused; }

/* ════════════════════════════════════════════════════════════════
   SERVICES — numbered index
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-services {
  padding: var(--dwb-room) var(--dwb-pane); background: var(--dwb-surface);
  scroll-margin-top: 72px;
}
[data-design="b"] .dwb-services__header { max-width: 720px; margin: 0 auto var(--dwb-bay-2); }
[data-design="b"] .dwb-services__title {
  font-family: var(--dwb-font-display); font-size: clamp(28px, 4.4vw, 38px);
  letter-spacing: -0.012em; line-height: 1.15; color: var(--dwb-ink); margin: 0;
}
[data-design="b"] .dwb-services__list {
  list-style: none; padding: 0; margin: 0; max-width: 880px; margin-inline: auto;
  counter-reset: dwb-svc;
}
[data-design="b"] .dwb-service {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--dwb-bay);
  padding: var(--dwb-bay-2) 0; border-top: 1px solid var(--dwb-border);
  transition: transform var(--dwb-dur-settle) var(--dwb-ease-draft);
}
[data-design="b"] .dwb-service:last-child { border-bottom: 1px solid var(--dwb-border); }
[data-design="b"] .dwb-service:hover { transform: translateX(4px); }
[data-design="b"] .dwb-service__num {
  font-family: var(--dwb-font-spec); font-size: 13px; letter-spacing: 0.14em;
  color: var(--dwb-accent-2); padding-top: 6px;
}
[data-design="b"] .dwb-service:hover .dwb-service__num { color: var(--dwb-accent); }
[data-design="b"] .dwb-service__title {
  font-family: var(--dwb-font-display); font-size: 24px; color: var(--dwb-ink);
  margin: 0 0 var(--dwb-row);
}
[data-design="b"] .dwb-service__copy { font-size: 17px; line-height: 1.6; color: var(--dwb-ink-2); margin: 0 0 var(--dwb-cell); max-width: 64ch; }
[data-design="b"] .dwb-service__spec {
  font-family: var(--dwb-font-spec); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dwb-muted); margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   ELEMENT 4 — Ambient B — Wet-edge hairline (Process / Prep)
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-wet {
  padding: var(--dwb-room) var(--dwb-pane); background: var(--dwb-bg);
  border-top: 1px solid var(--dwb-border);
  scroll-margin-top: 72px;
}
[data-design="b"] .dwb-wet__inner { max-width: 880px; margin: 0 auto; }
[data-design="b"] .dwb-wet__title {
  font-family: var(--dwb-font-display); font-size: clamp(28px, 4.6vw, 44px);
  letter-spacing: -0.012em; line-height: 1.15; color: var(--dwb-ink);
  margin: 0 0 var(--dwb-cell); max-width: 22ch;
}
[data-design="b"] .dwb-wet__rule {
  position: relative; height: 1px; width: 100%;
  background: var(--dwb-border); margin: var(--dwb-bay-2) 0; overflow: hidden;
}
[data-design="b"] .dwb-wet__edge {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: var(--dwb-accent); transform: scaleX(0); transform-origin: left center;
  animation: dwb-wet-edge 26000ms var(--dwb-ease-edge) infinite;
}
@keyframes dwb-wet-edge {
  0%   { transform: scaleX(0); transform-origin: left center; }
  54%  { transform: scaleX(1); transform-origin: left center; }
  62%  { transform: scaleX(1); transform-origin: right center; }
  85%  { transform: scaleX(0); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: left center; }
}
[data-design="b"] .dwb-wet[data-paused="true"] .dwb-wet__edge { animation-play-state: paused; }
[data-design="b"] .dwb-wet__body {
  font-size: 17px; line-height: 1.6; color: var(--dwb-ink-2);
  column-count: 2; column-gap: var(--dwb-pane);
}
[data-design="b"] .dwb-wet__body :first-child { margin-top: 0; }
[data-design="b"] .dwb-wet__body p { break-inside: avoid; margin: 0 0 var(--dwb-cell); }
[data-design="b"] .dwb-phases {
  list-style: none; padding: 0; margin: var(--dwb-bay-2) 0 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--dwb-cell);
  border-top: 1px solid var(--dwb-border); padding-top: var(--dwb-bay);
}
[data-design="b"] .dwb-phase { display: flex; flex-direction: column; gap: var(--dwb-step); }
[data-design="b"] .dwb-phase__num {
  font-family: var(--dwb-font-spec); font-size: 11px; letter-spacing: 0.14em; color: var(--dwb-accent-2);
}
[data-design="b"] .dwb-phase__name {
  font-family: var(--dwb-font-display); font-size: 16px; color: var(--dwb-ink); line-height: 1.25;
}

/* ════════════════════════════════════════════════════════════════
   ABOUT / CREW
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-about {
  padding: var(--dwb-room) var(--dwb-pane); background: var(--dwb-surface);
  border-top: 1px solid var(--dwb-border);
  scroll-margin-top: 72px;
}
[data-design="b"] .dwb-about__grid {
  display: grid; grid-template-columns: 0.8fr 1fr; gap: var(--dwb-bay-2);
  max-width: 1000px; margin-inline: auto; align-items: start;
}
[data-design="b"] .dwb-about__media {
  position: relative; border: 1px solid var(--dwb-border); border-radius: var(--dwb-radius-card);
  background: var(--dwb-surface-2); padding: var(--dwb-cut); overflow: hidden;
}
[data-design="b"] .dwb-about__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--dwb-radius-card);
}
[data-design="b"] .dwb-about__matlbl {
  display: block; margin-top: var(--dwb-row);
  font-family: var(--dwb-font-spec); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dwb-muted);
}
[data-design="b"] .dwb-about__title {
  font-family: var(--dwb-font-display); font-size: clamp(28px, 4.4vw, 38px);
  letter-spacing: -0.012em; line-height: 1.15; color: var(--dwb-ink); margin: 0 0 var(--dwb-cell);
}
[data-design="b"] .dwb-about__copy p { font-size: 17px; line-height: 1.65; color: var(--dwb-ink-2); margin: 0 0 var(--dwb-cell); max-width: 60ch; }
[data-design="b"] .dwb-about__spec {
  font-family: var(--dwb-font-spec); font-size: 12px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--dwb-accent-2); margin: var(--dwb-cell) 0 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   SERVICE AREA
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-area {
  padding: var(--dwb-room) var(--dwb-pane); background: var(--dwb-bg);
  border-top: 1px solid var(--dwb-border);
  scroll-margin-top: 72px;
}
[data-design="b"] .dwb-area__inner { max-width: 880px; margin: 0 auto; }
[data-design="b"] .dwb-area__title {
  font-family: var(--dwb-font-display); font-size: clamp(28px, 4.6vw, 40px);
  letter-spacing: -0.012em; line-height: 1.15; color: var(--dwb-ink); margin: 0 0 var(--dwb-cell); max-width: 20ch;
}
[data-design="b"] .dwb-area__lead { font-size: 18px; line-height: 1.55; color: var(--dwb-ink-2); margin: 0 0 var(--dwb-bay-2); max-width: 56ch; }
[data-design="b"] .dwb-area__towns {
  list-style: none; padding: 0; margin: 0 0 var(--dwb-bay);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dwb-cut);
}
[data-design="b"] .dwb-area__towns li {
  font-family: var(--dwb-font-spec); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dwb-ink);
  padding: var(--dwb-row) 0; border-bottom: 1px dashed var(--dwb-border);
}
[data-design="b"] .dwb-area__note { font-size: 15px; line-height: 1.6; color: var(--dwb-muted); margin: 0; max-width: 56ch; }

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
[data-design="b"] .dwb-footer {
  padding: var(--dwb-wall) var(--dwb-pane) var(--dwb-bay-2);
  background: var(--dwb-surface-2); border-top: 1px solid var(--dwb-border-2);
}
[data-design="b"] .dwb-footer__inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--dwb-bay-2);
}
[data-design="b"] .dwb-footer__mark { font-family: var(--dwb-font-display); font-size: 24px; color: var(--dwb-ink); }
[data-design="b"] .dwb-footer__tag { font-size: 15px; line-height: 1.55; color: var(--dwb-ink-2); margin: var(--dwb-cut) 0 var(--dwb-cell); max-width: 44ch; }
[data-design="b"] .dwb-footer__cert {
  font-family: var(--dwb-font-spec); font-size: 12px; letter-spacing: 0.06em;
  color: var(--dwb-accent); margin: 0;
}
[data-design="b"] .dwb-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dwb-bay); }
[data-design="b"] .dwb-footer__h {
  font-family: var(--dwb-font-spec); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dwb-accent-2); margin: 0 0 var(--dwb-cell);
}
[data-design="b"] .dwb-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--dwb-row); }
[data-design="b"] .dwb-footer__col li { font-size: 15px; color: var(--dwb-ink-2); }
[data-design="b"] .dwb-footer__col a { color: var(--dwb-ink-2); text-decoration: none; transition: color var(--dwb-dur-tick) var(--dwb-ease-draft); }
[data-design="b"] .dwb-footer__col a:hover { color: var(--dwb-accent); }
[data-design="b"] .dwb-footer__rule { height: 1px; background: var(--dwb-border); max-width: 1100px; margin: var(--dwb-bay-2) auto 0; }
[data-design="b"] .dwb-footer__legal {
  max-width: 1100px; margin: var(--dwb-cell) auto 0;
  font-family: var(--dwb-font-spec); font-size: 11px; letter-spacing: 0.06em;
  color: var(--dwb-muted);
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION — every signature interaction has a fallback
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .dwb-header__grid,
  [data-design="b"] .dwb-cross { animation: none; opacity: 0.07; }
  [data-design="b"] .dwb-drawer { animation: none; }
  [data-design="b"] .dwb-burger__weft { transition: none; }
  [data-design="b"] .dwb-stamp__ring { animation: none; }
  [data-design="b"] .dwb-stamp,
  [data-design="b"] .dwb-stamp__arrow { transition: none; }
  [data-design="b"] .dwb-stamp:active { animation: none; }
  /* hero: wash settles to its final state, no motion, text fully visible */
  [data-design="b"] .dwb-hero__wash { animation: none; transform: scaleX(1); opacity: 0.85; }
  [data-design="b"] .dwb-hero__edge { animation: none; opacity: 0; }
  [data-design="b"] .dwb-pointer__edge { animation: none; transform: scaleY(0.5); }
  [data-design="b"] .dwb-pointer__label { animation: none; opacity: 0.8; }
  [data-design="b"] .dwb-step { transition: none; }
  [data-design="b"] .dwb-cert__val[data-set="true"]::before,
  [data-design="b"] .dwb-cert__val.dwb-val--swap,
  [data-design="b"] [data-dwb-submit] { animation: none; }
  [data-design="b"] .dwb-drawdown__card::before { animation: none; opacity: 1; }
  [data-design="b"] .dwb-wet__edge { animation: none; transform: scaleX(0.4); transform-origin: left center; }
  [data-design="b"] .dwb-gallery__item img,
  [data-design="b"] .dwb-service { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first floors; no horizontal scroll anywhere
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  [data-design="b"] .dwb-specify__grid { grid-template-columns: 1fr; }
  [data-design="b"] .dwb-cert { position: static; }
  [data-design="b"] .dwb-footer__inner { grid-template-columns: 1fr; gap: var(--dwb-bay); }
}
@media (max-width: 880px) {
  [data-design="b"] .dwb-drawdown__strip { grid-template-columns: repeat(3, 1fr); }
  [data-design="b"] .dwb-about__grid { grid-template-columns: 1fr; gap: var(--dwb-bay); }
  [data-design="b"] .dwb-about__media { max-width: 380px; }
}
@media (max-width: 720px) {
  [data-design="b"] .dwb-wet { padding: var(--dwb-wall) var(--dwb-cell); }
  [data-design="b"] .dwb-wet__body { column-count: 1; }
  [data-design="b"] .dwb-phases { grid-template-columns: repeat(3, 1fr); row-gap: var(--dwb-bay); }
  [data-design="b"] .dwb-pair__frames { grid-template-columns: 1fr; }
  [data-design="b"] .dwb-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  [data-design="b"] .dwb-hero { padding: clamp(56px, 16vw, 88px) var(--dwb-cell) var(--dwb-wall); }
  [data-design="b"] .dwb-specify,
  [data-design="b"] .dwb-ba,
  [data-design="b"] .dwb-services,
  [data-design="b"] .dwb-about,
  [data-design="b"] .dwb-area,
  [data-design="b"] .dwb-drawdown { padding-left: var(--dwb-cell); padding-right: var(--dwb-cell); }
  [data-design="b"] .dwb-area__towns { grid-template-columns: repeat(2, 1fr); }
  [data-design="b"] .dwb-footer__cols { grid-template-columns: 1fr; gap: var(--dwb-bay); }
  [data-design="b"] .dwb-footer { padding-left: var(--dwb-cell); padding-right: var(--dwb-cell); }
  [data-design="b"] .dwb-hero__actions { flex-direction: column; align-items: flex-start; }
  [data-design="b"] .dwb-stamp { width: 100%; justify-content: center; }
  [data-design="b"] .dwb-drawer__cta .dwb-stamp { width: auto; }
}
@media (max-width: 560px) {
  [data-design="b"] .dwb-header__bar { padding: var(--dwb-cut) var(--dwb-cell); }
  [data-design="b"] .dwb-logo__mark { font-size: 18px; }
  [data-design="b"] .dwb-drawer__list li { font-size: 24px; }
  [data-design="b"] .dwb-drawer__list li::before { left: -30px; font-size: 10px; }
  [data-design="b"] .dwb-service { grid-template-columns: 1fr; gap: var(--dwb-row); }
  [data-design="b"] .dwb-service__num { padding-top: 0; }
}
@media (max-width: 480px) {
  [data-design="b"] .dwb-drawdown__strip { grid-template-columns: repeat(2, 1fr); gap: var(--dwb-cut); }
  [data-design="b"] .dwb-gallery { grid-template-columns: 1fr; }
  [data-design="b"] .dwb-phases { grid-template-columns: repeat(2, 1fr); }
  [data-design="b"] .dwb-cert__lines li { grid-template-columns: 74px 1fr; }
}
@media (max-width: 380px) {
  [data-design="b"] .dwb-drawer { padding: var(--dwb-pane) var(--dwb-cell); }
  [data-design="b"] .dwb-drawer__list li::before { left: -26px; }
}

/* ════════════════════════════════════════════════════════════════
   HARD RULE — viewport clip (appended at bottom, per build 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 */
[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; }