/* ═══════════════════════════════════════════════════════════════════════
   5 Star Painting — Design B (Sunliner remapped to [data-design="b"])
   All selectors scoped to [data-design="b"]. ZERO [data-design="b"].
   ~12–16 trade-rooted color tokens exposed on [data-design="b"] root.
   Keyframes prefixed sl- (from design.md) — no collision risk in slice scope.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TOKEN SYSTEM ──────────────────────────────────────────────────── */
[data-design="b"] {
  --design-b-primary: #E4A627;   /* harvest gold — PRIMARY warm accent */

  /* Canvas / surfaces */
  --b-canvas:      #F4EAD0;   /* page ground — warm postcard / oat stock        */
  --b-canvas-deep: #ECDDBC;   /* alternating section — knotty-pine cream        */
  --b-panel:       #E7D4AC;   /* stamped panel ground                            */
  --b-surface:     #FBF4E2;   /* card stock — light catalog paper                */
  --b-surface-2:   #FFFCF2;   /* elevated — drawer interior                      */

  /* Ink */
  --b-ink:         #2C2118;   /* primary text — walnut (never #000)              */
  --b-ink-2:       #4C3A29;   /* secondary text — saddle brown                   */
  --b-muted:       #7E6B51;   /* captions, meta — worn signage paint             */
  --b-faint:       #A08C6E;   /* hairline labels                                 */
  --b-border:      #D9C49B;   /* card edge — postcard deckle                     */
  --b-border-soft: #E6D6B4;   /* row separators                                  */
  --b-line:        #C9B488;   /* hairline rules                                  */

  /* Wood panels */
  --b-walnut:      #3A2A1B;   /* wood-panel dark band (header, footer)           */
  --b-walnut-deep: #2A1D12;   /* deepest panel / drawer ground                   */

  /* Accents (Girard color-blocking) */
  --design-b-gold:         #E4A627;  /* harvest gold / brass sun */
  --b-gold-deep:           #C0821A;  /* pressed gold                              */
  --b-gold-glow:           #F6C95C;  /* gold highlight                            */
  --design-b-orange:       #CE5A22;  /* burnt-orange — CTA / HOT focal            */
  --b-orange-deep:         #A8430F;  /* pressed neon (active)                     */
  --b-orange-glow:         #F1834A;  /* neon glow                                 */
  --design-b-turq:         #2BA39A;  /* atomic turquoise / links                  */
  --b-turq-deep:           #1C7B74;  /* pressed turquoise                         */
  --b-avocado:             #7C8B38;  /* success / open                            */
  --b-rust:                #A8331C;  /* critical / closed                         */

  /* Dusk register (mid-page night beat) */
  --b-dusk-ground: #14202C;
  --b-dusk-ink:    #F4EAD0;

  /* 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 type scale — body floor 16px mobile / 18px desktop */
  --b-text-meta:  clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);  /* 12–13px */
  --b-text-cap:   clamp(0.875rem, 0.84rem + 0.2vw,  0.9375rem);  /* 14–15px */
  --b-text-body:  clamp(1rem,     0.96rem + 0.3vw,  1.1875rem);  /* 16–19px */
  --b-text-lead:  clamp(1.125rem, 1.05rem + 0.5vw,  1.375rem);   /* 18–22px */
  --b-text-h3:    clamp(1.375rem, 1.2rem  + 0.9vw,  1.875rem);   /* 22–30px */
  --b-text-h2:    clamp(1.875rem, 1.5rem  + 1.9vw,  3.125rem);   /* 30–50px */
  --b-text-h1:    clamp(2.25rem,  1.5rem  + 3.5vw,  4.5rem);     /* 36–72px (painting is text-led) */

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

  /* Spacing (divisible by 4) */
  --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 easings */
  --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);

  /* Interaction durations (<300ms) */
  --b-dur-tap:    150ms;
  --b-dur-warm:   240ms;
  --b-dur-settle: 560ms;

  /* Ambient cycle durations (≥18s per H-3) */
  --b-cyc-header:  32s;   /* header sunburst — slow, premium (H-3 ≥18s) */
  --b-cyc-sky:     24s;   /* hero color-wash breath                       */
  --b-cyc-cta:     5s;    /* CTA neon-glow breath                         */
  --b-cyc-pointer: 5.5s;  /* pointer roller sweep                         */
  --b-cyc-pattern: 28s;   /* mid-page atomic pattern drift                */
  --b-cyc-edge:    10s;   /* hero wet-edge advance                        */

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

  /* Shadows */
  --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);
}


/* ── RESET & PAGE BASE ─────────────────────────────────────────────── */
[data-design="b"].dq-design {
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  line-height: var(--b-leading-body);
  color: var(--b-ink);
  background: var(--b-canvas);
  box-sizing: border-box;
}
[data-design="b"].dq-design *, [data-design="b"].dq-design *::before, [data-design="b"].dq-design *::after {
  box-sizing: inherit;
}


/* ══════════════════════════════════════════════════════════════════════
   E1 — ANIMATED MINIMALIST HEADER
   Wood-panel · Sunburst atmospheric layer · Hamburger · Drawer
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--b-walnut);
  color: var(--b-canvas);
  overflow: clip;
}
[data-design="b"] .sl-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);
}

/* Sunburst atmospheric layer (E1 animation) */
[data-design="b"] .sl-header__sun {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(140px, 22vw, 320px);
  width: 140px;
  height: 140px;
  transform: translateY(-50%);
  color: var(--design-b-gold);
  opacity: 0.34;
  pointer-events: none;
}
[data-design="b"] .sl-sunburst {
  width: 100%;
  height: 100%;
  transform-origin: 60px 60px;
  animation: sl-sunturn var(--b-cyc-header) linear infinite;
}
[data-design="b"] .sl-sunburst__core {
  animation: sl-sunpulse 11s var(--b-ease-glow) infinite;
  transform-origin: 60px 60px;
}
@keyframes sl-sunturn { to { transform: rotate(360deg); } }
@keyframes sl-sunpulse {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%       { opacity: 1;    transform: scale(1.04); }
}

/* Logo plate */
[data-design="b"] .sl-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.5rem);
  color: var(--b-canvas);
  background: var(--design-b-orange);
  padding: 6px 14px;
  border-radius: var(--b-r-tab);
  box-shadow: var(--b-shadow-sign);
  transition: transform var(--b-dur-tap) var(--b-ease-sunrise);
}
[data-design="b"] .sl-logo__mark { display: inline-block; }

/* Hamburger */
[data-design="b"] .sl-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);
  flex-shrink: 0;
}
[data-design="b"] .sl-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"] .sl-burger[aria-expanded="true"] .sl-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
[data-design="b"] .sl-burger[aria-expanded="true"] .sl-burger__bar:nth-child(2) {
  opacity: 0;
}
[data-design="b"] .sl-burger[aria-expanded="true"] .sl-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
[data-design="b"] .sl-burger:focus-visible {
  box-shadow: var(--b-focus-ring);
  outline: none;
}

/* Drawer — garage-door down */
[data-design="b"] .sl-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: color-mix(in oklab, var(--b-walnut-deep), transparent 4%);
}
[data-design="b"] .sl-drawer[hidden] { display: none; }
[data-design="b"] .sl-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"] .sl-drawer.is-open .sl-drawer__panel {
  animation: sl-drawer-in var(--b-dur-settle) var(--b-ease-sunrise) forwards;
}
@keyframes sl-drawer-in {
  to { transform: translateY(0); opacity: 1; }
}
[data-design="b"] .sl-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"] .sl-navlink::after {
  content: "";
  display: block;
  height: 4px;
  background: var(--design-b-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--b-dur-warm) var(--b-ease-sunrise);
}
[data-design="b"] .sl-navlink:focus-visible::after { transform: scaleX(1); }

[data-design="b"] .sl-drawer__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--b-r-pill);
  color: var(--b-canvas);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-design="b"] .sl-drawer__close:focus-visible {
  box-shadow: var(--b-focus-ring);
  outline: none;
}

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


/* ══════════════════════════════════════════════════════════════════════
   HERO — data-mf-role="hero"
   isolation: isolate — hero text z-index ABOVE all backdrop layers (HARD)
   ONE animated layer: color-wash + edge + sun-glow (compound = 1 motif)
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-hero {
  position: relative;
  isolation: isolate;          /* HARD: creates stacking context; text z-index is above backdrop */
  min-height: 92svh;
  min-height: clamp(540px, 92svh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: clip;
  background: var(--b-walnut-deep);
}

/* E3 backdrop media layer — aria-hidden, z-index: 0 */
[data-design="b"] .sl-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Color-wash fill — warm oat/gold field breathing on a slow cycle (≥3s)
   Transformation motif: a surface being covered with a fresh warm coat.
   amplitude: ~20% lightness delta; opacity ≥0.25 at peak — clears visual floor */
[data-design="b"] .sl-hero__colorwash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    155deg,
    #3A2A1B 0%,
    #5C3D20 30%,
    #C0821A 60%,
    #E4A627 78%,
    #F6C95C 100%
  );
  animation: sl-colorwash var(--b-cyc-sky) var(--b-ease-glow) infinite alternate;
}
@keyframes sl-colorwash {
  from { opacity: 0.75; filter: hue-rotate(-6deg) brightness(0.88); }
  to   { opacity: 1;    filter: hue-rotate(5deg)  brightness(1.08); }
}

/* Wet-edge advance — a paint edge sweeping across the surface
   scaleX from 0.2→1 = draw-in motion, ≥80px traversal, ~40px/s → clears drawn-in floor */
[data-design="b"] .sl-hero__edge {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(206, 90, 34, 0.32) 0%,
    rgba(228, 166, 39, 0.18) 55%,
    transparent 100%
  );
  transform-origin: left center;
  animation: sl-wetedge var(--b-cyc-edge) var(--b-ease-sunrise) infinite alternate;
}
@keyframes sl-wetedge {
  from { transform: scaleX(0.22); opacity: 0.55; }
  to   { transform: scaleX(1);    opacity: 0.9; }
}

/* Sun-glow — warmth center-top, breathing slowly */
[data-design="b"] .sl-hero__sun {
  position: absolute;
  top: 10%;
  right: 18%;
  width: clamp(120px, 18vw, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(246, 201, 92, 0.72) 0%,
    rgba(246, 201, 92, 0.24) 42%,
    transparent 70%
  );
  animation: sl-sunglow 9s var(--b-ease-glow) infinite alternate;
}
@keyframes sl-sunglow {
  from { opacity: 0.55; transform: scale(0.94); }
  to   { opacity: 1;    transform: scale(1.06); }
}

/* Readability scrim — allows text to sit on top */
[data-design="b"] .sl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(20, 14, 8, 0.70) 0%,
    rgba(20, 14, 8, 0.30) 45%,
    rgba(20, 14, 8, 0.08) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Hero text plate — z-index: 2, ABOVE all backdrop layers (HARD: text always topmost) */
[data-design="b"] .sl-hero__plate {
  position: relative;
  z-index: 2;                /* text z-index ABOVE backdrop (z:0) and scrim (z:1) */
  max-width: 640px;
  margin: 0 clamp(16px, 5vw, 64px) clamp(40px, 7vh, 80px);
  color: var(--b-canvas);
  display: grid;
  gap: var(--b-gap);
}

/* Trust decal */
[data-design="b"] .sl-hero__season { margin: 0; }
[data-design="b"] .sl-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"] .sl-decal--season {
  background: var(--design-b-gold);
  color: var(--b-walnut-deep);
}
[data-design="b"] .sl-decal--cool {
  background: rgba(43, 163, 154, 0.18);
  color: var(--design-b-turq);
  border: 1px solid rgba(43, 163, 154, 0.3);
}

/* Headline — opacity:1 at first paint; transform-only entrance via JS */
[data-design="b"] .sl-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(14, 10, 6, 0.55);
  /* opacity:1 at first paint — HARD RULE: never opacity:0 on hero text */
}
[data-design="b"] .sl-hero__essence {
  font-size: var(--b-text-lead);
  margin: 0;
  max-width: 48ch;
  text-wrap: pretty;
  /* opacity:1 at first paint */
}
[data-design="b"] .sl-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 at first paint */
}

@media (max-width: 640px) {
  [data-design="b"] .sl-hero { align-items: flex-end; }
  [data-design="b"] .sl-hero__plate { margin-inline: 16px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .sl-hero__colorwash,
  [data-design="b"] .sl-hero__edge,
  [data-design="b"] .sl-hero__sun { animation: none; }
  [data-design="b"] .sl-hero__colorwash { opacity: 0.88; }
  [data-design="b"] .sl-hero__edge { transform: scaleX(1); opacity: 0.7; }
}


/* ══════════════════════════════════════════════════════════════════════
   CTA — E2 (funnel anchor in hero) + secondary instances
   Neon-breathing burnt-orange routed sign; opacity:1 at rest
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-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(--design-b-orange);
  padding: 14px 26px;
  min-height: 48px;
  min-width: 44px;
  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);
  width: max-content;
}
[data-design="b"] .sl-cta__halo {
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  animation: sl-neon var(--b-cyc-cta) var(--b-ease-glow) infinite;
}
@keyframes sl-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"] .sl-cta:focus-visible {
  outline: none;
  box-shadow: var(--b-focus-ring), var(--b-shadow-sign);
}
[data-design="b"] .sl-cta:active {
  transform: translate(3px, 3px);
  background: var(--b-orange-deep);
  box-shadow: 2px 2px 0 0 var(--b-walnut);
}

/* Drawer CTAs */
[data-design="b"] .sl-cta--drawer {
  background: var(--design-b-gold);
  color: var(--b-walnut-deep);
  font-size: var(--b-text-h3);
  margin-top: var(--b-bay);
}
[data-design="b"] .sl-cta--funnel-drawer {
  background: var(--design-b-orange);
  color: var(--b-surface-2);
  font-size: var(--b-text-body);
  margin-top: var(--b-gap);
}
/* Secondary (before/after CTA, contact) */
[data-design="b"] .sl-cta--secondary {
  background: transparent;
  color: var(--design-b-orange);
  box-shadow: inset 0 0 0 2px var(--design-b-orange), var(--b-shadow-sign);
}
[data-design="b"] .sl-cta--secondary:active {
  background: rgba(206, 90, 34, 0.08);
}
[data-design="b"] .sl-cta--phone {
  background: var(--b-walnut);
  color: var(--b-canvas);
}
[data-design="b"] .sl-cta--submit {
  align-self: flex-start;
  margin-top: var(--b-gap);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .sl-cta:hover {
    transform: translate(-1px, -2px);
    background-color: var(--b-orange-glow);
  }
  [data-design="b"] .sl-cta--secondary:hover {
    background: rgba(206, 90, 34, 0.08);
    transform: translate(-1px, -2px);
  }
  [data-design="b"] .sl-cta--phone:hover {
    background: var(--b-walnut-deep);
    transform: translate(-1px, -2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .sl-cta__halo { animation: none; box-shadow: 0 0 14px 1px rgba(241,131,74,0.3); }
  [data-design="b"] .sl-cta { transition: background-color var(--b-dur-warm) linear; }
}


/* ══════════════════════════════════════════════════════════════════════
   E6 — POINTER (between hero and funnel)
   data-mf-role="pointer"
   Coverage / wet-edge register per trade.md
   NOT a <button>; opacity:1; bbox height ≥8px always
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-pointer {
  display: grid;
  justify-items: center;
  gap: var(--b-tight);
  padding-block: var(--b-court);
  background: var(--b-canvas);
  cursor: pointer;
  /* opacity:1; NEVER opacity:0 on pointer */
}
[data-design="b"] .sl-pointer__track {
  display: flex;
  justify-content: center;
}
[data-design="b"] .sl-pointer__arc {
  width: 160px;
  height: 80px;
  overflow: visible;
}

/* Horizon rule — the surface being painted */
[data-design="b"] .sl-pointer__horizon {
  stroke: var(--b-line);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Roller body — descends toward the surface */
[data-design="b"] .sl-pointer__roller {
  fill: var(--design-b-gold);
  filter: drop-shadow(0 2px 4px rgba(44, 33, 26, 0.28));
  animation: sl-roller-desc var(--b-cyc-pointer) var(--b-ease-arc) infinite;
  transform-origin: 80px 28px;
}
@keyframes sl-roller-desc {
  0%   { transform: translateY(-8px);  fill: var(--b-gold-glow); }
  60%  { transform: translateY(4px);   fill: var(--design-b-gold); }
  100% { transform: translateY(10px);  fill: var(--design-b-orange); }
}

/* Roller handle */
[data-design="b"] .sl-pointer__handle {
  stroke: var(--b-walnut);
  stroke-width: 2.5;
  stroke-linecap: round;
  animation: sl-handle-desc var(--b-cyc-pointer) var(--b-ease-arc) infinite;
  transform-origin: 80px 43px;
}
@keyframes sl-handle-desc {
  0%   { transform: translateY(-8px); }
  60%  { transform: translateY(4px); }
  100% { transform: translateY(10px); }
}

/* Fresh paint band that grows (scaleX draw-in = MOTION GATE compliant) */
[data-design="b"] .sl-pointer__paint {
  fill: var(--design-b-orange);
  opacity: 0.45;
  transform-origin: left center;
  animation: sl-paintfill var(--b-cyc-pointer) var(--b-ease-sunrise) infinite;
}
@keyframes sl-paintfill {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(0.6); opacity: 0.6; }
  100% { transform: scaleX(1);   opacity: 0.38; }
}

[data-design="b"] .sl-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 (max-width: 560px) {
  [data-design="b"] .sl-pointer { padding-block: var(--b-bay); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .sl-pointer__roller { animation: none; transform: translateY(4px); }
  [data-design="b"] .sl-pointer__handle { animation: none; transform: translateY(4px); }
  [data-design="b"] .sl-pointer__paint  { animation: none; transform: scaleX(0.6); opacity: 0.5; }
}


/* ══════════════════════════════════════════════════════════════════════
   E5 — FUNNEL (INT-1 interactive centerpiece)
   4-step qualifying intake
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-funnel {
  background: var(--b-walnut);
  padding-block: var(--b-section);
}
[data-design="b"] .sl-funnel__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .sl-funnel__head {}
[data-design="b"] .sl-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-canvas);
  margin: 0 0 var(--b-tight);
  text-wrap: balance;
}
[data-design="b"] .sl-funnel__sub {
  font-size: var(--b-text-body);
  color: var(--b-gold-glow);
  margin: 0;
  max-width: 52ch;
}

/* Progress bar */
[data-design="b"] .sl-funnel__progress {
  display: flex;
  align-items: center;
  gap: var(--b-gap);
}
[data-design="b"] .sl-funnel__track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--b-r-pill);
  overflow: clip;
}
[data-design="b"] .sl-funnel__fill {
  height: 100%;
  background: var(--design-b-orange);
  border-radius: var(--b-r-pill);
  transform-origin: left;
  transform: scaleX(0.25);
  transition: transform 360ms var(--b-ease-sunrise);
}
[data-design="b"] .sl-funnel__step-label {
  font-family: var(--b-font-mono);
  letter-spacing: var(--b-tracking-mono);
  font-size: var(--b-text-meta);
  color: var(--b-gold-glow);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Step panels */
[data-design="b"] .sl-funnel__step {
  display: grid;
  gap: var(--b-gap);
}
[data-design="b"] .sl-funnel__step[hidden] { display: none; }
[data-design="b"] .sl-funnel__q {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h3);
  color: var(--b-canvas);
  margin: 0;
}

/* Chip buttons — funnel options */
[data-design="b"] .sl-funnel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-gap);
}
[data-design="b"] .sl-chip {
  padding: 12px 20px;
  min-height: 48px;
  min-width: 44px;
  border-radius: var(--b-r-card);
  border: 2px solid var(--b-border-soft);
  background: rgba(255,255,255,0.06);
  color: var(--b-canvas);
  font-family: var(--b-font-body);
  font-size: var(--b-text-body);
  cursor: pointer;
  transition:
    background-color var(--b-dur-warm) var(--b-ease-glow),
    border-color var(--b-dur-warm) var(--b-ease-glow),
    transform var(--b-dur-tap) var(--b-ease-sunrise);
}
[data-design="b"] .sl-chip.is-selected {
  background: var(--design-b-orange);
  border-color: var(--design-b-orange);
  box-shadow: var(--b-shadow-sign);
  color: var(--b-surface-2);
}
[data-design="b"] .sl-chip:focus-visible {
  outline: none;
  box-shadow: var(--b-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .sl-chip:hover:not(.is-selected) {
    background: rgba(255,255,255,0.12);
    border-color: var(--design-b-gold);
    transform: translateY(-1px);
  }
}

/* Step 4 fields */
[data-design="b"] .sl-funnel__fields {
  display: grid;
  gap: var(--b-gap);
  grid-template-columns: 1fr 1fr;
}
[data-design="b"] .sl-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--b-hair);
}
[data-design="b"] .sl-field-group--full { grid-column: 1 / -1; }
[data-design="b"] .sl-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-gold-glow);
}
[data-design="b"] .sl-field-group__req {
  color: var(--b-muted);
  text-transform: none;
  letter-spacing: 0;
}
[data-design="b"] .sl-field {
  background: var(--b-surface-2);
  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-glow);
  width: 100%;
}
[data-design="b"] .sl-field:focus {
  outline: none;
  border-color: var(--design-b-turq);
  box-shadow: var(--b-focus-ring);
}
[data-design="b"] .sl-field--textarea { resize: vertical; min-height: 80px; }

/* Confirm state */
[data-design="b"] .sl-funnel__confirm[hidden] { display: none; }
[data-design="b"] .sl-funnel__confirm {
  padding: var(--b-pad);
  background: rgba(255,255,255,0.08);
  border-radius: var(--b-r-card);
  border: 1px solid rgba(255,255,255,0.15);
}
[data-design="b"] .sl-funnel__confirm-head {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h3);
  color: var(--b-canvas);
  margin: 0 0 var(--b-tight);
}
[data-design="b"] .sl-funnel__confirm-body {
  font-size: var(--b-text-body);
  color: var(--b-gold-glow);
  margin: 0;
}
[data-design="b"] .sl-funnel__confirm-body a {
  color: var(--b-gold-glow);
  text-decoration: underline;
}

/* Trust badges below funnel */
[data-design="b"] .sl-funnel__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-tight);
  padding-top: var(--b-gap);
  border-top: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 640px) {
  [data-design="b"] .sl-funnel__fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .sl-funnel__fill { transition: none; }
  [data-design="b"] .sl-chip { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   E4 — AMBIENT MID-PAGE (Before/After + process-phase track)
   Atomic-pattern field drifting behind the process section
   TRIAD-2 scroll-linked reveal on process steps
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-ambient-b {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--b-canvas-deep);
  padding-block: var(--b-section);
}
[data-design="b"] .sl-ambient-b__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.14;
  pointer-events: none;
}
[data-design="b"] .sl-atomfield {
  width: 130%;
  height: 100%;
}
[data-design="b"] .sl-atomfield__g {
  transform-box: fill-box;
  animation: sl-atomdrift var(--b-cyc-pattern) var(--b-ease-glow) infinite alternate;
}
@keyframes sl-atomdrift {
  from { transform: translate3d(0, 0, 0);    opacity: 0.7; }
  to   { transform: translate3d(-28px, 9px, 0); opacity: 1; }
}
[data-design="b"] .sl-ambient-b__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .sl-ambient-b__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"] .sl-ambient-b__intro {
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 65ch;
  line-height: var(--b-leading-body);
}

/* Process-phase track (E4 mid-page animated content per trade.md) */
[data-design="b"] .sl-process-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-tight);
  row-gap: var(--b-gap);
}
[data-design="b"] .sl-phase {
  display: flex;
  align-items: center;
  gap: var(--b-tight);
  background: var(--b-surface);
  border-radius: var(--b-r-card);
  border: 1px solid var(--b-border);
  padding: var(--b-tight) var(--b-pad);
  transition: transform var(--b-dur-warm) var(--b-ease-sunrise);
}
[data-design="b"] .sl-phase__num {
  font-family: var(--b-font-mono);
  letter-spacing: var(--b-tracking-mono);
  color: var(--design-b-orange);
  font-size: var(--b-text-meta);
}
[data-design="b"] .sl-phase__label {
  font-size: var(--b-text-cap);
  color: var(--b-ink-2);
}
[data-design="b"] .sl-phase__connector {
  width: 20px;
  height: 2px;
  background: var(--design-b-gold);
  border-radius: var(--b-r-pill);
  flex-shrink: 0;
  transform-origin: left;
  animation: sl-connector-grow 2s var(--b-ease-sunrise) both;
}
[data-design="b"] .sl-phase__connector.is-revealed {
  /* JS will add this to trigger draw-in */
}
@keyframes sl-connector-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Repeated funnel CTA at end of before/after */
[data-design="b"] .sl-ba-cta {
  display: grid;
  gap: var(--b-gap);
  padding-top: var(--b-gap);
}
[data-design="b"] .sl-ba-cta__line {
  font-size: var(--b-text-lead);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 52ch;
}

@media (max-width: 560px) {
  [data-design="b"] .sl-ambient-b__field { opacity: 0.1; }
  [data-design="b"] .sl-process-track { flex-direction: column; align-items: flex-start; }
  [data-design="b"] .sl-phase__connector { width: 2px; height: 20px; }
  [data-design="b"] .sl-phase__connector { transform-origin: top; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .sl-atomfield__g { animation: none; }
  [data-design="b"] .sl-phase__connector { animation: none; transform: scaleX(1); }
}


/* ══════════════════════════════════════════════════════════════════════
   SERVICES SECTION
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-services {
  background: var(--b-canvas);
  padding-block: var(--b-section);
}
[data-design="b"] .sl-services__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .sl-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"] .sl-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--b-gap);
}
[data-design="b"] .sl-svc-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-tight);
  transition: transform var(--b-dur-warm) var(--b-ease-sunrise), box-shadow var(--b-dur-warm) var(--b-ease-sunrise);
}
[data-design="b"] .sl-svc-card__icon {
  font-size: 0.6rem;
  color: var(--design-b-orange);
  line-height: 1;
}
[data-design="b"] .sl-svc-card__name {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-body);
  color: var(--b-ink);
  line-height: 1.2;
}
[data-design="b"] .sl-svc-card__note {
  font-size: var(--b-text-cap);
  color: var(--b-muted);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .sl-svc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--b-shadow-lift);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   PROCESS SECTION — TRIAD-2 scroll-driven reveal (parallax)
   sl-scroll-reveal items enter via translateY + clip-path (transform-only)
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-process {
  background: var(--b-canvas-deep);
  padding-block: var(--b-section);
}
[data-design="b"] .sl-process__inner {
  max-width: 800px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .sl-process__intro {
  font-size: var(--b-text-lead);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 60ch;
  line-height: var(--b-leading-body);
}
[data-design="b"] .sl-proc-steps {
  display: grid;
  gap: var(--b-bay);
}

/* Scroll-reveal items — TRIAD-2 premium scroll motion (transform only, MOTION GATE) */
[data-design="b"] .sl-scroll-reveal {
  /* Initial state: visible but slightly down + clipped — transform only */
  transform: translateY(32px);
  clip-path: inset(0 0 12% 0);
  transition:
    transform 540ms var(--b-ease-sunrise),
    clip-path 540ms var(--b-ease-sunrise);
}
[data-design="b"] .sl-scroll-reveal.is-revealed {
  transform: translateY(0);
  clip-path: inset(0 0 0% 0);
}

[data-design="b"] .sl-proc-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--b-gap);
  align-items: start;
}
[data-design="b"] .sl-proc-step__num {
  font-family: var(--b-font-mono);
  letter-spacing: var(--b-tracking-mono);
  font-size: var(--b-text-cap);
  color: var(--design-b-orange);
  padding-top: 4px;
}
[data-design="b"] .sl-proc-step__body {
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  line-height: var(--b-leading-body);
}
[data-design="b"] .sl-proc-step__body strong { color: var(--b-ink); }

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .sl-scroll-reveal {
    transform: none;
    clip-path: none;
    transition: none;
  }
  [data-design="b"] .sl-scroll-reveal.is-revealed {
    transform: none;
    clip-path: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-about {
  background: var(--b-canvas);
  padding-block: var(--b-section);
}
[data-design="b"] .sl-about__inner {
  max-width: 800px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .sl-about__body {
  display: grid;
  gap: var(--b-gap);
}
[data-design="b"] .sl-about__body p {
  font-size: var(--b-text-body);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 65ch;
  line-height: var(--b-leading-body);
}
[data-design="b"] .sl-about__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-tight);
  padding-top: var(--b-gap);
}


/* ══════════════════════════════════════════════════════════════════════
   SERVICE AREA
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-area {
  background: var(--b-canvas-deep);
  padding-block: var(--b-section);
}
[data-design="b"] .sl-area__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-bay);
}
[data-design="b"] .sl-area__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-gap);
  font-family: var(--b-font-display);
  font-size: var(--b-text-h3);
  font-weight: 700;
  color: var(--b-ink);
}
[data-design="b"] .sl-area__sep {
  color: var(--design-b-gold);
  font-weight: 400;
}


/* ══════════════════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-contact {
  background: var(--b-canvas);
  padding-block: var(--b-section);
}
[data-design="b"] .sl-contact__inner {
  max-width: 800px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-gap);
}
[data-design="b"] .sl-contact__line {
  font-size: var(--b-text-lead);
  color: var(--b-ink-2);
  margin: 0;
  max-width: 52ch;
}


/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */
[data-design="b"] .sl-footer {
  background: var(--b-walnut);
  padding-block: var(--b-bay);
}
[data-design="b"] .sl-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid;
  gap: var(--b-gap);
}
[data-design="b"] .sl-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-gap);
  align-items: baseline;
}
[data-design="b"] .sl-footer__name {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-h3);
  color: var(--b-canvas);
}
[data-design="b"] .sl-footer__area {
  font-family: var(--b-font-mono);
  font-size: var(--b-text-meta);
  letter-spacing: var(--b-tracking-mono);
  color: var(--b-muted);
  text-transform: uppercase;
}
[data-design="b"] .sl-footer__mid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-gap);
  align-items: center;
}
[data-design="b"] .sl-footer__phone {
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: var(--b-text-lead);
  color: var(--b-canvas);
  text-decoration: none;
}
[data-design="b"] .sl-footer__quote {
  font-size: var(--b-text-body);
  color: var(--design-b-gold);
  text-decoration: underline;
}
[data-design="b"] .sl-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-gap);
  padding-top: var(--b-gap);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--b-text-meta);
  color: var(--b-muted);
  font-family: var(--b-font-mono);
  letter-spacing: 0.08em;
}


/* ══════════════════════════════════════════════════════════════════════
   MOBILE SAFETY — no horizontal scroll at 320 / 390 / 768 / 1440
   Append at BOTTOM per spec contract
   ══════════════════════════════════════════════════════════════════════ */
[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;
}

/* 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; }