/* =============================================================
   RAM Construction — Design A: Formwork
   Cast-concrete / sumi-ink / dimensioned. Scoped [data-design="a"].
   ============================================================= */

/* ---- Design primary exposed for chrome-kit bar swatch ---- */
[data-design="a"] {
  --design-a-primary: #8C4A2E;
}

/* ---- Formwork token system ---- */
[data-design="a"] {
  --fw-bone:      #F2EFE8;  /* surface (page) */
  --fw-page:      #FAF7F0;  /* surface (raised) */
  --fw-aggregate: #C7C2BA;  /* surface (concrete) */
  --fw-shadow:    #6B665E;  /* muted ink */
  --fw-ink:       #1A1815;  /* foreground (sumi) */
  --fw-rust:      #8C4A2E;  /* accent (single) */
  --fw-rebar:     #5C5246;  /* accent (structural hairline) */
  --fw-critical:  #7A2B1F;  /* state: error */
  --fw-success:   #4A5C3E;  /* state: confirm */

  --fw-display: "Söhne Breit", "Neue Haas Grotesk Display", "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
  --fw-body:    "Söhne", "Neue Haas Grotesk Text", "Inter", -apple-system, system-ui, sans-serif;
  --fw-mono:    "Söhne Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fw-hair:     1px;
  --fw-rebar-w:  2px;
  --fw-joint:    8px;
  --fw-board:   16px;
  --fw-bay:     32px;
  --fw-pour:    64px;
  --fw-slab:   112px;
  --fw-monolith:176px;

  --fw-set:        180ms cubic-bezier(0.32, 0.08, 0.24, 1);
  --fw-register:   320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --fw-pour-t:     820ms cubic-bezier(0.65, 0, 0.35, 1);
  --fw-cure:      1400ms cubic-bezier(0.83, 0, 0.17, 1);

  --fw-r-cast:  2px;

  box-sizing: border-box;
  font-family: var(--fw-body);
  background: var(--fw-bone);
  color: var(--fw-ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
[data-design="a"] *, [data-design="a"] *::before, [data-design="a"] *::after { box-sizing: border-box; }
[data-design="a"] h1, [data-design="a"] h2, [data-design="a"] h3, [data-design="a"] p, [data-design="a"] ol, [data-design="a"] ul, [data-design="a"] dl { margin: 0; }
[data-design="a"] a { color: var(--fw-rust); }

/* Shared section heading + eyebrow ------------------------------------ */
[data-design="a"] .rf-keynote {
  font-family: var(--fw-mono); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fw-shadow); margin: 0;
}
[data-design="a"] .rf-section-h {
  font-family: var(--fw-display); font-weight: 600;
  font-size: clamp(32px, 5vw, 64px); letter-spacing: -0.02em; line-height: 1.02;
  color: var(--fw-ink); margin: var(--fw-board) 0 0; max-width: 20ch;
}

/* =============================================================
   ELEMENT 1 — Animated header (sumi draw-lines)
   ============================================================= */
[data-design="a"] .rf-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--fw-bone); border-bottom: 1px solid var(--fw-rebar);
}
[data-design="a"] .rf-header__pour { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
[data-design="a"] .rf-header__line {
  position: absolute; left: -40%; height: 1px; width: 60%;
  background: linear-gradient(90deg, transparent 0%, var(--fw-ink) 50%, transparent 100%);
  opacity: 0.18;
}
[data-design="a"] .rf-header__line--a { top: 28%; animation: fw-header-draw-a 28s linear infinite; }
[data-design="a"] .rf-header__line--b { top: 71%; animation: fw-header-draw-b 31s linear infinite; }
[data-design="a"] .rf-header__bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  max-width: 1280px; margin: 0 auto;
  padding: clamp(16px, 3vw, 28px) clamp(16px, 4vw, 48px);
}
[data-design="a"] .rf-logo { text-decoration: none; color: var(--fw-ink); }
[data-design="a"] .rf-logo__mark {
  font-family: var(--fw-display); font-weight: 600;
  font-size: clamp(19px, 2.4vw, 26px); letter-spacing: -0.015em; color: var(--fw-ink);
}
[data-design="a"] .rf-hamburger {
  background: transparent; border: 0; padding: 10px; min-width: 44px; min-height: 44px;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; cursor: pointer;
}
[data-design="a"] .rf-hamburger__bar {
  display: block; width: 28px; height: 2px; background: var(--fw-ink);
  transition: transform var(--fw-register), background-color var(--fw-set);
}
[data-design="a"] .rf-hamburger[aria-expanded="true"] .rf-hamburger__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
[data-design="a"] .rf-hamburger[aria-expanded="true"] .rf-hamburger__bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Drawer — focus-trapped, display:none when closed */
[data-design="a"] .rf-drawer {
  position: fixed; inset: 0; background: var(--fw-bone); z-index: 50;
  display: flex; flex-direction: column;
}
[data-design="a"] .rf-drawer[hidden] { display: none; }
[data-design="a"] .rf-drawer__inner {
  max-width: 1280px; width: 100%; margin: 0 auto;
  padding: clamp(64px, 10vh, 120px) clamp(16px, 4vw, 48px) clamp(32px, 6vh, 64px);
  display: flex; flex-direction: column; gap: var(--fw-board); flex: 1 1 auto;
}
[data-design="a"] .rf-drawer__link {
  font-family: var(--fw-display); font-size: clamp(30px, 6vw, 60px);
  color: var(--fw-ink); text-decoration: none; letter-spacing: -0.02em;
  border-bottom: 1px solid var(--fw-rebar); padding-bottom: var(--fw-joint);
  transition: color var(--fw-set); position: relative;
}
[data-design="a"] .rf-drawer__link::before {
  content: attr(data-num); font-family: var(--fw-mono); font-size: 12px;
  letter-spacing: 0.08em; color: var(--fw-shadow); position: absolute; top: 4px; right: 0;
}
[data-design="a"] .rf-drawer__link:hover, [data-design="a"] .rf-drawer__link:focus-visible { color: var(--fw-rust); outline: none; }
[data-design="a"] .rf-drawer__contact { display: flex; flex-direction: column; gap: var(--fw-joint); margin-top: var(--fw-board); }
[data-design="a"] .rf-drawer__tel { font-family: var(--fw-display); font-size: clamp(24px, 4vw, 36px); color: var(--fw-rust); text-decoration: none; letter-spacing: -0.01em; }
[data-design="a"] .rf-drawer__mail { font-family: var(--fw-mono); font-size: 14px; color: var(--fw-shadow); text-decoration: none; letter-spacing: 0.04em; }
[data-design="a"] .rf-drawer__mail:hover, [data-design="a"] .rf-drawer__tel:hover { color: var(--fw-ink); }
[data-design="a"] .rf-drawer__close {
  position: absolute; top: clamp(16px, 3vw, 28px); right: clamp(16px, 4vw, 48px);
  background: transparent; border: 0; font-family: var(--fw-mono); font-size: 13px;
  letter-spacing: 0.06em; color: var(--fw-ink); cursor: pointer; min-height: 44px; padding: 0 8px;
}

@keyframes fw-header-draw-a { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 0.18; } 88% { opacity: 0.18; } 100% { transform: translateX(280%); opacity: 0; } }
@keyframes fw-header-draw-b { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 0.14; } 90% { opacity: 0.14; } 100% { transform: translateX(280%); opacity: 0; } }

/* =============================================================
   HERO — 3 text + ONE animated backdrop + Element 2 CTA + chip
   Backdrop = curing-concrete field: cure tonal shift (16s) +
   aggregate breath (6.4s), coprime -> never freezes, no direction.
   ============================================================= */
[data-design="a"] .fw-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--fw-bone);
  padding: clamp(72px, 12vw, 160px) clamp(16px, 4vw, 48px) clamp(56px, 9vw, 120px);
  min-height: clamp(78vh, 80vh, 88vh);
  display: flex; align-items: center;
}
/* Layer 1 (animated): the curing slab — sole moving substrate layer */
[data-design="a"] .fw-hero__slab {
  position: absolute; inset: 0; z-index: -3;
  background: linear-gradient(177deg, var(--fw-aggregate) 0%, color-mix(in oklab, var(--fw-aggregate), var(--fw-bone) 55%) 60%, var(--fw-bone) 100%);
  opacity: 0; transform: scale(1.04);
  animation:
    fw-hero-arrive 1400ms cubic-bezier(0.83, 0, 0.17, 1) 120ms forwards,
    fw-hero-cure 16s ease-in-out 1520ms infinite;
}
/* Static (non-moving) aggregate field + grain — texture only, no second motion */
[data-design="a"] .fw-hero__aggregate {
  position: absolute; inset: 0; z-index: -2; opacity: 0;
  background-image:
    radial-gradient(circle at 12% 22%, var(--fw-rebar) 0 1.5px, transparent 2px),
    radial-gradient(circle at 78% 30%, var(--fw-rebar) 0 1.5px, transparent 2px),
    radial-gradient(circle at 34% 64%, var(--fw-rebar) 0 1.5px, transparent 2px),
    radial-gradient(circle at 89% 78%, var(--fw-rebar) 0 1.5px, transparent 2px),
    radial-gradient(circle at 6% 88%, var(--fw-rebar) 0 1.5px, transparent 2px),
    radial-gradient(circle at 56% 14%, var(--fw-rebar) 0 1.5px, transparent 2px),
    radial-gradient(circle at 22% 46%, var(--fw-rebar) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 58%, var(--fw-rebar) 0 1.5px, transparent 2px),
    radial-gradient(circle at 46% 86%, var(--fw-rebar) 0 1.5px, transparent 2px);
  background-size: 100% 100%;
  animation: fw-hero-aggregate-in 1400ms ease-out 360ms forwards, fw-hero-breath 6.4s ease-in-out 1760ms infinite;
}
/* Board-grain wash, static, low opacity */
[data-design="a"] .fw-hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06;
  background: repeating-linear-gradient(91deg, transparent 0 13px, rgba(26,24,21,0.5) 13px 14px);
}
[data-design="a"] .fw-hero__content {
  position: relative; z-index: 1; max-width: 1280px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--fw-board);
}
[data-design="a"] .fw-hero__h1 {
  font-family: var(--fw-display); font-weight: 600;
  font-size: clamp(38px, 7vw, 96px); letter-spacing: -0.025em; line-height: 0.98;
  color: var(--fw-ink); max-width: 16ch; text-wrap: balance;
}
[data-design="a"] .fw-hero__subtitle {
  font-family: var(--fw-body); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5;
  color: var(--fw-ink); max-width: 52ch;
  border-top: 1px solid var(--fw-rebar); padding-top: var(--fw-board); margin-top: var(--fw-joint);
}
[data-design="a"] .fw-hero__proof {
  font-family: var(--fw-mono); font-size: clamp(12px, 1.3vw, 14px); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fw-shadow); max-width: 60ch;
}
[data-design="a"] .fw-hero__chip { margin-top: var(--fw-joint); }
[data-design="a"] .fw-hero__chip span {
  display: inline-block; font-family: var(--fw-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fw-bone); background: var(--fw-ink);
  padding: 6px 12px; border-radius: 0;
}

@keyframes fw-hero-arrive { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes fw-hero-aggregate-in { from { opacity: 0; } to { opacity: 0.34; } }
/* Cure: perceptible tonal shift (>=15% lightness across cycle) — sustained ambient motion */
@keyframes fw-hero-cure {
  0%, 100% { filter: brightness(1) saturate(1); transform: scale(1); }
  50%      { filter: brightness(0.86) saturate(1.08); transform: scale(1.025); }
}
@keyframes fw-hero-breath {
  0%, 100% { opacity: 0.30; transform: scale(1); }
  50%      { opacity: 0.46; transform: scale(1.015); }
}

/* =============================================================
   ELEMENT 2 — Animated CTA (rust stamp, board-grain, breath)
   ============================================================= */
[data-design="a"] .rf-cta {
  position: relative; display: inline-flex; align-items: center; gap: var(--fw-board);
  padding: 16px 28px; min-height: 44px; background: var(--fw-rust); color: var(--fw-bone);
  font-family: var(--fw-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--fw-r-cast); will-change: transform;
  transition: transform var(--fw-set), background-color var(--fw-set);
  animation: fw-cta-breath 4.8s ease-in-out infinite; overflow: hidden;
}
[data-design="a"] .rf-cta__grain {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(6deg, transparent 0 6px, rgba(26,24,21,0.08) 6px 7px);
  transition: transform var(--fw-set);
}
[data-design="a"] .rf-cta__label { position: relative; }
[data-design="a"] .rf-cta__arrow { position: relative; transition: transform var(--fw-register); }
[data-design="a"] .rf-cta::after {
  content: ""; position: absolute; left: 28px; right: 28px; bottom: 10px; height: 1px;
  background: var(--fw-bone); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--fw-register);
}
[data-design="a"] .rf-cta:hover::after, [data-design="a"] .rf-cta:focus-visible::after { transform: scaleX(1); }
[data-design="a"] .rf-cta:hover .rf-cta__arrow, [data-design="a"] .rf-cta:focus-visible .rf-cta__arrow { transform: translateX(6px); }
[data-design="a"] .rf-cta:focus-visible { outline: 2px solid var(--fw-rebar); outline-offset: 4px; }
[data-design="a"] .rf-cta:active { transform: translateY(2px); }
[data-design="a"] .rf-cta:active .rf-cta__grain { transform: translateX(1px); }
@keyframes fw-cta-breath { 0%, 100% { box-shadow: 0 0 0 0 rgba(140,74,46,0.0); } 50% { box-shadow: 0 0 0 8px rgba(140,74,46,0.12); } }

/* =============================================================
   ELEMENT 6 — Animated pointer (dimension line, drafted-measured)
   ALWAYS visible: wrapper opacity 1, rule has static base height.
   ============================================================= */
[data-design="a"] .fw-pointer {
  display: flex; justify-content: center; opacity: 1;
  background: var(--fw-bone);
  padding: clamp(36px, 7vw, 72px) 16px clamp(44px, 8vw, 80px);
}
[data-design="a"] .fw-pointer__hit {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--fw-rebar);
}
[data-design="a"] .fw-pointer__tick { display: block; width: 16px; height: 1px; background: currentColor; opacity: 0.8; }
[data-design="a"] .fw-pointer__rule {
  display: block; width: 1px; height: 56px; background: currentColor;
  transform-origin: top center; transform: scaleY(0.7);
  animation: fw-pointer-extend 5s ease-in-out infinite;
}
[data-design="a"] .fw-pointer__label {
  font-family: var(--fw-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fw-shadow); opacity: 0.55; animation: fw-pointer-stamp 5s ease-in-out infinite;
}
@keyframes fw-pointer-extend { 0%, 100% { transform: scaleY(0.55); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 0.9; } }
@keyframes fw-pointer-stamp { 0%, 30%, 100% { opacity: 0.35; } 50%, 70% { opacity: 0.9; } }

/* =============================================================
   ELEMENT 5 — The funnel (board-formed steps, pour-in)
   ============================================================= */
[data-design="a"] .rf-interactive {
  background: var(--fw-bone); padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px);
}
[data-design="a"] .rf-interactive__header { max-width: 1280px; margin: 0 auto var(--fw-bay); }
[data-design="a"] .rf-interactive__title {
  font-family: var(--fw-display); font-weight: 600; font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.02em; line-height: 1.02; color: var(--fw-ink); margin: var(--fw-board) 0;
}
[data-design="a"] .rf-interactive__sub { font-family: var(--fw-body); font-size: clamp(17px, 1.5vw, 19px); color: var(--fw-shadow); max-width: 56ch; }

/* progress beam */
[data-design="a"] .rf-funnel__beam { max-width: 1280px; margin: 0 auto var(--fw-bay); }
[data-design="a"] .rf-beam__fill { height: 2px; background: var(--fw-rust); width: 0%; transition: width var(--fw-register); }
[data-design="a"] .rf-beam__ticks {
  list-style: none; padding: var(--fw-joint) 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--fw-board);
  border-top: 1px solid var(--fw-rebar); margin-top: -1px;
}
[data-design="a"] .rf-beam__ticks li { font-family: var(--fw-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fw-shadow); }
[data-design="a"] .rf-beam__ticks span { color: var(--fw-rebar); margin-right: 4px; }

[data-design="a"] .rf-funnel { max-width: 1280px; margin: 0 auto; border-top: 1px solid var(--fw-rebar); }
[data-design="a"] .rf-step {
  border: 0; border-bottom: 1px solid var(--fw-rebar); margin: 0; padding: var(--fw-bay) 0;
  display: none;
}
[data-design="a"] .rf-step.is-active { display: block; animation: fw-step-in var(--fw-pour-t) both; }
[data-design="a"] .rf-step__label {
  font-family: var(--fw-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fw-rust); padding: 0; margin-bottom: var(--fw-board);
}
[data-design="a"] .rf-step__q {
  font-family: var(--fw-display); font-weight: 500; font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.01em; color: var(--fw-ink); max-width: 30ch; margin-bottom: var(--fw-board);
}
[data-design="a"] .rf-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--fw-joint); }
[data-design="a"] .rf-options--col { grid-template-columns: 1fr; max-width: 520px; }
[data-design="a"] .rf-options label {
  display: flex; align-items: center; gap: var(--fw-joint); padding: 14px var(--fw-board);
  min-height: 44px; border: 1px solid var(--fw-rebar); border-radius: var(--fw-r-cast); cursor: pointer;
  font-family: var(--fw-body); font-size: 16px; color: var(--fw-ink);
  transition: border-color var(--fw-set), background-color var(--fw-set);
}
[data-design="a"] .rf-options label:hover { border-color: var(--fw-ink); }
[data-design="a"] .rf-options input[type="radio"] { accent-color: var(--fw-rust); width: 18px; height: 18px; flex: none; }
[data-design="a"] .rf-options label:has(input:checked) { background: var(--fw-page); border-color: var(--fw-rust); }

[data-design="a"] .rf-members { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--fw-board); }
[data-design="a"] .rf-member { display: grid; gap: 6px; }
[data-design="a"] .rf-member--full { grid-column: 1 / -1; }
[data-design="a"] .rf-member span { font-family: var(--fw-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fw-shadow); }
[data-design="a"] .rf-member input, [data-design="a"] .rf-member textarea {
  font-family: var(--fw-body); font-size: 16px; border: 0; border-bottom: 1px solid var(--fw-rebar);
  padding: 10px 0; background: transparent; color: var(--fw-ink); width: 100%; min-height: 44px;
}
[data-design="a"] .rf-member textarea { resize: vertical; line-height: 1.5; }
[data-design="a"] .rf-member input:focus, [data-design="a"] .rf-member textarea:focus { outline: none; border-bottom-color: var(--fw-rust); border-bottom-width: 2px; }

[data-design="a"] .rf-step__nav { display: flex; flex-wrap: wrap; gap: var(--fw-board); margin-top: var(--fw-bay); }
[data-design="a"] .rf-funnel__next, [data-design="a"] .rf-funnel__submit {
  font-family: var(--fw-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 24px; min-height: 44px; background: var(--fw-ink); color: var(--fw-bone);
  border: 0; border-radius: var(--fw-r-cast); cursor: pointer;
  transition: background-color var(--fw-set), transform var(--fw-set);
}
[data-design="a"] .rf-funnel__submit { background: var(--fw-rust); }
[data-design="a"] .rf-funnel__next:hover, [data-design="a"] .rf-funnel__submit:hover { transform: translateY(-1px); }
[data-design="a"] .rf-funnel__next:active, [data-design="a"] .rf-funnel__submit:active { transform: translateY(1px); }
[data-design="a"] .rf-funnel__back {
  font-family: var(--fw-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 16px; min-height: 44px; background: transparent; color: var(--fw-ink); border: 0; cursor: pointer;
}
[data-design="a"] .rf-step--done .rf-step__q { font-family: var(--fw-body); font-weight: 400; font-size: clamp(18px, 2vw, 22px); max-width: 56ch; }
[data-design="a"] .rf-summary { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--fw-board); margin-top: var(--fw-board); max-width: 520px; }
[data-design="a"] .rf-summary dt { font-family: var(--fw-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fw-shadow); }
[data-design="a"] .rf-summary dd { font-family: var(--fw-body); font-size: 15px; color: var(--fw-ink); margin: 0; }
@keyframes fw-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

[data-design="a"] .fw-funnel__below { max-width: 1280px; margin: var(--fw-bay) auto 0; }
[data-design="a"] .fw-funnel__compliance { font-family: var(--fw-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fw-shadow); margin-bottom: 6px; }
[data-design="a"] .fw-funnel__alt { font-family: var(--fw-body); font-size: 15px; color: var(--fw-shadow); }
[data-design="a"] .fw-funnel__alt a { color: var(--fw-rust); text-decoration: none; }
[data-design="a"] .fw-funnel__alt a:hover { text-decoration: underline; }

/* =============================================================
   ELEMENT 3 ambient grammar — SERVICES (section-cut hairlines)
   ============================================================= */
[data-design="a"] .rf-ambient-a { position: relative; background: var(--fw-page); padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px); overflow: hidden; }
[data-design="a"] .rf-ambient-a__cuts { position: absolute; inset: 0; pointer-events: none; }
[data-design="a"] .rf-ambient-a__cut { position: absolute; left: 0; height: 1px; width: 100%; background: var(--fw-ink); opacity: 0; transform-origin: left center; transform: scaleX(0); }
[data-design="a"] .rf-ambient-a.is-live .rf-ambient-a__cut--top { animation: fw-cut-draw 22s linear infinite; }
[data-design="a"] .rf-ambient-a.is-live .rf-ambient-a__cut--bot { top: 74%; animation: fw-cut-draw 28s linear infinite; animation-delay: -7s; }
[data-design="a"] .rf-ambient-a__cut--top { top: 26%; }
[data-design="a"] .rf-ambient-a__inner { position: relative; max-width: 1280px; margin: 0 auto; display: grid; gap: var(--fw-bay); }
[data-design="a"] .rf-ambient-a__title { font-family: var(--fw-display); font-weight: 600; font-size: clamp(32px, 5.5vw, 72px); letter-spacing: -0.02em; line-height: 1.0; color: var(--fw-ink); max-width: 18ch; }
[data-design="a"] .rf-ambient-a__body { font-family: var(--fw-body); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--fw-ink); max-width: 60ch; }
[data-design="a"] .rf-index { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--fw-rebar); }
[data-design="a"] .rf-index__row { display: flex; align-items: baseline; gap: var(--fw-board); padding: var(--fw-board) 0; border-bottom: 1px solid var(--fw-rebar); position: relative; transition: color var(--fw-set); }
[data-design="a"] .rf-index__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fw-rust); transform: scaleX(0); transform-origin: left center; transition: transform var(--fw-register); }
[data-design="a"] .rf-index__row:hover::after { transform: scaleX(1); }
[data-design="a"] .rf-index__num { font-family: var(--fw-display); font-size: clamp(20px, 2.4vw, 28px); color: var(--fw-rebar); min-width: 2.4ch; }
[data-design="a"] .rf-index__name { font-family: var(--fw-body); font-size: clamp(18px, 2vw, 24px); color: var(--fw-ink); }
@keyframes fw-cut-draw { 0% { transform: scaleX(0); opacity: 0; } 8% { opacity: 0.22; } 60% { transform: scaleX(1); opacity: 0.22; } 80% { opacity: 0; } 100% { transform: scaleX(1); opacity: 0; transform-origin: right center; } }

/* Repeated CTA band */
[data-design="a"] .fw-repeat-cta { background: var(--fw-page); display: flex; justify-content: center; padding: 0 16px clamp(56px, 9vw, 96px); }

/* =============================================================
   ELEMENT 4 ambient — ABOUT (curing slab + aggregate breath)
   ============================================================= */
[data-design="a"] .rf-ambient-b { position: relative; padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px); overflow: hidden; isolation: isolate; }
[data-design="a"] .rf-ambient-b__slab { position: absolute; inset: 0; z-index: -2; background: var(--fw-aggregate); }
[data-design="a"] .rf-ambient-b.is-live .rf-ambient-b__slab { animation: fw-slab-cure 18s ease-in-out infinite; }
[data-design="a"] .rf-ambient-b__aggregate {
  position: absolute; inset: 0; z-index: -1; opacity: 0.32;
  background-image:
    radial-gradient(circle at 12% 18%, var(--fw-ink) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 32%, var(--fw-ink) 0 1px, transparent 1.5px),
    radial-gradient(circle at 34% 64%, var(--fw-ink) 0 1px, transparent 1.5px),
    radial-gradient(circle at 89% 81%, var(--fw-ink) 0 1px, transparent 1.5px),
    radial-gradient(circle at 6% 92%, var(--fw-ink) 0 1px, transparent 1.5px),
    radial-gradient(circle at 56% 12%, var(--fw-ink) 0 1px, transparent 1.5px),
    radial-gradient(circle at 22% 44%, var(--fw-ink) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 58%, var(--fw-ink) 0 1px, transparent 1.5px);
  background-size: 100% 100%;
}
[data-design="a"] .rf-ambient-b.is-live .rf-ambient-b__aggregate { animation: fw-aggregate-breath 6.4s ease-in-out infinite; }
[data-design="a"] .rf-ambient-b__inner { position: relative; max-width: 1280px; margin: 0 auto; display: grid; gap: var(--fw-bay); color: var(--fw-bone); }
[data-design="a"] .rf-ambient-b .rf-keynote { color: rgba(242,239,232,0.7); }
[data-design="a"] .rf-ambient-b__title { font-family: var(--fw-display); font-weight: 500; font-size: clamp(30px, 5vw, 64px); letter-spacing: -0.015em; line-height: 1.02; color: var(--fw-bone); max-width: 20ch; }
[data-design="a"] .rf-ambient-b__body { display: grid; gap: var(--fw-board); }
[data-design="a"] .rf-ambient-b__body p { font-family: var(--fw-body); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; max-width: 64ch; color: var(--fw-bone); }
[data-design="a"] .rf-data-list { display: flex; flex-wrap: wrap; gap: var(--fw-bay); border-top: 1px solid rgba(242,239,232,0.32); padding-top: var(--fw-board); }
[data-design="a"] .rf-data-list dt { font-family: var(--fw-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(242,239,232,0.7); }
[data-design="a"] .rf-data-list dd { font-family: var(--fw-display); font-size: clamp(18px, 2vw, 24px); color: var(--fw-bone); margin: 0; }
@keyframes fw-slab-cure { 0%, 100% { background: var(--fw-aggregate); } 50% { background: color-mix(in oklab, var(--fw-aggregate), var(--fw-shadow) 45%); } }
@keyframes fw-aggregate-breath { 0%, 100% { opacity: 0.28; transform: scale(1); } 50% { opacity: 0.42; transform: scale(1.012); } }

/* =============================================================
   PROCESS
   ============================================================= */
[data-design="a"] .fw-process { background: var(--fw-bone); padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px); }
[data-design="a"] .fw-process .rf-keynote, [data-design="a"] .fw-process .rf-section-h, [data-design="a"] .fw-process__steps { max-width: 1280px; margin-left: auto; margin-right: auto; }
[data-design="a"] .fw-process__steps { list-style: none; padding: 0; margin: var(--fw-bay) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--fw-bay); }
[data-design="a"] .fw-process__step { display: grid; grid-template-columns: auto 1fr; gap: var(--fw-board); padding-top: var(--fw-board); border-top: 1px solid var(--fw-rebar); }
[data-design="a"] .fw-process__num { font-family: var(--fw-display); font-size: clamp(24px, 3vw, 40px); color: var(--fw-rust); line-height: 1; }
[data-design="a"] .fw-process__step h3 { font-family: var(--fw-display); font-weight: 500; font-size: clamp(18px, 2vw, 24px); color: var(--fw-ink); margin-bottom: var(--fw-joint); letter-spacing: -0.01em; }
[data-design="a"] .fw-process__step p { font-family: var(--fw-body); font-size: 16px; line-height: 1.55; color: var(--fw-shadow); max-width: 40ch; }

/* =============================================================
   CONTACT
   ============================================================= */
[data-design="a"] .fw-contact { background: var(--fw-page); padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px); }
[data-design="a"] .fw-contact .rf-keynote, [data-design="a"] .fw-contact .rf-section-h, [data-design="a"] .fw-contact__grid { max-width: 1280px; margin-left: auto; margin-right: auto; }
[data-design="a"] .fw-contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--fw-bay); margin-top: var(--fw-bay); }
[data-design="a"] .fw-contact__block h3 { font-family: var(--fw-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fw-shadow); margin-bottom: var(--fw-board); padding-top: var(--fw-board); border-top: 1px solid var(--fw-rebar); }
[data-design="a"] .fw-contact__block p { font-family: var(--fw-body); font-size: clamp(16px, 1.6vw, 19px); color: var(--fw-ink); margin-bottom: var(--fw-joint); line-height: 1.55; max-width: 46ch; }
[data-design="a"] .fw-contact__block a { color: var(--fw-rust); text-decoration: none; font-family: var(--fw-display); font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.01em; }
[data-design="a"] .fw-contact__block a:hover { text-decoration: underline; }

/* =============================================================
   FOOTER — drafting title block, (c) 2026
   ============================================================= */
[data-design="a"] .fw-footer { position: relative; background: var(--fw-bone); padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 64px); }
[data-design="a"] .fw-footer__rule { position: absolute; top: 0; left: 0; height: 1px; width: 0; background: var(--fw-rebar); animation: fw-footer-draw 22s linear infinite; }
[data-design="a"] .fw-footer__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--fw-bay); border-top: 1px solid var(--fw-rebar); padding-top: var(--fw-bay); }
[data-design="a"] .fw-footer__firm { font-family: var(--fw-display); font-weight: 600; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.015em; color: var(--fw-ink); margin-bottom: var(--fw-joint); }
[data-design="a"] .fw-footer__status { font-family: var(--fw-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fw-shadow); margin-bottom: 4px; }
[data-design="a"] .fw-footer__col p { margin-bottom: 6px; font-size: 15px; }
[data-design="a"] .fw-footer__col a { color: var(--fw-rust); text-decoration: none; }
[data-design="a"] .fw-footer__col a:hover { text-decoration: underline; }
[data-design="a"] .fw-footer__col--stamp { display: flex; flex-direction: column; gap: var(--fw-board); }
[data-design="a"] .fw-footer__copy { font-size: 12px; color: var(--fw-shadow); }
[data-design="a"] .fw-footer__cta { font-family: var(--fw-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fw-rust); text-decoration: none; align-self: flex-start; }
[data-design="a"] .fw-footer__cta:hover { text-decoration: underline; }
@keyframes fw-footer-draw { 0% { width: 0; } 60% { width: 100%; } 100% { width: 100%; opacity: 0; } }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 768px) {
  [data-design="a"] .rf-header__bar { padding: 14px 16px; }
  [data-design="a"] .fw-hero { min-height: 88vh; padding-top: clamp(56px, 16vw, 96px); }
  [data-design="a"] .rf-ambient-b__inner, [data-design="a"] .rf-ambient-a__inner { gap: var(--fw-board); }
  [data-design="a"] .rf-step__nav { flex-direction: row-reverse; justify-content: flex-end; }
}
@media (max-width: 420px) {
  [data-design="a"] .fw-hero__h1 { font-size: clamp(32px, 9vw, 44px); }
  [data-design="a"] .rf-data-list { gap: var(--fw-board); }
}

/* =============================================================
   REDUCED MOTION — freeze mid-cycle, keep functional state
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .rf-header__line--a, [data-design="a"] .rf-header__line--b { animation: none; opacity: 0.1; transform: translateX(80%); }
  [data-design="a"] .fw-hero__slab { animation: none; opacity: 1; transform: none; filter: brightness(0.93); }
  [data-design="a"] .fw-hero__aggregate { animation: none; opacity: 0.34; }
  [data-design="a"] .rf-cta { animation: none; }
  [data-design="a"] .rf-cta::after, [data-design="a"] .rf-cta__arrow { transition: none; }
  [data-design="a"] .fw-pointer__rule { animation: none; transform: scaleY(0.85); opacity: 0.8; }
  [data-design="a"] .fw-pointer__label { animation: none; opacity: 0.7; }
  [data-design="a"] .rf-ambient-a__cut { animation: none !important; transform: scaleX(1); opacity: 0.12; }
  [data-design="a"] .rf-ambient-b__slab, [data-design="a"] .rf-ambient-b__aggregate { animation: none !important; }
  [data-design="a"] .rf-step.is-active { animation: none; }
  [data-design="a"] .fw-footer__rule { animation: none; width: 100%; }
}

/* =============================================================
   MOBILE OVERFLOW — defensive rules (HARD REQUIREMENT)
   ============================================================= */
[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; }