[data-design="a"] {
  --paper: #F3EDDE; --paper-deep: #E8DFC9; --paper-under: #DCCFB0;
  --groundcoat: #262019;
  --ink: #2C241A; --ink-soft: #57493A; --muted: #8B7C67; --rule: #C9BBA0;
  --design-a-primary: #33523D;
  --bottle: #33523D; --madder: #A5442E;
  --critical: #8E2F1D; --success: #3F5B34;
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Newsreader", "Iowan Old Style", "Georgia", serif;
  --font-tag: "IBM Plex Mono", "Consolas", monospace;
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px;
  --lift: cubic-bezier(0.22, 0.9, 0.28, 1);
  --scrape: cubic-bezier(0.6, 0.04, 0.28, 0.99);
  --t-press: 140ms; --t-scrape: 280ms; --t-lift: 240ms;
  --maxw: 1320px;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body);
  display: block;
}

/* ===================== 1. HEADER ===================== */
[data-design="a"] .ul-header { position: sticky; top: 0; z-index: 40;
  background: var(--paper); }
[data-design="a"] .ul-header__bar { max-width: var(--maxw);
  margin-inline: auto; padding: var(--s-16) clamp(20px, 5vw, 48px);
  display: flex; align-items: center; justify-content: space-between; }
[data-design="a"] .ul-logo { font-family: var(--font-display);
  font-weight: 620; font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--ink); text-decoration: none; letter-spacing: 0.01em; }
[data-design="a"] .ul-header__strata { position: absolute; left: 0;
  right: 0; bottom: 0; height: 6px; display: grid;
  grid-template-rows: repeat(3, 1fr); pointer-events: none; }
[data-design="a"] .ul-stratum { display: block; }
[data-design="a"] .ul-stratum--1 { background: var(--paper-deep);
  animation: ul-exchange-a 24s ease-in-out infinite; }
[data-design="a"] .ul-stratum--2 { background: var(--paper-under);
  animation: ul-exchange-b 31s ease-in-out infinite; }
[data-design="a"] .ul-stratum--3 { background: var(--rule); }
@keyframes ul-exchange-a { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ul-exchange-b { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
[data-design="a"] .ul-burger { width: 44px; height: 44px;
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  display: grid; place-content: center; gap: 6px; cursor: pointer;
  transition: transform var(--t-press) ease-out; }
[data-design="a"] .ul-burger:active { transform: scale(0.94); }
[data-design="a"] .ul-burger:focus-visible { outline: 2px solid var(--bottle); outline-offset: 2px; }
[data-design="a"] .ul-burger__line { width: 18px; height: 2px;
  background: var(--ink); transition: transform 200ms var(--lift); }
[data-design="a"] .ul-burger[aria-expanded="true"] .ul-burger__line:first-child { transform: translateY(4px) rotate(45deg); }
[data-design="a"] .ul-burger[aria-expanded="true"] .ul-burger__line:last-child { transform: translateY(-4px) rotate(-45deg); }
[data-design="a"] .ul-drawer { position: fixed; inset: 0; z-index: 50;
  background: rgba(38, 32, 25, 0.55); display: grid; place-items: center; }
[data-design="a"] .ul-drawer[hidden] { display: none; }
[data-design="a"] .ul-drawer__card { background: var(--paper);
  width: min(92vw, 520px); max-height: 86vh; overflow-y: auto;
  padding: var(--s-48) var(--s-32); box-shadow: 0 6px 18px rgba(38,32,25,0.18);
  display: grid; gap: var(--s-16);
  clip-path: polygon(0 0.6%, 3% 0, 9% 0.7%, 17% 0.1%, 26% 0.8%, 38% 0.2%,
    52% 0.9%, 66% 0.1%, 79% 0.8%, 90% 0.2%, 97% 0.7%, 100% 0.1%,
    100% 100%, 0 100%);
  transform: translateY(8px); opacity: 0;
  animation: ul-tip-in 240ms var(--lift) forwards; }
@keyframes ul-tip-in { to { transform: translateY(0); opacity: 1; } }
[data-design="a"] .ul-drawer__link { font-family: var(--font-display);
  font-size: 1.7rem; color: var(--ink); text-decoration: none;
  padding: var(--s-12) var(--s-8); border-bottom: 1px solid var(--rule); }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ul-drawer__link:hover { background: var(--paper-deep); }
}
[data-design="a"] .ul-drawer__link:focus-visible { outline: 2px solid var(--bottle); outline-offset: 2px; }
[data-design="a"] .ul-drawer__foot { margin-top: var(--s-24);
  display: grid; gap: var(--s-12); }
[data-design="a"] .ul-drawer__phone { font-family: var(--font-tag);
  font-size: 1.05rem; color: var(--ink-soft); text-decoration: none;
  padding: var(--s-12) 0; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 560px) {
  [data-design="a"] .ul-drawer__card { padding: var(--s-32) var(--s-24); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .ul-stratum--1,
  [data-design="a"] .ul-stratum--2 { animation: none; }
  [data-design="a"] .ul-drawer__card { animation: none; opacity: 1; transform: none; }
}

/* ===================== 2. CTA — the exposure chip ===================== */
[data-design="a"] .ul-cta { position: relative; display: inline-flex;
  align-items: center; justify-content: center; min-height: 56px;
  padding: var(--s-16) var(--s-32); border-radius: 3px; overflow: hidden;
  font-family: var(--font-tag); font-size: 0.95rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  isolation: isolate; animation: ul-cta-breath 5.5s ease-in-out infinite; }
[data-design="a"] .ul-cta__ground { position: absolute; inset: 0;
  background: var(--bottle); z-index: -2; }
[data-design="a"] .ul-cta__face { position: absolute; inset: 0;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  z-index: -1; transition: clip-path var(--t-scrape) var(--scrape);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
@keyframes ul-cta-breath {
  0%, 100% { box-shadow: 0 2px 8px rgba(38,32,25,0.10); }
  50%      { box-shadow: 0 6px 18px rgba(38,32,25,0.20); } }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ul-cta:hover .ul-cta__face {
    clip-path: polygon(100% 4%, 100% 0, 100% 100%, 100% 96%); }
  [data-design="a"] .ul-cta:hover .ul-cta__label { color: var(--paper); }
}
[data-design="a"] .ul-cta:focus-visible { outline: 2px solid var(--bottle); outline-offset: 3px; }
[data-design="a"] .ul-cta:focus-visible .ul-cta__face {
  clip-path: polygon(100% 4%, 100% 0, 100% 100%, 100% 96%); }
[data-design="a"] .ul-cta:focus-visible .ul-cta__label { color: var(--paper); }
[data-design="a"] .ul-cta:active { transform: scale(0.985); }
[data-design="a"] .ul-cta__label { position: relative;
  transition: color var(--t-scrape) var(--scrape); }
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .ul-cta { animation: none; }
  [data-design="a"] .ul-cta__face,
  [data-design="a"] .ul-cta__label { transition: none; }
}

/* ===================== 3. HERO — strata field ===================== */
[data-design="a"] .ul-hero { position: relative; overflow: clip;
  min-height: 72vh; display: grid; align-items: center; isolation: isolate; }
[data-design="a"] .ul-strata-field { position: absolute; inset: 0;
  z-index: 0; }
[data-design="a"] .ul-layer { position: absolute; left: 0; right: 0; }
[data-design="a"] .ul-layer--5 { top: 78%; bottom: 0; background: var(--groundcoat); }
[data-design="a"] .ul-layer--4 { top: 62%; bottom: 0; background: var(--paper-under);
  clip-path: polygon(0 1.2%, 5% 0, 12% 1.6%, 22% 0.3%, 34% 1.8%, 47% 0.2%,
    59% 1.5%, 71% 0.4%, 83% 1.7%, 92% 0.5%, 100% 1.3%, 100% 100%, 0 100%); }
[data-design="a"] .ul-layer--3 { top: 44%; bottom: 0; background: var(--paper-deep);
  clip-path: polygon(0 0.4%, 8% 1.7%, 18% 0.2%, 29% 1.5%, 41% 0.3%, 55% 1.8%,
    68% 0.2%, 78% 1.6%, 88% 0.4%, 96% 1.4%, 100% 0.3%, 100% 100%, 0 100%); }
[data-design="a"] .ul-layer--2 { top: 28%; bottom: 0;
  background: color-mix(in srgb, var(--bottle) 14%, var(--paper-deep));
  clip-path: polygon(0 1.5%, 7% 0.2%, 15% 1.8%, 27% 0.3%, 40% 1.6%, 53% 0.2%,
    64% 1.7%, 76% 0.3%, 86% 1.5%, 94% 0.2%, 100% 1.6%, 100% 100%, 0 100%); }
[data-design="a"] .ul-layer--top { top: 0; bottom: 60%;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 96.5%, 93% 98.2%, 84% 96.8%, 73% 98.6%,
    61% 96.9%, 49% 98.8%, 37% 97%, 26% 98.5%, 16% 96.8%, 7% 98.4%, 0 97%);
  box-shadow: 0 8px 22px rgba(38, 32, 25, 0.16);
  animation: ul-steam-lift 11s ease-in-out infinite;
  will-change: transform; }
@keyframes ul-steam-lift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45%      { transform: translateY(-10px) rotate(-0.25deg); }
  60%      { transform: translateY(-7px) rotate(-0.15deg); } }
[data-design="a"] .ul-hero__content { position: relative; z-index: 2;
  max-width: var(--maxw); width: 100%; margin-inline: auto;
  padding: var(--s-96) clamp(20px, 5vw, 48px); }
[data-design="a"] .ul-hero__headline { font-family: var(--font-display);
  font-weight: 620; font-size: clamp(1.9rem, 6vw, 3.6rem); line-height: 1.12;
  max-width: 16ch; margin: 0 0 var(--s-24); color: var(--ink); opacity: 1; }
[data-design="a"] .ul-hero__subtitle { font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5; color: var(--ink-soft); max-width: 48ch; margin: 0 0 var(--s-16); opacity: 1; }
[data-design="a"] .ul-hero__proof { font-family: var(--font-tag);
  font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s-32); opacity: 1; }
[data-design="a"] .ul-hero__cta-row { opacity: 1; }
@media (max-width: 560px) {
  [data-design="a"] .ul-hero { min-height: 88vh; }
  [data-design="a"] .ul-layer--2 { top: 34%; } }
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .ul-layer--top { animation: none;
    transform: translateY(-5px); }
}

/* ===================== 4. PROCESS — seriation ladder ===================== */
[data-design="a"] .ul-ladder-sec { padding: var(--s-96) 0;
  background: var(--paper-deep); }
[data-design="a"] .ul-ladder-sec__inner { max-width: var(--maxw);
  margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="a"] .ul-ladder-sec__title { font-family: var(--font-display);
  font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 var(--s-48); }
[data-design="a"] .ul-ladder { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-16); max-width: 68ch; }
[data-design="a"] .ul-step { position: relative; overflow: hidden;
  background: var(--paper); padding: var(--s-24);
  border-left: 3px solid var(--bottle); }
[data-design="a"] .ul-step:nth-child(odd) { margin-left: var(--s-24); }
[data-design="a"] .ul-step__cover { position: absolute; inset: 0;
  background: var(--paper-under); z-index: 2;
  transition: clip-path 480ms var(--scrape);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
[data-design="a"] .ul-ladder.is-exposed .ul-step__cover {
  clip-path: polygon(100% 3%, 100% 0, 100% 100%, 100% 97%); }
[data-design="a"] .ul-ladder.is-exposed .ul-step:nth-child(1) .ul-step__cover { transition-delay: 0ms; }
[data-design="a"] .ul-ladder.is-exposed .ul-step:nth-child(2) .ul-step__cover { transition-delay: 140ms; }
[data-design="a"] .ul-ladder.is-exposed .ul-step:nth-child(3) .ul-step__cover { transition-delay: 280ms; }
[data-design="a"] .ul-ladder.is-exposed .ul-step:nth-child(4) .ul-step__cover { transition-delay: 420ms; }
[data-design="a"] .ul-ladder.is-exposed .ul-step:nth-child(n+6) .ul-step__cover { transition-delay: 700ms; }
[data-design="a"] .ul-step__tag { font-family: var(--font-tag);
  font-size: 0.8rem; letter-spacing: 0.08em; color: var(--muted); }
[data-design="a"] .ul-ladder.is-exposed .ul-step__tag {
  animation: ul-tag-shimmer 16s ease-in-out infinite; }
@keyframes ul-tag-shimmer { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
[data-design="a"] .ul-step__name { font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 600; margin: var(--s-8) 0; }
[data-design="a"] .ul-step__body { font-size: 1rem; line-height: 1.6;
  color: var(--ink-soft); margin: 0; }
[data-design="a"] .ul-sample { margin-top: var(--s-32); width: 72px;
  height: 48px; position: relative; background: none; border: 0;
  cursor: pointer; perspective: 400px; }
[data-design="a"] .ul-sample__front,
[data-design="a"] .ul-sample__back { position: absolute; inset: 0;
  border-radius: 3px; backface-visibility: hidden;
  transition: transform 260ms var(--lift); box-shadow: 0 2px 8px rgba(38,32,25,0.14); }
[data-design="a"] .ul-sample__front {
  background: color-mix(in srgb, var(--bottle) 22%, var(--paper-under)); }
[data-design="a"] .ul-sample__back { background: var(--paper);
  transform: rotateY(180deg); font-family: var(--font-tag); font-size: 0.7rem;
  color: var(--ink-soft); display: grid; place-content: center; }
[data-design="a"] .ul-sample.is-flipped .ul-sample__front { transform: rotateY(180deg); }
[data-design="a"] .ul-sample.is-flipped .ul-sample__back { transform: rotateY(0deg); }
[data-design="a"] .ul-sample:focus-visible { outline: 2px solid var(--bottle); outline-offset: 3px; }
@media (max-width: 560px) {
  [data-design="a"] .ul-step:nth-child(odd) { margin-left: var(--s-12); } }
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .ul-step__cover { transition: none;
    clip-path: polygon(100% 3%, 100% 0, 100% 100%, 100% 97%); }
  [data-design="a"] .ul-ladder.is-exposed .ul-step__tag { animation: none; }
  [data-design="a"] .ul-sample__front,
  [data-design="a"] .ul-sample__back { transition: none; }
}

/* ===================== 5. FUNNEL ===================== */
[data-design="a"] .ul-funnel-sec { padding: var(--s-96) 0;
  background: var(--paper); }
[data-design="a"] .ul-funnel-sec__inner { max-width: var(--maxw);
  margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="a"] .ul-funnel-sec__title { font-family: var(--font-display);
  font-weight: 620; font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 var(--s-48); }
[data-design="a"] .ul-funnel { display: grid;
  grid-template-columns: 48px 1fr; gap: var(--s-24); max-width: 760px;
  margin-inline: auto; }
[data-design="a"] .ul-rail { position: relative;
  border-left: 1px solid var(--rule); }
[data-design="a"] .ul-rail__notch { position: absolute; left: -1px;
  width: 12px; height: 1px; background: var(--rule); }
[data-design="a"] .ul-rail__notch[data-n="1"] { top: 8%; }
[data-design="a"] .ul-rail__notch[data-n="2"] { top: 28%; }
[data-design="a"] .ul-rail__notch[data-n="3"] { top: 48%; }
[data-design="a"] .ul-rail__notch[data-n="4"] { top: 68%; }
[data-design="a"] .ul-rail__notch[data-n="5"] { top: 88%; }
[data-design="a"] .ul-rail__scraper { position: absolute; left: -8px;
  top: 8%; width: 16px; height: 26px; background: var(--bottle);
  border-radius: 3px 3px 1px 1px;
  box-shadow: 0 2px 6px rgba(38,32,25,0.25);
  transition: transform 420ms var(--lift); will-change: transform; }
[data-design="a"] .ul-rail__scraper::after { content: "";
  position: absolute; left: 2px; right: 2px; bottom: -3px; height: 3px;
  background: var(--madder); border-radius: 0 0 1px 1px; }
[data-design="a"] .ul-sheets { position: relative; min-height: 340px; }
[data-design="a"] .ul-sheet { border: 1px solid var(--rule);
  background: var(--paper); padding: var(--s-32); margin: 0;
  clip-path: polygon(0 0, 100% 0, 100% 98.4%, 91% 99.5%, 80% 98.5%, 68% 99.6%,
    55% 98.6%, 43% 99.7%, 31% 98.6%, 20% 99.5%, 10% 98.5%, 0 99.4%); }
[data-design="a"] .ul-sheet[hidden] { display: none; }
[data-design="a"] .ul-sheet.is-active { position: relative; z-index: 2; }
[data-design="a"] .ul-sheet.is-peeling {
  animation: ul-sheet-peel 380ms var(--scrape) forwards; }
@keyframes ul-sheet-peel {
  0%   { clip-path: polygon(0 0, 100% 0, 100% 98.4%, 91% 99.5%, 80% 98.5%,
           68% 99.6%, 55% 98.6%, 43% 99.7%, 31% 98.6%, 20% 99.5%, 10% 98.5%, 0 99.4%);
         opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 4%, 91% 2.5%, 80% 4%, 68% 2.4%,
           55% 3.8%, 43% 2.3%, 31% 3.9%, 20% 2.6%, 10% 3.9%, 0 2.8%);
         opacity: 0; transform: translateY(-14px) rotate(-0.4deg); } }
[data-design="a"] .ul-sheet.is-arriving {
  animation: ul-sheet-arrive 300ms var(--lift); }
@keyframes ul-sheet-arrive {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); } }
[data-design="a"] .ul-sheet__q { font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 600; padding: 0; margin-bottom: var(--s-24); }
[data-design="a"] .ul-sheet__chips { display: flex; flex-wrap: wrap;
  gap: var(--s-12); }
[data-design="a"] .ul-chip { position: relative; overflow: hidden;
  min-height: 48px; padding: var(--s-12) var(--s-24); background: var(--bottle);
  border: 1px solid var(--rule); border-radius: 3px; cursor: pointer;
  font-family: var(--font-tag); font-size: 0.9rem; letter-spacing: 0.05em;
  color: var(--ink); isolation: isolate;
  transition: transform var(--t-press) ease-out; }
[data-design="a"] .ul-chip__face { position: absolute; inset: 0;
  background: var(--paper); z-index: -1;
  transition: clip-path 90ms var(--scrape);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
[data-design="a"] .ul-chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ul-chip:hover { transform: translateY(-1px); }
}
[data-design="a"] .ul-chip:focus-visible { outline: 2px solid var(--bottle);
  outline-offset: 2px; }
[data-design="a"] .ul-chip.is-scraped { color: var(--paper); }
[data-design="a"] .ul-chip.is-scraped .ul-chip__face {
  clip-path: polygon(100% 5%, 100% 0, 100% 100%, 100% 95%); }
[data-design="a"] .ul-sheet__back { margin-top: var(--s-24);
  background: none; border: 0; cursor: pointer; font-family: var(--font-tag);
  font-size: 0.85rem; color: var(--muted); min-height: 44px; padding: 0; }
[data-design="a"] .ul-sheet__back:focus-visible { outline: 2px solid var(--bottle); outline-offset: 2px; }
[data-design="a"] .ul-sheet--done { border-left: 3px solid var(--success); }
[data-design="a"] .ul-done__tag { font-family: var(--font-tag);
  font-size: 0.8rem; letter-spacing: 0.1em; color: var(--success); margin: 0 0 var(--s-8); }
[data-design="a"] .ul-done__head { font-family: var(--font-display);
  font-size: 1.4rem; margin: 0 0 var(--s-12); }
[data-design="a"] .ul-done__note { color: var(--ink-soft);
  line-height: 1.6; max-width: 70ch; margin: 0; }
[data-design="a"] .ul-field { position: relative; margin-bottom: var(--s-24); }
[data-design="a"] .ul-field input,
[data-design="a"] .ul-field textarea { width: 100%; background: none;
  border: none; border-bottom: 1px solid var(--rule); font: inherit;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: var(--s-12) 0; }
[data-design="a"] .ul-field input:focus,
[data-design="a"] .ul-field textarea:focus { outline: none; border-bottom-color: var(--bottle); }
[data-design="a"] .ul-field label { font-family: var(--font-tag);
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); display: block; margin-top: var(--s-4); }
[data-design="a"] .ul-field--error input,
[data-design="a"] .ul-field--error textarea { border-bottom-color: var(--critical); }
@media (max-width: 560px) {
  [data-design="a"] .ul-funnel { grid-template-columns: 28px 1fr;
    gap: var(--s-16); }
  [data-design="a"] .ul-sheet { padding: var(--s-24); } }
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .ul-sheet.is-peeling,
  [data-design="a"] .ul-sheet.is-arriving { animation: none; }
  [data-design="a"] .ul-rail__scraper { transition: none; }
  [data-design="a"] .ul-chip__face { transition: none; }
}

/* ===================== 6. POINTER ===================== */
[data-design="a"] .ul-pointer { display: grid; justify-items: center;
  gap: var(--s-8); padding: var(--s-48) 0 var(--s-24); opacity: 1; }
[data-design="a"] .ul-pointer__chip { position: relative; width: 44px;
  height: 12px; overflow: hidden; border-radius: 2px; }
[data-design="a"] .ul-pointer__chip::before { content: ""; position: absolute;
  inset: 0; z-index: 1; background: var(--paper-deep); }
[data-design="a"] .ul-pointer__chip::after { content: ""; position: absolute;
  inset: 0; z-index: 2; background: var(--paper);
  animation: ul-pointer-scrape 6s var(--scrape) infinite; }
[data-design="a"] .ul-pointer__chip--1::before { background: var(--paper-deep); }
[data-design="a"] .ul-pointer__chip--2::before { background: var(--paper-under); }
[data-design="a"] .ul-pointer__chip--3::before {
  background: color-mix(in srgb, var(--bottle) 30%, var(--paper-under)); }
[data-design="a"] .ul-pointer__chip--4::before { background: var(--bottle); }
[data-design="a"] .ul-pointer__chip--2::after { animation-delay: 0.5s; }
[data-design="a"] .ul-pointer__chip--3::after { animation-delay: 1.0s; }
[data-design="a"] .ul-pointer__chip--4::after { animation-delay: 1.5s; }
@keyframes ul-pointer-scrape {
  0%        { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  18%, 70%  { clip-path: polygon(100% 8%, 100% 0, 100% 100%, 100% 92%); }
  88%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
[data-design="a"] .ul-pointer__label { font-family: var(--font-tag);
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-top: var(--s-8); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .ul-pointer__chip::after { animation: none;
    clip-path: polygon(100% 8%, 100% 0, 100% 100%, 100% 92%); }
}

/* ===================== 7. SCROLL CHOREOGRAPHY — steam-off handoff ===================== */
[data-design="a"] .ul-handoff { padding: var(--s-96) 0 var(--s-64);
  background: var(--paper); }
[data-design="a"] .ul-handoff__inner { max-width: var(--maxw);
  margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="a"] .ul-handoff__tag { font-family: var(--font-tag);
  font-size: 0.8rem; letter-spacing: 0.1em; color: var(--muted);
  margin: 0 0 var(--s-16); }
[data-design="a"] .ul-handoff__title { font-family: var(--font-display);
  font-weight: 620; font-size: clamp(1.7rem, 4.5vw, 2.8rem); line-height: 1.15;
  margin: 0; max-width: 20ch; }
[data-design="a"] .ul-handoff__reveal { display: inline-block; }

@supports (animation-timeline: view()) {
  [data-design="a"] .ul-layer--top {
    animation: ul-steam-lift 11s ease-in-out infinite,
               ul-scroll-part-top linear both;
    animation-timeline: auto, view();
    animation-range: normal, exit 0% exit 100%; }
  [data-design="a"] .ul-layer--2 {
    animation: ul-scroll-part-mid linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%; }
  @keyframes ul-scroll-part-top {
    to { transform: translateY(-56px) rotate(-0.6deg); opacity: 0.55; } }
  @keyframes ul-scroll-part-mid {
    to { transform: translateY(-24px); } }
  [data-design="a"] .ul-handoff__reveal {
    animation: ul-scroll-surface linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 65%; }
  @keyframes ul-scroll-surface {
    from { clip-path: polygon(0 100%, 8% 96%, 18% 100%, 30% 95%, 43% 100%,
             56% 96%, 68% 100%, 80% 95%, 91% 100%, 100% 96%, 100% 100%, 0 100%);
           transform: translateY(18px); opacity: 0.2; }
    to   { clip-path: polygon(0 0, 8% 0, 18% 0, 30% 0, 43% 0,
             56% 0, 68% 0, 80% 0, 91% 0, 100% 0, 100% 100%, 0 100%);
           transform: translateY(0); opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .ul-layer--top,
  [data-design="a"] .ul-layer--2,
  [data-design="a"] .ul-handoff__reveal { animation: none; }
}

/* ===================== ABOUT ===================== */
[data-design="a"] .ul-about { padding: var(--s-96) 0; background: var(--paper); }
[data-design="a"] .ul-about__inner { max-width: 68ch; margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px); }
[data-design="a"] .ul-about__title { font-family: var(--font-display);
  font-weight: 620; font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 var(--s-32); }
[data-design="a"] .ul-about__body { font-size: 1.05rem; line-height: 1.65;
  color: var(--ink-soft); margin: 0 0 var(--s-16); }
[data-design="a"] .ul-about__body--emphasis { color: var(--ink);
  font-family: var(--font-display); font-size: 1.2rem; font-style: italic; }

/* ===================== PORTFOLIO ===================== */
[data-design="a"] .ul-portfolio { padding: var(--s-96) 0; background: var(--paper-deep); }
[data-design="a"] .ul-portfolio__inner { max-width: var(--maxw);
  margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="a"] .ul-portfolio__title { font-family: var(--font-display);
  font-weight: 620; font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 var(--s-16); }
[data-design="a"] .ul-portfolio__intro { max-width: 68ch; color: var(--ink-soft);
  line-height: 1.6; margin: 0 0 var(--s-64); }
[data-design="a"] .ul-portfolio__rows { display: grid; gap: var(--s-64); }
[data-design="a"] .ul-portfolio__row { display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-32);
  align-items: center; }
[data-design="a"] .ul-portfolio__frame { aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--paper-under); }
[data-design="a"] .ul-portfolio__frame img { width: 100%; height: 100%;
  object-fit: cover; display: block; }
[data-design="a"] .ul-portfolio__meta { display: grid; gap: var(--s-8); }
[data-design="a"] .ul-portfolio__name { font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 600; margin: 0; color: var(--ink); }
[data-design="a"] .ul-portfolio__repeat-cta { margin-top: var(--s-64);
  display: flex; justify-content: center; }
@media (max-width: 768px) {
  [data-design="a"] .ul-portfolio__row { grid-template-columns: 1fr; }
}

/* ===================== FOOTER ===================== */
[data-design="a"] .ul-footer { padding: var(--s-96) 0 var(--s-64);
  background: var(--groundcoat); color: var(--paper); }
[data-design="a"] .ul-footer__inner { max-width: var(--maxw);
  margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="a"] .ul-footer__title { font-family: var(--font-display);
  font-weight: 620; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 var(--s-16); color: var(--paper); }
[data-design="a"] .ul-footer__lede { color: var(--paper-under);
  font-size: 1.05rem; margin: 0 0 var(--s-32); max-width: 60ch; }
[data-design="a"] .ul-footer__row { display: flex; flex-wrap: wrap;
  gap: var(--s-12); margin-bottom: var(--s-32); }
[data-design="a"] .ul-chip-link { display: inline-flex; align-items: center;
  min-height: 44px; padding: var(--s-8) var(--s-16); border: 1px solid var(--rule);
  border-radius: 3px; color: var(--paper); text-decoration: none;
  font-family: var(--font-tag); font-size: 0.85rem; letter-spacing: 0.03em;
  transition: transform var(--t-press) ease-out, border-color var(--t-scrape) var(--scrape); }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ul-chip-link:hover { border-color: var(--bottle); transform: translateY(-1px); }
}
[data-design="a"] .ul-chip-link:focus-visible { outline: 2px solid var(--bottle); outline-offset: 2px; }
[data-design="a"] .ul-chip-link:active { transform: scale(0.97); }
[data-design="a"] .ul-footer__tags { margin-bottom: var(--s-48); }
[data-design="a"] .ul-footer__tags .ul-step__tag { color: var(--muted); }
[data-design="a"] .ul-footer__bottom { display: grid; gap: var(--s-24);
  padding-top: var(--s-32); border-top: 1px solid var(--rule); }
[data-design="a"] .ul-footer__copy { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ===================== MOTION-EXCEPTION NOTE ===================== */
/* motion-exception: none taken — all motion in this slice is transform/opacity/clip-path, per design.md's own grammar. */

/* ===================== MANDATORY MOBILE SAFETY (bottom, scoped to .dq-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; }

/* stranded-wrapper autofix (drain 2026-07-03): every fixed max-width column centers — gate content_uncentered_left_stranded */
[data-design="a"] .ul-hero__subtitle { margin-inline: auto; }
[data-design="a"] .ul-ladder { margin-inline: auto; }
[data-design="a"] .ul-done__note { margin-inline: auto; }
[data-design="a"] .ul-portfolio__intro { margin-inline: auto; }
[data-design="a"] .ul-footer__lede { margin-inline: 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; }