/* ============================================================
   design-a · Marginalia adapted for construction
   tw-construction-idaho-stucco-boise
   All selectors scoped [data-design="a"]
   Keyframes prefixed mg-
   ~12–16 trade-rooted tokens exposed on [data-design="a"]
   ============================================================ */

/* ─── Google Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Crimson+Pro:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter+Tight:wght@500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Design-A token block ─── */
[data-design="a"] {
  /* Color */
  --design-a-primary:     #1B3A57;  /* prussian — primary editorial accent */
  --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);
  /* Blueprint substrate */
  --mg-blueprint:         rgba(27,58,87,.18);
  --mg-blueprint-line:    rgba(27,58,87,.32);

  /* Typography */
  --mg-display: "Bodoni Moda", Georgia, serif;
  --mg-body:    "Crimson Pro", Georgia, serif;
  --mg-ui:      "Inter Tight", system-ui, sans-serif;
  --mg-mono:    "JetBrains Mono", "Courier New", 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;
}

/* ─── Reset ─── */
[data-design="a"] *, [data-design="a"] *::before, [data-design="a"] *::after {
  box-sizing: border-box;
}
[data-design="a"] {
  font-family: var(--mg-body);
  background: var(--mg-paper);
  color: var(--mg-ink);
  font-size: clamp(17px,1.4vw,20px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   E1 — Animated minimalist header "rule registration"
   ============================================================ */
[data-design="a"] .mg-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--mg-paper);
  border-bottom: 1px solid var(--mg-ink);
  isolation: isolate;
}
[data-design="a"] .mg-header__rules {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
[data-design="a"] .mg-header__rules::before,
[data-design="a"] .mg-header__rules::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
}
[data-design="a"] .mg-header__rules::before {
  top: 30%; background: var(--mg-prussian);
  animation: mg-rule-register 28s var(--mg-ease-set) infinite;
}
[data-design="a"] .mg-header__rules::after {
  bottom: 20%; 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="a"] .mg-header__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px,4vw,48px); height: 64px;
}
[data-design="a"] .mg-logo {
  display: flex; flex-direction: column; text-decoration: none; gap: 2px;
}
[data-design="a"] .mg-logo__mark {
  font-family: var(--mg-display); font-style: italic;
  font-size: clamp(18px,2vw,24px); font-weight: 500;
  color: var(--mg-ink); letter-spacing: -.01em; line-height: 1.1;
}
[data-design="a"] .mg-logo__vol {
  font-family: var(--mg-ui); font-size: 10px; font-weight: 500;
  color: var(--mg-ink-mute); letter-spacing: .14em; text-transform: uppercase;
}
@media (max-width: 560px) {
  [data-design="a"] .mg-logo__vol { display: none; }
}
[data-design="a"] .mg-menu-btn {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--mg-rule);
  padding: 10px 14px; cursor: pointer; color: var(--mg-ink);
  font-family: var(--mg-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  min-width: 44px; min-height: 44px;
  transition: border-color var(--mg-d-press) var(--mg-ease-set);
}
[data-design="a"] .mg-menu-btn:hover { border-color: var(--mg-ink); }
[data-design="a"] .mg-menu__lines {
  display: flex; flex-direction: column; gap: 4px; width: 18px;
}
[data-design="a"] .mg-menu__lines span {
  display: block; height: 1px; background: var(--mg-ink);
  transition: transform var(--mg-d-register) var(--mg-ease-turn),
              opacity var(--mg-d-register) var(--mg-ease-turn);
}
[data-design="a"] .mg-menu-btn[aria-expanded="true"] .mg-menu__lines span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
[data-design="a"] .mg-menu-btn[aria-expanded="true"] .mg-menu__lines span:nth-child(2) { transform: scaleX(0); opacity: 0; }
[data-design="a"] .mg-menu-btn[aria-expanded="true"] .mg-menu__lines span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ─── Drawer ─── */
[data-design="a"] .mg-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(380px, 92vw);
  background: var(--mg-paper); border-left: 1px solid var(--mg-ink);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--mg-d-turn) var(--mg-ease-turn);
  overflow-y: auto;
}
[data-design="a"] .mg-drawer[data-open="true"] { transform: translateX(0); }
[data-design="a"] .mg-drawer[data-open="false"] { display: none; }
[data-design="a"] .mg-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; border-bottom: 1px solid var(--mg-rule);
  font-family: var(--mg-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mg-ink-mute);
}
[data-design="a"] .mg-drawer__close {
  background: transparent; border: none; cursor: pointer;
  color: var(--mg-ink); font-size: 18px; padding: 6px 10px;
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
}
[data-design="a"] .mg-drawer__inner {
  flex: 1; padding: 28px 0; display: flex; flex-direction: column;
}
[data-design="a"] .mg-drawer__inner a {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline;
  padding: 14px 28px; text-decoration: none; color: var(--mg-ink);
  border-bottom: 1px solid var(--mg-rule-faint);
  font-family: var(--mg-body); font-size: 18px;
  transition: color var(--mg-d-press) var(--mg-ease-set);
  min-height: 44px;
}
[data-design="a"] .mg-drawer__inner a:hover { color: var(--mg-prussian); }
[data-design="a"] .mg-drawer__num {
  font-family: var(--mg-mono); font-size: 11px; color: var(--mg-footnote);
  letter-spacing: .1em;
}
[data-design="a"] .mg-drawer__title { font-style: italic; }
[data-design="a"] .mg-drawer__pg {
  font-family: var(--mg-mono); font-size: 11px; color: var(--mg-ink-mute);
}
[data-design="a"] .mg-drawer__actions {
  padding: 24px 28px; border-top: 1px solid var(--mg-rule);
  display: flex; flex-direction: column; gap: 16px;
}
[data-design="a"] .mg-drawer__phone {
  display: block; text-align: center;
  font-family: var(--mg-ui); font-size: 15px; font-weight: 600;
  color: var(--mg-ink); text-decoration: none; letter-spacing: .04em;
  padding: 12px; border: 1px solid var(--mg-rule); min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--mg-d-press) var(--mg-ease-set);
}
[data-design="a"] .mg-drawer__phone:hover { border-color: var(--mg-ink); }
[data-design="a"] .mg-drawer__backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: rgba(20,17,13,.32); display: none;
}
[data-design="a"] .mg-drawer[data-open="true"] ~ .mg-drawer__backdrop { display: block; }

/* ============================================================
   E2 — Animated CTA (gilt underline draw)
   ============================================================ */
[data-design="a"] .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="a"] .mg-cta__label { position: relative; z-index: 1; }
[data-design="a"] .mg-cta__arrow {
  position: relative; z-index: 1; font-size: 16px;
  transition: transform var(--mg-d-press) var(--mg-ease-set);
}
[data-design="a"] .mg-cta:hover .mg-cta__arrow { transform: translateX(4px); }
[data-design="a"] .mg-cta__underline {
  position: absolute; left: 28px; right: 28px; bottom: 12px; 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="a"] .mg-cta:hover .mg-cta__underline,
[data-design="a"] .mg-cta:focus-visible .mg-cta__underline { transform: scaleX(1); }
[data-design="a"] .mg-cta:hover { background: var(--mg-prussian-deep); }
[data-design="a"] .mg-cta:active { transform: translateY(1px); }
[data-design="a"] .mg-cta:focus-visible { outline: 2px solid var(--mg-footnote); outline-offset: 3px; }
@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); }
}

/* ============================================================
   E3 — Hero backdrop: blueprint dimension-line drafting
   + ambient sustained drift motion at rest
   ============================================================ */
[data-design="a"] .mg-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(64px,9vw,120px) clamp(20px,4vw,48px) clamp(80px,10vw,128px);
  border-bottom: 1px solid var(--mg-ink);
  background: var(--mg-paper);
}
/* Blueprint SVG substrate — VISIBLE AT FIRST PAINT */
[data-design="a"] .mg-hero__blueprint {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
[data-design="a"] .mg-blueprint__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .38;                /* ≥0.25 visibility floor */
}
/* Horizontal dimension lines — draw in L→R */
[data-design="a"] .bp-line {
  fill: none; stroke: var(--mg-prussian); stroke-width: 0.6;
  stroke-dasharray: 1440; stroke-dashoffset: 1440;
}
[data-design="a"] .bp-line--h1 { animation: mg-bp-draw-h 1400ms  200ms var(--mg-ease-set) forwards; }
[data-design="a"] .bp-line--h2 { animation: mg-bp-draw-h 1600ms  600ms var(--mg-ease-set) forwards; }
[data-design="a"] .bp-line--h3 { animation: mg-bp-draw-h 1800ms 1000ms var(--mg-ease-set) forwards; }
/* Vertical structural lines — draw in top→bottom */
[data-design="a"] .bp-line--v1 { stroke-dasharray: 700; stroke-dashoffset: 700; animation: mg-bp-draw-v 1200ms  400ms var(--mg-ease-set) forwards; }
[data-design="a"] .bp-line--v2 { stroke-dasharray: 700; stroke-dashoffset: 700; animation: mg-bp-draw-v 1200ms  700ms var(--mg-ease-set) forwards; }
[data-design="a"] .bp-line--v3 { stroke-dasharray: 700; stroke-dashoffset: 700; animation: mg-bp-draw-v 1200ms 1000ms var(--mg-ease-set) forwards; }
[data-design="a"] .bp-line--v4 { stroke-dasharray: 700; stroke-dashoffset: 700; animation: mg-bp-draw-v 1200ms 1300ms var(--mg-ease-set) forwards; }
/* Elevation profile — structure draws in */
[data-design="a"] .bp-profile {
  fill: none; stroke: var(--mg-prussian); stroke-width: 1.2;
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  animation: mg-bp-draw-profile 2000ms 1200ms var(--mg-ease-set) forwards;
}
[data-design="a"] .bp-profile--b {
  stroke-dasharray: 800; stroke-dashoffset: 800;
  animation: mg-bp-draw-profile 1800ms 1600ms var(--mg-ease-set) forwards;
}
/* Dimension tick marks */
[data-design="a"] .bp-tick {
  fill: none; stroke: var(--mg-prussian); stroke-width: 0.8;
  stroke-dasharray: 12; stroke-dashoffset: 12;
  animation: mg-bp-draw-tick 400ms 2000ms var(--mg-ease-set) forwards;
}
/* Arc annotation */
[data-design="a"] .bp-arc {
  fill: none; stroke: var(--mg-prussian); stroke-width: 0.6; opacity: .5;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: mg-bp-draw-arc 1200ms 1800ms var(--mg-ease-set) forwards;
}
/* Annotation rectangles */
[data-design="a"] .bp-annot {
  fill: none; stroke: var(--mg-prussian); stroke-width: 0.6; opacity: 0;
  animation: mg-bp-fade-annot 600ms 2400ms var(--mg-ease-set) forwards;
}
/* Baseline */
[data-design="a"] .bp-baseline {
  fill: none; stroke: var(--mg-prussian); stroke-width: 1;
  stroke-dasharray: 1440; stroke-dashoffset: 1440;
  animation: mg-bp-draw-h 2000ms 800ms var(--mg-ease-set) forwards;
}
@keyframes mg-bp-draw-h { to { stroke-dashoffset: 0; } }
@keyframes mg-bp-draw-v { to { stroke-dashoffset: 0; } }
@keyframes mg-bp-draw-profile { to { stroke-dashoffset: 0; } }
@keyframes mg-bp-draw-tick { to { stroke-dashoffset: 0; } }
@keyframes mg-bp-draw-arc { to { stroke-dashoffset: 0; } }
@keyframes mg-bp-fade-annot { to { opacity: .4; } }

/* Sustained ambient drift layer — keeps the hero alive at rest */
[data-design="a"] .mg-hero__drift {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(27,58,87,.06) 0%,
    rgba(27,58,87,.14) 35%,
    rgba(184,154,78,.04) 65%,
    rgba(27,58,87,.08) 100%
  );
  animation: mg-hero-drift 22s var(--mg-ease-set) infinite alternate;
  pointer-events: none;
}
@keyframes mg-hero-drift {
  0%   { opacity: .45; transform: scale(1)    translateX(0);     }
  33%  { opacity: .70; transform: scale(1.02) translateX(-12px); }
  66%  { opacity: .55; transform: scale(1.01) translateX(10px);  }
  100% { opacity: .65; transform: scale(1.03) translateX(-6px);  }
}
/* Hero gutter rule (column-divider, Element 3 editorial) */
[data-design="a"] .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;
  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: .3; } }

/* Hero layout */
[data-design="a"] .mg-hero__inner {
  position: relative; z-index: 1; 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="a"] .mg-hero__inner { grid-template-columns: 1fr; }
  [data-design="a"] .mg-hero__gutter { display: none; }
}
/* Hero text — VISIBLE AT FIRST PAINT (opacity:1, never 0) */
[data-design="a"] .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: 12px; display: flex; gap: 10px; align-items: center;
}
[data-design="a"] .mg-eyebrow__no {
  font-family: var(--mg-mono); color: var(--mg-footnote); font-size: 11px;
}
[data-design="a"] .mg-hero__kicker {
  font-family: var(--mg-display); font-style: italic; font-weight: 400;
  font-size: clamp(16px,1.6vw,20px); color: var(--mg-prussian);
  margin: 0 0 8px; line-height: 1.3;
}
[data-design="a"] .mg-hero__title {
  font-family: var(--mg-display); font-weight: 700;
  font-size: clamp(36px,5.5vw,76px); line-height: 1.05; letter-spacing: -.022em;
  color: var(--mg-ink); margin: 0 0 24px;
}
[data-design="a"] .mg-hero__title em {
  font-weight: 500; font-style: italic; color: var(--mg-prussian);
}
[data-design="a"] .mg-hero__lede {
  font-family: var(--mg-body); font-size: clamp(17px,1.4vw,20px); font-weight: 400;
  color: var(--mg-ink-soft); line-height: 1.6; margin: 0 0 16px;
  max-width: 54ch;
}
[data-design="a"] .mg-fn-sup {
  font-family: var(--mg-mono); font-style: normal; font-size: 10px;
  color: var(--mg-footnote); vertical-align: super;
}
[data-design="a"] .mg-hero__proof {
  font-family: var(--mg-ui); font-size: 12px; font-weight: 500;
  color: var(--mg-ink-mute); letter-spacing: .08em; margin: 0 0 32px;
}
[data-design="a"] .mg-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
/* Marginal note */
[data-design="a"] .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;
  opacity: 0; transform: translateX(-8px);
  animation: mg-margin-drift 1200ms 1400ms var(--mg-ease-foot) forwards;
}
[data-design="a"] .mg-hero__margin-note small {
  display: block; margin-top: 16px;
  font-family: var(--mg-ui); font-style: normal; font-size: 11px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mg-ink-mute);
}
@keyframes mg-margin-drift { to { opacity: 1; transform: translateX(0); } }
@media (max-width: 880px) { [data-design="a"] .mg-hero__margin { display: none; } }

/* ============================================================
   E6 — Animated pointer (footnote-style descending rule)
   NOT a button. Visible at first paint — opacity wrapper is 1.
   ============================================================ */
[data-design="a"] .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;
  /* opacity:1 always — gate requirement */
  opacity: 1;
  min-height: 120px;            /* bbox height ≥ 8px guarantee */
}
[data-design="a"] .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="a"] .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;
  /* Note animates in via forwards fill — wrapper stays opacity:1 */
  opacity: 0;
  animation: mg-pointer-note-in 800ms 1500ms var(--mg-ease-set) forwards;
}
[data-design="a"] .mg-pointer__note sup {
  font-family: var(--mg-mono); font-style: normal; font-size: 11px;
  color: var(--mg-footnote); vertical-align: super;
}
[data-design="a"] .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; } }

/* ============================================================
   E5 — Funnel section (5-step qualifying intake)
   ============================================================ */
[data-design="a"] .mg-funnel-section {
  background: var(--mg-paper-deep);
  padding: var(--mg-chapter) clamp(20px,4vw,48px);
  border-top: 1px solid var(--mg-ink);
}
[data-design="a"] .mg-funnel-section__head {
  max-width: 760px; margin: 0 auto var(--mg-bay);
  text-align: center;
}
[data-design="a"] .mg-funnel-section__kicker {
  font-family: var(--mg-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mg-footnote);
  margin: 0 0 12px;
}
[data-design="a"] .mg-funnel-section__head h2 {
  font-family: var(--mg-display); font-weight: 700;
  font-size: clamp(28px,3.5vw,48px); line-height: 1.15;
  letter-spacing: -.018em; color: var(--mg-ink); margin: 0 0 16px;
}
[data-design="a"] .mg-funnel-section__head h2 em {
  font-weight: 500; font-style: italic; color: var(--mg-prussian);
}
[data-design="a"] .mg-funnel-section__head p {
  font-family: var(--mg-body); font-size: 17px; color: var(--mg-ink-mute);
  max-width: 50ch; margin: 0 auto; line-height: 1.6;
}
[data-design="a"] .mg-funnel {
  max-width: 760px; margin: 0 auto;
  background: var(--mg-paper); border: 1px solid var(--mg-ink); position: relative;
}
/* Progress bar */
[data-design="a"] .mg-funnel__progress {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--mg-rule);
  font-family: var(--mg-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mg-ink-mute);
  position: relative;
}
[data-design="a"] .mg-funnel__progress-bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--mg-footnote);
  width: var(--mg-fn-pct, 0%);
  transition: width var(--mg-d-turn) var(--mg-ease-turn);
}
/* Steps container */
[data-design="a"] .mg-funnel__steps {
  position: relative; padding: clamp(24px,4vw,48px); min-height: 420px; overflow: hidden;
}
[data-design="a"] .mg-funnel__step {
  position: absolute; inset: clamp(24px,4vw,48px);
  border: none; padding: 0; margin: 0;
  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="a"] .mg-funnel__step[data-active="true"] {
  opacity: 1; pointer-events: auto; transform: translateY(0) skewY(0);
  position: relative; inset: auto;
}
[data-design="a"] .mg-funnel__step legend { padding: 0; border: none; float: none; width: 100%; }
[data-design="a"] .mg-funnel__step h3 {
  font-family: var(--mg-display); font-weight: 500;
  font-size: clamp(20px,2.2vw,28px); line-height: 1.2;
  color: var(--mg-ink); margin: 0 0 8px;
}
[data-design="a"] .mg-funnel__help {
  font-family: var(--mg-body); font-size: 15px; color: var(--mg-ink-mute);
  margin: 0 0 24px; line-height: 1.5;
}
[data-design="a"] .mg-funnel__options {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px;
}
[data-design="a"] .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; cursor: pointer;
  width: 100%; min-height: 44px;
  transition: background var(--mg-d-press) var(--mg-ease-set),
              border-color var(--mg-d-press) var(--mg-ease-set);
}
[data-design="a"] .mg-funnel__opt:hover,
[data-design="a"] .mg-funnel__opt:focus-visible {
  background: var(--mg-paper-deep); border-color: var(--mg-ink);
}
[data-design="a"] .mg-funnel__opt-num {
  font-family: var(--mg-mono); font-size: 11px; color: var(--mg-footnote);
  letter-spacing: .14em; text-transform: lowercase;
}
[data-design="a"] .mg-funnel__opt-arrow {
  font-family: var(--mg-mono); font-size: 13px; color: var(--mg-prussian);
  opacity: 0; transition: opacity var(--mg-d-press) var(--mg-ease-set);
}
[data-design="a"] .mg-funnel__opt:hover .mg-funnel__opt-arrow { opacity: 1; }
[data-design="a"] .mg-funnel__actions {
  display: flex; align-items: center; gap: 20px; padding-top: 8px;
}
[data-design="a"] .mg-funnel__actions--submit { flex-wrap: wrap; }
[data-design="a"] .mg-funnel__back {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--mg-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mg-ink-mute);
  padding: 10px 0; min-height: 44px;
  transition: color var(--mg-d-press) var(--mg-ease-set);
}
[data-design="a"] .mg-funnel__back:hover { color: var(--mg-ink); }
/* Contact fields */
[data-design="a"] .mg-funnel__fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px;
}
@media (max-width: 600px) { [data-design="a"] .mg-funnel__fields { grid-template-columns: 1fr; } }
[data-design="a"] .mg-funnel__field { display: flex; flex-direction: column; gap: 6px; }
[data-design="a"] .mg-funnel__field--full { grid-column: 1 / -1; }
[data-design="a"] .mg-funnel__field label {
  font-family: var(--mg-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mg-ink-mute);
}
[data-design="a"] .mg-funnel__req { font-weight: 400; }
[data-design="a"] .mg-funnel__field input,
[data-design="a"] .mg-funnel__field textarea {
  background: transparent; color: var(--mg-ink);
  border: none; border-bottom: 1px solid var(--mg-rule);
  padding: 10px 0; font-family: var(--mg-body); font-size: 17px;
  outline: none; min-height: 44px;
  transition: border-color var(--mg-d-press) var(--mg-ease-set);
}
[data-design="a"] .mg-funnel__field input:focus,
[data-design="a"] .mg-funnel__field textarea:focus { border-color: var(--mg-footnote); }
[data-design="a"] .mg-funnel__field textarea { resize: vertical; min-height: 88px; }
/* Confirmation */
[data-design="a"] .mg-funnel__step--done {
  text-align: center;
}
[data-design="a"] .mg-funnel__colophon { padding: 16px 0; }
[data-design="a"] .mg-funnel__col-label {
  font-family: var(--mg-ui); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mg-footnote);
  margin: 0 0 16px;
}
[data-design="a"] .mg-funnel__colophon h3 {
  font-family: var(--mg-display); font-style: italic; font-weight: 500;
  font-size: clamp(22px,2.5vw,30px); color: var(--mg-ink); margin: 0 0 16px;
}
[data-design="a"] .mg-funnel__col-contact {
  margin: 16px 0; font-family: var(--mg-body); font-size: 17px;
}
[data-design="a"] .mg-funnel__col-contact a {
  color: var(--mg-prussian); text-decoration: none; font-weight: 500;
}
[data-design="a"] .mg-funnel__col-license {
  font-family: var(--mg-mono); font-size: 11px; color: var(--mg-ink-mute);
  letter-spacing: .1em; margin-top: 16px;
}
/* Trust rail */
[data-design="a"] .mg-funnel__trust {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  padding: 20px 24px; border-top: 1px solid var(--mg-rule);
  font-family: var(--mg-ui); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mg-ink-mute);
}
[data-design="a"] .mg-funnel__trust a {
  color: var(--mg-prussian); text-decoration: none;
}

/* ============================================================
   E4 — Services section: footnoted matters with spine rule
   ============================================================ */
[data-design="a"] .mg-matters {
  padding: var(--mg-chapter) clamp(20px,4vw,48px);
  border-bottom: 1px solid var(--mg-ink);
}
[data-design="a"] .mg-matters__head {
  max-width: 1480px; margin: 0 auto var(--mg-bay);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,80px); align-items: start;
}
@media (max-width: 680px) { [data-design="a"] .mg-matters__head { grid-template-columns: 1fr; } }
[data-design="a"] .mg-matters__no {
  font-family: var(--mg-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mg-ink-mute);
  margin-bottom: 12px;
}
[data-design="a"] .mg-matters__no span {
  font-family: var(--mg-mono); color: var(--mg-footnote);
}
[data-design="a"] .mg-matters__title {
  font-family: var(--mg-display); font-weight: 700;
  font-size: clamp(28px,3.5vw,48px); line-height: 1.1; letter-spacing: -.018em;
  color: var(--mg-ink); margin: 0;
}
[data-design="a"] .mg-matters__title em {
  font-style: italic; font-weight: 500; color: var(--mg-prussian);
}
[data-design="a"] .mg-matters__note {
  font-family: var(--mg-body); font-size: clamp(16px,1.3vw,19px); font-weight: 400;
  color: var(--mg-ink-soft); line-height: 1.6; max-width: 52ch;
}
/* Spine rule */
[data-design="a"] .mg-foot-list { position: relative; max-width: 1480px; margin: 0 auto; }
[data-design="a"] .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);
}
[data-design="a"] .mg-foot-list[data-in="true"] .mg-foot-list__rule { transform: scaleY(1); }
/* Foot rows */
[data-design="a"] .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="a"] .mg-foot { grid-template-columns: 56px 1fr; }
  [data-design="a"] .mg-foot__cite { grid-column: 2; text-align: left; }
  [data-design="a"] .mg-foot-list__rule { left: 28px; }
}
[data-design="a"] .mg-foot__num {
  font-family: var(--mg-mono); font-size: 14px; font-weight: 500; color: var(--mg-ink);
  display: flex; align-items: baseline; gap: 3px; padding-left: 64px;
}
[data-design="a"] .mg-foot__num sup {
  font-size: 10px; color: var(--mg-footnote); vertical-align: super;
}
[data-design="a"] .mg-foot__title {
  font-family: var(--mg-display); font-weight: 500;
  font-size: clamp(17px,1.5vw,21px); line-height: 1.3; color: var(--mg-ink); margin: 0;
}
[data-design="a"] .mg-foot__title small {
  display: block; margin-top: 6px;
  font-family: var(--mg-body); font-style: italic; font-size: 15px;
  color: var(--mg-ink-mute); font-weight: 400; line-height: 1.5;
}
[data-design="a"] .mg-foot__cite {
  font-family: var(--mg-ui); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--mg-ink-mute); text-align: right; line-height: 1.6;
}

/* Repeated CTA rail */
[data-design="a"] .mg-repeat-cta {
  padding: var(--mg-bay) clamp(20px,4vw,48px);
  border-bottom: 1px solid var(--mg-rule-faint);
  max-width: 1480px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
}
[data-design="a"] .mg-repeat-cta p {
  font-family: var(--mg-display); font-style: italic;
  font-size: clamp(17px,1.6vw,22px); color: var(--mg-ink-mute); margin: 0;
}

/* ============================================================
   Process section
   ============================================================ */
[data-design="a"] .mg-process {
  padding: var(--mg-chapter) clamp(20px,4vw,48px);
  border-bottom: 1px solid var(--mg-ink);
}
[data-design="a"] .mg-process__head {
  max-width: 1480px; margin: 0 auto var(--mg-bay);
}
[data-design="a"] .mg-process__head h2 {
  font-family: var(--mg-display); font-weight: 700;
  font-size: clamp(28px,3.5vw,48px); line-height: 1.1; letter-spacing: -.018em;
  color: var(--mg-ink); margin: 12px 0 0;
}
[data-design="a"] .mg-process__head h2 em {
  font-style: italic; font-weight: 500; color: var(--mg-prussian);
}
[data-design="a"] .mg-process__steps {
  max-width: 1480px; margin: 0 auto; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 0;
}
[data-design="a"] .mg-process__step {
  display: grid; grid-template-columns: 80px 1fr; gap: 24px;
  padding: 28px 0; border-bottom: 1px solid var(--mg-rule-faint); align-items: baseline;
}
[data-design="a"] .mg-process__num {
  font-family: var(--mg-mono); font-size: 13px; font-weight: 500;
  color: var(--mg-footnote); letter-spacing: .12em; padding-left: 50px;
}
[data-design="a"] .mg-process__step strong {
  font-family: var(--mg-display); font-weight: 500; font-size: 19px;
  color: var(--mg-ink); display: block; margin-bottom: 6px;
}
[data-design="a"] .mg-process__step p {
  font-family: var(--mg-body); font-size: 16px; color: var(--mg-ink-soft);
  line-height: 1.6; margin: 0; max-width: 60ch;
}
@media (max-width: 600px) {
  [data-design="a"] .mg-process__step { grid-template-columns: 48px 1fr; }
  [data-design="a"] .mg-process__num { padding-left: 0; }
}

/* ============================================================
   About section
   ============================================================ */
[data-design="a"] .mg-about {
  padding: var(--mg-chapter) clamp(20px,4vw,48px);
  border-bottom: 1px solid var(--mg-ink);
}
[data-design="a"] .mg-about h2 {
  font-family: var(--mg-display); font-weight: 700;
  font-size: clamp(28px,3.5vw,48px); line-height: 1.1; letter-spacing: -.018em;
  color: var(--mg-ink); margin: 12px 0 var(--mg-gutter);
}
[data-design="a"] .mg-about h2 em {
  font-style: italic; font-weight: 500; color: var(--mg-prussian);
}
[data-design="a"] .mg-about__body {
  max-width: 62ch;
}
[data-design="a"] .mg-about__body p {
  font-family: var(--mg-body); font-size: clamp(17px,1.4vw,20px);
  color: var(--mg-ink-soft); line-height: 1.65; margin: 0 0 20px;
}
[data-design="a"] .mg-about__creds {
  font-family: var(--mg-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mg-ink-mute);
}

/* ============================================================
   Footer / Colophon
   ============================================================ */
[data-design="a"] .mg-colophon {
  background: var(--mg-ink); color: var(--mg-paper);
  padding: var(--mg-chapter) clamp(20px,4vw,48px) var(--mg-bay);
}
[data-design="a"] .mg-colophon__inner {
  max-width: 1480px; margin: 0 auto var(--mg-bay);
  display: grid; grid-template-columns: repeat(4,1fr); gap: 48px;
  align-items: start;
}
@media (max-width: 900px) { [data-design="a"] .mg-colophon__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { [data-design="a"] .mg-colophon__inner { grid-template-columns: 1fr; } }
[data-design="a"] .mg-colophon__name {
  display: block; font-family: var(--mg-display); font-style: italic; font-weight: 500;
  font-size: 22px; color: var(--mg-paper); margin-bottom: 6px;
}
[data-design="a"] .mg-colophon__sub {
  display: block; font-family: var(--mg-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(250,250,246,.5);
}
[data-design="a"] .mg-colophon__contact,
[data-design="a"] .mg-colophon__legal {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--mg-ui); font-size: 13px; font-weight: 500; color: rgba(250,250,246,.7);
}
[data-design="a"] .mg-colophon__contact a {
  color: var(--mg-paper); text-decoration: none;
  transition: color var(--mg-d-press) var(--mg-ease-set);
}
[data-design="a"] .mg-colophon__contact a:hover { color: var(--mg-gilt); }
[data-design="a"] .mg-colophon .mg-cta {
  background: transparent; border-color: var(--mg-paper); color: var(--mg-paper);
}
[data-design="a"] .mg-colophon .mg-cta:hover { background: var(--mg-paper); color: var(--mg-ink); }
[data-design="a"] .mg-colophon__foot {
  max-width: 1480px; margin: 0 auto;
  border-top: 1px solid rgba(250,250,246,.15); padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-family: var(--mg-ui); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; color: rgba(250,250,246,.4);
}

/* ============================================================
   Reduced-motion fallbacks — EVERY signature interaction
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .mg-header__rules::before,
  [data-design="a"] .mg-header__rules::after {
    animation: none !important; opacity: .7 !important; transform: scaleX(1) !important;
  }
  [data-design="a"] .mg-cta { animation: none !important; }
  [data-design="a"] .mg-cta__underline { transition-duration: 80ms !important; }
  [data-design="a"] .mg-hero__blueprint .bp-line,
  [data-design="a"] .mg-hero__blueprint .bp-profile,
  [data-design="a"] .mg-hero__blueprint .bp-tick,
  [data-design="a"] .mg-hero__blueprint .bp-arc,
  [data-design="a"] .mg-hero__blueprint .bp-annot,
  [data-design="a"] .mg-hero__blueprint .bp-baseline {
    animation: none !important; stroke-dashoffset: 0 !important; opacity: .4 !important;
  }
  [data-design="a"] .mg-hero__drift { animation: none !important; opacity: .5 !important; transform: none !important; }
  [data-design="a"] .mg-hero__gutter { animation: none !important; transform: scaleY(1) !important; }
  [data-design="a"] .mg-hero__margin-note { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-design="a"] .mg-pointer__note { animation: none !important; opacity: 1 !important; }
  [data-design="a"] .mg-pointer__rule { animation: none !important; transform: scaleY(1) !important; opacity: 1 !important; }
  [data-design="a"] .mg-funnel__step { transition-duration: 80ms !important; transform: none !important; }
  [data-design="a"] .mg-foot-list__rule { transition-duration: 200ms !important; }
}

/* ============================================================
   Mobile overflow guards (mandatory — appended at bottom)
   ============================================================ */
[data-design="a"].dq-design,
[data-design="a"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="a"] * {
  min-width: 0;
}
[data-design="a"] img,
[data-design="a"] svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="a"] [data-mf-role="cta"] { opacity: 1 !important; }
