/* Shared layout safeguards. Load after the page styles so every route uses the
   same breathing room and reflows before its content becomes cramped. */
:root {
  --layout-gap: clamp(2rem, 4vw, 4rem);
  --card-gap: clamp(1.5rem, 2.5vw, 2rem);
}

main, .site-footer {
  container: page-layout / inline-size;
}

/* Let grid/flex children shrink inside their tracks. Long text can wrap as a
   last resort, without clipping it or changing the font size to make it fit. */
main :where(div, section, article, figure, blockquote),
.footer-shell, .footer-shell :where(div, form) { min-width: 0; }
main, .footer-shell { overflow-wrap: anywhere; }

/* Capability names wrap at spaces. Size them to the usable card width so a
   translated word stays intact, including in the five-column desktop strip. */
.impact-grid article { container-type: inline-size; }
.impact-grid strong {
  font-size: clamp(1.125rem, 16cqi, 2.6rem);
  line-height: 1.35;
}
.impact-grid :where(strong, span) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
:where(.button, .text-link, .card-link, .services-featured-link, .solution-link) {
  max-width: 100%;
  white-space: normal;
}

.hero-grid, .services-hero, .cta-panel, .about-cta, .services-cta {
  column-gap: var(--layout-gap);
}
.about-hero-grid, .solutions-hero, .insights-hero {
  column-gap: var(--layout-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
.services-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services-hero-art { margin-top: 0; }
.eyebrow span, .mini-label > span { flex-shrink: 0; }

/* These two-part sections wrap according to their usable width, including
   padding and gap, rather than waiting for a device-specific breakpoint. */
.cta-panel, .about-cta, .services-cta, .solutions-cta, .footer-main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gap);
}
.cta-panel > *, .about-cta > *, .services-cta > *,
.solutions-cta > *, .footer-main > * {
  flex: 1 1 22rem;
  min-width: 0;
  max-width: 100%;
}
.about-cta-art, .services-cta > img { margin-inline: auto; }
.services-cta > img { flex-grow: 0; }
.solutions-cta > div { width: auto; }
.solutions-cta > img {
  position: static;
  width: min(100%, 30rem);
  max-width: 100%;
  height: auto;
  transform: none;
  margin: 0 auto;
  flex-grow: 0;
}
.solutions-cta { min-height: 0; }
.newsletter-form > div {
  display: flex;
  flex-wrap: wrap;
}
.newsletter-form input { flex: 1 1 11rem; min-width: 0; }
.newsletter-form .button { flex: 1 1 auto; }

.services-featured { container: featured / inline-size; }
.services-featured-copy { min-width: 0; flex: 1; }
@container featured (width < 54rem) {
  .services-featured-copy { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .services-featured-link { grid-column: 1; }
}

/* Card copy and illustrations reserve their own space and wrap together. */
.about-value-card-art { display: flex; flex-wrap: wrap; gap: var(--card-gap); }
.about-value-card-art > div { flex: 1 1 14rem; }
.about-value-card-art > img, .about-value-card-art > .value-orbit {
  flex: 0 0 7rem;
  margin-left: auto;
}
.services-card { flex-wrap: wrap; gap: var(--card-gap); }
.services-card > div { flex: 1 1 11rem; }
.services-card > img { flex: 0 1 10rem; max-width: 100%; margin-left: auto; }
.services-card a { white-space: normal; }
.service-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 29rem), 1fr)); }
.service-card { container: service-card / inline-size; column-gap: 2rem; }
@container service-card (width < 27rem) {
  .service-card > div:first-child { grid-column: 1 / -1; }
  .service-mark { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin: .75rem; }
  .service-card .card-link { grid-column: 1 / -1; grid-row: 3; }
}
.pricing-card-heading, .insight-meta { flex-wrap: wrap; }
.primary-nav { min-width: 0; }
@media (min-width: 1061px) {
  .primary-nav { flex-wrap: wrap; justify-content: flex-end; }
}
.pricing-plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.insight-author { flex: 1 1 14rem; }

.services-section-heading, .solutions-heading, .insight-topics-heading { flex-wrap: wrap; }
.services-section-heading h2, .solutions-heading h2, .insight-topics-heading h2 {
  flex-shrink: 1;
  max-width: 100%;
}
.section-heading { grid-template-columns: auto minmax(0, 1fr); }
.services-process-card { grid-template-columns: 7.4rem minmax(0, 1fr); }
.services-process-copy h3 { flex-wrap: wrap; column-gap: 1rem; row-gap: .35rem; }

/* Complex heroes keep their reading order when the available page width is
   under 60rem. Container rem units also respond to enlarged text settings. */
@container page-layout (width < 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art"; gap: var(--layout-gap); }
  .signal-stage { width: min(100%, 37rem); margin-inline: auto; }
  .about-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "art" "summary"; gap: var(--layout-gap); }
  .about-hero-title h1 { max-width: 14ch; }
  .about-hero-art { width: min(100%, 36rem); justify-self: center; }
  .services-hero { grid-template-columns: minmax(0, 1fr); gap: var(--layout-gap); min-height: 0; }
  .services-hero-copy { order: 1; justify-self: start; max-width: 100%; }
  .services-hero-art { order: 2; margin: 0; }
  .services-hero h1 { max-width: 18ch; }
  .solutions-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "art" "summary"; gap: var(--layout-gap); min-height: 0; }
  .solutions-hero-art { justify-self: center; width: min(100%, 30rem); }
  .insights-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tag" "title" "art" "summary"; gap: var(--layout-gap); min-height: 0; }
  .insights-hero-art { justify-self: center; }
  .solutions-featured { grid-template-columns: minmax(0, 1fr); gap: var(--layout-gap); }
  .section-heading { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .about-principle, .contact-panel { grid-template-columns: minmax(0, 1fr); gap: var(--layout-gap); }
  .contact-art { display: none; }
  .solutions-grid, .insight-topics-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--card-gap); padding: 0; min-height: 0; border: 0; box-shadow: none; background: none;
  }
  .solutions-grid::after, .insight-topics-grid::after { display: none; }
  .solution-card, .insight-topic { padding: 2rem; border: 1px solid var(--ink); border-radius: 2rem; box-shadow: var(--shadow); }
  .services-solutions-grid { grid-template-columns: minmax(0, 1fr); }
  .services-solutions-grid article { padding: 1.75rem 0; }
  .services-solutions-grid article + article { border-left: 0; border-top: 1px solid #59606e; }
}

@container page-layout (width < 40rem) {
  .about-values-grid, .services-card-grid { grid-template-columns: minmax(0, 1fr); }
  .services-featured { flex-direction: column; align-items: flex-start; }
  .services-featured-copy { width: 100%; }
  .services-process-card { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .services-process-icon { width: 4.5rem; height: 4.5rem; }
  .insight-decisions { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .insight-decision { grid-column: 1; }
  .solutions-capabilities { grid-template-columns: minmax(0, 1fr); }
  .solutions-featured { padding: 2rem; }
  .solutions-featured-star { position: static; }
  .journey-step { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .journey-step:nth-child(even) { margin-left: 0; }
  .journey-list::before { display: none; }
  .impact-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
  .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }
}