/* ═══════════════════════════════════════════════════════════════════════════
   Design-B — Sunliner × Do Right Construction LLC
   VISUAL DISTINCTION from Site A: B uses the DUSK/NIGHT register as the
   primary page ground (dark walnut canvas, cream-on-dark text, neon-orange
   and harvest-gold as warm accents glowing in the dark).
   Site A would use the canonical daylit oat-cream ground — B is the inversion.
   All selectors scoped to [data-design="b"] — ZERO [data-design="b"].
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Token system (scoped to design b, dusk-inverted palette) ────────────── */
[data-design="b"] {
  --design-b-primary: #E4A627;

  /* B-SIDE INVERSION: dusk/night register is the PAGE DEFAULT */
  --sl-canvas:       #1E2A3A;  /* page ground — deep blue-hour (inverted from daylit oat) */
  --sl-canvas-deep:  #14202C;  /* alternating section — deep night ground                 */
  --sl-panel:        #19253A;  /* panel ground                                             */
  --sl-surface:      #243346;  /* card stock on night — elevated dark surface              */
  --sl-surface-2:    #2C3D54;  /* elevated — lightbox, drawer interior                     */
  --sl-ink:          #F4EAD0;  /* primary text — warm cream on dark (inverted)             */
  --sl-ink-2:        #DDD0B0;  /* secondary text — softer cream                            */
  --sl-muted:        #B7C0C9;  /* captions, meta                                           */
  --sl-faint:        #8A9BAE;  /* hairline labels                                          */
  --sl-border:       #2E4060;  /* card edge — night deckle                                 */
  --sl-border-soft:  #253550;  /* row separators                                           */
  --sl-line:         #3A5070;  /* hairline rules                                           */
  --sl-walnut:       #F4EAD0;  /* inverted: warm cream band for header (logo pops dark)    */
  --sl-walnut-deep:  #ECDDBC;  /* deeper cream                                             */

  /* Atomic accents — same warm palette, but glowing against the dark */
  --sl-gold:        #E4A627;
  --sl-gold-deep:   #C0821A;
  --sl-gold-glow:   #F6C95C;
  --sl-orange:      #CE5A22;
  --sl-orange-deep: #A8430F;
  --sl-orange-glow: #F1834A;
  --sl-turq:        #2BA39A;
  --sl-turq-deep:   #1C7B74;
  --sl-avocado:     #7C8B38;
  --sl-avocado-deep:#5C6A26;
  --sl-rust:        #A8331C;
  --sl-amber:       #D98C1E;

  /* Header uses dark walnut on B-side (same as canonical — visual anchor) */
  --b-header-bg:    #2A1D12;
  --b-header-ink:   #F4EAD0;

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

  /* Fluid type scale */
  --sl-text-meta:    clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --sl-text-cap:     clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --sl-text-body:    clamp(1rem, 0.96rem + 0.3vw, 1.1875rem);
  --sl-text-lead:    clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  --sl-text-h3:      clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --sl-text-h2:      clamp(1.875rem, 1.5rem + 1.9vw, 3.125rem);
  --sl-text-h1:      clamp(2.75rem, 1.8rem + 4.6vw, 5.5rem);
  --sl-leading-body:     1.6;
  --sl-leading-tight:    1.05;
  --sl-tracking-display: 0.005em;
  --sl-tracking-mono:    0.14em;

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

  /* Motion */
  --sl-ease-sunrise: cubic-bezier(0.16, 1, 0.3, 1);
  --sl-ease-arc:     cubic-bezier(0.37, 0, 0.45, 1);
  --sl-ease-flip:    cubic-bezier(0.66, 0, 0.34, 1);
  --sl-ease-glow:    cubic-bezier(0.45, 0, 0.2, 1);
  --sl-dur-tap:    150ms;
  --sl-dur-warm:   240ms;
  --sl-dur-settle: 560ms;
  --sl-cyc-header:  30s;
  --sl-cyc-sky:     24s;
  --sl-cyc-cta:     5s;
  --sl-cyc-pointer: 5.5s;
  --sl-cyc-pattern: 26s;

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

  /* Shadow */
  --sl-shadow-card: 0 10px 26px rgba(0, 0, 0, 0.38);
  --sl-shadow-sign: 5px 5px 0 0 rgba(0,0,0,0.45);
  --sl-shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.52);
  --sl-focus-ring:  0 0 0 3px rgba(43, 163, 154, 0.55);
}

/* ─── Box model reset (scoped to dq-design article) ────────────────────────── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
  box-sizing: border-box;
  background: var(--sl-canvas);
  color: var(--sl-ink);
  font-family: var(--sl-font-body);
  font-size: var(--sl-text-body);
  line-height: var(--sl-leading-body);
}
[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; }

/* ─── E1: Header ─────────────────────────────────────────────────────────────
   H-1: logo · sunburst · hamburger only — no phone, no nav, no CTA in bar
   H-3: sunburst cycle ≥18s (30s)
   ─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .sl-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--b-header-bg); color: var(--b-header-ink);
  overflow: clip;
}
[data-design="b"] .sl-header__bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sl-gap); max-width: 1280px; margin: 0 auto;
  padding: var(--sl-tight) clamp(16px, 4vw, 40px);
}
[data-design="b"] .sl-logo {
  display: inline-block; text-decoration: none;
  font-family: var(--sl-font-display); font-weight: 700;
  letter-spacing: var(--sl-tracking-display);
  font-size: clamp(0.85rem, 0.7rem + 0.8vw, 1.25rem);
  color: var(--b-header-ink);
  background: var(--sl-orange);
  padding: 6px 14px; border-radius: var(--sl-r-tab);
  box-shadow: var(--sl-shadow-sign);
}
[data-design="b"] .sl-logo__mark { display: inline-block; }

/* Sunburst atmospheric layer (E1 signature) */
[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(--sl-gold); opacity: 0.38; pointer-events: none;
}
[data-design="b"] .sl-sunburst {
  width: 100%; height: 100%;
  transform-origin: 60px 60px;
  animation: b-sunturn var(--sl-cyc-header) linear infinite;
}
[data-design="b"] .sl-sunburst__core {
  animation: b-sunpulse 9s var(--sl-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"] .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(--sl-r-tab);
}
[data-design="b"] .sl-burger__bar {
  display: block; width: 24px; height: 2px;
  background: var(--b-header-ink);
  transition: transform var(--sl-dur-warm) var(--sl-ease-sunrise),
    opacity var(--sl-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(--sl-focus-ring); outline: none; }

/* Drawer */
[data-design="b"] .sl-drawer {
  position: fixed; inset: 0; z-index: 70;
  background: color-mix(in oklab, #2A1D12, transparent 6%);
}
[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(--sl-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: b-drawer-in var(--sl-dur-settle) var(--sl-ease-sunrise) forwards;
}
@keyframes b-drawer-in { to { transform: translateY(0); opacity: 1; } }
[data-design="b"] .sl-navlink {
  font-family: var(--sl-font-display); font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 3vw, 3rem);
  color: #F4EAD0; text-decoration: none;
  width: max-content; padding: 4px 0;
}
[data-design="b"] .sl-navlink::after {
  content: ""; display: block; height: 4px;
  background: var(--sl-gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--sl-dur-warm) var(--sl-ease-sunrise);
}
[data-design="b"] .sl-navlink:focus-visible::after { transform: scaleX(1); }
[data-design="b"] .sl-drawer__phone {
  font-family: var(--sl-font-mono); color: var(--sl-gold-glow);
  font-size: var(--sl-text-lead); text-decoration: none;
  letter-spacing: var(--sl-tracking-mono);
  margin-top: var(--sl-bay);
}

@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.22; width: 96px; height: 96px; }
}
@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; }
}

/* ─── E3 + HERO ──────────────────────────────────────────────────────────────
   HERO-1: ONE animated layer (the CSS color-wash fill = transformation motif)
   HERO-2: no directional primitive (pointer is E6, separate)
   HERO-3: visual presence floor — color-wash substrate visible at first paint
   isolation:isolate + z-index ensures text is topmost at all viewports
   ─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .sl-hero {
  position: relative;
  isolation: isolate;          /* HARD: text z-index above all backdrop layers */
  min-height: 92svh;
  display: flex; align-items: flex-end;
  overflow: clip;
  background: var(--sl-canvas);
}

/* Backdrop media container (z-index 0 — below text) */
[data-design="b"] .sl-hero__media {
  position: absolute; inset: 0; z-index: 0;
}

/* E3 transformation motif:
   B-side backdrop = color-wash fill advancing across the hero surface.
   HERO-1 compliant: ONE animated layer composited into a single container.
   No photo (photo_substrate: NONE per brief). No stock. Pure CSS.
   Visible color field ≥0.25 opacity at peak (meets visual presence floor). */
[data-design="b"] .sl-hero__sky {
  position: absolute; inset: 0;
  background: linear-gradient(
    145deg,
    rgba(228,166,39, 0.12) 0%,
    rgba(43,163,154, 0.08) 35%,
    rgba(206,90,34,  0.20) 70%,
    rgba(228,166,39, 0.10) 100%
  );
  animation: b-skyshift var(--sl-cyc-sky) var(--sl-ease-glow) infinite alternate;
}
@keyframes b-skyshift {
  from { opacity: 0.6; filter: hue-rotate(-10deg); }
  to   { opacity: 1.0; filter: hue-rotate(8deg); }
}

/* Color-wash fill — the transformation motif for painting trade.
   Advances like paint coverage across the surface. Primary ambient layer. */
[data-design="b"] .sl-hero__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 70%, rgba(206,90,34, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(228,166,39, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(43,163,154, 0.14) 0%, transparent 70%);
  animation: b-wash 18s var(--sl-ease-glow) infinite alternate;
}
@keyframes b-wash {
  from { transform: translate3d(0, 0, 0) scale(1.0); opacity: 0.65; }
  to   { transform: translate3d(12px, -8px, 0) scale(1.04); opacity: 1.0; }
}

/* Wet-edge advance element — a luminous edge sweeping slowly left to right.
   The painting trade's signature motif: the fresh wet edge moving across. */
[data-design="b"] .sl-hero__edge {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(228,166,39, 0.9) 30%,
    rgba(241,131,74, 1.0) 55%,
    rgba(228,166,39, 0.6) 80%,
    transparent 100%
  );
  animation: b-wetedge 14s var(--sl-ease-arc) infinite;
  transform-origin: left center;
}
@keyframes b-wetedge {
  0%   { transform: scaleX(0);    opacity: 0; }
  15%  { transform: scaleX(0.4);  opacity: 1; }
  65%  { transform: scaleX(1.0);  opacity: 1; }
  85%  { transform: scaleX(1.0);  opacity: 0.5; }
  100% { transform: scaleX(0);    opacity: 0; }
}

/* Sun flecks substrate (secondary visual texture — NOT a separate animated layer;
   purely static background-image with one shared translate, rides the wash) */
[data-design="b"] .sl-hero__flecks {
  position: absolute; inset: 0; opacity: 0.4; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 18% 25%, rgba(246,201,92,0.9), transparent),
    radial-gradient(2px 2px at 72% 55%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 42% 78%, rgba(246,201,92,0.7), transparent),
    radial-gradient(2px 2px at 88% 20%, rgba(241,131,74,0.7), transparent),
    radial-gradient(2px 2px at 30% 60%, rgba(43,163,154,0.5), transparent);
  background-repeat: no-repeat;
  animation: b-fleck 22s linear infinite;
}
@keyframes b-fleck {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-20px,-30px,0); }
}

/* Readability scrim */
[data-design="b"] .sl-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(10,16,24, 0.78) 0%,
    rgba(10,16,24, 0.32) 42%,
    transparent 65%
  );
  pointer-events: none;
}

/* Hero plate — text container: z-index 2, ABOVE ALL backdrop layers */
[data-design="b"] .sl-hero__plate {
  position: relative;
  z-index: 2;           /* HARD: above media (z:0), scrim (z:1), any overlay */
  max-width: 640px;
  margin: 0 clamp(16px, 5vw, 64px) clamp(40px, 7vh, 80px);
  color: #F4EAD0;       /* always cream — never inherit from dark canvas */
  display: grid;
  gap: var(--sl-gap);
}
[data-design="b"] .sl-hero__name {
  font-family: var(--sl-font-display); font-weight: 800;
  font-size: var(--sl-text-h1); line-height: var(--sl-leading-tight);
  letter-spacing: var(--sl-tracking-display); margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0,0,0,0.7);
  color: #F4EAD0;  /* opacity:1 at first paint — HARD */
}
[data-design="b"] .sl-hero__essence {
  font-size: var(--sl-text-lead); margin: 0;
  max-width: 46ch; text-wrap: pretty;
  color: #DDD0B0;  /* opacity:1 at first paint — HARD */
}
[data-design="b"] .sl-hero__coords {
  font-family: var(--sl-font-mono); letter-spacing: var(--sl-tracking-mono);
  font-size: var(--sl-text-cap); color: var(--sl-gold-glow); margin: 0;
  text-transform: uppercase;
  /* opacity:1 at first paint — HARD */
}
[data-design="b"] .sl-decal {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sl-font-mono); letter-spacing: var(--sl-tracking-mono);
  text-transform: uppercase; font-size: var(--sl-text-meta);
  padding: 5px 12px; border-radius: var(--sl-r-pill);
}
[data-design="b"] .sl-decal--season { background: var(--sl-gold); color: #2A1D12; }

@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__sky,
  [data-design="b"] .sl-hero__wash,
  [data-design="b"] .sl-hero__edge,
  [data-design="b"] .sl-hero__flecks { animation: none; }
  [data-design="b"] .sl-hero__wash { opacity: 0.8; }
}

/* ─── E2: CTA (Animated neon-breath funnel-anchor) ───────────────────────────
   CTA-1: slow neon-glow breath (5s)
   CTA-2: href="#funnel"
   CTA-3: receives the click
   opacity:1 at rest — HARD (no opacity:0 on any child)
   ─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .sl-cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--sl-tight);
  font-family: var(--sl-font-display); font-weight: 700;
  font-size: var(--sl-text-lead); letter-spacing: var(--sl-tracking-display);
  text-decoration: none; color: #FBF4E2;
  background: var(--sl-orange);
  padding: 14px 26px; min-height: 48px; min-width: 44px;
  border-radius: var(--sl-r-sign);
  box-shadow: var(--sl-shadow-sign);
  border: 0; cursor: pointer;
  transition:
    transform var(--sl-dur-tap) var(--sl-ease-sunrise),
    background-color var(--sl-dur-warm) var(--sl-ease-glow),
    box-shadow var(--sl-dur-tap) var(--sl-ease-sunrise);
}
[data-design="b"] .sl-cta__halo {
  position: absolute; inset: -2px; z-index: -1;
  border-radius: inherit;
  animation: b-neon var(--sl-cyc-cta) var(--sl-ease-glow) infinite;
}
@keyframes b-neon {
  0%, 100% { box-shadow: 0 0 16px 2px rgba(241,131,74, 0.32); }
  50%      { box-shadow: 0 0 32px 7px rgba(246,201,92, 0.58); }
}
[data-design="b"] .sl-cta:focus-visible {
  outline: none;
  box-shadow: var(--sl-focus-ring), var(--sl-shadow-sign);
}
[data-design="b"] .sl-cta:active {
  transform: translate(3px, 3px);
  background: var(--sl-orange-deep);
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.5);
}
[data-design="b"] .sl-cta--drawer {
  background: var(--sl-gold); color: #2A1D12;
  font-size: var(--sl-text-h3);
  margin-top: var(--sl-bay);
}
[data-design="b"] .sl-cta--repeat {
  background: var(--sl-orange);
}
[data-design="b"] .sl-cta--funnel-submit {
  width: 100%; justify-content: center;
  font-size: var(--sl-text-body);
  margin-top: var(--sl-gap);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .sl-cta:hover {
    transform: translate(-1px, -2px);
    background: var(--sl-orange-glow);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .sl-cta__halo { animation: none; box-shadow: 0 0 16px 2px rgba(241,131,74,0.35); }
  [data-design="b"] .sl-cta { transition: background-color var(--sl-dur-warm) linear; }
}

/* ─── E6: Pointer (wet-edge / coverage register) ────────────────────────────
   PTR-1: wayfinding visual between hero and funnel
   PTR-2: not a button (div, aria-hidden)
   PTR-3: one pointer, no bouncing arrows
   HARD: opacity:1, height>8px at all viewports (gate: pointer_invisible)
   HARD: sits LAST before #funnel, ≤1 sibling between (pointer_funnel_adjacent)
   ─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .sl-pointer {
  display: grid; justify-items: center; gap: var(--sl-tight);
  padding-block: var(--sl-court);
  background: var(--sl-canvas);
  cursor: pointer;
  /* HARD: opacity:1, visible height */
  opacity: 1;
  min-height: 80px;
}
[data-design="b"] .sl-pointer__arc {
  width: 200px; height: 56px; overflow: visible;
}
[data-design="b"] .sl-pointer__surface {
  stroke: var(--sl-line); stroke-width: 2; stroke-linecap: round;
}
/* Wet-edge rect: draws in left→right via scaleX — transform only, not width */
[data-design="b"] .sl-pointer__edge {
  fill: var(--sl-orange); opacity: 0.85;
  transform-origin: 8px 32px;   /* left edge of rect at x=8 */
  animation: b-wetedge-ptr var(--sl-cyc-pointer) var(--sl-ease-arc) infinite;
}
@keyframes b-wetedge-ptr {
  0%   { transform: scaleX(0);   opacity: 0.5; fill: var(--sl-gold); }
  50%  { transform: scaleX(0.65); opacity: 1.0; fill: var(--sl-orange); }
  80%  { transform: scaleX(1.0); opacity: 0.9; fill: var(--sl-orange-glow); }
  100% { transform: scaleX(0);   opacity: 0.5; fill: var(--sl-gold); }
}
[data-design="b"] .sl-pointer__sun {
  fill: var(--sl-gold);
  filter: drop-shadow(0 0 5px rgba(228,166,39, 0.8));
  animation: b-sundescend var(--sl-cyc-pointer) var(--sl-ease-arc) infinite;
  transform-origin: 100px 32px;
}
@keyframes b-sundescend {
  0%   { transform: translate(-30px, -8px); fill: var(--sl-gold-glow); }
  55%  { transform: translate(0, 6px); fill: var(--sl-gold); }
  100% { transform: translate(30px, 12px); fill: var(--sl-orange); opacity: 0.88; }
}
[data-design="b"] .sl-pointer__label {
  font-family: var(--sl-font-mono); letter-spacing: var(--sl-tracking-mono);
  text-transform: uppercase; font-size: var(--sl-text-meta);
  color: var(--sl-muted);
  /* opacity:1 — HARD; never opacity:0 on text under pointer */
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .sl-pointer__sun { animation: none; transform: translate(0, 5px); }
  [data-design="b"] .sl-pointer__edge { animation: none; transform: scaleX(0.6); opacity: 0.7; }
}
@media (max-width: 560px) {
  [data-design="b"] .sl-pointer { padding-block: var(--sl-bay); }
}

/* ─── E5: Funnel (4-step qualifying intake) ──────────────────────────────────
   FN-1: premium animated step transitions
   FN-2: the one interactive element (no competing centerpiece)
   FN-3: placed after the proof (hero → [proof sections] → funnel)
   ─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .sl-funnel {
  background: var(--sl-canvas-deep);
  padding-block: var(--sl-section);
}
[data-design="b"] .sl-funnel__inner {
  max-width: 760px; margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid; gap: var(--sl-bay);
}
[data-design="b"] .sl-funnel__head { display: grid; gap: var(--sl-gap); }
[data-design="b"] .sl-funnel__title {
  font-family: var(--sl-font-display); font-weight: 800;
  font-size: var(--sl-text-h2); letter-spacing: var(--sl-tracking-display);
  color: var(--sl-ink); margin: 0;
}
[data-design="b"] .sl-funnel__sub {
  font-size: var(--sl-text-body); color: var(--sl-ink-2);
  max-width: 58ch; margin: 0; line-height: var(--sl-leading-body);
}
[data-design="b"] .sl-funnel__track { display: grid; }
[data-design="b"] .sl-funnel__step { display: grid; gap: var(--sl-gap); }
[data-design="b"] .sl-funnel__step[hidden] { display: none; }
[data-design="b"] .sl-funnel__step-label {
  font-family: var(--sl-font-mono); letter-spacing: var(--sl-tracking-mono);
  font-size: var(--sl-text-cap); color: var(--sl-gold-glow);
  text-transform: uppercase; margin: 0;
}
[data-design="b"] .sl-funnel__options {
  display: flex; flex-wrap: wrap; gap: var(--sl-gap);
}
[data-design="b"] .sl-funnel__option {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sl-font-display); font-weight: 700;
  font-size: var(--sl-text-body); color: var(--sl-ink);
  background: var(--sl-surface); border: 2px solid var(--sl-border);
  border-radius: var(--sl-r-sign); padding: 12px 20px;
  min-height: 48px; cursor: pointer;
  transition:
    border-color var(--sl-dur-warm) var(--sl-ease-sunrise),
    background-color var(--sl-dur-warm) var(--sl-ease-glow),
    transform var(--sl-dur-tap) var(--sl-ease-sunrise);
}
[data-design="b"] .sl-funnel__option.is-selected,
[data-design="b"] .sl-funnel__option:focus-visible {
  border-color: var(--sl-orange);
  background: color-mix(in oklab, var(--sl-orange), var(--sl-surface) 82%);
  color: #F4EAD0;
  outline: none;
}
[data-design="b"] .sl-funnel__option:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .sl-funnel__option:hover {
    border-color: var(--sl-gold);
    transform: translateY(-1px);
  }
}

/* Step entrance animation — transform only, opacity from 1 (no opacity:0 start) */
[data-design="b"] .sl-funnel__step.is-entering {
  animation: b-step-in var(--sl-dur-settle) var(--sl-ease-sunrise) forwards;
}
@keyframes b-step-in {
  from { transform: translateY(10px) scale(0.98); opacity: 0.85; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Step 4: form */
[data-design="b"] .sl-funnel__form { display: grid; gap: var(--sl-gap); }
[data-design="b"] .sl-funnel__field-group { display: grid; gap: 6px; }
[data-design="b"] .sl-funnel__label {
  font-family: var(--sl-font-mono); letter-spacing: var(--sl-tracking-mono);
  font-size: var(--sl-text-cap); color: var(--sl-muted); text-transform: uppercase;
}
[data-design="b"] .sl-funnel__req { color: var(--sl-rust); font-size: 0.85em; }
[data-design="b"] .sl-funnel__opt { color: var(--sl-faint); font-size: 0.85em; }
[data-design="b"] .sl-funnel__field {
  background: var(--sl-surface-2); border: 1px solid var(--sl-border);
  border-radius: var(--sl-r-tab); padding: 12px 14px;
  font-family: var(--sl-font-body); font-size: var(--sl-text-body);
  color: var(--sl-ink); width: 100%;
  transition: border-color var(--sl-dur-warm) var(--sl-ease-glow);
}
[data-design="b"] .sl-funnel__field:focus {
  outline: none; border-color: var(--sl-turq);
  box-shadow: 0 0 0 3px rgba(43,163,154, 0.3);
}
[data-design="b"] .sl-funnel__field--ta { resize: vertical; min-height: 80px; }
[data-design="b"] .sl-funnel__confirm {
  font-family: var(--sl-font-mono); color: var(--sl-avocado);
  font-size: var(--sl-text-body); letter-spacing: var(--sl-tracking-mono);
  min-height: 1.5em;
}

/* Progress bar */
[data-design="b"] .sl-funnel__progress { margin-top: var(--sl-tight); }
[data-design="b"] .sl-funnel__progress-bar {
  height: 4px; background: var(--sl-border);
  border-radius: var(--sl-r-pill); overflow: clip;
}
[data-design="b"] .sl-funnel__progress-fill {
  height: 100%; background: var(--sl-orange);
  transform-origin: left;
  transition: transform var(--sl-dur-settle) var(--sl-ease-sunrise);
  transform: scaleX(0.25);
}

/* Trust block */
[data-design="b"] .sl-funnel__trust { display: grid; gap: var(--sl-tight); margin-top: var(--sl-gap); }
[data-design="b"] .sl-funnel__trust-line {
  font-family: var(--sl-font-mono); font-size: var(--sl-text-cap);
  color: var(--sl-muted); letter-spacing: var(--sl-tracking-mono); margin: 0;
}
[data-design="b"] .sl-funnel__phone {
  color: var(--sl-gold-glow); text-decoration: none;
}

/* ─── Services section ───────────────────────────────────────────────────────
   E4-adjacent: mid-page section — alternating canvas-deep for rhythm
   ─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .sl-services {
  background: var(--sl-canvas); padding-block: var(--sl-section);
}
[data-design="b"] .sl-services__inner {
  max-width: 1100px; margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid; gap: var(--sl-bay);
}
[data-design="b"] .sl-services__title {
  font-family: var(--sl-font-display); font-weight: 800;
  font-size: var(--sl-text-h2); letter-spacing: var(--sl-tracking-display);
  color: var(--sl-ink); margin: 0;
}
[data-design="b"] .sl-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 40px);
}
[data-design="b"] .sl-service-card {
  background: var(--sl-surface); border: 1px solid var(--sl-border);
  border-radius: var(--sl-r-card); padding: var(--sl-pad);
  box-shadow: var(--sl-shadow-card);
  display: grid; gap: var(--sl-tight);
}
[data-design="b"] .sl-service-card__name {
  font-family: var(--sl-font-display); font-weight: 700;
  font-size: var(--sl-text-h3); color: var(--sl-gold); margin: 0;
}
[data-design="b"] .sl-service-card__desc {
  font-size: var(--sl-text-body); color: var(--sl-ink-2);
  line-height: var(--sl-leading-body); margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .sl-service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sl-shadow-lift);
    transition: transform var(--sl-dur-warm) var(--sl-ease-sunrise),
      box-shadow var(--sl-dur-warm) var(--sl-ease-sunrise);
  }
}

/* ─── E4: Ambient segment B — process section with atomic pattern field ───────
   AMB-1: second ambient segment (header sunburst is segment A)
   Different motion register from hero: lateral drift vs. radial wash
   ─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .sl-ambient-b {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--sl-canvas-deep); padding-block: var(--sl-section);
}
[data-design="b"] .sl-ambient-b__field {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.13; pointer-events: none;
}
[data-design="b"] .sl-atomfield { width: 130%; height: 100%; }
[data-design="b"] .sl-atomfield__g {
  transform-box: fill-box;
  animation: b-atomdrift var(--sl-cyc-pattern) var(--sl-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"] .sl-ambient-b__inner {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid; gap: var(--sl-bay);
}
[data-design="b"] .sl-ambient-b__title {
  font-family: var(--sl-font-display); font-weight: 800;
  font-size: var(--sl-text-h2); letter-spacing: var(--sl-tracking-display);
  color: var(--sl-ink); margin: 0;
}
[data-design="b"] .sl-process__steps {
  display: grid; gap: var(--sl-court);
}
[data-design="b"] .sl-process__step {
  display: flex; gap: var(--sl-bay); align-items: flex-start;
}
[data-design="b"] .sl-process__num {
  font-family: var(--sl-font-mono); letter-spacing: var(--sl-tracking-mono);
  font-size: var(--sl-text-h2); color: var(--sl-orange); opacity: 0.55;
  flex: 0 0 auto; line-height: 1;
}
[data-design="b"] .sl-process__name {
  font-family: var(--sl-font-display); font-weight: 700;
  font-size: var(--sl-text-h3); color: var(--sl-gold); margin: 0 0 var(--sl-tight);
}
[data-design="b"] .sl-process__desc {
  font-size: var(--sl-text-body); color: var(--sl-ink-2);
  line-height: var(--sl-leading-body); margin: 0; max-width: 58ch;
}
@media (max-width: 560px) {
  [data-design="b"] .sl-process__step { flex-direction: column; gap: var(--sl-gap); }
  [data-design="b"] .sl-process__num { font-size: var(--sl-text-h3); }
  [data-design="b"] .sl-ambient-b__field { opacity: 0.09; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .sl-atomfield__g { animation: none; }
}

/* ─── Service Area ───────────────────────────────────────────────────────────*/
[data-design="b"] .sl-area { background: var(--sl-canvas); padding-block: var(--sl-section); }
[data-design="b"] .sl-area__inner {
  max-width: 760px; margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid; gap: var(--sl-gap);
}
[data-design="b"] .sl-area__title {
  font-family: var(--sl-font-display); font-weight: 800;
  font-size: var(--sl-text-h2); letter-spacing: var(--sl-tracking-display);
  color: var(--sl-ink); margin: 0;
}
[data-design="b"] .sl-area__desc {
  font-size: var(--sl-text-body); color: var(--sl-ink-2);
  line-height: var(--sl-leading-body); margin: 0; max-width: 58ch;
}
[data-design="b"] .sl-area__phone { color: var(--sl-gold-glow); }

/* ─── Repeated funnel CTA ───────────────────────────────────────────────────*/
[data-design="b"] .sl-repeat-cta {
  background: var(--sl-canvas-deep); padding-block: var(--sl-section);
}
[data-design="b"] .sl-repeat-cta__inner {
  max-width: 760px; margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: flex; flex-wrap: wrap; gap: var(--sl-bay);
  align-items: center; justify-content: space-between;
}
[data-design="b"] .sl-repeat-cta__line {
  font-family: var(--sl-font-display); font-weight: 700;
  font-size: var(--sl-text-h3); color: var(--sl-ink); margin: 0;
  max-width: 36ch; text-wrap: balance;
}

/* ─── Footer ─────────────────────────────────────────────────────────────────*/
[data-design="b"] .sl-footer {
  background: #2A1D12; padding-block: var(--sl-court);
}
[data-design="b"] .sl-footer__inner {
  max-width: 1100px; margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
  display: grid; gap: var(--sl-gap); justify-items: start;
}
[data-design="b"] .sl-footer__name {
  font-family: var(--sl-font-display); font-weight: 800;
  font-size: var(--sl-text-h3); color: #F4EAD0; margin: 0;
}
[data-design="b"] .sl-footer__meta {
  font-family: var(--sl-font-mono); font-size: var(--sl-text-cap);
  color: #B7C0C9; letter-spacing: var(--sl-tracking-mono); margin: 0;
}
[data-design="b"] .sl-footer__phone {
  font-family: var(--sl-font-mono); font-size: var(--sl-text-lead);
  color: var(--sl-gold-glow); text-decoration: none;
  letter-spacing: var(--sl-tracking-mono);
}
[data-design="b"] .sl-footer__quote {
  font-family: var(--sl-font-display); font-weight: 700;
  font-size: var(--sl-text-body); color: var(--sl-orange);
  text-decoration: none; padding: 4px 0;
}
[data-design="b"] .sl-footer__copy {
  font-size: var(--sl-text-meta); color: #8A9BAE; margin: 0;
  margin-top: var(--sl-gap);
}

/* ─── TRIAD-2: Scroll-driven parallax (hero backdrop + process section)
   The hero backdrop layers get a scroll-linked transform applied in JS.
   CSS prep: will-change on parallax targets for compositor promotion.
   ─────────────────────────────────────────────────────────────────────────── */
[data-design="b"] .sl-hero__wash,
[data-design="b"] .sl-hero__sky {
  will-change: transform;
}

/* ─── No-h-scroll guard (scoped to .dq-design, never bare [data-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; }

@media (max-width: 390px) {
  [data-design="b"] .sl-funnel__options { flex-direction: column; }
  [data-design="b"] .sl-funnel__option { width: 100%; }
  [data-design="b"] .sl-process__step { gap: var(--sl-gap); }
}

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