/* ─────────────────────────────────────────────────────────────────────────
   Voussoir × Superior Design Construction — Design A
   All selectors scoped [data-design="a"] / .dq-design
   Keyframes prefixed vou-a- to prevent collision
   Tokens remapped --a-* from voussoir --design--voussoir-*
   ───────────────────────────────────────────────────────────────────────── */

/* ── Google Fonts load ── */
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600&family=Asap:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Design token scope ── */
[data-design="a"] {
  /* Ground & surface (travertine over basalt) */
  --a-ground:          #EAE3D4;
  --a-surface:         #F6F1E6;
  --a-surface-sunk:    #E1D8C6;

  /* Ink ramp */
  --a-ink:             #211C16;
  --a-primary:         var(--a-ink);
  --a-muted:           #6E6555;
  --a-faint:           #938974;

  /* Pozzolana */
  --a-concrete:        #8C8478;
  --a-joint:           #D6CCB8;
  --a-rule:            #C0B49C;

  /* Accents — sinopia + bronze only */
  --a-sinopia:         #9C3A2C;
  --a-sinopia-ink:     #FBEFE6;
  --a-bronze:          #9A7B45;

  /* Semantic */
  --a-critical:        #B23022;
  --a-success:         #5E6A47;

  /* Typography */
  --a-font-display:    "Spectral", "Petrona", Georgia, "Times New Roman", serif;
  --a-font-body:       "Asap", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --a-font-mono:       "IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --a-t-meta:  12px;
  --a-t-cap:   14px;
  --a-t-body:  17px;
  --a-t-lead:  21px;
  --a-t-h3:    26px;
  --a-t-h2:    clamp(30px, 4.5vw, 46px);
  --a-t-h1:    clamp(40px, 8vw, 84px);
  --a-lh-body: 1.6;
  --a-lh-tight: 1.08;
  --a-track-display: -0.012em;
  --a-track-kicker:  0.18em;

  /* Spacing (masonry coursing) */
  --a-mortar:   4px;
  --a-course:   8px;
  --a-lift:     16px;
  --a-coursing: 24px;
  --a-bay:      40px;
  --a-story:    64px;
  --a-bastion:  96px;
  --a-rampart:  128px;

  /* Motion */
  --a-dur-seat:   160ms;
  --a-dur-course: 420ms;
  --a-dur-strike: 600ms;
  --a-dur-rise:   900ms;
  --a-ease-seat:  cubic-bezier(0.16, 1, 0.30, 1);
  --a-ease-course:cubic-bezier(0.40, 0.00, 0.20, 1);
  --a-ease-lock:  cubic-bezier(0.22, 1, 0.36, 1);
  --a-cyc-wash:   12s;
  --a-cyc-cure:   16s;
  --a-cyc-breath: 5s;

  /* Radius */
  --a-r-struck: 0px;
  --a-r-tooled: 2px;
  --a-r-cobble: 999px;

  /* Elevation — compression only */
  --a-elev-bed:    inset 0 1px 0 0 rgba(255,255,255,0.35),
                   inset 0 0 0 1px var(--a-joint);
  --a-elev-seated: inset 0 2px 4px -1px rgba(33,28,22,0.22),
                   inset 0 0 0 1px var(--a-joint);
  --a-elev-lift:   0 22px 48px -28px rgba(33,28,22,0.55),
                   0 2px 0 0 var(--a-joint);

  /* Required alias */
  --design-a-primary: var(--a-sinopia);

  background: var(--a-ground);
  color: var(--a-ink);
  font-family: var(--a-font-body);
  font-size: var(--a-t-body);
  line-height: var(--a-lh-body);
}

/* ── Mobile overflow guard (scoped — never bare [data-design]) ── */
[data-design="a"].dq-design,
[data-design="a"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="a"].dq-design * { min-width: 0; }
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]) { max-width: 100%; height: auto; }

/* ════════════════════════════════════════════════════════════════
   E1 — HEADER
   ════════════════════════════════════════════════════════════════ */
[data-design="a"] .vou-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--a-ground) 88%, transparent);
  backdrop-filter: blur(8px) saturate(1.05);
  border-bottom: 1px solid var(--a-joint);
  overflow: clip;
}
[data-design="a"] .vou-header__bar {
  max-width: 1200px; margin-inline: auto;
  padding: var(--a-lift) clamp(16px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box;
}
[data-design="a"] .vou-logo { text-decoration: none; }
[data-design="a"] .vou-logo__mark {
  font-family: var(--a-font-display); font-weight: 600;
  font-size: clamp(16px, 2.4vw, 22px); letter-spacing: var(--a-track-display);
  color: var(--a-ink);
}

/* Course-line: lays in left-to-right on first paint, then drifts (~20s loop) */
[data-design="a"] .vou-header__course {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg,
     transparent 0%, var(--a-sinopia) 12%, var(--a-sinopia) 88%, transparent 100%);
  transform-origin: left center; transform: scaleX(0);
  /* transform only — no layout props */
  animation: vou-a-course-lay var(--a-dur-strike) var(--a-ease-course) 120ms forwards,
             vou-a-course-drift 20s ease-in-out 1.2s infinite;
}
[data-design="a"] .vou-header__hatch {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  background-image: repeating-linear-gradient(
     58deg, var(--a-ink) 0 1px, transparent 1px 7px);
  animation: vou-a-hatch-drift 31s linear infinite;
}

@keyframes vou-a-course-lay { to { transform: scaleX(1); } }
@keyframes vou-a-course-drift {
  0%,100% { opacity: 0.9; } 50% { opacity: 0.5; }
}
@keyframes vou-a-hatch-drift { to { background-position: 120px 0; } }

/* Hamburger */
[data-design="a"] .vou-burger {
  display: grid; gap: 5px; width: 44px; height: 44px; padding: 11px;
  background: transparent; border: 1px solid var(--a-joint); border-radius: var(--a-r-tooled);
  cursor: pointer; box-sizing: border-box; flex-shrink: 0;
}
[data-design="a"] .vou-burger span {
  height: 2px; background: var(--a-ink);
  transition: transform var(--a-dur-course) var(--a-ease-seat),
              opacity var(--a-dur-seat) linear;
}
[data-design="a"] .vou-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-design="a"] .vou-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-design="a"] .vou-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Lintel-sheet drawer */
[data-design="a"] .vou-drawer { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
[data-design="a"] .vou-drawer[data-open="true"] { visibility: visible; }
[data-design="a"] .vou-drawer__scrim {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--a-ink) 38%, transparent);
  opacity: 0; transition: opacity var(--a-dur-strike) var(--a-ease-course);
}
[data-design="a"] .vou-drawer[data-open="true"] .vou-drawer__scrim { opacity: 1; }
[data-design="a"] .vou-drawer__sheet {
  position: absolute; left: 0; right: 0; top: 0;
  background: var(--a-surface); box-shadow: var(--a-elev-lift);
  border-bottom: 2px solid var(--a-sinopia);
  padding: clamp(24px,6vw,64px) clamp(16px,4vw,40px) var(--a-bay);
  transform: translateY(-101%);
  transition: transform var(--a-dur-strike) var(--a-ease-lock);
}
[data-design="a"] .vou-drawer[data-open="true"] .vou-drawer__sheet { transform: translateY(0); }
[data-design="a"] .vou-drawer__x {
  position: absolute; top: 16px; right: 20px; width: 44px; height: 44px;
  font-size: 28px; line-height: 1; background: none; border: none; color: var(--a-ink); cursor: pointer;
}
[data-design="a"] .vou-drawer__nav { display: grid; gap: var(--a-coursing); margin-block: var(--a-bay); }
[data-design="a"] .vou-drawer__nav a {
  font-family: var(--a-font-display); font-size: clamp(28px,7vw,46px); color: var(--a-ink);
  text-decoration: none; display: flex; align-items: baseline; gap: var(--a-lift);
  border-bottom: 1px solid var(--a-joint); padding-bottom: var(--a-course);
}
[data-design="a"] .vou-drawer__nav a i {
  font-family: var(--a-font-mono); font-style: normal; font-size: var(--a-t-meta);
  color: var(--a-sinopia); letter-spacing: 0.1em;
}
[data-design="a"] .vou-drawer__acts { display: flex; gap: var(--a-coursing); flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════
   E3 — HERO (arch-rise backdrop)
   ════════════════════════════════════════════════════════════════ */
[data-design="a"] .vou-hero {
  position: relative; overflow: clip; isolation: isolate;
  min-height: clamp(520px, 78vh, 820px);
  display: grid; align-items: center;
  padding: var(--a-rampart) clamp(16px,5vw,64px) var(--a-bastion);
  box-sizing: border-box; background: var(--a-ground);
}
[data-design="a"] .vou-hero__bg { position: absolute; inset: 0; z-index: 0; }

/* cure-wash: visible color field at first paint, ≥0.3 opacity, ≥15% amplitude */
[data-design="a"] .vou-hero__wash {
  position: absolute; inset: 0; opacity: 0.88;
  background:
     radial-gradient(120% 90% at 72% 100%, color-mix(in oklab,var(--a-concrete) 55%, var(--a-ground)) 0%, transparent 60%),
     linear-gradient(180deg, var(--a-ground) 0%, var(--a-surface-sunk) 100%);
  animation: vou-a-cure-wash var(--a-cyc-wash) ease-in-out infinite;
}
/* Animate only filter+opacity — no layout props */
@keyframes vou-a-cure-wash {
  0%,100% { filter: brightness(1.0); }
  50%     { filter: brightness(0.83); }
}

[data-design="a"] .vou-arch {
  position: absolute; right: clamp(-40px,-2vw,0px); bottom: 0;
  width: min(56vw, 640px); max-width: 100%;
}
[data-design="a"] .vou-arch .v {
  opacity: 0; transform: translateY(10px);
  animation: vou-a-rise var(--a-dur-rise) var(--a-ease-seat) forwards;
}
[data-design="a"] .vou-arch .v:nth-child(1) { animation-delay: .15s; }
[data-design="a"] .vou-arch .v:nth-child(2) { animation-delay: .30s; }
[data-design="a"] .vou-arch .v:nth-child(3) { animation-delay: .45s; }
[data-design="a"] .vou-arch .v:nth-child(4) { animation-delay: .60s; }
[data-design="a"] .vou-arch .v:nth-child(6) { animation-delay: .60s; }
[data-design="a"] .vou-arch .v:nth-child(7) { animation-delay: .45s; }
[data-design="a"] .vou-arch .v:nth-child(8) { animation-delay: .30s; }
[data-design="a"] .vou-arch .v:nth-child(9) { animation-delay: .15s; }
[data-design="a"] .vou-arch__key {
  animation: vou-a-rise var(--a-dur-rise) var(--a-ease-lock) .95s forwards,
             vou-a-lock 1.2s var(--a-ease-lock) 1.4s forwards !important;
}
@keyframes vou-a-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes vou-a-lock {
  0%   { filter: brightness(1.5) saturate(1.2); }
  100% { filter: none; }
}
[data-design="a"] .vou-arch__centering {
  opacity: 0.8;
  animation: vou-a-strike 1s var(--a-ease-course) 1.7s forwards;
}
@keyframes vou-a-strike { to { opacity: 0; } }

/* Hero text — always opacity:1 at first paint */
[data-design="a"] .vou-hero__lockup {
  position: relative; z-index: 2; max-width: 60ch;
}
[data-design="a"] .vou-kicker {
  font-family: var(--a-font-mono); font-size: var(--a-t-meta); text-transform: uppercase;
  letter-spacing: var(--a-track-kicker); color: var(--a-sinopia); margin: 0 0 var(--a-lift);
}
[data-design="a"] .vou-hero__h {
  font-family: var(--a-font-display); font-weight: 600; font-size: var(--a-t-h1);
  line-height: var(--a-lh-tight); letter-spacing: var(--a-track-display); color: var(--a-ink);
  margin: 0; text-wrap: balance;
}
[data-design="a"] .vou-hero__sub {
  font-size: var(--a-t-lead); color: var(--a-muted); margin: var(--a-lift) 0 0; max-width: 46ch;
}
[data-design="a"] .vou-hero__proof { margin: var(--a-coursing) 0 var(--a-bay); }
[data-design="a"] .vou-stamp {
  font-family: var(--a-font-mono); font-size: var(--a-t-cap); color: var(--a-ink);
  background: color-mix(in oklab, var(--a-bronze) 14%, transparent);
  border: 1px solid var(--a-joint); border-radius: var(--a-r-cobble);
  padding: 4px 12px; display: inline-block;
}

/* ════════════════════════════════════════════════════════════════
   E2 — CTA (funnel-anchor Stone)
   ════════════════════════════════════════════════════════════════ */
[data-design="a"] .vou-stone {
  display: inline-flex; align-items: center; gap: var(--a-course);
  font-family: var(--a-font-body); font-weight: 600; font-size: var(--a-t-body);
  padding: 14px 22px; border-radius: var(--a-r-struck); text-decoration: none;
  cursor: pointer; box-sizing: border-box; min-height: 48px; border: none;
  transition: transform var(--a-dur-seat) var(--a-ease-seat),
              box-shadow var(--a-dur-seat) var(--a-ease-seat),
              background-color var(--a-dur-course) var(--a-ease-course);
}
[data-design="a"] .vou-stone--primary {
  background: var(--a-ink); color: var(--a-surface);
  box-shadow: var(--a-elev-bed), inset 0 -2px 0 0 var(--a-sinopia);
}
[data-design="a"] .vou-stone--quiet {
  background: transparent; color: var(--a-ink); box-shadow: inset 0 0 0 1px var(--a-joint);
}
/* CTA eye-draw: a course-line draws across the top edge on intent */
[data-design="a"] .vou-cta { position: relative; overflow: clip; isolation: isolate; }
[data-design="a"] .vou-cta::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--a-bronze); transform: scaleX(0); transform-origin: left;
  transition: transform var(--a-dur-course) var(--a-ease-course);
}

/* hover/focus — gated to pointer:fine devices */
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .vou-cta:hover::before,
  [data-design="a"] .vou-cta:focus-visible::before { transform: scaleX(1); }
  [data-design="a"] .vou-cta:hover { background: color-mix(in oklab, var(--a-ink) 90%, var(--a-sinopia)); }
  [data-design="a"] .vou-cta:hover .vou-cta__wedge { transform: translateX(4px); }
  [data-design="a"] .vou-stone--quiet:hover { background: color-mix(in oklab, var(--a-surface) 90%, var(--a-sinopia)); }
}
[data-design="a"] .vou-cta:active { transform: translateY(1px); box-shadow: var(--a-elev-seated); }
[data-design="a"] .vou-cta:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--a-ground), 0 0 0 4px var(--a-sinopia);
}
[data-design="a"] .vou-cta__wedge {
  display: inline-grid; place-items: center; color: var(--a-sinopia);
  transition: transform var(--a-dur-course) var(--a-ease-seat);
}
/* ambient breath: 5s settle-light (box-shadow only — no layout) */
[data-design="a"] .vou-cta {
  animation: vou-a-cta-breath var(--a-cyc-breath) var(--a-ease-course) infinite;
}
@keyframes vou-a-cta-breath {
  0%,100% { box-shadow: var(--a-elev-bed), inset 0 -2px 0 0 var(--a-sinopia); }
  50%     { box-shadow: var(--a-elev-bed), inset 0 -2px 0 0 var(--a-sinopia),
                        inset 0 1px 0 0 color-mix(in oklab, var(--a-bronze) 60%, transparent); }
}

/* ════════════════════════════════════════════════════════════════
   E6 — POINTER (between hero and funnel)
   ════════════════════════════════════════════════════════════════ */
[data-design="a"] .vou-pointer {
  display: grid; justify-items: center; gap: var(--a-course);
  padding: var(--a-bay) 0; background: var(--a-ground);
}
[data-design="a"] .vou-pointer__course { display: flex; gap: 6px; }
[data-design="a"] .vou-pointer__stone {
  width: 26px; height: 9px; background: var(--a-concrete); border: 1px solid var(--a-joint);
  /* start at opacity 0.3 not 0 — never from nothing */
  opacity: 0.3; transform: translateY(-6px);
  animation: vou-a-pt-seat var(--a-dur-course) var(--a-ease-seat) infinite alternate;
}
[data-design="a"] .vou-pointer__stone:nth-child(1) { animation-delay: 0s; }
[data-design="a"] .vou-pointer__stone:nth-child(2) { animation-delay: .5s; }
[data-design="a"] .vou-pointer__stone:nth-child(3) { animation-delay: 1s; }
@keyframes vou-a-pt-seat {
  from { opacity: 0.3; transform: translateY(-6px); }
  to   { opacity: 1;   transform: translateY(0); }
}
[data-design="a"] .vou-pointer__plumb {
  width: 2px; height: 34px;
  background: linear-gradient(var(--a-sinopia), transparent);
  animation: vou-a-pt-drop var(--a-cyc-breath) var(--a-ease-course) infinite;
}
@keyframes vou-a-pt-drop {
  0%,100% { transform: translateY(0); opacity: 0.8; }
  50%     { transform: translateY(5px); opacity: 1; }
}
[data-design="a"] .vou-pointer__label {
  font-family: var(--a-font-mono); font-size: var(--a-t-meta); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--a-muted); text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════
   E5 — FUNNEL
   ════════════════════════════════════════════════════════════════ */
[data-design="a"] .vou-funnel {
  padding: var(--a-bastion) clamp(16px,5vw,64px); background: var(--a-ground);
  box-sizing: border-box;
}
[data-design="a"] .vou-funnel__head { max-width: 760px; margin: 0 auto var(--a-bay); }
[data-design="a"] .vou-funnel__head h2 {
  font-family: var(--a-font-display); font-size: var(--a-t-h2); color: var(--a-ink);
  letter-spacing: var(--a-track-display); margin: var(--a-course) 0 0;
}
[data-design="a"] .vou-funnel__arch {
  display: block; width: 220px; max-width: 80%; height: auto; margin: 0 auto var(--a-bay);
}
[data-design="a"] .vou-funnel__arch [data-vou] {
  transition: fill var(--a-dur-course) var(--a-ease-seat);
}
[data-design="a"] .vou-funnel__arch [data-vou].is-set { fill: var(--a-concrete); }
[data-design="a"] .vou-funnel__arch [data-vou="key"].is-locked { fill: var(--a-bronze); }
[data-design="a"] .vou-funnel__form { max-width: 760px; margin: 0 auto; }
[data-design="a"] .vou-step { border: 0; padding: 0; margin: 0; }
[data-design="a"] .vou-step[hidden] { display: none; }
[data-design="a"] .vou-step legend {
  font-family: var(--a-font-display); font-size: var(--a-t-h3); color: var(--a-ink);
  margin-bottom: var(--a-coursing); padding: 0;
}
[data-design="a"] .vou-step.is-active {
  animation: vou-a-step-seat var(--a-dur-strike) var(--a-ease-seat);
}
/* from opacity:0.92 scale(0.98) — never from zero */
@keyframes vou-a-step-seat {
  from { opacity: 0.92; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1;    transform: translateY(0) scale(1); }
}
[data-design="a"] .vou-chips {
  display: grid; gap: var(--a-course);
  grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr));
}
[data-design="a"] .vou-chip {
  text-align: left; font-family: var(--a-font-body); font-size: var(--a-t-body); color: var(--a-ink);
  background: var(--a-surface); border: 1px solid var(--a-joint); border-radius: var(--a-r-struck);
  padding: 16px 18px; min-height: 52px; cursor: pointer;
  transition: transform var(--a-dur-seat) var(--a-ease-seat),
              box-shadow var(--a-dur-seat) var(--a-ease-seat),
              border-color var(--a-dur-course) var(--a-ease-course);
  box-shadow: var(--a-elev-bed);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .vou-chip:hover { border-color: var(--a-concrete); }
}
[data-design="a"] .vou-chip:active,
[data-design="a"] .vou-chip[aria-pressed="true"] {
  transform: translateY(1px); box-shadow: var(--a-elev-seated); border-color: var(--a-sinopia);
}
[data-design="a"] .vou-chip:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--a-ground), 0 0 0 4px var(--a-sinopia);
}
[data-design="a"] .vou-bed { display: grid; gap: var(--a-mortar); margin-bottom: var(--a-coursing); }
[data-design="a"] .vou-bed span { font-size: var(--a-t-cap); color: var(--a-muted); }
[data-design="a"] .vou-bed input,
[data-design="a"] .vou-bed textarea {
  font: inherit; color: var(--a-ink); background: var(--a-surface-sunk);
  border: 1px solid var(--a-joint); border-radius: var(--a-r-tooled);
  padding: 12px 14px; min-height: 48px; box-sizing: border-box; width: 100%;
}
[data-design="a"] .vou-bed textarea { min-height: 88px; resize: vertical; }
[data-design="a"] .vou-bed input:focus-visible,
[data-design="a"] .vou-bed textarea:focus-visible {
  outline: none; border-color: var(--a-sinopia);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--a-sinopia) 30%, transparent);
}
[data-design="a"] .vou-note {
  font-size: var(--a-t-cap); color: var(--a-muted); margin-top: var(--a-coursing);
  border-left: 2px solid var(--a-sinopia); padding-left: var(--a-lift);
}
[data-design="a"] .vou-funnel__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--a-coursing); margin-top: var(--a-bay);
}
[data-design="a"] .vou-funnel__count {
  font-family: var(--a-font-mono); font-size: var(--a-t-meta); color: var(--a-faint);
}
[data-design="a"] .vou-set { text-align: center; padding: var(--a-bay) 0; }
[data-design="a"] .vou-set[hidden] { display: none; }
[data-design="a"] .vou-set__mark { font-size: 40px; color: var(--a-success); margin: 0; }
[data-design="a"] .vou-set h3 {
  font-family: var(--a-font-display); font-size: var(--a-t-h3); color: var(--a-ink);
}
[data-design="a"] .vou-funnel__trust {
  max-width: 760px; margin: var(--a-bay) auto 0;
  font-size: var(--a-t-cap); color: var(--a-muted);
  border-top: 1px solid var(--a-joint); padding-top: var(--a-coursing);
  display: grid; gap: var(--a-course);
}
[data-design="a"] .vou-funnel__trust a { color: var(--a-sinopia); }

/* ════════════════════════════════════════════════════════════════
   Services / Opus index
   ════════════════════════════════════════════════════════════════ */
[data-design="a"] .vou-opus {
  padding: var(--a-bastion) clamp(16px,5vw,64px); background: var(--a-surface);
  box-sizing: border-box; border-top: 1px solid var(--a-joint);
}
[data-design="a"] .vou-opus__head { max-width: 1200px; margin: 0 auto var(--a-bay); }
[data-design="a"] .vou-opus__head h2 {
  font-family: var(--a-font-display); font-size: var(--a-t-h2); color: var(--a-ink);
  letter-spacing: var(--a-track-display); margin: var(--a-course) 0 0;
}
[data-design="a"] .vou-opus__index {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1200px;
  display: grid; gap: 0;
}
[data-design="a"] .vou-opus__course {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--a-lift);
  padding: var(--a-coursing) 0;
  border-bottom: 1px solid var(--a-joint); align-items: start;
}
[data-design="a"] .vou-opus__course i {
  font-family: var(--a-font-mono); font-style: normal; font-size: var(--a-t-meta);
  color: var(--a-sinopia); letter-spacing: 0.12em; padding-top: 4px;
}
[data-design="a"] .vou-opus__course b {
  display: block; font-family: var(--a-font-display); font-size: var(--a-t-h3);
  color: var(--a-ink); margin: 0 0 var(--a-mortar); font-weight: 600;
}
[data-design="a"] .vou-opus__course span { color: var(--a-muted); font-size: var(--a-t-body); }
[data-design="a"] .vou-opus__cta {
  max-width: 1200px; margin: var(--a-bay) auto 0; display: flex;
}

/* ════════════════════════════════════════════════════════════════
   E4 — Process track (Ambient segment B + horizontal cure)
   ════════════════════════════════════════════════════════════════ */
[data-design="a"] .vou-track {
  position: relative; overflow: clip; isolation: isolate;
  padding: var(--a-bastion) clamp(16px,5vw,64px); background: var(--a-surface);
  border-block: 1px solid var(--a-joint); box-sizing: border-box;
}
[data-design="a"] .vou-track__cure {
  position: absolute; inset: 0; z-index: 0; opacity: 0.5;
  background-image: repeating-linear-gradient(0deg, var(--a-joint) 0 1px, transparent 1px 28px),
                    repeating-linear-gradient(90deg, var(--a-joint) 0 1px, transparent 1px 64px);
  animation: vou-a-cure-tone var(--a-cyc-cure) ease-in-out infinite;
}
/* opacity only — no layout */
@keyframes vou-a-cure-tone {
  0%,100% { opacity: 0.30; filter: saturate(0.9); }
  50%     { opacity: 0.55; filter: saturate(1.1) brightness(0.96); }
}
[data-design="a"] .vou-track__head {
  position: relative; z-index: 1; max-width: 1200px; margin: 0 auto var(--a-bay);
}
[data-design="a"] .vou-track__h {
  font-family: var(--a-font-display); font-size: var(--a-t-h2); color: var(--a-ink);
  letter-spacing: var(--a-track-display); margin: var(--a-course) 0 0; text-wrap: balance;
}
[data-design="a"] .vou-track__courses {
  position: relative; z-index: 1; list-style: none; margin: 0 auto; padding: 0;
  max-width: 1200px; display: grid; gap: var(--a-course);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
/* scroll-driven lay-in: courses translate from opacity:0.92 scale(0.97) — never zero */
[data-design="a"] .vou-course-stone {
  background: var(--a-ground); box-shadow: var(--a-elev-bed); padding: var(--a-coursing);
  border-radius: var(--a-r-struck);
  opacity: 0.92; transform: translateX(-14px) scale(0.97);
  transition: opacity var(--a-dur-course) var(--a-ease-seat),
              transform var(--a-dur-course) var(--a-ease-seat);
}
[data-design="a"] .vou-track.is-laid .vou-course-stone { opacity: 1; transform: none; }
[data-design="a"] .vou-track.is-laid .vou-course-stone:nth-child(2) { transition-delay: .10s; }
[data-design="a"] .vou-track.is-laid .vou-course-stone:nth-child(3) { transition-delay: .20s; }
[data-design="a"] .vou-track.is-laid .vou-course-stone:nth-child(4) { transition-delay: .30s; }
[data-design="a"] .vou-track.is-laid .vou-course-stone:nth-child(5) { transition-delay: .40s; }
[data-design="a"] .vou-track.is-laid .vou-course-stone:nth-child(6) { transition-delay: .50s; }
[data-design="a"] .vou-course-stone i {
  font-family: var(--a-font-mono); font-style: normal; font-size: var(--a-t-meta);
  color: var(--a-sinopia); letter-spacing: 0.12em;
}
[data-design="a"] .vou-course-stone b {
  display: block; font-family: var(--a-font-display); font-size: var(--a-t-h3);
  color: var(--a-ink); margin: var(--a-mortar) 0 var(--a-course); font-weight: 600;
}
[data-design="a"] .vou-course-stone span { color: var(--a-muted); font-size: var(--a-t-cap); }

/* ════════════════════════════════════════════════════════════════
   Service area
   ════════════════════════════════════════════════════════════════ */
[data-design="a"] .vou-area {
  padding: var(--a-bastion) clamp(16px,5vw,64px); background: var(--a-ground);
  box-sizing: border-box; border-top: 1px solid var(--a-joint);
}
[data-design="a"] .vou-area__head { max-width: 800px; margin: 0 auto var(--a-bay); }
[data-design="a"] .vou-area__head h2 {
  font-family: var(--a-font-display); font-size: var(--a-t-h2); color: var(--a-ink);
  letter-spacing: var(--a-track-display); margin: var(--a-course) 0 0;
}
[data-design="a"] .vou-area__body {
  max-width: 800px; margin: 0 auto; color: var(--a-muted);
  font-size: var(--a-t-body); line-height: var(--a-lh-body);
}

/* ════════════════════════════════════════════════════════════════
   About
   ════════════════════════════════════════════════════════════════ */
[data-design="a"] .vou-about {
  padding: var(--a-bastion) clamp(16px,5vw,64px); background: var(--a-surface);
  box-sizing: border-box; border-top: 1px solid var(--a-joint);
}
[data-design="a"] .vou-about__head { max-width: 800px; margin: 0 auto var(--a-bay); }
[data-design="a"] .vou-about__head h2 {
  font-family: var(--a-font-display); font-size: var(--a-t-h2); color: var(--a-ink);
  letter-spacing: var(--a-track-display); margin: var(--a-course) 0 0;
}
[data-design="a"] .vou-about__body {
  max-width: 800px; margin: 0 auto; color: var(--a-muted);
  font-size: var(--a-t-body); line-height: var(--a-lh-body); display: grid; gap: var(--a-coursing);
}
[data-design="a"] .vou-about__trust {
  max-width: 800px; margin: var(--a-bay) auto 0;
  display: flex; gap: var(--a-coursing); flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════
   Footer
   ════════════════════════════════════════════════════════════════ */
[data-design="a"] .vou-footer {
  background: var(--a-ink); color: var(--a-surface);
  padding: var(--a-bastion) clamp(16px,5vw,64px) var(--a-bay);
  box-sizing: border-box;
}
[data-design="a"] .vou-footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: var(--a-bay);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
[data-design="a"] .vou-footer .vou-logo__mark {
  color: var(--a-surface); font-size: var(--a-t-h3);
}
[data-design="a"] .vou-footer .vou-stamp {
  background: color-mix(in oklab, var(--a-bronze) 20%, transparent);
  border-color: color-mix(in oklab, var(--a-bronze) 40%, transparent);
  color: var(--a-surface);
}
[data-design="a"] .vou-footer__lic,
[data-design="a"] .vou-footer__addr {
  font-size: var(--a-t-cap); color: var(--a-concrete); margin-top: var(--a-course);
}
[data-design="a"] .vou-footer__contact { display: grid; gap: var(--a-coursing); align-content: start; }
[data-design="a"] .vou-footer__phone {
  font-family: var(--a-font-mono); font-size: var(--a-t-h3); color: var(--a-surface);
  text-decoration: none; display: block;
}
[data-design="a"] .vou-footer .vou-stone--quiet {
  color: var(--a-surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--a-joint) 60%, transparent);
}
[data-design="a"] .vou-footer__area .vou-kicker { color: var(--a-sinopia-ink); opacity: 0.7; }
[data-design="a"] .vou-footer__area p:last-child {
  font-size: var(--a-t-cap); color: var(--a-concrete); line-height: 1.7;
}
[data-design="a"] .vou-footer__base {
  max-width: 1200px; margin: var(--a-bay) auto 0;
  border-top: 1px solid color-mix(in oklab, var(--a-joint) 30%, transparent);
  padding-top: var(--a-coursing);
  font-size: var(--a-t-cap); color: var(--a-faint); text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   SCROLL-DRIVEN PREMIUM MOTION (TRIAD-2) — Intersection-based parallax
   Uses transform only (no layout props)
   ════════════════════════════════════════════════════════════════ */
[data-design="a"] .vou-hero__bg {
  will-change: transform;
}
/* Scroll parallax triggered via JS setProperty — translateY only */

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION fallbacks
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .vou-header__course { transform: scaleX(1); animation: none; }
  [data-design="a"] .vou-header__hatch  { animation: none; }
  [data-design="a"] .vou-drawer__sheet,
  [data-design="a"] .vou-drawer__scrim  { transition: none; }
  [data-design="a"] .vou-hero__wash { animation: none; }
  [data-design="a"] .vou-arch .v { opacity: 1; transform: none; animation: none; }
  [data-design="a"] .vou-arch__centering { opacity: 0; animation: none; }
  [data-design="a"] .vou-cta { animation: none; }
  [data-design="a"] .vou-cta::before,
  [data-design="a"] .vou-cta__wedge { transition: none; }
  [data-design="a"] .vou-pointer__stone { opacity: 1; transform: none; animation: none; }
  [data-design="a"] .vou-pointer__plumb { animation: none; }
  [data-design="a"] .vou-track__cure { animation: none; }
  [data-design="a"] .vou-course-stone { opacity: 1; transform: none; transition: none; }
  [data-design="a"] .vou-step.is-active { animation: none; }
  [data-design="a"] .vou-chip,
  [data-design="a"] .vou-funnel__arch [data-vou] { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile breakpoints
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-design="a"] .vou-arch { width: 88vw; opacity: 0.5; }
  [data-design="a"] .vou-hero { min-height: 60vh; padding-top: var(--a-bastion); }
  [data-design="a"] .vou-track { padding-block: var(--a-story); }
  [data-design="a"] .vou-funnel { padding-block: var(--a-story); }
  [data-design="a"] .vou-opus { padding-block: var(--a-story); }
  [data-design="a"] .vou-area { padding-block: var(--a-story); }
  [data-design="a"] .vou-about { padding-block: var(--a-story); }
  [data-design="a"] .vou-footer { padding-block: var(--a-story); }
}
@media (max-width: 560px) {
  [data-design="a"] .vou-header__bar { padding: var(--a-course) var(--a-lift); }
  [data-design="a"] .vou-hero__sub { font-size: var(--a-t-body); }
  [data-design="a"] .vou-opus__course { grid-template-columns: 44px 1fr; }
  [data-design="a"] .vou-drawer__acts { flex-direction: column; }
}
@media (max-width: 390px) {
  [data-design="a"] .vou-logo__mark { font-size: 15px; }
}

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