/* ══════════════════════════════════════════════════════════════════════
   Design B — "Fumed Rail" — Cottleville Deck & Fence Stain & Repair
   Remapped grammar (hand-joinery / lamplight) onto a fencing estimator.
   Slot-scoped [data-design="b"] throughout. --design-b-primary exposed.
   ══════════════════════════════════════════════════════════════════════ */

[data-design="b"] {
  /* ─── Color — weathered-cedar field (daylit canonical) ────────────── */
  --design-b-primary:  #7A3420; /* oxblood-cedar HOT accent — exposed per contract */
  --b-paper:       #EDE3D0;  /* page ground — sun-bleached cedar plank            */
  --b-paper-deep:  #E3D6BC;  /* alternating section band                          */
  --b-panel:       #D9C8A6;  /* stamped panel ground                              */
  --b-surface:     #F4EDDC;  /* plate stock                                       */
  --b-surface-2:   #FAF4E6;  /* elevated / form fields                            */
  --b-ink:         #2B2318;  /* primary text — fumed oak, never #000               */
  --b-ink-2:       #4B3F2C;  /* secondary text                                     */
  --b-bark:        #74624A;  /* captions / meta                                    */
  --b-faint:       #9E8B68;  /* hairline labels                                    */
  --b-border:      #C6AF80;  /* plate edge                                         */
  --b-border-soft: #D8C79E;
  --b-rule:        #AE9464;  /* hairline rules                                     */
  --b-fumed:       #241C13;  /* fumed band — header / footer / drawer              */
  --b-fumed-deep:  #1A140D;

  --b-moss:        #57662F;  /* structural ink — rules, motifs                     */
  --b-moss-deep:   #40491F;
  --b-moss-glow:   #778A46;
  --b-ochre:       #A9782A;  /* warm accent — lamp / tags                          */
  --b-ochre-deep:  #866017;
  --b-ochre-glow:  #D3A044;
  --design-b-oxblood:      var(--design-b-primary);
  --design-b-oxblood-deep: #5A2717;
  --design-b-oxblood-glow: #9C5236;
  --b-patina:      #2C6456;  /* cool counterpoint — links                          */
  --b-patina-deep: #1D4A3F;

  --b-success:     #63722F;
  --b-warn:        #A9782A;
  --b-critical:    #8E3115;

  /* ─── Typography ────────────────────────────────────────────────────
     Display: a squared craft-serif. Body: quiet reading serif. Stamp:
     condensed wood-type gothic for labels / tags / ticket readout.       */
  --b-font-display: "Rockwell", "Roboto Slab", "Iowan Old Style", Georgia, serif;
  --b-font-body:    "Iowan Old Style", "Charter", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --b-font-stamp:   "Saira Semi Condensed", "Oswald", "Trade Gothic Condensed", "Arial Narrow", system-ui, sans-serif;
  --b-font-mono:    "Space Mono", "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --b-text-meta: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --b-text-cap:  clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --b-text-body: clamp(1rem, 0.96rem + 0.3vw, 1.1875rem);
  --b-text-lead: clamp(1.125rem, 1.04rem + 0.5vw, 1.375rem);
  --b-text-h3:   clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --b-text-h2:   clamp(1.875rem, 1.5rem + 1.9vw, 3.125rem);
  --b-text-h1:   clamp(2.4rem, 1.6rem + 4vw, 4.6rem);

  --b-leading-body:  1.62;
  --b-leading-tight: 1.1;
  --b-tracking-display: 0.004em;
  --b-tracking-stamp:   0.14em;

  /* ─── Spacing — 4px base ────────────────────────────────────────────── */
  --b-hair:    4px;
  --b-tight:   8px;
  --b-gap:     16px;
  --b-pad:     24px;
  --b-stile:   40px;
  --b-rail:    64px;
  --b-section: clamp(56px, 6vw + 32px, 80px);
  --b-bay:     clamp(80px, 8vw, 112px);

  /* ─── Motion — joinery physics, warm ease-out ─────────────────────── */
  --b-ease-seat:  cubic-bezier(0.2, 0.85, 0.2, 1);
  --b-ease-press: cubic-bezier(0.4, 0, 0.2, 1);
  --b-ease-gouge: cubic-bezier(0.62, 0, 0.36, 1);
  --b-ease-warm:  cubic-bezier(0.45, 0, 0.2, 1);
  --b-dur-tap:    150ms;
  --b-dur-warm:   220ms;
  --b-dur-settle: 460ms;
  --b-cyc-header:  24s;
  --b-cyc-sky:     22s;
  --b-cyc-cta:     5s;
  --b-cyc-pointer: 4.6s;
  --b-cyc-line:    9s;
  --b-cyc-mote:    18s;
  --b-cyc-pattern: 20s;

  --b-r-peg:   3px;
  --b-r-card:  4px;
  --b-r-frame: 2px;
  --b-r-pill:  9999px;

  --b-shadow-plate: 0 8px 22px rgba(43, 35, 24, 0.14);
  --b-shadow-lift:  0 14px 34px rgba(43, 35, 24, 0.22);
  --b-impress: inset 0 2px 0 rgba(255, 250, 235, 0.5),
               inset 0 -3px 4px rgba(43, 35, 24, 0.2);
  --b-focus-ring: 0 0 0 3px rgba(87, 102, 47, 0.55);
}

/* ═══ Base ═══ */
[data-design="b"].dq-design { background: var(--b-paper); color: var(--b-ink);
  font-family: var(--b-font-body); font-size: var(--b-text-body); line-height: var(--b-leading-body); }
[data-design="b"].dq-design * { box-sizing: border-box; }
[data-design="b"].dq-design h1, [data-design="b"].dq-design h2, [data-design="b"].dq-design h3 { font-family: var(--b-font-display); margin: 0; }
[data-design="b"].dq-design p { margin: 0; }
[data-design="b"].dq-design a { color: inherit; }

/* ═══ 1. Header ═══ */
[data-design="b"] .b-header { position: sticky; top: 0; z-index: 60; background: var(--b-fumed); color: var(--b-paper); overflow: clip; }
[data-design="b"] .b-header__bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: var(--b-gap); max-width: 1280px; margin-inline: auto; padding: var(--b-tight) clamp(16px, 4vw, 40px); }
[data-design="b"] .b-logo { display: inline-block; text-decoration: none; font-family: var(--b-font-display); font-weight: 700;
  letter-spacing: var(--b-tracking-display); font-size: clamp(0.85rem, 0.7rem + 0.7vw, 1.15rem); line-height: 1.15; color: var(--b-paper);
  background: var(--b-fumed-deep); padding: 6px 14px; border-radius: var(--b-r-peg); box-shadow: var(--b-impress); }
[data-design="b"] .b-header__light { position: absolute; inset: 0; z-index: 1; color: var(--b-moss-glow); pointer-events: none; }
[data-design="b"] .b-header__rail { position: absolute; top: 40%; left: 30%; width: 260px; height: 3px; border-radius: var(--b-r-pill);
  background: linear-gradient(90deg, transparent, var(--b-ochre-glow), transparent); opacity: .28;
  animation: b-rail-drift var(--b-cyc-header) var(--b-ease-warm) infinite alternate; }
@keyframes b-rail-drift { from { transform: translateX(-30px); opacity: .16; } to { transform: translateX(26px); opacity: .34; } }
[data-design="b"] .b-header__grain { position: absolute; right: clamp(70px, 16vw, 220px); top: 50%; width: 110px; height: 36px;
  transform: translateY(-50%); color: var(--b-moss); opacity: .3; transform-origin: 6px 30px;
  animation: b-grain-stir 15s var(--b-ease-warm) infinite alternate; }
@keyframes b-grain-stir { from { transform: translateY(-50%) rotate(-1deg); } to { transform: translateY(-50%) rotate(1.2deg); } }
[data-design="b"] .b-burger { display: inline-flex; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center;
  justify-content: center; background: transparent; border: 0; cursor: pointer; border-radius: var(--b-r-peg); }
[data-design="b"] .b-burger__bar { display: block; width: 24px; height: 2px; background: var(--b-paper);
  transition: transform var(--b-dur-warm) var(--b-ease-seat), opacity var(--b-dur-tap) linear; }
[data-design="b"] .b-burger[aria-expanded="true"] .b-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-design="b"] .b-burger[aria-expanded="true"] .b-burger__bar:nth-child(2) { opacity: 0; }
[data-design="b"] .b-burger[aria-expanded="true"] .b-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
[data-design="b"] .b-burger:focus-visible { box-shadow: var(--b-focus-ring); outline: none; }
[data-design="b"] .b-drawer { position: fixed; inset: 0; z-index: 70; background: color-mix(in oklab, var(--b-fumed-deep), transparent 5%); }
[data-design="b"] .b-drawer[hidden] { display: none; }
[data-design="b"] .b-drawer__panel { max-width: 1280px; margin-inline: auto; min-height: 100%; display: flex; flex-direction: column;
  gap: var(--b-gap); justify-content: center; padding: clamp(48px, 12vh, 120px) clamp(24px, 8vw, 80px);
  transform: translateY(-14px); opacity: 0; }
[data-design="b"] .b-drawer.is-open .b-drawer__panel { animation: b-drawer-in var(--b-dur-settle) var(--b-ease-seat) forwards; }
@keyframes b-drawer-in { to { transform: translateY(0); opacity: 1; } }
[data-design="b"] .b-navlink { font-family: var(--b-font-display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 2.6vw, 2.6rem);
  color: var(--b-paper); text-decoration: none; width: max-content; padding: 4px 0; }
[data-design="b"] .b-navlink::after { content: ""; display: block; height: 3px; background: var(--b-moss-glow);
  transform: scaleX(0); transform-origin: left; transition: transform var(--b-dur-warm) var(--b-ease-gouge); }
[data-design="b"] .b-navlink:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-navlink:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-header__rail, [data-design="b"] .b-header__grain { animation: none; }
  [data-design="b"] .b-drawer.is-open .b-drawer__panel { animation: none; transform: none; opacity: 1; }
}

/* ═══ 2. Stamp (button/CTA) ═══ */
[data-design="b"] .b-stamp { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--b-tight);
  font-family: var(--b-font-display); font-weight: 700; font-size: var(--b-text-lead); letter-spacing: var(--b-tracking-display);
  text-decoration: none; color: var(--b-surface-2); background: var(--design-b-oxblood); padding: 14px 26px; min-height: 48px;
  border-radius: var(--b-r-card); border: 0; cursor: pointer; box-shadow: var(--b-impress), var(--b-shadow-plate);
  transition: transform var(--b-dur-tap) var(--b-ease-press), background-color var(--b-dur-warm) var(--b-ease-warm),
    box-shadow var(--b-dur-tap) var(--b-ease-press); }
[data-design="b"] .b-stamp__halo { position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(211, 160, 68, 0); animation: b-lantern var(--b-cyc-cta) var(--b-ease-warm) infinite; }
@keyframes b-lantern { 0%, 100% { box-shadow: 0 0 12px 0 rgba(211,160,68,.22); } 50% { box-shadow: 0 0 22px 5px rgba(211,160,68,.4); } }
[data-design="b"] .b-stamp:focus-visible { outline: none; box-shadow: var(--b-focus-ring), var(--b-impress); }
[data-design="b"] .b-stamp:active { transform: translateY(2px) scale(.985); background: var(--design-b-oxblood-deep);
  box-shadow: inset 0 3px 5px rgba(43,35,24,.32), inset 0 1px 0 rgba(255,250,235,.24); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-stamp:hover { transform: translateY(-1px); background: var(--design-b-oxblood-glow); }
}
[data-design="b"] .b-stamp--drawer { background: var(--b-ochre); color: var(--b-fumed-deep); font-size: var(--b-text-h3); }
[data-design="b"] .b-stamp--drawer:active { background: var(--b-ochre-deep); }
[data-design="b"] .b-stamp--lines, [data-design="b"] .b-stamp--footer { margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-stamp__halo { animation: none; box-shadow: 0 0 12px 0 rgba(211,160,68,.28); }
}

/* ═══ 3. Hero ═══ */
[data-design="b"] .b-hero { position: relative; isolation: isolate; min-height: 92svh; display: flex; align-items: flex-end;
  overflow: clip; background: var(--b-fumed-deep); }
[data-design="b"] .b-hero__media { position: absolute; inset: 0; z-index: 0; }
[data-design="b"] .b-hero__grain { position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 30% 10%, #3A2E1E 0%, var(--b-fumed) 55%, var(--b-fumed-deep) 100%); }
[data-design="b"] .b-hero__warm { position: absolute; inset: 0; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(87,102,47,.28) 0%, rgba(169,120,42,.22) 54%, rgba(122,52,32,.34) 100%);
  animation: b-warmshift var(--b-cyc-sky) var(--b-ease-warm) infinite alternate; }
@keyframes b-warmshift { from { opacity: .5; filter: hue-rotate(-5deg); } to { opacity: .85; filter: hue-rotate(6deg); } }
[data-design="b"] .b-hero__lamp { position: absolute; top: 14%; right: 15%; width: clamp(140px, 22vw, 300px); aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(211,160,68,.7) 0%, rgba(211,160,68,.22) 44%, transparent 70%);
  animation: b-lampglow 11s var(--b-ease-warm) infinite alternate; }
@keyframes b-lampglow { from { opacity: .5; transform: scale(.97); } to { opacity: .9; transform: scale(1.04); } }
[data-design="b"] .b-hero__motes { position: absolute; inset: 0; opacity: .4;
  background-image: radial-gradient(2px 2px at 22% 32%, rgba(211,160,68,.85), transparent),
    radial-gradient(2px 2px at 68% 48%, rgba(244,237,220,.6), transparent),
    radial-gradient(2px 2px at 42% 78%, rgba(211,160,68,.6), transparent),
    radial-gradient(2px 2px at 83% 24%, rgba(244,237,220,.5), transparent);
  background-repeat: no-repeat; animation: b-mote var(--b-cyc-mote) linear infinite; }
@keyframes b-mote { from { transform: translate3d(0,0,0); } to { transform: translate3d(-16px,-22px,0); } }
/* the unique animated hero — a fence line resolving post-by-post (trade-required backdrop) */
[data-design="b"] .b-hero__line { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; color: var(--b-moss-glow); opacity: .55; }
[data-design="b"] .b-hero__rail { stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: b-line-draw var(--b-cyc-line) var(--b-ease-gouge) infinite; }
@keyframes b-line-draw {
  0%   { stroke-dashoffset: 900; opacity: .2; }
  55%  { stroke-dashoffset: 0;   opacity: .7; }
  100% { stroke-dashoffset: 0;   opacity: .7; }
}
[data-design="b"] .b-hero__post { opacity: .8; transform-origin: bottom; transform: scaleY(.4) translateY(10px);
  animation: b-post-set var(--b-cyc-line) var(--b-ease-seat) infinite; }
[data-design="b"] .b-hero__post:nth-child(2) { animation-delay: .1s; }
[data-design="b"] .b-hero__post:nth-child(3) { animation-delay: .35s; }
[data-design="b"] .b-hero__post:nth-child(4) { animation-delay: .6s; }
[data-design="b"] .b-hero__post:nth-child(5) { animation-delay: .85s; }
[data-design="b"] .b-hero__post:nth-child(6) { animation-delay: 1.1s; }
@keyframes b-post-set {
  0%   { transform: scaleY(.4) translateY(10px); }
  22%  { transform: scaleY(1) translateY(0); }
  70%  { transform: scaleY(1) translateY(0); }
  100% { transform: scaleY(1) translateY(0); }
}
[data-design="b"] .b-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(20,17,12,.66) 0%, rgba(20,17,12,.14) 44%, transparent 66%); }
[data-design="b"] .b-hero__plate { position: relative; z-index: 5; isolation: isolate; max-width: 600px;
  margin: 0 clamp(16px, 5vw, 64px) clamp(40px, 7vh, 80px); color: var(--b-paper); display: grid; gap: var(--b-gap);
  padding: var(--b-pad); border: 1px solid color-mix(in oklab, var(--b-moss-glow), transparent 55%); border-radius: var(--b-r-frame); }
[data-design="b"] .b-frame__peg { position: absolute; width: 10px; height: 10px; border: 2px solid var(--b-moss-glow); background: transparent; }
[data-design="b"] .b-frame__peg--tl { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
[data-design="b"] .b-frame__peg--br { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }
[data-design="b"] .b-hero__chip { opacity: 1; }
[data-design="b"] .b-hero__name { font-weight: 700; font-size: var(--b-text-h1); line-height: var(--b-leading-tight);
  letter-spacing: var(--b-tracking-display); text-wrap: balance; text-shadow: 0 2px 16px rgba(20,17,12,.45); opacity: 1; }
[data-design="b"] .b-hero__essence { font-family: var(--b-font-body); font-size: var(--b-text-lead); max-width: 46ch;
  text-wrap: pretty; opacity: 1; }
[data-design="b"] .b-hero__coords { font-family: var(--b-font-stamp); letter-spacing: var(--b-tracking-stamp); font-size: var(--b-text-cap);
  color: var(--b-ochre-glow); text-transform: uppercase; opacity: 1; }
[data-design="b"] .b-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--b-font-stamp);
  letter-spacing: var(--b-tracking-stamp); text-transform: uppercase; font-size: var(--b-text-meta); padding: 5px 12px;
  border-radius: var(--b-r-peg); opacity: 1; }
[data-design="b"] .b-tag--season { background: var(--b-ochre); color: var(--b-fumed-deep); }
[data-design="b"] .b-tag--open { background: var(--b-moss); color: var(--b-paper); }
[data-design="b"] .b-tag--cool { background: var(--b-patina); color: var(--b-paper); }
@media (max-width: 640px) {
  [data-design="b"] .b-hero__plate { margin-inline: 16px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-hero__warm, [data-design="b"] .b-hero__lamp, [data-design="b"] .b-hero__motes,
  [data-design="b"] .b-hero__rail, [data-design="b"] .b-hero__post { animation: none; }
  [data-design="b"] .b-hero__rail { stroke-dashoffset: 0; opacity: .5; }
  [data-design="b"] .b-hero__post { opacity: .7; transform: none; }
}

/* ═══ 6. Pointer — settling level, between hero and #funnel ═══ */
[data-design="b"] .b-pointer { display: grid; justify-items: center; gap: var(--b-tight); padding-block: var(--b-rail);
  background: var(--b-paper); cursor: pointer; opacity: 1; }
[data-design="b"] .b-pointer__rail { width: 54px; height: 66px; overflow: visible; }
[data-design="b"] .b-pointer__post { stroke: var(--b-rule); stroke-width: 2.4; stroke-linecap: round; }
[data-design="b"] .b-pointer__bar { stroke: var(--b-ochre-deep); stroke-width: 3; stroke-linecap: round; }
[data-design="b"] .b-pointer__bubble { fill: var(--b-ochre-glow); filter: drop-shadow(0 0 5px rgba(211,160,68,.7)); }
[data-design="b"] .b-pointer__level { transform-origin: 30px 40px; animation: b-level-settle var(--b-cyc-pointer) var(--b-ease-warm) infinite; }
@keyframes b-level-settle {
  0%   { transform: rotate(-4deg) translateY(-3px); }
  55%  { transform: rotate(1deg) translateY(2px); }
  100% { transform: rotate(0deg) translateY(4px); }
}
[data-design="b"] .b-pointer__label { font-family: var(--b-font-stamp); letter-spacing: var(--b-tracking-stamp);
  text-transform: uppercase; font-size: var(--b-text-meta); color: var(--b-bark); }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-pointer__level { animation: none; transform: translateY(3px); }
}
@media (max-width: 560px) {
  [data-design="b"] .b-pointer { padding-block: var(--b-stile); }
}

/* ═══ 5. Funnel — THE ESTIMATOR (tape-measure ticket tactile artifact) ═══ */
[data-design="b"] .b-funnel { background: var(--b-paper-deep); padding-block: var(--b-section); }
[data-design="b"] .b-funnel__inner { max-width: 900px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 48px);
  display: grid; gap: var(--b-stile); text-align: center; }
[data-design="b"] .b-funnel__title { font-size: var(--b-text-h2); color: var(--b-ink); letter-spacing: var(--b-tracking-display); }
[data-design="b"] .b-funnel__sub { font-size: var(--b-text-lead); color: var(--b-bark); max-width: 60ch; margin-inline: auto; }
[data-design="b"] .b-funnel__stage { display: grid; gap: var(--b-stile); text-align: left; background: var(--b-surface);
  border: 1px solid var(--b-border); border-radius: var(--b-r-card); padding: clamp(20px, 4vw, 40px); box-shadow: var(--b-shadow-plate);
  margin-inline: auto; max-width: 100%; }

/* tape-measure ticket readout — the tactile artifact, always visible */
[data-design="b"] .b-funnel__ticket { display: grid; gap: var(--b-tight); padding: var(--b-pad); border-radius: var(--b-r-card);
  background: var(--b-fumed); color: var(--b-paper); box-shadow: var(--b-impress); }
[data-design="b"] .b-funnel__ticket-label { font-family: var(--b-font-stamp); letter-spacing: var(--b-tracking-stamp);
  text-transform: uppercase; font-size: var(--b-text-meta); color: var(--b-ochre-glow); }
[data-design="b"] .b-funnel__ticket-range { font-family: var(--b-font-display); font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); color: var(--b-paper); }
[data-design="b"] .b-funnel__tape { position: relative; height: 8px; border-radius: var(--b-r-pill); background: var(--b-fumed-deep);
  overflow: clip; }
[data-design="b"] .b-funnel__tape-fill { position: absolute; inset: 0; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--b-ochre-deep), var(--b-ochre-glow));
  transform: scaleX(0); transform-origin: left; transition: transform var(--b-dur-settle) var(--b-ease-seat); }
[data-design="b"] .b-funnel__steps { display: flex; gap: var(--b-tight); list-style: none; margin: 0; padding: 0; }
[data-design="b"] .b-funnel__steps li { width: 8px; height: 8px; border-radius: 50%; background: var(--b-bark);
  transition: background-color var(--b-dur-warm) var(--b-ease-warm), transform var(--b-dur-tap) var(--b-ease-seat); }
[data-design="b"] .b-funnel__steps li.is-done,
[data-design="b"] .b-funnel__steps li.is-active { background: var(--b-ochre-glow); transform: scale(1.2); }

/* EST-8 (HARD): exactly one step visible at a time; controls never overlap chips */
[data-design="b"] .b-funnel__step { display: grid; gap: var(--b-gap); }
[data-design="b"] .b-funnel__step[hidden] { display: none; }
[data-design="b"] .b-funnel__q { font-family: var(--b-font-display); font-weight: 700; font-size: var(--b-text-h3); color: var(--b-ink); }
[data-design="b"] .b-funnel__chips { display: flex; flex-wrap: wrap; gap: var(--b-gap); }
[data-design="b"] .b-chip { font-family: var(--b-font-body); font-size: var(--b-text-body); color: var(--b-ink);
  background: var(--b-surface-2); border: 1px solid var(--b-border); border-radius: var(--b-r-card); padding: 14px 20px;
  min-height: 44px; cursor: pointer; opacity: 1;
  transition: transform var(--b-dur-tap) var(--b-ease-press), background-color var(--b-dur-warm) var(--b-ease-warm),
    border-color var(--b-dur-warm) var(--b-ease-warm); }
[data-design="b"] .b-chip--quiet { color: var(--b-bark); border-style: dashed; }
[data-design="b"] .b-chip:active { transform: translateY(1px) scale(.98); background: var(--b-panel); }
[data-design="b"] .b-chip.is-selected { background: var(--design-b-oxblood); color: var(--b-surface-2); border-color: var(--design-b-oxblood); }
[data-design="b"] .b-chip:focus-visible { outline: none; box-shadow: var(--b-focus-ring); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-chip:hover { border-color: var(--b-moss); transform: translateY(-1px); }
}
/* nav row sits BELOW the chip group — never overlapping (EST-8 funnel_controls_overlap) */
[data-design="b"] .b-funnel__nav { display: flex; justify-content: flex-start; }
[data-design="b"] .b-funnel__back { font-family: var(--b-font-stamp); letter-spacing: var(--b-tracking-stamp); text-transform: uppercase;
  font-size: var(--b-text-cap); color: var(--b-bark); background: transparent; border: 0; cursor: pointer; padding: 8px 0;
  min-height: 44px; }
[data-design="b"] .b-funnel__back[hidden] { display: none; }

[data-design="b"] .b-funnel__recap { font-size: var(--b-text-body); color: var(--b-ink-2); background: var(--b-paper-deep);
  border-radius: var(--b-r-card); padding: var(--b-pad); }
[data-design="b"] .b-funnel__form { display: grid; gap: var(--b-gap); }
[data-design="b"] .b-field-group { display: grid; gap: var(--b-hair); }
[data-design="b"] .b-field-group__label { font-family: var(--b-font-stamp); letter-spacing: var(--b-tracking-stamp);
  text-transform: uppercase; font-size: var(--b-text-meta); color: var(--b-bark); }
[data-design="b"] .b-field { font-family: var(--b-font-body); font-size: var(--b-text-body); color: var(--b-ink);
  background: var(--b-surface-2); border: 1px solid var(--b-border); border-radius: var(--b-r-peg); padding: 12px 14px;
  min-height: 44px; }
[data-design="b"] .b-field:focus { outline: none; border-color: var(--b-moss); box-shadow: var(--b-focus-ring); }
[data-design="b"] .b-funnel__confirm { font-family: var(--b-font-display); font-weight: 700; color: var(--b-moss-deep); }
[data-design="b"] .b-funnel__confirm[hidden] { display: none; }
[data-design="b"] .b-funnel__note { font-size: var(--b-text-cap); color: var(--b-bark); max-width: 60ch; margin-inline: auto; }

/* ═══ Completed lines (honest no-photo treatment, woodblock ambient band, Element 4) ═══ */
[data-design="b"] .b-lines { position: relative; isolation: isolate; overflow: clip; background: var(--b-paper); padding-block: var(--b-section); }
[data-design="b"] .b-lines__field { position: absolute; inset: 0; z-index: 0; opacity: .14; pointer-events: none; }
[data-design="b"] .b-block { width: 132%; height: 100%; }
[data-design="b"] .b-block__g { transform-box: fill-box; animation: b-blockdrift var(--b-cyc-pattern) var(--b-ease-warm) infinite alternate; }
@keyframes b-blockdrift { from { transform: translate3d(0,0,0); opacity: .55; } to { transform: translate3d(-22px,7px,0); opacity: 1; } }
[data-design="b"] .b-lines__inner { position: relative; z-index: 1; max-width: 1100px; margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 48px); display: grid; gap: var(--b-stile); text-align: center; }
[data-design="b"] .b-lines__title { font-size: var(--b-text-h2); color: var(--b-ink); }
[data-design="b"] .b-lines__sub { font-size: var(--b-text-lead); color: var(--b-bark); max-width: 62ch; margin-inline: auto; }
[data-design="b"] .b-lines__board { display: grid; gap: var(--b-gap); text-align: left; max-width: 760px; margin-inline: auto; width: 100%; }
[data-design="b"] .b-lines__entry { display: grid; grid-template-columns: auto 1fr; gap: var(--b-gap); align-items: start;
  padding: var(--b-pad); background: var(--b-surface); border: 1px solid var(--b-border); border-radius: var(--b-r-card); }
[data-design="b"] .b-lines__num { font-family: var(--b-font-display); font-weight: 700; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: .8; color: var(--design-b-oxblood); }
[data-design="b"] .b-lines__entry-title { font-family: var(--b-font-display); font-weight: 700; font-size: var(--b-text-h3);
  color: var(--b-ink); margin-bottom: var(--b-tight); }
[data-design="b"] .b-lines__entry-copy { font-size: var(--b-text-body); color: var(--b-ink-2); }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-block__g { animation: none; }
}
@media (max-width: 560px) {
  [data-design="b"] .b-lines__field { opacity: .1; }
  [data-design="b"] .b-lines__entry { grid-template-columns: 1fr; }
}

/* ═══ Services ═══ */
[data-design="b"] .b-services { background: var(--b-paper-deep); padding-block: var(--b-section); }
[data-design="b"] .b-services__inner { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 48px);
  display: grid; gap: var(--b-stile); }
[data-design="b"] .b-services__title { font-size: var(--b-text-h2); color: var(--b-ink); text-align: center; }
[data-design="b"] .b-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
[data-design="b"] .b-services__card { background: var(--b-surface); border: 1px solid var(--b-border); border-radius: var(--b-r-card);
  padding: var(--b-pad); box-shadow: var(--b-shadow-plate); transition: transform var(--b-dur-warm) var(--b-ease-seat); }
[data-design="b"] .b-services__card-title { font-family: var(--b-font-display); font-weight: 700; font-size: var(--b-text-h3);
  color: var(--b-ink); margin-bottom: var(--b-tight); }
[data-design="b"] .b-services__card-copy { font-size: var(--b-text-body); color: var(--b-bark); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-services__card:hover { transform: translateY(-4px); }
}

/* ═══ Process ═══ */
[data-design="b"] .b-process { background: var(--b-paper); padding-block: var(--b-section); }
[data-design="b"] .b-process__inner { max-width: 1000px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 48px);
  display: grid; gap: var(--b-stile); }
[data-design="b"] .b-process__title { font-size: var(--b-text-h2); color: var(--b-ink); text-align: center; }
[data-design="b"] .b-process__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; }
[data-design="b"] .b-process__phase { display: grid; gap: var(--b-tight); text-align: center; }
[data-design="b"] .b-process__idx { justify-self: center; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--b-moss); color: var(--b-paper); font-family: var(--b-font-display); font-weight: 700; }
[data-design="b"] .b-process__phase p { font-size: var(--b-text-cap); color: var(--b-ink-2); }
@media (max-width: 768px) {
  [data-design="b"] .b-process__track { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  [data-design="b"] .b-process__track { grid-template-columns: 1fr; }
}

/* ═══ About / trust ═══ */
[data-design="b"] .b-about { background: var(--b-fumed); padding-block: var(--b-section); }
[data-design="b"] .b-about__inner { max-width: 900px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 48px); display: grid; }
[data-design="b"] .b-about__plate { position: relative; isolation: isolate; color: var(--b-paper); display: grid; gap: var(--b-gap);
  padding: clamp(24px, 5vw, 48px); border: 1px solid color-mix(in oklab, var(--b-moss-glow), transparent 55%); border-radius: var(--b-r-frame); }
[data-design="b"] .b-about__title { font-size: var(--b-text-h2); }
[data-design="b"] .b-about__copy { font-size: var(--b-text-lead); color: var(--b-paper); max-width: 64ch; }
[data-design="b"] .b-about__tags { display: flex; flex-wrap: wrap; gap: var(--b-tight); list-style: none; margin: 0; padding: 0; }
[data-design="b"] .b-contact-row { display: inline-flex; align-items: center; gap: var(--b-tight); width: max-content;
  font-family: var(--b-font-stamp); letter-spacing: var(--b-tracking-stamp); text-transform: uppercase; font-size: var(--b-text-cap);
  color: var(--b-ochre-glow); text-decoration: none; padding: 10px 16px; border: 1px solid var(--b-ochre-deep); border-radius: var(--b-r-peg);
  min-height: 44px; transition: background-color var(--b-dur-warm) var(--b-ease-warm); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-contact-row:hover { background: color-mix(in oklab, var(--b-ochre), transparent 85%); }
}

/* ═══ Footer ═══ */
[data-design="b"] .b-footer { background: var(--b-fumed-deep); color: var(--b-paper); padding-block: var(--b-section); }
[data-design="b"] .b-footer__inner { max-width: 900px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 48px);
  display: grid; gap: var(--b-gap); justify-items: center; text-align: center; }
[data-design="b"] .b-footer__name { font-family: var(--b-font-display); font-weight: 700; font-size: var(--b-text-h3); }
[data-design="b"] .b-footer__area { font-size: var(--b-text-cap); color: var(--b-faint); }
[data-design="b"] .b-footer__copy { font-size: var(--b-text-meta); color: var(--b-faint); }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE / OVERFLOW FLOOR — appended at bottom, scoped to .dq-design only
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"].dq-design,
[data-design="b"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="b"].dq-design * { min-width: 0; }
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) { max-width: 100%; height: auto; }

/* stranded-wrapper autofix (drain 2026-07-03): every fixed max-width column centers — gate content_uncentered_left_stranded */
[data-design="b"] .b-hero__plate { margin-inline: auto; }
[data-design="b"] .b-hero__essence { margin-inline: auto; }
[data-design="b"] .b-about__copy { margin-inline: 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; }