/* =========================================================
   5g-core.css — Private 5G Core ("Simplified for Enterprise IT")
   Reuses shared header/footer, .container, .eyebrow, .btn, and
   the .sp-hero pattern from service-providers.css.
   ========================================================= */

/* Breadcrumb flush under the sticky header */
.sp-breadcrumb {
  top: 0;
}

/* Hero overlay — two-direction navy gradient over the tower image */
.core-hero .sp-hero__overlay {
  background:
    linear-gradient(108deg, rgba(7, 9, 58, 0.85) 1%, rgba(7, 9, 58, 0) 62%),
    linear-gradient(211deg, rgba(7, 9, 58, 0) 30%, rgba(7, 9, 58, 0.9) 92%);
}

/* Cyan eyebrow variant (on dark backgrounds) */
.eyebrow--cyan {
  color: #39cdd8;
}

/* Shared "The result" note */
.result-note {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.result-note__label {
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  color: #2B3990 !important;
  font-size: 16px;
}
.result-note__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: #000;
}

/* -----------------------------------------------------
   SECTION: Intro band
   ----------------------------------------------------- */
/* Intro card overlaps upward into the hero (straddles the hero bottom edge) */
.core-intro {
  position: relative;
  z-index: 3;
  margin-top: -80px;
  padding: 0 0 40px;
}
.core-intro .container {
  display: flex;
  justify-content: center;
}
.core-intro__text {
  background: #ebf0f4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 40px;
  margin: 0;
  max-width: 1106px;
  text-align: center;
  font-size: 20px;
  line-height: 1.6;
  color: #000;
}

/* -----------------------------------------------------
   SECTION: The Challenge
   ----------------------------------------------------- */
.challenge {
  background: #fff;
  padding: 61px 0 110px;
}
.challenge__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  margin-bottom: 50px;
}
.challenge__title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.challenge__title strong { font-weight: 600; }

.challenge__grid {
  display: grid;
  grid-template-columns: minmax(0, 605px) minmax(0, 1fr);
  gap: 24px;
  align-items: end;
}
.challenge__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.challenge__copy p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: #000;
}
.challenge__copy .result-note { margin-top: 4px; }
.challenge__media {
  height: 355px;
  border-radius: 8px;
  overflow: hidden;
}
.challenge__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -----------------------------------------------------
   SECTION: The Solution (dark left + center image + light right)
   ----------------------------------------------------- */
.solution {
  position: relative;
  background: #eff2f7;
  isolation: isolate;
}
.solution__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 720px;
  max-width: 1440px;
  margin: 0 auto;
}
.solution__left {
  position: relative;
  flex: 0 0 627px;
  display: flex;
  align-items: flex-start;
}
.solution__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Bleed the photo to the viewport's left edge, cover-fit across the band.
     Explicit width (column + gutter) is required because <img> is a replaced
     element and won't stretch to fill both left/right. */
  right: 0;
  width: calc(100% + max(0px, (100vw - 1440px) / 2));
  max-width: none; /* override the global img max-width:100% so it can bleed */
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.solution__left::after {
  content: "";
  position: absolute;
  inset: 0;
  left: min(0px, calc((1440px - 100vw) / 2));
  background: rgba(24, 0, 86, 0.45);
  z-index: -1;
}
.solution__left-inner {
  padding: 100px var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.solution__title {
  font-size: 60px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.solution__tagline {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}
.solution__media {
  position: absolute;
  left: 466px;
  top: 37px;
  width: 304px;
  height: 643px;
  border-radius: 8px;
  overflow: hidden;
  z-index: 2;
}
.solution__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.solution__right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
  padding: 100px var(--container-pad) 100px 186px;
}
.solution__right p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: #000;
}

/* -----------------------------------------------------
   SECTION: Three Reasons
   ----------------------------------------------------- */
.reasons {
  background: #fff;
  padding: 100px 0;
}
.reasons__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  margin-bottom: 40px;
}
.reasons__title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.reasons__title strong { font-weight: 600; }

.reason-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.reason-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 14px 41.25px rgba(0, 0, 0, 0.05);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.reason-card__icon { width: 40px; height: 40px; display: block; }
.reason-card__icon img { width: 40px; height: 40px; display: block; }
.reason-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #181819;
  margin: 0;
}
.reason-card__body {
  font-size: 18px;
  line-height: 1.4;
  color: #181819;
  margin: 0;
}
.reasons__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* -----------------------------------------------------
   SECTION: Architecture
   ----------------------------------------------------- */
.arch {
  background: #F6F6F6;
  padding: 60px 0 80px;
}
.arch__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}
.arch__headline {
  display: grid;
  grid-template-columns: minmax(0, 598px) minmax(0, 1fr);
  gap: 39px;
  align-items: start;
}
.arch__title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.arch__title strong { font-weight: 600; }
.arch__intro {
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  margin: 0;
}
.arch__diagram {
  margin: 0 0 24px;
}
.arch__diagram img {
  width: 100%;
  height: auto;
  display: block;
}
.arch__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.arch-card {
  border: 1px solid #dadfe6;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.arch-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
}
.arch-card__lead { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.arch-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.45px;
  color: #2b3990;
  margin: 0;
}
.arch-card__body {
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  margin: 0;
}
.arch-nf {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.arch-nf__group { display: flex; flex-direction: column; gap: 12px; }
.arch-nf__group:first-child { flex: 0 1 auto; min-width: 0; max-width: 380px; }
.arch-nf__group:last-child { flex: 1 1 auto; min-width: 0; }
.arch-nf__label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: #404242;
}
.arch-nf__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.arch-nf__pills li {
  font-size: 14px;
  font-weight: 500;
  color: #10304b;
  padding: 7px 13px;
  border-radius: 10px;
}
.arch-nf__pills--cp li {
  background: rgba(146, 211, 53, 0.1);
  border: 1px solid rgba(146, 211, 53, 0.3);
}
.arch-nf__pills--up li {
  background: rgba(57, 205, 216, 0.1);
  border: 1px solid rgba(57, 205, 216, 0.3);
  color: #404242;
}

/* -----------------------------------------------------
   SECTION: Operational Models (dark band + cards overflow)
   ----------------------------------------------------- */
.op-models {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  padding: 95px 0 80px;
}
.op-models__bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 582px;
  object-fit: cover;
  z-index: -2;
}
.op-models::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 582px;
  background: rgba(24, 0, 86, 0.4);
  z-index: -1;
}
.op-models__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}
.op-models__headline {
  display: grid;
  grid-template-columns: minmax(0, 555px) minmax(0, 1fr);
  gap: 88px;
  align-items: start;
}
.op-models__title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.op-models__intro {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}
.op-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.op-card {
  background: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.07);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.op-card__badge {
  align-self: flex-start;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  padding: 4px 10px;
  border-radius: 4px;
}
.op-card__badge--green { background: #92d335; }
.op-card__badge--cyan { background: #39cdd8; }
.op-card__badge--yellow { background: #ffde1f; }
.op-card__kicker {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #2b3990;
}
.op-card__title {
  margin: -8px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
  min-height: 56px;
}
.op-card__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  flex: 1 1 auto;
  min-height: 0;
}
.op-card__best {
  margin-top: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 17px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 110px;
}
.op-card__best-label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: #5b6770;
}
.op-card__best-text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
}

/* -----------------------------------------------------
   SECTION: Outcomes (dark left + light grid right)
   ----------------------------------------------------- */
.outcomes {
  background: #eff2f7;
}
.outcomes__inner {
  display: flex;
  align-items: stretch;
  min-height: 720px;
  max-width: 1440px;
  margin: 0 auto;
}
.outcomes__left {
  position: relative;
  flex: 0 0 497px;
  display: flex;
  align-items: flex-start;
  isolation: isolate;
}
.outcomes__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Bleed the photo to the viewport's left edge, cover-fit across the band.
     Explicit width (column + gutter) is required because <img> is a replaced
     element and won't stretch to fill both left/right. */
  right: 0;
  width: calc(100% + max(0px, (100vw - 1440px) / 2));
  max-width: none; /* override the global img max-width:100% so it can bleed */
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.outcomes__left::after {
  content: "";
  position: absolute;
  inset: 0;
  left: min(0px, calc((1440px - 100vw) / 2));
  background: linear-gradient(180deg, #14004e 9%, rgba(20, 0, 78, 0.3) 100%);
  z-index: -1;
}
.outcomes__left-inner {
  padding: 100px var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.outcomes__title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  max-width: 367px;
}
.outcomes__right {
  flex: 1 1 0;
  min-width: 0;
  padding: 100px var(--container-pad) 100px 24px;
  display: flex;
  align-items: center;
}
.outcome-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 25px;
}
.outcome-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.outcome-item__icon { width: 40px; height: 40px; display: block; }
.outcome-item__icon img { width: 40px; height: 40px; display: block; }
.outcome-item__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
  margin: 0;
}
.outcome-item__body {
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  margin: 0;
}

/* -----------------------------------------------------
   SECTION: CTA banner (rounded panel)
   ----------------------------------------------------- */
.final-cta {
  background: #fff;
  padding: 72px 0;
}
.final-cta__panel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.final-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: blur(7px);
  transform: scale(1.08);
}
.final-cta__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.1) 95%);
  z-index: -1;
}
.final-cta__inner {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 60px 24px;
  color: #fff;
}
.final-cta__title {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.final-cta__copy {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}
.final-cta__actions { margin-top: 4px; }

/* -----------------------------------------------------
   Responsive
   ----------------------------------------------------- */
@media (max-width: 1040px) {
  /* Hero is short on mobile — drop the overlap so the intro card sits
     below the hero instead of covering its CTA button. */
  .core-intro { margin-top: 0; }

  .challenge__grid,
  .arch__headline,
  .op-models__headline {
    grid-template-columns: 1fr;
  }
  .reason-cards,
  .op-cards { grid-template-columns: 1fr; }
  .arch__cards { grid-template-columns: 1fr; }
  .arch-card--wide { flex-direction: column; }
  .arch-nf { flex-direction: column; }
  .solution__inner { flex-direction: column; }
  .solution__left { flex-basis: auto; }
  .solution__media { display: none; }
  .solution__right { padding-left: var(--container-pad); }
  .outcomes__inner { flex-direction: column; }
  .outcomes__left { flex-basis: auto; }
  .outcomes__right { padding-left: var(--container-pad); }
  .outcome-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .challenge__title,
  .reasons__title,
  .arch__title,
  .op-models__title,
  .outcomes__title { font-size: 30px; }
  .solution__title { font-size: 44px; }
  .final-cta__title { font-size: 30px; }
}

/* Mobile: left-align the tag (eyebrow) + section heading. */
@media (max-width: 600px) {
  .challenge__head, .reasons__head { align-items: flex-start; text-align: left; }
}