/* =============================================================
   North Light × Benjamin Hackenbruck Painting — Design A
   Scoped entirely under [data-design="a"].
   ZERO [data-design="a"] selectors — all remapped.
   Keyframes prefixed nl- (shared with north-light grammar).
   ~1000 lines target.
   ============================================================= */

/* ── Google Fonts ── */
@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-A token root — exposed as --design-a-primary ── */
[data-design="a"] {
  /* Surface */
  --design-a-primary     : #1B3A52;   /* Prussian Blue — house anchor */
  --design-a-linen       : #F4F2EC;
  --design-a-linen-warm  : #E5E1D6;
  --design-a-linen-dark  : #1C1813;
  --design-a-ink         : #1C1813;
  --design-a-ink-soft    : #3F362C;
  --design-a-muted       : #807767;
  --design-a-rule        : #C9C2B0;
  --design-a-rule-strong : #6E6655;

  /* Studio pigments */
  --design-a-chip-01     : #E8E4D4;   /* Lead White */
  --design-a-chip-02     : #6B5645;   /* Raw Umber */
  --design-a-chip-03     : #B9914A;   /* Yellow Ochre */
  --design-a-chip-04     : #1B3A52;   /* Prussian Blue */
  --design-a-chip-01-wet : #DDD9C8;
  --design-a-chip-02-wet : #7C6650;
  --design-a-chip-03-wet : #C99C52;
  --design-a-chip-04-wet : #224862;

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

  /* Roles */
  --design-a-surface     : var(--design-a-linen);
  --design-a-surface-sunk: var(--design-a-linen-warm);
  --design-a-text        : var(--design-a-ink);
  --design-a-text-soft   : var(--design-a-ink-soft);
  --design-a-text-mute   : var(--design-a-muted);
  --design-a-brand       : var(--design-a-chip-04);
  --design-a-brand-wet   : var(--design-a-chip-04-wet);
  --design-a-accent      : var(--design-a-chip-03);

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

  /* Type scale */
  --nl-type-spread  : clamp(40px, 6.5vw, 86px);
  --nl-type-display : clamp(32px, 4.5vw, 58px);
  --nl-type-headline: clamp(22px, 2.8vw, 30px);
  --nl-type-body-lg : clamp(17px, 1.5vw, 20px);
  --nl-type-body    : clamp(16px, 1.3vw, 18px);
  --nl-type-caption : 14px;
  --nl-type-stamp   : 12px;

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

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

  /* Motion durations */
  --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;

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

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

  /* Surface + font defaults */
  background: var(--design-a-surface);
  color: var(--design-a-text);
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Tag (museum-catalog plate label) ── */
[data-design="a"] .nl-tag {
  display: inline-block;
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--design-a-text-mute);
  background: var(--design-a-linen-warm);
  border: 1px solid var(--design-a-rule);
  border-radius: var(--nl-radius-tag);
  padding: 3px 8px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   E1 — Header
   ══════════════════════════════════════════════════════════ */
[data-design="a"] .nl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--design-a-linen);
}
[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(--design-a-ink);
}
[data-design="a"] .nl-header__mark {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 2vw, 24px);
  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(--design-a-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(--design-a-ink);
}
[data-design="a"] .nl-header__menu:hover { border-color: var(--design-a-ink); }

/* Hairline + light-rake */
[data-design="a"] .nl-header__rule {
  position: relative;
  height: 1px;
  background: var(--design-a-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(--design-a-light-warm) 30%,
    var(--design-a-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.42; }
}

/* Curtain */
[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(--design-a-linen);
  border-bottom: 1px solid var(--design-a-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(--design-a-ink);
  cursor: pointer;
  align-self: flex-end;
  width: 44px;
  height: 44px;
  line-height: 1;
}
[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: 32px;
  font-weight: 500;
  color: var(--design-a-ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--design-a-rule);
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-curtain__nav a:hover { color: var(--design-a-brand); }
[data-design="a"] .nl-curtain__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--nl-stroke);
  align-items: flex-start;
}
[data-design="a"] .nl-curtain__phone {
  font-family: var(--nl-font-body);
  font-size: 18px;
  color: var(--design-a-text-soft);
  text-decoration: none;
  padding: 12px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
[data-design="a"] .nl-curtain__foot { margin-top: auto; }

/* ══════════════════════════════════════════════════════════
   E2 — CTA (Loaded Stroke)
   paint-load gradient, 6.4s breath, pigment-bloom hover
   ══════════════════════════════════════════════════════════ */
[data-design="a"] .nl-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 30px;
  min-height: 56px;
  min-width: 44px;
  background: var(--design-a-brand);
  background-image: linear-gradient(95deg,
    var(--design-a-brand-wet) 0%,
    var(--design-a-brand) 35%,
    var(--design-a-brand) 70%,
    var(--design-a-brand-wet) 100%);
  color: var(--design-a-linen);
  font-family: var(--nl-font-body);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  border: 0;
  border-radius: var(--nl-radius-btn);
  cursor: pointer;
  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;
}
[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);
}
[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(--design-a-brand); outline-offset: 4px; box-shadow: var(--nl-elev-bloom); }
[data-design="a"] .nl-cta:active { transform: scale(0.985); }

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

@keyframes nl-cta-breath {
  0%, 100% { background-position: 0% 50%;   opacity: 0.92; }
  50%      { background-position: 100% 50%; opacity: 1;    }
}

/* ══════════════════════════════════════════════════════════
   E3 — HERO backdrop (single animated layer, painting register)
   warm-cool atmosphere drift + vertical wet-edge wash bars
   ══════════════════════════════════════════════════════════ */
[data-design="a"] .nl-hero {
  position: relative;
  min-height: clamp(440px, 72vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--design-a-linen);
}
[data-design="a"] .nl-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Atmosphere layer — warm-to-cool drift, 24s, ≥0.25 opacity, sustained */
[data-design="a"] .nl-hero__atmosphere {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    var(--design-a-light-warm) 0%,
    var(--design-a-linen) 40%,
    var(--design-a-light-cool) 80%,
    var(--design-a-linen) 100%);
  opacity: 0.45;
  animation: nl-atmo-drift var(--nl-dur-light) var(--nl-ease-light) infinite;
}
@keyframes nl-atmo-drift {
  0%   { background-position: 0% 0%;    opacity: 0.35; }
  33%  { background-position: 60% 40%;  opacity: 0.50; }
  66%  { background-position: 100% 80%; opacity: 0.40; }
  100% { background-position: 0% 0%;    opacity: 0.35; }
}
/* Wet-edge wash bars — horizontal color bands, slow color-shift, painting register */
[data-design="a"] .nl-hero__wash-field {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
[data-design="a"] .nl-hero__bar {
  flex: 1;
  display: block;
  background: var(--chip);
  opacity: 0.22;
  animation:
    nl-bar-shift var(--nl-dur-light) ease-in-out infinite,
    nl-bar-rake  var(--nl-dur-light-b) var(--nl-ease-light) infinite;
  animation-delay: calc(var(--i) * -4.8s), calc(var(--i) * -3.4s);
}
@keyframes nl-bar-shift {
  0%, 100% { background: var(--chip);     opacity: 0.18; }
  50%      { background: var(--chip-wet); opacity: 0.28; }
}
@keyframes nl-bar-rake {
  0%, 100% { transform: scaleX(0.96); }
  50%      { transform: scaleX(1.04); }
}

/* Hero inner */
[data-design="a"] .nl-hero__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(64px, 10vw, 120px) clamp(var(--nl-stroke), 6vw, var(--nl-atelier));
}
[data-design="a"] .nl-hero__content {
  max-width: 720px;
  display: grid;
  gap: var(--nl-stroke);
}
[data-design="a"] .nl-hero__tag { margin-bottom: var(--nl-grain); }
[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.06;
  letter-spacing: -0.018em;
  color: var(--design-a-ink);
  margin: 0;
  max-width: 18ch;
  font-feature-settings: "ss01";
  /* opacity:1 at first paint — hard requirement */
  opacity: 1;
}
[data-design="a"] .nl-hero__subtitle {
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body-lg);
  color: var(--design-a-text-soft);
  margin: 0;
  line-height: 1.5;
  opacity: 1;
}
[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(--design-a-text-mute);
  margin: 0;
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   E6 — Pointer (sash of light, painting register)
   opacity:1, bbox height >> 8px, no directional arrow
   sits IMMEDIATELY before #funnel — zero sibling gap
   ══════════════════════════════════════════════════════════ */
[data-design="a"] .nl-pointer {
  display: grid;
  gap: 12px;
  place-items: center;
  width: 100%;
  padding: var(--nl-canvas) 0;
  background: var(--design-a-linen);
  border-top: 1px solid var(--design-a-rule);
  /* opacity:1 — pointer must be visibly rendered */
  opacity: 1;
  min-height: 120px;
}
[data-design="a"] .nl-pointer__field {
  position: relative;
  width: 56px;
  height: 220px;
}
[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(--design-a-light-warm) 30%,
    var(--design-a-light-cool) 70%,
    transparent 100%);
  filter: blur(8px);
  opacity: 0.85;
  animation: nl-pointer-sash var(--nl-dur-pointer) var(--nl-ease-light) infinite;
}
[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(--design-a-chip-02) 0%, transparent 70%);
  opacity: 0;
  mix-blend-mode: multiply;
  animation: nl-pointer-bloom var(--nl-dur-pointer) var(--nl-ease-bloom) infinite;
}
[data-design="a"] .nl-pointer__label {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--design-a-text-soft);
  font-feature-settings: "ss01";
  letter-spacing: -0.005em;
  /* visible at all times */
  opacity: 1;
}
@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;   }
}
@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);   }
}

/* ══════════════════════════════════════════════════════════
   E5 — Funnel
   ══════════════════════════════════════════════════════════ */
[data-design="a"] .nl-funnel {
  background: var(--design-a-linen-warm);
  border-top: 1px solid var(--design-a-rule);
  padding: var(--nl-room) clamp(var(--nl-stroke), 5vw, var(--nl-canvas));
}
[data-design="a"] .nl-funnel__inner {
  max-width: 680px;
  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(--design-a-text);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-funnel__lede {
  color: var(--design-a-text-soft);
  max-width: 56ch;
  margin: 0;
  line-height: 1.6;
}

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

/* Steps */
[data-design="a"] .nl-funnel__steps { position: relative; min-height: 240px; }
[data-design="a"] .nl-funnel__step {
  border: 0;
  padding: 0;
  margin: 0;
  display: none;
}
[data-design="a"] .nl-funnel__step.is-current { display: grid; gap: var(--nl-stroke); }
[data-design="a"] .nl-funnel__step-legend {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--nl-type-headline);
  color: var(--design-a-text);
  padding: 0;
  margin-bottom: var(--nl-stroke);
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-funnel__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--nl-stroke);
}
[data-design="a"] .nl-funnel__opt {
  appearance: none;
  text-align: left;
  cursor: pointer;
  background: var(--design-a-linen);
  border: 1px solid var(--design-a-rule);
  border-radius: var(--nl-radius-btn);
  padding: var(--nl-stroke) var(--nl-coat);
  min-height: 56px;
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body);
  color: var(--design-a-text);
  transition:
    border-color var(--nl-dur-settle) var(--nl-ease-settle),
    background var(--nl-dur-settle) var(--nl-ease-settle),
    box-shadow var(--nl-dur-settle) var(--nl-ease-bloom);
}
[data-design="a"] .nl-funnel__opt:hover { border-color: var(--design-a-rule-strong); }
[data-design="a"] .nl-funnel__opt:focus-visible { outline: 2px solid var(--design-a-brand); outline-offset: 2px; }
[data-design="a"] .nl-funnel__opt.is-picked {
  border-color: var(--design-a-brand);
  background: var(--design-a-chip-04-wet);
  color: var(--design-a-linen);
  box-shadow: var(--nl-elev-bloom);
}

/* Contact step */
[data-design="a"] .nl-funnel__step--contact.is-current { display: grid; gap: var(--nl-canvas); }
[data-design="a"] .nl-funnel__contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nl-stroke);
}
[data-design="a"] .nl-funnel__field-wrap { display: grid; gap: var(--nl-grain); }
[data-design="a"] .nl-funnel__field-wrap--full { grid-column: 1 / -1; }
[data-design="a"] .nl-funnel__label {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-size: var(--nl-type-caption);
  color: var(--design-a-text-soft);
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-funnel__req {
  font-family: var(--nl-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--design-a-text-mute);
}
[data-design="a"] .nl-funnel__input {
  border: 0;
  border-bottom: 1px solid var(--design-a-rule);
  background: transparent;
  padding: var(--nl-grain) 0;
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body);
  color: var(--design-a-text);
  width: 100%;
  border-radius: 0;
  transition: border-color var(--nl-dur-settle) var(--nl-ease-settle);
}
[data-design="a"] .nl-funnel__input:focus {
  outline: none;
  border-bottom-color: var(--design-a-brand);
  border-bottom-width: 2px;
}
[data-design="a"] .nl-funnel__textarea { resize: vertical; min-height: 72px; }

/* Summary chips */
[data-design="a"] .nl-funnel__summary-row {
  display: flex;
  gap: var(--nl-grain);
  flex-wrap: wrap;
  min-height: 28px;
}
[data-design="a"] .nl-funnel__chip:empty { display: none; }

/* Trust copy */
[data-design="a"] .nl-funnel__trust {
  border-top: 1px solid var(--design-a-rule);
  padding-top: var(--nl-canvas);
  display: grid;
  gap: var(--nl-stroke);
  color: var(--design-a-text-mute);
  font-size: var(--nl-type-caption);
  line-height: 1.55;
}
[data-design="a"] .nl-funnel__phone {
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body);
  color: var(--design-a-brand);
  text-decoration: none;
}
[data-design="a"] .nl-funnel__phone:hover { text-decoration: underline; }

/* Confirmation */
[data-design="a"] .nl-funnel__confirm[hidden] { display: none; }
[data-design="a"] .nl-funnel__confirm {
  display: grid;
  gap: var(--nl-stroke);
  padding: var(--nl-canvas);
  background: var(--design-a-linen);
  border: 1px solid var(--design-a-rule);
  border-radius: var(--nl-radius-btn);
}
[data-design="a"] .nl-funnel__confirm-msg {
  color: var(--design-a-text-soft);
  line-height: 1.6;
  margin: 0;
}
[data-design="a"] .nl-funnel__confirm-msg a { color: var(--design-a-brand); }

/* ══════════════════════════════════════════════════════════
   Section shared layout
   ══════════════════════════════════════════════════════════ */
[data-design="a"] .nl-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--nl-room) clamp(var(--nl-stroke), 5vw, var(--nl-canvas));
}
[data-design="a"] .nl-section__head {
  display: grid;
  gap: var(--nl-stroke);
  margin-bottom: var(--nl-canvas);
}
[data-design="a"] .nl-section__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(--design-a-text);
  margin: 0;
  max-width: 22ch;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-section__lede {
  color: var(--design-a-text-soft);
  max-width: 56ch;
  margin: 0;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   E4 — Recent work (pigment-bloom reveal, ambient-B)
   ══════════════════════════════════════════════════════════ */
[data-design="a"] .nl-recent {
  background: var(--design-a-linen-warm);
  border-top: 1px solid var(--design-a-rule);
}
[data-design="a"] .nl-recent__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nl-canvas) var(--nl-coat);
}
[data-design="a"] .nl-recent__plate { display: grid; gap: var(--nl-stroke); }
[data-design="a"] .nl-recent__plate:nth-child(3n+2) { margin-top: var(--nl-canvas); }
[data-design="a"] .nl-recent__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--design-a-linen);
  overflow: hidden;
  border: 1px solid var(--design-a-rule);
}
[data-design="a"] .nl-recent__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity var(--nl-dur-cure) var(--nl-ease-light),
    transform var(--nl-dur-cure) var(--nl-ease-light);
}
[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(--design-a-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__img    { opacity: 1; transform: scale(1); }
[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); }
[data-design="a"] .nl-recent__meta { display: grid; gap: var(--nl-grain); }
[data-design="a"] .nl-recent__meta-title {
  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(--design-a-text);
  margin: 0;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-recent__tags { display: flex; gap: var(--nl-stroke); flex-wrap: wrap; }
[data-design="a"] .nl-recent__cta {
  margin-top: var(--nl-canvas);
  display: flex;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   Services
   ══════════════════════════════════════════════════════════ */
[data-design="a"] .nl-services {
  background: var(--design-a-linen);
  border-top: 1px solid var(--design-a-rule);
}
[data-design="a"] .nl-services__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
[data-design="a"] .nl-services__item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--nl-coat);
  align-items: baseline;
  padding: var(--nl-coat) 0;
  border-bottom: 1px solid var(--design-a-rule);
}
[data-design="a"] .nl-services__item:last-child { border-bottom: 0; }
[data-design="a"] .nl-services__name {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--design-a-text);
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
  line-height: 1.2;
}
[data-design="a"] .nl-services__note {
  color: var(--design-a-text-soft);
  line-height: 1.6;
  font-size: var(--nl-type-body);
  max-width: 56ch;
}

/* ══════════════════════════════════════════════════════════
   Process — E4 paint-load phase track
   ══════════════════════════════════════════════════════════ */
[data-design="a"] .nl-process {
  background: var(--design-a-linen-warm);
  border-top: 1px solid var(--design-a-rule);
}
[data-design="a"] .nl-process__track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--nl-coat);
}
[data-design="a"] .nl-process__phase {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--nl-coat);
  align-items: start;
  padding-bottom: var(--nl-coat);
  border-bottom: 1px solid var(--design-a-rule);
}
[data-design="a"] .nl-process__phase:last-child { border-bottom: 0; }
[data-design="a"] .nl-process__bar-wrap { padding-top: 6px; }
[data-design="a"] .nl-process__bar {
  width: 2px;
  height: 80px;
  background: var(--design-a-rule);
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
[data-design="a"] .nl-process__load {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: var(--design-a-brand);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--nl-dur-load) var(--nl-ease-light);
}
[data-design="a"] .nl-process__phase.is-loaded .nl-process__load { transform: scaleY(1); }
[data-design="a"] .nl-process__body { display: grid; gap: var(--nl-grain); }
[data-design="a"] .nl-process__name {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--design-a-text);
  margin: 0;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-process__note {
  color: var(--design-a-text-soft);
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}

/* ══════════════════════════════════════════════════════════
   About
   ══════════════════════════════════════════════════════════ */
[data-design="a"] .nl-about {
  background: var(--design-a-linen);
  border-top: 1px solid var(--design-a-rule);
}
[data-design="a"] .nl-about__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--nl-canvas) var(--nl-room);
  align-items: start;
}
[data-design="a"] .nl-about__quote {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--nl-type-body-lg);
  color: var(--design-a-text);
  border-left: 3px solid var(--design-a-brand);
  padding-left: var(--nl-coat);
  margin: 0 0 var(--nl-coat) 0;
  line-height: 1.55;
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-about__quote p { margin: 0; }
[data-design="a"] .nl-about__body {
  color: var(--design-a-text-soft);
  line-height: 1.65;
  margin: 0;
}
[data-design="a"] .nl-about__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
[data-design="a"] .nl-about__fact {
  display: grid;
  gap: 4px;
  padding: var(--nl-stroke) 0;
  border-bottom: 1px solid var(--design-a-rule);
}
[data-design="a"] .nl-about__fact:first-child { padding-top: 0; }
[data-design="a"] .nl-about__fact:last-child { border-bottom: 0; }
[data-design="a"] .nl-about__fact dt { margin: 0; }
[data-design="a"] .nl-about__fact dd {
  margin: 0;
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body);
  color: var(--design-a-text);
  line-height: 1.4;
}
[data-design="a"] .nl-about__link {
  color: var(--design-a-brand);
  text-decoration: none;
}
[data-design="a"] .nl-about__link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════ */
[data-design="a"] .nl-footer {
  background: var(--design-a-linen-warm);
  border-top: 1px solid var(--design-a-rule);
  padding: var(--nl-room) clamp(var(--nl-stroke), 5vw, var(--nl-canvas));
}
[data-design="a"] .nl-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--nl-canvas);
}
[data-design="a"] .nl-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--nl-stroke);
  flex-wrap: wrap;
}
[data-design="a"] .nl-footer__name {
  font-family: var(--nl-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--design-a-text);
  font-feature-settings: "ss01";
}
[data-design="a"] .nl-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nl-canvas);
  padding-top: var(--nl-canvas);
  border-top: 1px solid var(--design-a-rule);
}
[data-design="a"] .nl-footer__col { display: grid; gap: var(--nl-stroke); align-content: start; }
[data-design="a"] .nl-footer__col-head {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--design-a-text-mute);
  margin: 0;
}
[data-design="a"] .nl-footer__link {
  display: block;
  color: var(--design-a-brand);
  text-decoration: none;
  font-size: var(--nl-type-body);
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-design="a"] .nl-footer__link:hover { text-decoration: underline; }
[data-design="a"] .nl-footer__address {
  color: var(--design-a-text-soft);
  font-style: normal;
  line-height: 1.55;
  font-size: var(--nl-type-body);
}
[data-design="a"] .nl-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--nl-grain);
  color: var(--design-a-text-soft);
  font-size: var(--nl-type-body);
  line-height: 1.5;
}
[data-design="a"] .nl-footer__base {
  display: flex;
  gap: var(--nl-coat);
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--nl-canvas);
  border-top: 1px solid var(--design-a-rule);
}
[data-design="a"] .nl-footer__copy {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.04em;
  color: var(--design-a-text-mute);
}

/* ══════════════════════════════════════════════════════════
   prefers-reduced-motion fallbacks
   ══════════════════════════════════════════════════════════ */
@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-cta { animation: none; background-image: none; }
  [data-design="a"] .nl-hero__atmosphere { animation: none; opacity: 0.40; }
  [data-design="a"] .nl-hero__bar { animation: none; opacity: 0.20; }
  [data-design="a"] .nl-pointer__sash { animation: none; transform: translateX(-50%) translateY(100px); opacity: 0.80; }
  [data-design="a"] .nl-pointer__bloom { animation: none; opacity: 0.4; transform: translate(-50%, 50%) scale(1); }
  [data-design="a"] .nl-recent__img { opacity: 1; transform: none; transition: none; }
  [data-design="a"] .nl-recent__bloom { opacity: 0; transition: none; }
  [data-design="a"] .nl-process__load { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  [data-design="a"] .nl-recent__grid { grid-template-columns: repeat(2, 1fr); }
  [data-design="a"] .nl-recent__plate:nth-child(3n+2) { margin-top: 0; }
  [data-design="a"] .nl-recent__plate:nth-child(2n) { margin-top: var(--nl-canvas); }
  [data-design="a"] .nl-about__grid { grid-template-columns: 1fr; }
  [data-design="a"] .nl-footer__cols { grid-template-columns: repeat(2, 1fr); }
  [data-design="a"] .nl-services__item { grid-template-columns: 1fr; gap: var(--nl-grain); }
}

@media (max-width: 680px) {
  [data-design="a"] .nl-funnel__contact-fields { grid-template-columns: 1fr; }
  [data-design="a"] .nl-recent__grid { grid-template-columns: 1fr; }
  [data-design="a"] .nl-recent__plate { margin-top: 0 !important; }
  [data-design="a"] .nl-footer__cols { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  [data-design="a"] .nl-header__mark { font-size: 16px; }
  [data-design="a"] .nl-curtain__nav a { font-size: 26px; }
  [data-design="a"] .nl-funnel__options { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE NO H-SCROLL — HARD REQUIREMENT
   All rules scoped to .dq-design (never bare [data-design])
   ══════════════════════════════════════════════════════════ */
[data-design="a"].dq-design,
[data-design="a"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[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;
}

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