/* =========================================================
   builder.css — Builder page specific styles
   Applies all Figma proportions exactly; bg colors extend to viewport edges
   ========================================================= */

/* -----------------------------------------------------
   SECTION: Hero — builder-specific tuning to match Figma node 6338:13653.
   The shared sp-hero already covers the gray breadcrumb, 48px title and 16px
   lede; these scoped overrides set the exact content widths and gaps.
   ----------------------------------------------------- */
.sp-hero--builder .sp-breadcrumb {
  top: 0;
  font-size: 16px;
}

.sp-hero--builder .sp-hero__copy {
  max-width: 717px;
  gap: 40px;
}

.sp-hero--builder .sp-hero__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp-hero--builder .sp-hero__title {
  max-width: 575px;
}

/* -----------------------------------------------------
   SECTION: Strategic Reality (4 cards over dark band)
   ----------------------------------------------------- */
.strategy {
  position: relative;
  padding: 100px 0 85px;
  background: #fff;
  isolation: isolate;
}

/* Eyebrow spans full width above; title + lede form a two-column row below,
   top-aligned — matches Figma node 6338:13457. */
.strategy__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 86px;
}

.strategy__head-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 50px;
  align-items: start;
}

.strategy__title {
  font-size: 40px;
  line-height: 1.2;
  color: #000;
  font-weight: 400;
  margin: 0;
}

.strategy__lede {
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  margin: 0;
}

.strategy__cards-wrap {
  position: relative;
}

/* Dark band under the bottom half of the cards — extends full viewport
   width (not just the container) so the navy color reaches both edges. */
.strategy__band {
  position: absolute;
  top: 131px;
  bottom: -85px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  overflow: hidden;
}

.strategy__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strategy__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(24, 0, 86, 0.4);
  mix-blend-mode: multiply;
}

.strategy__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  position: relative;
}

.sr-card {
  background: #fff;
  filter: drop-shadow(0 -2px 7.5px rgba(0, 0, 0, 0.07));
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sr-card__icon {
  width: 24px;
  height: 24px;
}

.sr-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sr-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
  margin: 0;
}
.sr-card__title--blue { color: #1c62cb; }

.sr-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sr-card__list li {
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.sr-card__list li:last-child { border-bottom: none; padding-bottom: 0; }

.sr-card__foot {
  padding-top: 17px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 16px;
  font-weight: 600;
  color: #1c62cb;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: auto;
}

/* Card 4 ("Business outcome") has no footer text — no divider in Figma. */
.sr-card__foot:empty { border-top: none; padding-top: 0; }

/* Connectors between cards (+ + =) sit on top of dark band */
.strategy__arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Connector centre sits 132px below the card top — exactly on the dark band's
   top edge (band starts 131px down), per Figma. */
.strategy__arrow {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #39cdd8;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 132px;
  transform: translate(-50%, -50%);
  color: #fff;
}

.strategy__arrow svg { width: 24px; height: 24px; }

/* -----------------------------------------------------
   SECTION: SHIFT (light gray, image left + checklist right)
   ----------------------------------------------------- */
.shift {
  background: #f6f6f6;
  padding: 100px 0;
}

.shift__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-bottom: 31px;
}

.shift__title {
  font-size: 40px;
  line-height: 1.2;
  color: #000;
  font-weight: 400;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.shift__title strong { font-weight: 600; }

.shift__grid {
  display: grid;
  grid-template-columns: minmax(0, 503px) minmax(0, 619px);
  gap: 72px;
  align-items: stretch;
}

.shift__photo {
  border-radius: 8px;
  overflow: hidden;
  min-height: 488px;
}

.shift__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shift__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.shift__lede {
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  margin: 0;
}

.shift__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shift__checklist li {
  border-bottom: 1px solid #39cdd8;
  padding: 17px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
}

.shift__check-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 5px;
}

/* -----------------------------------------------------
   SECTION: Built For The Ecosystem (dark, 3 image cards)
   ----------------------------------------------------- */
.ecosystem {
  position: relative;
  padding: 100px 0;
  isolation: isolate;
}

.ecosystem__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.ecosystem__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ecosystem__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(24, 0, 86, 0.4);
  mix-blend-mode: multiply;
}

.ecosystem__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-bottom: 60px;
}

.ecosystem__title {
  font-size: 40px;
  line-height: 1.2;
  color: #fff;
  font-weight: 400;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.ecosystem__title strong { font-weight: 600; }

.ecosystem__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.eco-card {
  background: #fff;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.05));
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.eco-card__photo {
  height: 215px;
  border-radius: 0;
  overflow: hidden;
}

.eco-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eco-card__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.4;
  color: #2b3990;
  margin: 0;
  white-space: nowrap;
}

.eco-card__copy {
  font-size: 18px;
  line-height: 1.5;
  color: #000;
  margin: 0;
}

/* -----------------------------------------------------
   SECTION: CORE CAPABILITIES (image left + accordion right)
   Reuses the .help-card pattern from service-providers.css
   ----------------------------------------------------- */
.capabilities {
  background: #fff;
  padding: 60px 0;
}

.capabilities__grid {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 611px);
  gap: 90px;
  align-items: start;
}

.capabilities__left {
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.capabilities__title {
  font-size: 40px;
  line-height: 1.2;
  color: #000;
  font-weight: 400;
  margin: 0;
}

.capabilities__title strong { font-weight: 600; }

.capabilities__photo {
  border-radius: 8px;
  overflow: hidden;
  height: 416px;
}

.capabilities__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Capabilities accordion — 24px titles, darker dividers, first item aligned
   with the title. Rows are tighter than the Figma node (8px gaps, reduced
   padding) so the section height stays close to the image column. Scoped to
   .capabilities so the shared service-providers accordion is unaffected. */
.capabilities .help__accordion {
  gap: 20px;
  padding-top: 0;
  margin-top: 0;
  /* Stretch to the left column's full height and distribute the cards so the
     accordion's top and bottom line up with the left section. */
  align-self: stretch;
  justify-content: space-between;
}

.capabilities .help-card__head {
  padding: 12px 20px;
}

.capabilities .help-card__body-inner {
  padding-bottom: 16px;
}

.capabilities .help-card,
.capabilities .help-card:last-child {
  border-bottom-color: rgba(0, 0, 0, 0.33);
  background: transparent;
  box-shadow: none;
}
.capabilities .help-card:not(.help-card--open) {
  box-shadow: none;
  background: transparent;
}

.capabilities .help-card:not(.help-card--open) .help-card__head {
  opacity: 0.63;
}

.capabilities .help-card__title {
  font-size: 24px;
}

.capabilities .help-card__caret svg {
  width: 24px;
  height: 24px;
  display: block;
}

.capabilities .help-card__body p {
  font-size: 16px;
  line-height: 1.4;
  color: #000;
}

/* -----------------------------------------------------
   SECTION: Business Outcomes (left text + right dark image)
   ----------------------------------------------------- */
.outcomes {
  position: relative;
  background: #f9f9f9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 760px;
}

.outcomes__left {
  padding: 53px max(40px, calc(50% - 720px + 80px)) 53px max(40px, calc(50% - 720px + 80px));
  display: flex;
  flex-direction: column;
  gap: 27px;
  max-width: 720px;
  justify-self: end;
  width: 100%;
}

.outcomes__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.outcomes__title {
  font-size: 40px;
  line-height: 1.2;
  color: #000;
  font-weight: 400;
  margin: 0;
  max-width: 556px;
}

.outcomes__title strong { font-weight: 600; }

.outcomes__lede {
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  margin: 0;
  max-width: 556px;
}

.outcomes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.outcome-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.outcome-item__icon {
  width: 23px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outcome-item__icon img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.outcome-item__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.outcome-item__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: #000;
  margin: 0;
}

.outcome-item__copy {
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  margin: 0;
}

.outcomes__right {
  position: relative;
  overflow: hidden;
  background: #0a023b;
}

.outcomes__right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.outcomes__right::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 0, 78, 0.9) 0%, rgba(31, 13, 84, 0) 76.7%);
}

/* Hide visually but keep for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------
   SECTION: INSIGHTS (3 blog cards)
   ----------------------------------------------------- */
.insights {
  background: #f6f6f6;
  padding: 59px 0 75px;
}

.insights__head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 36px;
}

.insights__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.blog-card {
  background: rgba(255, 255, 255, 0.2);
  border-bottom: 5px solid;
  border-radius: 4px;
  padding: 12px;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 32.5px rgba(0, 0, 0, 0.04);
}

.blog-card--green  { border-bottom-color: #92d335; }
.blog-card--red    { border-bottom-color: #ff0000; }
.blog-card--cyan   { border-bottom-color: #39cdd8; }

.blog-card__tag {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #a3a3a3;
  margin: 0 0 12px;
}

.blog-card__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #a3a3a3;
  border-radius: 50%;
  display: inline-block;
}

.blog-card__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  color: #181819;
  margin: 0;
  max-width: 360px;
}

.blog-card__more {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 16px;
  color: #303d48;
  text-decoration: none;
  margin-top: auto;
  transition: font-weight 0.2s ease, color 0.2s ease;
}

.blog-card:hover .blog-card__more,
.blog-card__more:hover {
  font-weight: 700;
  color: #000;
}

.blog-card__chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* -----------------------------------------------------
   SECTION: CTA banner (Private 5G is Deployed...)
   ----------------------------------------------------- */
.builder-cta {
  padding: 100px 0;
  background: #fff;
}

.builder-cta__panel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  padding: 80px 40px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  min-height: 446px;
  justify-content: center;
}

/* Extend the background beyond the panel so the 5.8px blur's soft edges fall
   outside the visible (overflow-clipped) area — matches Figma node 6338:13433. */
.builder-cta__bg {
  position: absolute;
  inset: -24px;
  z-index: -1;
}

.builder-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5.8px);
}

.builder-cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 95%);
}

.builder-cta__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.builder-cta__title {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  max-width: 1016px;
}

.builder-cta__copy {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  max-width: 968px;
}

.builder-cta__actions {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

/* -----------------------------------------------------
   MOBILE / TABLET RESPONSIVE
   ----------------------------------------------------- */
@media (max-width: 1024px) {
  .strategy__head-cols { grid-template-columns: 1fr; gap: 20px; }
  .strategy__cards { grid-template-columns: 1fr; gap: 24px; }
  .strategy__arrows { display: none; }
  .strategy__band { inset: 0; }

  .shift__title { white-space: normal; }
  .shift__grid { grid-template-columns: 1fr; gap: 40px; }
  .shift__photo { min-height: 280px; }

  .ecosystem__title { white-space: normal; }
  .eco-card__title { white-space: normal; }
  .ecosystem__grid { grid-template-columns: 1fr; gap: 24px; }

  .capabilities__grid { grid-template-columns: 1fr; gap: 40px; }
  .capabilities__photo { height: 320px; }

  .outcomes {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .outcomes__left { padding: 60px 32px; max-width: none; justify-self: stretch; }
  .outcomes__right { min-height: 320px; }

  .insights__grid { grid-template-columns: 1fr; }
  .blog-card { height: auto; min-height: 240px; }
}

@media (max-width: 640px) {
  .strategy { padding: 60px 0; }
  .strategy__title { font-size: 28px; }

  .shift { padding: 60px 0; }
  .shift__title { font-size: 28px; }

  .ecosystem { padding: 60px 0; }
  .ecosystem__title { font-size: 28px; }

  .capabilities { padding: 40px 0; }
  .capabilities__title { font-size: 28px; }

  .outcomes__title { font-size: 28px; }

  .insights { padding: 40px 0; }
  .insights__head { gap: 16px; }
  .blog-card__title { font-size: 20px; }

  .builder-cta { padding: 60px 0 40px; }
  .builder-cta__panel {
    padding: 60px 20px;
    border-radius: 12px;
    min-height: auto;
  }
  .builder-cta__title { font-size: 28px; }
}