/* NexGen AIvolution – interior page shell
   Loaded on every interior page (body.ng-interior), after nexgen-section-cta.
   body.ng-interior is added by the body_class filter in functions.php on every
   page where is_page() && !is_front_page().

   Selector prefix change from .elementor.elementor-125 to body.ng-interior:
   body.ng-interior .child at (0,2,1) beats Elementor's e-flexbox-base,
   e-heading-base, and e-paragraph-base at (0,2,0). */

:root {
  --abt-max: 1200px;
  --abt-gutter: 48px;
  --abt-pad: 120px;
}

/* accent tokens, set on the section element via the .acc-* class */
.acc-elec { --c: #4A8DE6; --c-rgb: 74,141,230; }
.acc-gold  { --c: #C8881A; --c-rgb: 200,136,26; }
.acc-purp  { --c: #8B6FD4; --c-rgb: 139,111,212; }
.acc-sage  { --c: #5FC49A; --c-rgb: 95,196,154; }
.acc-teal  { --c: #3BBFA0; --c-rgb: 59,191,160; }
/* acc-none: Primary Light as the "colour" so eyebrow text resolves to --c */
.acc-none  { --c: #F0F2FA; --c-rgb: 240,242,250; }
/* acc-none treatment: transparent pill with solid var(--text) border, dim h2, bright .hl */
body.ng-interior .acc-none .ng-eyebrow {
  background: transparent;
  border: 1px solid var(--text);
  /* color inherits from .ng-eyebrow { color: var(--c) } = Primary Light for acc-none */
}
body.ng-interior .acc-none h2.ng-h2          { color: var(--secondary); }
body.ng-interior .acc-none h2.ng-h2 .hl      { color: var(--text); }
/* acc-purp eyebrow: purple (#8B6FD4) on its 13% tint measures 4.03 — contrast failure.
   A Purple pill always takes a Primary Light label (§9.2). */
body.ng-interior .acc-purp .ng-eyebrow       { color: var(--text); }

/* section backgrounds */
.bg-ink  { background: var(--ink); }
.bg-mid  { background: var(--midnight); }
.bg-deep { background: var(--deep); }

/* scoped body baseline — ports mock-up body{} so every text element inside the
   page container starts from the right colour, family, size, and line-height.
   body.ng-interior .elementor.elementor-<id> at (0,2,1) beats Hello's body{} at (0,0,1). */
body.ng-interior .elementor {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.65;
}

/* section shell
   padding-block prefixed: e-flexbox-base sets padding:10px at (0,2,0), beats (0,1,0).
   padding-inline:0 stays in the same prefixed rule. */
body.ng-interior .ng-sec {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-block: var(--abt-pad);
  padding-inline: 0;
}

/* wrap
   padding-inline prefixed: same e-flexbox-base conflict.
   max-width and margin:0 auto are not overridden by the base rule, so they stay unprefixed. */
body.ng-interior .ng-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--abt-gutter);
}
.ng-wrap {
  max-width: var(--abt-max);
  margin: 0 auto;
}

/* eyebrow pill
   align-self and margin-bottom prefixed: e-paragraph-base sets margin:0 at (0,2,0) */
body.ng-interior .ng-eyebrow {
  align-self: flex-start;
  margin-bottom: 28px;
}
.ng-eyebrow {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c);
  background: rgba(var(--c-rgb), .13);
  border: 1px solid rgba(var(--c-rgb), .32);
  border-radius: 8px;
  padding: 9px 16px;
  line-height: 1;
}

/* headings — margin-bottom prefixed: e-heading-base sets margin:0 at (0,2,0) */
body.ng-interior h1.ng-h1 { margin-bottom: 26px; }
body.ng-interior h2.ng-h2 { margin-bottom: 24px; }
h1.ng-h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.06;
  letter-spacing: -.02em;
  max-width: 20ch;
}
h2.ng-h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.12;
  letter-spacing: -.015em;
  max-width: 26ch;
}
.hl { color: var(--c); }

/* heading colour — prefixed at (0,3,1): an inherited colour from the scoped rule
   above loses to any direct theme rule on h1/h2/h3; a direct rule wins.
   About-specific selectors (.ng-abt-cta h2, etc.) are harmless on other pages
   because those classes do not appear on other pages. */
body.ng-interior h1.ng-h1,
body.ng-interior h2.ng-h2,
body.ng-interior .ng-abt-cta h2,
body.ng-interior .ng-abt-side h3,
body.ng-interior .ng-abt-q h3,
body.ng-interior .ng-abt-by .nm { color: var(--text); }

/* lede — sibling rule prefixed to eliminate source-order fragility */
.ng-lede {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  max-width: 70ch;
  color: var(--text);
}
body.ng-interior .ng-lede + .ng-lede { margin-top: 18px; }
.ng-lede strong { font-weight: 700; }

/* body — root-cause-2: Hello reset sets p { margin-block: 0 0.9rem } on classic
   HTML widget paragraphs. The margin:0 reset MUST precede the sibling rule because
   both are at (0,3,1) and source order decides which wins on equal specificity. */
.ng-body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.7;
  max-width: 70ch;
  color: var(--secondary);
}
body.ng-interior .ng-body { margin: 0; }
body.ng-interior .ng-body + .ng-body { margin-top: 18px; }
.ng-body strong { color: var(--text); font-weight: 600; }

/* close — margin-top prefixed: e-paragraph-base sets margin:0 at (0,2,0) */
body.ng-interior .ng-close { margin-top: 52px; }
.ng-close {
  font-family: var(--font-body);
  border-left: 3px solid var(--c);
  padding-left: 22px;
  max-width: 74ch;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--text);
}
.ng-close strong { font-weight: 600; }

/* anchor baseline: .elementor-kit-5 a { font-size: 24px } at (0,1,1) overrides every
   unscoped interior anchor. This single rule at (0,2,1) resets font-size to inherit
   for all interior content anchors, so each inherits from its containing text element.
   The rule is scoped to .elementor so it misses the UAE skip link, which sits outside
   the Elementor wrapper. */
body.ng-interior .elementor a { font-size: inherit; }

/* inline body link — §9.9. Class ng-a must be in _elementor_data on the anchor;
   Elementor does not propagate classes through its rendering pipeline. */
a.ng-a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(200,136,26,.45);
  transition: text-decoration-color .16s ease;
}
a.ng-a:hover { text-decoration-color: var(--gold); }

/* card base and both hover variants
   hover-hold: On Deep sections — border, lift, and glow only, no background change.
     Surface against Deep measures 1.05 and the panel disappears.
   hover-shift: On Ink sections — full hover including background to Surface. */
.ng-card {
  background: var(--midnight);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
/* Hover rules prefixed to (0,4,1) — card-specific backgrounds in page CSS
   sit at (0,3,1) or lower; the prefix here ensures hover wins by specificity, not load order. */
body.ng-interior .hover-hold .ng-card:hover {
  border-color: rgba(var(--c-rgb), .32);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(var(--c-rgb), .13);
}
body.ng-interior .hover-shift .ng-card:hover {
  border-color: rgba(var(--c-rgb), .32);
  background: var(--surface);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(var(--c-rgb), .13);
}

/* responsive */
@media (max-width: 1023px) {
  :root { --abt-gutter: 32px; --abt-pad: 96px; }
  body.ng-interior h1.ng-h1 { font-size: 44px; }
  body.ng-interior h2.ng-h2 { font-size: 36px; }
}
@media (max-width: 767px) {
  :root { --abt-gutter: 20px; --abt-pad: 80px; }
  body.ng-interior .ng-eyebrow { font-size: 14px; }
  body.ng-interior h1.ng-h1 { font-size: 34px; }
  body.ng-interior h2.ng-h2 { font-size: 28px; }
}

/* reduced motion — prefixed to beat the prefixed base rules */
@media (prefers-reduced-motion: reduce) {
  .ng-card { transition: none; }
  body.ng-interior .hover-hold .ng-card:hover,
  body.ng-interior .hover-shift .ng-card:hover { transform: none; }
}