/* NexGen AIvolution – Services page (/services, post 127)
   Loaded only on this page, depends on nexgen-page-shell. */

/* per-page baseline: scopes the colour/font/size reset to this post's
   Elementor container, matching the shell's portable baseline at (0,2,1). */
body.ng-interior .elementor.elementor-127 {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.65;
}

/* === acc-none treatment for block 2 ===
   Block 2 has no single accent colour; the eyebrow and heading treatment
   is different from every other block on the site. These three rules are
   the entire neutral treatment — everything else falls through to the shell. */
body.ng-interior .acc-none .ng-eyebrow { background: transparent; border: 1px solid var(--text); }
body.ng-interior .acc-none h2.ng-h2 { color: var(--secondary); }
body.ng-interior .acc-none h2.ng-h2 .hl { color: var(--text); }

/* === Heading colours ===
   Prefixed at (0,3,1) to beat any direct Hello theme rule on h2/h3. */
body.ng-interior .ng-sv-cta h2,
body.ng-interior .ng-sv-pkg h3,
body.ng-interior .ng-sv-seqc h3 { color: var(--text); }

/* === Reset: raw HTML widget element margins (root-cause-2) ===
   Hello's reset.css sets h3 { margin-block: 0.5rem 1rem } and
   p { margin-block: 0 0.9rem } on classic HTML widget elements.
   Reset MUST precede any rule that sets a margin on the same elements. */
body.ng-interior .ng-sv-pkg h3,
body.ng-interior .ng-sv-seqc h3 { margin-top: 0; }
body.ng-interior .ng-sv-pkg .pr,
body.ng-interior .ng-sv-seqc p { margin: 0; }
body.ng-interior .ng-sv-pkg .pr + .pr { margin-top: 14px; }

/* === Phase chip colours (Correction C: replaces inline style= attributes) === */
body.ng-interior .ng-sv-chip.ph1 { --phc: #4A8DE6; --phc-rgb: 74,141,230; }
body.ng-interior .ng-sv-chip.ph2 { --phc: #3BBFA0; --phc-rgb: 59,191,160; }
body.ng-interior .ng-sv-chip.ph3 { --phc: #8B6FD4; --phc-rgb: 139,111,212; }
body.ng-interior .ng-sv-chip.ph4 { --phc: #C8881A; --phc-rgb: 200,136,26; }
body.ng-interior .ng-sv-chip.ph5 { --phc: #5FC49A; --phc-rgb: 95,196,154; }

/* === Phase chip === */
.ng-sv-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--phc);
  background: rgba(var(--phc-rgb), .13);
  border: 1px solid rgba(var(--phc-rgb), .32);
  border-radius: 8px;
  padding: 7px 13px;
  line-height: 1;
  white-space: nowrap;
}

/* === Package list container ===
   display:flex and flex-direction:column prefixed because e-flexbox-base
   sets those at (0,2,0) and this is inside an e-flexbox wrap. */
body.ng-interior .ng-sv-pkgs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 44px;
}

/* === Package card ===
   display:grid and padding prefixed for the same reason. */
body.ng-interior .ng-sv-pkg {
  padding: 32px 34px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 56px 1fr 250px;
  gap: 28px;
  align-items: start;
}

/* Package phase colours — each card overrides --c and --c-rgb for its phase.
   Specificity (0,3,1) beats the section's acc-none --c-rgb at (0,1,0),
   so hover and chip colours resolve to the card's own phase colour. */
body.ng-interior .ng-sv-pkg.k1 { --c: #4A8DE6; --c-rgb: 74,141,230; }
body.ng-interior .ng-sv-pkg.k2 { --c: #3BBFA0; --c-rgb: 59,191,160; }
body.ng-interior .ng-sv-pkg.k3 { --c: #8B6FD4; --c-rgb: 139,111,212; }
body.ng-interior .ng-sv-pkg.k4 { --c: #C8881A; --c-rgb: 200,136,26; }
body.ng-interior .ng-sv-pkg.k5 { --c: #5FC49A; --c-rgb: 95,196,154; }

/* === Icon === */
body.ng-interior .ng-sv-ic {
  width: 44px;
  height: 44px;
  color: var(--c);
}
body.ng-interior .ng-sv-ic svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* === Package number === */
body.ng-interior .ng-sv-num {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .13em;
  color: var(--c);
  margin-bottom: 12px;
}

/* === Package h3 === */
body.ng-interior .ng-sv-pkg h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.3;
  margin-bottom: 14px;
}

/* === Package body copy === */
body.ng-interior .ng-sv-pkg .pr {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--secondary);
}
body.ng-interior .ng-sv-pkg .pr b {
  color: var(--text);
  font-weight: 600;
}

/* === Package metadata column === */
body.ng-interior .ng-sv-meta {
  border-left: 1px solid var(--border);
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
body.ng-interior .ng-sv-meta .ml {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 10px;
}
.ng-sv-meta .mv {
  font-size: 17.5px;
  color: var(--text);
  line-height: 1.45;
}
.ng-sv-meta .lead { font-weight: 600; }

/* === Sequence grid (block 3) ===
   Correction A: block 3 section is Midnight; cards go on Deep per the
   raised-panel rule (Midnight section → Deep panels). The section carries
   hover-shift so cards shift to Surface on hover. */
body.ng-interior .ng-sv-seq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 44px;
}

/* Correction A: override .ng-card's default var(--midnight) background */
body.ng-interior .ng-sv-seqc {
  padding: 28px 30px;
  box-sizing: border-box;
  background: var(--deep);
}

body.ng-interior .ng-sv-seqc .k {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 14px;
}
body.ng-interior .ng-sv-seqc h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.35;
  margin-bottom: 12px;
}
body.ng-interior .ng-sv-seqc p {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--secondary);
}
body.ng-interior .ng-sv-seqc--wide { grid-column: 1 / -1; }

/* === Closing CTA card (block 4) ===
   margin-inline:auto centres the card. align-self:center would be silently
   ignored because .ng-sv-cta is not a direct flex child of .ng-wrap —
   Elementor wraps it in its own widget div. */
body.ng-interior .ng-sv-cta {
  border-color: rgba(var(--c-rgb), .32);
  background: var(--deep);
  padding: 56px 52px;
  box-sizing: border-box;
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
}
body.ng-interior .ng-sv-cta:has(.ng-sv-btn:hover) { transform: none; }
body.ng-interior .ng-sv-cta h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.18;
  letter-spacing: -.015em;
  max-width: none;
  margin: 0 auto 18px;
}
body.ng-interior .ng-sv-cta p {
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--text);
  max-width: 60ch;
  margin: 0 auto 34px;
  line-height: 1.6;
}

/* === CTA button === */
body.ng-interior .elementor .ng-sv-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-sv-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(200,136,26,.28);
}

/* === CTA note === */
body.ng-interior .ng-sv-note {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--secondary);
  margin-top: 18px;
}

/* === Responsive === */
@media (max-width: 1100px) {
  body.ng-interior .ng-sv-pkg {
    grid-template-columns: 56px 1fr;
    gap: 24px;
  }
  body.ng-interior .ng-sv-meta {
    grid-column: 2;
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 22px;
    margin-top: 22px;
    flex-direction: row;
    gap: 48px;
  }
}
@media (max-width: 1023px) {
  body.ng-interior .ng-sv-seq { grid-template-columns: 1fr; }
  body.ng-interior .ng-sv-cta h2 { font-size: 30px; }
}
@media (max-width: 767px) {
  body.ng-interior .ng-sv-note,
  body.ng-interior .ng-sv-num,
  body.ng-interior .ng-sv-meta .ml { font-size: 14px; }
  body.ng-interior .ng-sv-pkg {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 22px;
  }
  body.ng-interior .ng-sv-meta {
    grid-column: 1;
    flex-direction: column;
    gap: 22px;
  }
  body.ng-interior .ng-sv-cta { padding: 40px 24px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.ng-interior .elementor .ng-sv-btn { transition: none; }
  body.ng-interior .elementor .ng-sv-btn:hover { transform: none; }
}