/* ═══════════════════════════════════════════════════════════════════
   Design B — Drop Cloth — Mountainside Painting LLC (Idaho Falls)
   A painter's job-site book: heavy canvas, ticking-stripe rules,
   color chips taped to the wall, a steel can on the bench.
   All selectors scoped under [data-design="b"]; keyframes prefixed db-.
   --design-b-primary exposed on the data-design block.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700&family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ─── TOKEN SYSTEM (12–16 trade-rooted tokens) ─────────────────── */
[data-design="b"] {
  /* Canvas-and-can surface palette */
  --db-canvas        : #EFEAE0;   /* heavy off-white canvas, default surface */
  --db-canvas-warm   : #E5DECF;   /* recessed surface, sheet folds */
  --db-ink           : #15140F;   /* deep workshop black */
  --db-ink-soft      : #3F3A30;
  --db-muted         : #7E7766;
  --db-rule          : #C8BFA8;   /* hairline */
  --db-rule-strong   : #6A6151;

  /* Tape — cream masking tape with darker edge + painter's blue */
  --db-tape          : #F4E9C8;
  --db-tape-edge     : #E0CE9C;
  --db-tape-blue     : #4E78A8;   /* used sparingly — drawer band, pointer */

  /* House chips — quart-can colors */
  --db-chip-01       : #6E3A26;   /* Iron Oxide   — primary brand */
  --db-chip-02       : #4C5946;   /* Drop-Cloth Green — secondary */
  --db-chip-03       : #E3D7B5;   /* Bone — warm light neutral */
  --db-chip-04       : #2A2620;   /* Coal — deep accent */
  --db-chip-01-wet   : #84462E;

  --db-can-ring      : rgba(255,255,255,0.5);
  --db-critical      : #B23A1F;

  /* Semantic roles */
  --db-surface       : var(--db-canvas);
  --db-surface-sunk  : var(--db-canvas-warm);
  --db-text          : var(--db-ink);
  --db-text-soft     : var(--db-ink-soft);
  --db-text-mute     : var(--db-muted);
  --db-brand         : var(--db-chip-01);
  --db-brand-wet     : var(--db-chip-01-wet);
  --db-accent        : var(--db-chip-02);

  /* REQUIRED EXPOSED TOKEN */
  --design-b-primary : var(--db-chip-01);

  /* Typography */
  --db-font-display  : 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --db-font-body     : 'DM Sans', -apple-system, 'Helvetica Neue', sans-serif;
  --db-font-mono     : 'DM Mono', 'SFMono-Regular', 'Menlo', monospace;

  --db-type-jobcard  : clamp(40px, 6.6vw, 84px);
  --db-type-display  : clamp(30px, 4.4vw, 54px);
  --db-type-headline : clamp(22px, 2.6vw, 32px);
  --db-type-body-lg  : clamp(17px, 1.5vw, 19px);
  --db-type-body     : clamp(16px, 1.3vw, 17px);
  --db-type-caption  : 14px;
  --db-type-stamp    : 12px;

  /* Spacing — shop-floor names, 4px base */
  --db-hairline : 1px;
  --db-stitch   : 4px;
  --db-tape-sp  : 8px;
  --db-stroke   : 16px;
  --db-coat     : 24px;
  --db-bay      : 40px;
  --db-wall     : 64px;
  --db-room     : 96px;

  /* Motion — physics named after shop actions */
  --db-dur-tap     : 140ms;
  --db-dur-settle  : 280ms;
  --db-dur-pull    : 520ms;
  --db-dur-flap    : 760ms;
  --db-dur-bench-a : 14000ms;   /* color-shelf can-ring breath */
  --db-dur-bench-b : 21000ms;   /* header tape-pull (coprime) */
  --db-dur-breath  : 5600ms;    /* CTA breath */
  --db-dur-pointer : 5200ms;    /* pointer tape-unroll */
  --db-dur-wash    : 1600ms;    /* hero color-wash arrival */

  --db-ease-pull   : cubic-bezier(.55, 0, .15, 1);
  --db-ease-flap   : cubic-bezier(.34, 1.2, .6, 1);
  --db-ease-settle : cubic-bezier(.16, 1, .3, 1);
  --db-ease-tap    : cubic-bezier(.4, 0, .6, 1);

  /* Radius — a printed shop document is mostly square */
  --db-radius-tab    : 2px;
  --db-radius-btn    : 4px;
  --db-radius-can    : 999px;

  background: var(--db-canvas);
  color: var(--db-text);
  font-family: var(--db-font-body);
  font-size: var(--db-type-body);
  line-height: 1.6;
}

/* ─── BASE RESETS (scoped) ─────────────────────────────────────── */
[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 { margin: 0; }

[data-design="b"] img { display: block; }

/* Shared type roles */
[data-design="b"] .db-type-display {
  font-family: var(--db-font-display); font-weight: 700;
  font-size: var(--db-type-display); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--db-text);
}
[data-design="b"] .db-stamp {
  display: inline-block; font-family: var(--db-font-mono);
  font-size: var(--db-type-stamp); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--db-text-soft);
  background: var(--db-canvas-warm); border: 1px solid var(--db-rule);
  padding: 4px 8px; border-radius: var(--db-radius-tab);
}
[data-design="b"] .db-stamp--state { color: var(--db-text-mute); }
[data-design="b"] .db-stamp--ok { color: var(--db-accent); border-color: var(--db-accent); }

/* ═══════════════════════════════════════════════════════════════════
   ELEMENT 1 — Animated minimalist header
   Logo + ticking-stripe (with blue tape-pull atmosphere) + hamburger.
   ═══════════════════════════════════════════════════════════════════ */
[data-design="b"] .db-header { position: sticky; top: 0; z-index: 50; background: var(--db-canvas); }
[data-design="b"] .db-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--db-stroke) clamp(var(--db-stroke), 4vw, var(--db-bay));
  min-height: 64px;
}
[data-design="b"] .db-header__logo { text-decoration: none; color: var(--db-ink); }
[data-design="b"] .db-header__mark {
  font-family: var(--db-font-display); font-weight: 700; font-size: 24px;
  letter-spacing: -0.015em; line-height: 1;
}
[data-design="b"] .db-header__menu {
  appearance: none; background: transparent; border: 1px solid var(--db-rule);
  border-radius: var(--db-radius-btn); width: 44px; height: 44px;
  display: grid; place-content: center; gap: 5px; cursor: pointer; padding: 0 10px;
}
[data-design="b"] .db-header__menu-bar { display: block; width: 22px; height: 1px; background: var(--db-ink); }
[data-design="b"] .db-header__menu:hover { border-color: var(--db-ink); }
[data-design="b"] .db-header__menu:focus-visible { outline: 2px solid var(--db-brand); outline-offset: 3px; }

/* Ticking-stripe rule (4px tall, alternating 2px ink / 2px canvas) */
[data-design="b"] .db-header__stripe {
  position: relative; height: 4px; overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--db-ink) 0 4px, transparent 4px 8px);
  opacity: 0.85;
}
/* Blue tape-tab that slowly pulls (atmospheric animation, 21s) */
[data-design="b"] .db-header__tape {
  position: absolute; top: -2px; bottom: -2px;
  left: 30%; width: 18%;
  background: var(--db-tape-blue);
  border-left: 1px solid rgba(0,0,0,0.18);
  border-right: 1px solid rgba(0,0,0,0.18);
  animation: db-header-tape var(--db-dur-bench-b) var(--db-ease-pull) infinite;
  transform-origin: right;
}
@keyframes db-header-tape {
  0%   { transform: translateX(0)    scaleX(1);   opacity: 0.9; }
  35%  { transform: translateX(0)    scaleX(1);   opacity: 0.9; }
  60%  { transform: translateX(-80%) scaleX(0.4); opacity: 0.5; }
  62%  { transform: translateX(120%) scaleX(1);   opacity: 0; }
  68%  { transform: translateX(120%) scaleX(1);   opacity: 0; }
  72%  { transform: translateX(0)    scaleX(1);   opacity: 0.9; }
  100% { transform: translateX(0)    scaleX(1);   opacity: 0.9; }
}

/* Drawer — slides from right, focus-trapped via JS */
[data-design="b"] .db-drawer { position: fixed; inset: 0; z-index: 60; background: rgba(21,20,15,0.40); }
[data-design="b"] .db-drawer[hidden] { display: none; }
[data-design="b"] .db-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(360px, 88vw); background: var(--db-canvas);
  border-top: 3px solid var(--db-tape-blue);
  padding: var(--db-coat); display: flex; flex-direction: column; gap: var(--db-bay);
  transform: translateX(100%); transition: transform var(--db-dur-pull) var(--db-ease-pull);
}
[data-design="b"] .db-drawer.is-open .db-drawer__panel { transform: translateX(0); }
[data-design="b"] .db-drawer__close {
  appearance: none; background: transparent; border: 0;
  font-family: var(--db-font-mono); font-size: 28px; color: var(--db-ink); cursor: pointer;
  align-self: flex-end; width: 44px; height: 44px; line-height: 1;
}
[data-design="b"] .db-drawer__close:focus-visible { outline: 2px solid var(--db-brand); outline-offset: 2px; }
[data-design="b"] .db-drawer__nav { display: flex; flex-direction: column; gap: 4px; }
[data-design="b"] .db-drawer__nav a {
  font-family: var(--db-font-display); font-size: 28px; font-weight: 500; color: var(--db-ink);
  text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--db-rule);
}
[data-design="b"] .db-drawer__nav a:hover { color: var(--db-brand); }
[data-design="b"] .db-drawer__foot { margin-top: auto; display: grid; gap: var(--db-stroke); }
[data-design="b"] .db-drawer__phone {
  font-family: var(--db-font-mono); font-size: 18px; color: var(--db-text); text-decoration: none;
  letter-spacing: 0.02em; min-height: 44px; display: inline-flex; align-items: center;
}
[data-design="b"] .db-drawer__phone:hover { color: var(--db-brand); }

/* ═══════════════════════════════════════════════════════════════════
   ELEMENT 2 — Animated CTA = funnel anchor (labeled can-lid)
   ═══════════════════════════════════════════════════════════════════ */
[data-design="b"] .db-cta {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px 18px 16px; min-height: 56px;
  background: var(--db-brand); color: var(--db-canvas);
  font-family: var(--db-font-body); font-weight: 600; font-size: 16px;
  text-decoration: none; border-radius: var(--db-radius-btn);
  box-shadow: inset 0 1px 0 0 var(--db-can-ring);
  overflow: hidden; cursor: pointer; border: 0;
  animation: db-cta-breath var(--db-dur-breath) ease-in-out infinite;
  transition: background-color var(--db-dur-settle) var(--db-ease-settle), transform var(--db-dur-tap) var(--db-ease-tap);
}
[data-design="b"] .db-cta__tab {
  font-family: var(--db-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--db-tape); color: var(--db-ink);
  padding: 4px 8px; border-radius: var(--db-radius-tab);
  border-left: 2px dashed var(--db-tape-edge); white-space: nowrap;
}
[data-design="b"] .db-cta__label { white-space: nowrap; }
[data-design="b"] .db-cta__arrow { font-family: var(--db-font-mono); font-size: 18px; line-height: 1; transition: transform var(--db-dur-settle) var(--db-ease-settle); }
[data-design="b"] .db-cta__ring {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border-radius: 999px; border: 2px solid var(--db-canvas);
  transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none;
}
[data-design="b"] .db-cta:hover { background: var(--db-brand-wet); }
[data-design="b"] .db-cta:hover .db-cta__ring { animation: db-cta-ring 560ms var(--db-ease-settle) 1; }
[data-design="b"] .db-cta:hover .db-cta__arrow { transform: translateX(4px); }
[data-design="b"] .db-cta:focus-visible { outline: 2px solid var(--db-brand); outline-offset: 4px; }
[data-design="b"] .db-cta:active { transform: scale(0.98); box-shadow: none; }

/* Ghost CTA — drawer variant: no fill */
[data-design="b"] .db-cta--ghost {
  background: transparent; color: var(--db-ink);
  border: 1px dashed var(--db-rule-strong); box-shadow: none; animation: none;
}
[data-design="b"] .db-cta--ghost:hover { background: var(--db-canvas-warm); }
[data-design="b"] .db-cta--ghost .db-cta__ring { border-color: var(--db-brand); }

@keyframes db-cta-breath {
  0%, 100% { box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.35); }
  50%      { box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.62); }
}
@keyframes db-cta-ring {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(28); opacity: 0;   }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — painting contract. 3 text + Element-3 backdrop + Element-2 CTA.
   ONE animated layer: a fresh-coat color-wash drawing in on arrival.
   Hero text is opacity:1 at first paint (NEVER reveal-gated).
   ═══════════════════════════════════════════════════════════════════ */
[data-design="b"] .db-hero {
  position: relative; overflow: hidden;
  padding: clamp(var(--db-wall), 12vh, var(--db-room)) clamp(var(--db-stroke), 5vw, var(--db-bay));
  min-height: clamp(520px, 72vh, 760px);
  display: flex; align-items: center;
  border-bottom: 1px solid var(--db-rule);
  background: var(--db-canvas);
}
/* Static canvas tint beneath the one moving layer */
[data-design="b"] .db-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--db-canvas) 0%, var(--db-canvas-warm) 100%);
}
[data-design="b"] .db-hero__backdrop {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
}
/* The fresh-coat color-wash — ONE animated layer.
   Draws up from the baseline on load (arrival), settles, then a quiet breath.
   A wide low-chroma Iron-Oxide wash; saturated area kept well under 25%. */
[data-design="b"] .db-hero__wash {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 78%;
  background:
    radial-gradient(120% 90% at 22% 100%, rgba(110,58,38,0.30) 0%, rgba(110,58,38,0.12) 38%, transparent 66%),
    linear-gradient(0deg, rgba(76,89,70,0.16) 0%, transparent 60%);
  transform-origin: bottom;
  transform: scaleY(0.04);
  opacity: 0;
  animation:
    db-hero-coat var(--db-dur-wash) var(--db-ease-settle) 120ms forwards,
    db-hero-breath 11s ease-in-out 1900ms infinite;
}
/* A faint ticking-stripe at the very bottom — static, not a directional cue */
[data-design="b"] .db-hero__backdrop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--db-ink) 0 4px, transparent 4px 8px);
  opacity: 0.18;
}
@keyframes db-hero-coat {
  0%   { transform: scaleY(0.04); opacity: 0; }
  100% { transform: scaleY(1);    opacity: 1; }
}
@keyframes db-hero-breath {
  0%, 100% { filter: saturate(1) brightness(1); }
  50%      { filter: saturate(1.08) brightness(1.04); }
}

[data-design="b"] .db-hero__content {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; width: 100%;
  display: grid; gap: var(--db-coat); justify-items: start;
}
[data-design="b"] .db-hero__chip {
  font-family: var(--db-font-mono); font-size: var(--db-type-stamp);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--db-text-soft);
  background: var(--db-tape); border: 1px solid var(--db-tape-edge);
  padding: 6px 10px; border-radius: var(--db-radius-tab);
  opacity: 1;
}
[data-design="b"] .db-hero__headline {
  font-family: var(--db-font-display); font-weight: 700;
  font-size: var(--db-type-jobcard); line-height: 1.0;
  letter-spacing: -0.025em; color: var(--db-ink);
  max-width: 16ch; opacity: 1;
}
[data-design="b"] .db-hero__subtitle {
  font-family: var(--db-font-body); font-size: var(--db-type-body-lg);
  color: var(--db-text-soft); line-height: 1.5; max-width: 52ch; opacity: 1;
}
[data-design="b"] .db-hero__proof {
  font-family: var(--db-font-mono); font-size: var(--db-type-caption);
  color: var(--db-text-mute); letter-spacing: 0.02em; line-height: 1.5;
  max-width: 56ch; opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   ELEMENT 6 — Animated pointer (masking-tape unroll)
   Wayfinding between hero and funnel. NOT a button (aria-hidden div).
   ═══════════════════════════════════════════════════════════════════ */
[data-design="b"] .db-pointer {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; padding: var(--db-bay) 0;
  color: var(--db-text-mute);
  background: var(--db-canvas-warm);
  border-top: 1px solid var(--db-rule);
  border-bottom: 1px solid var(--db-rule);
}
[data-design="b"] .db-pointer__roll {
  display: block; width: 28px; height: 28px; border-radius: 999px;
  background: var(--db-tape-blue);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,0.08), inset 0 0 0 10px var(--db-tape-blue), inset 0 0 0 12px var(--db-canvas-warm);
}
[data-design="b"] .db-pointer__svg { display: block; width: 24px; height: 160px; overflow: visible; }
[data-design="b"] .db-pointer__tape {
  fill: var(--db-tape-blue); transform-origin: top;
  animation: db-pointer-extend var(--db-dur-pointer) var(--db-ease-pull) infinite;
}
[data-design="b"] .db-pointer__torn {
  fill: var(--db-tape-blue);
  animation: db-pointer-tip var(--db-dur-pointer) var(--db-ease-pull) infinite;
}
[data-design="b"] .db-pointer__label { font-family: var(--db-font-mono); font-size: 12px; letter-spacing: 0.12em; }
@keyframes db-pointer-extend {
  0%   { transform: scaleY(0); opacity: 0; }
  10%  {                       opacity: 1; }
  80%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes db-pointer-tip {
  0%   { transform: translateY(0);     opacity: 0; }
  10%  {                                opacity: 1; }
  80%  { transform: translateY(160px); opacity: 1; }
  100% { transform: translateY(160px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   ELEMENT 5 — Animated interactive funnel (4-step)
   ═══════════════════════════════════════════════════════════════════ */
[data-design="b"] .db-funnel {
  padding: var(--db-room) clamp(var(--db-stroke), 5vw, var(--db-bay));
  background: var(--db-canvas);
}
[data-design="b"] .db-funnel__head { max-width: 1180px; margin: 0 auto var(--db-bay); display: grid; gap: var(--db-tape-sp); }
[data-design="b"] .db-funnel__head .db-stamp { justify-self: start; }
[data-design="b"] .db-funnel__lede { color: var(--db-text-soft); max-width: 56ch; }
[data-design="b"] .db-funnel__sheet {
  max-width: 760px; margin: 0 auto;
  background: var(--db-canvas-warm); border: 1px solid var(--db-rule);
  padding: var(--db-bay); min-height: 320px;
  position: relative; overflow: hidden;
}
/* ticking-stripe top edge on the sheet */
[data-design="b"] .db-funnel__sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--db-ink) 0 4px, transparent 4px 8px);
  opacity: 0.55;
}
[data-design="b"] .db-funnel__step { border: 0; padding: 0; margin: 0; min-width: 0; }
[data-design="b"] .db-funnel__step[hidden] { display: none; }
[data-design="b"] .db-funnel__step.is-current { animation: db-step-in var(--db-dur-settle) var(--db-ease-settle); }
@keyframes db-step-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
[data-design="b"] .db-funnel__legend {
  font-family: var(--db-font-display); font-weight: 700;
  font-size: var(--db-type-headline); color: var(--db-text);
  letter-spacing: -0.015em; margin-bottom: var(--db-coat); padding: 0;
}
[data-design="b"] .db-funnel__chips {
  display: flex; flex-wrap: wrap; gap: var(--db-tape-sp);
}
[data-design="b"] .db-funnel__chip {
  appearance: none; cursor: pointer;
  background: var(--db-canvas); border: 1px solid var(--db-rule-strong);
  border-radius: var(--db-radius-tab); color: var(--db-text);
  font-family: var(--db-font-body); font-size: 15px; font-weight: 500;
  padding: 12px 18px; min-height: 44px;
  transition: background-color var(--db-dur-settle) var(--db-ease-settle), border-color var(--db-dur-settle) var(--db-ease-settle), color var(--db-dur-settle) var(--db-ease-settle);
}
[data-design="b"] .db-funnel__chip:hover { border-color: var(--db-ink); background: var(--db-tape); }
[data-design="b"] .db-funnel__chip:focus-visible { outline: 2px solid var(--db-brand); outline-offset: 2px; }
[data-design="b"] .db-funnel__chip.is-picked {
  background: var(--db-brand); border-color: var(--db-brand); color: var(--db-canvas);
}
[data-design="b"] .db-funnel__progress {
  display: flex; gap: var(--db-tape-sp); margin-top: var(--db-bay);
}
[data-design="b"] .db-funnel__dot {
  width: 26px; height: 4px; background: var(--db-rule);
  border-radius: 2px; transition: background-color var(--db-dur-settle) var(--db-ease-settle);
}
[data-design="b"] .db-funnel__dot.is-active { background: var(--db-brand); }
[data-design="b"] .db-funnel__dot.is-done { background: var(--db-rule-strong); }

/* Fields */
[data-design="b"] .db-funnel__fields {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--db-coat);
}
[data-design="b"] .db-field { display: grid; gap: 6px; min-width: 0; }
[data-design="b"] .db-field--full { grid-column: 1 / -1; }
[data-design="b"] .db-field__label {
  font-family: var(--db-font-mono); font-size: var(--db-type-stamp);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--db-text-soft);
}
[data-design="b"] .db-field__req { text-transform: none; letter-spacing: 0; color: var(--db-text-mute); }
[data-design="b"] .db-field__input {
  appearance: none; width: 100%; background: transparent;
  border: 0; border-bottom: 1px solid var(--db-rule);
  padding: 10px 2px; font-family: var(--db-font-body); font-size: 16px;
  color: var(--db-text);
  transition: border-color var(--db-dur-settle) var(--db-ease-settle);
}
[data-design="b"] .db-field__input::placeholder { color: var(--db-text-mute); }
[data-design="b"] .db-field__input:focus { outline: none; border-bottom: 2px solid var(--db-brand); }
[data-design="b"] .db-field__textarea { resize: vertical; min-height: 96px; border: 1px solid var(--db-rule); border-radius: var(--db-radius-tab); padding: 12px; }
[data-design="b"] .db-field__textarea:focus { border: 1px solid var(--db-brand); }
[data-design="b"] .db-field__file { font-family: var(--db-font-mono); font-size: 13px; border-bottom: 1px dashed var(--db-rule-strong); padding: 10px 0; }

[data-design="b"] .db-funnel__actions {
  display: flex; flex-wrap: wrap; gap: var(--db-coat); align-items: center; margin-top: var(--db-bay);
}
[data-design="b"] .db-funnel__back {
  appearance: none; background: transparent; border: 0; color: var(--db-text-soft);
  font-family: var(--db-font-body); font-size: 14px; text-decoration: underline;
  text-underline-offset: 4px; cursor: pointer; padding: 12px; min-height: 44px;
}
[data-design="b"] .db-funnel__back:focus-visible { outline: 2px solid var(--db-brand); outline-offset: 2px; }

/* Confirm */
[data-design="b"] .db-funnel__step--confirm { display: grid; place-items: center; text-align: center; padding: var(--db-bay) 0; }
[data-design="b"] .db-funnel__confirm-inner { display: grid; gap: var(--db-stroke); justify-items: center; max-width: 46ch; }
[data-design="b"] .db-funnel__confirm-title { font-family: var(--db-font-display); font-weight: 700; font-size: var(--db-type-headline); color: var(--db-text); }
[data-design="b"] .db-funnel__confirm-body { color: var(--db-text-soft); line-height: 1.6; }
[data-design="b"] .db-funnel__confirm-body a { color: var(--db-brand); text-underline-offset: 3px; }

/* Trust strip */
[data-design="b"] .db-funnel__trust {
  max-width: 760px; margin: var(--db-bay) auto 0;
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  font-family: var(--db-font-mono); font-size: var(--db-type-stamp);
  color: var(--db-text-mute); letter-spacing: 0.02em;
}
[data-design="b"] .db-trust__phone { color: var(--db-brand); text-decoration: none; }
[data-design="b"] .db-trust__phone:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   BEFORE / AFTER (low-photo handling) — canvas-flap reveals honest
   scope cards, NOT fabricated photos. No stock anywhere.
   ═══════════════════════════════════════════════════════════════════ */
[data-design="b"] .db-work {
  padding: var(--db-room) clamp(var(--db-stroke), 5vw, var(--db-bay));
  background: var(--db-canvas-warm);
}
[data-design="b"] .db-work__head { max-width: 1180px; margin: 0 auto var(--db-bay); display: grid; gap: var(--db-tape-sp); }
[data-design="b"] .db-work__lede { color: var(--db-text-soft); max-width: 64ch; line-height: 1.6; }
[data-design="b"] .db-work__grid {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1180px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--db-bay) var(--db-stroke);
}
[data-design="b"] .db-work__panel { display: grid; gap: var(--db-stroke); }
[data-design="b"] .db-work__sheet {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--db-canvas); border: 1px solid var(--db-rule);
}
/* The card sits beneath the folded canvas */
[data-design="b"] .db-work__card {
  position: absolute; inset: 0; display: grid; align-content: center; gap: var(--db-tape-sp);
  padding: var(--db-coat); opacity: 0;
  transition: opacity var(--db-dur-flap) var(--db-ease-settle); transition-delay: 200ms;
}
[data-design="b"] .db-work__card-title { font-family: var(--db-font-display); font-weight: 700; font-size: var(--db-type-headline); color: var(--db-text); letter-spacing: -0.015em; }
[data-design="b"] .db-work__card-desc { color: var(--db-text-soft); font-size: 15px; line-height: 1.5; }
[data-design="b"] .db-work__card .db-stamp { justify-self: start; }
/* Folded canvas covers the card; flaps open from top edge on scroll-in */
[data-design="b"] .db-work__canvas {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 2;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 5px),
    var(--db-tape);
  border-bottom: 2px dashed var(--db-tape-edge);
  transform-origin: top; transform: rotateX(0deg);
  transition: transform var(--db-dur-flap) var(--db-ease-flap);
  box-shadow: 0 1px 0 var(--db-rule);
}
[data-design="b"] .db-work__panel.is-flapped .db-work__canvas { transform: rotateX(-92deg); }
[data-design="b"] .db-work__panel.is-flapped .db-work__card { opacity: 1; }
[data-design="b"] .db-work__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--db-stroke); padding-top: var(--db-tape-sp); border-top: 1px solid var(--db-rule); }
[data-design="b"] .db-work__meta .db-stamp { color: var(--db-text-mute); }
[data-design="b"] .db-work__note { max-width: 1180px; margin: var(--db-bay) auto 0; color: var(--db-text-soft); font-size: 15px; }

[data-design="b"] .db-work__repeat-cta {
  max-width: 1180px; margin: var(--db-bay) auto 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--db-coat);
  padding-top: var(--db-bay); border-top: 1px solid var(--db-rule);
}
[data-design="b"] .db-work__repeat-label { font-family: var(--db-font-display); font-weight: 500; font-size: var(--db-type-headline); color: var(--db-text); letter-spacing: -0.01em; }

/* ═══════════════════════════════════════════════════════════════════
   ELEMENT 4 — Color Shelf (can-ring breath)
   ═══════════════════════════════════════════════════════════════════ */
[data-design="b"] .db-shelf {
  padding: var(--db-room) clamp(var(--db-stroke), 5vw, var(--db-bay));
  background: var(--db-canvas);
  background-image: repeating-linear-gradient(90deg, var(--db-ink) 0 4px, transparent 4px 8px);
  background-repeat: no-repeat; background-size: 100% 4px; background-position: 0 0;
}
[data-design="b"] .db-shelf__head { max-width: 1180px; margin: 0 auto var(--db-bay); display: grid; gap: var(--db-tape-sp); }
[data-design="b"] .db-shelf__lede { color: var(--db-text-soft); max-width: 56ch; }
[data-design="b"] .db-shelf__row {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1180px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--db-stroke);
}
[data-design="b"] .db-shelf__can { display: grid; gap: var(--db-tape-sp); justify-items: center; }
[data-design="b"] .db-shelf__lid {
  display: block; aspect-ratio: 1; width: 100%; max-width: 150px;
  background: var(--can); border-radius: var(--db-radius-can);
  position: relative; overflow: hidden;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.15), inset 0 2px 0 0 var(--db-can-ring);
  animation: db-can-ring var(--db-dur-bench-a) ease-in-out infinite;
  animation-delay: calc(var(--i) * -2s);
}
[data-design="b"] .db-shelf__lid::after {
  content: ""; position: absolute; inset: 14%; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255,255,255,0.18), transparent 70%);
}
[data-design="b"] .db-shelf__meta { display: grid; gap: 4px; justify-items: center; text-align: center; }
[data-design="b"] .db-shelf__name { font-family: var(--db-font-display); font-weight: 500; font-size: 17px; letter-spacing: -0.005em; color: var(--db-text); }
[data-design="b"] .db-shelf__bench {
  max-width: 1180px; margin: var(--db-bay) auto 0;
  height: 8px; background: var(--db-canvas-warm);
  border-top: 1px solid var(--db-rule); border-bottom: 1px solid var(--db-rule);
}
@keyframes db-can-ring {
  0%, 100% { box-shadow: inset 0 -2px 6px rgba(0,0,0,0.15), inset 0 2px 0 0 rgba(255,255,255,0.42); }
  50%      { box-shadow: inset 0 -2px 6px rgba(0,0,0,0.18), inset 0 2px 0 0 rgba(255,255,255,0.68); }
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICES — tickets
   ═══════════════════════════════════════════════════════════════════ */
[data-design="b"] .db-services {
  padding: var(--db-room) clamp(var(--db-stroke), 5vw, var(--db-bay));
  background: var(--db-canvas-warm);
}
[data-design="b"] .db-services__head { max-width: 1180px; margin: 0 auto var(--db-bay); display: grid; gap: var(--db-tape-sp); }
[data-design="b"] .db-services__grid {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1180px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--db-stroke);
}
[data-design="b"] .db-ticket {
  position: relative; background: var(--db-canvas);
  border: 1px solid var(--db-rule); padding: var(--db-coat);
  display: grid; gap: var(--db-tape-sp);
}
[data-design="b"] .db-ticket::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--db-ink) 0 2px, transparent 2px 4px);
  opacity: 0.5;
}
[data-design="b"] .db-ticket__num { font-family: var(--db-font-mono); font-size: var(--db-type-stamp); color: var(--db-text-mute); letter-spacing: 0.08em; }
[data-design="b"] .db-ticket__name { font-family: var(--db-font-display); font-weight: 700; font-size: var(--db-type-headline); color: var(--db-text); letter-spacing: -0.015em; }
[data-design="b"] .db-ticket__desc { color: var(--db-text-soft); font-size: 15px; line-height: 1.55; max-width: 50ch; }

/* ═══════════════════════════════════════════════════════════════════
   PROCESS / PREP
   ═══════════════════════════════════════════════════════════════════ */
[data-design="b"] .db-process {
  padding: var(--db-room) clamp(var(--db-stroke), 5vw, var(--db-bay));
  background: var(--db-canvas);
}
[data-design="b"] .db-process__head { max-width: 1180px; margin: 0 auto var(--db-bay); display: grid; gap: var(--db-tape-sp); }
[data-design="b"] .db-process__intro { color: var(--db-text-soft); max-width: 60ch; line-height: 1.6; }
[data-design="b"] .db-process__track {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1180px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--db-bay) var(--db-stroke);
}
[data-design="b"] .db-process__step { display: flex; gap: var(--db-stroke); align-items: flex-start; padding-top: var(--db-stroke); border-top: 1px solid var(--db-rule); }
[data-design="b"] .db-process__step-num { font-family: var(--db-font-mono); font-size: 14px; color: var(--db-brand); letter-spacing: 0.06em; min-width: 28px; }
[data-design="b"] .db-process__step-name { font-family: var(--db-font-display); font-weight: 700; font-size: 20px; color: var(--db-text); letter-spacing: -0.01em; margin-bottom: 6px; }
[data-design="b"] .db-process__step-desc { color: var(--db-text-soft); font-size: 15px; line-height: 1.55; max-width: 46ch; }

/* ═══════════════════════════════════════════════════════════════════
   SERVICE AREA
   ═══════════════════════════════════════════════════════════════════ */
[data-design="b"] .db-area {
  padding: var(--db-room) clamp(var(--db-stroke), 5vw, var(--db-bay));
  background: var(--db-canvas-warm);
}
[data-design="b"] .db-area__head { max-width: 1180px; margin: 0 auto var(--db-bay); display: grid; gap: var(--db-tape-sp); }
[data-design="b"] .db-area__body { max-width: 1180px; margin: 0 auto; display: grid; gap: var(--db-coat); }
[data-design="b"] .db-area__text { color: var(--db-text-soft); max-width: 60ch; line-height: 1.6; }
[data-design="b"] .db-area__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--db-tape-sp); }
[data-design="b"] .db-area__item {
  font-family: var(--db-font-mono); font-size: 13px; letter-spacing: 0.04em;
  background: var(--db-canvas); border: 1px solid var(--db-rule);
  padding: 8px 14px; border-radius: var(--db-radius-tab); color: var(--db-text-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
[data-design="b"] .db-footer {
  background: var(--db-chip-04); color: var(--db-canvas);
  padding: var(--db-room) clamp(var(--db-stroke), 5vw, var(--db-bay)) var(--db-bay);
}
[data-design="b"] .db-footer__top {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--db-bay); justify-content: space-between; align-items: center;
}
[data-design="b"] .db-footer__name { display: block; font-family: var(--db-font-display); font-weight: 700; font-size: var(--db-type-headline); letter-spacing: -0.015em; }
[data-design="b"] .db-footer__sub { display: block; font-family: var(--db-font-mono); font-size: 13px; color: var(--db-rule); letter-spacing: 0.04em; margin-top: 4px; }
[data-design="b"] .db-footer__ctas { display: flex; flex-wrap: wrap; gap: var(--db-coat); align-items: center; }
[data-design="b"] .db-footer__phone { font-family: var(--db-font-mono); font-size: 18px; color: var(--db-canvas); text-decoration: none; letter-spacing: 0.02em; min-height: 44px; display: inline-flex; align-items: center; }
[data-design="b"] .db-footer__phone:hover { color: var(--db-tape); }
[data-design="b"] .db-footer__rule { max-width: 1180px; margin: var(--db-bay) auto; height: 4px; background: repeating-linear-gradient(90deg, var(--db-canvas) 0 4px, transparent 4px 8px); opacity: 0.4; }
[data-design="b"] .db-footer__meta { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 12px; font-family: var(--db-font-mono); font-size: var(--db-type-stamp); color: var(--db-rule); letter-spacing: 0.04em; }
[data-design="b"] .db-footer__area { max-width: 1180px; margin: var(--db-stroke) auto 0; font-family: var(--db-font-mono); font-size: 12px; color: var(--db-muted); letter-spacing: 0.04em; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  [data-design="b"] .db-work__grid { grid-template-columns: repeat(2, 1fr); }
  [data-design="b"] .db-shelf__row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  [data-design="b"] .db-services__grid,
  [data-design="b"] .db-process__track { grid-template-columns: 1fr; }
  [data-design="b"] .db-funnel__fields { grid-template-columns: 1fr; }
  [data-design="b"] .db-funnel__sheet { padding: var(--db-coat); }
}
@media (max-width: 540px) {
  [data-design="b"] .db-work__grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  [data-design="b"] .db-shelf__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  [data-design="b"] .db-header__mark { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION — every animation has a still fallback.
   Hero text + wash remain VISIBLE (never opacity:0).
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .db-header__tape { animation: none; transform: translateX(0); opacity: 0.9; }
  [data-design="b"] .db-drawer__panel { transition: none; }
  [data-design="b"] .db-cta { animation: none; }
  [data-design="b"] .db-cta:hover .db-cta__ring { animation: none; }
  [data-design="b"] .db-hero__wash { animation: none; transform: scaleY(1); opacity: 1; }
  [data-design="b"] .db-pointer__tape { animation: none; transform: scaleY(1); opacity: 0.7; }
  [data-design="b"] .db-pointer__torn { animation: none; transform: translateY(160px); opacity: 1; }
  [data-design="b"] .db-funnel__step.is-current { animation: none; }
  [data-design="b"] .db-shelf__lid { animation: none; }
  [data-design="b"] .db-work__canvas { transition: none; transform: rotateX(-92deg); }
  [data-design="b"] .db-work__card { transition: none; opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   DEFENSIVE MOBILE CLIP — Phase 4 requirement (MUST be at bottom)
   No horizontal scroll at 320 / 390 / 768 / 1440px.
   ═══════════════════════════════════════════════════════════════════ */
[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; }