/* Keep page surfaces and type in the same color system. */
html.halloween-theme body .creativeoProcessPage > [class*="principleSection"],
html.halloween-theme body .creativeoProcessPage > [class*="collaborationSection"] {
  color: #211d18 !important;
  background: #f5f2ed !important;
}

html.halloween-theme body .creativeoProcessPage > [class*="rhythmSection"] {
  color: #211d18 !important;
  background: #e8e0d5 !important;
}

.creativeoProcessPage [class*="rhythmVisual"] img {
  object-position: center top !important;
}

/* Remove the oversized legacy footer ring and make small footer copy readable. */
footer.footer-v7::before {
  content: none !important;
  display: none !important;
}

.footer-v7 .footer-v7-brand > p,
.footer-v7 .footer-v7-directory nav a {
  color: #d1ccd1 !important;
}

.footer-v7 .footer-v7-bottom,
.site-footer .footer-bottom {
  color: #b9b6bf !important;
}

.site-footer .footer-brand > p {
  color: #c6cbd4 !important;
}

/* Give the Insights index the same balanced split hero as Services. */
#main-content .index-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(36px, 5vw, 76px);
  padding-top: clamp(140px, 14vw, 180px) !important;
  padding-bottom: clamp(72px, 7vw, 104px);
  color: #f8f8fa;
}

#main-content .index-hero .index-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  margin: 0 !important;
}

#main-content .index-hero .index-heading > div,
#main-content .index-hero .index-intro {
  width: 100%;
  min-width: 0;
}

#main-content .index-hero .index-heading h1 {
  margin: 26px 0 0;
}

#main-content .index-hero .index-intro {
  margin-top: 28px;
}

html body :is(main, #main-content) .index-hero .index-intro p:not(#type-exception):not(#type-exception):not(#type-exception) {
  max-width: 46ch;
  margin: 0;
  color: #d2d2d9 !important;
  text-align: left !important;
}

#main-content .index-hero .index-intro .text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  margin-top: 26px;
  color: #e8c366;
}

#main-content .index-hero .insights-hero-image {
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(236, 194, 100, 0.26);
  border-radius: 24px;
  background: #14161b;
  box-shadow: 12px 12px 0 rgba(133, 28, 35, 0.72);
}

#main-content .index-hero .insights-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center top;
}

/* Center each insight's introduction, image, and reading column. */
#main-content .article-hero,
main .article-hero {
  text-align: center;
}

.article-hero .breadcrumb,
.article-hero .article-meta {
  justify-content: center;
}

html body :is(main, #main-content) .article-hero h1:not(#type-exception):not(#type-exception):not(#type-exception) {
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center;
}

html body :is(main, #main-content) .article-hero p:not(#type-exception):not(#type-exception):not(#type-exception) {
  margin-right: auto;
  margin-left: auto;
  text-align: center !important;
}

.article-hero .cover {
  width: min(100%, 860px);
  max-width: 860px !important;
  margin: 38px auto 0 !important;
}

.article-hero .cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none !important;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
}

.service-insight .reading-layout {
  width: min(100% - 40px, 820px);
  max-width: 820px;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 28px;
  margin-right: auto;
  margin-left: auto;
}

.service-insight .reading-layout .article-aside {
  position: static;
  width: 100%;
  min-width: 0;
}

.service-insight .reading-layout .article-toc {
  max-width: none;
}

.service-insight .reading-layout .article-content {
  width: 100%;
  min-width: 0;
}

@media (max-width: 900px) {
  #main-content .index-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 120px !important;
    padding-bottom: 64px;
  }

  #main-content .index-hero .insights-hero-image {
    max-width: 760px;
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  #main-content .index-hero {
    gap: 30px;
    padding-top: 110px !important;
    padding-bottom: 52px;
  }

  #main-content .index-hero .index-heading h1 {
    margin-top: 20px;
  }

  #main-content .index-hero .insights-hero-image {
    aspect-ratio: 3 / 2;
    border-radius: 18px;
    box-shadow: 6px 6px 0 rgba(133, 28, 35, 0.72);
  }

  .article-hero .article-meta {
    justify-content: center;
    gap: 10px 16px;
  }

  .article-hero .cover {
    margin-top: 28px !important;
  }

  .service-insight .reading-layout {
    width: min(100% - 32px, 820px);
  }
}