/* ═══════════════════════════════════════════════════════════════════
   MORTISE & MEADOW — DESIGN-B (SLOT B)
   MW Builders and Remodelers LLC · Tucson · Mason trade
   Site B: DUSK / NIGHT register — fumed-oak deep + dusk sky palette
   Visually DISTINCT from the daylit warm-paper Site A default.
   ALL selectors scoped to [data-design="b"].dq-design or [data-design="b"].dq-design
   ZERO [data-design="b"].dq-design selectors remain.
   ════════════════════════════════════════════════════════════════════ */

/* ─── TOKEN SYSTEM ──────────────────────────────────────────────── */
[data-design="b"] {
  /* Expose canonical design primary per forge contract */
  --design-b-primary: #8E3A22;

  /* COLOR — dusk/night register (Site B's distinction from daylit Site A) */
  --b-paper:        #1A1410;   /* page ground — deep fumed night                */
  --b-paper-deep:   #141009;   /* alternating section band                      */
  --b-panel:        #22180F;   /* card ground                                   */
  --b-surface:      #2A1F13;   /* elevated surface — drawer interior            */
  --b-surface-2:    #321F0F;   /* lightbox interior                             */

  --b-ink:          #E9DEC6;   /* primary text — warm paper on deep oak         */
  --b-ink-2:        #C8B488;   /* secondary text                                */
  --b-bark:         #9C875F;   /* captions, meta                                */
  --b-faint:        #6A5535;   /* hairline labels                               */
  --b-border:       #3A2A18;   /* card/plate border                             */
  --b-border-soft:  #2E2010;   /* row separators                                */
  --b-rule:         #5A4028;   /* hairline rules                                */
  --b-fumed:        #0E0B07;   /* fumed-oak band (header, footer)               */
  --b-fumed-deep:   #080604;   /* deepest drawer ground                         */

  /* Accent — earthy ink on night ground */
  --b-moss:         #5C6A38;   /* PRIMARY structural — rules, motifs, frames    */
  --b-moss-deep:    #44512A;   /* pressed moss                                  */
  --b-moss-glow:    #7A8A4E;   /* lit moss highlight                            */
  --b-ochre:        #B5832A;   /* WARM accent — brass / lamp                    */
  --b-ochre-deep:   #936818;   /* pressed ochre                                 */
  --b-ochre-glow:   #DCA948;   /* lamplight warm                                */
  --b-oxblood:      #8E3A22;   /* HOT accent — oiled-leather oxblood (CTA)      */
  --b-oxblood-deep: #6C2914;   /* pressed leather (active)                      */
  --b-oxblood-glow: #B05433;   /* leather warmed                                */
  --b-patina:       #2F6A5B;   /* COOL counterpoint — links                     */
  --b-stone-light:  #A89070;   /* masonry stone tone — lit face                 */
  --b-stone-mid:    #7A6045;   /* masonry stone tone — mid tone                 */
  --b-stone-shadow: #4A3828;   /* masonry stone tone — shadow                   */
  --b-concrete:     #5C5040;   /* concrete grey on night                        */

  /* Semantic */
  --b-success:      #6A7A3C;
  --b-critical:     #9A3318;

  /* TYPOGRAPHY */
  --b-font-display: "Goudy Old Style", "Goudy Bookletter 1911", "Sorts Mill Goudy",
                    "Hoefler Text", "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",
                    "Futura", "Arial Narrow", system-ui, sans-serif;

  /* Fluid type scale */
  --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.4rem + 4.8vw, 5rem);

  --b-leading-body:     1.62;
  --b-leading-tight:    1.08;
  --b-tracking-display: 0.004em;
  --b-tracking-stamp:   0.16em;

  /* SPACING (4px base, joiner's frame names) */
  --b-hair:    4px;
  --b-tight:   8px;
  --b-gap:     16px;
  --b-pad:     24px;
  --b-stile:   40px;
  --b-rail:    64px;
  --b-section: clamp(72px, 6vw + 40px, 96px);
  --b-bay:     clamp(96px, 9vw, 128px);

  /* MOTION — warm ease-OUT, never ease-in */
  --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);
  /* Interaction durations (<300ms) */
  --b-dur-tap:    150ms;
  --b-dur-warm:   240ms;
  --b-dur-settle: 520ms;
  /* Ambient loop cycles (slow = premium) */
  --b-cyc-header:  30s;
  --b-cyc-sky:     26s;
  --b-cyc-cta:     5s;
  --b-cyc-pointer: 5.5s;
  --b-cyc-pattern: 24s;

  /* RADIUS — rectilinear Craftsman squares */
  --b-r-peg:   3px;
  --b-r-card:  4px;
  --b-r-frame: 2px;

  /* SHADOW / ELEVATION */
  --b-shadow-plate: 0 8px 22px rgba(8, 6, 4, 0.55);
  --b-shadow-lift:  0 14px 34px rgba(8, 6, 4, 0.75);
  --b-impress: inset 0 2px 0 rgba(232, 210, 160, 0.18),
               inset 0 -3px 4px rgba(8, 6, 4, 0.38);
  --b-focus-ring: 0 0 0 3px rgba(92, 106, 56, 0.55);
}

/* ─── RESET & BASE ──────────────────────────────────────────────── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="b"].dq-design * {
  min-width: 0;
  box-sizing: border-box;
}
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

.dq-design[data-design="b"] {
  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);
}

/* ─── E1 HEADER ────────────────────────────────────────────────── */
[data-design="b"] .b-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--b-fumed);
  color: var(--b-ink);
  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: 0 auto;
  padding: var(--b-tight) clamp(16px, 4vw, 40px);
}
/* Atmospheric layer */
[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__pool {
  position: absolute;
  top: -40%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.18;
  mix-blend-mode: screen;
}
[data-design="b"] .b-header__pool--a {
  left: 14%;
  background: radial-gradient(circle, var(--b-ochre-glow) 0%, transparent 68%);
  animation: b-pool-a var(--b-cyc-header) var(--b-ease-warm) infinite alternate;
}
[data-design="b"] .b-header__pool--b {
  left: 58%;
  background: radial-gradient(circle, var(--b-moss-glow) 0%, transparent 70%);
  animation: b-pool-b calc(var(--b-cyc-header) * 1.18) var(--b-ease-warm) infinite alternate;
}
@keyframes b-pool-a {
  from { transform: translateX(-26px); opacity: 0.10; }
  to   { transform: translateX(22px);  opacity: 0.24; }
}
@keyframes b-pool-b {
  from { transform: translateX(20px);  opacity: 0.08; }
  to   { transform: translateX(-24px); opacity: 0.20; }
}
/* Pine bough stirring */
[data-design="b"] .b-header__bough {
  position: absolute;
  right: clamp(70px, 16vw, 220px);
  top: 50%;
  width: 120px;
  height: 60px;
  transform: translateY(-50%);
  color: var(--b-moss);
  opacity: 0.28;
  transform-origin: 6px 50px;
  animation: b-bough-stir 17s var(--b-ease-warm) infinite alternate;
}
@keyframes b-bough-stir {
  from { transform: translateY(-50%) rotate(-1.4deg); }
  to   { transform: translateY(-50%) rotate(1.6deg); }
}
/* Stone-rule sweep — hairline that draws across on load (Site B signature) */
[data-design="b"] .b-header__stone-rule {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--b-ochre), var(--b-moss-glow), transparent);
  transform: scaleX(0);
  transform-origin: left;
  animation: b-stone-rule-draw 1.8s var(--b-ease-gouge) 0.3s forwards;
}
@keyframes b-stone-rule-draw {
  from { transform: scaleX(0); opacity: 0.6; }
  to   { transform: scaleX(1); opacity: 1; }
}
/* Logo */
[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(1.1rem, 0.9rem + 1vw, 1.6rem);
  color: var(--b-ink);
  background: var(--b-fumed-deep);
  padding: 6px 16px;
  border-radius: var(--b-r-peg);
  box-shadow: var(--b-impress);
}
/* Hamburger */
[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-ink);
  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 {
  outline: none;
  box-shadow: var(--b-focus-ring);
}
/* Drawer */
[data-design="b"] .b-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: color-mix(in oklab, var(--b-fumed-deep), transparent 4%);
}
[data-design="b"] .b-drawer[hidden] {
  display: none;
}
[data-design="b"] .b-drawer__panel {
  max-width: 1280px;
  margin: 0 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.6rem, 1.1rem + 3vw, 3rem);
  color: var(--b-ink);
  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--phone {
  font-family: var(--b-font-stamp);
  font-size: clamp(1.2rem, 0.9rem + 2vw, 2rem);
  letter-spacing: var(--b-tracking-stamp);
  color: var(--b-ochre-glow);
  margin-top: var(--b-stile);
}
[data-design="b"] .b-navlink:focus-visible::after {
  transform: scaleX(1);
}
[data-design="b"] .b-stamp--drawer {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 0.9rem + 2vw, 2rem);
  background: var(--b-ochre);
  color: var(--b-fumed-deep);
  padding: 14px 28px;
  border-radius: var(--b-r-card);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  width: max-content;
  margin-top: var(--b-tight);
  box-shadow: var(--b-impress), var(--b-shadow-plate);
  transition:
    background-color var(--b-dur-warm) var(--b-ease-warm),
    transform        var(--b-dur-tap)  var(--b-ease-press);
}
[data-design="b"] .b-stamp--drawer:active {
  background: var(--b-ochre-deep);
  transform: translateY(2px) scale(0.985);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-navlink:hover::after { transform: scaleX(1); }
  [data-design="b"] .b-logo:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-header__pool--a,
  [data-design="b"] .b-header__pool--b,
  [data-design="b"] .b-header__bough { animation: none; }
  [data-design="b"] .b-header__stone-rule { animation: none; transform: scaleX(1); opacity: 1; }
  [data-design="b"] .b-drawer.is-open .b-drawer__panel { animation: none; transform: none; opacity: 1; }
}
@media (max-width: 560px) {
  [data-design="b"] .b-header__bough { right: 10px; opacity: 0.18; width: 92px; }
  [data-design="b"] .b-header__pool { width: 150px; height: 150px; }
}

/* ─── HERO ──────────────────────────────────────────────────────── */
[data-design="b"] .b-hero {
  position: relative;
  isolation: isolate;              /* HARD: isolation:isolate on the hero section */
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  background: var(--b-paper);
}
/* ALL backdrop layers: pointer-events:none, z-index ≤ 1 */
[data-design="b"] .b-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
[data-design="b"] .b-hero__wallrise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Dusk sky substrate: alive on first paint — the design-owned golden-hour/dusk shift */
[data-design="b"] .b-hero__dusk {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #0A1520 0%,
    #1A2030 25%,
    #2A1810 55%,
    #0E0B07 100%
  );
  animation: b-dusk-shift var(--b-cyc-sky) var(--b-ease-warm) infinite alternate;
}
@keyframes b-dusk-shift {
  from { opacity: 0.88; filter: hue-rotate(-8deg); }
  to   { opacity: 1;    filter: hue-rotate(6deg); }
}
/* Ochre lamplight glow */
[data-design="b"] .b-hero__lamp {
  position: absolute;
  top: 10%;
  right: 12%;
  width: clamp(120px, 20vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,169,72,0.72) 0%, rgba(181,131,42,0.22) 44%, transparent 70%);
  animation: b-lamp-glow 12s var(--b-ease-warm) infinite alternate;
}
@keyframes b-lamp-glow {
  from { opacity: 0.55; transform: scale(0.97); }
  to   { opacity: 0.95; transform: scale(1.06); }
}
/* Drifting motes */
[data-design="b"] .b-hero__motes {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image:
    radial-gradient(2px 2px at 22% 32%, rgba(220,169,72,0.85), transparent),
    radial-gradient(2px 2px at 68% 48%, rgba(232,220,180,0.6), transparent),
    radial-gradient(2px 2px at 42% 78%, rgba(220,169,72,0.6), transparent),
    radial-gradient(2px 2px at 83% 24%, rgba(232,220,180,0.5), transparent);
  background-repeat: no-repeat;
  animation: b-mote 22s linear infinite;
}
@keyframes b-mote {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-18px,-28px,0); }
}
/* Readability scrim */
[data-design="b"] .b-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(10,8,4,0.82) 0%,
    rgba(10,8,4,0.18) 50%,
    transparent 70%
  );
  z-index: 1;
}
/* Hero text plate — z-index:3 ensures topmost at headline center */
[data-design="b"] .b-hero__plate {
  position: relative;
  z-index: 3;
  max-width: 620px;
  margin: 0 clamp(16px, 5vw, 72px) clamp(40px, 7vh, 88px);
  color: var(--b-ink);
  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);
}
/* Corner pegs — framed border ornament */
[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; }
/* Trust chip */
[data-design="b"] .b-hero__trust-row {
  margin: 0;
}
/* Headline — opacity:1 at first paint; never reveal-gated */
[data-design="b"] .b-hero__headline {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h1);
  line-height: var(--b-leading-tight);
  letter-spacing: var(--b-tracking-display);
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(8,6,4,0.65);
  color: var(--b-ink);
  opacity: 1;
}
/* Subtitle */
[data-design="b"] .b-hero__subtitle {
  font-family: var(--b-font-body);
  font-size: var(--b-text-lead);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
  color: var(--b-ink-2);
  opacity: 1;
}
/* Proof point */
[data-design="b"] .b-hero__proof {
  font-family: var(--b-font-stamp);
  letter-spacing: var(--b-tracking-stamp);
  font-size: var(--b-text-cap);
  color: var(--b-ochre-glow);
  margin: 0;
  text-transform: uppercase;
  opacity: 1;
}
@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__dusk,
  [data-design="b"] .b-hero__lamp,
  [data-design="b"] .b-hero__motes { animation: none; }
}

/* ─── E2 CTA STAMP ──────────────────────────────────────────────── */
[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(--b-oxblood);
  padding: 14px 26px;
  min-height: 48px;
  border-radius: var(--b-r-card);
  box-shadow: var(--b-impress), var(--b-shadow-plate);
  border: 0;
  cursor: pointer;
  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);
  width: max-content;
  opacity: 1;
}
[data-design="b"] .b-stamp__label {
  color: var(--b-surface-2);
  opacity: 1;
}
[data-design="b"] .b-stamp__halo {
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 12px 0 rgba(220, 169, 72, 0.22);
  animation: b-lantern var(--b-cyc-cta) var(--b-ease-warm) infinite;
}
@keyframes b-lantern {
  0%,100% { box-shadow: 0 0 12px 0   rgba(220, 169, 72, 0.22); }
  50%      { box-shadow: 0 0 26px 6px rgba(220, 169, 72, 0.46); }
}
[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(0.985);
  background: var(--b-oxblood-deep);
  box-shadow:
    inset 0 3px 5px rgba(8, 6, 4, 0.45),
    inset 0 1px 0 rgba(232, 210, 160, 0.15);
}
[data-design="b"] .b-stamp--phone {
  background: var(--b-moss);
  color: var(--b-ink);
  font-family: var(--b-font-stamp);
  letter-spacing: var(--b-tracking-stamp);
}
[data-design="b"] .b-stamp--phone .b-stamp__label {
  color: var(--b-ink);
}
[data-design="b"] .b-stamp--phone:active {
  background: var(--b-moss-deep);
}
[data-design="b"] .b-stamp--submit {
  width: 100%;
  justify-content: center;
  font-size: var(--b-text-lead);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-stamp:hover { transform: translateY(-1px); background: var(--b-oxblood-glow); }
  [data-design="b"] .b-stamp--phone:hover { background: var(--b-moss-glow); }
  [data-design="b"] .b-stamp--submit:hover { transform: translateY(-1px); background: var(--b-oxblood-glow); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-stamp__halo { animation: none; box-shadow: 0 0 12px 0 rgba(220,169,72,0.28); }
  [data-design="b"] .b-stamp { transition: background-color var(--b-dur-warm) linear; }
}

/* ─── TAGS ──────────────────────────────────────────────────────── */
[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--trust  { background: var(--b-moss);   color: var(--b-ink); }
[data-design="b"] .b-tag--type   { background: var(--b-ochre);  color: var(--b-fumed-deep); }
[data-design="b"] .b-tag--mat    { background: var(--b-surface); color: var(--b-ochre-glow); border: 1px solid var(--b-rule); }

/* ─── E6 POINTER ────────────────────────────────────────────────── */
[data-design="b"] .b-pointer {
  display: grid;
  justify-items: center;
  gap: var(--b-tight);
  padding-block: var(--b-rail);
  background: var(--b-paper-deep);
  cursor: pointer;
  /* HARD: must be visible — opacity:1, height > 8px at all viewports */
  opacity: 1;
}
[data-design="b"] .b-pointer__svg {
  width: 60px;
  height: 96px;
  overflow: visible;
}
/* Plumb line */
[data-design="b"] .b-pointer__plumb {
  stroke: var(--b-rule);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 4 4;
  animation: b-plumb-draw 1.4s var(--b-ease-gouge) 0.4s both;
  transform-box: fill-box;
}
@keyframes b-plumb-draw {
  from { stroke-dashoffset: 60; opacity: 0.3; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}
/* Bob descends */
[data-design="b"] .b-pointer__bob {
  animation: b-bob-lower var(--b-cyc-pointer) var(--b-ease-warm) infinite;
}
@keyframes b-bob-lower {
  0%   { transform: translateY(-6px) rotate(-1.5deg); }
  55%  { transform: translateY(4px)  rotate(1deg); }
  100% { transform: translateY(8px)  rotate(0deg); }
}
[data-design="b"] .b-pointer__bob-tri {
  fill: var(--b-ochre-deep);
}
[data-design="b"] .b-pointer__bob-ring {
  fill: none;
  stroke: var(--b-ochre);
  stroke-width: 2;
}
/* Stone course at bottom */
[data-design="b"] .b-pointer__stone {
  fill: var(--b-stone-mid);
  stroke: var(--b-stone-shadow);
  stroke-width: 0.8;
  animation: b-stone-lay 2s var(--b-ease-seat) 0.6s both;
}
[data-design="b"] .b-pointer__stone:nth-child(2) { animation-delay: 0.85s; }
[data-design="b"] .b-pointer__stone:nth-child(3) { animation-delay: 1.1s; }
[data-design="b"] .b-pointer__stone:nth-child(4) { animation-delay: 1.3s; }
@keyframes b-stone-lay {
  from { transform: translateX(-8px); opacity: 0.2; }
  to   { transform: translateX(0);    opacity: 1; }
}
[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);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-pointer__bob { animation: none; transform: translateY(6px); }
  [data-design="b"] .b-pointer__plumb { animation: none; stroke-dashoffset: 0; opacity: 1; }
  [data-design="b"] .b-pointer__stone { animation: none; opacity: 1; }
}
@media (max-width: 560px) {
  [data-design="b"] .b-pointer { padding-block: var(--b-stile); }
}

/* ─── E5 FUNNEL ─────────────────────────────────────────────────── */
[data-design="b"] .b-funnel {
  background: var(--b-paper-deep);
  padding-block: var(--b-section);
}
[data-design="b"] .b-funnel__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-stile);
}
[data-design="b"] .b-funnel__head {
  display: grid;
  gap: var(--b-tight);
}
[data-design="b"] .b-funnel__title {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h2);
  letter-spacing: var(--b-tracking-display);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-funnel__sub {
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 56ch;
}
/* Step progress dots */
[data-design="b"] .b-funnel__progress {
  display: flex;
  gap: var(--b-tight);
  align-items: center;
  margin-top: var(--b-tight);
}
[data-design="b"] .b-funnel__step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--b-surface);
  border: 1.5px solid var(--b-rule);
  transition: background-color var(--b-dur-warm) var(--b-ease-warm),
              border-color     var(--b-dur-warm) var(--b-ease-warm);
}
[data-design="b"] .b-funnel__step-dot--active {
  background: var(--b-oxblood);
  border-color: var(--b-oxblood-glow);
}
/* Question */
[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);
  margin: 0 0 var(--b-gap);
}
/* Option chips */
[data-design="b"] .b-funnel__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-tight);
}
[data-design="b"] .b-funnel__option {
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  background: var(--b-panel);
  border: 1.5px solid var(--b-rule);
  border-radius: var(--b-r-card);
  padding: 12px 20px;
  min-height: 48px;
  cursor: pointer;
  transition:
    border-color     var(--b-dur-warm) var(--b-ease-warm),
    background-color var(--b-dur-warm) var(--b-ease-warm),
    transform        var(--b-dur-tap)  var(--b-ease-seat);
  text-align: left;
  opacity: 1;
}
[data-design="b"] .b-funnel__option.is-selected {
  border-color: var(--b-oxblood);
  background: color-mix(in oklab, var(--b-oxblood), var(--b-panel) 88%);
  color: var(--b-ink);
}
[data-design="b"] .b-funnel__option:active {
  transform: translateY(2px) scale(0.985);
}
[data-design="b"] .b-funnel__option:focus-visible {
  outline: none;
  box-shadow: var(--b-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-funnel__option:hover {
    border-color: var(--b-moss-glow);
    background: color-mix(in oklab, var(--b-moss), var(--b-panel) 90%);
    color: var(--b-ink);
  }
}
/* Adaptive branches */
[data-design="b"] .b-funnel__branch[hidden] {
  display: none;
}
[data-design="b"] .b-funnel__note {
  font-family: var(--b-font-body);
  font-size: var(--b-text-cap);
  color: var(--b-bark);
  margin: var(--b-gap) 0 0;
  padding: var(--b-tight) var(--b-gap);
  border-left: 3px solid var(--b-ochre);
}
/* Pane transitions */
[data-design="b"] .b-funnel__pane {
  display: grid;
  gap: var(--b-tight);
}
[data-design="b"] .b-funnel__pane[hidden] {
  display: none;
}
/* Form */
[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-label {
  font-family: var(--b-font-stamp);
  font-size: var(--b-text-cap);
  letter-spacing: var(--b-tracking-stamp);
  text-transform: uppercase;
  color: var(--b-bark);
}
[data-design="b"] .b-field-req {
  font-style: italic;
  color: var(--b-faint);
  text-transform: none;
  letter-spacing: 0;
}
[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);
  border: 1.5px solid var(--b-rule);
  border-radius: var(--b-r-peg);
  padding: 12px 16px;
  width: 100%;
  transition: border-color var(--b-dur-warm) var(--b-ease-warm);
}
[data-design="b"] .b-field:focus {
  outline: none;
  border-color: var(--b-moss);
  box-shadow: var(--b-focus-ring);
}
[data-design="b"] .b-field--area {
  resize: vertical;
  min-height: 88px;
}
[data-design="b"] .b-funnel__disclaimer {
  font-family: var(--b-font-body);
  font-size: var(--b-text-cap);
  color: var(--b-bark);
  margin: 0;
}
/* Success */
[data-design="b"] .b-funnel__success {
  display: grid;
  gap: var(--b-gap);
  justify-items: center;
  text-align: center;
  padding-block: var(--b-rail);
}
[data-design="b"] .b-funnel__success[hidden] {
  display: none;
}
[data-design="b"] .b-success__mark {
  width: 56px;
  height: 56px;
}
[data-design="b"] .b-success__ring {
  fill: none;
  stroke: var(--b-moss);
  stroke-width: 2;
}
[data-design="b"] .b-success__check {
  stroke: var(--b-moss-glow);
}
[data-design="b"] .b-success__title {
  font-family: var(--b-font-display);
  font-size: var(--b-text-h3);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-success__body {
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  max-width: 52ch;
  margin: 0;
}

/* ─── PORTFOLIO / WORK ──────────────────────────────────────────── */
[data-design="b"] .b-work {
  background: var(--b-paper);
  padding-block: var(--b-section);
}
[data-design="b"] .b-work__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-rail);
}
[data-design="b"] .b-work__head {
  display: grid;
  gap: var(--b-gap);
  max-width: 72ch;
}
[data-design="b"] .b-work__title {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h2);
  letter-spacing: var(--b-tracking-display);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-work__sub {
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 64ch;
}
[data-design="b"] .b-work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 3vw, 32px);
}
/* Plates */
[data-design="b"] .b-plate--work {
  background: var(--b-panel);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-card);
  overflow: clip;
  box-shadow: var(--b-shadow-plate);
  display: grid;
  transition: transform var(--b-dur-warm) var(--b-ease-seat);
}
/* Material band — animated stone courses (Site B: distinct from folio gallery of Site A) */
[data-design="b"] .b-plate__material-band {
  height: 56px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2px;
  padding: 4px;
  background: var(--b-paper-deep);
  overflow: clip;
}
[data-design="b"] .b-plate__course {
  display: block;
  border-radius: 1px;
  background: var(--b-stone-mid);
  animation: b-course-seat 1.2s var(--b-ease-seat) both;
  transform-origin: left;
}
[data-design="b"] .b-plate__course--2 { animation-delay: 0.18s; background: var(--b-stone-light); }
[data-design="b"] .b-plate__course--3 { animation-delay: 0.36s; background: var(--b-stone-shadow); }
[data-design="b"] .b-plate__course--alt   { background: var(--b-concrete); }
[data-design="b"] .b-plate__course--stone { background: var(--b-stone-light); }
@keyframes b-course-seat {
  from { transform: scaleX(0.1); opacity: 0.3; }
  to   { transform: scaleX(1);   opacity: 1; }
}
[data-design="b"] .b-plate__content {
  padding: var(--b-pad);
  display: grid;
  gap: var(--b-tight);
}
[data-design="b"] .b-plate__title {
  font-family: var(--b-font-display);
  font-size: var(--b-text-h3);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-plate__body {
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-plate--work:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-plate__course { animation: none; }
}

/* ─── E4 AMBIENT-B (MATERIALS & METHODS — woodblock pattern) ────── */
[data-design="b"] .b-ambient-b {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--b-paper-deep);
  padding-block: var(--b-section);
}
[data-design="b"] .b-ambient-b__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.12;
  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: 0.6; }
  to   { transform: translate3d(-24px, 8px, 0); opacity: 1; }
}
[data-design="b"] .b-ambient-b__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-stile);
}
[data-design="b"] .b-ambient-b__title {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h2);
  letter-spacing: var(--b-tracking-display);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-mat__intro {
  font-family: var(--b-font-body);
  font-size: var(--b-text-lead);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 64ch;
}
[data-design="b"] .b-mat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--b-gap);
}
[data-design="b"] .b-mat__item {
  display: grid;
  gap: var(--b-tight);
  padding: var(--b-pad);
  background: var(--b-panel);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-card);
}
[data-design="b"] .b-mat__body {
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
}
[data-design="b"] .b-mat__note {
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  color: var(--b-bark);
  margin: 0;
  padding: var(--b-tight) var(--b-gap);
  border-left: 3px solid var(--b-ochre);
  max-width: 72ch;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-block__g { animation: none; }
}
@media (max-width: 560px) {
  [data-design="b"] .b-ambient-b__field { opacity: 0.08; }
}

/* ─── PROCESS ───────────────────────────────────────────────────── */
[data-design="b"] .b-process {
  background: var(--b-paper);
  padding-block: var(--b-section);
}
[data-design="b"] .b-process__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-rail);
}
[data-design="b"] .b-process__title {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h2);
  letter-spacing: var(--b-tracking-display);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-process__track {
  display: grid;
  gap: var(--b-stile);
  counter-reset: phase;
}
[data-design="b"] .b-process__phase {
  display: grid;
  gap: var(--b-tight);
  padding-left: var(--b-stile);
  position: relative;
}
[data-design="b"] .b-process__phase::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: calc(-1 * var(--b-stile));
  width: 1px;
  background: var(--b-rule);
}
[data-design="b"] .b-process__phase:last-child::before {
  display: none;
}
[data-design="b"] .b-phase__num {
  font-family: var(--b-font-stamp);
  font-size: var(--b-text-cap);
  letter-spacing: var(--b-tracking-stamp);
  color: var(--b-ochre);
  position: absolute;
  left: 0;
  top: 2px;
}
[data-design="b"] .b-phase__name {
  font-family: var(--b-font-display);
  font-size: var(--b-text-h3);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-phase__desc {
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 64ch;
}

/* ─── REPEATED FUNNEL CTA ───────────────────────────────────────── */
[data-design="b"] .b-repeat-cta {
  background: var(--b-paper-deep);
  padding-block: var(--b-bay);
}
[data-design="b"] .b-repeat-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-stile);
  justify-items: center;
  text-align: center;
}
[data-design="b"] .b-repeat-cta__title {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h2);
  letter-spacing: var(--b-tracking-display);
  color: var(--b-ink);
  margin: 0;
  text-wrap: balance;
}
[data-design="b"] .b-repeat-cta__body {
  font-family: var(--b-font-body);
  font-size: var(--b-text-lead);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 54ch;
}
[data-design="b"] .b-repeat-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-gap);
  justify-content: center;
}
/* Colophon */
[data-design="b"] .b-colophon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-tight);
  opacity: 0.7;
}
[data-design="b"] .b-colophon__compass {
  width: 48px;
  height: 48px;
}
[data-design="b"] .b-colophon__motto {
  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);
}

/* ─── ABOUT ─────────────────────────────────────────────────────── */
[data-design="b"] .b-about {
  background: var(--b-paper);
  padding-block: var(--b-section);
}
[data-design="b"] .b-about__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-stile);
}
[data-design="b"] .b-about__title {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h2);
  letter-spacing: var(--b-tracking-display);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-about__body {
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 64ch;
  line-height: var(--b-leading-body);
}
[data-design="b"] .b-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-tight);
}

/* ─── FOOTER ────────────────────────────────────────────────────── */
[data-design="b"] .b-footer {
  background: var(--b-fumed);
  padding-block: var(--b-rail);
  color: var(--b-ink-2);
}
[data-design="b"] .b-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-stile);
}
[data-design="b"] .b-footer__brand {
  display: grid;
  gap: var(--b-hair);
}
[data-design="b"] .b-footer__name {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-lead);
  color: var(--b-ink);
}
[data-design="b"] .b-footer__loc {
  font-family: var(--b-font-stamp);
  font-size: var(--b-text-cap);
  letter-spacing: var(--b-tracking-stamp);
  color: var(--b-bark);
  text-transform: uppercase;
}
[data-design="b"] .b-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-gap);
  align-items: center;
}
[data-design="b"] .b-footer__phone {
  font-family: var(--b-font-stamp);
  font-size: var(--b-text-lead);
  letter-spacing: var(--b-tracking-stamp);
  color: var(--b-ochre-glow);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
[data-design="b"] .b-footer__cta-link {
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  color: var(--b-moss-glow);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
[data-design="b"] .b-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-stile);
  align-items: center;
}
[data-design="b"] .b-footer__trust {
  font-family: var(--b-font-stamp);
  font-size: var(--b-text-meta);
  letter-spacing: var(--b-tracking-stamp);
  color: var(--b-bark);
  text-transform: uppercase;
}
[data-design="b"] .b-footer__copy {
  font-family: var(--b-font-body);
  font-size: var(--b-text-meta);
  color: var(--b-faint);
}
[data-design="b"] .b-footer__colophon {
  opacity: 0.5;
}

/* ─── SCROLL PARALLAX (TRIAD-2: premium scroll motion) ──────────
   Hero text plate scrolls at slightly different rate from backdrop.
   User-driven motion; not counted against AMB-1 ambient ration.
   ════════════════════════════════════════════════════════════════ */
/* Implemented via JS translateY on scroll — see script.js */

/* ─── MOBILE SAFETY NET ─────────────────────────────────────────── */
/* SCOPED to .dq-design — never bare [data-design] to avoid chrome-kit conflicts */
[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; }

@media (max-width: 768px) {
  [data-design="b"] .b-work__grid {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .b-mat__grid {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .b-repeat-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  [data-design="b"] .b-stamp {
    justify-content: center;
    width: 100%;
  }
  [data-design="b"] .b-footer__meta {
    flex-direction: column;
    gap: var(--b-tight);
    align-items: flex-start;
  }
}

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