@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');

/* ============================================================
   DESIGN B — "Drop Cloth" remapped to slot [data-design="b"]
   A painter's job-site book: canvas + steel-can palette,
   ticking-stripe rules, mono stamps, tape-pull / can-ring /
   canvas-flap / fill-up physics.
   ============================================================ */

[data-design="b"] {
  /* ---- trade-rooted color tokens (canvas + quart-can chips) ---- */
  --b-canvas      : #EFEAE0;
  --b-canvas-warm : #E5DECF;
  --b-ink         : #15140F;
  --b-ink-soft    : #3F3A30;
  --b-muted       : #7E7766;
  --b-rule        : #C8BFA8;
  --b-rule-strong : #6A6151;

  --b-tape        : #F4E9C8;
  --b-tape-edge   : #E0CE9C;
  --b-tape-blue   : #4E78A8;

  --b-chip-01     : #6E3A26;  /* Iron Oxide — primary brand */
  --b-chip-02     : #4C5946;  /* Drop Cloth Green */
  --b-chip-03     : #E3D7B5;  /* Bone */
  --b-chip-04     : #2A2620;  /* Coal */
  --b-chip-01-wet : #84462E;
  --b-chip-02-wet : #5A6852;

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

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

  /* CONTRACT: expose the design-b primary */
  --design-b-primary : var(--b-chip-01);

  /* ---- type ---- */
  --b-font-display : 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --b-font-body    : 'DM Sans', -apple-system, 'Helvetica Neue', sans-serif;
  --b-font-mono    : 'DM Mono', 'SFMono-Regular', 'Menlo', monospace;
  --b-type-jobcard : clamp(40px, 6.4vw, 84px);
  --b-type-display : clamp(28px, 4.2vw, 52px);
  --b-type-body-lg : clamp(17px, 1.5vw, 19px);
  --b-type-body    : clamp(16px, 1.3vw, 17px);

  /* ---- spacing (shop-floor scale) ---- */
  --b-hairline:1px; --b-stitch:4px; --b-tap:8px; --b-stroke:16px;
  --b-coat:24px; --b-bay:40px; --b-wall:64px; --b-room:96px; --b-job:160px;

  /* ---- motion ---- */
  --b-dur-tap:140ms; --b-dur-settle:280ms; --b-dur-pull:520ms;
  --b-dur-flap:760ms; --b-dur-fill:1200ms;
  --b-dur-bench-a:14000ms; --b-dur-bench-b:21000ms;
  --b-dur-breath:5600ms; --b-dur-pointer:5200ms; --b-dur-wash:13000ms;
  --b-ease-pull:cubic-bezier(.55,0,.15,1);
  --b-ease-flap:cubic-bezier(.34,1.2,.6,1);
  --b-ease-settle:cubic-bezier(.16,1,.3,1);
  --b-ease-tap:cubic-bezier(.4,0,.6,1);

  --b-radius-tab:2px; --b-radius-btn:4px; --b-radius-can:999px;

  background: var(--b-surface);
  color: var(--b-text);
  font-family: var(--b-font-body);
  font-size: var(--b-type-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[data-design="b"] h1,[data-design="b"] h2,[data-design="b"] h3 { font-family: var(--b-font-display); }
[data-design="b"] a { color: inherit; }
[data-design="b"] .b-type-display { font-family: var(--b-font-display); font-weight: 700; font-size: var(--b-type-display); line-height: 1.08; letter-spacing: -0.02em; margin: 0; color: var(--b-text); }

/* ---- Stamp (rubber-stamped mono label) ---- */
[data-design="b"] .b-stamp {
  display: inline-block; font-family: var(--b-font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--b-text-mute);
  background: var(--b-canvas-warm); border: 1px solid var(--b-rule);
  border-radius: var(--b-radius-tab); padding: 4px 9px; line-height: 1.2;
}

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

[data-design="b"] .b-header__stripe {
  position: relative; height: 4px; overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--b-ink) 0 4px, transparent 4px 8px);
  opacity: 0.85;
}
[data-design="b"] .b-header__tape {
  position: absolute; top: -2px; bottom: -2px; left: 30%; width: 18%;
  background: var(--b-tape-blue);
  border-left: 1px solid rgba(0,0,0,0.18); border-right: 1px solid rgba(0,0,0,0.18);
  animation: b-header-tape var(--b-dur-bench-b) var(--b-ease-pull) infinite;
  transform-origin: right;
}
@keyframes b-header-tape {
  0%{transform:translateX(0) scaleX(1);opacity:.9} 35%{transform:translateX(0) scaleX(1);opacity:.9}
  60%{transform:translateX(-80%) scaleX(.4);opacity:.5} 62%{transform:translateX(120%) scaleX(1);opacity:0}
  68%{transform:translateX(120%) scaleX(1);opacity:0} 72%{transform:translateX(0) scaleX(1);opacity:.9}
  100%{transform:translateX(0) scaleX(1);opacity:.9}
}

/* ---- drawer ---- */
[data-design="b"] .b-drawer { position: fixed; inset: 0; z-index: 60; background: rgba(21,20,15,0.36); }
[data-design="b"] .b-drawer[hidden] { display: none; }
[data-design="b"] .b-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 88vw);
  background: var(--b-canvas); border-top: 3px solid var(--b-tape-blue);
  padding: var(--b-coat); display: flex; flex-direction: column; gap: var(--b-bay);
  transform: translateX(100%); transition: transform var(--b-dur-pull) var(--b-ease-pull);
}
[data-design="b"] .b-drawer.is-open .b-drawer__panel { transform: translateX(0); }
[data-design="b"] .b-drawer__close {
  appearance: none; background: transparent; border: 0; font-family: var(--b-font-mono);
  font-size: 28px; color: var(--b-ink); cursor: pointer; align-self: flex-end; width: 44px; height: 44px;
}
[data-design="b"] .b-drawer__nav { display: flex; flex-direction: column; gap: 4px; }
[data-design="b"] .b-drawer__nav a {
  font-family: var(--b-font-display); font-size: 26px; font-weight: 500; color: var(--b-ink);
  text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--b-rule);
}
[data-design="b"] .b-drawer__nav a:hover { color: var(--b-brand); }
[data-design="b"] .b-drawer__cta { display: flex; flex-direction: column; gap: var(--b-stroke); }
[data-design="b"] .b-drawer__phone { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
[data-design="b"] .b-drawer__phone-num { font-family: var(--b-font-display); font-size: 22px; color: var(--b-ink); }
[data-design="b"] .b-drawer__foot { margin-top: auto; }

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

/* ============ HERO — one animated layer: slow color-wash drift ============ */
[data-design="b"] .b-hero {
  position: relative; overflow: hidden; background: var(--b-canvas);
  padding: clamp(var(--b-wall), 9vw, var(--b-job)) clamp(var(--b-stroke), 5vw, var(--b-bay)) var(--b-room);
}
[data-design="b"] .b-hero__wash {
  position: absolute; inset: -20% -10% auto -10%; height: 130%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 22%, rgba(110,58,38,0.34), transparent 70%),
    radial-gradient(54% 46% at 18% 78%, rgba(76,89,70,0.30), transparent 72%),
    linear-gradient(120deg, var(--b-canvas-warm), var(--b-canvas));
  background-size: 180% 180%, 180% 180%, 100% 100%;
  animation: b-hero-wash var(--b-dur-wash) ease-in-out infinite alternate, b-hero-arrive 1400ms var(--b-ease-settle) both;
}
@keyframes b-hero-wash {
  0%   { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: 38% 26%, 62% 70%, 0 0; }
}
@keyframes b-hero-arrive { 0%{opacity:0} 100%{opacity:1} }
[data-design="b"] .b-hero__inner { position: relative; z-index: 1; max-width: 980px; display: grid; gap: var(--b-stroke); }
[data-design="b"] .b-hero__stamp { justify-self: start; }
[data-design="b"] .b-hero__rule { height: 4px; width: clamp(120px, 30%, 240px); background: repeating-linear-gradient(90deg, var(--b-ink) 0 4px, transparent 4px 8px); opacity: .9; }
[data-design="b"] .b-hero__title { font-family: var(--b-font-display); font-weight: 700; font-size: var(--b-type-jobcard); line-height: 1.02; letter-spacing: -0.025em; color: var(--b-ink); margin: 0; max-width: 16ch; opacity: 1; }
[data-design="b"] .b-hero__sub { font-size: var(--b-type-body-lg); color: var(--b-text-soft); max-width: 56ch; margin: 8px 0 0; opacity: 1; }
[data-design="b"] .b-hero__proof { font-family: var(--b-font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--b-text-mute); margin: 4px 0 0; text-transform: uppercase; opacity: 1; }
[data-design="b"] .b-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-stroke); margin-top: var(--b-stroke); }

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

/* ============ ELEMENT 5 — funnel ============ */
[data-design="b"] .b-funnel { padding: var(--b-room) clamp(var(--b-stroke), 5vw, var(--b-bay)); background: var(--b-canvas); border-top: 1px solid var(--b-rule); }
[data-design="b"] .b-funnel__head { max-width: 1100px; margin: 0 auto var(--b-bay); display: grid; gap: var(--b-tap); }
[data-design="b"] .b-funnel__head .b-stamp { justify-self: start; }
[data-design="b"] .b-funnel__lede { color: var(--b-text-soft); max-width: 62ch; margin: 0; }
[data-design="b"] .b-funnel__sheet { max-width: 1100px; margin: 0 auto; background: var(--b-canvas-warm); border: 1px solid var(--b-rule); padding: var(--b-coat); display: grid; gap: var(--b-coat); }
[data-design="b"] .b-funnel__steps { list-style: none; margin: 0; padding: 0; }
[data-design="b"] .b-step[hidden] { display: none; }
[data-design="b"] .b-step { display: grid; gap: var(--b-stroke); }
[data-design="b"] .b-step__rail { display: grid; gap: 8px; }
[data-design="b"] .b-step__rail .b-stamp { justify-self: start; }
[data-design="b"] .b-step__q { font-family: var(--b-font-display); font-weight: 700; font-size: clamp(22px,3vw,30px); margin: 0; letter-spacing: -0.01em; }
[data-design="b"] .b-step__opts { display: flex; flex-wrap: wrap; gap: var(--b-tap); }
[data-design="b"] .b-opt {
  appearance: none; cursor: pointer; background: var(--b-canvas); border: 1px solid var(--b-rule);
  border-radius: var(--b-radius-btn); padding: 12px 18px; min-height: 44px;
  font-family: var(--b-font-body); font-size: 16px; color: var(--b-text);
  position: relative; overflow: hidden;
  transition: background-color var(--b-dur-settle) var(--b-ease-settle), border-color var(--b-dur-settle) var(--b-ease-settle), color var(--b-dur-settle) var(--b-ease-settle);
}
[data-design="b"] .b-opt:hover { border-color: var(--b-rule-strong); background: var(--b-tape); }
[data-design="b"] .b-opt:focus-visible { outline: 2px solid var(--b-brand); outline-offset: 2px; }
[data-design="b"] .b-opt.is-picked { background: var(--b-brand); border-color: var(--b-brand); color: var(--b-canvas); }
[data-design="b"] .b-step__back { appearance: none; background: transparent; border: 0; justify-self: start; color: var(--b-text-soft); font-family: var(--b-font-body); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 12px 0; min-height: 44px; }

[data-design="b"] .b-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--b-stroke); }
[data-design="b"] .b-field { display: grid; gap: 6px; }
[data-design="b"] .b-field--wide { grid-column: 1 / -1; }
[data-design="b"] .b-field__lbl { font-family: var(--b-font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--b-text-mute); }
[data-design="b"] .b-field input, [data-design="b"] .b-field textarea {
  font-family: var(--b-font-body); font-size: 16px; color: var(--b-text);
  background: transparent; border: 0; border-bottom: 1px solid var(--b-rule);
  padding: 10px 2px; min-height: 44px; transition: border-color var(--b-dur-settle) var(--b-ease-settle); width: 100%;
}
[data-design="b"] .b-field textarea { resize: vertical; min-height: 80px; }
[data-design="b"] .b-field input:focus, [data-design="b"] .b-field textarea:focus { outline: 0; border-bottom: 2px solid var(--b-brand); }
[data-design="b"] .b-fields__note { grid-column: 1 / -1; margin: 0; }
[data-design="b"] .b-cta--submit { grid-column: 1 / -1; justify-self: start; }
[data-design="b"] .b-funnel__bar { height: 6px; background: var(--b-canvas); border: 1px solid var(--b-rule); position: relative; overflow: hidden; }
[data-design="b"] .b-funnel__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: var(--b-brand); transition: width var(--b-dur-fill) var(--b-ease-settle); }
[data-design="b"] .b-funnel__next { margin: 0; color: var(--b-text-soft); font-size: 15px; }
[data-design="b"] .b-funnel__next .b-stamp { margin-right: 8px; }

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

/* ============ ELEMENT 4 — services as canvas-flap tickets ============ */
[data-design="b"] .b-jobs { padding: var(--b-room) clamp(var(--b-stroke), 5vw, var(--b-bay)); background: var(--b-canvas-warm); }
[data-design="b"] .b-jobs__head { max-width: 1100px; margin: 0 auto var(--b-bay); display: grid; gap: var(--b-tap); }
[data-design="b"] .b-jobs__head .b-stamp { justify-self: start; }
[data-design="b"] .b-jobs__lede { color: var(--b-text-soft); max-width: 60ch; margin: 0; }
[data-design="b"] .b-jobs__grid { list-style: none; padding: 0; margin: 0 auto; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b-stroke); }
[data-design="b"] .b-jobs__ticket { display: grid; }
[data-design="b"] .b-jobs__card { position: relative; background: var(--b-canvas); border: 1px solid var(--b-rule); overflow: hidden; min-height: 168px; }
[data-design="b"] .b-jobs__card::before { content:""; display:block; height:4px; background: repeating-linear-gradient(90deg, var(--b-ink) 0 2px, transparent 2px 4px); }
[data-design="b"] .b-jobs__sheet {
  position: absolute; left: 0; right: 0; top: 4px; height: calc(100% - 4px);
  background: repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 5px), var(--b-tape);
  border-bottom: 2px dashed var(--b-tape-edge); transform-origin: top; transform: rotateX(0deg);
  transition: transform var(--b-dur-flap) var(--b-ease-flap); z-index: 2;
}
[data-design="b"] .b-jobs__ticket.is-flapped .b-jobs__sheet { transform: rotateX(-92deg); }
[data-design="b"] .b-jobs__body { padding: var(--b-stroke); display: grid; gap: 6px; }
[data-design="b"] .b-jobs__body .b-stamp { justify-self: start; }
[data-design="b"] .b-jobs__body h3 { font-family: var(--b-font-display); font-weight: 700; font-size: 19px; margin: 4px 0 0; letter-spacing: -0.01em; }
[data-design="b"] .b-jobs__body p { margin: 0; font-size: 15px; color: var(--b-text-soft); line-height: 1.5; }
[data-design="b"] .b-jobs__repeat { max-width: 1100px; margin: var(--b-bay) auto 0; display: flex; justify-content: center; }

/* ============ process ============ */
[data-design="b"] .b-process { padding: var(--b-room) clamp(var(--b-stroke), 5vw, var(--b-bay)); background: var(--b-canvas); border-top: 1px solid var(--b-rule); }
[data-design="b"] .b-process__head { max-width: 1100px; margin: 0 auto var(--b-bay); display: grid; gap: var(--b-tap); }
[data-design="b"] .b-process__head .b-stamp { justify-self: start; }
[data-design="b"] .b-process__track { list-style: none; padding: 0; margin: 0 auto; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b-coat); }
[data-design="b"] .b-process__phase { display: grid; gap: 8px; padding-top: var(--b-stroke); border-top: 2px solid var(--b-rule-strong); }
[data-design="b"] .b-process__phase .b-stamp { justify-self: start; }
[data-design="b"] .b-process__phase h3 { font-family: var(--b-font-display); font-weight: 700; font-size: 20px; margin: 4px 0 0; }
[data-design="b"] .b-process__phase p { margin: 0; font-size: 15px; color: var(--b-text-soft); line-height: 1.5; }
[data-design="b"] .b-process__inline { max-width: 1100px; margin: var(--b-bay) auto 0; color: var(--b-text-soft); }
[data-design="b"] .b-process__inline a { color: var(--b-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ============ footer ============ */
[data-design="b"] .b-footer { background: var(--b-chip-04); color: var(--b-canvas); padding: var(--b-room) clamp(var(--b-stroke), 5vw, var(--b-bay)) var(--b-bay); }
[data-design="b"] .b-footer .b-stamp { background: transparent; border-color: var(--b-rule-strong); color: var(--b-tape); }
[data-design="b"] .b-footer__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--b-bay); }
[data-design="b"] .b-footer__mark { font-family: var(--b-font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
[data-design="b"] .b-footer__tag { color: var(--b-canvas-warm); max-width: 40ch; margin: 12px 0 0; font-size: 15px; }
[data-design="b"] .b-footer__col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
[data-design="b"] .b-footer__col a, [data-design="b"] .b-footer__col span { color: var(--b-canvas); text-decoration: none; font-size: 15px; }
[data-design="b"] .b-footer__col a:hover { text-decoration: underline; }
[data-design="b"] .b-footer__exp { color: var(--b-tape); }
[data-design="b"] .b-footer__stripe { max-width: 1100px; margin: var(--b-bay) auto var(--b-stroke); height: 4px; background: repeating-linear-gradient(90deg, var(--b-tape) 0 4px, transparent 4px 8px); opacity: .5; }
[data-design="b"] .b-footer__legal { max-width: 1100px; margin: 0 auto; }

/* ============ responsive ============ */
@media (max-width: 920px) {
  [data-design="b"] .b-shelf__row { grid-template-columns: repeat(3, 1fr); }
  [data-design="b"] .b-jobs__grid { grid-template-columns: repeat(2, 1fr); }
  [data-design="b"] .b-process__track { grid-template-columns: repeat(2, 1fr); }
  [data-design="b"] .b-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  [data-design="b"] .b-hero { padding-top: var(--b-wall); padding-bottom: var(--b-wall); }
  [data-design="b"] .b-shelf__row { grid-template-columns: repeat(2, 1fr); }
  [data-design="b"] .b-jobs__grid { grid-template-columns: 1fr; }
  [data-design="b"] .b-process__track { grid-template-columns: 1fr; }
  [data-design="b"] .b-fields { grid-template-columns: 1fr; }
  [data-design="b"] .b-footer__inner { grid-template-columns: 1fr; }
  [data-design="b"] .b-funnel, [data-design="b"] .b-shelf, [data-design="b"] .b-jobs, [data-design="b"] .b-process, [data-design="b"] .b-footer { padding-top: var(--b-wall); padding-bottom: var(--b-wall); }
}
@media (max-width: 380px) { [data-design="b"] .b-header__mark { font-size: 17px; } }

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-header__tape { animation: none; transform: translateX(0); opacity: .9; }
  [data-design="b"] .b-drawer__panel { transition: none; }
  [data-design="b"] .b-cta { animation: none; }
  [data-design="b"] .b-cta:hover .b-cta__ring { animation: none; }
  [data-design="b"] .b-hero__wash { animation: b-hero-arrive 600ms ease both; }
  [data-design="b"] .b-pointer__tape { animation: none; transform: scaleY(1); opacity: .85; }
  [data-design="b"] .b-pointer__torn { animation: none; transform: translateY(108px); opacity: 1; }
  [data-design="b"] .b-shelf__lid { animation: none; }
  [data-design="b"] .b-jobs__sheet { transition: none; transform: rotateX(-92deg); }
}

/* ============ mobile no-h-scroll guards (CONTRACT — bottom of file) ============ */
[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; }