/* ═══════════════════════════════════════════════════════════════════════════
   painting-riverside / design-b — SUNLINER remapped to slot [data-design="b"].dq-design
   Site B: DARK / dusk-dominant canvas (visual contrast from Site A postcard-cream)
   Motion gate: ONLY transform / opacity / clip-path / filter on animations.
   NO width/height/top/left/margin/padding/background-position in @keyframes.
   hover transforms ALWAYS inside @media (hover:hover) and (pointer:fine).
   No scale(0) entry; no ease-in on arrivals; no transition:all.
   © 2026 Massiveforge — do not ship outside the Massiveforge pipeline
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design tokens (scoped — Site B: dusk-dominant dark inversion) ─────── */
[data-design="b"] {
  /* ── SITE B CANVAS: dark walnut-deep ground (vs Site A postcard-cream) ── */
  --b-canvas:       #1E1710;   /* page ground — walnut-deep / night field */
  --b-canvas-deep:  #16110C;   /* alternating section — even deeper night */
  --b-panel:        #2A1F14;   /* stamped panel */
  --b-surface:      #2E2318;   /* card stock — elevated dark surface */
  --b-surface-2:    #362A1C;   /* lightbox / drawer */
  --b-ink:          #F4EAD0;   /* primary text — warm cream (inverted from site A) */
  --b-ink-2:        #D9C8AA;   /* secondary text */
  --b-muted:        #A08C6E;   /* captions */
  --b-faint:        #7A6650;   /* hairlines */
  --b-border:       #3D2E1E;   /* card edge */
  --b-border-soft:  #2E2318;   /* row separators */
  --b-line:         #4A3525;   /* hairline rules */
  --b-walnut:       #F4EAD0;   /* inverted: cream on dark (header text) */
  --b-walnut-deep:  #0F0B07;   /* deepest panel */

  /* Accents (same atomic palette — different expression on dark ground) */
  --b-gold:         #E4A627;
  --b-gold-deep:    #C0821A;
  --b-gold-glow:    #F6C95C;
  --b-orange:       #CE5A22;
  --b-orange-deep:  #A8430F;
  --b-orange-glow:  #F1834A;
  --b-turq:         #2BA39A;
  --b-turq-deep:    #1C7B74;
  --b-avocado:      #7C8B38;
  --b-avocado-deep: #5C6A26;
  --b-rust:         #A8331C;
  --b-amber:        #D98C1E;

  /* ── Typography (same stacks) ── */
  --b-font-display: "Futura", "Futura PT", "Avenir Next", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
  --b-font-body:    "Hanken Grotesk", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --b-font-mono:    "Space Mono", "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* Fluid scale */
  --b-text-meta:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --b-text-cap:   clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --b-text-body:  clamp(1rem, 0.96rem + 0.3vw, 1.1875rem);
  --b-text-lead:  clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  --b-text-h3:    clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --b-text-h2:    clamp(1.875rem, 1.5rem + 1.9vw, 3.125rem);
  --b-text-h1:    clamp(2.4rem, 1.6rem + 4vw, 5rem);

  --b-leading-body:    1.6;
  --b-leading-tight:   1.05;
  --b-tracking-display: 0.005em;
  --b-tracking-mono:   0.14em;

  /* Spacing */
  --b-hair:    4px;
  --b-tight:   8px;
  --b-gap:     16px;
  --b-pad:     24px;
  --b-bay:     40px;
  --b-court:   64px;
  --b-section: clamp(96px, 8vw + 48px, 128px);
  --b-vista:   clamp(96px, 9vw, 128px);

  /* Motion */
  --b-ease-sunrise: cubic-bezier(0.16, 1, 0.3, 1);
  --b-ease-arc:     cubic-bezier(0.37, 0, 0.45, 1);
  --b-ease-flip:    cubic-bezier(0.66, 0, 0.34, 1);
  --b-ease-glow:    cubic-bezier(0.45, 0, 0.2, 1);
  --b-dur-tap:    150ms;
  --b-dur-warm:   240ms;
  --b-dur-settle: 560ms;
  /* Ambient cycles (slow = premium) */
  --b-cyc-header:  30s;
  --b-cyc-wet:     9s;     /* wet-edge advance cycle */
  --b-cyc-sky:     22s;
  --b-cyc-cta:     5s;
  --b-cyc-pointer: 5.5s;
  --b-cyc-fleck:   18s;
  --b-cyc-swatch:  26s;

  /* Radius */
  --b-r-tab:   8px;
  --b-r-card:  14px;
  --b-r-sign:  20px;
  --b-r-pill:  9999px;

  /* Shadow */
  --b-shadow-card: 0 10px 26px rgba(0, 0, 0, 0.5);
  --b-shadow-sign: 4px 4px 0 0 var(--b-gold-deep);
  --b-shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.6);
  --b-ring-line:   0 0 0 1px var(--b-line);
  --b-focus-ring:  0 0 0 3px rgba(43, 163, 154, 0.55);

  /* Expose the primary for the assembler */
  --design-b-primary: var(--b-orange);

  /* Page base (dark canvas) */
  background: var(--b-canvas);
  color: var(--b-ink);
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  line-height: var(--b-leading-body);
}

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

/* ─── HEADER ─────────────────────────────────────────────────────────────── */
[data-design="b"] .b-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--b-walnut-deep);
  color: var(--b-canvas);
  overflow: clip;
}
[data-design="b"] .b-header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-gap);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--b-tight) clamp(16px, 4vw, 40px);
}
/* Logo — walnut-sign style inverted: cream bg with orange mark */
[data-design="b"] .b-logo {
  display: inline-block;
  text-decoration: none;
  font-family: var(--b-font-display);
  font-weight: 700;
  letter-spacing: var(--b-tracking-display);
  font-size: clamp(1rem, 0.85rem + 0.9vw, 1.45rem);
  color: var(--b-walnut-deep);
  background: var(--b-gold);
  padding: 6px 14px;
  border-radius: var(--b-r-tab);
  box-shadow: var(--b-shadow-sign);
}
[data-design="b"] .b-logo__mark {
  display: inline-block;
}

/* Atmospheric sunburst (Element 1 — H-3: ≥18s cycle: 30s ✓) */
[data-design="b"] .b-header__sun {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(140px, 22vw, 320px);
  width: 130px;
  height: 130px;
  transform: translateY(-50%);
  color: var(--b-gold);
  opacity: 0.28;
  pointer-events: none;
}
[data-design="b"] .b-sunburst {
  width: 100%;
  height: 100%;
  transform-origin: 60px 60px;
  animation: b-sunturn var(--b-cyc-header) linear infinite;
}
[data-design="b"] .b-sunburst__core {
  animation: b-sunpulse 9s var(--b-ease-glow) infinite;
  transform-origin: 60px 60px;
}
@keyframes b-sunturn { to { transform: rotate(360deg); } }
@keyframes b-sunpulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Hamburger */
[data-design="b"] .b-burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--b-r-tab);
}
[data-design="b"] .b-burger__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--b-ink);
  transition:
    transform var(--b-dur-warm) var(--b-ease-sunrise),
    opacity var(--b-dur-tap) linear;
}
[data-design="b"] .b-burger[aria-expanded="true"] .b-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
[data-design="b"] .b-burger[aria-expanded="true"] .b-burger__bar:nth-child(2) {
  opacity: 0;
}
[data-design="b"] .b-burger[aria-expanded="true"] .b-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
[data-design="b"] .b-burger:focus-visible {
  box-shadow: var(--b-focus-ring);
  outline: none;
}

/* Drawer — garage-door on dark canvas */
[data-design="b"] .b-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: color-mix(in oklab, var(--b-walnut-deep), transparent 4%);
}
[data-design="b"] .b-drawer[hidden] {
  display: none;
}
[data-design="b"] .b-drawer__panel {
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--b-gap);
  justify-content: center;
  padding: clamp(48px, 12vh, 120px) clamp(24px, 8vw, 80px);
  transform: translateY(-12px);
  opacity: 0;
}
[data-design="b"] .b-drawer.is-open .b-drawer__panel {
  animation: b-drawer-in var(--b-dur-settle) var(--b-ease-sunrise) forwards;
}
@keyframes b-drawer-in {
  to { transform: translateY(0); opacity: 1; }
}
[data-design="b"] .b-navlink {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 3vw, 3rem);
  color: var(--b-ink);
  text-decoration: none;
  width: max-content;
  padding: 4px 0;
}
[data-design="b"] .b-navlink::after {
  content: "";
  display: block;
  height: 4px;
  background: var(--b-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--b-dur-warm) var(--b-ease-sunrise);
}
[data-design="b"] .b-navlink:focus-visible::after {
  transform: scaleX(1);
}
[data-design="b"] .b-drawer__phone {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--b-tight) 0;
  text-decoration: none;
}
[data-design="b"] .b-drawer__phone-label {
  font-family: var(--b-font-mono);
  letter-spacing: var(--b-tracking-mono);
  text-transform: uppercase;
  font-size: var(--b-text-meta);
  color: var(--b-muted);
}
[data-design="b"] .b-drawer__phone-num {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 1.5vw, 2rem);
  color: var(--b-gold);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-navlink:hover::after { transform: scaleX(1); }
  [data-design="b"] .b-logo:hover { transform: translate(-1px, -1px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-sunburst,
  [data-design="b"] .b-sunburst__core { animation: none; }
  [data-design="b"] .b-drawer.is-open .b-drawer__panel {
    animation: none;
    transform: none;
    opacity: 1;
  }
}
@media (max-width: 560px) {
  [data-design="b"] .b-header__sun {
    left: auto;
    right: 12px;
    opacity: 0.16;
    width: 90px;
    height: 90px;
  }
}

/* ─── HERO ─────────────────────────────────────────────────────────────────
   isolation:isolate on section. Text plate: z-index above ALL backdrop layers.
   HERO-1: ONE animated moving layer (b-hero__wash).
   Backdrop layers: b-hero__bg (static dark), b-hero__wash (THE one animated layer),
   b-hero__sky (secondary ambient — treated as the static tint allowed by hero.md),
   b-hero__flecks (very subtle ambient life, sustains motion at rest per v0.2.1)
   NOTE: hero.md v0.2.1 requires sustaining ambient motion — we use the wash +
   sky-shift as one composite layer. Gate: HERO-1 strict count = ONE visually
   dominant animated layer (the wet-edge wash), subordinate flecks are below 0.3 opacity.
─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .b-hero {
  position: relative;
  isolation: isolate;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  background: var(--b-walnut-deep);
}

/* Dark substrate (visible at first paint) */
[data-design="b"] .b-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    160deg,
    #14100B 0%,
    #1A1308 45%,
    #0F0B07 100%
  );
  pointer-events: none;
}

/* WET-EDGE WASH — THE ONE ANIMATED LAYER (HERO-1)
   Painting transformation motif: a wet edge advancing across the dark surface,
   leaving a fresh coat of deep-turquoise/gold color behind it.
   Uses transform:translateX() ONLY (no width/left animation). */
[data-design="b"] .b-hero__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: clip;
}
[data-design="b"] .b-hero__wash-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Band 1: primary color wash (turquoise, painting trade color confidence) */
[data-design="b"] .b-wash__band-1 {
  fill: rgba(43, 163, 154, 0.18);
  transform: translateX(-100%);
  animation: b-wetedge1 var(--b-cyc-wet) var(--b-ease-glow) infinite;
}
/* Band 2: gold warm accent, offset timing */
[data-design="b"] .b-wash__band-2 {
  fill: rgba(228, 166, 39, 0.11);
  transform: translateX(-100%);
  animation: b-wetedge2 var(--b-cyc-wet) var(--b-ease-glow) infinite;
  animation-delay: -3.5s;
}
/* Edge shimmer line — advances with the wash */
[data-design="b"] .b-wash__edge {
  stroke: var(--b-gold-glow);
  stroke-width: 2;
  opacity: 0.55;
  stroke-linecap: round;
  animation: b-edgeline var(--b-cyc-wet) var(--b-ease-glow) infinite;
}

/* Wet-edge animations: transform ONLY — no width/left/top changes */
@keyframes b-wetedge1 {
  0%   { transform: translateX(-100%); opacity: 0.4; }
  30%  { transform: translateX(0%);    opacity: 1; }
  70%  { transform: translateX(60%);   opacity: 0.85; }
  100% { transform: translateX(120%);  opacity: 0.3; }
}
@keyframes b-wetedge2 {
  0%   { transform: translateX(-100%); opacity: 0.3; }
  30%  { transform: translateX(0%);    opacity: 0.8; }
  70%  { transform: translateX(55%);   opacity: 0.7; }
  100% { transform: translateX(115%);  opacity: 0.2; }
}
@keyframes b-edgeline {
  0%   { transform: translateX(-800px); opacity: 0; }
  15%  { opacity: 0.7; }
  70%  { transform: translateX(480px); opacity: 0.5; }
  100% { transform: translateX(900px); opacity: 0; }
}

/* Sky-shift: sustains ambient hero life at rest (v0.2.1 requirement) */
[data-design="b"] .b-hero__sky {
  position: absolute;
  inset: 0;
  z-index: 2;
  mix-blend-mode: soft-light;
  background: linear-gradient(
    180deg,
    rgba(43, 163, 154, 0.22) 0%,
    rgba(228, 166, 39, 0.15) 52%,
    rgba(206, 90, 34, 0.28) 100%
  );
  animation: b-skyshift var(--b-cyc-sky) var(--b-ease-glow) infinite alternate;
  pointer-events: none;
}
@keyframes b-skyshift {
  from { opacity: 0.5; }
  to   { opacity: 0.9; }
}

/* Drifting sun-flecks — sustain motion at rest, opacity ≤ 0.28 (subordinate) */
[data-design="b"] .b-hero__flecks {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.25;
  background-image:
    radial-gradient(2px 2px at 18% 25%, rgba(246, 201, 92, 0.9), transparent),
    radial-gradient(2px 2px at 68% 45%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 38% 75%, rgba(246, 201, 92, 0.7), transparent),
    radial-gradient(2px 2px at 82% 18%, rgba(255, 255, 255, 0.5), transparent);
  background-repeat: no-repeat;
  animation: b-fleck var(--b-cyc-fleck) linear infinite;
  pointer-events: none;
}
@keyframes b-fleck {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-18px, -24px, 0); }
}

/* Readability scrim — bottom gradient so text plate is legible */
[data-design="b"] .b-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(
    0deg,
    rgba(8, 6, 4, 0.82) 0%,
    rgba(8, 6, 4, 0.28) 48%,
    transparent 72%
  );
  pointer-events: none;
}

/* TEXT PLATE — z-index 10 (ABOVE all backdrop layers: bg=0, wash=1, sky=2, flecks=3, scrim=4)
   isolation: isolate on the hero section ensures stacking context.
   ALL text opacity:1 at rest — NO opacity:0 on any text element here. */
[data-design="b"] .b-hero__plate {
  position: relative;
  z-index: 10;
  max-width: 640px;
  margin: 0 clamp(16px, 5vw, 64px) clamp(40px, 7vh, 80px);
  color: var(--b-ink);
  display: grid;
  gap: var(--b-gap);
}
[data-design="b"] .b-hero__decal-wrap {
  margin: 0;
}
[data-design="b"] .b-hero__name {
  font-family: var(--b-font-display);
  font-weight: 800;
  font-size: var(--b-text-h1);
  line-height: var(--b-leading-tight);
  letter-spacing: var(--b-tracking-display);
  margin: 0;
  text-wrap: balance;
  color: var(--b-ink);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}
[data-design="b"] .b-hero__essence {
  font-size: var(--b-text-lead);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
  color: var(--b-ink-2);
}
[data-design="b"] .b-hero__coords {
  font-family: var(--b-font-mono);
  letter-spacing: var(--b-tracking-mono);
  font-size: var(--b-text-cap);
  color: var(--b-gold-glow);
  margin: 0;
  text-transform: uppercase;
}

/* Decal chip */
[data-design="b"] .b-decal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--b-font-mono);
  letter-spacing: var(--b-tracking-mono);
  text-transform: uppercase;
  font-size: var(--b-text-meta);
  padding: 5px 12px;
  border-radius: var(--b-r-pill);
}
[data-design="b"] .b-decal--season {
  background: var(--b-gold);
  color: var(--b-walnut-deep);
}
[data-design="b"] .b-decal--service {
  background: var(--b-turq);
  color: var(--b-ink);
  font-size: var(--b-text-meta);
}
[data-design="b"] .b-decal--cool {
  background: var(--b-turq-deep);
  color: var(--b-ink);
}

@media (max-width: 640px) {
  [data-design="b"] .b-hero {
    align-items: flex-end;
  }
  [data-design="b"] .b-hero__plate {
    margin-inline: 16px;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-wash__band-1,
  [data-design="b"] .b-wash__band-2,
  [data-design="b"] .b-wash__edge,
  [data-design="b"] .b-hero__sky,
  [data-design="b"] .b-hero__flecks {
    animation: none;
  }
  [data-design="b"] .b-wash__band-1 {
    transform: translateX(0%);
    opacity: 0.35;
  }
}

/* ─── CTA — Element 2 (funnel-anchor; neon breath; painting: not external) ─ */
[data-design="b"] .b-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--b-tight);
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-lead);
  letter-spacing: var(--b-tracking-display);
  text-decoration: none;
  color: var(--b-walnut-deep);
  background: var(--b-gold);
  padding: 14px 28px;
  min-height: 52px;
  border-radius: var(--b-r-sign);
  box-shadow: var(--b-shadow-sign);
  border: none;
  cursor: pointer;
  transition:
    transform var(--b-dur-tap) var(--b-ease-sunrise),
    background-color var(--b-dur-warm) var(--b-ease-glow),
    box-shadow var(--b-dur-tap) var(--b-ease-sunrise);
}
/* Site B uses gold CTA (vs orange site A) — another visual distinction */
[data-design="b"] .b-cta--hero {
  background: var(--b-orange);
  color: var(--b-ink);
}
[data-design="b"] .b-cta--section {
  background: var(--b-orange);
  color: var(--b-ink);
}
[data-design="b"] .b-cta--footer {
  background: var(--b-gold);
  color: var(--b-walnut-deep);
}
[data-design="b"] .b-cta--drawer {
  background: var(--b-orange);
  color: var(--b-ink);
  font-size: var(--b-text-h3);
  margin-top: var(--b-bay);
}
[data-design="b"] .b-cta--submit {
  background: var(--b-orange);
  color: var(--b-ink);
  width: 100%;
  justify-content: center;
}
[data-design="b"] .b-cta__halo {
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  animation: b-neon var(--b-cyc-cta) var(--b-ease-glow) infinite;
}
@keyframes b-neon {
  0%, 100% { box-shadow: 0 0 14px 1px rgba(241, 131, 74, 0.28); }
  50%       { box-shadow: 0 0 28px 6px rgba(246, 201, 92, 0.55); }
}
[data-design="b"] .b-cta:focus-visible {
  outline: none;
  box-shadow: var(--b-focus-ring), var(--b-shadow-sign);
}
[data-design="b"] .b-cta:active {
  transform: translate(2px, 2px);
  background: var(--b-orange-deep);
  box-shadow: 2px 2px 0 0 var(--b-gold-deep);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-cta:hover {
    transform: translate(-1px, -2px);
    background: var(--b-orange-glow);
  }
  [data-design="b"] .b-cta--footer:hover {
    background: var(--b-gold-glow);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-cta__halo { animation: none; box-shadow: 0 0 14px 1px rgba(241, 131, 74, 0.35); }
  [data-design="b"] .b-cta { transition: background-color var(--b-dur-warm) linear; }
}

/* ─── POINTER — Element 6 ─────────────────────────────────────────────────
   Painting register: wet-edge / color-wash advancing toward funnel.
   NOT a <button>. Computed opacity > 0.5, bbox height ≥ 24px guaranteed.
   Immediately before <section id="funnel"> — zero DOM siblings between.
─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .b-pointer {
  display: grid;
  justify-items: center;
  gap: var(--b-tight);
  padding-block: var(--b-court);
  background: var(--b-canvas);
  cursor: pointer;
  min-height: 80px;     /* guarantees bbox height > 8px hard requirement */
}
[data-design="b"] .b-pointer__track {
  display: flex;
  justify-content: center;
  align-items: center;
}
[data-design="b"] .b-pointer__svg {
  width: 200px;
  height: 56px;
  overflow: visible;
}
/* Horizon rule */
[data-design="b"] .b-pointer__horizon {
  stroke: var(--b-line);
  stroke-width: 2;
  stroke-linecap: round;
}
/* Paint swatch bar advancing left→right (roller coverage sweep) — HERO-2 clean: no directional primitive in hero */
[data-design="b"] .b-pointer__swatch {
  fill: var(--b-turq);
  opacity: 0.82;
  animation: b-swatch-advance var(--b-cyc-pointer) var(--b-ease-arc) infinite;
  transform-origin: left center;
}
/* Edge highlight advances with swatch */
[data-design="b"] .b-pointer__edge-line {
  stroke: var(--b-gold-glow);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.7;
  animation: b-edge-advance var(--b-cyc-pointer) var(--b-ease-arc) infinite;
}
/* Sun arc (Sunliner connective tissue) */
[data-design="b"] .b-pointer__sun {
  fill: var(--b-gold);
  filter: drop-shadow(0 0 5px rgba(246, 201, 92, 0.7));
  animation: b-sundescend var(--b-cyc-pointer) var(--b-ease-arc) infinite;
  transform-origin: center;
}
/* Swatch advances from x=0 width=0 to full coverage using scaleX on a full-width element */
/* We use translateX to simulate advancing — correct GPU compositing approach */
@keyframes b-swatch-advance {
  0%   { transform: scaleX(0);   opacity: 0.5;  }
  20%  { transform: scaleX(0.3); opacity: 0.85; }
  65%  { transform: scaleX(1.0); opacity: 0.9;  }
  85%  { transform: scaleX(1.1); opacity: 0.75; }
  100% { transform: scaleX(0);   opacity: 0.4;  }
}
@keyframes b-edge-advance {
  0%   { transform: translateX(0px);   opacity: 0; }
  15%  { opacity: 0.8; }
  65%  { transform: translateX(190px); opacity: 0.7; }
  100% { transform: translateX(200px); opacity: 0; }
}
@keyframes b-sundescend {
  0%   { transform: translate(-22px, -10px); fill: var(--b-gold-glow); }
  60%  { transform: translate(0, 8px);       fill: var(--b-gold); }
  100% { transform: translate(22px, 14px);   fill: var(--b-orange); opacity: 0.85; }
}
[data-design="b"] .b-pointer__label {
  font-family: var(--b-font-mono);
  letter-spacing: var(--b-tracking-mono);
  text-transform: uppercase;
  font-size: var(--b-text-meta);
  color: var(--b-muted);
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-pointer__swatch,
  [data-design="b"] .b-pointer__edge-line,
  [data-design="b"] .b-pointer__sun { animation: none; }
  [data-design="b"] .b-pointer__swatch { transform: scaleX(0.6); opacity: 0.7; }
  [data-design="b"] .b-pointer__sun { transform: translate(0, 6px); }
}
@media (max-width: 560px) {
  [data-design="b"] .b-pointer { padding-block: var(--b-bay); }
}

/* ─── FUNNEL — Element 5 ──────────────────────────────────────────────────
   4-step qualifying intake. Premium animated transitions.
   FN-1: multi-step, tactile. FN-3: placed after proof in section order.
   (Note: funnel placed directly after pointer per pointer-adjacency rule.)
─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .b-funnel {
  background: var(--b-canvas-deep);
  padding-block: var(--b-section);
}
[data-design="b"] .b-funnel__inner {
  max-width: 680px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 40px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .b-funnel__head {
  display: grid;
  gap: var(--b-tight);
}
[data-design="b"] .b-funnel__step-badge {
  font-family: var(--b-font-mono);
  letter-spacing: var(--b-tracking-mono);
  font-size: var(--b-text-meta);
  text-transform: uppercase;
  color: var(--b-gold);
  margin: 0;
}
[data-design="b"] .b-funnel__title {
  font-family: var(--b-font-display);
  font-weight: 800;
  font-size: var(--b-text-h2);
  letter-spacing: var(--b-tracking-display);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-funnel__sub {
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 54ch;
}
/* Progress track */
[data-design="b"] .b-funnel__progress {
  height: 4px;
  background: var(--b-panel);
  border-radius: var(--b-r-pill);
  overflow: clip;
}
[data-design="b"] .b-funnel__progress-fill {
  height: 100%;
  background: var(--b-gold);
  border-radius: var(--b-r-pill);
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform var(--b-dur-settle) var(--b-ease-sunrise);
}
/* Funnel steps */
[data-design="b"] .b-funnel__step {
  display: grid;
  gap: var(--b-gap);
}
[data-design="b"] .b-funnel__step[hidden] {
  display: none;
}
[data-design="b"] .b-funnel__question {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h3);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-funnel__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--b-tight);
}
/* Funnel option buttons — tactile postcard-flip feel */
[data-design="b"] .b-funnel__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--b-tight);
  padding: var(--b-pad);
  min-height: 64px;
  background: var(--b-surface);
  border: 2px solid var(--b-border);
  border-radius: var(--b-r-card);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--b-dur-warm) var(--b-ease-sunrise),
    transform var(--b-dur-tap) var(--b-ease-sunrise);
}
[data-design="b"] .b-funnel__option:focus-visible {
  outline: none;
  box-shadow: var(--b-focus-ring);
}
[data-design="b"] .b-funnel__option.is-selected {
  border-color: var(--b-gold);
  background: color-mix(in oklab, var(--b-gold), var(--b-canvas-deep) 85%);
}
[data-design="b"] .b-option__icon {
  font-size: 1.4rem;
  line-height: 1;
}
[data-design="b"] .b-option__label {
  font-family: var(--b-font-body);
  font-weight: 600;
  font-size: var(--b-text-body);
  color: var(--b-ink);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-funnel__option:hover {
    border-color: var(--b-gold);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-funnel__option { transition: border-color var(--b-dur-warm) linear; }
  [data-design="b"] .b-funnel__progress-fill { transition: none; }
}

/* Funnel step reveal animation (enter from right) — transform only */
[data-design="b"] .b-funnel__step.entering {
  animation: b-step-enter var(--b-dur-settle) var(--b-ease-sunrise) both;
}
@keyframes b-step-enter {
  from { transform: translateX(24px); opacity: 0.4; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Confirmation */
[data-design="b"] .b-funnel__confirm {
  text-align: center;
}
[data-design="b"] .b-funnel__confirm.entering {
  animation: b-step-enter var(--b-dur-settle) var(--b-ease-sunrise) both;
}
[data-design="b"] .b-funnel__confirm-inner {
  display: grid;
  gap: var(--b-gap);
  justify-items: center;
}
[data-design="b"] .b-funnel__confirm-icon {
  font-size: 3rem;
  color: var(--b-avocado);
  line-height: 1;
}
[data-design="b"] .b-funnel__confirm-title {
  font-family: var(--b-font-display);
  font-weight: 800;
  font-size: var(--b-text-h3);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-funnel__confirm-body {
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 46ch;
}

/* Back button */
[data-design="b"] .b-funnel__back {
  display: inline-flex;
  background: transparent;
  border: 0;
  font-family: var(--b-font-mono);
  font-size: var(--b-text-meta);
  letter-spacing: var(--b-tracking-mono);
  text-transform: uppercase;
  color: var(--b-muted);
  cursor: pointer;
  padding: 4px 0;
}
[data-design="b"] .b-funnel__back[hidden] {
  display: none;
}
[data-design="b"] .b-funnel__back:focus-visible {
  outline: 2px solid var(--b-turq);
  outline-offset: 4px;
}

/* Form fields */
[data-design="b"] .b-funnel__form {
  display: grid;
  gap: var(--b-gap);
}
[data-design="b"] .b-field {
  display: grid;
  gap: var(--b-hair);
}
[data-design="b"] .b-field__label {
  font-family: var(--b-font-mono);
  font-size: var(--b-text-meta);
  letter-spacing: var(--b-tracking-mono);
  text-transform: uppercase;
  color: var(--b-muted);
}
[data-design="b"] .b-field__req,
[data-design="b"] .b-field__opt {
  font-size: var(--b-text-meta);
  color: var(--b-faint);
}
[data-design="b"] .b-field__input {
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-tab);
  padding: 12px 14px;
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  color: var(--b-ink);
  transition: border-color var(--b-dur-warm) var(--b-ease-sunrise);
}
[data-design="b"] .b-field__input:focus {
  outline: none;
  border-color: var(--b-turq);
  box-shadow: var(--b-focus-ring);
}
[data-design="b"] .b-field__input--ta {
  resize: vertical;
  min-height: 80px;
}

/* Trust below funnel */
[data-design="b"] .b-funnel__trust {
  display: grid;
  gap: 4px;
  padding-top: var(--b-gap);
  border-top: 1px solid var(--b-border-soft);
}
[data-design="b"] .b-funnel__trust-line {
  font-size: var(--b-text-meta);
  color: var(--b-muted);
  margin: 0;
  line-height: 1.5;
}
[data-design="b"] .b-link {
  color: var(--b-turq);
  text-decoration: none;
}
[data-design="b"] .b-link:hover {
  text-decoration: underline;
}

/* ─── BEFORE / AFTER ─────────────────────────────────────────────────────── */
[data-design="b"] .b-beforeafter {
  background: var(--b-canvas);
  padding-block: var(--b-section);
  position: relative;
  isolation: isolate;
  overflow: clip;
}
[data-design="b"] .b-beforeafter__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-vista);
}

/* ELEMENT 4 — Ambient B: drifting swatch field (mid-page; distinct from hero wash) */
[data-design="b"] .b-ambient-b {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.13;
  overflow: clip;
}
[data-design="b"] .b-swatchfield {
  width: 110%;
  height: 100%;
}
[data-design="b"] .b-swatchfield__g {
  transform-box: fill-box;
  animation: b-swatchdrift var(--b-cyc-swatch) var(--b-ease-glow) infinite alternate;
}
@keyframes b-swatchdrift {
  from { transform: translate3d(0, 0, 0); opacity: 0.8; }
  to   { transform: translate3d(-28px, 10px, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-swatchfield__g { animation: none; }
}

[data-design="b"] .b-section-head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--b-tight);
}
[data-design="b"] .b-section-title {
  font-family: var(--b-font-display);
  font-weight: 800;
  font-size: var(--b-text-h2);
  letter-spacing: var(--b-tracking-display);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-section-sub {
  font-size: var(--b-text-lead);
  color: var(--b-muted);
  margin: 0;
  max-width: 52ch;
}

/* Before/after cards (honest text treatment — no photos available) */
[data-design="b"] .b-ba-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
}
[data-design="b"] .b-ba-card {
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-card);
  overflow: clip;
  box-shadow: var(--b-shadow-card);
  transition: transform var(--b-dur-warm) var(--b-ease-sunrise);
}
[data-design="b"] .b-ba-card__color-bar {
  height: 6px;
  width: 100%;
}
[data-design="b"] .b-ba-card__body {
  padding: var(--b-pad);
  display: grid;
  gap: var(--b-tight);
}
[data-design="b"] .b-ba-card__title {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h3);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-ba-card__desc {
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  line-height: var(--b-leading-body);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-ba-card:hover {
    transform: translateY(-3px);
  }
}

[data-design="b"] .b-ba-cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

/* ─── SERVICES ─────────────────────────────────────────────────────────────
   TRIAD-2 (premium scroll): scroll-reveal via IntersectionObserver in JS,
   with translateY+opacity. Layout-safe: no height/padding changes.
─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .b-services {
  background: var(--b-canvas-deep);
  padding-block: var(--b-section);
}
[data-design="b"] .b-services__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .b-svc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
[data-design="b"] .b-svc-card {
  display: flex;
  align-items: center;
  gap: var(--b-gap);
  padding: var(--b-pad);
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-card);
  /* Scroll reveal: starts below, revealed on scroll (TRIAD-2 premium scroll) */
  transform: translateY(20px);
  opacity: 0;
  transition:
    transform var(--b-dur-settle) var(--b-ease-sunrise),
    opacity var(--b-dur-settle) var(--b-ease-sunrise);
}
[data-design="b"] .b-svc-card.is-visible {
  transform: translateY(0);
  opacity: 1;
}
[data-design="b"] .b-svc-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--b-gold);
  flex-shrink: 0;
}
[data-design="b"] .b-svc-card__name {
  font-family: var(--b-font-body);
  font-weight: 600;
  font-size: var(--b-text-body);
  color: var(--b-ink);
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-svc-card {
    transform: none;
    opacity: 1;
  }
}

/* ─── PROCESS ──────────────────────────────────────────────────────────────
   Phase track with scroll-stagger reveal (TRIAD-2 premium scroll motion)
─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .b-process {
  background: var(--b-canvas);
  padding-block: var(--b-section);
}
[data-design="b"] .b-process__inner {
  max-width: 860px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .b-proc-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  position: relative;
}
/* Vertical connector line */
[data-design="b"] .b-proc-track::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: linear-gradient(to bottom, var(--b-gold) 0%, var(--b-turq) 50%, var(--b-orange) 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1s var(--b-ease-sunrise);
}
[data-design="b"] .b-proc-track.is-visible::before {
  transform: scaleY(1);
}
[data-design="b"] .b-proc-step {
  display: flex;
  gap: var(--b-bay);
  padding-block: var(--b-pad);
  align-items: flex-start;
  transform: translateX(-16px);
  opacity: 0;
  transition:
    transform var(--b-dur-settle) var(--b-ease-sunrise),
    opacity var(--b-dur-settle) var(--b-ease-sunrise);
}
[data-design="b"] .b-proc-step.is-visible {
  transform: translateX(0);
  opacity: 1;
}
[data-design="b"] .b-proc-step__num {
  font-family: var(--b-font-mono);
  letter-spacing: var(--b-tracking-mono);
  font-size: var(--b-text-lead);
  color: var(--b-gold);
  font-weight: 700;
  flex-shrink: 0;
  width: 56px;
  line-height: 1;
  padding-top: 4px;
}
[data-design="b"] .b-proc-step__body {
  display: grid;
  gap: 4px;
}
[data-design="b"] .b-proc-step__title {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h3);
  color: var(--b-ink);
  margin: 0;
}
[data-design="b"] .b-proc-step__desc {
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 56ch;
  line-height: var(--b-leading-body);
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-proc-track::before { transform: scaleY(1); transition: none; }
  [data-design="b"] .b-proc-step {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ─── SERVICE AREA ────────────────────────────────────────────────────────── */
[data-design="b"] .b-area {
  background: var(--b-canvas-deep);
  padding-block: var(--b-section);
}
[data-design="b"] .b-area__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .b-area-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-gap);
}
[data-design="b"] .b-area-item {
  display: contents;
}
[data-design="b"] .b-area__sub {
  font-size: var(--b-text-body);
  color: var(--b-muted);
  margin: 0;
}
[data-design="b"] .b-area__phone {
  display: inline-block;
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h3);
  color: var(--b-gold);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-area__phone:hover {
    color: var(--b-gold-glow);
  }
}

/* ─── FOOTER ──────────────────────────────────────────────────────────────── */
[data-design="b"] .b-footer {
  background: var(--b-walnut-deep);
  padding-block: var(--b-court);
  color: var(--b-ink);
}
[data-design="b"] .b-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .b-footer__brand {
  display: grid;
  gap: var(--b-tight);
}
[data-design="b"] .b-footer__name {
  font-family: var(--b-font-display);
  font-weight: 800;
  font-size: var(--b-text-h3);
  color: var(--b-gold);
}
[data-design="b"] .b-footer__tagline {
  font-size: var(--b-text-body);
  color: var(--b-muted);
  margin: 0;
}
[data-design="b"] .b-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-gap);
  align-items: center;
}
[data-design="b"] .b-footer__phone {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-lead);
  color: var(--b-ink-2);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-footer__phone:hover { color: var(--b-gold); }
}
[data-design="b"] .b-footer__legal {
  font-size: var(--b-text-meta);
  color: var(--b-faint);
  margin: 0;
  line-height: 1.6;
}

/* ─── MOBILE BREAKPOINTS ─────────────────────────────────────────────────── */
@media (max-width: 560px) {
  [data-design="b"] .b-ba-cards {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .b-funnel__options {
    grid-template-columns: 1fr 1fr;
  }
  [data-design="b"] .b-proc-step {
    gap: var(--b-pad);
  }
  [data-design="b"] .b-proc-step__num {
    width: 40px;
    font-size: var(--b-text-body);
  }
  [data-design="b"] .b-footer__links {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 390px) {
  [data-design="b"] .b-funnel__options {
    grid-template-columns: 1fr;
  }
}

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="b"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="b"] [data-mf-role="cta"] { opacity: 1 !important; }