/*
 * Formwork Design System — Rick House Construction, Design A
 * All selectors scoped under [data-design="a"]
 * All keyframes prefixed fw-
 * No pure black (#000) or pure white (#FFF) — full palette filtered through cured concrete
 */

/* ═══════════════════════════════════════════════════════════════
   TOKEN SYSTEM
═══════════════════════════════════════════════════════════════ */

[data-design="a"] {
  /* Expose design primary colour */
  --design-a-primary: #8C4A2E;

  /* ── Color tokens ── */
  --fw-bone:      #F2EFE8;   /* Surface (page) — off-white paper */
  --fw-page:      #FAF7F0;   /* Surface (raised) — cards, funnel steps */
  --fw-aggregate: #C7C2BA;   /* Surface (concrete) — mid-tone planes */
  --fw-shadow:    #6B665E;   /* Muted ink — captions, secondary type */
  --fw-ink:       #1A1815;   /* Foreground (sumi) — display type, rules */
  --fw-rust:      #8C4A2E;   /* Accent (single) — stamp ink, CTA */
  --fw-rebar:     #5C5246;   /* Accent (structural) — hairlines, focus rings */
  --fw-critical:  #7A2B1F;   /* State — form errors */
  --fw-success:   #4A5C3E;   /* State — confirmation */

  /* ── Typography ── */
  --fw-display: "Söhne Breit", "Neue Haas Grotesk Display", "Inter Display", -apple-system, sans-serif;
  --fw-body:    "Söhne", "Neue Haas Grotesk Text", "Inter", -apple-system, sans-serif;
  --fw-mono:    "Söhne Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --fw-serif:   "Lyon Text", "Iowan Old Style", "Charter", serif;

  /* ── Spacing (4px base) ── */
  --fw-hair:      1px;
  --fw-rebar-sp:  2px;
  --fw-joint:     8px;
  --fw-board:    16px;
  --fw-bay:      32px;
  --fw-pour:     64px;
  --fw-slab:    112px;
  --fw-monolith:176px;

  /* ── Motion ── */
  --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-dur: 820ms cubic-bezier(0.65, 0, 0.35, 1);
  --fw-cure:    1400ms cubic-bezier(0.83, 0, 0.17, 1);
  --fw-breath:  4800ms ease-in-out;
  --fw-draw:      22s  linear;

  /* ── Radius ── */
  --fw-r-none:  0;
  --fw-r-hair:  1px;
  --fw-r-cast:  2px;
  --fw-r-stamp: 0;
}

/* ── Box model reset ── */
[data-design="a"] *, [data-design="a"] *::before, [data-design="a"] *::after {
  box-sizing: border-box;
}

[data-design="a"] {
  background: var(--fw-bone);
  color: var(--fw-ink);
  font-family: var(--fw-body);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════
   ELEMENT 1 — ANIMATED MINIMALIST HEADER
   Bone-paper band · coprime hairline draw-lines · hamburger only
═══════════════════════════════════════════════════════════════ */

[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(20px, 3vw, 36px) clamp(16px, 4vw, 48px);
}

[data-design="a"] .rf-logo {
  text-decoration: none;
}

[data-design="a"] .rf-logo__mark {
  font-family: var(--fw-display);
  font-weight: 600;
  font-size: clamp(16px, 2vw, 24px);
  letter-spacing: -0.015em;
  color: var(--fw-ink);
  white-space: nowrap;
}

[data-design="a"] .rf-hamburger {
  background: transparent;
  border: 0;
  padding: 8px;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[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);
}

[data-design="a"] .rf-drawer {
  position: fixed;
  inset: 0;
  background: var(--fw-bone);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fw-register);
}

[data-design="a"] .rf-drawer:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

[data-design="a"] .rf-drawer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(60px, 10vh, 120px) clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--fw-board);
}

[data-design="a"] .rf-drawer__link {
  font-family: var(--fw-display);
  font-size: clamp(28px, 5vw, 56px);
  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);
  display: block;
}

[data-design="a"] .rf-drawer__link--email {
  font-family: var(--fw-mono);
  font-size: clamp(14px, 1.8vw, 20px);
  letter-spacing: 0.02em;
  color: var(--fw-shadow);
}

[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__close {
  position: absolute;
  top: clamp(20px, 3vw, 36px);
  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;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

@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; }
}

@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%);
  }
}

@media (max-width: 560px) {
  [data-design="a"] .rf-header__bar { padding: 16px; }
  [data-design="a"] .rf-logo__mark { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO — board-formed concrete substrate (v0.3 — pure CSS, no photo)
   Three layers: concrete field · rake-light sweep · tint scrim
   + existing rule-layer (dimension lines + ticks)
   Visual gate compliance: edge structure (board seams + tie rods),
   tonal variance, 24s raking-light motion (T=0 vs T=2s differ clearly)
═══════════════════════════════════════════════════════════════ */

[data-design="a"] .rf-hero {
  position: relative;
  min-height: clamp(420px, 78vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* ── Hero substrate container ── */
[data-design="a"] .rf-hero__substrate {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* ── Layer 1: Board-formed concrete field ──
   Board seams: crisp vertical repeating-linear-gradient at ~100px pitch.
   Each board is ~96-100px wide; seam = 1px dark edge + 1px lighter bleed.
   Base tone: warm concrete grey, not uniform — three tonal bands baked in
   via an additional diagonal linear-gradient tonal wash.
   Tie-rod marks on ::after (small radial recesses). ── */
[data-design="a"] .rf-hero__concrete {
  position: absolute;
  inset: 0;

  /* Warm concrete base: three tonal zones (richer top, mid-tone centre, deeper base) */
  background-color: #B0AB9F;

  /* Board-form seams: crisp 1px dark edge every ~100px — the timber grain pressed in */
  background-image:
    /* Tonal modulation: diagonal wash to avoid uniform flatness — creates variance */
    linear-gradient(
      168deg,
      rgba(92, 82, 70, 0.28)  0%,
      rgba(140,130,118, 0.08) 30%,
      rgba(92, 82, 70, 0.15)  58%,
      rgba(160,152,140, 0.12) 80%,
      rgba(80, 72, 62, 0.22)  100%
    ),
    /* Board seams: vertical crisp repeating bands */
    /* Each board: ~98px of concrete surface, then a 2px seam */
    repeating-linear-gradient(
      90deg,
      transparent          0px,
      transparent         93px,
      rgba(62, 56, 48, 0.55)  93px,
      rgba(62, 56, 48, 0.55)  94px,
      rgba(180,172,160, 0.30) 94px,
      rgba(180,172,160, 0.30) 96px,
      transparent          96px,
      transparent         192px,
      rgba(62, 56, 48, 0.55) 192px,
      rgba(62, 56, 48, 0.55) 193px,
      rgba(180,172,160, 0.30) 193px,
      rgba(180,172,160, 0.30) 195px,
      transparent         195px
    ),
    /* Secondary fine grain: slight horizontal wood-grain texture of the formwork itself */
    repeating-linear-gradient(
      180deg,
      transparent         0px,
      transparent        11px,
      rgba(62, 56, 48, 0.06) 11px,
      rgba(62, 56, 48, 0.06) 12px
    );
}

/* ── Tie-rod cone marks: regular sparse grid of form-tie recesses ──
   The small circular shadow-recesses left where the tie rods
   pass through the formwork. Hard-edged, structural, not decorative. ── */
[data-design="a"] .rf-hero__tie-rods {
  position: absolute;
  inset: 0;
  /* 6×4 grid of tie marks at ~192px × ~180px pitch, offset every other row by half-pitch */
  background-image:
    /* Row A ties — flush grid */
    radial-gradient(circle at 0%   0%,   rgba(42,36,28,0.42) 0px, rgba(42,36,28,0.42) 5px, rgba(90,82,72,0.22) 5px, rgba(90,82,72,0.22) 8px, transparent 8px),
    radial-gradient(circle at 0%   0%,   rgba(200,192,180,0.20) 0px, rgba(200,192,180,0.20) 3px, transparent 3px),
    /* Cone shadow: the recess reads as a dark ring + lighter centre (the cone tip) */
    /* We paint the cone mark as a compound radial at each grid position */
    radial-gradient(circle, rgba(42,36,28,0.40) 0px, rgba(42,36,28,0.40) 4.5px, rgba(90,82,72,0.18) 4.5px, rgba(90,82,72,0.18) 7.5px, transparent 7.5px),
    radial-gradient(circle, rgba(200,192,180,0.22) 0px, rgba(200,192,180,0.22) 2.5px, transparent 2.5px);
  background-size: 192px 180px, 192px 180px, 192px 180px, 192px 180px;
  background-position:
    48px  45px,
    48px  45px,
    144px 135px,
    144px 135px;
  background-repeat: repeat;
  opacity: 0.9;
}

/* ── Layer 2: Slow raking-light sweep ──
   A narrow soft-edged diagonal highlight (simulates a low-angle
   raking light crossing the concrete face, revealing surface relief).
   Cycle: 24s. Motion amplitude: the band travels ~120% of width,
   so a 2-second slice (T=0 vs T+2s) shows clear positional delta. ── */
[data-design="a"] .rf-hero__rake-light {
  position: absolute;
  inset: 0;
  /* The "beam": a hard-soft-hard gradient stripe, initially off left edge */
  background: linear-gradient(
    105deg,
    transparent                    0%,
    transparent                   20%,
    rgba(236, 228, 214, 0.00)     20%,
    rgba(236, 228, 214, 0.26)     31%,
    rgba(236, 228, 214, 0.58)     42%,
    rgba(236, 228, 214, 0.26)     53%,
    rgba(236, 228, 214, 0.00)     64%,
    transparent                   64%,
    transparent                  100%
  );
  /* Beam starts far left and rakes right — brighter + faster so a
     T=0 vs T=2s slice shows clear positional + luminance delta */
  transform: translateX(-140%);
  animation: fw-hero-rake 16s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes fw-hero-rake {
  0%   { transform: translateX(-140%); opacity: 0.6; }
  8%   { opacity: 1; }
  70%  { transform: translateX(160%);  opacity: 1; }
  78%  { opacity: 0.5; }
  100% { transform: translateX(160%);  opacity: 0; }
}

/* ── Tint scrim — gradient bottom-heavy for legible white text ── */
[data-design="a"] .rf-hero__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 24, 21, 0.86) 0%,
    rgba(26, 24, 21, 0.55) 40%,
    rgba(26, 24, 21, 0.28) 100%
  );
  z-index: 2;
}

/* ── Dimension-line layer — no motion, no directionality ── */
[data-design="a"] .rf-hero__rule-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

[data-design="a"] .rf-hero__rule-line {
  position: absolute;
  bottom: 38%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(242, 239, 232, 0.18);
  transform-origin: left center;
  animation: fw-hero-rule-in 2.2s var(--fw-pour-dur) both;
}

[data-design="a"] .rf-hero__rule-tick {
  position: absolute;
  bottom: 38%;
  width: 1px;
  height: 12px;
  background: rgba(242, 239, 232, 0.4);
  transform: translateY(-50%);
  animation: fw-hero-tick-in 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.4s both;
}

[data-design="a"] .rf-hero__rule-tick--l { left: clamp(16px, 4vw, 48px); }
[data-design="a"] .rf-hero__rule-tick--r { right: clamp(16px, 4vw, 48px); }

@keyframes fw-hero-rule-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

@keyframes fw-hero-tick-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Reduced-motion fallback ──
   Static but still structured: concrete field + tie rods visible,
   rake-light frozen mid-sweep at a non-trivial position. ── */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .rf-hero__rake-light {
    animation: none;
    transform: translateX(-20%);  /* beam rests partially across the face — still shows variance */
    opacity: 0.75;
  }
  [data-design="a"] .rf-hero__rule-line,
  [data-design="a"] .rf-hero__rule-tick {
    animation: none;
    opacity: 0.25;
  }
}

/* ── Hero inner text content ── */
[data-design="a"] .rf-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: var(--fw-slab) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--fw-bay);
  align-items: end;
}

[data-design="a"] .rf-hero__copy {
  display: grid;
  gap: var(--fw-board);
  max-width: 72ch;
  animation: fw-hero-copy-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}

@keyframes fw-hero-copy-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .rf-hero__copy { animation: none; }
}

[data-design="a"] .rf-hero__headline {
  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-bone);
  margin: 0;
  max-width: 22ch;
}

[data-design="a"] .rf-hero__subtitle {
  font-family: var(--fw-body);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
  color: rgba(242, 239, 232, 0.80);
  margin: 0;
  max-width: 56ch;
}

[data-design="a"] .rf-hero__proof {
  font-family: var(--fw-mono);
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.60);
  margin: 0;
}

[data-design="a"] .rf-hero__trust-chip {
  display: flex;
  align-items: center;
}

/* ── Stamps (badges) ── */
[data-design="a"] .rf-stamp {
  display: inline-block;
  font-family: var(--fw-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--fw-r-stamp);
}

[data-design="a"] .rf-stamp--ink {
  background: var(--fw-ink);
  color: var(--fw-bone);
  opacity: 0.85;
}

[data-design="a"] .rf-stamp--rust {
  background: var(--fw-rust);
  color: var(--fw-bone);
}

/* ═══════════════════════════════════════════════════════════════
   ELEMENT 2 — ANIMATED CTA
   Rust-ink stamp · board-grain · 4.8s breath · magnetic pull
═══════════════════════════════════════════════════════════════ */

[data-design="a"] .rf-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--fw-board);
  padding: 18px 28px;
  background: var(--fw-rust);
  color: var(--fw-bone);
  font-family: var(--fw-mono);
  font-size: 13px;
  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;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}

[data-design="a"] .rf-cta__grain {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    6deg,
    transparent 0 6px,
    rgba(26, 24, 21, 0.08) 6px 7px
  );
  transition: transform var(--fw-set);
  pointer-events: none;
}

[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: 12px;
  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);
}

[data-design="a"] .rf-cta--repeat,
[data-design="a"] .rf-cta--footer {
  background: var(--fw-rust);
}

@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); }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .rf-cta {
    animation: none;
  }
  [data-design="a"] .rf-cta::after,
  [data-design="a"] .rf-cta__arrow {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ELEMENT 6 — ANIMATED POINTER (hero → funnel wayfinding)
   Dimension-line drafting register — NOT a button
═══════════════════════════════════════════════════════════════ */

[data-design="a"] .fw-pointer {
  display: flex;
  justify-content: center;
  padding: clamp(40px, 8vw, 80px) 16px clamp(56px, 10vw, 96px);
  background: var(--fw-bone);
  color: var(--fw-rebar);
}

[data-design="a"] .fw-pointer__hit {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: currentColor;
}

[data-design="a"] .fw-pointer__tick {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

[data-design="a"] .fw-pointer__rule {
  display: block;
  width: 1px;
  height: 56px;
  background: currentColor;
  transform-origin: top center;
  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;
  animation: fw-pointer-stamp 5s ease-in-out infinite;
}

@keyframes fw-pointer-extend {
  0%,  100% { transform: scaleY(0.4); opacity: 0.4; }
  50%        { transform: scaleY(1);   opacity: 0.85; }
}

@keyframes fw-pointer-stamp {
  0%, 30%, 100% { opacity: 0; }
  50%, 70%      { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .fw-pointer__rule,
  [data-design="a"] .fw-pointer__label {
    animation: none;
    opacity: 0.7;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ELEMENT 5 — THE SCOPE (5-step qualifying funnel)
═══════════════════════════════════════════════════════════════ */

[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;
  color: var(--fw-ink);
  margin: var(--fw-board) 0 var(--fw-board);
}

[data-design="a"] .rf-interactive__sub {
  font-family: var(--fw-body);
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--fw-shadow);
  max-width: 56ch;
  margin: 0;
  line-height: 1.55;
}

[data-design="a"] .rf-funnel {
  max-width: 1280px;
  margin: 0 auto;
}

[data-design="a"] .rf-funnel__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--fw-rebar);
}

[data-design="a"] .rf-funnel__step {
  border-bottom: 1px solid var(--fw-rebar);
  transition: background-color var(--fw-register);
}

[data-design="a"] .rf-funnel__step[data-state="active"] {
  background: var(--fw-page);
}

[data-design="a"] .rf-funnel__step[data-state="done"] {
  background: var(--fw-bone);
}

[data-design="a"] .rf-funnel__title-block {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--fw-board);
  padding: var(--fw-board) var(--fw-bay);
  font-family: var(--fw-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fw-ink);
  cursor: pointer;
  min-height: 44px;
}

[data-design="a"] .rf-funnel__index {
  font-family: var(--fw-display);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--fw-rebar);
  font-variant-numeric: tabular-nums;
}

[data-design="a"] .rf-funnel__label {
  font-family: var(--fw-mono);
  color: var(--fw-ink);
}

[data-design="a"] .rf-funnel__stamp {
  font-family: var(--fw-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border: 1px solid var(--fw-rebar);
  color: var(--fw-shadow);
  border-radius: var(--fw-r-stamp);
}

[data-design="a"] .rf-funnel__step[data-state="done"] .rf-funnel__stamp {
  background: var(--fw-rust);
  border-color: var(--fw-rust);
  color: var(--fw-bone);
}

[data-design="a"] .rf-funnel__step[data-state="active"] .rf-funnel__stamp {
  color: var(--fw-rust);
  border-color: var(--fw-rust);
}

/* Grid-rows pour animation */
[data-design="a"] .rf-funnel__pour {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--fw-pour-dur);
  overflow: hidden;
}

[data-design="a"] .rf-funnel__step[data-state="active"] .rf-funnel__pour {
  grid-template-rows: 1fr;
}

[data-design="a"] .rf-funnel__pour-inner {
  min-height: 0;
  overflow: hidden;
}

[data-design="a"] .rf-funnel__field {
  border: 0;
  padding: var(--fw-bay);
  display: grid;
  gap: var(--fw-board);
  margin: 0;
}

[data-design="a"] .rf-funnel__field legend {
  font-family: var(--fw-body);
  font-size: clamp(18px, 2vw, 26px);
  color: var(--fw-ink);
  padding: 0 0 var(--fw-board);
  max-width: 36ch;
  line-height: 1.3;
  float: left;
  width: 100%;
}

[data-design="a"] .rf-funnel__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--fw-joint);
  clear: both;
}

[data-design="a"] .rf-funnel__choices label {
  display: flex;
  align-items: center;
  gap: var(--fw-joint);
  padding: var(--fw-board);
  border: 1px solid var(--fw-rebar);
  border-radius: var(--fw-r-cast);
  cursor: pointer;
  font-family: var(--fw-body);
  font-size: clamp(15px, 1.2vw, 17px);
  transition: border-color var(--fw-set), background-color var(--fw-set);
  min-height: 44px;
}

[data-design="a"] .rf-funnel__choices label:hover {
  border-color: var(--fw-ink);
}

[data-design="a"] .rf-funnel__choices input[type="radio"] {
  accent-color: var(--fw-rust);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
}

[data-design="a"] .rf-funnel__choices label:has(input:checked) {
  background: var(--fw-bone);
  border-color: var(--fw-rust);
}

/* Contact step inputs */
[data-design="a"] .rf-funnel__field--contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fw-bay) var(--fw-board);
}

[data-design="a"] .rf-funnel__input {
  display: grid;
  gap: 6px;
  padding: var(--fw-joint) 0;
}

[data-design="a"] .rf-funnel__input span {
  font-family: var(--fw-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fw-shadow);
}

[data-design="a"] .rf-funnel__input input,
[data-design="a"] .rf-funnel__input textarea {
  font-family: var(--fw-body);
  font-size: clamp(16px, 1.2vw, 18px);
  border: 0;
  border-bottom: 1px solid var(--fw-rebar);
  padding: 8px 0;
  background: transparent;
  color: var(--fw-ink);
  width: 100%;
  border-radius: 0;
}

[data-design="a"] .rf-funnel__input input:focus,
[data-design="a"] .rf-funnel__input textarea:focus {
  outline: none;
  border-bottom-color: var(--fw-rust);
  border-bottom-width: 2px;
}

[data-design="a"] .rf-funnel__input--textarea {
  grid-column: 1 / -1;
}

[data-design="a"] .rf-funnel__input--file {
  grid-column: 1 / -1;
}

[data-design="a"] .rf-funnel__input input[type="file"] {
  font-size: 14px;
  border-bottom: none;
  padding: 8px 0;
}

[data-design="a"] .rf-funnel__actions {
  display: flex;
  gap: var(--fw-board);
  padding: 0 var(--fw-bay) var(--fw-bay);
  flex-wrap: wrap;
  align-items: center;
}

[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;
  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);
  min-height: 44px;
  min-width: 44px;
}

[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;
  background: transparent;
  color: var(--fw-ink);
  border: 0;
  cursor: pointer;
  min-height: 44px;
}

[data-design="a"] .rf-funnel__done {
  display: block;
  padding: var(--fw-bay);
  border: 1px solid var(--fw-rebar);
  background: var(--fw-page);
  animation: fw-step-in var(--fw-pour-dur) both;
  margin-top: var(--fw-board);
}

[data-design="a"] .rf-funnel__done h3 {
  font-family: var(--fw-display);
  font-size: clamp(24px, 3.5vw, 42px);
  color: var(--fw-ink);
  margin: var(--fw-joint) 0;
  letter-spacing: -0.015em;
}

[data-design="a"] .rf-funnel__done p {
  font-family: var(--fw-body);
  color: var(--fw-shadow);
  max-width: 56ch;
  line-height: 1.55;
}

[data-design="a"] .rf-funnel__done a {
  color: var(--fw-rust);
  text-underline-offset: 3px;
}

@keyframes fw-step-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Below-funnel trust block */
[data-design="a"] .rf-funnel__trust-block {
  max-width: 1280px;
  margin: var(--fw-pour) auto 0;
  padding-top: var(--fw-board);
  border-top: 1px solid var(--fw-rebar);
}

[data-design="a"] .rf-funnel__trust-list {
  list-style: none;
  padding: 0;
  margin: var(--fw-board) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--fw-board) var(--fw-bay);
}

[data-design="a"] .rf-funnel__trust-list li {
  font-family: var(--fw-body);
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--fw-shadow);
  line-height: 1.5;
}

[data-design="a"] .rf-funnel__trust-list a {
  color: var(--fw-rust);
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .rf-funnel__pour { transition: none; }
  [data-design="a"] .rf-funnel__done { animation: none; }
}

@media (max-width: 768px) {
  [data-design="a"] .rf-funnel__title-block {
    grid-template-columns: 40px 1fr auto;
    padding: var(--fw-board);
  }
  [data-design="a"] .rf-funnel__field {
    padding: var(--fw-board);
  }
  [data-design="a"] .rf-funnel__field--contact {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .rf-funnel__actions {
    padding: 0 var(--fw-board) var(--fw-board);
  }
}

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO SECTION
═══════════════════════════════════════════════════════════════ */

[data-design="a"] .rf-portfolio {
  padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px);
  background: var(--fw-bone);
  border-top: 1px solid var(--fw-rebar);
}

[data-design="a"] .rf-portfolio__inner {
  max-width: 1280px;
  margin: 0 auto;
}

[data-design="a"] .rf-portfolio__title {
  font-family: var(--fw-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fw-ink);
  margin: var(--fw-board) 0 var(--fw-board);
}

[data-design="a"] .rf-portfolio__lead {
  font-family: var(--fw-body);
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--fw-shadow);
  max-width: 60ch;
  line-height: 1.55;
  margin: 0 0 var(--fw-pour);
}

[data-design="a"] .rf-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fw-bay);
  margin-bottom: var(--fw-pour);
}

[data-design="a"] .rf-portfolio__fig {
  margin: 0;
  display: grid;
  gap: var(--fw-board);
}

[data-design="a"] .rf-portfolio__img-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--fw-aggregate);
}

[data-design="a"] .rf-portfolio__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

[data-design="a"] .rf-portfolio__fig:hover .rf-portfolio__img-wrap img {
  transform: scale(1.03);
}

[data-design="a"] .rf-portfolio__caption {
  padding: var(--fw-joint) 0;
  border-top: 1px solid var(--fw-rebar);
}

[data-design="a"] .rf-portfolio__cta-repeat {
  border-top: 1px solid var(--fw-rebar);
  padding-top: var(--fw-bay);
  display: flex;
  align-items: center;
  gap: var(--fw-bay);
  flex-wrap: wrap;
}

[data-design="a"] .rf-portfolio__cta-note {
  font-family: var(--fw-body);
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--fw-ink);
  margin: 0;
  flex: 1;
  min-width: 200px;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .rf-portfolio__img-wrap img { transition: none; }
}

@media (max-width: 768px) {
  [data-design="a"] .rf-portfolio__grid {
    grid-template-columns: 1fr;
    gap: var(--fw-board);
  }
}

/* ═══════════════════════════════════════════════════════════════
   ELEMENT 3 — AMBIENT ANIMATED CONTENT SEGMENT A
   Services section — section-cut hairlines
═══════════════════════════════════════════════════════════════ */

[data-design="a"] .rf-ambient-a {
  position: relative;
  background: var(--fw-bone);
  padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px);
  overflow: hidden;
  border-top: 1px solid var(--fw-rebar);
}

[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__cut--top {
  top: 26%;
  animation: fw-cut-draw 22s linear infinite;
}

[data-design="a"] .rf-ambient-a__cut--bot {
  top: 74%;
  animation: fw-cut-draw 28s linear infinite;
  animation-delay: -7s;
}

[data-design="a"] .rf-ambient-a__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fw-bay);
}

[data-design="a"] .rf-ambient-a__title {
  font-family: var(--fw-display);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 112px);
  letter-spacing: -0.02em;
  line-height: 0.96;
  color: var(--fw-ink);
  margin: 0;
  max-width: 18ch;
}

[data-design="a"] .rf-ambient-a__body {
  font-family: var(--fw-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--fw-ink);
  max-width: 60ch;
}

[data-design="a"] .rf-ambient-a__strings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--fw-board);
  border-top: 1px solid var(--fw-rebar);
  padding-top: var(--fw-board);
}

[data-design="a"] .rf-ambient-a__dim {
  font-family: var(--fw-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fw-shadow);
}

@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; }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .rf-ambient-a__cut {
    animation-play-state: paused;
    transform: scaleX(1);
    opacity: 0.12;
  }
}

@media (max-width: 768px) {
  [data-design="a"] .rf-ambient-a { padding: 56px 16px; }
}

/* ── Services Index ── */
[data-design="a"] .rf-services-index {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--fw-rebar);
}

[data-design="a"] .rf-services-index__row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--fw-board);
  padding: var(--fw-bay) 0;
  border-bottom: 1px solid var(--fw-rebar);
  transition: background-color var(--fw-set);
  align-items: start;
}

[data-design="a"] .rf-services-index__row::after {
  content: "";
  display: none;
}

[data-design="a"] .rf-services-index__row:hover {
  background: rgba(26, 24, 21, 0.02);
}

[data-design="a"] .rf-services-index__num {
  font-family: var(--fw-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--fw-aggregate);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}

[data-design="a"] .rf-services-index__title {
  font-family: var(--fw-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.01em;
  color: var(--fw-ink);
  display: block;
  margin-bottom: var(--fw-joint);
}

[data-design="a"] .rf-services-index__desc {
  font-family: var(--fw-body);
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--fw-shadow);
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}

@media (max-width: 560px) {
  [data-design="a"] .rf-services-index__row {
    grid-template-columns: 48px 1fr;
    gap: var(--fw-joint);
    padding: var(--fw-board) 0;
  }
  [data-design="a"] .rf-services-index__num { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   PROCESS SECTION
═══════════════════════════════════════════════════════════════ */

[data-design="a"] .rf-process {
  padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px);
  background: var(--fw-page);
  border-top: 1px solid var(--fw-rebar);
}

[data-design="a"] .rf-process__inner {
  max-width: 1280px;
  margin: 0 auto;
}

[data-design="a"] .rf-process__title {
  font-family: var(--fw-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fw-ink);
  margin: var(--fw-board) 0 var(--fw-board);
}

[data-design="a"] .rf-process__lead {
  font-family: var(--fw-body);
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--fw-shadow);
  max-width: 56ch;
  line-height: 1.55;
  margin: 0 0 var(--fw-pour);
}

[data-design="a"] .rf-process__phases {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--fw-rebar);
}

[data-design="a"] .rf-process__phase {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--fw-board);
  padding: var(--fw-bay) 0;
  border-bottom: 1px solid var(--fw-rebar);
  align-items: start;
  counter-reset: none;
}

[data-design="a"] .rf-process__phase-num {
  font-family: var(--fw-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--fw-aggregate);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}

[data-design="a"] .rf-process__phase-content strong {
  font-family: var(--fw-display);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.01em;
  color: var(--fw-ink);
  display: block;
  margin-bottom: var(--fw-joint);
}

[data-design="a"] .rf-process__phase-content p {
  font-family: var(--fw-body);
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--fw-shadow);
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}

@media (max-width: 560px) {
  [data-design="a"] .rf-process__phase {
    grid-template-columns: 48px 1fr;
    gap: var(--fw-joint);
    padding: var(--fw-board) 0;
  }
  [data-design="a"] .rf-process__phase-num { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   ELEMENT 4 — AMBIENT ANIMATED CONTENT SEGMENT B
   About section — curing slab
═══════════════════════════════════════════════════════════════ */

[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;
  background: var(--fw-aggregate);
  animation: fw-slab-cure 18s ease-in-out infinite;
  z-index: -1;
}

[data-design="a"] .rf-ambient-b__aggregate {
  position: absolute;
  inset: 0;
  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%;
  opacity: 0.32;
  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__title {
  font-family: var(--fw-display);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 0;
  max-width: 22ch;
  color: var(--fw-bone);
}

[data-design="a"] .rf-ambient-b__body {
  font-family: var(--fw-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  max-width: 64ch;
  color: var(--fw-bone);
  display: grid;
  gap: var(--fw-board);
}

[data-design="a"] .rf-ambient-b__body p { margin: 0; }

[data-design="a"] .rf-ambient-b .rf-keynote {
  color: rgba(242, 239, 232, 0.7);
}

[data-design="a"] .rf-ambient-b__credentials {
  border-top: 1px solid rgba(242, 239, 232, 0.25);
  padding-top: var(--fw-board);
}

[data-design="a"] .rf-ambient-b__cred-list {
  list-style: none;
  padding: 0;
  margin: var(--fw-board) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--fw-board);
}

[data-design="a"] .rf-ambient-b__cred-list li {
  font-family: var(--fw-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(242, 239, 232, 0.80);
  line-height: 1.5;
}

@keyframes fw-slab-cure {
  0%,  100% { background: var(--fw-aggregate); }
  50%        { background: color-mix(in oklab, var(--fw-aggregate), var(--fw-shadow) 40%); }
}

@keyframes fw-aggregate-breath {
  0%,  100% { opacity: 0.28; transform: scale(1); }
  50%        { opacity: 0.42; transform: scale(1.012); }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .rf-ambient-b__slab,
  [data-design="a"] .rf-ambient-b__aggregate {
    animation-play-state: paused;
  }
}

@media (max-width: 768px) {
  [data-design="a"] .rf-ambient-b { padding: 56px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE AREA
═══════════════════════════════════════════════════════════════ */

[data-design="a"] .rf-service-area {
  padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px);
  background: var(--fw-bone);
  border-top: 1px solid var(--fw-rebar);
}

[data-design="a"] .rf-service-area__inner {
  max-width: 1280px;
  margin: 0 auto;
}

[data-design="a"] .rf-service-area__title {
  font-family: var(--fw-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fw-ink);
  margin: var(--fw-board) 0 var(--fw-board);
}

[data-design="a"] .rf-service-area__body {
  font-family: var(--fw-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--fw-ink);
  max-width: 60ch;
  margin: 0 0 var(--fw-board);
}

[data-design="a"] .rf-service-area__note {
  font-family: var(--fw-body);
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--fw-shadow);
  margin: 0;
}

[data-design="a"] .rf-service-area__note a {
  color: var(--fw-rust);
  text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   SHARED: rf-keynote
═══════════════════════════════════════════════════════════════ */

[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;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — title-block style + 22s draw-line
═══════════════════════════════════════════════════════════════ */

[data-design="a"] .rf-footer {
  background: var(--fw-bone);
  border-top: 1px solid var(--fw-rebar);
  padding: clamp(64px, 10vw, 112px) clamp(16px, 4vw, 48px) 0;
}

[data-design="a"] .rf-footer__rule-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: var(--fw-pour);
  overflow: hidden;
  height: 2px;
}

[data-design="a"] .rf-footer__rule-line {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--fw-ink);
  transform-origin: left center;
  animation: fw-footer-draw 22s linear infinite;
  opacity: 0;
}

@keyframes fw-footer-draw {
  0%  { transform: scaleX(0); opacity: 0; }
  8%  { opacity: 0.30; }
  80% { transform: scaleX(1); opacity: 0.30; }
  90% { opacity: 0; }
  100%{ transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .rf-footer__rule-line {
    animation: none;
    transform: scaleX(1);
    opacity: 0.20;
  }
}

[data-design="a"] .rf-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--fw-bay) var(--fw-pour);
  padding-bottom: var(--fw-pour);
  align-items: start;
}

[data-design="a"] .rf-footer__firm {
  font-family: var(--fw-display);
  font-weight: 600;
  font-size: clamp(20px, 2.5vw, 28px);
  letter-spacing: -0.015em;
  color: var(--fw-ink);
  margin: 0 0 var(--fw-board);
}

[data-design="a"] .rf-footer__license,
[data-design="a"] .rf-footer__service-area,
[data-design="a"] .rf-footer__contact {
  font-family: var(--fw-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fw-shadow);
  margin: var(--fw-joint) 0 0;
  line-height: 1.6;
}

[data-design="a"] .rf-footer__contact a {
  color: var(--fw-rust);
  text-decoration: none;
  text-underline-offset: 3px;
}

[data-design="a"] .rf-footer__contact a:hover {
  text-decoration: underline;
}

[data-design="a"] .rf-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--fw-board);
  align-self: start;
  padding-top: 4px;
}

[data-design="a"] .rf-footer__nav-link {
  font-family: var(--fw-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fw-shadow);
  text-decoration: none;
  transition: color var(--fw-set);
}

[data-design="a"] .rf-footer__nav-link:hover {
  color: var(--fw-rust);
}

[data-design="a"] .rf-footer__cta-block {
  align-self: start;
  padding-top: 4px;
}

[data-design="a"] .rf-footer__base {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--fw-board) 0 var(--fw-board);
  border-top: 1px solid var(--fw-rebar);
}

[data-design="a"] .rf-footer__copy {
  color: rgba(107, 102, 94, 0.7);
}

@media (max-width: 900px) {
  [data-design="a"] .rf-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--fw-pour);
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE DEFENSIVE BLOCK — NO HORIZONTAL SCROLL AT 320px+
═══════════════════════════════════════════════════════════════ */
[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; }