/*
 * RAD Painting & Flooring — Design B (Sunliner, slot b)
 * Scoped under [data-design="b"] throughout.
 * B distinctiveness: dusk/night-register hero (deep walnut + gold color-wash),
 * roller-coverage-sweep pointer, compact warm services palette.
 * 12 color tokens + Sunliner motion grammar.
 * MOTION GATE: only transform / opacity / clip-path / filter animated.
 * No width/height/top/left/margin/padding in transitions or keyframes.
 * Hover transforms gated in @media (hover:hover) and (pointer:fine).
 * No scale(0) entries — all start at scale(0.94)/opacity(0.8) minimum.
 */

/* ─── Token system (scoped) ────────────────────────────────────────────── */
[data-design="b"] {
  /* Canvas */
  --b-canvas:       #F4EAD0;   /* knotty-pine cream (daylit sections) */
  --b-canvas-deep:  #ECDDBC;   /* alternating sections */
  --b-panel:        #E7D4AC;   /* stamped panel ground */
  --b-surface:      #FBF4E2;   /* card stock */
  --b-surface-2:    #FFFCF2;   /* elevated — lightbox, drawer */
  /* Ink */
  --b-ink:          #2C2118;   /* walnut text */
  --b-ink-2:        #4C3A29;   /* saddle brown secondary */
  --b-muted:        #7E6B51;   /* captions, meta */
  --b-faint:        #A08C6E;   /* hairline labels */
  /* Structure */
  --b-border:       #D9C49B;
  --b-border-soft:  #E6D6B4;
  --b-line:         #C9B488;
  --b-walnut:       #3A2A1B;   /* header / footer panel */
  --b-walnut-deep:  #2A1D12;
  /* Accents (Girard color-blocking) */
  --b-gold:         #E4A627;   /* harvest gold structural */
  --b-gold-deep:    #C0821A;
  --b-gold-glow:    #F6C95C;
  --b-orange:       #CE5A22;   /* hot CTA accent */
  --b-orange-deep:  #A8430F;
  --b-orange-glow:  #F1834A;
  --b-turq:         #2BA39A;   /* cool counterpoint */
  --b-turq-deep:    #1C7B74;
  --b-avocado:      #7C8B38;   /* success / open */
  --b-avocado-deep: #5C6A26;
  --b-rust:         #A8331C;   /* critical */
  /* Dusk/night register (B hero mode — the key visual distinction from A) */
  --b-dusk-sky:     #1E2A3A;   /* deep blue-hour sky */
  --b-dusk-ground:  #14202C;   /* night ground */
  --b-dusk-ink:     #F4EAD0;   /* warm cream on night */
  --b-dusk-muted:   #B7C0C9;
  --b-dusk-neon:    #F1834A;
  /* Typography */
  --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.75rem, 1.8rem + 4.6vw, 5.5rem);
  --b-leading-body: 1.6;
  --b-leading-tight:1.05;
  --b-tracking-display: 0.005em;
  --b-tracking-mono:    0.14em;
  /* Spacing (motor-court names, 4px base) */
  --b-hair:     4px;
  --b-tight:    8px;
  --b-gap:      16px;
  --b-pad:      24px;
  --b-bay:      40px;
  --b-court:    64px;
  --b-section:  clamp(72px, 6vw + 40px, 96px);
  --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-glow:    cubic-bezier(0.45, 0, 0.2, 1);
  --b-dur-tap:    150ms;
  --b-dur-warm:   240ms;
  --b-dur-settle: 560ms;
  --b-cyc-header: 30s;
  --b-cyc-cta:    5s;
  --b-cyc-pointer:5.5s;
  --b-cyc-sky:    24s;
  --b-cyc-sunglow:11s;
  --b-cyc-fleck:  18s;
  --b-cyc-pattern:26s;
  --b-cyc-wash:   8s;     /* hero color-wash advance cycle */
  /* 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(44, 33, 26, 0.14);
  --b-shadow-sign: 5px 5px 0 0 var(--b-walnut);
  --b-shadow-lift: 0 16px 40px rgba(44, 33, 26, 0.22);
  --b-focus-ring:  0 0 0 3px rgba(43, 163, 154, 0.55);
}

/* ─── Base reset for the article ──────────────────────────────────────── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="b"].dq-design * {
  min-width: 0;
  box-sizing: border-box;
}
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

/* ─── ELEMENT 1 — Header ───────────────────────────────────────────────── */
[data-design="b"] .b-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--b-walnut);
  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: 1200px;
  margin: 0 auto;
  padding: var(--b-tight) clamp(16px, 4vw, 40px);
}
/* Logo */
[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(1.1rem, 0.9rem + 1vw, 1.6rem);
  color: var(--b-canvas);
  background: var(--b-orange);
  padding: 6px 14px;
  border-radius: var(--b-r-tab);
  box-shadow: var(--b-shadow-sign);
}
[data-design="b"] .b-logo__mark { display: inline-block; }
/* Sunburst atmospheric layer (header) */
[data-design="b"] .b-header__sun {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(120px, 20vw, 300px);
  width: 130px;
  height: 130px;
  transform: translateY(-50%);
  color: var(--b-gold);
  opacity: 0.40;
  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 {
  transform-origin: 60px 60px;
  animation: b-sunpulse 9s var(--b-ease-glow) infinite;
}
@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-canvas);
  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 */
[data-design="b"] .b-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: color-mix(in oklab, var(--b-walnut-deep), transparent 6%);
}
[data-design="b"] .b-drawer[hidden] { display: none; }
[data-design="b"] .b-drawer__panel {
  max-width: 1200px;
  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-canvas);
  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); }

/* ─── CTA component (all variants) ────────────────────────────────────── */
[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-surface-2);
  background: var(--b-orange);
  padding: 14px 26px;
  min-height: 48px;
  border-radius: var(--b-r-sign);
  box-shadow: var(--b-shadow-sign);
  border: 0;
  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);
}
[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 26px 5px rgba(246, 201, 92, 0.50); }
}
[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(3px, 3px);
  background: var(--b-orange-deep);
  box-shadow: 2px 2px 0 0 var(--b-walnut);
}
[data-design="b"] .b-cta--drawer {
  background: var(--b-gold);
  color: var(--b-walnut-deep);
  font-size: var(--b-text-h3);
}
[data-design="b"] .b-cta--drawer-phone {
  background: transparent;
  color: var(--b-canvas);
  font-size: var(--b-text-lead);
  box-shadow: none;
  padding-left: 0;
}
[data-design="b"] .b-cta--ghost {
  background: transparent;
  color: var(--b-ink);
  box-shadow: 0 0 0 1.5px var(--b-border);
  font-size: var(--b-text-body);
  padding: 10px 20px;
  min-height: 44px;
}
[data-design="b"] .b-cta--funnel {
  font-size: var(--b-text-body);
  padding: 12px 24px;
  min-height: 44px;
}
[data-design="b"] .b-cta--footer {
  font-size: var(--b-text-body);
  padding: 12px 24px;
  min-height: 44px;
}
/* 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);
}

/* ─── HERO (Element 3 backdrop + text plate) ───────────────────────────── */
/* isolation:isolate ensures no backdrop can paint over text */
[data-design="b"] .b-hero {
  position: relative;
  isolation: isolate;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  background: var(--b-dusk-ground);
}
/* All backdrop layers: z-index ≤ 3, pointer-events:none */
[data-design="b"] .b-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Layer 1: deep dusk ground */
[data-design="b"] .b-hero__ground {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--b-dusk-sky) 0%, var(--b-dusk-ground) 60%, var(--b-walnut-deep) 100%);
}
/* Layer 2: color-wash fill (wet-edge advance left→right — transform:scaleX only) */
[data-design="b"] .b-hero__wash {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: linear-gradient(110deg,
    rgba(228, 166, 39, 0.22) 0%,
    rgba(206, 90, 34, 0.18) 40%,
    rgba(43, 163, 154, 0.12) 80%,
    transparent 100%
  );
  animation: b-wash-advance var(--b-cyc-wash) var(--b-ease-glow) infinite alternate;
}
@keyframes b-wash-advance {
  from { opacity: 0.55; transform: scaleX(0.88); }
  to   { opacity: 0.90; transform: scaleX(1.04); }
}
/* Layer 3: swatch SVG — enters from lower-left via translateY (NOT height) */
[data-design="b"] .b-hero__swatches {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
[data-design="b"] .b-swatches__svg {
  width: 100%;
  height: 100%;
}
[data-design="b"] .b-swatch {
  opacity: 0;
  animation: b-swatch-bloom var(--b-dur-settle) var(--b-ease-sunrise) forwards;
}
[data-design="b"] .b-swatch--1 { fill: rgba(228,166,39,0.38); animation-delay: 0.1s; }
[data-design="b"] .b-swatch--2 { fill: rgba(206,90,34,0.28);  animation-delay: 0.22s; }
[data-design="b"] .b-swatch--3 { fill: rgba(43,163,154,0.22); animation-delay: 0.34s; }
[data-design="b"] .b-swatch--4 { fill: rgba(124,139,56,0.20); animation-delay: 0.46s; }
[data-design="b"] .b-swatch--5 { fill: rgba(228,166,39,0.18); animation-delay: 0.58s; }
/* Swatch bloom: arrival via translateY + opacity (never scale(0)) */
@keyframes b-swatch-bloom {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Ambient swatch drift after bloom (use a separate animation layered) */
[data-design="b"] .b-hero__swatches .b-swatches__svg {
  animation: b-swatch-drift 20s var(--b-ease-glow) 0.8s infinite alternate;
}
@keyframes b-swatch-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}
/* Layer 4: sun glow */
[data-design="b"] .b-hero__glow {
  position: absolute;
  top: 12%;
  right: 14%;
  width: clamp(140px, 22vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(246,201,92,0.70) 0%,
    rgba(246,201,92,0.22) 42%,
    transparent 70%
  );
  animation: b-sunglow var(--b-cyc-sunglow) var(--b-ease-glow) infinite alternate;
  pointer-events: none;
}
@keyframes b-sunglow {
  from { opacity: 0.55; transform: scale(0.96); }
  to   { opacity: 1;    transform: scale(1.04); }
}
/* Layer 5: hairline wet-edge rule — scaleX draw-in (not width) */
[data-design="b"] .b-hero__edge {
  position: absolute;
  bottom: clamp(80px, 16%, 180px);
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--b-gold) 0%, var(--b-orange) 60%, transparent 100%);
  transform-origin: left center;
  transform: scaleX(0);
  animation: b-edge-draw 1.2s var(--b-ease-sunrise) 0.4s forwards;
  pointer-events: none;
  opacity: 0.60;
}
@keyframes b-edge-draw {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 0.60; }
}
/* Readability scrim */
[data-design="b"] .b-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg,
    rgba(20, 24, 28, 0.72) 0%,
    rgba(20, 24, 28, 0.20) 50%,
    transparent 72%
  );
  pointer-events: none;
}
/* Hero plate — z-index:10, above all backdrop layers + scrim */
[data-design="b"] .b-hero__plate {
  position: relative;
  z-index: 10;
  max-width: 600px;
  margin: 0 clamp(16px, 5vw, 64px) clamp(40px, 7vh, 80px);
  color: var(--b-dusk-ink);
  display: grid;
  gap: var(--b-gap);
}
[data-design="b"] .b-hero__chip { 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;
  text-shadow: 0 2px 20px rgba(10, 12, 16, 0.55);
  /* opacity:1 at first paint — mandatory */
  opacity: 1;
}
[data-design="b"] .b-hero__essence {
  font-size: var(--b-text-lead);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
  opacity: 1;
  line-height: var(--b-leading-body);
}
[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;
  opacity: 1;
}

/* ─── ELEMENT 6 — Pointer (wet-edge coverage sweep) ───────────────────── */
/* Height >> 8px; opacity:1 at rest; NOT a button; immediately before #funnel */
[data-design="b"] .b-pointer {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: var(--b-tight);
  padding-block: var(--b-court);
  min-height: 120px;    /* HARD: ≥24px — well above floor */
  background: var(--b-canvas);
  cursor: pointer;
  opacity: 1;           /* opacity:1 at rest — hard gate */
}
[data-design="b"] .b-pointer__track {
  position: relative;
  width: min(320px, 90vw);
  height: 40px;
  display: flex;
  align-items: center;
}
/* Wet-edge advancing line — scaleX from 0 to 1, no width animation */
[data-design="b"] .b-pointer__edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, var(--b-gold) 0%, var(--b-orange) 100%);
  transform-origin: left center;
  border-radius: var(--b-r-pill);
  animation: b-pointer-sweep var(--b-cyc-pointer) var(--b-ease-arc) infinite;
}
@keyframes b-pointer-sweep {
  0%   { transform: scaleX(0);    opacity: 0.60; }
  55%  { transform: scaleX(1);    opacity: 1; }
  100% { transform: scaleX(0.96); opacity: 0.80; }
}
/* Roller SVG rides the advancing edge — translateX (not left) */
[data-design="b"] .b-pointer__roller {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 36px;
  animation: b-roller-ride var(--b-cyc-pointer) var(--b-ease-arc) infinite;
  filter: drop-shadow(0 1px 4px rgba(228,166,39,0.45));
}
@keyframes b-roller-ride {
  0%   { transform: translateX(-40px) translateY(-50%); opacity: 0.6; }
  55%  { transform: translateX(calc(min(320px, 90vw) - 80px)) translateY(-50%); opacity: 1; }
  100% { transform: translateX(calc(min(320px, 90vw) - 76px)) translateY(-50%); opacity: 0.8; }
}
[data-design="b"] .b-roller__frame {
  fill: none;
  stroke: var(--b-gold);
  stroke-width: 2;
}
[data-design="b"] .b-roller__body {
  fill: var(--b-gold);
  opacity: 0.80;
}
[data-design="b"] .b-roller__handle {
  stroke: var(--b-ink-2);
  stroke-width: 2;
  stroke-linecap: round;
}
[data-design="b"] .b-roller__cap {
  fill: var(--b-ink-2);
}
[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);
}

/* ─── ELEMENT 5 — Funnel ───────────────────────────────────────────────── */
[data-design="b"] .b-funnel {
  background: var(--b-walnut);
  padding-block: var(--b-section);
}
[data-design="b"] .b-funnel__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .b-funnel__head { display: grid; gap: var(--b-tight); }
[data-design="b"] .b-funnel__title {
  font-family: var(--b-font-display);
  font-weight: 800;
  font-size: var(--b-text-h2);
  color: var(--b-dusk-ink);
  margin: 0;
}
[data-design="b"] .b-funnel__sub {
  font-size: var(--b-text-body);
  color: var(--b-dusk-muted);
  margin: 0;
  max-width: 58ch;
  line-height: var(--b-leading-body);
}
/* Step indicators */
[data-design="b"] .b-funnel__steps {
  display: flex;
  gap: var(--b-gap);
  flex-wrap: wrap;
}
[data-design="b"] .b-funnel__step {
  display: flex;
  align-items: center;
  gap: var(--b-tight);
  opacity: 0.45;
  transition: opacity var(--b-dur-warm) var(--b-ease-sunrise);
}
[data-design="b"] .b-funnel__step--active { opacity: 1; }
[data-design="b"] .b-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--b-gold);
  color: var(--b-walnut-deep);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-meta);
  font-weight: 700;
  letter-spacing: 0;
}
[data-design="b"] .b-step__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-dusk-ink);
}
/* Panels */
[data-design="b"] .b-funnel__panels { position: relative; }
[data-design="b"] .b-funnel__panel {
  display: none;
  animation: b-panel-in var(--b-dur-settle) var(--b-ease-sunrise) forwards;
}
[data-design="b"] .b-funnel__panel--active { display: grid; gap: var(--b-bay); }
@keyframes b-panel-in {
  from { opacity: 0.80; transform: translateY(10px); }
  to   { opacity: 1;    transform: translateY(0); }
}
[data-design="b"] .b-funnel__question {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h3);
  color: var(--b-dusk-ink);
  margin: 0;
}
/* Option buttons */
[data-design="b"] .b-funnel__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--b-gap);
}
[data-design="b"] .b-option {
  display: flex;
  align-items: center;
  gap: var(--b-tight);
  padding: 14px var(--b-pad);
  min-height: 56px;
  background: var(--b-walnut-deep);
  border: 2px solid var(--b-walnut);
  border-radius: var(--b-r-card);
  color: var(--b-dusk-ink);
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--b-dur-warm) var(--b-ease-glow),
    background-color var(--b-dur-warm) var(--b-ease-glow),
    transform var(--b-dur-tap) var(--b-ease-sunrise);
}
[data-design="b"] .b-option[aria-pressed="true"] {
  background: var(--b-gold);
  border-color: var(--b-gold-deep);
  color: var(--b-walnut-deep);
}
[data-design="b"] .b-option:focus-visible {
  outline: none;
  box-shadow: var(--b-focus-ring);
}
[data-design="b"] .b-option__icon { font-size: 1.2em; flex-shrink: 0; }
[data-design="b"] .b-option__label { flex: 1; }
/* Nav row */
[data-design="b"] .b-funnel__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--b-gap);
}
[data-design="b"] .b-funnel__nav--split {
  justify-content: space-between;
}
[data-design="b"] .b-cta--funnel:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}
/* Contact form fields */
[data-design="b"] .b-contact-form { display: grid; gap: var(--b-gap); }
[data-design="b"] .b-field-group { display: grid; gap: var(--b-hair); }
[data-design="b"] .b-field-group__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-dusk-muted);
}
[data-design="b"] .b-field-group__req,
[data-design="b"] .b-field-group__opt {
  font-size: 0.88em;
  opacity: 0.7;
}
[data-design="b"] .b-field {
  background: var(--b-walnut-deep);
  border: 1.5px solid var(--b-walnut);
  border-radius: var(--b-r-tab);
  color: var(--b-dusk-ink);
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  padding: 12px 16px;
  min-height: 48px;
  transition: border-color var(--b-dur-warm) var(--b-ease-glow);
}
[data-design="b"] .b-field:focus {
  outline: none;
  border-color: var(--b-turq);
  box-shadow: var(--b-focus-ring);
}
[data-design="b"] .b-field--textarea {
  min-height: 96px;
  resize: vertical;
}
/* Confirmation panel */
[data-design="b"] .b-funnel__confirm { background: transparent; }
[data-design="b"] .b-confirm__inner {
  display: grid;
  gap: var(--b-bay);
  justify-items: center;
  text-align: center;
  padding: var(--b-court) 0;
}
[data-design="b"] .b-confirm__mark {
  font-size: 3rem;
  color: var(--b-avocado);
  line-height: 1;
}
[data-design="b"] .b-confirm__head {
  font-family: var(--b-font-display);
  font-weight: 800;
  font-size: var(--b-text-h3);
  color: var(--b-dusk-ink);
  margin: 0;
}
[data-design="b"] .b-confirm__body {
  font-size: var(--b-text-body);
  color: var(--b-dusk-muted);
  margin: 0;
  max-width: 52ch;
  line-height: var(--b-leading-body);
}
/* Trust line */
[data-design="b"] .b-funnel__trust {
  font-family: var(--b-font-mono);
  font-size: var(--b-text-meta);
  color: var(--b-dusk-muted);
  letter-spacing: var(--b-tracking-mono);
  text-align: center;
  margin: 0;
}
[data-design="b"] .b-funnel__trust a {
  color: var(--b-gold-glow);
  text-decoration: none;
}

/* ─── Before / After section (Element 4 ambient + ba-grid) ─────────────── */
[data-design="b"] .b-beforeafter {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--b-canvas-deep);
  padding-block: var(--b-section);
}
/* Atomic-pattern field (Element 4) */
[data-design="b"] .b-atomic-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.14;
  pointer-events: none;
}
[data-design="b"] .b-atomfield__svg { width: 130%; height: 100%; }
[data-design="b"] .b-af-gold  { color: var(--b-gold); }
[data-design="b"] .b-af-turq  { color: var(--b-turq); }
[data-design="b"] .b-af-orange{ color: var(--b-orange); }
[data-design="b"] .b-af-avocado { color: var(--b-avocado); }
[data-design="b"] .b-atomfield__g {
  transform-box: fill-box;
  animation: b-atomdrift var(--b-cyc-pattern) var(--b-ease-glow) infinite alternate;
}
@keyframes b-atomdrift {
  from { transform: translate3d(0, 0, 0); opacity: 0.7; }
  to   { transform: translate3d(-28px, 10px, 0); opacity: 1; }
}
[data-design="b"] .b-beforeafter__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-vista);
}
/* BA Cards */
[data-design="b"] .b-ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 4vw, 48px);
}
[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);
}
[data-design="b"] .b-ba-card__field {
  height: 200px;
  position: relative;
  overflow: clip;
}
[data-design="b"] .b-ba-card__field--paint {
  background: linear-gradient(135deg, var(--b-walnut) 0%, var(--b-dusk-sky) 100%);
}
[data-design="b"] .b-ba-card__field--floor {
  background: linear-gradient(135deg, var(--b-panel) 0%, var(--b-walnut) 80%);
}
[data-design="b"] .b-ba-card__field--drywall {
  background: linear-gradient(135deg, var(--b-canvas-deep) 0%, var(--b-panel) 60%, var(--b-walnut) 100%);
}
/* Color wash on BA cards (scroll-reveal via IntersectionObserver in JS) */
[data-design="b"] .b-ba-card__wash {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(228,166,39,0.45) 0%, rgba(206,90,34,0.30) 60%, transparent 100%);
  transition: transform 1.2s var(--b-ease-arc); /* motion-exception: scroll-reveal ambient wash, not a UI interaction — 1.2s is intentional coverage-sweep pacing */
}
[data-design="b"] .b-ba-card.is-visible .b-ba-card__wash {
  transform: scaleX(1);
}
[data-design="b"] .b-ba-card__wash--floor {
  background: linear-gradient(90deg, rgba(43,163,154,0.40) 0%, rgba(124,139,56,0.30) 60%, transparent 100%);
}
[data-design="b"] .b-ba-card__wash--drywall {
  background: linear-gradient(90deg, rgba(228,166,39,0.35) 0%, rgba(228,166,39,0.20) 70%, transparent 100%);
}
[data-design="b"] .b-ba-card__caption {
  padding: var(--b-pad);
  display: grid;
  gap: var(--b-tight);
}
[data-design="b"] .b-ba-card__scope {
  font-family: var(--b-font-mono);
  font-size: var(--b-text-meta);
  letter-spacing: var(--b-tracking-mono);
  text-transform: uppercase;
  color: var(--b-orange);
  font-weight: 700;
}
[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);
}
/* Repeated CTA */
[data-design="b"] .b-ba__cta-repeat {
  display: flex;
  justify-content: center;
}

/* ─── SERVICES ────────────────────────────────────────────────────────── */
[data-design="b"] .b-services {
  background: var(--b-canvas);
  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-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: clamp(24px, 3vw, 32px);
}
[data-design="b"] .b-service-card {
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-card);
  padding: var(--b-pad);
  box-shadow: var(--b-shadow-card);
  display: grid;
  gap: var(--b-tight);
}
[data-design="b"] .b-service-card__icon { font-size: 1.8rem; }
[data-design="b"] .b-service-card__name {
  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-service-card__desc {
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  line-height: var(--b-leading-body);
}

/* ─── PROCESS ─────────────────────────────────────────────────────────── */
[data-design="b"] .b-process {
  background: var(--b-canvas-deep);
  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-process__track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--b-court);
  counter-reset: none;
}
[data-design="b"] .b-process__phase {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--b-pad);
  align-items: start;
}
[data-design="b"] .b-phase__num {
  font-family: var(--b-font-mono);
  font-size: var(--b-text-h3);
  letter-spacing: var(--b-tracking-mono);
  color: var(--b-orange);
  line-height: 1;
  padding-top: 4px;
}
[data-design="b"] .b-phase__body { display: grid; gap: var(--b-tight); }
[data-design="b"] .b-phase__name {
  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-phase__desc {
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  line-height: var(--b-leading-body);
}

/* ─── ABOUT ───────────────────────────────────────────────────────────── */
[data-design="b"] .b-about {
  background: var(--b-canvas);
  padding-block: var(--b-section);
}
[data-design="b"] .b-about__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .b-about__card {
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-card);
  padding: var(--b-pad);
  display: grid;
  gap: var(--b-gap);
}
[data-design="b"] .b-about__bio {
  font-size: var(--b-text-body);
  color: var(--b-ink);
  margin: 0;
  line-height: var(--b-leading-body);
}
[data-design="b"] .b-about__contact {
  font-family: var(--b-font-mono);
  font-size: var(--b-text-cap);
  color: var(--b-muted);
  letter-spacing: var(--b-tracking-mono);
  margin: 0;
}

/* ─── 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: 760px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-gap);
}
[data-design="b"] .b-area__line {
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  line-height: var(--b-leading-body);
}

/* ─── FOOTER ──────────────────────────────────────────────────────────── */
[data-design="b"] .b-footer {
  background: var(--b-walnut-deep);
  padding-block: var(--b-section);
  border-top: 3px solid var(--b-gold);
}
[data-design="b"] .b-footer__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-gap);
  justify-items: center;
  text-align: center;
}
[data-design="b"] .b-footer__name {
  font-family: var(--b-font-display);
  font-weight: 800;
  font-size: var(--b-text-h3);
  color: var(--b-dusk-ink);
  margin: 0;
}
[data-design="b"] .b-footer__line {
  font-family: var(--b-font-mono);
  font-size: var(--b-text-meta);
  color: var(--b-dusk-muted);
  letter-spacing: var(--b-tracking-mono);
  text-transform: uppercase;
  margin: 0;
}
[data-design="b"] .b-footer__phone { margin: 0; }
[data-design="b"] .b-footer__link {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h3);
  color: var(--b-gold-glow);
  text-decoration: none;
}
[data-design="b"] .b-footer__copy {
  font-family: var(--b-font-mono);
  font-size: var(--b-text-meta);
  color: var(--b-dusk-muted);
  letter-spacing: var(--b-tracking-mono);
  margin: 0;
  opacity: 0.6;
}

/* ─── Shared text utilities ────────────────────────────────────────────── */
[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-intro {
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 62ch;
  line-height: var(--b-leading-body);
}
[data-design="b"] .b-link {
  color: var(--b-turq);
  text-decoration: none;
}

/* ─── Hover states (fine pointer only) ─────────────────────────────────── */
@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--ghost:hover {
    background: var(--b-canvas-deep);
    transform: none;
  }
  [data-design="b"] .b-logo:hover {
    transform: translate(-1px, -1px);
  }
  [data-design="b"] .b-navlink:hover::after {
    transform: scaleX(1);
  }
  [data-design="b"] .b-option:hover:not([aria-pressed="true"]) {
    background: rgba(228, 166, 39, 0.14);
    border-color: var(--b-gold);
  }
  [data-design="b"] .b-ba-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--b-shadow-lift);
  }
  [data-design="b"] .b-service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--b-shadow-lift);
  }
  /* Transitions for hover lifts */
  [data-design="b"] .b-ba-card,
  [data-design="b"] .b-service-card {
    transition:
      transform var(--b-dur-warm) var(--b-ease-sunrise),
      box-shadow var(--b-dur-warm) var(--b-ease-sunrise);
  }
}

/* ─── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-sunburst,
  [data-design="b"] .b-sunburst__core { animation: none; }
  [data-design="b"] .b-hero__wash { animation: none; opacity: 0.75; transform: scaleX(1); }
  [data-design="b"] .b-hero__glow { animation: none; opacity: 0.75; }
  [data-design="b"] .b-hero__edge { animation: none; transform: scaleX(1); opacity: 0.55; }
  [data-design="b"] .b-swatches__svg { animation: none; }
  [data-design="b"] .b-swatch { animation: none; opacity: 0.80; transform: none; }
  [data-design="b"] .b-pointer__edge { animation: none; transform: scaleX(1); opacity: 0.8; }
  [data-design="b"] .b-pointer__roller { animation: none; opacity: 0.8; }
  [data-design="b"] .b-cta__halo { animation: none; box-shadow: 0 0 14px 1px rgba(241,131,74,0.3); }
  [data-design="b"] .b-atomfield__g { animation: none; }
  [data-design="b"] .b-drawer.is-open .b-drawer__panel { animation: none; transform: none; opacity: 1; }
  [data-design="b"] .b-funnel__panel--active { animation: none; }
  [data-design="b"] .b-ba-card__wash { transition: none; }
}

/* ─── Mobile responsive (scoped to .dq-design — never bare [data-design]) ── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 640px) {
  [data-design="b"] .b-header__sun { left: auto; right: 12px; opacity: 0.22; width: 90px; height: 90px; }
  [data-design="b"] .b-hero__plate { margin-inline: 16px; max-width: none; }
  [data-design="b"] .b-pointer { padding-block: var(--b-bay); }
  [data-design="b"] .b-funnel__steps { gap: var(--b-tight); }
  [data-design="b"] .b-step__label { display: none; }
  [data-design="b"] .b-funnel__options {
    grid-template-columns: 1fr 1fr;
  }
  [data-design="b"] .b-ba-grid { grid-template-columns: 1fr; }
  [data-design="b"] .b-services__grid { grid-template-columns: 1fr; }
  [data-design="b"] .b-process__phase { grid-template-columns: 40px 1fr; gap: var(--b-gap); }
}

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