/* NXT GEN WEB — service-page mobile hero readability fix, Nov 8 2026.
   Decorative circles must never overlap headings or interactive content.
   Applies to PPC, Hosting, SEO, specialist services and the custom social/logo/AI/video pages. */

/* PPC and Hosting shared hero previously painted its huge ring above the copy.
   Isolate the whole section and paint the ring behind its content. */
body.ngs-family .ngm .nsf-hero {
  position: relative;
  isolation: isolate;
}
body.ngs-family .ngm .nsf-hero::before {
  z-index: -1;
  pointer-events: none;
  opacity: .47;
}
body.ngs-family .ngm .nsf-hero > .ngm-shell {
  position: relative;
  z-index: 1;
}

/* Specialist pages and custom service templates share the same rule:
   any decorative ring remains behind the copy, never above it. */
body.ngs-family .nsu .nsu-hero,
body.ngs-family #ngx-main .ngx-hero,
body.ngs-family .ngm-seo .nseo-hero {
  isolation: isolate;
}
body.ngs-family .nsu .nsu-hero::before,
body.ngs-family #ngx-main .ngx-hero::before,
body.ngs-family .ngm-seo .nseo-hero::before {
  z-index: -1;
  pointer-events: none;
}
body.ngs-family .nsu .nsu-hero > .nsu-shell,
body.ngs-family #ngx-main .ngx-hero > .ngx-shell,
body.ngs-family .ngm-seo .nseo-hero > .ngm-shell {
  position: relative;
  z-index: 1;
}

/* At phone/tablet sizes, remove the oversized OUTER rings entirely:
   retain the intentionally animated panels within the graphic on the right.
   This prevents any wash-out or lettering obscuration on mobile. */
@media (max-width: 850px) {
  body.ngs-family .ngm .nsf-hero::before,
  body.ngs-family .nsu .nsu-hero::before,
  body.ngs-family #ngx-main .ngx-hero::before,
  body.ngs-family .ngm-seo .nseo-hero::before {
    display: none !important;
    content: none !important;
  }
  body.ngs-family .ngm .nsf-hero-grid,
  body.ngs-family .nsu .nsu-hero-grid,
  body.ngs-family #ngx-main .ngx-hero-grid {
    min-width: 0;
  }
  body.ngs-family .ngm .nsf-hero-copy,
  body.ngs-family .nsu .nsu-hero-copy,
  body.ngs-family #ngx-main .ngx-hero-grid > div:first-child {
    min-width: 0;
    position: relative;
    z-index: 2;
  }
}

/* Extra-narrow screens: avoid oversized headings or horizontal overflow. */
@media (max-width: 420px) {
  body.ngs-family .ngm .nsf-hero h1 {
    font-size: clamp(32px, 9.4vw, 42px);
    line-height: 1.08;
    overflow-wrap: break-word;
  }
  body.ngs-family .nsu .nsu-hero h1,
  body.ngs-family #ngx-main .ngx-hero h1 {
    overflow-wrap: break-word;
  }
}