/* ═══════════════════════════════════════════════════════════════
   North Light × painting-pittsburgh — SLOT B
   All selectors scoped under [data-design="b"].dq-design
   All keyframes prefixed nlb-
   Design tokens: --design-b-primary exposed on [data-design="b"]
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Outfit:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens (slot b) ─────────────────────────────────── */
[data-design="b"] {
  --design-b-primary: #1B3A52;

  /* Colors */
  --nlb-linen         : #F4F2EC;
  --nlb-linen-warm    : #E5E1D6;
  --nlb-linen-dark    : #1C1813;
  --nlb-ink           : #1C1813;
  --nlb-ink-soft      : #3F362C;
  --nlb-muted         : #807767;
  --nlb-rule          : #C9C2B0;
  --nlb-rule-strong   : #6E6655;

  /* Studio pigments — B palette uses a warmer, earthier shift than A */
  --nlb-chip-01       : #EAE6D8;   /* Lead White — eggshell */
  --nlb-chip-02       : #7B6A58;   /* Burnt Sienna — satin */
  --nlb-chip-03       : #2E4A38;   /* Chrome Oxide — semigloss */
  --nlb-chip-04       : #EDF0F2;   /* Titanium White — ceiling */
  --nlb-chip-01-wet   : #DDD8C7;
  --nlb-chip-02-wet   : #8D7A66;
  --nlb-chip-03-wet   : #365A42;
  --nlb-chip-04-wet   : #D8DCE0;

  --nlb-light-warm    : #F1D7A0;
  --nlb-light-cool    : #C7CFD6;
  --nlb-pigment-bloom : rgba(105,80,55,0.18);
  --nlb-critical      : #B23A1F;
  --nlb-success       : #6F7A3A;

  /* Brand */
  --nlb-brand         : #1B3A52;
  --nlb-brand-wet     : #224862;
  --nlb-accent        : #B9914A;

  /* Typography */
  --nlb-font-display  : 'Newsreader', 'Source Serif 4', 'Georgia', serif;
  --nlb-font-body     : 'Outfit', -apple-system, 'Helvetica Neue', sans-serif;
  --nlb-font-mono     : 'JetBrains Mono', 'SFMono-Regular', 'Menlo', monospace;

  --nlb-type-spread   : clamp(40px, 6vw, 80px);
  --nlb-type-display  : clamp(32px, 4.5vw, 56px);
  --nlb-type-headline : clamp(22px, 2.8vw, 30px);
  --nlb-type-body-lg  : clamp(17px, 1.5vw, 20px);
  --nlb-type-body     : clamp(16px, 1.3vw, 18px);
  --nlb-type-caption  : 14px;
  --nlb-type-stamp    : 12px;

  /* Spacing (atelier-floor naming) */
  --nlb-hairline : 1px;
  --nlb-thread   : 4px;
  --nlb-grain    : 8px;
  --nlb-stroke   : 16px;
  --nlb-coat     : 24px;
  --nlb-canvas   : 40px;
  --nlb-wall     : 64px;
  --nlb-room     : 96px;
  --nlb-atelier  : 160px;

  /* Radius */
  --nlb-radius-chip : 0;
  --nlb-radius-tag  : 2px;
  --nlb-radius-btn  : 4px;

  /* Elevation */
  --nlb-elev-bloom : 0 0 0 1px var(--nlb-pigment-bloom), 0 0 32px -8px var(--nlb-pigment-bloom);

  /* Motion durations */
  --nlb-dur-touch   : 220ms;
  --nlb-dur-settle  : 380ms;
  --nlb-dur-bloom   : 900ms;
  --nlb-dur-load    : 1400ms;
  --nlb-dur-cure    : 1800ms;
  --nlb-dur-light   : 24000ms;
  --nlb-dur-light-b : 17000ms;
  --nlb-dur-breath  : 6400ms;
  --nlb-dur-pointer : 8000ms;

  /* Easing */
  --nlb-ease-light  : cubic-bezier(.45, .15, .35, 1);
  --nlb-ease-bloom  : cubic-bezier(.22, .61, .36, 1);
  --nlb-ease-settle : cubic-bezier(.16, 1, .3, 1);
}

/* ── Base reset (scoped) ────────────────────────────────────── */
[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; }

[data-design="b"] {
  background: var(--nlb-linen);
  color: var(--nlb-ink);
  font-family: var(--nlb-font-body);
  font-size: var(--nlb-type-body);
  line-height: 1.6;
}

/* ── Shared tag / label ─────────────────────────────────────── */
[data-design="b"] .nl-tag {
  font-family: var(--nlb-font-mono);
  font-size: var(--nlb-type-stamp);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nlb-muted);
  border: 1px solid var(--nlb-rule);
  border-radius: var(--nlb-radius-tag);
  padding: 3px 7px;
  display: inline-block;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   E1 — HEADER
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .nl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nlb-linen);
}
[data-design="b"] .nl-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nlb-stroke) clamp(var(--nlb-stroke), 4vw, var(--nlb-canvas));
  min-height: 68px;
}
[data-design="b"] .nl-header__logo {
  text-decoration: none;
  color: var(--nlb-ink);
}
[data-design="b"] .nl-header__mark {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.005em;
  line-height: 1;
  font-feature-settings: "ss01";
}
[data-design="b"] .nl-header__menu {
  appearance: none;
  background: transparent;
  border: 1px solid var(--nlb-rule);
  border-radius: var(--nlb-radius-btn);
  width: 44px; height: 44px;
  display: grid;
  place-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0 10px;
}
[data-design="b"] .nl-header__menu-bar {
  display: block;
  width: 22px; height: 1px;
  background: var(--nlb-ink);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .nl-header__menu:hover { border-color: var(--nlb-ink); }
}

/* Header rule + atmosphere rake */
[data-design="b"] .nl-header__rule {
  position: relative;
  height: 1px;
  background: var(--nlb-rule);
  overflow: visible;
}
[data-design="b"] .nl-header__rake {
  position: absolute;
  left: -10%; right: -10%;
  top: -8px; height: 16px;
  background: linear-gradient(90deg, transparent 0%, var(--nlb-light-warm) 30%, var(--nlb-light-cool) 70%, transparent 100%);
  opacity: 0.32;
  filter: blur(8px);
  animation: nlb-header-rake var(--nlb-dur-light-b) var(--nlb-ease-light) infinite;
}
@keyframes nlb-header-rake {
  0%, 100% { transform: translateX(-12%); opacity: 0.20; }
  50%      { transform: translateX(12%);  opacity: 0.40; }
}

/* Curtain */
[data-design="b"] .nl-curtain {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(28,24,19,0.36);
}
[data-design="b"] .nl-curtain[hidden] { display: none; }
[data-design="b"] .nl-curtain__panel {
  position: absolute;
  left: 0; right: 0; top: 0;
  background: var(--nlb-linen);
  border-bottom: 2px solid var(--nlb-brand);
  padding: var(--nlb-coat) clamp(var(--nlb-stroke), 4vw, var(--nlb-canvas)) var(--nlb-canvas);
  display: flex;
  flex-direction: column;
  gap: var(--nlb-canvas);
  transform: translateY(-100%);
  transition: transform 760ms var(--nlb-ease-light);
}
[data-design="b"] .nl-curtain.is-open .nl-curtain__panel { transform: translateY(0); }
[data-design="b"] .nl-curtain__close {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: var(--nlb-font-mono);
  font-size: 28px;
  color: var(--nlb-ink);
  cursor: pointer;
  align-self: flex-end;
  width: 44px; height: 44px;
  display: grid;
  place-content: center;
}
[data-design="b"] .nl-curtain__nav {
  display: flex;
  flex-direction: column;
  gap: var(--nlb-grain);
}
[data-design="b"] .nl-curtain__nav a {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-size: 32px;
  font-weight: 500;
  color: var(--nlb-ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--nlb-rule);
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
  min-height: 56px;
  display: flex;
  align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .nl-curtain__nav a:hover { color: var(--nlb-brand); }
}
[data-design="b"] .nl-curtain__foot {
  display: flex;
  flex-direction: column;
  gap: var(--nlb-coat);
  margin-top: auto;
}
[data-design="b"] .nl-curtain__phone {
  font-family: var(--nlb-font-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--nlb-ink);
  text-decoration: none;
  padding: 12px 0;
}

/* ══════════════════════════════════════════════════════════════
   E2 — CTA (Loaded Stroke) — used in hero + footer
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .nl-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 30px;
  min-height: 56px;
  background: var(--nlb-brand);
  background-image: linear-gradient(95deg, var(--nlb-brand-wet) 0%, var(--nlb-brand) 35%, var(--nlb-brand) 70%, var(--nlb-brand-wet) 100%);
  background-size: 200% 100%;
  color: var(--nlb-linen);
  font-family: var(--nlb-font-body);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  border-radius: var(--nlb-radius-btn);
  cursor: pointer;
  border: 0;
  letter-spacing: 0.01em;
  animation: nlb-cta-breath var(--nlb-dur-breath) ease-in-out infinite;
  transition: box-shadow var(--nlb-dur-settle) var(--nlb-ease-bloom),
              transform var(--nlb-dur-touch) var(--nlb-ease-settle);
  box-shadow: 0 0 0 0 transparent;
}
[data-design="b"] .nl-cta__arrow {
  font-family: var(--nlb-font-mono);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--nlb-dur-settle) var(--nlb-ease-settle);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .nl-cta:hover { box-shadow: var(--nlb-elev-bloom); }
  [data-design="b"] .nl-cta:hover .nl-cta__arrow { transform: translateX(4px); }
}
[data-design="b"] .nl-cta:focus-visible {
  outline: 2px solid var(--nlb-brand);
  outline-offset: 4px;
  box-shadow: var(--nlb-elev-bloom);
}
[data-design="b"] .nl-cta:active {
  transform: scale(0.985);
  box-shadow: 0 0 0 1px var(--nlb-pigment-bloom), 0 0 48px -4px var(--nlb-pigment-bloom);
}
@keyframes nlb-cta-breath {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Ghost variant */
[data-design="b"] .nl-cta--ghost {
  background: transparent;
  background-image: none;
  color: var(--nlb-ink);
  border: 1px solid var(--nlb-rule-strong);
  animation: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .nl-cta--ghost:hover { border-color: var(--nlb-brand); color: var(--nlb-brand); }
}

/* Small CTA */
[data-design="b"] .nl-cta--sm {
  padding: 12px 20px;
  min-height: 44px;
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════
   E3 — HERO (transformation backdrop + hero text)
   isolation: isolate — text layer always topmost at its headline center
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .nl-hero {
  position: relative;
  isolation: isolate;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: var(--nlb-linen);
  overflow: hidden;
  padding: var(--nlb-room) clamp(var(--nlb-stroke), 5vw, var(--nlb-canvas));
}

/* Backdrop layers — all pointer-events:none, z-index below text */
[data-design="b"] .nl-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Atmosphere drift — slow warm/cool gradient across the hero (24s cycle) */
[data-design="b"] .nl-hero__atmosphere {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    var(--nlb-light-warm) 0%,
    var(--nlb-linen) 38%,
    var(--nlb-light-cool) 72%,
    var(--nlb-linen) 100%
  );
  opacity: 0.36;
  animation: nlb-hero-atmosphere var(--nlb-dur-light) var(--nlb-ease-light) infinite;
}
@keyframes nlb-hero-atmosphere {
  0%   { opacity: 0.22; transform: scale(1.04) translateX(-3%); }
  50%  { opacity: 0.46; transform: scale(1.00) translateX(3%); }
  100% { opacity: 0.22; transform: scale(1.04) translateX(-3%); }
}

/* Wet-edge advance: a color wash fills up from bottom — painting transformation motif */
[data-design="b"] .nl-hero__wash {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(0deg, var(--nlb-chip-01-wet) 0%, transparent 100%);
  opacity: 0;
  transform-origin: bottom center;
  transform: scaleY(0.3);
  animation: nlb-hero-wash 9s var(--nlb-ease-bloom) infinite;
}
@keyframes nlb-hero-wash {
  0%   { opacity: 0;    transform: scaleY(0.30); }
  18%  { opacity: 0.28; transform: scaleY(0.85); }
  55%  { opacity: 0.35; transform: scaleY(1.00); }
  82%  { opacity: 0.25; transform: scaleY(0.90); }
  100% { opacity: 0;    transform: scaleY(0.30); }
}

/* Swatch settle — 4 color chips drift + settle (arrival-only, then ambient drift) */
[data-design="b"] .nl-hero__swatches {
  position: absolute;
  right: clamp(16px, 6vw, 80px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--nlb-stroke);
}
[data-design="b"] .nl-hero__swatch {
  display: block;
  width: 28px;
  height: 80px;
  background: var(--sc);
  border: 1px solid var(--nlb-rule);
  border-radius: 0;
  opacity: 0.7;
  animation: nlb-swatch-settle 3.6s var(--nlb-ease-settle) both,
             nlb-swatch-breathe var(--nlb-dur-light) ease-in-out infinite;
  animation-delay: var(--sd), calc(var(--sd) + 3.6s);
}
@keyframes nlb-swatch-settle {
  0%   { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 0.7; transform: translateY(0); }
}
@keyframes nlb-swatch-breathe {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 0.82; transform: translateY(-4px); }
}

/* Hero text layer — z-index: 2 to sit above all backdrop layers */
[data-design="b"] .nl-hero__content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  display: grid;
  gap: var(--nlb-coat);
}
[data-design="b"] .nl-hero__plate { align-self: start; }
[data-design="b"] .nl-hero__headline {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nlb-type-spread);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--nlb-ink);
  margin: 0;
  font-feature-settings: "ss01";
  opacity: 1;
}
[data-design="b"] .nl-hero__subtitle {
  font-family: var(--nlb-font-body);
  font-size: var(--nlb-type-body-lg);
  color: var(--nlb-ink-soft);
  margin: 0;
  line-height: 1.55;
  max-width: 56ch;
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   E6 — POINTER (sash-of-light, place-rooted register)
   data-mf-role="pointer" — NOT a button, bounding box height ≥24px
   Immediately before #funnel in DOM (0 elements between)
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .nl-pointer {
  display: grid;
  gap: 12px;
  place-items: center;
  width: 100%;
  padding: var(--nlb-canvas) 0;
  min-height: 48px;
  color: var(--nlb-muted);
  text-decoration: none;
  background: var(--nlb-linen);
  pointer-events: none;
  opacity: 1;
}
[data-design="b"] .nl-pointer__field {
  position: relative;
  width: 56px;
  height: 220px;
}
[data-design="b"] .nl-pointer__sash {
  position: absolute;
  left: 50%; top: -40px;
  width: 14px; height: 80px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, var(--nlb-light-warm) 30%, var(--nlb-light-cool) 70%, transparent 100%);
  filter: blur(8px);
  opacity: 0.85;
  animation: nlb-pointer-sash var(--nlb-dur-pointer) var(--nlb-ease-light) infinite;
}
[data-design="b"] .nl-pointer__bloom {
  position: absolute;
  left: 50%; bottom: 0;
  width: 56px; height: 56px;
  border-radius: 999px;
  transform: translate(-50%, 50%) scale(0.93);
  background: radial-gradient(closest-side, var(--nlb-chip-02) 0%, transparent 70%);
  opacity: 0;
  mix-blend-mode: multiply;
  animation: nlb-pointer-bloom var(--nlb-dur-pointer) var(--nlb-ease-bloom) infinite;
}
[data-design="b"] .nl-pointer__label {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--nlb-muted);
  font-feature-settings: "ss01";
  letter-spacing: -0.005em;
  opacity: 1;
}
@keyframes nlb-pointer-sash {
  0%   { transform: translateX(-50%) translateY(0);     opacity: 0;    }
  10%  {                                                 opacity: 0.85; }
  85%  { transform: translateX(-50%) translateY(240px); opacity: 0.85; }
  100% { transform: translateX(-50%) translateY(240px); opacity: 0;    }
}
@keyframes nlb-pointer-bloom {
  0%, 70% { opacity: 0;   transform: translate(-50%, 50%) scale(0.93); }
  85%     { opacity: 0.6; transform: translate(-50%, 50%) scale(1);    }
  100%    { opacity: 0;   transform: translate(-50%, 50%) scale(2);    }
}

/* ══════════════════════════════════════════════════════════════
   E5 — FUNNEL (4-step qualifying intake)
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .nl-funnel {
  background: var(--nlb-linen-warm);
  border-top: 1px solid var(--nlb-rule);
  padding: var(--nlb-room) clamp(var(--nlb-stroke), 5vw, var(--nlb-canvas));
}
[data-design="b"] .nl-funnel__inner {
  max-width: 680px;
  margin: 0 auto;
  display: grid;
  gap: var(--nlb-canvas);
}
[data-design="b"] .nl-funnel__head { display: grid; gap: var(--nlb-stroke); }
[data-design="b"] .nl-funnel__title {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nlb-type-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--nlb-ink);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="b"] .nl-funnel__lede {
  color: var(--nlb-ink-soft);
  max-width: 56ch;
  margin: 0;
  line-height: 1.6;
}

/* Progress track */
[data-design="b"] .nl-funnel__track {
  display: flex;
  align-items: center;
  gap: 0;
}
[data-design="b"] .nl-funnel__node {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--nlb-rule);
  background: var(--nlb-linen);
  display: grid;
  place-content: center;
  font-family: var(--nlb-font-mono);
  font-size: 12px;
  color: var(--nlb-muted);
  flex-shrink: 0;
  transition: background var(--nlb-dur-settle) var(--nlb-ease-settle),
              border-color var(--nlb-dur-settle) var(--nlb-ease-settle),
              color var(--nlb-dur-settle) var(--nlb-ease-settle);
}
[data-design="b"] .nl-funnel__node.is-active {
  background: var(--nlb-brand);
  border-color: var(--nlb-brand);
  color: var(--nlb-linen);
}
[data-design="b"] .nl-funnel__node.is-done {
  background: var(--nlb-ink-soft);
  border-color: var(--nlb-ink-soft);
  color: var(--nlb-linen);
}
[data-design="b"] .nl-funnel__connector {
  flex: 1;
  height: 1px;
  background: var(--nlb-rule);
}

/* Funnel steps */
[data-design="b"] .nl-funnel__step {
  border: 0;
  padding: 0;
  margin: 0;
  display: none;
  gap: var(--nlb-stroke);
  flex-direction: column;
}
[data-design="b"] .nl-funnel__step.is-current {
  display: flex;
}
[data-design="b"] .nl-funnel__legend {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.5vw, 30px);
  color: var(--nlb-ink);
  padding: 0;
  margin-bottom: var(--nlb-grain);
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
  float: none;
}
[data-design="b"] .nl-funnel__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--nlb-stroke);
}
[data-design="b"] .nl-funnel__opt {
  appearance: none;
  text-align: left;
  cursor: pointer;
  background: var(--nlb-linen);
  border: 1px solid var(--nlb-rule);
  border-radius: var(--nlb-radius-btn);
  padding: var(--nlb-stroke) var(--nlb-coat);
  min-height: 56px;
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--nlb-ink);
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
  transition: border-color var(--nlb-dur-settle) var(--nlb-ease-settle),
              box-shadow var(--nlb-dur-settle) var(--nlb-ease-bloom),
              transform var(--nlb-dur-touch) var(--nlb-ease-settle);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .nl-funnel__opt:hover {
    border-color: var(--nlb-rule-strong);
  }
}
[data-design="b"] .nl-funnel__opt:focus-visible {
  outline: 2px solid var(--nlb-brand);
  outline-offset: 2px;
}
[data-design="b"] .nl-funnel__opt.is-picked {
  border-color: var(--nlb-brand);
  box-shadow: var(--nlb-elev-bloom);
}
[data-design="b"] .nl-funnel__opt:active { transform: scale(0.97); }

/* Contact step fields */
[data-design="b"] .nl-funnel__step--contact { gap: var(--nlb-coat); }
[data-design="b"] .nl-funnel__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nlb-coat);
}
[data-design="b"] .nl-field { display: grid; gap: var(--nlb-grain); }
[data-design="b"] .nl-field--full { grid-column: 1 / -1; }
[data-design="b"] .nl-field__label {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-size: var(--nlb-type-caption);
  color: var(--nlb-muted);
  font-feature-settings: "ss01";
}
[data-design="b"] .nl-field__input {
  font-family: var(--nlb-font-body);
  font-size: var(--nlb-type-body);
  color: var(--nlb-ink);
  background: var(--nlb-linen);
  border: 0;
  border-bottom: 1px solid var(--nlb-rule);
  border-radius: 0;
  padding: var(--nlb-grain) 0;
  width: 100%;
  transition: border-color var(--nlb-dur-settle) var(--nlb-ease-settle);
}
[data-design="b"] .nl-field__input:focus {
  outline: 0;
  border-bottom-color: var(--nlb-brand);
  border-bottom-width: 2px;
}
[data-design="b"] .nl-field__textarea { resize: vertical; min-height: 80px; }

/* Submit button */
[data-design="b"] .nl-funnel__submit { cursor: pointer; align-self: start; }

/* Confirmation */
[data-design="b"] .nl-funnel__confirm {
  display: none;
  flex-direction: column;
  gap: var(--nlb-coat);
  padding: var(--nlb-canvas);
  background: var(--nlb-linen);
  border: 1px solid var(--nlb-rule);
}
[data-design="b"] .nl-funnel__confirm.is-visible { display: flex; }
[data-design="b"] .nl-funnel__confirm-msg {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-size: var(--nlb-type-body-lg);
  color: var(--nlb-ink-soft);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="b"] .nl-funnel__confirm-phone {
  font-family: var(--nlb-font-body);
  font-weight: 500;
  font-size: 20px;
  color: var(--nlb-brand);
  text-decoration: none;
}
[data-design="b"] .nl-funnel__footer-note {
  font-family: var(--nlb-font-body);
  font-size: var(--nlb-type-caption);
  color: var(--nlb-muted);
  margin: 0;
  line-height: 1.7;
  border-top: 1px solid var(--nlb-rule);
  padding-top: var(--nlb-coat);
}
[data-design="b"] .nl-funnel__footer-note a {
  color: var(--nlb-brand);
}

/* ══════════════════════════════════════════════════════════════
   SERVICES
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .nl-services {
  padding: var(--nlb-room) clamp(var(--nlb-stroke), 5vw, var(--nlb-canvas));
  background: var(--nlb-linen);
  border-top: 1px solid var(--nlb-rule);
}
[data-design="b"] .nl-services__inner { max-width: 1280px; margin: 0 auto; }
[data-design="b"] .nl-services__head {
  display: grid;
  gap: var(--nlb-stroke);
  margin-bottom: var(--nlb-canvas);
}
[data-design="b"] .nl-services__title {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nlb-type-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--nlb-ink);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="b"] .nl-services__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--nlb-canvas) var(--nlb-coat);
}
[data-design="b"] .nl-services__item {
  border-top: 1px solid var(--nlb-rule);
  padding-top: var(--nlb-stroke);
  display: grid;
  gap: var(--nlb-grain);
}
[data-design="b"] .nl-services__name {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--nlb-ink);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="b"] .nl-services__desc {
  font-size: var(--nlb-type-body);
  color: var(--nlb-ink-soft);
  margin: 0;
  line-height: 1.6;
  max-width: 44ch;
}

/* ══════════════════════════════════════════════════════════════
   E4 — PROCESS / PREP (ambient B: pigment-bloom per phase)
   scroll-driven bloom on enter — TRIAD-2 premium scroll motion
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .nl-process {
  padding: var(--nlb-room) clamp(var(--nlb-stroke), 5vw, var(--nlb-canvas));
  background: var(--nlb-linen-warm);
  border-top: 1px solid var(--nlb-rule);
}
[data-design="b"] .nl-process__inner { max-width: 1280px; margin: 0 auto; }
[data-design="b"] .nl-process__head {
  display: grid;
  gap: var(--nlb-stroke);
  margin-bottom: var(--nlb-canvas);
}
[data-design="b"] .nl-process__title {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nlb-type-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--nlb-ink);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="b"] .nl-process__lede {
  color: var(--nlb-ink-soft);
  max-width: 56ch;
  margin: 0;
  line-height: 1.6;
}
[data-design="b"] .nl-process__phases {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
[data-design="b"] .nl-process__phase {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--nlb-coat);
  align-items: start;
  padding: var(--nlb-coat) 0;
  border-top: 1px solid var(--nlb-rule);
  position: relative;
  overflow: visible;
}
/* Pigment-bloom per phase — TRIAD-2 scroll-linked reveal */
[data-design="b"] .nl-process__bloom {
  position: absolute;
  left: 20px; top: 50%;
  width: 56px; height: 56px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.4);
  background: radial-gradient(closest-side, var(--nlb-chip-02) 0%, transparent 70%);
  opacity: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: transform var(--nlb-dur-bloom) var(--nlb-ease-bloom),
              opacity var(--nlb-dur-bloom) var(--nlb-ease-bloom);
  z-index: 0;
}
[data-design="b"] .nl-process__phase.is-bloomed .nl-process__bloom {
  opacity: 0.55;
  transform: translate(-50%, -50%) scale(2.5);
}
[data-design="b"] .nl-process__num { align-self: center; }
[data-design="b"] .nl-process__phase-body { display: grid; gap: var(--nlb-grain); z-index: 1; position: relative; }
[data-design="b"] .nl-process__phase-title {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--nlb-ink);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="b"] .nl-process__phase-body p {
  font-size: var(--nlb-type-body);
  color: var(--nlb-ink-soft);
  margin: 0;
  line-height: 1.65;
  max-width: 56ch;
}

/* ══════════════════════════════════════════════════════════════
   E3/E4 — LIGHT STUDIES / FINISH FAMILIES (ambient A repurposed)
   Four finish-family tiles with light-rake drift + chip color shift
   TRIAD-2: scroll-parallax scale on container enter
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .nl-light {
  padding: var(--nlb-room) clamp(var(--nlb-stroke), 5vw, var(--nlb-canvas));
  background: var(--nlb-linen);
  border-top: 1px solid var(--nlb-rule);
  border-bottom: 1px solid var(--nlb-rule);
}
[data-design="b"] .nl-light__head {
  max-width: 1280px;
  margin: 0 auto var(--nlb-canvas);
  display: grid;
  gap: var(--nlb-stroke);
}
[data-design="b"] .nl-light__title {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nlb-type-display);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--nlb-ink);
  margin: 0;
  max-width: 22ch;
  font-feature-settings: "ss01";
}
[data-design="b"] .nl-light__lede {
  color: var(--nlb-ink-soft);
  max-width: 56ch;
  margin: 0;
  line-height: 1.6;
}
[data-design="b"] .nl-light__grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1280px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--nlb-stroke);
}
[data-design="b"] .nl-light__tile {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--nlb-grain);
  /* TRIAD-2: scroll-parallax enter — slight scale + translate on reveal */
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity var(--nlb-dur-cure) var(--nlb-ease-light),
              transform var(--nlb-dur-cure) var(--nlb-ease-light);
  transition-delay: calc(var(--i) * 120ms);
}
[data-design="b"] .nl-light__tile.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-design="b"] .nl-light__face {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--chip);
  overflow: hidden;
  animation: nlb-light-shift var(--nlb-dur-light) ease-in-out infinite;
  animation-delay: calc(var(--i) * -6s);
  border: 1px solid var(--nlb-rule);
}
[data-design="b"] .nl-light__rake {
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 30%, var(--nlb-light-warm) 45%, var(--nlb-light-cool) 55%, transparent 70%);
  opacity: 0.40;
  mix-blend-mode: soft-light;
  animation: nlb-light-rake var(--nlb-dur-light-b) ease-in-out infinite;
  animation-delay: calc(var(--i) * -4.25s);
}
[data-design="b"] .nl-light__meta { display: grid; gap: 4px; }
[data-design="b"] .nl-light__name {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--nlb-ink);
  font-feature-settings: "ss01";
}
@keyframes nlb-light-shift {
  0%, 100% { background: var(--chip); }
  50%      { background: var(--chip-wet); }
}
@keyframes nlb-light-rake {
  0%, 100% { transform: translateX(-30%) translateY(-10%); opacity: 0.30; }
  50%      { transform: translateX(30%) translateY(10%);   opacity: 0.55; }
}

/* ══════════════════════════════════════════════════════════════
   SERVICE AREA
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .nl-area {
  padding: var(--nlb-room) clamp(var(--nlb-stroke), 5vw, var(--nlb-canvas));
  background: var(--nlb-linen-warm);
  border-top: 1px solid var(--nlb-rule);
  text-align: center;
}
[data-design="b"] .nl-area__inner {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: var(--nlb-coat);
  place-items: center;
}
[data-design="b"] .nl-area__title {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nlb-type-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--nlb-ink);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="b"] .nl-area__desc {
  font-size: var(--nlb-type-body);
  color: var(--nlb-ink-soft);
  margin: 0;
  line-height: 1.6;
}
[data-design="b"] .nl-area__phone {
  font-family: var(--nlb-font-body);
  font-weight: 500;
  font-size: 22px;
  color: var(--nlb-brand);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
[data-design="b"] .nl-footer {
  background: var(--nlb-linen-warm);
  border-top: 1px solid var(--nlb-rule);
  padding: var(--nlb-canvas) clamp(var(--nlb-stroke), 5vw, var(--nlb-canvas));
}
[data-design="b"] .nl-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--nlb-coat);
  align-items: center;
  flex-wrap: wrap;
}
[data-design="b"] .nl-footer__brand { display: grid; gap: var(--nlb-grain); }
[data-design="b"] .nl-footer__name {
  font-family: var(--nlb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--nlb-ink);
  font-feature-settings: "ss01";
}
[data-design="b"] .nl-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nlb-coat);
  align-items: center;
}
[data-design="b"] .nl-footer__phone {
  font-family: var(--nlb-font-body);
  font-weight: 500;
  font-size: 18px;
  color: var(--nlb-brand);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
[data-design="b"] .nl-footer__legal {
  grid-column: 1 / -1;
  font-family: var(--nlb-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nlb-muted);
  margin: 0;
  padding-top: var(--nlb-coat);
  border-top: 1px solid var(--nlb-rule);
  line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — scoped to .dq-design
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-design="b"].dq-design .nl-light__grid { grid-template-columns: repeat(2, 1fr); }
  [data-design="b"].dq-design .nl-funnel__fields { grid-template-columns: 1fr; }
  [data-design="b"].dq-design .nl-funnel__options { grid-template-columns: 1fr 1fr; }
  [data-design="b"].dq-design .nl-hero { min-height: 70vh; }
  [data-design="b"].dq-design .nl-hero__swatches { display: none; }
  [data-design="b"].dq-design .nl-footer__inner { grid-template-columns: 1fr; }
  [data-design="b"].dq-design .nl-process__phase { grid-template-columns: 40px 1fr; gap: var(--nlb-stroke); }
}
@media (max-width: 420px) {
  [data-design="b"].dq-design .nl-light__grid { grid-template-columns: 1fr; }
  [data-design="b"].dq-design .nl-funnel__options { grid-template-columns: 1fr; }
  [data-design="b"].dq-design .nl-header__mark { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION FALLBACKS
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .nl-header__rake { animation: none; opacity: 0.28; }
  [data-design="b"] .nl-curtain__panel { transition: none; }
  [data-design="b"] .nl-cta { animation: none; background-image: none; }
  [data-design="b"] .nl-hero__atmosphere { animation: none; opacity: 0.28; }
  [data-design="b"] .nl-hero__wash { animation: none; opacity: 0.20; transform: scaleY(0.8); }
  [data-design="b"] .nl-hero__swatch { animation: none; opacity: 0.6; }
  [data-design="b"] .nl-pointer__sash { animation: none; transform: translateX(-50%) translateY(100px); opacity: 0.8; }
  [data-design="b"] .nl-pointer__bloom { animation: none; opacity: 0.4; transform: translate(-50%, 50%) scale(1); }
  [data-design="b"] .nl-light__face,
  [data-design="b"] .nl-light__rake { animation: none; }
  [data-design="b"] .nl-light__rake { opacity: 0.35; }
  [data-design="b"] .nl-light__tile { opacity: 1; transform: none; transition: none; }
  [data-design="b"] .nl-process__bloom { transition: none; }
  [data-design="b"] .nl-funnel__step,
  [data-design="b"] .nl-funnel__node { transition: none; }
  [data-design="b"] .nl-funnel__opt { transition: none; }
}

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