/* ============================================================
   painting-charlotte / design-a — North Light token system
   ALL selectors scoped to [data-design="a"]
   ============================================================ */

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

/* ── Root tokens ──────────────────────────────────────────── */
[data-design="a"].dq-design {
  /* Palette */
  --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-warm: var(--nl-chip-01);
  --nl-accent-deep: var(--nl-chip-02);
  /* Design slot primary */
  --design-a-primary: var(--nl-chip-04);

  /* Typography */
  --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(48px, 7vw, 96px);
  --nl-type-display: clamp(36px, 5vw, 64px);
  --nl-type-headline: clamp(24px, 3vw, 32px);
  --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;

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

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

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

  /* Base */
  font-family: var(--nl-font-body);
  color: var(--nl-text);
  background: var(--nl-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Shared layout helpers ────────────────────────────────── */
[data-design="a"] .a-inner,
[data-design="a"] .a-header__bar,
[data-design="a"] .a-funnel__inner,
[data-design="a"] .a-surfaces__inner,
[data-design="a"] .a-services__inner,
[data-design="a"] .a-process__inner,
[data-design="a"] .a-about__inner,
[data-design="a"] .a-area__inner,
[data-design="a"] .a-reviews__inner,
[data-design="a"] .a-work__inner,
[data-design="a"] .a-cta-repeat__inner,
[data-design="a"] .a-footer__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--nl-canvas);
}

/* ============================================================
   E1 — HEADER
   ============================================================ */

[data-design="a"] .a-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nl-surface);
  border-bottom: var(--nl-hairline) solid var(--nl-rule);
}

[data-design="a"] .a-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--nl-stroke);
}

[data-design="a"] .a-header__logo {
  display: flex;
  align-items: center;
  gap: var(--nl-grain);
  color: var(--nl-ink);
  text-decoration: none;
}

[data-design="a"] .a-header__wordmark {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--nl-ink);
}

[data-design="a"] .a-logo-mark {
  color: var(--nl-brand);
  flex-shrink: 0;
}

[data-design="a"] .a-header__hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--nl-grain);
  color: var(--nl-ink);
  line-height: 0;
}

[data-design="a"] .a-header__rule-wrap {
  position: relative;
  height: 2px;
  overflow: hidden;
}

[data-design="a"] .a-header__rule {
  position: absolute;
  inset: 0;
  background: var(--nl-rule);
}

[data-design="a"] .a-header__rake {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--nl-chip-03) 30%,
    var(--nl-chip-04) 60%,
    transparent 100%
  );
  opacity: 0.6;
  transform: translateX(-110%);
  animation: a-header-rake var(--nl-dur-light-b) var(--nl-ease-light) infinite;
}

@keyframes a-header-rake {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}

/* Curtain */
[data-design="a"] .a-curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(28,24,19,0.55);
  opacity: 0;
  animation: none;
}

[data-design="a"] .a-curtain[hidden] { display: none; }

[data-design="a"] .a-curtain.is-open {
  opacity: 1;
  animation: a-curtain-in 280ms var(--nl-ease-bloom) forwards;
}

[data-design="a"] .a-curtain.is-closing {
  animation: a-curtain-out 240ms var(--nl-ease-settle) forwards;
}

@keyframes a-curtain-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes a-curtain-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

[data-design="a"] .a-curtain__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(360px, 90vw);
  height: 100%;
  background: var(--nl-surface);
  border-left: var(--nl-hairline) solid var(--nl-rule);
  display: flex;
  flex-direction: column;
  padding: var(--nl-canvas);
  gap: var(--nl-canvas);
  transform: translateX(100%);
  animation: none;
}

[data-design="a"] .a-curtain.is-open .a-curtain__panel {
  animation: a-panel-in 760ms var(--nl-ease-settle) forwards;
}

[data-design="a"] .a-curtain.is-closing .a-curtain__panel {
  animation: a-panel-out 260ms var(--nl-ease-bloom) forwards;
}

@keyframes a-panel-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes a-panel-out {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

[data-design="a"] .a-curtain__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--nl-grain);
  color: var(--nl-ink);
  align-self: flex-end;
  line-height: 0;
  margin-block-end: var(--nl-grain);
}

[data-design="a"] .a-curtain__nav {
  display: flex;
  flex-direction: column;
  gap: var(--nl-stroke);
  flex: 1;
}

[data-design="a"] .a-curtain__link {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-headline);
  font-style: italic;
  color: var(--nl-text);
  text-decoration: none;
  border-bottom: var(--nl-hairline) solid var(--nl-rule);
  padding-block-end: var(--nl-stroke);
}

[data-design="a"] .a-curtain__foot {
  display: flex;
  flex-direction: column;
  gap: var(--nl-coat);
}

[data-design="a"] .a-curtain__phone {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-body);
  color: var(--nl-text-soft);
  text-decoration: none;
}

/* ============================================================
   E2 — CTA BUTTON
   ============================================================ */

[data-design="a"] .a-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--nl-grain);
  padding: var(--nl-stroke) var(--nl-coat);
  background: var(--nl-chip-04);
  background-image: linear-gradient(
    135deg,
    var(--nl-chip-04) 0%,
    var(--nl-chip-04-wet) 50%,
    var(--nl-chip-04) 100%
  );
  background-size: 200% 200%;
  color: var(--nl-linen);
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--nl-radius-btn);
  animation: a-cta-breath var(--nl-dur-breath) var(--nl-ease-light) infinite;
  cursor: pointer;
  border: none;
}

@keyframes a-cta-breath {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

[data-design="a"] .a-cta__arrow {
  display: inline-block;
  /* transition only transform — no layout props */
  transition: transform var(--nl-dur-touch) var(--nl-ease-settle);
}

/* ── Hover/focus — inside hover media query ──────────────── */
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-cta:hover {
    box-shadow: 0 0 0 1px var(--nl-pigment-bloom), 0 0 24px 0 var(--nl-pigment-bloom);
  }
  [data-design="a"] .a-cta:hover .a-cta__arrow {
    transform: translateX(4px);
  }
  [data-design="a"] .a-curtain__link:hover {
    color: var(--nl-brand);
  }
}

[data-design="a"] .a-cta:active {
  transform: scale(0.985);
}

[data-design="a"] .a-cta:focus-visible {
  outline: 2px solid var(--nl-chip-04);
  outline-offset: 3px;
}

/* ============================================================
   HERO — E3 Backdrop + Text
   ============================================================ */

[data-design="a"] .a-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Backdrop — z-index: 1 */
[data-design="a"] .a-hero__backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  z-index: 1;
}

[data-design="a"] .a-hero__tile {
  position: relative;
  overflow: hidden;
}

[data-design="a"] .a-hero__tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--chip);
  animation: a-tile-shift var(--nl-dur-light) var(--nl-ease-light) infinite;
  animation-delay: calc(var(--i) * 2800ms);
}

[data-design="a"] .a-hero__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--chip-wet);
  opacity: 0;
  animation: a-tile-wet var(--nl-dur-light) var(--nl-ease-light) infinite;
  animation-delay: calc(var(--i) * 2800ms);
}

@keyframes a-tile-shift {
  0%, 40%  { opacity: 1; }
  50%, 90% { opacity: 0.72; }
  100%     { opacity: 1; }
}

@keyframes a-tile-wet {
  0%, 40%  { opacity: 0; }
  50%, 90% { opacity: 0.28; }
  100%     { opacity: 0; }
}

[data-design="a"] .a-hero__backdrop-rake {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(28,24,19,0.04) 3px,
    rgba(28,24,19,0.04) 4px
  );
  animation: a-backdrop-rake var(--nl-dur-light-b) linear infinite;
}

@keyframes a-backdrop-rake {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-40px); }
}

/* Overlay darkening so text is readable */
[data-design="a"] .a-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(28,24,19,0.65) 0%,
    rgba(28,24,19,0.4) 55%,
    rgba(28,24,19,0.72) 100%
  );
  z-index: 2;
}

/* Text content — z-index: 10, opacity:1 at first paint */
[data-design="a"] .a-hero__content {
  position: relative;
  z-index: 10;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--nl-canvas);
  padding-block: var(--nl-atelier);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nl-coat);
  width: 100%;
}

[data-design="a"] .a-hero__kicker {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nl-light-warm);
  opacity: 1;
  margin: 0;
  animation: a-hero-enter var(--nl-dur-load) var(--nl-ease-settle) both;
  animation-delay: 100ms;
}

[data-design="a"] .a-hero__headline {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-spread);
  font-weight: 500;
  line-height: 1.08;
  color: var(--nl-linen);
  opacity: 1;
  margin: 0;
  max-width: 14ch;
  animation: a-hero-enter var(--nl-dur-load) var(--nl-ease-settle) both;
  animation-delay: 200ms;
}

[data-design="a"] .a-hero__headline em {
  font-style: italic;
  color: var(--nl-light-warm);
}

[data-design="a"] .a-hero__sub {
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body-lg);
  color: var(--nl-light-cool);
  max-width: 46ch;
  margin: 0;
  opacity: 1;
  animation: a-hero-enter var(--nl-dur-load) var(--nl-ease-settle) both;
  animation-delay: 340ms;
}

[data-design="a"] .a-hero__trust {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.08em;
  color: rgba(244,242,236,0.55);
  margin: 0;
  opacity: 1;
}

/* Hero entrance: transform only, never opacity below 1 */
@keyframes a-hero-enter {
  from { transform: translateY(18px); }
  to   { transform: translateY(0); }
}

/* Depth indicator line — scroll-linked via JS */
[data-design="a"] .a-hero__depth-line {
  position: absolute;
  left: var(--nl-canvas);
  bottom: var(--nl-wall);
  width: 2px;
  height: 48px;
  background: var(--nl-rule-strong);
  z-index: 10;
  transform-origin: top center;
  transform: scaleY(1);
}

/* ============================================================
   E6 — POINTER
   ============================================================ */

[data-design="a"] .a-pointer {
  display: block;
  text-decoration: none;
  color: var(--nl-text);
  opacity: 1;
  cursor: pointer;
}

[data-design="a"] .a-pointer__field {
  position: relative;
  height: 220px;
  background: var(--nl-surface-sunk);
  border-top: var(--nl-hairline) solid var(--nl-rule);
  border-bottom: var(--nl-hairline) solid var(--nl-rule);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sash: wet-edge coverage sweep — transform:scaleX only */
[data-design="a"] .a-pointer__sash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--nl-chip-04) 0%,
    var(--nl-chip-03) 60%,
    transparent 100%
  );
  opacity: 0.18;
  transform-origin: left center;
  transform: scaleX(0.92);
  animation: a-pointer-sash var(--nl-dur-pointer) var(--nl-ease-bloom) infinite;
}

@keyframes a-pointer-sash {
  0%   { transform: scaleX(0.92); opacity: 0.12; }
  45%  { transform: scaleX(1);    opacity: 0.22; }
  55%  { transform: scaleX(1);    opacity: 0.22; }
  100% { transform: scaleX(0.92); opacity: 0.12; }
}

/* Bloom: radial settle */
[data-design="a"] .a-pointer__bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%,
    var(--nl-pigment-bloom) 0%,
    transparent 70%
  );
  opacity: 0;
  animation: a-pointer-bloom var(--nl-dur-pointer) var(--nl-ease-light) infinite;
}

@keyframes a-pointer-bloom {
  0%, 20% { opacity: 0; }
  45%, 55% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

[data-design="a"] .a-pointer__label {
  position: relative;
  z-index: 2;
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-headline);
  font-style: italic;
  color: var(--nl-text);
  text-align: center;
  padding-inline: var(--nl-canvas);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-pointer:hover .a-pointer__label {
    color: var(--nl-brand);
  }
  [data-design="a"] .a-pointer:hover .a-pointer__sash {
    opacity: 0.28;
  }
}

/* ============================================================
   E5 — FUNNEL
   ============================================================ */

[data-design="a"] .a-funnel {
  background: var(--nl-surface-sunk);
  padding-block: var(--nl-room);
  border-top: var(--nl-hairline) solid var(--nl-rule);
}

[data-design="a"] .a-funnel__inner {
  max-width: 680px;
}

[data-design="a"] .a-funnel__header {
  margin-block-end: var(--nl-canvas);
}

[data-design="a"] .a-funnel__tag {
  display: inline-block;
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--nl-muted);
  border: var(--nl-hairline) solid var(--nl-rule);
  border-radius: var(--nl-radius-tag);
  padding: var(--nl-thread) var(--nl-grain);
  margin-block-end: var(--nl-stroke);
}

[data-design="a"] .a-funnel__progress {
  height: 3px;
  background: var(--nl-rule);
  border-radius: 2px;
  margin-block-end: var(--nl-coat);
  overflow: hidden;
}

[data-design="a"] .a-funnel__progress-bar {
  height: 100%;
  background: var(--nl-brand);
  transform-origin: left;
  transform: scaleX(var(--progress, 0.25));
  transition: transform var(--nl-dur-settle) var(--nl-ease-settle);
}

[data-design="a"] .a-funnel__title {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-display);
  font-weight: 500;
  line-height: 1.1;
  color: var(--nl-text);
  margin: 0 0 var(--nl-grain);
}

[data-design="a"] .a-funnel__sub {
  font-size: var(--nl-type-caption);
  color: var(--nl-text-mute);
  margin: 0;
}

/* Steps */
[data-design="a"] .a-funnel__step {
  border: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  /* hidden steps shifted — will snap to position when shown */
  position: absolute;
  /* keep accessible but out of flow when not current */
  visibility: hidden;
}

[data-design="a"] .a-funnel__step.is-current {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  visibility: visible;
  animation: a-step-in var(--nl-dur-settle) var(--nl-ease-settle) both;
}

@keyframes a-step-in {
  from { transform: translateY(12px); }
  to   { transform: translateY(0); }
}

[data-design="a"] .a-funnel__question {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-headline);
  font-weight: 500;
  color: var(--nl-text);
  margin: 0 0 var(--nl-coat);
  float: none;
  width: 100%;
  line-height: 1.3;
}

[data-design="a"] .a-funnel__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nl-grain);
}

[data-design="a"] .a-funnel__opt {
  background: var(--nl-surface);
  border: var(--nl-hairline) solid var(--nl-rule);
  border-radius: var(--nl-radius-btn);
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body);
  color: var(--nl-text);
  padding: var(--nl-stroke) var(--nl-coat);
  cursor: pointer;
  position: relative;
  /* overlay for selected state — opacity only, no bg-color transition */
}

/* Selected overlay — opacity transition, no background-color animation */
[data-design="a"] .a-funnel__opt::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--nl-pigment-bloom);
  border: var(--nl-hairline) solid var(--nl-chip-04);
  border-radius: var(--nl-radius-btn);
  opacity: 0;
  transition: opacity var(--nl-dur-touch) var(--nl-ease-settle);
  pointer-events: none;
}

[data-design="a"] .a-funnel__opt.is-picked::after {
  opacity: 1;
}

[data-design="a"] .a-funnel__opt.is-picked {
  color: var(--nl-chip-04);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-funnel__opt:hover {
    border-color: var(--nl-rule-strong);
    transform: translateY(-1px);
  }
  [data-design="a"] .a-funnel__opt:hover::after {
    opacity: 0.5;
  }
}

[data-design="a"] .a-funnel__opt:focus-visible {
  outline: 2px solid var(--nl-chip-04);
  outline-offset: 2px;
}

/* Contact form */
[data-design="a"] .a-funnel__form {
  display: flex;
  flex-direction: column;
  gap: var(--nl-coat);
}

[data-design="a"] .a-funnel__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nl-stroke);
}

[data-design="a"] .a-funnel__field {
  display: flex;
  flex-direction: column;
  gap: var(--nl-thread);
}

[data-design="a"] .a-funnel__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);
}

[data-design="a"] .a-funnel__label-hint {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

[data-design="a"] .a-funnel__input {
  background: var(--nl-surface);
  border: var(--nl-hairline) solid var(--nl-rule);
  border-radius: var(--nl-radius-btn);
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body);
  color: var(--nl-text);
  padding: var(--nl-stroke);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--nl-dur-touch) var(--nl-ease-settle);
}

[data-design="a"] .a-funnel__input:focus-visible {
  outline: none;
  border-color: var(--nl-chip-04);
  box-shadow: 0 0 0 2px rgba(27,58,82,0.15);
}

[data-design="a"] .a-funnel__textarea {
  resize: vertical;
  min-height: 88px;
}

[data-design="a"] .a-funnel__file {
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-caption);
  color: var(--nl-text-mute);
}

[data-design="a"] .a-funnel__required-note {
  font-size: var(--nl-type-caption);
  color: var(--nl-text-mute);
  margin: 0;
}

[data-design="a"] .a-funnel__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--nl-grain);
  padding: var(--nl-stroke) var(--nl-coat);
  background: var(--nl-chip-04);
  color: var(--nl-linen);
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-body);
  font-weight: 600;
  border: none;
  border-radius: var(--nl-radius-btn);
  cursor: pointer;
  align-self: flex-start;
  animation: a-cta-breath var(--nl-dur-breath) var(--nl-ease-light) infinite;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-funnel__submit:hover {
    box-shadow: 0 0 0 1px var(--nl-pigment-bloom), 0 0 24px 0 var(--nl-pigment-bloom);
  }
  [data-design="a"] .a-funnel__submit:hover .a-funnel__submit-arrow {
    transform: translateX(4px);
  }
}

[data-design="a"] .a-funnel__submit:active {
  transform: scale(0.985);
}

[data-design="a"] .a-funnel__submit:focus-visible {
  outline: 2px solid var(--nl-chip-04);
  outline-offset: 3px;
}

[data-design="a"] .a-funnel__submit-arrow {
  display: inline-block;
  transition: transform var(--nl-dur-touch) var(--nl-ease-settle);
}

[data-design="a"] .a-funnel__confirm {
  color: var(--nl-success);
  font-weight: 600;
  font-size: var(--nl-type-body);
  margin: 0;
}

[data-design="a"] .a-funnel__error {
  color: var(--nl-critical);
  font-size: var(--nl-type-caption);
  margin: 0;
}

/* Back button */
[data-design="a"] .a-funnel__nav {
  margin-block-start: var(--nl-coat);
}

[data-design="a"] .a-funnel__back {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-caption);
  letter-spacing: 0.04em;
  color: var(--nl-text-mute);
  padding: 0;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-funnel__back:hover {
    color: var(--nl-text);
  }
}

/* ============================================================
   E3 AMBIENT-A — SURFACES / LIGHT TILES
   ============================================================ */

[data-design="a"] .a-surfaces {
  padding-block: var(--nl-room);
  border-top: var(--nl-hairline) solid var(--nl-rule);
}

[data-design="a"] .a-surfaces__heading {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-display);
  font-weight: 500;
  color: var(--nl-text);
  margin: 0 0 var(--nl-grain);
}

[data-design="a"] .a-surfaces__sub {
  font-size: var(--nl-type-body-lg);
  color: var(--nl-text-soft);
  max-width: 56ch;
  margin: 0 0 var(--nl-wall);
}

[data-design="a"] .a-surfaces__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--nl-stroke);
}

[data-design="a"] .a-light-tile {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}

[data-design="a"] .a-light-tile__face {
  position: absolute;
  inset: 0;
  background: var(--chip);
  animation: a-tile-shift var(--nl-dur-light) var(--nl-ease-light) infinite;
  animation-delay: calc(var(--i) * 3100ms);
}

[data-design="a"] .a-light-tile__face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--chip-wet);
  opacity: 0;
  animation: a-tile-wet var(--nl-dur-light) var(--nl-ease-light) infinite;
  animation-delay: calc(var(--i) * 3100ms);
}

[data-design="a"] .a-light-tile__rake {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 18px,
    rgba(28,24,19,0.05) 18px,
    rgba(28,24,19,0.05) 19px
  );
  transform: translateX(0);
  animation: a-tile-rake var(--nl-dur-light-b) linear infinite;
  animation-delay: calc(var(--i) * 1900ms);
}

@keyframes a-tile-rake {
  0%   { transform: translateX(0); }
  100% { transform: translateX(19px); }
}

[data-design="a"] .a-light-tile__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--nl-stroke) var(--nl-coat);
  background: linear-gradient(
    to top,
    rgba(28,24,19,0.72) 0%,
    rgba(28,24,19,0) 100%
  );
  display: flex;
  flex-direction: column;
  gap: var(--nl-thread);
  z-index: 2;
}

[data-design="a"] .a-light-tile__finish {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-caption);
  font-weight: 500;
  color: var(--nl-linen);
  letter-spacing: 0.02em;
}

[data-design="a"] .a-light-tile__note {
  font-family: var(--nl-font-body);
  font-size: var(--nl-type-stamp);
  color: rgba(244,242,236,0.7);
  line-height: 1.4;
}

/* ============================================================
   SERVICES
   ============================================================ */

[data-design="a"] .a-services {
  padding-block: var(--nl-room);
  background: var(--nl-surface-sunk);
  border-top: var(--nl-hairline) solid var(--nl-rule);
}

[data-design="a"] .a-services__heading {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-display);
  font-weight: 500;
  color: var(--nl-text);
  margin: 0 0 var(--nl-grain);
}

[data-design="a"] .a-services__sub {
  font-size: var(--nl-type-body-lg);
  color: var(--nl-text-soft);
  margin: 0 0 var(--nl-wall);
}

[data-design="a"] .a-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nl-stroke);
  list-style: none;
  padding: 0;
  margin: 0;
}

[data-design="a"] .a-service-card {
  padding: var(--nl-coat);
  background: var(--nl-surface);
  border: var(--nl-hairline) solid var(--nl-rule);
  display: flex;
  flex-direction: column;
  gap: var(--nl-grain);
}

[data-design="a"] .a-service-card__icon {
  color: var(--nl-accent);
  margin-block-end: var(--nl-grain);
}

[data-design="a"] .a-service-card__name {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-caption);
  font-weight: 500;
  color: var(--nl-text);
  margin: 0;
  letter-spacing: 0.01em;
}

[data-design="a"] .a-service-card__desc {
  font-size: var(--nl-type-caption);
  color: var(--nl-text-soft);
  margin: 0;
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-service-card:hover {
    box-shadow: 0 0 0 1px var(--nl-pigment-bloom), 0 0 24px 0 var(--nl-pigment-bloom);
  }
}

/* ============================================================
   PROCESS
   ============================================================ */

[data-design="a"] .a-process {
  padding-block: var(--nl-room);
  border-top: var(--nl-hairline) solid var(--nl-rule);
}

[data-design="a"] .a-process__heading {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-display);
  font-weight: 500;
  color: var(--nl-text);
  margin: 0 0 var(--nl-grain);
}

[data-design="a"] .a-process__sub {
  font-size: var(--nl-type-body-lg);
  color: var(--nl-text-soft);
  margin: 0 0 var(--nl-wall);
}

[data-design="a"] .a-process__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

[data-design="a"] .a-process__step {
  display: grid;
  grid-template-columns: var(--nl-atelier) 1fr;
  border-top: var(--nl-hairline) solid var(--nl-rule);
  padding-block: var(--nl-canvas);
  gap: var(--nl-wall);
  align-items: start;
}

[data-design="a"] .a-process__num {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.14em;
  color: var(--nl-text-mute);
  padding-block-start: 4px;
}

[data-design="a"] .a-process__step-title {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-headline);
  font-weight: 500;
  color: var(--nl-text);
  margin: 0 0 var(--nl-grain);
}

[data-design="a"] .a-process__step-desc {
  font-size: var(--nl-type-body);
  color: var(--nl-text-soft);
  margin: 0;
  max-width: 56ch;
  line-height: 1.65;
}

/* ============================================================
   ABOUT
   ============================================================ */

[data-design="a"] .a-about {
  padding-block: var(--nl-room);
  background: var(--nl-surface-sunk);
  border-top: var(--nl-hairline) solid var(--nl-rule);
}

[data-design="a"] .a-about__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--nl-canvas);
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--nl-atelier);
  align-items: center;
}

[data-design="a"] .a-about__heading {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-display);
  font-weight: 500;
  color: var(--nl-text);
  margin: 0 0 var(--nl-coat);
}

[data-design="a"] .a-about__body {
  font-size: var(--nl-type-body-lg);
  color: var(--nl-text-soft);
  margin: 0 0 var(--nl-stroke);
  line-height: 1.7;
  max-width: 52ch;
}

[data-design="a"] .a-about__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nl-grain);
  margin-block-start: var(--nl-coat);
}

[data-design="a"] .a-about__chip {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nl-text-mute);
  border: var(--nl-hairline) solid var(--nl-rule);
  padding: var(--nl-thread) var(--nl-grain);
}

[data-design="a"] .a-about__mark-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-design="a"] .a-about__mark-field {
  position: relative;
  width: 200px;
  height: 200px;
}

[data-design="a"] .a-about__mark-wash {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(27,58,82,0.15) 0%,
    transparent 70%
  );
  animation: a-tile-shift var(--nl-dur-light) var(--nl-ease-light) infinite;
}

[data-design="a"] .a-about__mark-svg {
  width: 100%;
  height: 100%;
  color: var(--nl-rule-strong);
}

/* ============================================================
   SERVICE AREA
   ============================================================ */

[data-design="a"] .a-area {
  padding-block: var(--nl-room);
  border-top: var(--nl-hairline) solid var(--nl-rule);
}

[data-design="a"] .a-area__heading {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-display);
  font-weight: 500;
  color: var(--nl-text);
  margin: 0 0 var(--nl-coat);
}

[data-design="a"] .a-area__body {
  font-size: var(--nl-type-body-lg);
  color: var(--nl-text-soft);
  max-width: 54ch;
  margin: 0 0 var(--nl-stroke);
  line-height: 1.65;
}

[data-design="a"] .a-area__phone {
  display: inline-flex;
  align-items: center;
  margin-block-start: var(--nl-coat);
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-body-lg);
  color: var(--nl-brand);
  text-decoration: none;
  border-bottom: var(--nl-hairline) solid var(--nl-brand);
}

/* ============================================================
   REVIEWS
   ============================================================ */

[data-design="a"] .a-reviews {
  padding-block: var(--nl-room);
  background: var(--nl-surface-sunk);
  border-top: var(--nl-hairline) solid var(--nl-rule);
}

[data-design="a"] .a-reviews__heading {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-display);
  font-weight: 500;
  color: var(--nl-text);
  margin: 0 0 var(--nl-grain);
}

[data-design="a"] .a-reviews__note {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  color: var(--nl-text-mute);
  margin: 0 0 var(--nl-wall);
  letter-spacing: 0.04em;
}

[data-design="a"] .a-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nl-coat);
  margin-block-end: var(--nl-coat);
}

[data-design="a"] .a-review {
  padding: var(--nl-coat);
  background: var(--nl-surface);
  border: var(--nl-hairline) solid var(--nl-rule);
  border-top: 3px solid var(--nl-chip-03);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nl-coat);
}

[data-design="a"] .a-review__quote {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-body-lg);
  font-style: italic;
  color: var(--nl-text-soft);
  margin: 0;
  line-height: 1.5;
}

[data-design="a"] .a-review__cite {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  font-style: normal;
  color: var(--nl-text-mute);
  letter-spacing: 0.04em;
}

[data-design="a"] .a-reviews__disclaimer {
  font-size: var(--nl-type-stamp);
  color: var(--nl-text-mute);
  margin: 0;
}

/* ============================================================
   E4 AMBIENT-B — RECENT WORK (honest placeholders)
   ============================================================ */

[data-design="a"] .a-work {
  padding-block: var(--nl-room);
  border-top: var(--nl-hairline) solid var(--nl-rule);
}

[data-design="a"] .a-work__heading {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-display);
  font-weight: 500;
  color: var(--nl-text);
  margin: 0 0 var(--nl-grain);
}

[data-design="a"] .a-work__sub {
  font-size: var(--nl-type-body-lg);
  color: var(--nl-text-soft);
  max-width: 54ch;
  margin: 0 0 var(--nl-wall);
}

[data-design="a"] .a-work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nl-coat);
}

[data-design="a"] .a-work__plate {
  display: flex;
  flex-direction: column;
  gap: var(--nl-grain);
}

[data-design="a"] .a-work__plate--reveal {
  /* pigment-bloom reveal on scroll — JS adds .is-visible */
  opacity: 1;
}

[data-design="a"] .a-work__plate-field {
  aspect-ratio: 4/3;
  background: var(--nl-surface-sunk);
  border: var(--nl-hairline) solid var(--nl-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Subtle animated wash inside each plate */
[data-design="a"] .a-work__plate-field::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--nl-chip-01) 0%,
    var(--nl-linen-warm) 100%
  );
  opacity: 0.6;
}

[data-design="a"] .a-work__plate-mark {
  position: relative;
  z-index: 2;
  padding: var(--nl-coat);
  text-align: center;
}

[data-design="a"] .a-work__plate-label-inner {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-caption);
  font-style: italic;
  color: var(--nl-ink-soft);
}

[data-design="a"] .a-work__plate-caption {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  color: var(--nl-text-mute);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ============================================================
   REPEATED CTA
   ============================================================ */

[data-design="a"] .a-cta-repeat {
  padding-block: var(--nl-room);
  background: var(--nl-surface-sunk);
  border-top: var(--nl-hairline) solid var(--nl-rule);
  text-align: center;
}

[data-design="a"] .a-cta-repeat__heading {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-display);
  font-weight: 500;
  color: var(--nl-text);
  margin: 0 0 var(--nl-grain);
}

[data-design="a"] .a-cta-repeat__sub {
  font-size: var(--nl-type-body-lg);
  color: var(--nl-text-soft);
  max-width: 46ch;
  margin: 0 auto var(--nl-canvas);
}

[data-design="a"] .a-cta-repeat__phone {
  margin-block-start: var(--nl-coat);
  font-size: var(--nl-type-body);
  color: var(--nl-text-mute);
}

[data-design="a"] .a-cta-repeat__phone-link {
  color: var(--nl-brand);
  text-decoration: none;
  font-family: var(--nl-font-mono);
}

/* ============================================================
   FOOTER
   ============================================================ */

[data-design="a"] .a-footer {
  border-top: var(--nl-hairline) solid var(--nl-rule);
  padding-block: var(--nl-wall);
}

[data-design="a"] .a-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--nl-coat);
}

[data-design="a"] .a-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--nl-thread);
}

[data-design="a"] .a-footer__name {
  font-family: var(--nl-font-display);
  font-size: var(--nl-type-caption);
  font-weight: 500;
  color: var(--nl-text);
}

[data-design="a"] .a-footer__loc {
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  color: var(--nl-text-mute);
}

[data-design="a"] .a-footer__links {
  display: flex;
  gap: var(--nl-coat);
  flex-wrap: wrap;
}

[data-design="a"] .a-footer__link {
  font-size: var(--nl-type-caption);
  color: var(--nl-text-mute);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-footer__link:hover {
    color: var(--nl-text);
  }
}

[data-design="a"] .a-footer__legal {
  display: flex;
  gap: var(--nl-coat);
  font-family: var(--nl-font-mono);
  font-size: var(--nl-type-stamp);
  color: var(--nl-text-mute);
}

/* ============================================================
   SCROLL-DRIVEN PARALLAX — hero depth line + plate reveal
   ============================================================ */

/* The hero depth line shrinks via JS scroll binding (transform:scaleY) */
/* Plate reveal via IntersectionObserver — opacity held at 1 always,
   bloom box-shadow added on is-visible */

[data-design="a"] .a-work__plate--reveal.is-visible .a-work__plate-field {
  box-shadow: 0 0 0 1px var(--nl-pigment-bloom), 0 0 24px 0 var(--nl-pigment-bloom);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 1024px) {
  [data-design="a"] .a-surfaces__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-design="a"] .a-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-design="a"] .a-about__inner {
    grid-template-columns: 1fr;
    gap: var(--nl-wall);
  }
  [data-design="a"] .a-about__mark-col {
    display: none;
  }
}

@media (max-width: 768px) {
  [data-design="a"] .a-header__bar,
  [data-design="a"] .a-funnel__inner,
  [data-design="a"] .a-surfaces__inner,
  [data-design="a"] .a-services__inner,
  [data-design="a"] .a-process__inner,
  [data-design="a"] .a-about__inner,
  [data-design="a"] .a-area__inner,
  [data-design="a"] .a-reviews__inner,
  [data-design="a"] .a-work__inner,
  [data-design="a"] .a-cta-repeat__inner,
  [data-design="a"] .a-footer__inner {
    padding-inline: var(--nl-stroke);
  }
  [data-design="a"] .a-hero__content {
    padding-inline: var(--nl-stroke);
    padding-block: var(--nl-room);
  }
  [data-design="a"] .a-surfaces__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-design="a"] .a-services__grid {
    grid-template-columns: 1fr 1fr;
  }
  [data-design="a"] .a-reviews__grid {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .a-work__grid {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .a-process__step {
    grid-template-columns: var(--nl-wall) 1fr;
    gap: var(--nl-coat);
  }
  [data-design="a"] .a-funnel__field-row {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .a-footer__inner {
    flex-direction: column;
    gap: var(--nl-coat);
  }
}

@media (max-width: 480px) {
  [data-design="a"] .a-surfaces__grid {
    grid-template-columns: 1fr 1fr;
  }
  [data-design="a"] .a-services__grid {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .a-funnel__opts {
    flex-direction: column;
  }
  [data-design="a"] .a-funnel__opt {
    width: 100%;
    text-align: left;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .a-header__rake,
  [data-design="a"] .a-hero__tile::before,
  [data-design="a"] .a-hero__tile::after,
  [data-design="a"] .a-hero__backdrop-rake,
  [data-design="a"] .a-hero__kicker,
  [data-design="a"] .a-hero__headline,
  [data-design="a"] .a-hero__sub,
  [data-design="a"] .a-pointer__sash,
  [data-design="a"] .a-pointer__bloom,
  [data-design="a"] .a-light-tile__face,
  [data-design="a"] .a-light-tile__face::after,
  [data-design="a"] .a-light-tile__rake,
  [data-design="a"] .a-about__mark-wash,
  [data-design="a"] .a-cta,
  [data-design="a"] .a-funnel__submit,
  [data-design="a"] .a-funnel__step.is-current {
    animation: none;
  }
  [data-design="a"] .a-funnel__progress-bar {
    transition: none;
  }
}

/* ============================================================
   ANTI-LEAK / MOBILE GUARD
   ============================================================ */

[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; }