/* Four tangible implementation capabilities, in an open, staggered composition. */
.foundation-showcase {
  position: relative;
  isolation: isolate;
  background: #fff;
}
.foundation-showcase::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 79% 52%, #f0ebfc8c, transparent 53%);
  pointer-events: none;
}
.foundation-showcase .foundation-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: clamp(42px, 7vw, 110px);
}
.foundation-showcase .foundation-message { min-width: 0; padding-bottom: 18px; }
.foundation-showcase .foundation-message .eyebrow { font-size: 10px; }
.foundation-showcase .foundation-message h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.5; letter-spacing: -.045em; }
.foundation-showcase .foundation-summary { font-size: 15px; color: #656978; line-height: 1.9; max-width: 23em; margin: 26px 0 23px; }
.foundation-showcase .foundation-link { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; font-size: 14px; color: #3448ec; }
.foundation-showcase .foundation-link > span { display: inline-block; font-size: 22px; transition: transform 160ms var(--ease-out); }
.foundation-showcase .foundation-link:focus-visible { outline: 2px solid #7854cf; outline-offset: 6px; border-radius: 4px; }
.foundation-showcase .foundation-objects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: 26px;
  row-gap: 33px;
  min-width: 0;
  max-width: 600px;
}
.foundation-showcase .capability-object { min-width: 0; border: 0; background: transparent; padding: 0; }
.foundation-showcase .object-connect { margin-top: 90px; }
.foundation-showcase .object-control { margin-top: -57px; }
.foundation-showcase .object-team { margin-top: 33px; }
.foundation-showcase .capability-art { width: min(100%, 206px); margin: 0 0 15px -10px; }
.foundation-showcase .capability-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.foundation-showcase .capability-object h3 { font-size: 18px; font-weight: 600; line-height: 1.65; letter-spacing: -.025em; margin: 0 0 8px; text-wrap: balance; }
.foundation-showcase .capability-object p { color: #656978; font-size: 13px; line-height: 1.85; max-width: 17em; margin: 0; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) {
  .foundation-showcase .foundation-link:hover > span { transform: translate(3px, -3px); }
  .foundation-showcase .foundation-link:hover { text-decoration: underline; text-underline-offset: 6px; }
}
@media (max-width: 960px) {
  .foundation-showcase .foundation-layout { grid-template-columns: 1fr; gap: 38px; }
  .foundation-showcase .foundation-message { padding: 0; }
  .foundation-showcase .foundation-summary { max-width: 32em; margin: 20px 0 14px; }
  .foundation-showcase .foundation-objects { width: min(100%, 580px); justify-self: center; column-gap: 52px; }
  .foundation-showcase .object-connect { margin-top: 50px; }
  .foundation-showcase .object-control { margin-top: -20px; }
  .foundation-showcase .object-team { margin-top: 30px; }
}
@media (max-width: 480px) {
  .foundation-showcase .foundation-layout { gap: 32px; }
  .foundation-showcase .foundation-message .eyebrow { font-size: 9px; }
  .foundation-showcase .foundation-message h2 { font-size: 31px; }
  .foundation-showcase .foundation-summary { font-size: 14px; }
  .foundation-showcase .foundation-objects { column-gap: 22px; row-gap: 28px; }
  .foundation-showcase .capability-art { width: 150px; max-width: 100%; margin: 0 0 11px -4px; }
  .foundation-showcase .capability-object h3 { font-size: 16px; line-height: 1.65; margin-bottom: 7px; }
  .foundation-showcase .capability-object p { font-size: 13px; }
  .foundation-showcase .object-connect { margin-top: 37px; }
  .foundation-showcase .object-control { margin-top: -9px; }
  .foundation-showcase .object-team { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .foundation-showcase .foundation-link > span { transition: none; }
  .foundation-showcase .foundation-link:hover > span { transform: none; }
}
