/* NineGravity theme — layout overlay (numbered editorial blog, hover transforms,
   radial-glow backgrounds, etc). Originally the 'Royal' overlay; recoloured to Signal. */

/* =============================================================================
   NineGravity — Royal layout overlay — recoloured to Signal palette
   -----------------------------------------------------------------------------
   Loaded AFTER nga-homepage.css and nga-homepage-signal.css, so it overrides
   those files' token values and any legacy styling.

   Palette:
     Primary:   Royal Blue #2B59FF   · Deep Aubergine #0E1116
     Secondary: Warm Cream #FAFAF7   · Coral Pink #2B59FF · Violet #2B59FF
     Neutral:   White · Light Gray · Medium Gray · Dark Gray

   Tone: premium, editorial, confident. Warmer than a pure tech palette.
   ========================================================================== */

/* =============================================================================
   TYPOGRAPHY — canonical rules
   ========================================================================== */
.ng .nga-hero__h,
.ng .nga-h2,
.ng .nga-dual__h,
.ng .nga-services__h,
.ng .aud-hero__h,
.ng .aud-h2,
.ng .svc-h2 { font-weight: 400; color: var(--ink); }

.ng .nga-hero__h em,
.ng .nga-h2 em,
.ng .aud-hero__h em,
.ng .svc-h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

.ng .nga-sec    { padding-top: var(--nga-sec-y);    padding-bottom: var(--nga-sec-y); }
.ng .nga-sec--sm{ padding-top: var(--nga-sec-y-sm); padding-bottom: var(--nga-sec-y-sm); }

.ng .nga-sec > .nga-container > .ng-eyebrow,
.ng .nga-sec > .nga-container--wide > .ng-eyebrow { margin-bottom: 20px; }
.ng .nga-sec .nga-h2 + .svc-lead,
.ng .nga-sec .nga-h2 + p { margin-top: 16px; }

/* =============================================================================
   GLOBAL: eyebrows, links, selection
   ========================================================================== */
.ng .ng-eyebrow { color: var(--ink-3); }
.ng .ng-eyebrow::before { background: var(--violet); width: 22px; height: 2px; }

/* Text anchor links — Royal Blue (secondary per brief) */
.ng .ng-link { color: var(--ink-2); }
.ng .ng-link:hover { color: var(--royal); border-bottom-color: var(--royal); }
.ng .ng-link:hover .arr { color: var(--royal); }
.ng ::selection { background: var(--violet); color: #fff; }

/* =============================================================================
   PRIMARY CTA — Violet (per brief)
   ========================================================================== */
.ng .ng-btn:not(.ng-btn--ghost):not(.ng-btn--signal) {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.ng .ng-btn:not(.ng-btn--ghost):not(.ng-btn--signal):hover {
  background: var(--signal-hi);
  border-color: var(--signal-hi);
}

/* Price pill inside primary CTAs */
.ng .ng-btn .price {
  background: rgba(14,17,22,0.35);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

/* Ghost button — aubergine border, hover fills violet */
.ng .ng-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.ng .ng-btn--ghost:hover {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.ng .ng-btn--ghost:hover .arr { color: #fff; }

/* Nav CTA — Violet */
.nga-nav .nga-nav__cta .ng-btn {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.nga-nav .nga-nav__cta .ng-btn:hover {
  background: var(--signal-hi);
  border-color: var(--signal-hi);
}

/* Nav chrome */
.nga-nav { background: rgba(255,255,255,0.85); }
.nga-nav.is-scrolled { background: rgba(255,255,255,0.95); border-bottom-color: var(--line); }
.nga-nav__menu a, .nga-dd__btn { color: var(--ink-3); }
.nga-nav__menu a:hover, .nga-dd__btn:hover { color: var(--ink); }
.nga-nav__menu a.is-active, .nga-dd__btn.is-active { color: var(--ink); }

/* Dropdown panel accent */
.nga-dd__tag { color: var(--violet); font-weight: 500; }
.nga-dd__panel a:hover { background: var(--signal-tint); color: var(--violet-ink); }

/* =============================================================================
   HERO — white base with soft Coral Pink accent sweep at bottom (per brief,
   "apply sparingly, not as a full background wash")
   ========================================================================== */
.nga-hero {
  background:
    radial-gradient(80% 60% at 90% 100%, rgba(43,89,255,0.18) 0%, rgba(43,89,255,0) 60%),
    radial-gradient(60% 50% at 10% 110%, rgba(43,89,255,0.12) 0%, rgba(43,89,255,0) 55%),
    #FFFFFF;
  position: relative;
}

/* Meta dot glow — coral */
.nga-hero__meta-item .dot {
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(43,89,255,0.22);
}

/* Hero italic accent stays aubergine */
.nga-hero__h em { color: var(--ink); font-style: italic; font-weight: 400; }
.nga-hero__h .hl { color: var(--violet); font-weight: 400; font-style: normal; }

/* =============================================================================
   TRUST STRIP — Deep Aubergine text on white
   ========================================================================== */
.nga-trust { background: #FFFFFF; }
.nga-trust__logos img,
.nga-trust__logos svg { transition: filter .2s, opacity .2s; }

/* =============================================================================
   DUAL PATH — owner Coral Pink (warm), agency Violet/Royal (corporate)
   ========================================================================== */
.nga-dual__card--owner {
  background:
    linear-gradient(180deg, rgba(43,89,255,0.22) 0%, rgba(43,89,255,0.05) 55%, #FFFFFF 100%),
    #FFFFFF;
  border-color: var(--coral);
  box-shadow: 0 1px 0 rgba(43,89,255,0.35), 0 18px 40px rgba(43,89,255,0.10);
}
.nga-dual__card--owner .ng-eyebrow { color: var(--coral-ink); }
.nga-dual__card--owner .ng-eyebrow::before { background: var(--coral); }
.nga-dual__card--owner .nga-dual__list li svg { color: var(--coral-ink); }
.nga-dual__card--owner .ng-link:hover { color: var(--coral-ink); border-bottom-color: var(--coral); }

.nga-dual__card--agency {
  background:
    linear-gradient(180deg, rgba(43,89,255,0.12) 0%, rgba(43,89,255,0.02) 55%, #FFFFFF 100%),
    #FFFFFF;
  border-color: var(--violet);
  box-shadow: 0 1px 0 rgba(43,89,255,0.3), 0 18px 40px rgba(43,89,255,0.10);
}
.nga-dual__card--agency .ng-eyebrow { color: var(--violet-ink); }
.nga-dual__card--agency .ng-eyebrow::before { background: var(--violet); }
.nga-dual__card--agency .nga-dual__list li svg { color: var(--violet); }

.nga-dual__list li svg { color: var(--violet); }

/* =============================================================================
   AUDIT PRODUCT — Warm Cream "product block" + Coral accent on price
   ========================================================================== */
.nga-audit {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.nga-audit__icon { color: var(--violet); }
.nga-audit__fig { color: var(--ink); }
/* Subtle coral accent on the price callout, if present */
.nga-audit .price,
.nga-audit__price { color: var(--coral-ink); }

/* =============================================================================
   SERVICES CARDS — white on Warm Cream alternating section
   ========================================================================== */
.nga-services { background: #FFFFFF; }
.nga-services__card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.nga-services__card:hover {
  background: var(--signal-tint-2);
  border-color: var(--violet);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(43,89,255,0.10);
}
.nga-services__card:hover .nga-services__h { color: var(--violet-ink); }
.nga-services__icon { color: var(--violet); }

/* =============================================================================
   CASE STUDY — metrics Deep Aubergine, arrows/bars Violet, labels gray
   ========================================================================== */
.nga-case, .nga-case2 { background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%); }
.nga-case__m-pct {
  background: rgba(43,89,255,0.14);
  color: var(--violet-ink);
  font-weight: 500;
}
.nga-case__m-bar div { background: var(--violet); }
.nga-case__m-v { color: var(--ink); }
.nga-case__m-l { color: var(--ink-3); }
.nga-case__arrow, .nga-case__m-arrow { color: var(--violet); }

/* =============================================================================
   REVIEWS / CLUTCH — white bg with warm-cream accent, Coral Pink stars
   ========================================================================== */
.nga-reviews { background: #FFFFFF; }
.nga-reviews__score-n { color: var(--ink); }
/* Clutch star rating — Coral (per brief) */
.nga-reviews__stars svg,
.nga-reviews__stars path,
.nga-review__stars svg,
.nga-review__stars path {
  color: var(--coral);
  fill: var(--coral);
}
.nga-review { border-color: var(--line); background: #FFFFFF; }
.nga-review:hover {
  border-color: var(--violet);
  box-shadow: 0 12px 30px rgba(43,89,255,0.08);
}
/* Testimonial quote mark — Coral */
.nga-review__q { position: relative; }
.nga-review__q::before {
  content: "\201C";
  position: absolute;
  left: -2px;
  top: -28px;
  font-family: var(--display, 'Space Grotesk', serif);
  font-size: 72px;
  line-height: 1;
  color: var(--coral);
  opacity: 0.7;
  pointer-events: none;
}

/* =============================================================================
   AUTOMATTIC / PARTNER BAR
   ========================================================================== */
.nga-partner, .nga-autom {
  background: #FFFFFF;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* =============================================================================
   NEWSLETTER / BLOG SECTION — Editorial magazine treatment, LIGHT palette.
   Warm cream bg with subtle violet/coral glows, dark aubergine text.
   Numbered editorial index (01/02/03) — no thumbnail cards.
   Matches the rest of the Royal theme's light/cream system.
   ========================================================================== */
.nga-news {
  background:
    radial-gradient(80% 60% at 90% 100%, rgba(43,89,255,0.18) 0%, rgba(43,89,255,0) 60%),
    radial-gradient(60% 50% at 10% 110%, rgba(43,89,255,0.12) 0%, rgba(43,89,255,0) 55%),
    #FFFFFF;
  color: var(--ink);
  position: relative;
}
.nga-news::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14,17,22,0.035) 1px, transparent 1px);
  background-size: 100% 56px;
  pointer-events: none;
  opacity: 0.8;
}
.nga-news > * { position: relative; }

/* Top — newsletter hero (left headline, right inline form) */
.nga-news .ng-eyebrow { color: var(--ink-3); }
.nga-news .ng-eyebrow::before { background: var(--violet); }
.nga-news__h { color: var(--ink); font-family: var(--display); }
.nga-news__p  { color: var(--ink-2); }

.nga-news__label { color: var(--ink-3); }
.nga-news__input {
  color: var(--ink);
  background: transparent;
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
}
.nga-news__input::placeholder { color: var(--ink-3); }
.nga-news__input-row {
  border-bottom-color: rgba(14,17,22,0.22);
}
.nga-news__input-row:focus-within { border-bottom-color: var(--violet); }
.nga-news__input-row .ng-btn {
  background: var(--violet);
  border-color: var(--violet);
  color: #FFFFFF;
}
.nga-news__input-row .ng-btn:hover {
  background: var(--signal-hi);
  border-color: var(--signal-hi);
}
.nga-news__input-row .ng-btn .arr { color: #FFFFFF; }
.nga-news__mini { color: var(--ink-3); }
.nga-news__ok svg { color: var(--violet); }
.nga-news__ok-t { color: var(--ink); }
.nga-news__ok-s { color: var(--ink-3); }

/* Editorial index header */
.nga-news__posts-head {
  padding-top: clamp(24px, 4vw, 48px);
  border-top: 1px solid rgba(14,17,22,0.15);
  margin-top: clamp(48px, 6vw, 80px) !important;
}
.nga-news__posts-head .ng-eyebrow { color: var(--ink-3); }
.nga-news__posts-head .ng-eyebrow::before { background: var(--violet); }
.nga-news__posts-head .ng-link { color: var(--ink-2); border-bottom-color: rgba(14,17,22,0.3); }
.nga-news__posts-head .ng-link:hover { color: var(--violet); border-bottom-color: var(--violet); }

/* -------- Posts: kill the 3-card grid, become a numbered index list -------- */
.nga-news__posts {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  grid-template-columns: none !important;
  counter-reset: royal-post;
}

/* Each post: flat row, hairline divider, big number, title, meta on right.
   No card background, no box, no thumbnail. */
.nga-post {
  counter-increment: royal-post;
  display: grid !important;
  grid-template-columns: 80px 1fr auto;
  align-items: baseline;
  gap: clamp(20px, 3vw, 48px) !important;
  padding: clamp(22px, 3vw, 34px) 0;
  border-top: 1px solid rgba(14,17,22,0.14);
  background: transparent !important;
  color: var(--ink) !important;
  text-decoration: none;
  transition: padding-left .35s cubic-bezier(.2,.8,.2,1), background .35s;
  position: relative;
}
.nga-post:last-child { border-bottom: 1px solid rgba(14,17,22,0.14); }

.nga-post::before {
  content: "0" counter(royal-post);
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--violet);
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

/* Hide the default thumbnail — the index treatment doesn't use art */
.nga-post__thumb { display: none !important; }

.nga-post__h {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  max-width: 62ch;
  text-wrap: balance;
  grid-column: 2;
}

.nga-post__meta {
  color: var(--ink-3) !important;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  grid-column: 3;
  align-self: center;
}

/* Hover: subtle shift + violet underline on the headline */
.nga-post:hover {
  background: rgba(43,89,255,0.04) !important;
  padding-left: clamp(12px, 1.5vw, 20px);
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(14,17,22,0.14) !important;
}
.nga-post:hover::before {
  color: var(--coral);
  opacity: 1;
}
.nga-post:hover .nga-post__h {
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Responsive: collapse to 2-column (number stacks above title) on narrow */
@media (max-width: 720px) {
  .nga-post {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .nga-post::before { font-size: 32px; }
  .nga-post__h { grid-column: 1; }
  .nga-post__meta { grid-column: 1; align-self: start; }
}

/* =============================================================================
   FOOTER — Warm Cream (light) background with dark aubergine text.
   Moving to light so the footer separates cleanly from dark Final-CTA /
   aubergine sections (.sub-final, .comm-upcoming, .about-creds) which were
   previously bleeding into a same-tone dark footer.
   ========================================================================== */
.nga-foot {
  background: var(--bone);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.nga-foot * { border-color: var(--line); }
.nga-foot .nga-foot__brand .nga-foot__tag { color: var(--ink-2); }
.nga-foot .nga-foot__h { color: var(--ink-3); }
.nga-foot .nga-foot__col a,
.nga-foot .nga-foot__col span {
  color: var(--ink-2);
}
.nga-foot .nga-foot__col a:hover { color: var(--ink); }
.nga-foot .nga-foot__col a::before { background: var(--coral); }
.nga-foot .nga-foot__bottom {
  color: var(--ink-3);
  border-top: 1px solid var(--line);
}
.nga-foot .nga-foot__bottom a { color: var(--ink-2); }
.nga-foot .nga-foot__bottom a:hover { color: var(--ink); }
.nga-foot .nga-foot__social a { color: var(--ink-2); }
.nga-foot .nga-foot__social a:hover { color: var(--violet); }
.nga-foot .nga-foot__vsep { background: var(--line); }
.nga-foot .nga-foot__badges { color: var(--ink-3); }

/* Logo wordmark inside light footer — dark ink */
.nga-foot .nga-foot__brand svg path,
.nga-foot .nga-foot__brand svg { color: var(--ink); fill: currentColor; }

/* =============================================================================
   "MOST POPULAR" ribbon — Coral Pink (per brief)
   ========================================================================== */
.is-popular, .is-featured {
  position: relative;
}
.is-popular::before, .is-featured::before {
  content: "Most Popular";
  position: absolute;
  top: -1px; right: 20px;
  background: var(--coral);
  color: #FFFFFF;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}

/* =============================================================================
   PAGE-SPECIFIC OVERRIDES — neutralize every hardcoded blue/purple/black from
   nga-services-blue.css, nga-work.css, nga-audit.css, nga-content-pages.css,
   nga-sub-pages.css, nga-mig.css. Loaded LAST so it wins on specificity order.
   Royal: primary = Violet, secondary = Royal Blue, warm = Coral.
   ========================================================================== */

/* ---------- SERVICES page ---------- */
.svc-hero::after {
  background:
    radial-gradient(900px 520px at 95% 0%, rgba(43,89,255,0.10), transparent 65%),
    radial-gradient(600px 380px at 100% 100%, rgba(43,89,255,0.05), transparent 70%) !important;
}
.svc-hero .nga-hero__meta-item .dot {
  background: var(--coral) !important;
  box-shadow: 0 0 0 3px rgba(43,89,255,0.22) !important;
}
.svc-selector { background: #FFFFFF !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
.svc-sec--tint { background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%) !important; }
.svc-results { background: #FFFFFF !important; }
.svc-results__cell:hover { background: rgba(43,89,255,0.05) !important; }
.svc-final {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%) !important;
}
.svc-final .nga-dual__card--agency { background: var(--paper); border: 1px solid var(--violet) !important; }
.svc-final .nga-dual__card--agency .ng-btn--ghost {
  background: var(--violet) !important; border-color: var(--violet) !important; color: #fff !important;
}
.svc-final .nga-dual__card--agency .ng-btn--ghost:hover {
  background: var(--signal-hi) !important; border-color: var(--signal-hi) !important;
}

/* Nav CTA on services pages → violet (was black) */
.nga-nav .nga-nav__cta .ng-btn {
  background: var(--violet) !important;
  border-color: var(--violet) !important;
  color: #fff !important;
}
.nga-nav .nga-nav__cta .ng-btn:hover {
  background: var(--signal-hi) !important;
  border-color: var(--signal-hi) !important;
}

/* Services page: primary CTAs that were forced to black */
.ng .ng-btn:not(.ng-btn--ghost):not(.ng-btn--signal) {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.ng .ng-btn:not(.ng-btn--ghost):not(.ng-btn--signal):hover {
  background: var(--signal-hi);
  border-color: var(--signal-hi);
}

/* ---------- WORK / CASE STUDY page ---------- */
.work-filters__chip.is-on {
  background: var(--violet) !important;
  color: #fff !important;
  border-color: var(--violet) !important;
}
.cs-shot__body {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%) !important;
}
.cs-ba__head--after {
  background: var(--signal-tint) !important;
  color: var(--violet-ink) !important;
}
.cs-ba__body {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%) !important;
}

/* ---------- AUDIT page ---------- */
.aud-break__tab:hover {
  background: rgba(43,89,255,0.05) !important;
  color: var(--ink);
}

/* ---------- SUB-PAGES (Performance/Security, Maintenance, Development) ---------- */
/* Performance half = Violet; Security half = Royal Blue (replaces old purple) */
.pfs-half--perf .pfs-half__eyebrow { background: var(--signal-tint) !important; color: var(--violet-ink) !important; }
.pfs-half--sec  .pfs-half__eyebrow { background: var(--royal-tint) !important; color: var(--royal-ink) !important; }
.pfs-half--perf .pfs-half__cell { background: #F5F8FF !important; }
.pfs-half--sec  .pfs-half__cell { background: #F7FAFF !important; }
.pfs-half--perf .pfs-half__n { color: var(--violet) !important; }
.pfs-half--sec  .pfs-half__n { color: var(--royal) !important; }
.pfs-hero__split-card--perf { background: linear-gradient(180deg, #FFFFFF 0%, var(--signal-tint) 100%) !important; }
.pfs-hero__split-card--sec  { background: linear-gradient(180deg, #FFFFFF 0%, var(--royal-tint) 100%) !important; }
.pfs-hero__split-card--perf .pfs-hero__split-lab { color: var(--violet) !important; }
.pfs-hero__split-card--sec  .pfs-hero__split-lab { color: var(--royal) !important; }

/* Sub-pages: dark final CTA — highlight word & accent to Coral (warm accent on dark) */
.sub-final__h .hl { color: var(--coral) !important; }

/* Maintenance page: dark paired cards (keep aubergine tones) */
.mnt-final__card { background: #1A1E25 !important; border-color: #3D2060 !important; }
.mnt-final__card--feat { background: #132873 !important; border-color: var(--violet) !important; }

/* ---------- MIGRATION page ---------- */
.mig-split__to { background: #F5F8FF !important; border-color: var(--signal-tint) !important; }
.mig-split__to .mig-split__lab { color: var(--violet) !important; border-color: var(--signal-tint) !important; background: #fff !important; }
.mig-split__pill--ok { background: var(--signal-tint) !important; color: var(--violet-ink) !important; border-color: var(--signal-tint) !important; }
.mig-split__body--new .mig-split__row { background: rgba(43,89,255,0.3) !important; }
.mig-final__expect-min {
  color: var(--coral) !important;
  background: rgba(43,89,255,0.18) !important;
}

/* ---------- CONTENT PAGES (Blog, About, Community, Privacy) ---------- */
.blog-newsletter .blog-newsletter__form { border-bottom-color: rgba(255,255,255,0.3); }
.blog-newsletter .blog-newsletter__form button:hover { background: var(--coral); color: #fff; }
.comm-upcoming__cta:hover { color: var(--coral) !important; }
.comm-upcoming__card:hover { border-color: var(--coral) !important; }

/* Blog chips & pagination — active state uses violet */
.blog-chip.is-active {
  background: var(--violet) !important;
  color: #fff !important;
  border-color: var(--violet) !important;
}
.blog-chip:hover { border-color: var(--violet) !important; color: var(--violet) !important; }
.blog-page-btn.is-active {
  background: var(--violet) !important;
  color: #fff !important;
  border-color: var(--violet) !important;
}
.blog-page-btn:hover { border-color: var(--violet) !important; color: var(--violet) !important; }

/* Post-inline CTA → coral warm accent on aubergine bg */
.post-inline-cta .ng-btn:not(.ng-btn--ghost) {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #fff !important;
}

/* ---------- SUB-PAGES maintenance table: "us" column ---------- */
.mnt-vs th.us { background: var(--violet) !important; color: #fff !important; }
.mnt-vs td.us { background: var(--signal-tint) !important; }

/* ---------- Highlight token for sub-final ---------- */
.sub-table .is-highlight { background: var(--signal-tint) !important; }
.sub-table .is-highlight td:first-child { color: var(--violet) !important; }

/* Sub-pages final CTA (aubergine bg): violet primary button so it's visible */
.sub-final .ng-btn--signal { background: var(--violet) !important; border-color: var(--violet) !important; color: #fff !important; }
.sub-final .ng-btn--signal:hover { background: var(--signal-hi) !important; border-color: var(--signal-hi) !important; }

/* =============================================================================
   PAGE-LEVEL VISUAL RICHNESS — two-tone heroes + accent rhythm across ALL
   inner pages. Mirrors the homepage's coral-bottom-right + violet-bottom-left
   radial sweep so every page opens with the same brand energy.
   ========================================================================== */

/* --- Shared dual-tone hero sweep ---
   Positioned into the VISIBLE top half of the hero (the top viewport) so
   the treatment is immediately present on page load, not buried at the
   fold. Mirrors the homepage vibe: coral on the right, violet on the left. */
.ng .svc-hero,
.ng .aud-hero,
.ng .sub-hero,
.ng .pg-hero,
.ng .cs-hero,
.ng .blog-hero {
  position: relative !important;
  background:
    radial-gradient(65% 70% at 95% 35%, rgba(43,89,255,0.26) 0%, rgba(43,89,255,0.05) 55%, rgba(43,89,255,0) 80%),
    radial-gradient(55% 65% at 5% 55%, rgba(43,89,255,0.20) 0%, rgba(43,89,255,0.03) 55%, rgba(43,89,255,0) 80%),
    #FFFFFF !important;
  overflow: hidden;
}

/* Variant: pg-hero with .pg-hero--bone — aligned to the default Royal hero
   (white base + same coral/violet sweep) so Community/etc match the
   homepage. Previously used --bone (#FAFAF7) which read as a different
   treatment. */
.ng .pg-hero--bone {
  background:
    radial-gradient(65% 70% at 95% 35%, rgba(43,89,255,0.26) 0%, rgba(43,89,255,0.05) 55%, rgba(43,89,255,0) 80%),
    radial-gradient(55% 65% at 5% 55%, rgba(43,89,255,0.20) 0%, rgba(43,89,255,0.03) 55%, rgba(43,89,255,0) 80%),
    #FFFFFF !important;
}

/* Audit hero already has a corner-frame decoration — ensure its own overlay
   ::after doesn't flatten the sweep. */
.ng .svc-hero::after {
  background:
    radial-gradient(900px 520px at 95% 0%, rgba(43,89,255,0.10), transparent 65%),
    radial-gradient(600px 380px at 100% 100%, rgba(43,89,255,0.10), transparent 70%) !important;
}

/* Hero highlight word — violet in all heroes */
.ng .aud-hero__h em,
.ng .sub-hero__title em,
.ng .pg-hero__title em,
.ng .svc-hero .nga-hero__h em,
.ng .blog-hero .pg-hero__title em,
.ng .cs-hero__h em { color: var(--ink) !important; font-style: italic; }
.ng .sub-hero__title .hl,
.ng .pg-hero__title .hl,
.ng .aud-hero__h .hl,
.ng .svc-hero .nga-hero__h .hl,
.ng .cs-hero__h .hl { color: var(--violet) !important; }

/* Hero meta dots — coral (matches homepage) */
.ng .pg-hero__meta .dot,
.ng .aud-hero__meta .aud-dot,
.ng .sub-hero__wrap .dot {
  background: var(--coral) !important;
  color: var(--coral) !important;
  box-shadow: 0 0 0 3px rgba(43,89,255,0.22);
}

/* Hero eyebrows — violet accent bar */
.ng .pg-hero__eyebrow::before,
.ng .aud-hero .ng-eyebrow::before,
.ng .sub-hero .ng-eyebrow::before,
.ng .blog-hero .ng-eyebrow::before { background: var(--violet) !important; }

/* =============================================================================
   HERO ASIDE CARDS — subtle tonal glow so the right-side visuals feel
   considered, matching the richness of the hero sweep.
   ========================================================================== */

/* Audit report mockup — violet top glow + coral bottom corner */
.ng .aud-hero__mock {
  background:
    radial-gradient(60% 40% at 100% 100%, rgba(43,89,255,0.14) 0%, rgba(43,89,255,0) 70%),
    linear-gradient(145deg, var(--sand) 0%, var(--bone) 60%, var(--paper) 100%) !important;
  border: 1px solid rgba(43,89,255,0.18) !important;
}
.ng .aud-hero__mock::before {
  border-top-color: var(--violet) !important;
  border-left-color: var(--violet) !important;
}
.ng .aud-hero__mock::after {
  border-bottom-color: var(--coral) !important;
  border-right-color: var(--coral) !important;
}

/* Dev page hero screen — violet edge, coral glow */
.ng .dev-hero__screen {
  border: 1px solid rgba(43,89,255,0.2) !important;
  box-shadow:
    0 24px 48px rgba(43,89,255,0.10),
    0 1px 0 rgba(43,89,255,0.35) !important;
}

/* Maintenance hero report — coral warm accent */
.ng .mnt-hero__report {
  border: 1px solid rgba(43,89,255,0.25) !important;
  box-shadow: 0 24px 48px rgba(43,89,255,0.10) !important;
}

/* Migration split card — already uses --perf/--sec under the hood; apply
   the same two-color contrast treatment the homepage uses on dual-path. */
.ng .mig-split {
  background:
    linear-gradient(180deg, rgba(43,89,255,0.05) 0%, rgba(43,89,255,0) 100%),
    #FFFFFF !important;
}

/* =============================================================================
   ALTERNATING SECTION RHYTHM — apply a warm-cream breather to CONTENT
   sections on the pages where they currently sit flat on white. Selectors
   match the real JSX markup (verified via grep).
   ========================================================================== */

/* Section rhythm: use cream ONLY for a single breather per page (not
   alternating, not on every other section). Default is white. Sub-pages
   that already use .svc-sec--tint are handled by the softer gradient
   above, so no extra cream is added here. */

/* ABOUT — single cream breather on principles only (where stays white) */
.ng .about-principles { background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%) !important; }

/* COMMUNITY — no forced cream; comm-intro and comm-events both white.
   .comm-upcoming already has its own dark aubergine treatment. */

/* CAREERS — single cream breather on roles only */
.ng .careers-roles { background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%) !important; }

/* =============================================================================
   TWO-CARD CONTRAST TREATMENTS — apply the dual-path "owner vs agency"
   coral/violet pattern to inner pages that have two-card layouts.
   ========================================================================== */

/* CASE STUDY before/after cards — coral (before) vs violet (after) */
.ng .cs-ba__card:nth-child(1),
.ng .cs-ba__body--before {
  background:
    linear-gradient(180deg, rgba(43,89,255,0.14) 0%, rgba(43,89,255,0.02) 55%, #FFFFFF 100%),
    #FFFFFF !important;
  border-color: rgba(43,89,255,0.35) !important;
}
.ng .cs-ba__card:nth-child(2),
.ng .cs-ba__body--after {
  background:
    linear-gradient(180deg, rgba(43,89,255,0.12) 0%, rgba(43,89,255,0.02) 55%, #FFFFFF 100%),
    #FFFFFF !important;
  border-color: rgba(43,89,255,0.35) !important;
}
.ng .cs-ba__head--before { background: rgba(43,89,255,0.18) !important; color: var(--coral-ink) !important; }
.ng .cs-ba__head--after { background: rgba(43,89,255,0.14) !important; color: var(--violet-ink) !important; }

/* MIGRATION split "from / to" — from = coral, to = violet */
.ng .mig-split__from {
  background: linear-gradient(180deg, rgba(43,89,255,0.12) 0%, rgba(43,89,255,0.02) 100%), #FFFFFF !important;
  border-color: rgba(43,89,255,0.3) !important;
}
.ng .mig-split__from .mig-split__lab {
  color: var(--coral-ink) !important;
  background: #FFFFFF !important;
  border-color: rgba(43,89,255,0.25) !important;
}

/* CONTACT page — contact-aside blocks (Direct / Social / Office) get
   alternating violet/coral accent bars to add rhythm to the sidebar. */
.ng .contact-aside__block:nth-child(odd) { border-left: 3px solid var(--violet) !important; padding-left: 20px; margin-left: -23px; }
.ng .contact-aside__block:nth-child(even) { border-left: 3px solid var(--coral) !important; padding-left: 20px; margin-left: -23px; }

/* COMMUNITY upcoming cards — alternate coral/violet border on hover */
.ng .comm-upcoming__card:nth-child(odd):hover { border-color: var(--violet) !important; box-shadow: 0 12px 30px rgba(43,89,255,0.10) !important; }
.ng .comm-upcoming__card:nth-child(even):hover { border-color: var(--coral) !important; box-shadow: 0 12px 30px rgba(43,89,255,0.10) !important; }

/* CAREERS principles — alternate accent border color so the three-item list
   feels rhythmic (real selector: .careers-principle, not .careers-position) */
.ng .careers-principle:nth-child(odd) { border-left: 3px solid var(--violet) !important; padding-left: 24px; }
.ng .careers-principle:nth-child(even) { border-left: 3px solid var(--coral) !important; padding-left: 24px; }

/* BLOG featured post — subtle dual tint on the hero card */
.ng .blog-featured__card {
  background:
    radial-gradient(60% 40% at 100% 100%, rgba(43,89,255,0.08) 0%, rgba(43,89,255,0) 70%),
    radial-gradient(40% 40% at 0% 0%, rgba(43,89,255,0.06) 0%, rgba(43,89,255,0) 65%),
    #FFFFFF !important;
  border-color: rgba(43,89,255,0.18) !important;
}
.ng .blog-featured__card:hover { border-color: var(--violet) !important; box-shadow: 0 12px 30px rgba(43,89,255,0.10) !important; }

/* =============================================================================
   SERVICE LIST CARDS — inject two-color rhythm on .svc-list__item rows
   (Services page central list) so the vertical flow has energy.
   ========================================================================== */
.ng .svc-list__item:nth-child(odd) { border-left: 3px solid var(--violet) !important; }
.ng .svc-list__item:nth-child(even) { border-left: 3px solid var(--coral) !important; }

/* =============================================================================
   IMAGE PLACEHOLDERS — give default placeholder blocks a soft dual tint so
   they don't read as gray rectangles in the richer Royal context.
   ========================================================================== */
.ng .img-placeholder--tone-bone,
.ng .img-placeholder--tone-sand {
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(43,89,255,0.20) 0%, rgba(43,89,255,0) 65%),
    radial-gradient(50% 50% at 0% 0%, rgba(43,89,255,0.15) 0%, rgba(43,89,255,0) 60%),
    var(--bone) !important;
}

/* =============================================================================
   END page-level richness
   ========================================================================== */