/* ============================================================
   LOPEZ's Pro Painting & Drywall — Design-A (North Light)
   Scope: [data-design="a"]  |  Keyframe prefix: nl-
   All north-light selectors remapped to [data-design="a"]
   ============================================================ */

@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');

/* ── TOKEN SYSTEM ──────────────────────────────────────────── */
[data-design="a"] {
  --design-a-primary    : #1B3A52;   /* Prussian Blue — house anchor */

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

  --nl-chip-01          : #E8E4D4;
  --nl-chip-02          : #6B5645;
  --nl-chip-03          : #B9914A;
  --nl-chip-04          : #1B3A52;
  --nl-chip-01-wet      : #DDD9C8;
  --nl-chip-02-wet      : #7C6650;
  --nl-chip-03-wet      : #C99C52;
  --nl-chip-04-wet      : #224862;

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

  --nl-surface          : var(--nl-linen);
  --nl-surface-sunk     : var(--nl-linen-warm);
  --nl-text             : var(--nl-ink);
  --nl-text-soft        : var(--nl-ink-soft);
  --nl-text-mute        : var(--nl-muted);
  --nl-brand            : var(--nl-chip-04);
  --nl-brand-wet        : var(--nl-chip-04-wet);
  --nl-accent           : var(--nl-chip-03);
  --nl-accent-deep      : var(--nl-chip-02);

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

  --nl-type-spread      : clamp(40px, 6vw, 80px);
  --nl-type-display     : clamp(32px, 4.5vw, 56px);
  --nl-type-headline    : clamp(22px, 2.8vw, 30px);
  --nl-type-body-lg     : clamp(18px, 1.6vw, 21px);
  --nl-type-body        : clamp(16px, 1.4vw, 18px);
  --nl-type-caption     : 14px;
  --nl-type-stamp       : 12px;

  --nl-hairline         : 1px;
  --nl-thread           : 4px;
  --nl-grain            : 8px;
  --nl-stroke           : 16px;
  --nl-coat             : 24px;
  --nl-canvas           : 40px;
  --nl-wall             : 64px;
  --nl-room             : 96px;
  --nl-atelier          : 160px;

  --nl-radius-chip      : 0;
  --nl-radius-tag       : 2px;
  --nl-radius-btn       : 4px;

  --nl-dur-touch        : 220ms;
  --nl-dur-settle       : 380ms;
  --nl-dur-bloom        : 900ms;
  --nl-dur-load         : 1400ms;
  --nl-dur-cure         : 1800ms;
  --nl-dur-light        : 24000ms;
  --nl-dur-light-b      : 17000ms;
  --nl-dur-breath       : 6400ms;
  --nl-dur-pointer      : 8000ms;

  --nl-ease-light       : cubic-bezier(.45,.15,.35,1);
  --nl-ease-bloom       : cubic-bezier(.22,.61,.36,1);
  --nl-ease-settle      : cubic-bezier(.16,1,.3,1);

  --nl-elev-bloom       : 0 0 0 1px var(--nl-pigment-bloom), 0 0 32px -8px var(--nl-pigment-bloom);

  /* base reset inside scope */
  font-family: var(--nl-font-body);
  color: var(--nl-text);
  background: var(--nl-surface);
  font-size: var(--nl-type-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── SHARED UTILITIES ──────────────────────────────────────── */
[data-design="a"] .nl-tag {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nl-text-mute);
  background: var(--nl-linen-warm);
  border: 1px solid var(--nl-rule);
  border-radius: var(--nl-radius-tag);
  padding: 3px 8px;
  display: inline-block;
  line-height: 1.5;
}

/* ── E1: HEADER ─────────────────────────────────────────────
   Three things only: logo + rake (atmospheric) + hamburger   */
[data-design="a"] .nl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nl-linen);
}
/* PERF-6 guard: NO backdrop-filter:blur on sticky header */

[data-design="a"] .nl-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nl-stroke) clamp(var(--nl-stroke), 4vw, var(--nl-canvas));
  min-height: 68px;
}

[data-design="a"] .nl-header__logo {
  text-decoration: none;
  color: var(--nl-ink);
}
[data-design="a"] .nl-header__mark {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2.5vw, 26px);
  letter-spacing: -0.005em;
  line-height: 1;
  font-feature-settings: "ss01";
}

[data-design="a"] .nl-header__menu {
  appearance: none;
  background: transparent;
  border: 1px solid var(--nl-rule);
  border-radius: var(--nl-radius-btn);
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0 10px;
  flex-shrink: 0;
}
[data-design="a"] .nl-header__menu-bar {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--nl-ink);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .nl-header__menu:hover { border-color: var(--nl-ink); }
}

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

/* Curtain / drawer — focus-trapped, display:none when closed */
[data-design="a"] .nl-curtain {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(28,24,19,0.36);
}
[data-design="a"] .nl-curtain[hidden] { display: none; }

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

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

[data-design="a"] .nl-cta--ghost {
  background: transparent;
  background-image: none;
  border: 1px solid var(--nl-rule-strong);
  color: var(--nl-ink);
  animation: none;
}
[data-design="a"] .nl-cta--ghost:hover {
  border-color: var(--nl-ink);
}
[data-design="a"] .nl-cta--submit {
  width: 100%;
  justify-content: center;
}

/* ── HERO ───────────────────────────────────────────────────── */
/* Transformation-motif backdrop (E3 ambient A)                 */
/* ONE animated layer: warm→cool wash + wet-edge advance         */
/* Hero text z-index ABOVE all backdrop layers                  */
[data-design="a"] .nl-hero {
  position: relative;
  min-height: clamp(480px, 72vh, 840px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--nl-linen);
  isolation: isolate;
}

/* Backdrop: the ONE moving layer (HERO-1) */
[data-design="a"] .nl-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Base color field — slow warm→cool cycle (ambient, perceptible at rest) */
[data-design="a"] .nl-hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--nl-light-warm) 0%, var(--nl-linen) 45%, var(--nl-light-cool) 100%);
  opacity: 0.55;
  animation: nl-hero-wash var(--nl-dur-light) var(--nl-ease-light) infinite;
}
@keyframes nl-hero-wash {
  0%   { opacity: 0.38; background-position: 0% 50%; filter: hue-rotate(0deg); }
  50%  { opacity: 0.60; background-position: 100% 50%; filter: hue-rotate(8deg); }
  100% { opacity: 0.38; background-position: 0% 50%; filter: hue-rotate(0deg); }
}
/* Wet-edge advance: a coverage band that sweeps across the hero */
[data-design="a"] .nl-hero__edge {
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 60%;
  background: linear-gradient(90deg, transparent 0%, var(--nl-chip-01) 40%, var(--nl-chip-01-wet) 55%, transparent 100%);
  opacity: 0.42;
  animation: nl-hero-edge var(--nl-dur-light-b) var(--nl-ease-light) infinite;
  animation-delay: -6s;
}
@keyframes nl-hero-edge {
  0%   { transform: translateX(0%);    opacity: 0.30; }
  50%  { transform: translateX(160%);  opacity: 0.48; }
  100% { transform: translateX(0%);    opacity: 0.30; }
}
/* Light-rake overlay (same physics as header, slower) */
[data-design="a"] .nl-hero__rake {
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 30%, var(--nl-light-warm) 45%, var(--nl-light-cool) 55%, transparent 70%);
  opacity: 0.28;
  mix-blend-mode: soft-light;
  animation: nl-hero-rake 19s var(--nl-ease-light) infinite;
  animation-delay: -4s;
}
@keyframes nl-hero-rake {
  0%, 100% { transform: translateX(-20%) translateY(-10%); opacity: 0.22; }
  50%      { transform: translateX(20%)  translateY(10%);  opacity: 0.38; }
}

/* Hero body: z-index ABOVE backdrop (HARD) */
[data-design="a"] .nl-hero__body {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(var(--nl-room), 10vh, var(--nl-atelier))
           clamp(var(--nl-stroke), 4vw, var(--nl-canvas))
           clamp(var(--nl-wall), 6vh, var(--nl-atelier));
  display: flex;
  flex-direction: column;
  gap: var(--nl-coat);
  align-items: flex-start;
}

/* Hero text: opacity:1 at first paint — NEVER opacity:0 */
[data-design="a"] .nl-hero__plate { }

[data-design="a"] .nl-hero__headline {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nl-type-spread);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--nl-text);
  margin: 0;
  max-width: 18ch;
  font-feature-settings: "ss01";
  opacity: 1; /* HARD: never opacity:0 */
}

[data-design="a"] .nl-hero__subtitle {
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body-lg);
  color: var(--nl-text-soft);
  margin: 0;
  max-width: 52ch;
  line-height: 1.55;
  opacity: 1; /* HARD */
}

[data-design="a"] .nl-hero__proof {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nl-text-mute);
  margin: 0;
  opacity: 1; /* HARD */
}

/* ── PREMIUM SCROLL — TRIAD-2: parallax on hero→content handoff */
/* Achieved via JS scroll binding on .nl-hero__backdrop (transform only) */

/* ── E6: POINTER ────────────────────────────────────────────── */
/* Sash of light, wet-edge register (painting-specific).        */
/* NOT a <button>. Visibly rendered: opacity:1, bbox ≥8px.     */
/* Sits immediately before #funnel (≤2 siblings).               */
[data-design="a"] .nl-pointer {
  display: grid;
  gap: 12px;
  place-items: center;
  width: 100%;
  padding: var(--nl-canvas) 0;
  color: var(--nl-text-soft);
  text-decoration: none;
  background: var(--nl-linen);
  border-top: 1px solid var(--nl-rule);
  opacity: 1; /* HARD: must be visible */
}

[data-design="a"] .nl-pointer__field {
  position: relative;
  width: 56px;
  height: 220px; /* bbox height >> 8px */
}

[data-design="a"] .nl-pointer__sash {
  position: absolute;
  left: 50%; top: -40px;
  width: 14px; height: 80px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, var(--nl-light-warm) 30%, var(--nl-light-cool) 70%, transparent 100%);
  filter: blur(8px);
  opacity: 0.85;
  animation: nl-pointer-sash var(--nl-dur-pointer) var(--nl-ease-light) infinite;
}
@keyframes nl-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;    }
}

[data-design="a"] .nl-pointer__bloom {
  position: absolute;
  left: 50%; bottom: 0;
  width: 56px; height: 56px;
  border-radius: 999px;
  transform: translate(-50%, 50%) scale(0.4);
  background: radial-gradient(closest-side, var(--nl-chip-02) 0%, transparent 70%);
  opacity: 0;
  mix-blend-mode: multiply;
  animation: nl-pointer-bloom var(--nl-dur-pointer) var(--nl-ease-bloom) infinite;
}
@keyframes nl-pointer-bloom {
  0%, 70% { opacity: 0;   transform: translate(-50%, 50%) scale(0.4); }
  85%     { opacity: 0.6; transform: translate(-50%, 50%) scale(1);   }
  100%    { opacity: 0;   transform: translate(-50%, 50%) scale(2);   }
}

[data-design="a"] .nl-pointer__label {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--nl-text-soft);
  font-feature-settings: "ss01";
  letter-spacing: -0.005em;
  opacity: 1; /* HARD */
}

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

/* Funnel stage: steps shown/hidden via is-current */
[data-design="a"] .nl-funnel__stage {
  position: relative;
  min-height: 320px;
}
[data-design="a"] .nl-funnel__step {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nl-dur-load) var(--nl-ease-light);
  /* HARD: funnel-option buttons that mount in must NOT start opacity:0 */
  /* All funnel-option buttons have opacity:1 resting; entrance via transform only */
}
[data-design="a"] .nl-funnel__step.is-current {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
/* Contact and confirm steps: static position to expand naturally */
[data-design="a"] .nl-funnel__step--contact,
[data-design="a"] .nl-funnel__step--confirm {
  /* These are absolute when not current, relative+expanding when current */
}

[data-design="a"] .nl-funnel__legend {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--nl-text);
  padding: 0;
  margin: 0 0 var(--nl-stroke) 0;
  display: block;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
}

[data-design="a"] .nl-funnel__options {
  display: grid;
  gap: var(--nl-stroke);
}

/* Funnel option buttons — opacity:1 resting, entrance via transform */
[data-design="a"] .nl-funnel__opt {
  appearance: none;
  text-align: left;
  cursor: pointer;
  background: var(--nl-linen);
  border: 1px solid var(--nl-rule);
  border-radius: var(--nl-radius-btn);
  padding: var(--nl-stroke);
  min-height: 64px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--nl-stroke);
  align-items: center;
  font-family: var(--nl-font-body);
  color: var(--nl-text);
  opacity: 1; /* HARD: resting opacity:1 always */
  transition: border-color var(--nl-dur-settle) var(--nl-ease-settle),
              background-color var(--nl-dur-settle) var(--nl-ease-settle),
              box-shadow var(--nl-dur-settle) var(--nl-ease-bloom),
              transform var(--nl-dur-touch) var(--nl-ease-settle);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .nl-funnel__opt:hover {
    border-color: var(--nl-rule-strong);
    transform: translateX(3px);
  }
}
[data-design="a"] .nl-funnel__opt:focus-visible {
  outline: 2px solid var(--nl-brand);
  outline-offset: 2px;
}
[data-design="a"] .nl-funnel__opt.is-picked {
  border-color: var(--nl-brand);
  background: var(--nl-chip-01);
  box-shadow: var(--nl-elev-bloom);
}
[data-design="a"] .nl-funnel__opt:active {
  transform: scale(0.985);
}

[data-design="a"] .nl-funnel__opt-mark {
  font-family: var(--nl-font-mono);
  font-size: 16px;
  color: var(--nl-rule-strong);
  transition: color var(--nl-dur-settle) var(--nl-ease-settle);
  line-height: 1;
}
[data-design="a"] .nl-funnel__opt.is-picked .nl-funnel__opt-mark {
  color: var(--nl-brand);
}

[data-design="a"] .nl-funnel__opt-body {
  display: grid;
  gap: 2px;
}
[data-design="a"] .nl-funnel__opt-name {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  font-feature-settings: "ss01";
  opacity: 1; /* HARD */
}
[data-design="a"] .nl-funnel__opt-note {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.05em;
  color: var(--nl-text-mute);
  text-transform: uppercase;
  opacity: 1; /* HARD */
}

/* Contact form (step 4) */
[data-design="a"] .nl-funnel__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nl-stroke);
}
[data-design="a"] .nl-funnel__form .nl-field--full {
  grid-column: 1 / -1;
}
[data-design="a"] .nl-funnel__submit-row {
  grid-column: 1 / -1;
}
[data-design="a"] .nl-funnel__note {
  grid-column: 1 / -1;
  font-family: var(--nl-font-display);
  font-style: italic;
  font-size: var(--nl-type-caption);
  color: var(--nl-text-mute);
  margin: 0;
  line-height: 1.5;
  font-feature-settings: "ss01";
}

/* Fields */
[data-design="a"] .nl-field {
  display: grid;
  gap: var(--nl-grain);
}
[data-design="a"] .nl-field__label {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-size: var(--nl-type-caption);
  color: var(--nl-text-mute);
  font-feature-settings: "ss01";
  line-height: 1.4;
}
[data-design="a"] .nl-field__req {
  color: var(--nl-text-mute);
  font-size: 11px;
}
[data-design="a"] .nl-field__input {
  font-family: var(--nl-font-body);
  font-size: 16px;
  color: var(--nl-text);
  background: var(--nl-linen);
  border: 0;
  border-bottom: 1px solid var(--nl-rule);
  border-radius: 0;
  padding: var(--nl-grain) 0;
  outline: none;
  width: 100%;
  min-height: 44px;
  transition: border-color var(--nl-dur-settle) var(--nl-ease-settle);
}
[data-design="a"] .nl-field__input:focus {
  border-bottom: 2px solid var(--nl-brand);
}
[data-design="a"] .nl-field__textarea {
  resize: vertical;
  min-height: 88px;
}

/* Progress dots */
[data-design="a"] .nl-funnel__progress {
  display: flex;
  gap: var(--nl-grain);
  justify-content: center;
}
[data-design="a"] .nl-funnel__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--nl-rule);
  transition: background var(--nl-dur-settle) var(--nl-ease-settle),
              transform var(--nl-dur-settle) var(--nl-ease-settle);
}
[data-design="a"] .nl-funnel__dot.is-active {
  background: var(--nl-brand);
  transform: scale(1.25);
}

/* Trust line below funnel */
[data-design="a"] .nl-funnel__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nl-grain);
  align-items: center;
  padding-top: var(--nl-coat);
  border-top: 1px solid var(--nl-rule);
}
[data-design="a"] .nl-funnel__trust-alt {
  width: 100%;
  font-size: var(--nl-type-caption);
  color: var(--nl-text-mute);
  margin: 0;
}
[data-design="a"] .nl-funnel__trust-alt a {
  color: var(--nl-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Confirm step */
[data-design="a"] .nl-funnel__step--confirm {
  display: flex;
  align-items: center;
}
[data-design="a"] .nl-funnel__confirm-body {
  display: grid;
  gap: var(--nl-stroke);
}
[data-design="a"] .nl-funnel__confirm-text {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-size: var(--nl-type-headline);
  color: var(--nl-text);
  margin: 0;
  max-width: 44ch;
  line-height: 1.4;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-funnel__confirm-phone {
  font-size: var(--nl-type-caption);
  color: var(--nl-text-mute);
  margin: 0;
}
[data-design="a"] .nl-funnel__confirm-phone a {
  color: var(--nl-brand);
  text-decoration: underline;
}

/* ── SERVICES ───────────────────────────────────────────────── */
[data-design="a"] .nl-services {
  padding: var(--nl-room) clamp(var(--nl-stroke), 5vw, var(--nl-canvas));
  background: var(--nl-linen);
  border-top: 1px solid var(--nl-rule);
}
[data-design="a"] .nl-services__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--nl-canvas);
}
[data-design="a"] .nl-services__head {
  display: grid;
  gap: var(--nl-stroke);
}
[data-design="a"] .nl-services__title {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nl-type-display);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--nl-text);
  margin: 0;
  max-width: 22ch;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-services__lede {
  color: var(--nl-text-soft);
  max-width: 56ch;
  margin: 0;
  line-height: 1.6;
}
[data-design="a"] .nl-services__groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nl-canvas);
}
[data-design="a"] .nl-services__group-label {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nl-text-mute);
  margin: 0 0 var(--nl-stroke) 0;
  padding-bottom: var(--nl-grain);
  border-bottom: 1px solid var(--nl-rule);
}
[data-design="a"] .nl-services__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--nl-stroke);
}
[data-design="a"] .nl-services__item {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--nl-text);
  padding: 0 0 var(--nl-stroke) 0;
  border-bottom: 1px solid var(--nl-rule);
  font-feature-settings: "ss01";
  position: relative;
}
/* Paint-load underline on service item hover — scaleX(transform only, MOTION GATE) */
[data-design="a"] .nl-services__item::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  height: 2px;
  width: 100%;
  background: var(--nl-brand);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 600ms var(--nl-ease-light);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .nl-services__item:hover::after { transform: scaleX(1); }
}

/* ── E4: PROCESS (Ambient B — pigment-bloom reveal) ────────── */
[data-design="a"] .nl-process {
  padding: var(--nl-room) clamp(var(--nl-stroke), 5vw, var(--nl-canvas));
  background: var(--nl-linen-warm);
  border-top: 1px solid var(--nl-rule);
}
[data-design="a"] .nl-process__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--nl-canvas);
}
[data-design="a"] .nl-process__head {
  display: grid;
  gap: var(--nl-stroke);
}
[data-design="a"] .nl-process__title {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nl-type-display);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--nl-text);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-process__lede {
  color: var(--nl-text-soft);
  max-width: 56ch;
  margin: 0;
  line-height: 1.6;
}

[data-design="a"] .nl-process__track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--nl-coat);
}
/* Reuse nl-recent__plate bloom for process phases */
[data-design="a"] .nl-process__phase {
  display: grid;
  gap: var(--nl-stroke);
}
[data-design="a"] .nl-process__phase-num {
  position: relative;
  aspect-ratio: 1;
  background: var(--nl-linen);
  border: 1px solid var(--nl-rule);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-design="a"] .nl-process__phase-index {
  font-family: var(--nl-font-mono);
  font-size: clamp(24px, 3vw, 40px);
  color: var(--nl-brand);
  letter-spacing: -0.02em;
  position: relative;
  z-index: 2;
}
[data-design="a"] .nl-process__phase-body {
  display: grid;
  gap: var(--nl-grain);
}
[data-design="a"] .nl-process__phase-name {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--nl-text);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-process__phase-note {
  font-size: var(--nl-type-caption);
  color: var(--nl-text-soft);
  margin: 0;
  line-height: 1.55;
}

/* nl-recent__plate + nl-recent__bloom shared atoms for pigment-bloom entrance */
[data-design="a"] .nl-recent__plate { }
[data-design="a"] .nl-recent__figure { }
[data-design="a"] .nl-recent__meta  { }

[data-design="a"] .nl-recent__bloom {
  position: absolute;
  left: 50%; top: 50%;
  width: 10%; height: 10%;
  border-radius: 999px;
  background: radial-gradient(closest-side, var(--nl-chip-02) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  mix-blend-mode: multiply;
  transition: transform var(--nl-dur-bloom) var(--nl-ease-bloom),
              opacity var(--nl-dur-bloom) var(--nl-ease-bloom);
  z-index: 2;
  pointer-events: none;
}
[data-design="a"] .nl-recent__plate.is-bloomed .nl-recent__bloom {
  transform: translate(-50%, -50%) scale(12);
  opacity: 0;
}
[data-design="a"] .nl-recent__plate.is-blooming .nl-recent__bloom {
  opacity: 0.55;
  transform: translate(-50%, -50%) scale(8);
}

/* ── SERVICE AREA ──────────────────────────────────────────── */
[data-design="a"] .nl-area {
  padding: var(--nl-room) clamp(var(--nl-stroke), 5vw, var(--nl-canvas));
  background: var(--nl-linen);
  border-top: 1px solid var(--nl-rule);
}
[data-design="a"] .nl-area__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--nl-canvas);
}
[data-design="a"] .nl-area__head {
  display: grid;
  gap: var(--nl-stroke);
}
[data-design="a"] .nl-area__title {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nl-type-display);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--nl-text);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-area__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nl-coat);
}
[data-design="a"] .nl-area__city {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--nl-text);
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
  padding: var(--nl-stroke) var(--nl-canvas);
  border: 1px solid var(--nl-rule);
  border-radius: var(--nl-radius-btn);
  background: var(--nl-linen-warm);
}
[data-design="a"] .nl-area__note {
  color: var(--nl-text-soft);
  margin: 0;
  font-size: var(--nl-type-body);
}
[data-design="a"] .nl-area__note a {
  color: var(--nl-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── REPEATED CTA ──────────────────────────────────────────── */
[data-design="a"] .nl-repeat-cta {
  padding: var(--nl-room) clamp(var(--nl-stroke), 5vw, var(--nl-canvas));
  background: var(--nl-linen-warm);
  border-top: 1px solid var(--nl-rule);
}
[data-design="a"] .nl-repeat-cta__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--nl-canvas);
  flex-wrap: wrap;
}
[data-design="a"] .nl-repeat-cta__line {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nl-type-headline);
  color: var(--nl-text);
  margin: 0;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
}

/* ── FOOTER ─────────────────────────────────────────────────── */
[data-design="a"] .nl-footer {
  background: var(--nl-linen-warm);
  border-top: 1px solid var(--nl-rule-strong);
  padding: var(--nl-room) clamp(var(--nl-stroke), 5vw, var(--nl-canvas)) var(--nl-wall);
}
[data-design="a"] .nl-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--nl-canvas);
  padding-bottom: var(--nl-canvas);
  border-bottom: 1px solid var(--nl-rule);
}
[data-design="a"] .nl-footer__col {
  display: grid;
  gap: var(--nl-grain);
  align-content: start;
}
[data-design="a"] .nl-footer__mark {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--nl-text);
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-footer__section-label {
  margin-bottom: var(--nl-grain);
}
[data-design="a"] .nl-footer__phone {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--nl-brand);
  text-decoration: none;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-footer__link {
  color: var(--nl-text-soft);
  font-size: var(--nl-type-caption);
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-design="a"] .nl-footer__area-line,
[data-design="a"] .nl-footer__cred {
  font-size: var(--nl-type-caption);
  color: var(--nl-text-soft);
}
[data-design="a"] .nl-footer__base {
  max-width: 1280px;
  margin: var(--nl-coat) auto 0;
  display: flex;
  justify-content: flex-start;
}

/* ── SCROLL-LINKED PARALLAX (TRIAD-2 premium scroll motion) ── */
/* Applied via JS: hero backdrop translates on scroll           */
/* CSS sets up the layer for GPU compositing                    */
[data-design="a"] .nl-hero__backdrop {
  will-change: transform;
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .nl-header__rake { animation: none; opacity: 0.28; }
  [data-design="a"] .nl-curtain__panel { transition: none; }
  [data-design="a"] .nl-hero__wash  { animation: none; opacity: 0.45; }
  [data-design="a"] .nl-hero__edge  { animation: none; opacity: 0.30; }
  [data-design="a"] .nl-hero__rake  { animation: none; opacity: 0.22; }
  [data-design="a"] .nl-hero__backdrop { will-change: auto; }
  [data-design="a"] .nl-cta { animation: none; }
  [data-design="a"] .nl-pointer__sash, [data-design="a"] .nl-pointer__bloom { animation: none; }
  [data-design="a"] .nl-pointer__sash { transform: translateX(-50%) translateY(100px); opacity: 0.8; }
  [data-design="a"] .nl-pointer__bloom { opacity: 0.4; transform: translate(-50%, 50%) scale(1); }
  [data-design="a"] .nl-funnel__step { transition: none; }
  [data-design="a"] .nl-funnel__opt { transition: none; }
  [data-design="a"] .nl-recent__bloom { transition: none; opacity: 0; }
  [data-design="a"] .nl-recent__plate.is-bloomed .nl-recent__bloom { opacity: 0; }
  [data-design="a"] .nl-services__item::after { transition: none; }
}

/* ── RESPONSIVE BREAKPOINTS ─────────────────────────────────── */
@media (max-width: 1024px) {
  [data-design="a"] .nl-services__groups {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-design="a"] .nl-process__track {
    grid-template-columns: repeat(3, 1fr);
  }
  [data-design="a"] .nl-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  [data-design="a"] .nl-services__groups {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .nl-process__track {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-design="a"] .nl-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  [data-design="a"] .nl-funnel__form {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .nl-funnel__form .nl-field--full {
    grid-column: 1;
  }
  [data-design="a"] .nl-funnel__submit-row {
    grid-column: 1;
  }
  [data-design="a"] .nl-funnel__note {
    grid-column: 1;
  }
}

@media (max-width: 540px) {
  [data-design="a"] .nl-process__track {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .nl-footer__inner {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .nl-services__groups {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .nl-repeat-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 380px) {
  [data-design="a"] .nl-header__mark { font-size: 17px; }
  [data-design="a"] .nl-area__list { flex-direction: column; }
}

/* ── MOBILE NO-HSCROLL FLOOR (mandatory bottom block) ──────── */
[data-design="a"].dq-design,
[data-design="a"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="a"].dq-design *,
[data-design="a"] .dq-design * {
  min-width: 0;
}
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}
/* ── END ───────────────────────────────────────────────────── */

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