/* ==========================================================================
   Design A — Law Office of Roger K. Evans, PC  ·  Salem, Oregon
   Pinpoint design system (citation-engine answer-search aesthetic),
   remapped to the design-A slot. EVERY selector scoped [data-design="a"].
   Zero pinpoint-scoped selectors. Tokens, motion, components from design.md.
   ========================================================================== */

[data-design="a"] {
  /* ---- Color (trade-rooted, ~16 tokens) ---- */
  --pp-bg:        #0c1116;
  --pp-bg-2:      #10171f;
  --pp-surface:   #161e28;
  --pp-surface-2: #1d2632;
  --pp-ink:       #e8edf4;
  --pp-ink-2:     #c5cdd9;
  --pp-muted:     #7c8696;
  --pp-faint:     #4b5566;
  --pp-hairline:  #222b38;
  --pp-hairline-2:#2d3949;
  --pp-accent:    #20c5a8;
  --pp-accent-2:  #0e8a76;
  --pp-critical:  #ff6f6f;
  --pp-success:   #58d68d;

  /* Required exposed token */
  --design-a-primary: var(--pp-accent);

  /* ---- Type ---- */
  --pp-font-sans:  "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pp-font-serif: "Tiempos Text", "Charter", "Iowan Old Style", Georgia, serif;
  --pp-font-mono:  "Berkeley Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ---- Spacing ---- */
  --pp-stitch: 4px;  --pp-pin: 8px;   --pp-cite: 12px;  --pp-line: 20px;
  --pp-block: 32px;  --pp-stanza: 56px; --pp-section: clamp(72px, 10vw, 112px); --pp-bay: clamp(96px, 14vw, 160px);

  /* ---- Motion ---- */
  --pp-d-tick: 90ms; --pp-d-stream: 240ms; --pp-d-snap: 180ms; --pp-d-draw: 520ms; --pp-d-pour: 720ms;
  --pp-ease-stream: cubic-bezier(0.16, 0.84, 0.44, 1);
  --pp-ease-snap:   cubic-bezier(0.34, 1.6, 0.5, 1);
  --pp-ease-draw:   cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Radius / elevation ---- */
  --pp-r-chip: 3px; --pp-r-card: 10px; --pp-r-pill: 999px;
  --pp-elev-1: 0 0 0 1px var(--pp-hairline);
  --pp-elev-glow: 0 0 0 1px var(--pp-accent), 0 0 24px -6px color-mix(in oklab, var(--pp-accent), transparent 60%);
}

/* ---- Root / reset within the slot ---- */
[data-design="a"].dq-design,
[data-design="a"] .dq-design { /* root article carries both classes */ }

[data-design="a"].pp-root {
  background: var(--pp-bg);
  color: var(--pp-ink);
  font-family: var(--pp-font-sans);
  -webkit-font-smoothing: antialiased;
}
[data-design="a"] *,
[data-design="a"] *::before,
[data-design="a"] *::after { box-sizing: border-box; }
[data-design="a"] :focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }

[data-design="a"] .pp-eyebrow {
  font-family: var(--pp-font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pp-muted); margin: 0 0 16px;
}

/* ==========================================================================
   ELEMENT 1 — Header
   ========================================================================== */
[data-design="a"] .pp-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--pp-bg), transparent 12%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--pp-hairline);
  overflow: hidden;
}
[data-design="a"] .pp-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 clamp(20px, 4vw, 56px);
  position: relative; z-index: 2;
}
[data-design="a"] .pp-logo {
  font-family: var(--pp-font-sans); font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 500; letter-spacing: -0.01em;
  color: var(--pp-ink); text-decoration: none; white-space: nowrap;
}
[data-design="a"] .pp-logo__mark::after {
  content: "·"; margin-left: 8px; color: var(--pp-accent);
  animation: pp-cursor-pulse 1.6s steps(2, end) infinite;
}
[data-design="a"] .pp-burger {
  width: 44px; height: 44px; border: 1px solid var(--pp-hairline);
  border-radius: var(--pp-r-chip); background: transparent;
  display: grid; place-items: center; gap: 4px; cursor: pointer; flex: 0 0 auto;
  transition: border-color var(--pp-d-tick) var(--pp-ease-snap);
}
[data-design="a"] .pp-burger:hover,
[data-design="a"] .pp-burger:focus-visible { border-color: var(--pp-accent); outline: none; }
[data-design="a"] .pp-burger__line { display: block; width: 16px; height: 1px; background: var(--pp-ink); }

[data-design="a"] .pp-header__stream {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  display: flex; gap: 56px; white-space: nowrap;
  animation: pp-stream-drift 28s linear infinite;
  opacity: 0.42; pointer-events: none;
  font-family: var(--pp-font-mono); font-size: 11px; color: var(--pp-faint);
}
[data-design="a"] .pp-cite-ghost {
  flex: 0 0 auto; padding: 2px 8px;
  border: 1px solid var(--pp-hairline); border-radius: var(--pp-r-chip);
}
@keyframes pp-stream-drift { from { transform: translateX(8%); } to { transform: translateX(-92%); } }
@keyframes pp-cursor-pulse { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.15; } }

/* ---- Drawer ---- */
[data-design="a"] .pp-drawer {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in oklab, var(--pp-bg), transparent 12%);
  backdrop-filter: blur(8px);
  display: grid; grid-template-columns: 1fr min(420px, 88vw);
}
[data-design="a"] .pp-drawer[hidden] { display: none; }
[data-design="a"] .pp-drawer__panel {
  grid-column: 2; background: var(--pp-surface);
  border-left: 1px solid var(--pp-hairline); padding: 24px;
  display: flex; flex-direction: column;
  transform: translateX(8%); opacity: 0;
  animation: pp-drawer-in var(--pp-d-stream) var(--pp-ease-stream) forwards;
}
@keyframes pp-drawer-in { to { transform: translateX(0); opacity: 1; } }
[data-design="a"] .pp-drawer__close {
  align-self: flex-end; min-height: 44px; padding: 4px 8px;
  font-family: var(--pp-font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pp-muted); background: transparent; border: none; cursor: pointer;
}
[data-design="a"] .pp-drawer__nav { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
[data-design="a"] .pp-drawer__nav a {
  display: grid; grid-template-columns: 32px 1fr 16px; align-items: center;
  min-height: 44px; padding: 14px 0; border-top: 1px solid var(--pp-hairline);
  font-family: var(--pp-font-serif); font-size: 18px;
  color: var(--pp-ink); text-decoration: none;
  transition: color var(--pp-d-tick) var(--pp-ease-snap);
}
[data-design="a"] .pp-drawer__nav a::before {
  content: attr(data-index); font-family: var(--pp-font-mono);
  font-size: 11px; color: var(--pp-muted); letter-spacing: 0.08em;
}
[data-design="a"] .pp-drawer__nav a::after { content: "→"; color: var(--pp-faint); }
[data-design="a"] .pp-drawer__nav a:hover,
[data-design="a"] .pp-drawer__nav a:focus-visible { color: var(--pp-accent); }
[data-design="a"] .pp-drawer__nav a:hover::after { color: var(--pp-accent); }
[data-design="a"] .pp-drawer__meta {
  margin: 20px 0 0; font-family: var(--pp-font-mono); font-size: 12px;
  color: var(--pp-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
[data-design="a"] .pp-drawer__meta a { color: var(--pp-ink-2); text-decoration: none; }
[data-design="a"] .pp-drawer__meta a:hover { color: var(--pp-accent); }

/* ---- ELEMENT 2 — Animated CTA (inside drawer + funnel) ---- */
[data-design="a"] .pp-cta {
  position: relative; display: inline-flex; align-items: baseline; gap: 6px;
  margin-top: 20px; padding: 16px 28px 16px 24px; min-height: 44px;
  background: var(--pp-accent); color: var(--pp-bg);
  border-radius: var(--pp-r-card);
  font-family: var(--pp-font-sans); font-size: 16px; font-weight: 500;
  letter-spacing: -0.005em; text-decoration: none;
  box-shadow: var(--pp-elev-glow);
  transition: transform var(--pp-d-tick) var(--pp-ease-snap),
              background var(--pp-d-tick) var(--pp-ease-snap);
  overflow: hidden;
}
[data-design="a"] .pp-cta:hover { background: color-mix(in oklab, var(--pp-accent), white 8%); }
[data-design="a"] .pp-cta:active { transform: translateY(1px); background: var(--pp-accent-2); }
[data-design="a"] .pp-cta:focus-visible { outline: 2px solid var(--pp-ink); outline-offset: 3px; }
[data-design="a"] .pp-cta__cite {
  font-family: var(--pp-font-mono); font-size: 11px;
  align-self: flex-start; margin-top: 2px;
  animation: pp-cite-breath 4.2s var(--pp-ease-stream) infinite;
}
[data-design="a"] .pp-cta__rule {
  position: absolute; left: 24px; right: 24px; bottom: 10px; height: 1px;
  background: var(--pp-bg); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--pp-d-stream) var(--pp-ease-stream);
}
[data-design="a"] .pp-cta:hover .pp-cta__rule { transform: scaleX(1); }
@keyframes pp-cite-breath {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40%      { opacity: 1;    transform: translateY(-1px); }
  70%      { opacity: 0.45; transform: translateY(0); }
}

/* ==========================================================================
   HERO — hero.md v0.2.1 themed-movement. ONE animated backdrop layer with
   sustained, PERCEPTIBLE ambient motion. 3 text elements, opacity:1 first
   paint. No CTA, no imagery, no directional primitive.
   ========================================================================== */
[data-design="a"] .pp-hero {
  position: relative; overflow: hidden;
  min-height: clamp(540px, 72vh, 760px);
  display: flex; align-items: center;
  padding: var(--pp-bay) clamp(20px, 4vw, 56px) var(--pp-section);
}
[data-design="a"] .pp-hero__substrate { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Static base wash (allowed — non-moving tint beneath the one moving layer) */
[data-design="a"] .pp-hero__substrate::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 18% 8%, color-mix(in oklab, var(--pp-accent), transparent 90%), transparent 55%),
    linear-gradient(180deg, var(--pp-bg-2), var(--pp-bg));
}

/* Drifting type-specimen glyph field — perceptible, continuous ambient motion */
[data-design="a"] .pp-hero__field { position: absolute; inset: 0; }
[data-design="a"] .pp-glyph {
  position: absolute; font-family: var(--pp-font-serif);
  color: var(--pp-hairline-2); opacity: 0; line-height: 1;
  font-size: clamp(160px, 30vw, 360px); user-select: none;
  will-change: transform, opacity;
}
[data-design="a"] .pp-glyph--a { top: -6%;  left: 4%;   animation: pp-glyph-arrive 1.7s var(--pp-ease-stream) 0.1s forwards, pp-glyph-drift-a 17s ease-in-out 1.8s infinite; }
[data-design="a"] .pp-glyph--b { bottom: -12%; right: 6%; font-size: clamp(120px, 22vw, 280px); animation: pp-glyph-arrive 1.7s var(--pp-ease-stream) 0.35s forwards, pp-glyph-drift-b 21s ease-in-out 2s infinite; }
[data-design="a"] .pp-glyph--c { top: 30%;  right: 26%; font-size: clamp(90px, 16vw, 200px); animation: pp-glyph-arrive 1.7s var(--pp-ease-stream) 0.6s forwards, pp-glyph-drift-c 19s ease-in-out 2.2s infinite; }
[data-design="a"] .pp-glyph--d { bottom: 8%; left: 24%; font-size: clamp(80px, 14vw, 170px); animation: pp-glyph-arrive 1.7s var(--pp-ease-stream) 0.85s forwards, pp-glyph-drift-d 23s ease-in-out 2.4s infinite; }

@keyframes pp-glyph-arrive { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 0.5; transform: translateY(0) scale(1); } }
/* Sustained drift — each glyph keeps moving on a long, slow, on-brand cycle */
@keyframes pp-glyph-drift-a { 0%,100% { transform: translate(0,0) rotate(0deg); opacity: 0.42; } 50% { transform: translate(26px,18px) rotate(2deg); opacity: 0.6; } }
@keyframes pp-glyph-drift-b { 0%,100% { transform: translate(0,0) rotate(0deg); opacity: 0.34; } 50% { transform: translate(-30px,-16px) rotate(-2deg); opacity: 0.52; } }
@keyframes pp-glyph-drift-c { 0%,100% { transform: translate(0,0); opacity: 0.3; } 50% { transform: translate(-18px,22px); opacity: 0.48; } }
@keyframes pp-glyph-drift-d { 0%,100% { transform: translate(0,0); opacity: 0.28; } 50% { transform: translate(20px,-14px); opacity: 0.46; } }

/* Breathing hairline rules — second facet of the SAME single moving layer */
[data-design="a"] .pp-hero__rules { position: absolute; inset: 0; }
[data-design="a"] .pp-hero__rule {
  position: absolute; left: clamp(20px,4vw,56px); right: clamp(20px,4vw,56px);
  height: 1px; background: linear-gradient(90deg, transparent, var(--pp-hairline-2) 12%, var(--pp-hairline-2) 88%, transparent);
  transform-origin: left center; transform: scaleX(0);
}
[data-design="a"] .pp-hero__rule--1 { top: 30%; animation: pp-rule-draw var(--pp-d-draw) var(--pp-ease-draw) 0.5s forwards, pp-rule-breathe 6s ease-in-out 1.4s infinite; }
[data-design="a"] .pp-hero__rule--2 { top: 50%; animation: pp-rule-draw var(--pp-d-draw) var(--pp-ease-draw) 0.8s forwards, pp-rule-breathe 6s ease-in-out 1.9s infinite; }
[data-design="a"] .pp-hero__rule--3 { top: 70%; animation: pp-rule-draw var(--pp-d-draw) var(--pp-ease-draw) 1.1s forwards, pp-rule-breathe 6s ease-in-out 2.4s infinite; }
@keyframes pp-rule-draw { to { transform: scaleX(1); } }
@keyframes pp-rule-breathe { 0%,100% { opacity: 0.25; } 50% { opacity: 0.7; } }

[data-design="a"] .pp-hero__inner { position: relative; z-index: 1; max-width: 980px; }
[data-design="a"] .pp-hero__title {
  font-family: var(--pp-font-sans);
  font-size: clamp(34px, 6vw, 68px); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.04;
  color: var(--pp-ink); margin: 0 0 24px; opacity: 1;
}
[data-design="a"] .pp-hero__subtitle {
  font-family: var(--pp-font-serif); font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.5; color: var(--pp-ink-2); margin: 0 0 18px;
  max-width: 60ch; opacity: 1;
}
[data-design="a"] .pp-hero__proof {
  font-family: var(--pp-font-mono); font-size: clamp(12px, 1.5vw, 13px);
  letter-spacing: 0.02em; color: var(--pp-muted); margin: 0; opacity: 1;
}

/* ==========================================================================
   ELEMENT 6 — Pointer (wayfinding only). Always visibly rendered.
   ========================================================================== */
[data-design="a"] .pp-pointer {
  display: flex; justify-content: center;
  padding: clamp(36px, 7vw, 72px) 16px clamp(48px, 9vw, 88px);
  pointer-events: auto; opacity: 1;
}
[data-design="a"] .pp-pointer__hit {
  display: inline-flex; flex-direction: column; align-items: center; gap: 14px;
  text-decoration: none; color: var(--pp-muted);
  opacity: 0.85; transition: opacity 320ms ease, color 320ms ease;
}
[data-design="a"] .pp-pointer__hit:hover { opacity: 1; color: var(--pp-accent); }
[data-design="a"] .pp-pointer__rule {
  display: block; width: 1px; height: 48px; background: currentColor;
  transform-origin: top center; animation: pp-pointer-draw 5s ease-in-out infinite;
}
[data-design="a"] .pp-pointer__label {
  font-family: var(--pp-font-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8;
}
[data-design="a"] .pp-pointer__chevron { display: block; color: currentColor; animation: pp-pointer-breath 5s ease-in-out infinite; }
@keyframes pp-pointer-draw { 0%,100% { transform: scaleY(0.6); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 0.9; } }
@keyframes pp-pointer-breath { 0%,100% { transform: translateY(-2px); opacity: 0.6; } 50% { transform: translateY(4px); opacity: 1; } }

/* ==========================================================================
   ELEMENT 5 — Funnel
   ========================================================================== */
[data-design="a"] .pp-funnel-wrap {
  padding: var(--pp-section) clamp(20px, 4vw, 56px);
  background: var(--pp-bg-2); border-top: 1px solid var(--pp-hairline);
}
[data-design="a"] .pp-funnel-head { max-width: 720px; margin-bottom: var(--pp-block); }
[data-design="a"] .pp-funnel-title {
  font-family: var(--pp-font-sans); font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 500; letter-spacing: -0.02em; color: var(--pp-ink); margin: 0;
}
[data-design="a"] .pp-funnel-lede {
  font-family: var(--pp-font-serif); font-size: 17px; line-height: 1.55;
  color: var(--pp-ink-2); margin: 16px 0 0; max-width: 60ch;
}
[data-design="a"] .pp-funnel {
  position: relative; max-width: 640px; margin-top: var(--pp-block);
  background: var(--pp-surface); border: 1px solid var(--pp-hairline);
  border-radius: var(--pp-r-card); padding: clamp(20px, 4vw, 32px);
}
[data-design="a"] .pp-funnel__rail {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 12px; margin-bottom: 24px;
  font-family: var(--pp-font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-muted);
}
[data-design="a"] .pp-funnel__pos { color: var(--pp-ink); }
[data-design="a"] .pp-funnel__matter { color: var(--pp-faint); justify-self: end; text-align: right; }
[data-design="a"] .pp-funnel__bar {
  grid-column: 1 / -1; height: 1px; background: var(--pp-hairline);
  position: relative; overflow: hidden;
}
[data-design="a"] .pp-funnel__bar-fill {
  position: absolute; inset: 0 auto 0 0; background: var(--pp-accent); width: 20%;
  transition: width var(--pp-d-pour) var(--pp-ease-draw);
}
[data-design="a"] .pp-funnel__step { border: 0; padding: 0; margin: 0; display: none; min-width: 0; }
[data-design="a"] .pp-funnel__step[data-active="true"] { display: block; animation: pp-step-in var(--pp-d-pour) var(--pp-ease-stream); }
@keyframes pp-step-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
[data-design="a"] .pp-funnel__legend {
  font-family: var(--pp-font-serif); font-size: clamp(18px, 2.6vw, 22px);
  color: var(--pp-ink); margin-bottom: 20px; padding: 0; line-height: 1.3;
}
[data-design="a"] .pp-funnel__opts { display: grid; gap: 8px; }
[data-design="a"] .pp-funnel__opt {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 14px 16px; border: 1px solid var(--pp-hairline);
  border-radius: var(--pp-r-chip); cursor: pointer;
  font-family: var(--pp-font-sans); font-size: 15px; color: var(--pp-ink-2);
  transition: border-color var(--pp-d-tick) var(--pp-ease-snap),
              color var(--pp-d-tick) var(--pp-ease-snap),
              background var(--pp-d-tick) var(--pp-ease-snap);
}
[data-design="a"] .pp-funnel__opt:hover { border-color: var(--pp-accent); color: var(--pp-ink); }
[data-design="a"] .pp-funnel__opt input { accent-color: var(--pp-accent); width: 16px; height: 16px; flex: 0 0 auto; }
[data-design="a"] .pp-funnel__opt:has(input:checked) {
  border-color: var(--pp-accent); color: var(--pp-ink);
  background: color-mix(in oklab, var(--pp-accent), transparent 92%);
}
[data-design="a"] .pp-funnel__rows { display: grid; gap: 16px; }
[data-design="a"] .pp-field { display: grid; gap: 6px; min-width: 0; }
[data-design="a"] .pp-field__label {
  font-family: var(--pp-font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-muted);
}
[data-design="a"] .pp-field input {
  width: 100%; box-sizing: border-box; min-width: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--pp-hairline);
  padding: 12px 0; font-family: var(--pp-font-sans); font-size: 16px;
  color: var(--pp-ink); transition: border-color var(--pp-d-tick) var(--pp-ease-snap);
}
[data-design="a"] .pp-field input:focus { outline: none; border-bottom-color: var(--pp-accent); border-bottom-width: 2px; }
[data-design="a"] .pp-funnel__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; gap: 12px; }
[data-design="a"] .pp-btn {
  font-family: var(--pp-font-sans); font-size: 14px; font-weight: 500;
  min-height: 44px; padding: 12px 20px; border-radius: var(--pp-r-chip); cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: transform var(--pp-d-tick) var(--pp-ease-snap),
              background var(--pp-d-tick) var(--pp-ease-snap),
              border-color var(--pp-d-tick) var(--pp-ease-snap);
}
[data-design="a"] .pp-btn--primary { background: var(--pp-accent); color: var(--pp-bg); }
[data-design="a"] .pp-btn--primary:hover { background: color-mix(in oklab, var(--pp-accent), white 8%); }
[data-design="a"] .pp-btn--primary:active { transform: translateY(1px); background: var(--pp-accent-2); }
[data-design="a"] .pp-btn--primary:disabled,
[data-design="a"] .pp-btn--primary[disabled] { background: var(--pp-hairline); color: var(--pp-faint); cursor: not-allowed; }
[data-design="a"] .pp-btn--ghost { background: transparent; color: var(--pp-ink-2); border-color: var(--pp-hairline); }
[data-design="a"] .pp-btn--ghost:hover { border-color: var(--pp-accent); color: var(--pp-ink); }
[data-design="a"] .pp-btn[hidden] { display: none; }
[data-design="a"] .pp-funnel__filed {
  margin-top: 24px; padding: 20px;
  background: var(--pp-bg-2); border: 1px solid var(--pp-accent);
  border-radius: var(--pp-r-chip); animation: pp-filed-in var(--pp-d-pour) var(--pp-ease-stream);
}
[data-design="a"] .pp-funnel__filed[hidden] { display: none; }
[data-design="a"] .pp-funnel__cite {
  font-family: var(--pp-font-mono); font-size: 13px; color: var(--pp-ink);
  margin: 8px 0 0; line-height: 1.5;
}
[data-design="a"] .pp-funnel__followup {
  font-family: var(--pp-font-serif); font-size: 15px; color: var(--pp-ink-2);
  margin: 12px 0 0; line-height: 1.55;
}
[data-design="a"] .pp-funnel__followup a { color: var(--pp-accent); text-decoration: none; }
@keyframes pp-filed-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
[data-design="a"] .pp-funnel__disclaimer {
  margin: 24px 0 0; font-family: var(--pp-font-sans); font-size: 12px;
  line-height: 1.55; color: var(--pp-muted); max-width: 60ch;
}

/* ==========================================================================
   Practice areas — folio (Element 4 connecting-hairline ambient)
   ========================================================================== */
[data-design="a"] .pp-folio-wrap {
  padding: var(--pp-section) clamp(20px, 4vw, 56px);
  border-top: 1px solid var(--pp-hairline); max-width: 1120px; margin: 0 auto;
}
[data-design="a"] .pp-folio-head { margin-bottom: var(--pp-block); }
[data-design="a"] .pp-folio-title {
  font-family: var(--pp-font-sans); font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 500; letter-spacing: -0.02em; color: var(--pp-ink); margin: 0;
}
[data-design="a"] .pp-folio { list-style: none; margin: 0; padding: 0; }
[data-design="a"] .pp-folio-row { border-top: 1px solid var(--pp-hairline); }
[data-design="a"] .pp-folio-row:last-child { border-bottom: 1px solid var(--pp-hairline); }
[data-design="a"] .pp-folio-row__head {
  width: 100%; background: transparent; border: 0; cursor: pointer;
  display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center;
  gap: 16px; padding: 24px 4px; text-align: left;
  font-family: var(--pp-font-serif); font-size: clamp(18px, 2.6vw, 22px); color: var(--pp-ink);
}
[data-design="a"] .pp-folio-row__index { font-family: var(--pp-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--pp-muted); }
[data-design="a"] .pp-folio-row__title { display: block; min-width: 0; }
[data-design="a"] .pp-folio-row__rule {
  display: block; height: 1px; background: var(--pp-hairline);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--pp-d-draw) var(--pp-ease-draw), background var(--pp-d-draw) var(--pp-ease-draw);
  min-width: 40px; width: 100%;
}
[data-design="a"] .pp-folio-row[data-open="true"] .pp-folio-row__rule { transform: scaleX(1); background: var(--pp-accent); }
[data-design="a"] .pp-folio-row__body {
  font-family: var(--pp-font-serif); font-size: 17px; line-height: 1.55;
  color: var(--pp-ink-2); padding: 0 4px 24px 64px; max-width: 64ch;
}
[data-design="a"] .pp-folio-row__body[hidden] { display: none; }
[data-design="a"] .pp-folio.is-live .pp-folio-row__rule {
  animation: pp-ambient-pulse 14s var(--pp-ease-stream) infinite;
  animation-delay: calc(var(--row, 0) * 1.6s);
}
@keyframes pp-ambient-pulse {
  0%, 8%   { background: var(--pp-hairline); }
  12%, 18% { background: var(--pp-accent-2); }
  22%, 100%{ background: var(--pp-hairline); }
}

/* ---- Citation chip ---- */
[data-design="a"] .pp-cite {
  position: relative; display: inline-flex; align-items: center;
  margin: 0 2px; padding: 1px 6px 1px 5px;
  border: 1px solid var(--pp-hairline); border-radius: var(--pp-r-chip);
  font-family: var(--pp-font-mono); font-size: 11px; line-height: 1.4;
  color: var(--pp-muted); cursor: default; white-space: nowrap;
  transition: border-color var(--pp-d-tick) var(--pp-ease-snap), color var(--pp-d-tick) var(--pp-ease-snap);
}
[data-design="a"] .pp-cite sup { font-size: inherit; vertical-align: baseline; }
[data-design="a"] .pp-cite__src { display: none; }

/* ==========================================================================
   About — author column
   ========================================================================== */
[data-design="a"] .pp-about-wrap {
  padding: var(--pp-section) clamp(20px, 4vw, 56px);
  border-top: 1px solid var(--pp-hairline);
}
[data-design="a"] .pp-about {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: var(--pp-stanza);
}
[data-design="a"] .pp-about-title {
  font-family: var(--pp-font-sans); font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 500; letter-spacing: -0.02em; color: var(--pp-ink); margin: 0 0 var(--pp-line);
}
[data-design="a"] .pp-about__bio {
  font-family: var(--pp-font-serif); font-size: 18px; line-height: 1.6;
  color: var(--pp-ink-2); margin: 0 0 var(--pp-line); max-width: 64ch;
}
[data-design="a"] .pp-about__meta { display: grid; gap: var(--pp-block); align-content: start; }
[data-design="a"] .pp-meta-row {
  display: grid; gap: 4px; padding-top: var(--pp-cite);
  border-top: 1px solid var(--pp-hairline);
}
[data-design="a"] .pp-meta-row__k { font-family: var(--pp-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-muted); margin-bottom: 4px; }
[data-design="a"] .pp-meta-row__v { font-family: var(--pp-font-sans); font-size: 14px; line-height: 1.5; color: var(--pp-ink-2); }

/* ==========================================================================
   Jurisdictions
   ========================================================================== */
[data-design="a"] .pp-juris-wrap {
  padding: var(--pp-section) clamp(20px, 4vw, 56px);
  border-top: 1px solid var(--pp-hairline); max-width: 1120px; margin: 0 auto;
}
[data-design="a"] .pp-juris-head { margin-bottom: var(--pp-block); }
[data-design="a"] .pp-juris-title {
  font-family: var(--pp-font-sans); font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 500; letter-spacing: -0.02em; color: var(--pp-ink); margin: 0;
}
[data-design="a"] .pp-juris { list-style: none; margin: 0; padding: 0; }
[data-design="a"] .pp-juris-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 8px 16px; padding: 20px 4px; border-top: 1px solid var(--pp-hairline);
}
[data-design="a"] .pp-juris-row:last-child { border-bottom: 1px solid var(--pp-hairline); }
[data-design="a"] .pp-juris-row__place { font-family: var(--pp-font-serif); font-size: clamp(17px, 2.4vw, 20px); color: var(--pp-ink); }
[data-design="a"] .pp-juris-row__pin { font-family: var(--pp-font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--pp-muted); }

/* ==========================================================================
   Footer (imprint)
   ========================================================================== */
[data-design="a"] .pp-footer {
  padding: var(--pp-section) clamp(20px, 4vw, 56px) var(--pp-block);
  background: var(--pp-bg-2); border-top: 1px solid var(--pp-hairline);
}
[data-design="a"] .pp-footer__inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pp-block);
}
[data-design="a"] .pp-footer__id { display: grid; gap: 4px; }
[data-design="a"] .pp-footer__firm { font-family: var(--pp-font-sans); font-size: 16px; font-weight: 500; color: var(--pp-ink); }
[data-design="a"] .pp-footer__line { font-family: var(--pp-font-mono); font-size: 12px; color: var(--pp-muted); }
[data-design="a"] .pp-footer__contact { display: grid; gap: 6px; align-content: start; }
[data-design="a"] .pp-footer__contact a,
[data-design="a"] .pp-footer__contact span { font-family: var(--pp-font-mono); font-size: 12px; color: var(--pp-ink-2); text-decoration: none; }
[data-design="a"] .pp-footer__contact a:hover { color: var(--pp-accent); }
[data-design="a"] .pp-imprint {
  max-width: 1120px; margin: var(--pp-stanza) auto 0;
  padding-top: var(--pp-block); border-top: 1px solid var(--pp-hairline);
  display: grid; gap: 8px;
}
[data-design="a"] .pp-imprint__disclaimer { font-family: var(--pp-font-sans); font-size: 12px; line-height: 1.55; color: var(--pp-muted); margin: 0; max-width: 70ch; }
[data-design="a"] .pp-imprint__line { font-family: var(--pp-font-mono); font-size: 12px; color: var(--pp-muted); margin: 0; }
[data-design="a"] .pp-imprint__copy { font-family: var(--pp-font-mono); font-size: 12px; color: var(--pp-faint); margin: 8px 0 0; }

/* ==========================================================================
   Reduced-motion — pause/replace every animation; functionality intact.
   Hero stays VISIBLE (glyphs + rules at rest opacity), pointer stays visible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .pp-header__stream { animation: none; transform: translateX(-12%); }
  [data-design="a"] .pp-logo__mark::after { animation: none; opacity: 1; }
  [data-design="a"] .pp-drawer__panel { animation: none; transform: none; opacity: 1; }
  [data-design="a"] .pp-cta__cite { animation: none; opacity: 0.85; }
  [data-design="a"] .pp-cta__rule { transition: none; }
  [data-design="a"] .pp-glyph { animation: none; opacity: 0.45; }
  [data-design="a"] .pp-hero__rule { animation: none; transform: scaleX(1); opacity: 0.4; }
  [data-design="a"] .pp-pointer__rule,
  [data-design="a"] .pp-pointer__chevron { animation: none; opacity: 0.85; }
  [data-design="a"] .pp-pointer__rule { transform: scaleY(1); }
  [data-design="a"] .pp-funnel__step[data-active="true"] { animation: none; }
  [data-design="a"] .pp-funnel__filed { animation: none; }
  [data-design="a"] .pp-funnel__bar-fill { transition: none; }
  [data-design="a"] .pp-folio-row__rule { transition: none; animation-play-state: paused !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 900px) {
  [data-design="a"] .pp-about { grid-template-columns: 1.4fr 1fr; gap: clamp(48px, 6vw, 96px); }
}
@media (max-width: 560px) {
  [data-design="a"] .pp-header__bar { height: 60px; padding: 0 16px; }
  [data-design="a"] .pp-header__stream { gap: 32px; }
  [data-design="a"] .pp-hero { min-height: 70vh; }
  [data-design="a"] .pp-folio-row__head { grid-template-columns: 36px 1fr auto; }
  [data-design="a"] .pp-folio-row__rule { display: none; }
  [data-design="a"] .pp-folio-row__body { padding-left: 48px; font-size: 16px; }
  [data-design="a"] .pp-funnel__nav { flex-wrap: wrap; }
  [data-design="a"] .pp-funnel__nav .pp-btn { flex: 1 1 auto; }
}
@media (max-width: 380px) {
  [data-design="a"] .pp-logo { font-size: 15px; }
}

/* ==========================================================================
   MANDATORY mobile-clip block — keep at the very bottom of the file.
   ========================================================================== */
[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; }