/* ============================================================
   MOUNTAINSIDE PAINTING — DESIGN A (Drawdown Laboratory lineage)
   All selectors scoped under [data-design="a"]. The source design
   slice's scope was remapped wholesale to the "a" slot — ZERO
   source-scoped selectors remain.
   --design-a-primary exposed on the cascade root.
   Hero text is CSS-visible at first paint (opacity:1) — never reveal-gated.
   Every animation has a prefers-reduced-motion fallback.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================ */
/* TOKEN SYSTEM — [data-design="a"] is the cascade root          */
/* 14 trade-rooted tokens (drawdown-card / painter vocabulary)   */
/* ============================================================ */
[data-design="a"] {
  /* Orchestrator-exposed primary */
  --design-a-primary : #B83A20;

  /* Surface & ink (drawdown card stock under north light) */
  --mp-paper         : #F3F0E8;   /* card-stock substrate */
  --mp-surface       : #FFFFFF;   /* specimen cards */
  --mp-ink           : #1A1814;   /* display + body */
  --mp-ink-2         : #4A4640;   /* secondary text */
  --mp-muted         : #7A746B;   /* annotations, captions */
  --mp-border        : #D8D2C5;   /* hairline card edge */

  /* Calibrated specimen pigments — color is the proof, rotated by section */
  --mp-specimen      : #B83A20;   /* drafted oxide red — primary accent */
  --mp-specimen-2    : #2D5A78;   /* schedule blue */
  --mp-specimen-3    : #C8923A;   /* substrate ochre */
  --mp-success       : #4A6B3A;   /* chrome green */
  --mp-critical      : #8B2A18;   /* deep oxide red */

  /* Spacing — painter's working units */
  --mp-hair   : 2px;
  --mp-pin    : 4px;
  --mp-bristle: 8px;
  --mp-line   : 12px;
  --mp-stroke : 16px;
  --mp-coat   : 24px;
  --mp-roll   : 40px;
  --mp-stride : 72px;
  --mp-wall   : 96px;

  /* Motion */
  --mp-ease-settle : cubic-bezier(0.16, 0.84, 0.20, 1.00);  /* drying */
  --mp-ease-roll   : cubic-bezier(0.50, 0.00, 0.20, 1.00);  /* wet-edge */
  --mp-dur-quick   : 180ms;
  --mp-dur-base    : 360ms;
  --mp-dur-coat    : 720ms;

  /* Radius */
  --mp-r-card : 2px;
  --mp-r-chip : 1px;

  /* Fonts */
  --mp-display : 'Inter', system-ui, -apple-system, sans-serif;
  --mp-body    : 'Inter', system-ui, -apple-system, sans-serif;
  --mp-mono    : 'JetBrains Mono', ui-monospace, 'IBM Plex Mono', monospace;

  /* Fluid type scale (12 · 14 · 16 · 19 · 24 · 32 · 44 · 64 · 88) */
  --mp-type-specimen : clamp(40px, 6.5vw, 76px);
  --mp-type-display  : clamp(30px, 4.2vw, 52px);
  --mp-type-headline : clamp(21px, 2.6vw, 30px);
  --mp-type-body-lg  : clamp(18px, 1.6vw, 21px);
  --mp-type-body     : clamp(16px, 1.4vw, 18px);
  --mp-type-caption  : 14px;
  --mp-type-tag      : 12px;

  box-sizing: border-box;
  background: var(--mp-paper);
  color: var(--mp-ink);
  font-family: var(--mp-body);
  line-height: 1.55;
}
[data-design="a"] *,
[data-design="a"] *::before,
[data-design="a"] *::after { box-sizing: border-box; }

[data-design="a"].dq-design { width: 100%; }

/* Typography helpers */
[data-design="a"] .mp-type-specimen {
  font-family: var(--mp-display); font-weight: 700;
  font-size: var(--mp-type-specimen); line-height: 1.04;
  letter-spacing: -0.018em; color: var(--mp-ink); margin: 0;
}
[data-design="a"] .mp-type-display {
  font-family: var(--mp-display); font-weight: 600;
  font-size: var(--mp-type-display); line-height: 1.08;
  letter-spacing: -0.012em; color: var(--mp-ink); margin: 0;
}
[data-design="a"] .mp-type-headline {
  font-family: var(--mp-display); font-weight: 600;
  font-size: var(--mp-type-headline); line-height: 1.18;
  letter-spacing: -0.008em; color: var(--mp-ink); margin: 0;
}
[data-design="a"] .mp-type-body-lg {
  font-size: var(--mp-type-body-lg); line-height: 1.55;
  color: var(--mp-ink-2); margin: 0;
}
[data-design="a"] .mp-type-body {
  font-size: var(--mp-type-body); line-height: 1.62;
  color: var(--mp-ink-2); margin: 0; max-width: 68ch;
}
[data-design="a"] .mp-type-caption {
  font-size: var(--mp-type-caption); line-height: 1.5; color: var(--mp-muted);
}
[data-design="a"] .mp-tag {
  font-family: var(--mp-mono); font-size: var(--mp-type-tag);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mp-muted);
}
[data-design="a"] a { color: var(--mp-specimen); }

/* ============================================================ */
/* ELEMENT 1 — HEADER (logo + 1 atmospheric band + burger)       */
/* ============================================================ */
[data-design="a"] .mp-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--mp-paper);
  border-bottom: 1px solid var(--mp-ink);
}
[data-design="a"] .mp-header__rule {
  position: relative; height: 2px; width: 100%;
  background: var(--mp-border); overflow: hidden;
}
[data-design="a"] .mp-header__band {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--mp-specimen-3) 0%, var(--mp-specimen) 28%,
    var(--mp-specimen-2) 62%, var(--mp-specimen-3) 100%);
  background-size: 220% 100%;
  animation: mp-light-drift 28s linear infinite;
  opacity: 0.6;
}
@keyframes mp-light-drift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}
[data-design="a"] .mp-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mp-stroke);
  padding: var(--mp-coat) clamp(var(--mp-stroke), 4vw, var(--mp-roll));
  max-width: 1280px; margin: 0 auto;
}
[data-design="a"] .mp-logo {
  display: inline-flex; align-items: baseline; gap: var(--mp-line);
  text-decoration: none; color: var(--mp-ink); flex-wrap: wrap;
}
[data-design="a"] .mp-logo__ref {
  font-family: var(--mp-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mp-muted);
  border: 1px solid var(--mp-border); padding: 2px 6px; border-radius: 999px;
}
[data-design="a"] .mp-logo__mark {
  font-family: var(--mp-display); font-weight: 600; font-size: 19px;
  letter-spacing: -0.012em; color: var(--mp-ink);
}
[data-design="a"] .mp-burger {
  appearance: none; background: transparent; border: 1px solid var(--mp-ink);
  width: 44px; height: 44px; padding: 12px; flex: 0 0 auto;
  display: inline-flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; border-radius: var(--mp-r-card);
  transition: background var(--mp-dur-quick) var(--mp-ease-settle);
}
[data-design="a"] .mp-burger:hover { background: var(--mp-surface); }
[data-design="a"] .mp-burger__line {
  display: block; height: 1px; width: 100%; background: var(--mp-ink);
  transition: transform var(--mp-dur-base) var(--mp-ease-settle),
              opacity var(--mp-dur-base) var(--mp-ease-settle);
}
[data-design="a"] .mp-burger[aria-expanded="true"] .mp-burger__line:nth-child(1) { transform: translateY(9px) rotate(45deg); }
[data-design="a"] .mp-burger[aria-expanded="true"] .mp-burger__line:nth-child(2) { opacity: 0; }
[data-design="a"] .mp-burger[aria-expanded="true"] .mp-burger__line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Drawer — display:none when closed (hidden attr), focus-trapped */
[data-design="a"] .mp-drawer {
  position: fixed; inset: 0; z-index: 40;
  background: color-mix(in srgb, var(--mp-ink) 55%, transparent);
  display: flex; justify-content: flex-end;
  opacity: 0; transition: opacity var(--mp-dur-base) var(--mp-ease-settle);
}
[data-design="a"] .mp-drawer[hidden] { display: none; }
[data-design="a"] .mp-drawer.is-open { opacity: 1; }
[data-design="a"] .mp-drawer__panel {
  position: relative; width: min(420px, 86vw); height: 100%;
  background: var(--mp-paper); border-left: 1px solid var(--mp-ink);
  padding: var(--mp-wall) var(--mp-coat) var(--mp-coat);
  display: flex; flex-direction: column; gap: var(--mp-roll);
  transform: translateX(12px);
  transition: transform var(--mp-dur-coat) var(--mp-ease-roll);
  overflow-y: auto;
}
[data-design="a"] .mp-drawer.is-open .mp-drawer__panel { transform: translateX(0); }
[data-design="a"] .mp-drawer__close {
  position: absolute; top: var(--mp-coat); right: var(--mp-coat);
  appearance: none; background: transparent; border: 1px solid var(--mp-ink);
  width: 44px; height: 44px; border-radius: var(--mp-r-card);
  font-size: 22px; line-height: 1; color: var(--mp-ink); cursor: pointer;
}
[data-design="a"] .mp-drawer__nav { display: flex; flex-direction: column; gap: var(--mp-stroke); }
[data-design="a"] .mp-drawer__link {
  font-family: var(--mp-display); font-size: clamp(26px, 6vw, 40px);
  font-weight: 600; color: var(--mp-ink); text-decoration: none;
  border-bottom: 1px solid var(--mp-border); padding-bottom: var(--mp-line);
}
[data-design="a"] .mp-drawer__link:hover { color: var(--mp-specimen); }
[data-design="a"] .mp-drawer__foot { display: flex; flex-direction: column; gap: var(--mp-line); margin-top: auto; }
[data-design="a"] .mp-drawer__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 18px;
  background: var(--mp-ink); color: var(--mp-paper); text-decoration: none;
  font-family: var(--mp-display); font-weight: 600; font-size: 15px;
  border-radius: var(--mp-r-card);
}
[data-design="a"] .mp-drawer__phone {
  font-family: var(--mp-mono); font-size: 18px; color: var(--mp-ink);
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}

/* ============================================================ */
/* ELEMENT 2 — CTA (paint-chip button: notch + hover sheen)      */
/* ============================================================ */
[data-design="a"] .mp-cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--mp-line);
  min-height: 48px; padding: 14px 22px 14px 16px;
  background: var(--mp-paper); color: var(--mp-ink);
  border: 1px solid var(--mp-ink); border-radius: var(--mp-r-card);
  text-decoration: none; cursor: pointer; overflow: hidden;
  font-family: var(--mp-display); font-weight: 600; font-size: 15px;
  letter-spacing: 0.01em;
  animation: mp-cta-breath 5s var(--mp-ease-settle) infinite;
  transition: transform var(--mp-dur-quick) var(--mp-ease-settle);
}
[data-design="a"] .mp-cta__ref {
  font-family: var(--mp-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mp-muted);
  border-right: 1px solid var(--mp-border); padding-right: var(--mp-line);
}
[data-design="a"] .mp-cta__arrow { display: inline-flex; color: var(--mp-ink); }
[data-design="a"] .mp-cta__notch {
  position: absolute; bottom: 0; right: 0; width: 28px; height: 6px;
  background: var(--mp-specimen);
  transition: height var(--mp-dur-base) var(--mp-ease-settle);
}
[data-design="a"] .mp-cta__sheen {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-12deg); pointer-events: none; opacity: 0;
}
[data-design="a"] .mp-cta:hover { transform: translateY(-1px); }
[data-design="a"] .mp-cta:hover .mp-cta__notch { height: 9px; }
[data-design="a"] .mp-cta:hover .mp-cta__sheen { animation: mp-cta-sheen 720ms var(--mp-ease-roll) 1; opacity: 1; }
[data-design="a"] .mp-cta:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--mp-specimen), transparent 60%);
}
[data-design="a"] .mp-cta:active { transform: translateY(1px) scale(0.985); animation-play-state: paused; }
[data-design="a"] .mp-cta[disabled] { opacity: 0.6; cursor: default; }
@keyframes mp-cta-breath {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--mp-specimen), transparent 82%); }
  50%      { box-shadow: 0 0 0 4px color-mix(in oklab, var(--mp-specimen), transparent 92%); }
}
@keyframes mp-cta-sheen { from { left: -40%; } to { left: 110%; } }

/* ============================================================ */
/* HERO + ELEMENT 3 (single animated wash layer)                 */
/* Hero text opacity:1 at first paint — never reveal-gated.      */
/* ============================================================ */
[data-design="a"] .mp-hero {
  position: relative; overflow: hidden;
  background: var(--mp-paper);
  padding: clamp(var(--mp-wall), 12vw, 140px) clamp(var(--mp-stroke), 5vw, var(--mp-stride))
           clamp(var(--mp-roll), 8vw, var(--mp-wall));
}
[data-design="a"] .mp-hero__backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* The ONE animated layer: a calibrated color-wash advancing across the wall */
[data-design="a"] .mp-hero__wash {
  position: absolute; inset: -10% -10% auto -10%; height: 120%;
  background:
    radial-gradient(120% 80% at 18% 8%, color-mix(in srgb, var(--mp-specimen) 30%, transparent) 0%, transparent 52%),
    radial-gradient(120% 90% at 92% 96%, color-mix(in srgb, var(--mp-specimen-2) 26%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--mp-specimen-3) 14%, transparent), transparent 60%);
  background-repeat: no-repeat;
  background-size: 160% 160%;
  background-position: 0% 0%;
  animation: mp-hero-wash 16s var(--mp-ease-roll) infinite alternate;
  transform-origin: top left;
}
/* Static (non-animated) tint beneath the moving layer — allowed, not a second moving layer */
[data-design="a"] .mp-hero__grain {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, var(--mp-paper) 100%);
}
@keyframes mp-hero-wash {
  0%   { background-position:   0%   0%; }
  100% { background-position: 100% 100%; }
}
[data-design="a"] .mp-hero__content {
  position: relative; z-index: 1; max-width: 980px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--mp-coat);
}
[data-design="a"] .mp-hero__headline { opacity: 1; max-width: 18ch; }
[data-design="a"] .mp-hero__subtitle { opacity: 1; max-width: 52ch; }
[data-design="a"] .mp-hero__proof {
  opacity: 1; font-family: var(--mp-mono); letter-spacing: 0.06em;
  color: var(--mp-ink-2); border-left: 2px solid var(--mp-specimen); padding-left: var(--mp-line);
}
[data-design="a"] .mp-hero__cta { margin-top: var(--mp-bristle); }
[data-design="a"] .mp-hero__chip {
  border: 1px solid var(--mp-border); border-radius: 999px;
  padding: 4px 12px; background: var(--mp-surface); color: var(--mp-ink-2);
}

/* ============================================================ */
/* ELEMENT 6 — POINTER (wet-edge advance; not a button)          */
/* ============================================================ */
[data-design="a"] .mp-pointer {
  display: flex; flex-direction: column; align-items: center; gap: var(--mp-line);
  padding: clamp(var(--mp-roll), 8vw, 80px) var(--mp-stroke) clamp(var(--mp-wall), 10vw, var(--mp-wall));
  text-decoration: none; color: var(--mp-muted);
}
[data-design="a"] .mp-pointer__rule {
  position: relative; display: block; width: 2px; height: 64px;
  background: var(--mp-border); overflow: hidden; border-radius: 2px;
}
[data-design="a"] .mp-pointer__wet {
  position: absolute; left: 0; right: 0; top: -100%; height: 100%;
  background: linear-gradient(180deg, transparent, var(--mp-specimen));
  animation: mp-pointer-advance 4.8s var(--mp-ease-roll) infinite;
}
@keyframes mp-pointer-advance {
  0%   { transform: translateY(0); }
  60%  { transform: translateY(200%); }
  100% { transform: translateY(200%); }
}
[data-design="a"] .mp-pointer__label { letter-spacing: 0.2em; }

/* ============================================================ */
/* ELEMENT 5 — FUNNEL                                            */
/* ============================================================ */
[data-design="a"] .mp-funnel {
  background: var(--mp-surface);
  border-top: 1px solid var(--mp-ink); border-bottom: 1px solid var(--mp-ink);
  padding: var(--mp-wall) clamp(var(--mp-stroke), 5vw, var(--mp-stride));
}
[data-design="a"] .mp-funnel__head {
  max-width: 1080px; margin: 0 auto var(--mp-roll);
  display: flex; flex-direction: column; gap: var(--mp-line);
}
[data-design="a"] .mp-funnel__lede { color: var(--mp-ink-2); }
[data-design="a"] .mp-funnel__sheet {
  max-width: 1080px; margin: 0 auto;
  border: 1px solid var(--mp-ink); border-radius: var(--mp-r-card);
  background: var(--mp-paper); padding: clamp(var(--mp-stroke), 4vw, var(--mp-roll));
}
[data-design="a"] .mp-funnel__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--mp-bristle); padding-bottom: var(--mp-stroke);
  border-bottom: 1px solid var(--mp-border); margin-bottom: var(--mp-coat);
}
[data-design="a"] .mp-funnel__counter { color: var(--mp-ink); }
[data-design="a"] .mp-funnel__summary { color: var(--mp-specimen); }
[data-design="a"] .mp-funnel__step { display: none; border: 0; padding: 0; margin: 0; }
[data-design="a"] .mp-funnel__step.is-current {
  display: flex; flex-direction: column; gap: var(--mp-stroke);
  animation: mp-step-in var(--mp-dur-base) var(--mp-ease-settle);
}
@keyframes mp-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
[data-design="a"] .mp-funnel__step legend { padding: 0; }
[data-design="a"] .mp-funnel__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--mp-line);
}
[data-design="a"] .mp-block {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: var(--mp-pin);
  min-height: 64px; padding: var(--mp-line) var(--mp-stroke);
  background: var(--mp-surface); color: var(--mp-ink);
  border: 1px solid var(--mp-border); border-radius: var(--mp-r-card);
  transition: border-color var(--mp-dur-quick) var(--mp-ease-settle),
              transform var(--mp-dur-quick) var(--mp-ease-settle),
              background var(--mp-dur-quick) var(--mp-ease-settle);
}
[data-design="a"] .mp-block:hover { border-color: var(--mp-ink); transform: translateY(-1px); }
[data-design="a"] .mp-block:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--mp-specimen), transparent 60%); }
[data-design="a"] .mp-block.is-selected {
  background: var(--mp-ink); color: var(--mp-paper); border-color: var(--mp-ink);
}
[data-design="a"] .mp-block.is-selected .mp-block__meta { color: color-mix(in srgb, var(--mp-paper) 70%, transparent); }
[data-design="a"] .mp-block__name { font-family: var(--mp-display); font-weight: 600; font-size: 16px; }
[data-design="a"] .mp-block__meta { font-size: 13px; color: var(--mp-muted); }

/* Contact step */
[data-design="a"] .mp-funnel__fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-stroke);
}
[data-design="a"] .mp-field { display: flex; flex-direction: column; gap: var(--mp-pin); }
[data-design="a"] .mp-field--full { grid-column: 1 / -1; }
[data-design="a"] .mp-field__label {
  font-family: var(--mp-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mp-muted);
}
[data-design="a"] .mp-field__label em { font-style: normal; color: var(--mp-specimen); }
[data-design="a"] .mp-field__req,
[data-design="a"] .mp-field__note { text-transform: none; letter-spacing: 0; color: var(--mp-muted); }
[data-design="a"] .mp-field__input {
  appearance: none; border: 0; border-bottom: 1px solid var(--mp-border);
  background: transparent; padding: 10px 0; font-size: 16px;
  font-family: var(--mp-body); color: var(--mp-ink); width: 100%;
  transition: border-color var(--mp-dur-quick) var(--mp-ease-settle);
}
[data-design="a"] .mp-field__input:focus-visible { outline: none; border-bottom: 2px solid var(--mp-ink); }
[data-design="a"] .mp-field__input--area { border: 1px solid var(--mp-border); border-radius: var(--mp-r-card); padding: var(--mp-line); resize: vertical; }
[data-design="a"] .mp-funnel__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-stroke);
  margin-top: var(--mp-coat);
}
[data-design="a"] .mp-funnel__back {
  appearance: none; background: transparent; border: 1px solid var(--mp-border);
  border-radius: var(--mp-r-card); padding: 12px 16px; min-height: 44px;
  cursor: pointer; color: var(--mp-ink-2); font-family: var(--mp-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
}
[data-design="a"] .mp-funnel__submit { background: var(--mp-ink); color: var(--mp-paper); }
[data-design="a"] .mp-funnel__submit .mp-cta__ref { color: color-mix(in srgb, var(--mp-paper) 60%, transparent); border-right-color: color-mix(in srgb, var(--mp-paper) 30%, transparent); }
[data-design="a"] .mp-funnel__submit .mp-cta__arrow { color: var(--mp-paper); }
[data-design="a"] .mp-funnel__next { margin-top: var(--mp-stroke); }
[data-design="a"] .mp-funnel__next a,
[data-design="a"] .mp-funnel__phone { font-family: var(--mp-mono); color: var(--mp-specimen); }
[data-design="a"] .mp-funnel__done {
  display: flex; flex-direction: column; gap: var(--mp-line); text-align: left;
  padding: var(--mp-roll) 0;
}
[data-design="a"] .mp-funnel__done[hidden] { display: none; }
[data-design="a"] .mp-funnel__trust {
  max-width: 1080px; margin: var(--mp-roll) auto 0;
  display: flex; flex-wrap: wrap; gap: var(--mp-line) var(--mp-coat);
}

/* ============================================================ */
/* "THE WORK" — honest color-study treatment (no fake photos)    */
/* ============================================================ */
[data-design="a"] .mp-palette {
  padding: var(--mp-wall) clamp(var(--mp-stroke), 5vw, var(--mp-stride));
  max-width: 1280px; margin: 0 auto;
}
[data-design="a"] .mp-palette__head { display: flex; flex-direction: column; gap: var(--mp-line); margin-bottom: var(--mp-roll); }
[data-design="a"] .mp-palette__lede { max-width: 64ch; }
[data-design="a"] .mp-specimens {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--mp-coat);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
[data-design="a"] .mp-specimen {
  position: relative; overflow: hidden;
  background: var(--mp-surface);
  border: 1px solid var(--mp-ink); border-radius: var(--mp-r-card);
  display: flex; flex-direction: column; min-height: 280px;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--mp-dur-coat) var(--mp-ease-settle),
              transform var(--mp-dur-coat) var(--mp-ease-settle);
}
[data-design="a"] .mp-specimen.is-laid { opacity: 1; transform: translateY(0); }
[data-design="a"] .mp-specimen[data-chip="01"] { --chip: var(--mp-specimen); }
[data-design="a"] .mp-specimen[data-chip="02"] { --chip: var(--mp-specimen-2); }
[data-design="a"] .mp-specimen[data-chip="03"] { --chip: var(--mp-specimen-3); }
[data-design="a"] .mp-specimen__field {
  position: relative; flex: 1 1 auto; min-height: 180px;
  background: var(--chip, var(--mp-specimen)); overflow: hidden;
}
[data-design="a"] .mp-specimen__wipe {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,0.35) 50%, transparent 62%);
  transform: translateX(-101%);
}
[data-design="a"] .mp-specimen.is-laid .mp-specimen__wipe { animation: mp-wipe-once var(--mp-dur-coat) var(--mp-ease-roll) 1 220ms; }
@keyframes mp-wipe-once { from { transform: translateX(-101%); } to { transform: translateX(101%); } }
[data-design="a"] .mp-specimen__meta {
  padding: var(--mp-line) var(--mp-stroke);
  display: grid; gap: var(--mp-pin); border-top: 1px solid var(--mp-border);
}
[data-design="a"] .mp-specimen__readout { font-family: var(--mp-mono); color: var(--mp-ink-2); }
[data-design="a"] .mp-palette__repeat {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-coat);
  margin-top: var(--mp-roll); padding-top: var(--mp-roll); border-top: 1px solid var(--mp-border);
}

/* ============================================================ */
/* ELEMENT 4 — NORTH-LIGHT READING panel (mid-page ambient)      */
/* ============================================================ */
[data-design="a"] .mp-northlight {
  padding: var(--mp-stride) clamp(var(--mp-stroke), 5vw, var(--mp-stride));
  max-width: 1280px; margin: 0 auto;
}
[data-design="a"] .mp-northlight__inner {
  display: grid; grid-template-columns: 1.3fr 1fr;
  border: 1px solid var(--mp-ink); border-radius: var(--mp-r-card); overflow: hidden;
  min-height: 320px;
}
[data-design="a"] .mp-northlight__field {
  position: relative; background: var(--mp-specimen-2); overflow: hidden; min-height: 240px;
}
[data-design="a"] .mp-northlight__glow {
  position: absolute; inset: -20%;
  background: radial-gradient(circle at var(--nl-x, 30%) var(--nl-y, 20%),
    rgba(255,240,215,0.42) 0%, rgba(255,240,215,0.16) 22%, transparent 55%);
  animation: mp-northlight-drift 22s var(--mp-ease-roll) infinite alternate;
  mix-blend-mode: screen;
}
@keyframes mp-northlight-drift {
  0%   { --nl-x: 22%; --nl-y: 18%; opacity: 0.55; }
  50%  { --nl-x: 55%; --nl-y: 40%; opacity: 0.85; }
  100% { --nl-x: 82%; --nl-y: 64%; opacity: 0.60; }
}
[data-design="a"] .mp-northlight__meta {
  background: var(--mp-surface); border-left: 1px solid var(--mp-ink);
  padding: var(--mp-coat); display: flex; flex-direction: column; gap: var(--mp-line); justify-content: center;
}

/* ============================================================ */
/* SERVICES                                                      */
/* ============================================================ */
[data-design="a"] .mp-services {
  padding: var(--mp-wall) clamp(var(--mp-stroke), 5vw, var(--mp-stride));
  max-width: 1080px; margin: 0 auto;
}
[data-design="a"] .mp-services__head { display: flex; flex-direction: column; gap: var(--mp-line); margin-bottom: var(--mp-roll); }
[data-design="a"] .mp-services__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
[data-design="a"] .mp-services__row {
  display: grid; grid-template-columns: 88px 1fr; gap: var(--mp-stroke);
  padding: var(--mp-coat) 0; border-top: 1px solid var(--mp-border);
}
[data-design="a"] .mp-services__row:last-child { border-bottom: 1px solid var(--mp-border); }
[data-design="a"] .mp-services__no { padding-top: 4px; }
[data-design="a"] .mp-services__body { display: flex; flex-direction: column; gap: var(--mp-bristle); }

/* ============================================================ */
/* PROCESS / PREP — phase track, staggered reveal                */
/* ============================================================ */
[data-design="a"] .mp-process {
  padding: var(--mp-wall) clamp(var(--mp-stroke), 5vw, var(--mp-stride));
  max-width: 1080px; margin: 0 auto;
}
[data-design="a"] .mp-process__head { display: flex; flex-direction: column; gap: var(--mp-line); margin-bottom: var(--mp-roll); }
[data-design="a"] .mp-process__track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mp-stroke); }
[data-design="a"] .mp-phase {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--mp-stroke); align-items: start;
  padding: var(--mp-coat); background: var(--mp-surface);
  border: 1px solid var(--mp-border); border-left: 2px solid var(--mp-specimen);
  border-radius: var(--mp-r-card);
  opacity: 0; transform: translateX(-10px);
  transition: opacity var(--mp-dur-coat) var(--mp-ease-settle),
              transform var(--mp-dur-coat) var(--mp-ease-settle);
}
[data-design="a"] .mp-phase.is-laid { opacity: 1; transform: translateX(0); }
[data-design="a"] .mp-phase__num { padding-top: 4px; color: var(--mp-specimen); }

/* ============================================================ */
/* ABOUT                                                         */
/* ============================================================ */
[data-design="a"] .mp-about {
  padding: var(--mp-wall) clamp(var(--mp-stroke), 5vw, var(--mp-stride));
  max-width: 880px; margin: 0 auto;
}
[data-design="a"] .mp-about__head { margin-bottom: var(--mp-coat); display: flex; flex-direction: column; gap: var(--mp-line); }
[data-design="a"] .mp-about__body { display: flex; flex-direction: column; gap: var(--mp-stroke); }
[data-design="a"] .mp-about__tags { display: flex; flex-wrap: wrap; gap: var(--mp-line); margin-top: var(--mp-bristle); }
[data-design="a"] .mp-about__tags .mp-tag,
[data-design="a"] .mp-funnel__trust .mp-tag {
  border: 1px solid var(--mp-border); border-radius: 999px; padding: 4px 12px; background: var(--mp-surface);
}

/* ============================================================ */
/* SERVICE AREA                                                  */
/* ============================================================ */
[data-design="a"] .mp-area {
  padding: var(--mp-wall) clamp(var(--mp-stroke), 5vw, var(--mp-stride));
  max-width: 880px; margin: 0 auto;
}
[data-design="a"] .mp-area__head { margin-bottom: var(--mp-stroke); display: flex; flex-direction: column; gap: var(--mp-line); }

/* ============================================================ */
/* FOOTER                                                        */
/* ============================================================ */
[data-design="a"] .mp-footer {
  background: var(--mp-ink); color: var(--mp-paper);
  padding: var(--mp-wall) clamp(var(--mp-stroke), 5vw, var(--mp-stride)) var(--mp-roll);
}
[data-design="a"] .mp-footer__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--mp-roll);
}
[data-design="a"] .mp-footer .mp-tag { color: color-mix(in srgb, var(--mp-paper) 64%, transparent); }
[data-design="a"] .mp-footer__col { display: flex; flex-direction: column; gap: var(--mp-bristle); }
[data-design="a"] .mp-footer__name { color: var(--mp-paper); }
[data-design="a"] .mp-footer__label { margin-bottom: var(--mp-pin); }
[data-design="a"] .mp-footer__phone { font-family: var(--mp-mono); color: var(--mp-paper); text-decoration: none; font-size: 19px; }
[data-design="a"] .mp-footer__note { color: color-mix(in srgb, var(--mp-paper) 80%, transparent); }
[data-design="a"] .mp-footer__cta { background: var(--mp-paper); color: var(--mp-ink); border-color: var(--mp-paper); margin-top: var(--mp-pin); animation: none; }
[data-design="a"] .mp-footer__cta .mp-cta__ref { color: var(--mp-muted); }
[data-design="a"] .mp-footer__rule { height: 1px; background: color-mix(in srgb, var(--mp-paper) 24%, transparent); max-width: 1280px; margin: var(--mp-roll) auto var(--mp-coat); }
[data-design="a"] .mp-footer__base { max-width: 1280px; margin: 0 auto; }

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */
@media (max-width: 900px) {
  [data-design="a"] .mp-northlight__inner { grid-template-columns: 1fr; }
  [data-design="a"] .mp-northlight__meta { border-left: 0; border-top: 1px solid var(--mp-ink); }
  [data-design="a"] .mp-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  [data-design="a"] .mp-funnel__fields { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  [data-design="a"] .mp-logo__ref { display: none; }
  [data-design="a"] .mp-logo__mark { font-size: 17px; }
  [data-design="a"] .mp-services__row { grid-template-columns: 1fr; gap: var(--mp-bristle); }
  [data-design="a"] .mp-phase { grid-template-columns: 1fr; gap: var(--mp-bristle); }
  [data-design="a"] .mp-footer__inner { grid-template-columns: 1fr; gap: var(--mp-coat); }
  [data-design="a"] .mp-header__bar { padding: var(--mp-stroke); }
}

/* ============================================================ */
/* REDUCED MOTION — pause/disable all animation, nothing breaks  */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .mp-header__band,
  [data-design="a"] .mp-hero__wash,
  [data-design="a"] .mp-pointer__wet,
  [data-design="a"] .mp-northlight__glow,
  [data-design="a"] .mp-cta,
  [data-design="a"] .mp-specimen__wipe,
  [data-design="a"] .mp-funnel__step.is-current { animation: none; }
  [data-design="a"] .mp-cta__sheen { display: none; }
  [data-design="a"] .mp-burger__line,
  [data-design="a"] .mp-drawer,
  [data-design="a"] .mp-drawer__panel,
  [data-design="a"] .mp-block { transition: none; }
  [data-design="a"] .mp-specimen,
  [data-design="a"] .mp-phase { opacity: 1; transform: none; transition: none; }
  [data-design="a"] .mp-hero__wash {
    background-position: 30% 30%;
    opacity: 0.9;
  }
}

/* ============================================================ */
/* DEFENSIVE MOBILE / OVERFLOW (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; }
[data-design="a"] .mp-hero { overflow: hidden; }

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