/* NexGen AIvolution – Capability Statement page (/capability-statement, post 131)
   Loaded only on this page, depends on nexgen-page-shell.
   ng-cap-* prefix. Gated via is_page(131) in functions.php.

   Shell provides: .ng-sec, .ng-wrap, .bg-*, .acc-*, .ng-eyebrow,
   .ng-h1, .ng-h2, .hl, .ng-lede, .ng-body, .ng-close, .ng-card,
   .hover-hold, .hover-shift.

   The frame renders the sheet at a fixed internal 900x1120 and scales it to
   the container via --ng-cap-s, set by the inline script in the html widget.
   900px internal width keeps the sheet above its own 880px responsive step. */

body.ng-interior .ng-cap-frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 900 / 1120;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--midnight);
}
body.ng-interior .ng-cap-sheet {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: 1120px;
  border: 0;
  transform-origin: top left;
  transform: scale(var(--ng-cap-s, 1));
}
body.ng-interior .ng-cap-actions {
  display: flex;
  justify-content: center;
  margin: 0 0 32px;
}
body.ng-interior .elementor .ng-cap-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', system-ui;
  font-weight: 700;
  font-size: 16px;
  line-height: 26.4px;
  letter-spacing: -.01em;
  color: var(--ink);
  background: var(--gold);
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
}
body.ng-interior .elementor .ng-cap-dl:hover {
  filter: brightness(1.08);
}
body.ng-interior .ng-cap-note {
  margin: 14px 0 0;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--secondary);
}

/* === Closing CTA ========================================================= */
/* Rules for .ng-tm-cta, .ng-tm-btn etc. live in page-teaming.css, which is
   gated to is_page(129) and does not load here. They are reproduced below so
   the copied CTA block renders identically on this page. */

body.ng-interior .ng-tm-cta {
  --c: var(--gold);
  --c-rgb: 200,136,26;
  border: 1px solid rgba(var(--c-rgb), .32);
  background: var(--deep);
  padding: 56px 52px;
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
}
body.ng-interior .ng-tm-cta:has(.ng-tm-btn:hover) { transform: none; }
body.ng-interior .ng-tm-cta h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--text);
  max-width: none;
  margin: 0 auto 18px;
}
/* p reset: Hello margin-block: 0 0.9rem. Scoped to .ng-tm-cta to beat
   body.ng-interior .ng-tm-cta p at (0,2,2); this rule is also (0,2,2) and
   loads after page-shell, so source order decides correctly. */
body.ng-interior .ng-tm-cta p {
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--text);
  max-width: 60ch;
  margin: 0 auto 34px;
  line-height: 1.6;
}
body.ng-interior .elementor .ng-tm-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  background: var(--gold);
  color: var(--ink);
  border-radius: 8px;
  padding: 14px 28px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.ng-interior .elementor .ng-tm-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(200,136,26,.28);
}
/* Scoped to .ng-tm-cta to beat body.ng-interior .ng-tm-cta p at (0,2,2). */
body.ng-interior .ng-tm-cta .ng-tm-meta {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--secondary);
  margin-top: 18px;
  margin-bottom: 0;
  max-width: none;
}

@media (max-width: 1024px) {
  body.ng-interior .ng-cap-frame { max-width: 100%; }
  body.ng-interior .ng-tm-cta h2 { font-size: 30px; }
}
@media (max-width: 767px) {
  body.ng-interior .ng-tm-cta { padding: 40px 24px; }
  body.ng-interior .ng-tm-cta .ng-tm-meta { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ng-interior .ng-cap-dl,
  body.ng-interior .elementor .ng-tm-btn { transition: none; }
  body.ng-interior .elementor .ng-tm-btn:hover { transform: none; }
}