/* ═══════════════════════════════════════════════════════════════
   Master Carpentry — Albuquerque  ·  Design B  ·  Marginalia
   Slot-scoped: [data-design="b"]  ·  All keyframes: mg- prefix
   Motion gate: transform/opacity/clip-path ONLY — zero layout props
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
[data-design="b"].dq-design {
  --mg-paper:        #FAFAF6;
  --mg-paper-deep:   #F2F0E8;
  --mg-paper-edge:   #E5E2D6;
  --mg-ink:          #14110D;
  --mg-ink-soft:     #34302A;
  --mg-ink-mute:     #6F6A60;
  --mg-prussian:     #1B3A57;
  --mg-prussian-deep:#0F2638;
  --mg-footnote:     #8C2A2A;
  --mg-gilt:         #B89A4E;
  --mg-rule:         rgba(20,17,13,.28);
  --mg-rule-faint:   rgba(20,17,13,.10);

  /* Typography */
  --mg-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --mg-body:    'Crimson Pro', Georgia, 'Times New Roman', serif;
  --mg-ui:      'Inter Tight', 'Inter', system-ui, sans-serif;
  --mg-mono:    'JetBrains Mono', 'Fira Mono', monospace;

  /* Spacing */
  --mg-hair:    1px;
  --mg-tight:   4px;
  --mg-snug:    8px;
  --mg-margin:  16px;
  --mg-gutter:  24px;
  --mg-bay:     40px;
  --mg-stanza:  64px;
  --mg-chapter: 96px;
  --mg-folio:   144px;

  /* Motion */
  --mg-ease-set:  cubic-bezier(.2,.7,.3,1);
  --mg-ease-turn: cubic-bezier(.55,.06,.18,1);
  --mg-ease-foot: cubic-bezier(.3,1.3,.5,1);
  --mg-d-press:   140ms;
  --mg-d-register:240ms;
  --mg-d-settle:  440ms;
  --mg-d-turn:    580ms;

  /* Design-slot primary */
  --design-b-primary: var(--mg-prussian);

  font-family: var(--mg-body);
  background: var(--mg-paper);
  color: var(--mg-ink);
  line-height: 1.6;
}

/* ── Google Fonts import ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,700;1,6..96,400;1,6..96,500&family=Crimson+Pro:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter+Tight:wght@500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Base resets scoped to the article ─────────────────────── */
[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; }
[data-design="b"].dq-design fieldset { border: none; padding: 0; margin: 0; }
[data-design="b"].dq-design button { cursor: pointer; font: inherit; }
[data-design="b"].dq-design a { color: inherit; }
[data-design="b"].dq-design h1,
[data-design="b"].dq-design h2,
[data-design="b"].dq-design h3 { margin: 0; }
[data-design="b"].dq-design p { margin: 0; }
[data-design="b"].dq-design ol,
[data-design="b"].dq-design ul { list-style: none; padding: 0; margin: 0; }

/* ══════════════════════════════════════════════════════════════
   E1 — HEADER
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--mg-paper);
  border-bottom: 1px solid var(--mg-ink);
  isolation: isolate;
}
[data-design="b"] .mg-header__rules {
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 100%;
  pointer-events: none;
  z-index: 0;
}
[data-design="b"] .mg-header__rules::before,
[data-design="b"] .mg-header__rules::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
}
[data-design="b"] .mg-header__rules::before {
  top: 18%;
  background: var(--mg-prussian);
  animation: mg-rule-register 28s var(--mg-ease-set) infinite;
}
[data-design="b"] .mg-header__rules::after {
  bottom: 18%;
  background: var(--mg-footnote);
  opacity: .55;
  animation: mg-rule-register 28s 1.4s var(--mg-ease-set) infinite reverse;
}
@keyframes mg-rule-register {
  0%   { transform: scaleX(0); transform-origin: left center; opacity: 0; }
  20%  { transform: scaleX(1); transform-origin: left center; opacity: 1; }
  50%  { transform: scaleX(1); opacity: 1; }
  70%  { transform: scaleX(1); transform-origin: right center; opacity: 1; }
  90%  { transform: scaleX(0); transform-origin: right center; opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}
[data-design="b"] .mg-header__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(20px,4vw,48px);
}
[data-design="b"] .mg-logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
}
[data-design="b"] .mg-logo__mark {
  font-family: var(--mg-display);
  font-style: italic;
  font-size: clamp(17px,2vw,22px);
  font-weight: 400;
  color: var(--mg-ink);
  letter-spacing: -.01em;
  line-height: 1.1;
}
[data-design="b"] .mg-logo__vol {
  font-family: var(--mg-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mg-ink-mute);
}
@media (max-width: 560px) {
  [data-design="b"] .mg-logo__vol { display: none; }
}

/* Hamburger */
[data-design="b"] .mg-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--mg-rule);
  padding: 10px 14px;
  z-index: 1;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
[data-design="b"] .mg-menu__lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-design="b"] .mg-menu__lines span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--mg-ink);
  transform-origin: center;
  transition: transform var(--mg-d-press) var(--mg-ease-set),
              opacity var(--mg-d-press) var(--mg-ease-set);
}
[data-design="b"] .mg-menu__word {
  font-family: var(--mg-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--mg-ink-mute);
}
/* Open state transforms — transform only, no layout */
[data-design="b"] .mg-menu-btn[aria-expanded="true"] .mg-menu__lines span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
[data-design="b"] .mg-menu-btn[aria-expanded="true"] .mg-menu__lines span:nth-child(2) {
  transform: scaleX(0);
  opacity: 0;
}
[data-design="b"] .mg-menu-btn[aria-expanded="true"] .mg-menu__lines span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Drawer */
[data-design="b"] .mg-drawer {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: var(--mg-paper);
  display: flex;
  flex-direction: column;
  padding: clamp(20px,4vw,48px);
  gap: var(--mg-bay);
  transform: translateX(100%);
  transition: transform var(--mg-d-turn) var(--mg-ease-turn);
}
[data-design="b"] .mg-drawer[hidden] {
  display: none;
}
[data-design="b"] .mg-drawer[data-open="true"] {
  transform: translateX(0);
}
[data-design="b"] .mg-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--mg-rule);
  padding-bottom: var(--mg-margin);
}
[data-design="b"] .mg-drawer__heading {
  font-family: var(--mg-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mg-ink-mute);
}
[data-design="b"] .mg-drawer__close {
  background: none;
  border: 1px solid var(--mg-rule);
  color: var(--mg-ink);
  font-size: 16px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-design="b"] .mg-drawer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--mg-snug);
  flex: 1;
}
[data-design="b"] .mg-drawer__inner a {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--mg-rule-faint);
  text-decoration: none;
  transition: color var(--mg-d-press) var(--mg-ease-set);
}
[data-design="b"] .mg-drawer__num {
  font-family: var(--mg-mono);
  font-size: 12px;
  color: var(--mg-footnote);
}
[data-design="b"] .mg-drawer__title {
  font-family: var(--mg-display);
  font-style: italic;
  font-size: 20px;
}
[data-design="b"] .mg-drawer__pg {
  font-family: var(--mg-mono);
  font-size: 11px;
  color: var(--mg-ink-mute);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .mg-drawer__inner a:hover .mg-drawer__title { color: var(--mg-prussian); }
}
[data-design="b"] .mg-drawer__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--mg-margin);
  align-items: flex-start;
}
[data-design="b"] .mg-drawer__phone {
  font-family: var(--mg-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--mg-ink);
  border-bottom: 1px solid var(--mg-rule);
  padding-bottom: 4px;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .mg-header__rules::before,
  [data-design="b"] .mg-header__rules::after {
    animation: none !important;
    opacity: .8 !important;
    transform: scaleX(1) !important;
  }
  [data-design="b"] .mg-drawer {
    transition-duration: 120ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   E3 / HERO — Dimension-line drafting backdrop + editorial layout
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(60px,9vw,120px) clamp(20px,4vw,48px) clamp(72px,10vw,120px);
  border-bottom: 1px solid var(--mg-ink);
  background: var(--mg-paper);
  min-height: 60vh;
}

/* Blueprint backdrop */
[data-design="b"] .mg-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
[data-design="b"] .mg-blueprint {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: .13;
  animation: mg-blueprint-breathe 24s var(--mg-ease-set) infinite;
}
@keyframes mg-blueprint-breathe {
  0%,100% { opacity: .13; transform: scale(1); }
  50%      { opacity: .20; transform: scale(1.015); }
}

/* SVG strokes — draw in via stroke-dashoffset on keyframes */
[data-design="b"] .mgb-line {
  stroke: var(--mg-prussian);
  fill: none;
}
[data-design="b"] .mgb-line--roof {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: mg-draw-line 2000ms 300ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-line--wall-l {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: mg-draw-line 800ms 2100ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-line--wall-r {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: mg-draw-line 800ms 2300ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-line--floor {
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: mg-draw-line 1000ms 2800ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-line--door {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: mg-draw-line 800ms 3400ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-line--win-l {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: mg-draw-line 700ms 3600ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-line--win-l2,
[data-design="b"] .mgb-line--win-l3 {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: mg-draw-line 400ms 4100ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-line--win-r {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: mg-draw-line 700ms 3800ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-line--win-r2,
[data-design="b"] .mgb-line--win-r3 {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: mg-draw-line 400ms 4300ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-line--stair1 {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: mg-draw-line 500ms 4700ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-line--stair2 {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: mg-draw-line 400ms 5000ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-line--stair3 {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: mg-draw-line 400ms 5200ms var(--mg-ease-set) forwards;
}
@keyframes mg-draw-line {
  to { stroke-dashoffset: 0; }
}

/* Dimension lines */
[data-design="b"] .mgb-dim {
  stroke: var(--mg-footnote);
  opacity: 0;
  animation: mg-dim-appear 600ms 5500ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-dim--ht1 { animation-delay: 5600ms; }
[data-design="b"] .mgb-dim--ht2 { animation-delay: 5700ms; }
[data-design="b"] .mgb-dim--v   { animation-delay: 5800ms; }
[data-design="b"] .mgb-dim--vt1 { animation-delay: 5900ms; }
[data-design="b"] .mgb-dim--vt2 { animation-delay: 6000ms; }
[data-design="b"] .mgb-dim--ridge { animation-delay: 6100ms; }
[data-design="b"] .mgb-dim--rt1  { animation-delay: 6200ms; }
[data-design="b"] .mgb-dim--rt2  { animation-delay: 6300ms; }
@keyframes mg-dim-appear {
  to { opacity: 1; }
}

/* Dim labels */
[data-design="b"] .mgb-dim-label {
  font-family: var(--mg-mono);
  fill: var(--mg-footnote);
  opacity: 0;
  animation: mg-dim-appear 600ms 6400ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mgb-dim-label--v { animation-delay: 6600ms; }

/* Annotations */
[data-design="b"] .mgb-ann {
  font-family: var(--mg-mono);
  fill: var(--mg-prussian);
  opacity: 0;
  animation: mg-dim-appear 600ms 6800ms var(--mg-ease-set) forwards;
}

/* Ongoing ambient breath — the entire SVG opacity pulses on a 24s cycle
   (handled on .mg-blueprint above) providing sustained perceptible motion */

/* Hero gutter rule (column separator) */
[data-design="b"] .mg-hero__gutter {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(66.67% + 8px);
  width: 1px;
  background: var(--mg-rule-faint);
  transform: scaleY(0);
  transform-origin: top center;
  z-index: 1;
  pointer-events: none;
  animation: mg-hero-gutter 1600ms 400ms var(--mg-ease-set) forwards,
             mg-hero-gutter-breath 26s 2200ms var(--mg-ease-set) infinite;
}
@keyframes mg-hero-gutter   { to { transform: scaleY(1); } }
@keyframes mg-hero-gutter-breath { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Hero inner grid */
[data-design="b"] .mg-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(0,320px);
  gap: clamp(40px,6vw,96px);
  align-items: start;
}
@media (max-width: 880px) {
  [data-design="b"] .mg-hero__inner { grid-template-columns: 1fr; }
  [data-design="b"] .mg-hero__gutter { display: none; }
}

/* Hero body text — all must be opacity:1 at first paint */
[data-design="b"] .mg-eyebrow {
  font-family: var(--mg-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mg-ink-mute);
  margin-bottom: var(--mg-margin);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
[data-design="b"] .mg-eyebrow__no {
  font-family: var(--mg-mono);
  color: var(--mg-footnote);
  font-size: 10px;
}
[data-design="b"] .mg-hero__kicker {
  font-family: var(--mg-display);
  font-style: italic;
  font-size: clamp(15px,1.4vw,18px);
  color: var(--mg-prussian);
  margin-bottom: var(--mg-snug);
}
[data-design="b"] .mg-hero__title {
  font-family: var(--mg-display);
  font-weight: 700;
  font-size: clamp(42px,6.5vw,88px);
  line-height: 1.0;
  letter-spacing: -.022em;
  color: var(--mg-ink);
  margin-bottom: var(--mg-gutter);
}
[data-design="b"] .mg-hero__title em {
  font-style: italic;
  color: var(--mg-prussian);
  font-weight: 500;
}
[data-design="b"] .mg-hero__lede {
  font-family: var(--mg-body);
  font-size: clamp(17px,1.4vw,20px);
  line-height: 1.6;
  color: var(--mg-ink-soft);
  max-width: 56ch;
  margin-bottom: var(--mg-gutter);
}
[data-design="b"] .mg-hero__lede sup {
  font-family: var(--mg-mono);
  font-size: 11px;
  color: var(--mg-footnote);
  vertical-align: super;
}
[data-design="b"] .mg-hero__footnote {
  font-family: var(--mg-mono);
  font-size: 11px;
  color: var(--mg-ink-mute);
  margin-top: var(--mg-margin);
}
[data-design="b"] .mg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-margin);
  align-items: center;
}

/* Marginal note */
[data-design="b"] .mg-hero__margin-note {
  font-family: var(--mg-display);
  font-style: italic;
  font-size: clamp(15px,1.3vw,18px);
  line-height: 1.55;
  color: var(--mg-ink-soft);
  border-left: 2px solid var(--mg-prussian);
  padding-left: 18px;
  /* Arrival uses transform-only — opacity stays 1 at all times (gate rule) */
  opacity: 1;
  transform: translateX(-8px);
  animation: mg-margin-drift 1200ms 1400ms var(--mg-ease-foot) forwards;
}
[data-design="b"] .mg-hero__margin-note small {
  display: block;
  margin-top: 10px;
  font-family: var(--mg-ui);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--mg-ink-mute);
}
@keyframes mg-margin-drift { to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .mg-hero__gutter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  [data-design="b"] .mg-hero__margin-note {
    animation: none !important;
    transform: none !important;
  }
  [data-design="b"] .mg-blueprint { animation: none !important; }
  [data-design="b"] .mgb-line { stroke-dashoffset: 0 !important; animation: none !important; }
  [data-design="b"] .mgb-dim,
  [data-design="b"] .mgb-dim-label,
  [data-design="b"] .mgb-ann { opacity: 1 !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   E2 — CTA (gilt underline draw)
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  background: var(--mg-ink);
  color: var(--mg-paper);
  font-family: var(--mg-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--mg-ink);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform var(--mg-d-press) var(--mg-ease-set),
              background var(--mg-d-press) var(--mg-ease-set);
  animation: mg-cta-breath 5.6s var(--mg-ease-set) infinite;
  min-height: 44px;
}
[data-design="b"] .mg-cta__label {
  position: relative;
  z-index: 1;
}
[data-design="b"] .mg-cta__arrow {
  position: relative;
  z-index: 1;
  font-size: 16px;
  transition: transform var(--mg-d-press) var(--mg-ease-set);
}
[data-design="b"] .mg-cta__underline {
  position: absolute;
  left: 28px; right: 28px; bottom: 10px;
  height: 1px;
  background: var(--mg-gilt);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 1;
  transition: transform var(--mg-d-settle) var(--mg-ease-set);
}
[data-design="b"] .mg-cta:focus-visible .mg-cta__underline { transform: scaleX(1); }
[data-design="b"] .mg-cta:focus-visible { outline: 2px solid var(--mg-footnote); outline-offset: 3px; }
[data-design="b"] .mg-cta:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .mg-cta:hover .mg-cta__underline { transform: scaleX(1); }
  [data-design="b"] .mg-cta:hover { background: var(--mg-prussian-deep); }
  [data-design="b"] .mg-cta:hover .mg-cta__arrow { transform: translateX(4px); }
}
@keyframes mg-cta-breath {
  0%,100% { box-shadow: 0 0 0 0 rgba(184,154,78,0); }
  50%      { box-shadow: 0 0 0 6px rgba(184,154,78,.10); }
}

/* Ghost variant */
[data-design="b"] .mg-cta--ghost {
  background: transparent;
  color: var(--mg-paper);
  border-color: rgba(250,250,246,.4);
  animation: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .mg-cta--ghost:hover {
    background: rgba(250,250,246,.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .mg-cta { animation: none !important; }
  [data-design="b"] .mg-cta__underline { transition-duration: 120ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   E6 — POINTER (footnote-style descending rule)
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-pointer {
  position: relative;
  z-index: 5;
  max-width: 1480px;
  margin: -40px auto -16px;
  padding: 0 clamp(20px,4vw,48px);
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}
[data-design="b"] .mg-pointer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-left: clamp(20px,4vw,48px);
  pointer-events: auto;
  cursor: default;
}
[data-design="b"] .mg-pointer__note {
  font-family: var(--mg-display);
  font-style: italic;
  font-size: 15px;
  color: var(--mg-ink-mute);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  opacity: 0;
  animation: mg-pointer-note-in 800ms 1500ms var(--mg-ease-set) forwards;
}
[data-design="b"] .mg-pointer__note sup {
  font-family: var(--mg-mono);
  font-style: normal;
  font-size: 11px;
  color: var(--mg-footnote);
  vertical-align: super;
}
[data-design="b"] .mg-pointer__rule {
  width: 1px;
  height: 96px;
  background: linear-gradient(to bottom, transparent, var(--mg-footnote) 40%, var(--mg-ink) 100%);
  transform-origin: top center;
  animation: mg-pointer-draw 1400ms 1800ms var(--mg-ease-set) both,
             mg-pointer-breath 5.2s 3400ms var(--mg-ease-set) infinite;
}
@keyframes mg-pointer-note-in { to { opacity: 1; } }
@keyframes mg-pointer-draw    { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mg-pointer-breath  { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .mg-pointer__note,
  [data-design="b"] .mg-pointer__rule {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   E5 — FUNNEL (5-step page-turn)
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-funnel-section {
  background: var(--mg-paper-deep);
  border-top: 1px solid var(--mg-ink);
  border-bottom: 1px solid var(--mg-ink);
  padding: var(--mg-chapter) clamp(20px,4vw,48px);
}
[data-design="b"] .mg-funnel-section__head {
  max-width: 760px;
  margin: 0 auto var(--mg-bay);
  text-align: center;
}
[data-design="b"] .mg-funnel-section__kicker {
  font-family: var(--mg-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mg-ink-mute);
  margin-bottom: var(--mg-margin);
}
[data-design="b"] .mg-funnel-section__head h2 {
  font-family: var(--mg-display);
  font-weight: 700;
  font-size: clamp(32px,4.5vw,56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: var(--mg-margin);
}
[data-design="b"] .mg-funnel-section__head h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--mg-prussian);
}
[data-design="b"] .mg-funnel-section__head p {
  font-family: var(--mg-body);
  font-size: clamp(16px,1.3vw,19px);
  color: var(--mg-ink-mute);
  max-width: 52ch;
  margin: 0 auto;
}
[data-design="b"] .mg-funnel {
  max-width: 760px;
  margin: 0 auto;
  background: var(--mg-paper);
  border: 1px solid var(--mg-ink);
  position: relative;
}

/* Progress bar */
[data-design="b"] .mg-funnel__progress {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--mg-margin);
  padding: var(--mg-margin) clamp(20px,4vw,40px);
  border-bottom: 1px solid var(--mg-rule-faint);
}
[data-design="b"] .mg-funnel__chapter {
  font-family: var(--mg-display);
  font-style: italic;
  font-size: 14px;
  color: var(--mg-ink-mute);
}
[data-design="b"] .mg-funnel__progress-track {
  width: 80px;
  height: 2px;
  background: var(--mg-rule-faint);
  position: relative;
  overflow: hidden;
}
[data-design="b"] .mg-funnel__progress-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--mg-footnote);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mg-d-turn) var(--mg-ease-turn);
}
[data-design="b"] .mg-funnel__progress-num {
  font-family: var(--mg-mono);
  font-size: 11px;
  color: var(--mg-ink-mute);
  white-space: nowrap;
}

/* Steps container */
[data-design="b"] .mg-funnel__steps {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

/* Individual step */
[data-design="b"] .mg-funnel__step {
  position: absolute;
  inset: 0;
  padding: clamp(24px,4vw,48px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) skewY(.4deg);
  transition: opacity var(--mg-d-turn) var(--mg-ease-turn),
              transform var(--mg-d-turn) var(--mg-ease-turn);
}
[data-design="b"] .mg-funnel__step[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) skewY(0);
}
[data-design="b"] .mg-funnel__q {
  font-family: var(--mg-display);
  font-weight: 700;
  font-size: clamp(20px,2.5vw,28px);
  line-height: 1.2;
  margin-bottom: var(--mg-snug);
  display: block;
}
[data-design="b"] .mg-funnel__help {
  font-family: var(--mg-body);
  font-size: 15px;
  color: var(--mg-ink-mute);
  margin-bottom: var(--mg-gutter);
}
[data-design="b"] .mg-funnel__options {
  display: flex;
  flex-direction: column;
  gap: var(--mg-snug);
  margin-bottom: var(--mg-margin);
}
[data-design="b"] .mg-funnel__opt {
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  gap: 14px;
  align-items: baseline;
  background: transparent;
  color: var(--mg-ink);
  border: 1px solid var(--mg-rule);
  padding: 14px 20px;
  text-align: left;
  font-family: var(--mg-body);
  font-size: 17px;
  min-height: 44px;
  transition: background var(--mg-d-press) var(--mg-ease-set),
              border-color var(--mg-d-press) var(--mg-ease-set);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .mg-funnel__opt:hover {
    background: var(--mg-paper-deep);
    border-color: var(--mg-ink);
  }
}
[data-design="b"] .mg-funnel__opt:focus-visible {
  outline: 2px solid var(--mg-footnote);
  outline-offset: 2px;
}
[data-design="b"] .mg-funnel__opt-num {
  font-family: var(--mg-mono);
  font-size: 11px;
  color: var(--mg-footnote);
  letter-spacing: .14em;
}
[data-design="b"] .mg-funnel__opt-arrow {
  font-family: var(--mg-mono);
  font-size: 12px;
  color: var(--mg-ink-mute);
  opacity: 0;
  transition: opacity var(--mg-d-press) var(--mg-ease-set),
              transform var(--mg-d-press) var(--mg-ease-set);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .mg-funnel__opt:hover .mg-funnel__opt-arrow {
    opacity: 1;
    transform: translateX(3px);
    color: var(--mg-prussian);
  }
}

/* Funnel actions row */
[data-design="b"] .mg-funnel__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--mg-margin);
}
[data-design="b"] .mg-funnel__back {
  background: none;
  border: none;
  font-family: var(--mg-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--mg-ink-mute);
  padding: 8px 0;
  min-height: 44px;
  min-width: 44px;
  transition: color var(--mg-d-press) var(--mg-ease-set);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .mg-funnel__back:hover { color: var(--mg-ink); }
}

/* Contact fields */
[data-design="b"] .mg-funnel__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mg-gutter) var(--mg-gutter);
  margin-bottom: var(--mg-gutter);
}
[data-design="b"] .mg-funnel__field--full {
  grid-column: 1 / -1;
}
[data-design="b"] .mg-funnel__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-design="b"] .mg-funnel__field-label {
  font-family: var(--mg-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mg-ink-mute);
}
[data-design="b"] .mg-funnel__field-label em {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
[data-design="b"] .mg-funnel__field input,
[data-design="b"] .mg-funnel__field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--mg-rule);
  padding: 10px 0;
  font-family: var(--mg-body);
  font-size: 17px;
  color: var(--mg-ink);
  outline: none;
  resize: none;
  transition: border-color var(--mg-d-press) var(--mg-ease-set);
}
[data-design="b"] .mg-funnel__field input:focus,
[data-design="b"] .mg-funnel__field textarea:focus {
  border-color: var(--mg-footnote);
}
[data-design="b"] .mg-funnel__field input::placeholder,
[data-design="b"] .mg-funnel__field textarea::placeholder {
  color: var(--mg-ink-mute);
  font-style: italic;
}

/* Submit row */
[data-design="b"] .mg-funnel__actions--submit {
  flex-wrap: wrap;
  gap: var(--mg-margin);
}
[data-design="b"] .mg-funnel__submit { animation: none; }

/* Done / colophon */
[data-design="b"] .mg-funnel__done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mg-margin);
  justify-content: center;
  min-height: 300px;
}
[data-design="b"] .mg-funnel__done-label {
  font-family: var(--mg-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mg-footnote);
}
[data-design="b"] .mg-funnel__done-title {
  font-family: var(--mg-display);
  font-weight: 700;
  font-size: clamp(32px,4vw,48px);
  line-height: 1.0;
  letter-spacing: -.02em;
  margin-top: 0;
}
[data-design="b"] .mg-funnel__done-body {
  font-family: var(--mg-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--mg-ink-soft);
  max-width: 50ch;
}
[data-design="b"] .mg-funnel__done-phone {
  font-family: var(--mg-body);
  font-size: 16px;
  color: var(--mg-ink-mute);
}
[data-design="b"] .mg-funnel__done-phone a {
  color: var(--mg-prussian);
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-design="b"] .mg-funnel-section__below {
  max-width: 760px;
  margin: var(--mg-bay) auto 0;
  text-align: center;
  font-family: var(--mg-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--mg-ink-mute);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .mg-funnel__step {
    transition-duration: 120ms !important;
    transform: none !important;
  }
  [data-design="b"] .mg-funnel__progress-bar {
    transition-duration: 120ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   E4 — SERVICES / MATTERS (footnoted counter list)
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-matters {
  padding: var(--mg-chapter) clamp(20px,4vw,48px);
  border-bottom: 1px solid var(--mg-rule-faint);
}
[data-design="b"] .mg-matters__head {
  max-width: 1480px;
  margin: 0 auto var(--mg-bay);
  display: grid;
  grid-template-columns: 1fr minmax(0,380px);
  gap: var(--mg-bay);
  align-items: end;
}
@media (max-width: 768px) {
  [data-design="b"] .mg-matters__head { grid-template-columns: 1fr; }
}
[data-design="b"] .mg-matters__no {
  font-family: var(--mg-mono);
  font-size: 11px;
  color: var(--mg-footnote);
  letter-spacing: .14em;
  margin-bottom: var(--mg-margin);
}
[data-design="b"] .mg-matters__no span {
  color: var(--mg-footnote);
}
[data-design="b"] .mg-matters__title {
  font-family: var(--mg-display);
  font-weight: 700;
  font-size: clamp(32px,4.5vw,56px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
[data-design="b"] .mg-matters__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--mg-prussian);
}
[data-design="b"] .mg-matters__note {
  font-family: var(--mg-body);
  font-size: clamp(15px,1.2vw,18px);
  color: var(--mg-ink-mute);
  line-height: 1.6;
}

/* Foot list */
[data-design="b"] .mg-foot-list {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
}
[data-design="b"] .mg-foot-list__rule {
  position: absolute;
  left: 50px;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--mg-ink);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 2400ms var(--mg-ease-set); /* motion-exception: entrance draw-in of decorative spine rule — intentionally slow per Marginalia draw grammar; not a UI interaction */
}
[data-design="b"] .mg-foot-list[data-in="true"] .mg-foot-list__rule {
  transform: scaleY(1);
}
[data-design="b"] .mg-foot {
  display: grid;
  grid-template-columns: 80px 1fr 180px;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--mg-rule-faint);
  align-items: baseline;
  position: relative;
}
@media (max-width: 760px) {
  [data-design="b"] .mg-foot { grid-template-columns: 56px 1fr; }
  [data-design="b"] .mg-foot__cite { grid-column: 2; text-align: left; }
  [data-design="b"] .mg-foot-list__rule { left: 28px; }
}
[data-design="b"] .mg-foot__num {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--mg-mono);
  font-size: 14px;
  color: var(--mg-ink);
  padding-left: 60px;
}
[data-design="b"] .mg-foot__num sup {
  font-size: 10px;
  color: var(--mg-footnote);
  vertical-align: super;
}
[data-design="b"] .mg-foot__counter { font-variant-numeric: tabular-nums; }
[data-design="b"] .mg-foot__title {
  font-family: var(--mg-body);
  font-size: clamp(16px,1.3vw,19px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--mg-ink);
}
[data-design="b"] .mg-foot__title small {
  display: block;
  margin-top: 6px;
  font-family: var(--mg-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--mg-ink-mute);
  line-height: 1.55;
}
[data-design="b"] .mg-foot__cite {
  font-family: var(--mg-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mg-ink-mute);
  text-align: right;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .mg-foot-list__rule { transition-duration: 200ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   REPEATED FUNNEL CTA
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-repeat-cta {
  border-top: 1px solid var(--mg-rule-faint);
  border-bottom: 1px solid var(--mg-rule-faint);
  padding: var(--mg-stanza) clamp(20px,4vw,48px);
}
[data-design="b"] .mg-repeat-cta__inner {
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mg-gutter);
}
[data-design="b"] .mg-repeat-cta__label {
  font-family: var(--mg-display);
  font-style: italic;
  font-size: clamp(20px,2.5vw,28px);
  color: var(--mg-ink-soft);
}

/* ══════════════════════════════════════════════════════════════
   PROCESS
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-process {
  padding: var(--mg-chapter) clamp(20px,4vw,48px);
  border-bottom: 1px solid var(--mg-rule-faint);
}
[data-design="b"] .mg-process__head {
  max-width: 1480px;
  margin: 0 auto var(--mg-bay);
}
[data-design="b"] .mg-process__steps {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--mg-bay);
}
[data-design="b"] .mg-process__step {
  display: flex;
  flex-direction: column;
  gap: var(--mg-margin);
  padding-top: var(--mg-gutter);
  border-top: 1px solid var(--mg-rule);
}
[data-design="b"] .mg-process__num {
  font-family: var(--mg-mono);
  font-size: 12px;
  color: var(--mg-footnote);
  letter-spacing: .16em;
}
[data-design="b"] .mg-process__step h3 {
  font-family: var(--mg-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}
[data-design="b"] .mg-process__step p {
  font-family: var(--mg-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mg-ink-mute);
}

/* ══════════════════════════════════════════════════════════════
   ABOUT — Bio section
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-bio-section {
  padding: var(--mg-chapter) clamp(20px,4vw,48px);
  border-bottom: 1px solid var(--mg-rule-faint);
  background: var(--mg-paper-deep);
}
[data-design="b"] .mg-bio-section__head {
  max-width: 1480px;
  margin: 0 auto var(--mg-bay);
}
[data-design="b"] .mg-bio-section__body {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--mg-gutter);
}
[data-design="b"] .mg-bio-section__body p {
  font-family: var(--mg-body);
  font-size: clamp(17px,1.4vw,20px);
  line-height: 1.65;
  color: var(--mg-ink-soft);
}

/* ══════════════════════════════════════════════════════════════
   SERVICE AREA
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-area {
  padding: var(--mg-chapter) clamp(20px,4vw,48px);
  border-bottom: 1px solid var(--mg-rule-faint);
  max-width: 1480px;
  margin: 0 auto;
}
[data-design="b"] .mg-area .mg-matters__title {
  margin: var(--mg-margin) 0 var(--mg-gutter);
}
[data-design="b"] .mg-area__body {
  font-family: var(--mg-body);
  font-size: clamp(16px,1.3vw,19px);
  color: var(--mg-ink-mute);
  line-height: 1.6;
  max-width: 60ch;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-footer {
  background: var(--mg-ink);
  color: var(--mg-paper);
  padding: var(--mg-chapter) clamp(20px,4vw,48px);
}
[data-design="b"] .mg-footer__inner {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: var(--mg-bay);
}
[data-design="b"] .mg-footer__name {
  font-family: var(--mg-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.01em;
}
[data-design="b"] .mg-footer__sub {
  font-family: var(--mg-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,250,246,.5);
  margin-top: 6px;
}
[data-design="b"] .mg-footer__contact a,
[data-design="b"] .mg-footer__contact p,
[data-design="b"] .mg-footer__services p {
  font-family: var(--mg-body);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(250,250,246,.75);
}
[data-design="b"] .mg-footer__contact a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .mg-footer__contact a:hover { color: var(--mg-gilt); }
}
[data-design="b"] .mg-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--mg-margin);
  align-items: flex-start;
}
[data-design="b"] .mg-footer__legal p {
  font-family: var(--mg-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(250,250,246,.45);
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM SCROLL — parallax on blueprint backdrop (TRIAD-2)
   scroll-driven via JS (see script.js); CSS provides the property
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .mg-hero__backdrop {
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE GUARDS — scoped, no bare [data-design] descendants
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  [data-design="b"].dq-design .mg-funnel__fields {
    grid-template-columns: 1fr;
  }
  [data-design="b"].dq-design .mg-funnel__step--contact {
    overflow-y: auto;
  }
  [data-design="b"].dq-design .mg-matters__head {
    grid-template-columns: 1fr;
  }
  [data-design="b"].dq-design .mg-repeat-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  [data-design="b"].dq-design .mg-footer__inner {
    grid-template-columns: 1fr;
  }
}

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