/* ============================================================================
   NZT internal pages — design-system theming for the legacy class names used by
   /projects, /library, /offers and the legal pages. Load AFTER nzt-ds.css and
   compat.css. Everything references DS tokens, so these pages match the homepage
   (dark void, plum/amber). df-cta / df-eyebrow / display / lede come from
   compat.css; this file covers the rest (cards, header/footer, forms, gate
   canvases, legal layout).
   ============================================================================ */

/* --- Layout ------------------------------------------------------------ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-24); }
.section { padding-block: var(--section-y); }
.section-head { max-width: 60ch; margin-bottom: var(--s-60); display: flex; flex-direction: column; gap: var(--s-12); }
.section-head__sub { font-size: var(--ts-lede); line-height: var(--lh-lede); color: var(--text-body); }
.t-h2 { font-family: var(--font-display); font-weight: var(--fw-light); font-size: var(--ts-display-lg); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--text-primary); }

/* --- NZT wordmark ------------------------------------------------------ */
.nzt { display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.nzt__spark { width: 22px; height: 22px; flex: none; color: var(--plum); }
.nzt__name { display: inline-flex; align-items: baseline; gap: 0.4em; }
.nzt__n { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 20px; letter-spacing: -0.01em; color: var(--bone); }
.nzt__b { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 13px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ash); }
.nzt--lg .nzt__spark { width: 26px; height: 26px; }
.nzt--lg .nzt__n { font-size: 23px; }
.nzt--lg .nzt__b { font-size: 14px; }
/* --on-dark is a no-op now (page is already dark) but kept so markup is valid */
.nzt--on-dark .nzt__n { color: var(--bone); }
.nzt--on-dark .nzt__b { color: var(--ash); }

/* --- Header / footer --------------------------------------------------- */
.site-header { position: relative; z-index: var(--z-header); }
.site-header .container { display: flex; align-items: center; gap: var(--s-24); min-height: var(--header-h); }
.site-footer { border-top: 1px solid var(--hairline); padding-block: var(--s-36); margin-top: var(--s-60); }
.site-footer .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-18); flex-wrap: wrap; }
.site-footer__copy { font-size: var(--ts-small); color: var(--text-muted); }

/* --- Service / proposal cards (df-service) ----------------------------- */
.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-18); }
.df-service {
  position: relative; display: flex; flex-direction: column; gap: var(--s-12); height: 100%;
  padding: var(--s-30); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform var(--dur-cta) var(--ease-standard), border-color var(--dur-cta) var(--ease-standard), background-color var(--dur-cta) var(--ease-standard);
}
.df-service:hover { transform: translateY(-3px); border-color: var(--border-strong); background: var(--plum-004); }
.df-service__icon-wrap {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-6); border-radius: var(--radius-md); background: var(--plum-008);
  transition: transform var(--dur-cta) var(--ease-emphasized);
}
.df-service:hover .df-service__icon-wrap { transform: translateY(-3px); }
.df-service__icon { width: 30px; height: 30px; color: var(--plum); stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.df-service__tag { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--ts-kicker); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-accent); }
.df-service__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); }
.df-service__body { font-size: 15px; line-height: 1.55; color: var(--text-body); flex: 1; }
.df-service__link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-6); color: var(--action-quiet); font-weight: var(--fw-bold); font-size: var(--ts-small); letter-spacing: var(--tracking-nav); transition: gap var(--dur-cta) var(--ease-emphasized); }
.df-service:hover .df-service__link { gap: 12px; }
.df-service__link svg { width: 16px; height: 16px; flex: none; }

/* --- Forms (gate + lists reuse these) ---------------------------------- */
.form-card { max-width: 560px; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-36); background: var(--surface-panel); }
.form-fields { display: grid; gap: var(--s-18); }
.form-field { display: grid; gap: 8px; }
.form-field label { font-size: 13px; letter-spacing: var(--tracking-nav); color: var(--text-body); }
.form-field input {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--bone);
  background: var(--surface-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 15px;
  transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.form-field input:focus { outline: none; border-color: var(--plum); background: var(--plum-006); }
.form-card__submit { margin-top: var(--s-6); width: 100%; justify-content: center; }
.form-status { font-size: 13px; min-height: 1em; color: var(--text-muted); }
.form-status--ok  { color: var(--status-success); }
.form-status--err { color: var(--status-warning); }

/* --- Offers toolbar ---------------------------------------------------- */
.offers-toolbar { display: flex; align-items: center; gap: var(--s-12); margin-bottom: var(--s-30); flex-wrap: wrap; }
.offers-toolbar__label { font-size: var(--ts-small); color: var(--text-muted); letter-spacing: var(--tracking-nav); }

/* --- Gate particle canvases (library / offers lock) -------------------- */
.dala-particles, .dala-ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-canvas); pointer-events: none; display: block; }
.dala-page { position: relative; z-index: var(--z-content); }

/* --- Legal pages ------------------------------------------------------- */
.legal { max-width: 760px; margin: 0 auto; padding: 64px var(--s-24) 96px; }
.legal a { color: var(--ash); }
.legal__back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); text-decoration: none; font-size: 13px; letter-spacing: var(--tracking-cta); text-transform: uppercase; margin-bottom: 40px; }
.legal__back:hover { color: var(--bone); }
.legal__back svg { width: 16px; height: 16px; }
.legal h1 { font-family: var(--font-display); font-weight: var(--fw-light); font-size: var(--ts-display-lg); letter-spacing: var(--tracking-display); line-height: 1.05; margin-bottom: 12px; color: var(--text-primary); }
.legal__note { color: var(--text-muted); font-size: 13px; margin-bottom: 40px; }
.legal h2 { font-family: var(--font-display); font-weight: var(--fw-light); font-size: 1.25rem; margin: 36px 0 12px; color: var(--text-primary); }
.legal p { color: var(--text-body); margin-bottom: 14px; line-height: var(--lh-lede); }
.legal ul { color: var(--text-body); margin: 0 0 14px 22px; }
.legal li { margin-bottom: 6px; }
.legal__ph { color: var(--plum); }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 980px) { .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards-grid { grid-template-columns: 1fr; } }