html.capability-spotlight-scroll-locked {
  overscroll-behavior: none;
}
/* Keep the document as the sticky bars' scroll container while locking scroll. */
html.capability-spotlight-scroll-locked :is(.translation-notice, .site-information) {
  z-index: 2001;
}
html.capability-spotlight-scroll-locked .capability-showcase__viewport {
  touch-action: pan-x pinch-zoom;
}

.capability-showcase {
  width: min(calc(100% - 64px), 1280px);
  margin: 32px auto 88px;
  overflow: hidden;
  border-radius: 32px;
  background: #fff;
}

.capability-showcase__row {
  --capability-accent: #2aa7a7;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  position: relative;
  height: clamp(440px, 37vw, 560px);
  isolation: isolate;
}

.capability-showcase__row + .capability-showcase__row { border-top: 6px solid #fff; }
.capability-showcase__row--sector { --capability-accent: #2aa7a7; --capability-rail: #136970; }
.capability-showcase__row--services { --capability-accent: #6fb8ef; --capability-rail: #2e5d86; }
.capability-showcase__row--expertise { --capability-accent: #d5954c; --capability-rail: #a16a2d; }
.capability-target-spotlight {
  position: fixed;
  z-index: 2000;
  box-sizing: border-box;
  border: 2px solid #ef7d00;
  border-radius: 12px;
  background: transparent;
  box-shadow: 0 0 0 150vmax rgba(13, 19, 34, .78), inset 0 0 0 2px rgba(255, 255, 255, .85);
  pointer-events: none;
}
.capability-spotlight-close { position: absolute; z-index: 10; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(16,28,52,.88); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.capability-spotlight-close:is(:hover, :focus-visible, :active) { transform: none; background: #2d176f; color: #fff; }
.capability-spotlight-close:focus-visible { outline: 3px solid #ef7d00; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .capability-target-spotlight { animation: capability-spotlight-reveal 30s ease both; }
}
@keyframes capability-spotlight-reveal {
  0%, 100% { opacity: 0; }
  2%, 98% { opacity: 1; }
}

.capability-showcase__rail {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--capability-rail) 84%, #fff), var(--capability-rail));
  color: #fff;
  font-size: clamp(.9rem, 1.6vw, 1.25rem);
  font-weight: 800;
  letter-spacing: .035em;
  text-decoration: none;
  text-transform: uppercase;
}
.capability-showcase__rail span { writing-mode: vertical-rl; transform: rotate(180deg); }
.capability-showcase__rail:is(:hover, :focus-visible) { filter: brightness(1.14); }
.capability-showcase__rail:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.capability-showcase__viewport { min-width: 0; overflow: hidden; }
.capability-showcase__cards {
  display: grid;
  grid-template-columns: repeat(var(--capability-columns), minmax(0, 1fr));
  gap: 4px;
  height: 100%;
  background: #fff;
}
.capability-showcase__row--sector { --capability-columns: 6; height: clamp(440px, 37vw, 560px); }
.capability-showcase__cards { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.capability-showcase__card--all { grid-row: span 2; }
.capability-showcase__row--services,
.capability-showcase__row--expertise { --capability-columns: 5; }

.capability-showcase__card {
  position: relative;
  display: block;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #17233c;
}
.capability-showcase__card::after {
  position: absolute;
  inset: 22% 0 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 10, 22, .16) 28%, rgba(5, 10, 22, .88) 100%);
  transition: opacity .25s ease;
}
.capability-showcase__card--all {
  background: linear-gradient(145deg, var(--capability-rail), #17233c 88%);
}
.capability-showcase__all-art { position: absolute; inset: 0; overflow: hidden; }
.capability-showcase__all-art span {
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--capability-accent) 65%, #fff);
  border-radius: 50%;
  opacity: .55;
  transition: transform .5s ease, opacity .5s ease;
}
.capability-showcase__all-art span:nth-child(1) { top: -38%; left: -42%; }
.capability-showcase__all-art span:nth-child(2) { top: -22%; left: -24%; }
.capability-showcase__all-art span:nth-child(3) { top: -6%; left: -6%; }
.capability-showcase__card--all:is(:hover, :focus-visible) .capability-showcase__all-art span { transform: translate(8px, 8px) scale(1.07); opacity: .85; }
.capability-showcase__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}
.capability-showcase__card-content {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  color: #fff;
  line-height: 1.14;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.capability-showcase__number {
  color: var(--capability-accent);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
}
.capability-showcase__card-content strong { font-size: clamp(.72rem, 1vw, .95rem); font-weight: 800; }
.capability-showcase__card-content small {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: .73rem;
  line-height: 1.25;
  transition: max-height .25s ease, opacity .25s ease;
}
.capability-showcase__underline { width: 30px; height: 3px; margin-top: 3px; background: var(--capability-accent); transition: width .25s ease; }
.capability-showcase__card-arrow {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: rgba(12, 20, 37, .7);
  color: #fff;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .25s ease, transform .25s ease;
}
.capability-showcase__card:is(:hover, :focus-visible) img { transform: scale(1.075); filter: saturate(1.08); }
.capability-showcase__card:is(:hover, :focus-visible)::after { opacity: 1; }
.capability-showcase__card:is(:hover, :focus-visible) small { max-height: 44px; opacity: 1; }
.capability-showcase__card:is(:hover, :focus-visible) .capability-showcase__underline { width: 54px; }
.capability-showcase__card:is(:hover, :focus-visible) .capability-showcase__card-arrow { opacity: 1; transform: none; }
.capability-showcase__card:focus-visible { outline: 3px solid #fff; outline-offset: -5px; z-index: 3; }
.capability-showcase__controls { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .capability-showcase.is-motion-ready .capability-showcase__row:not(.is-visible) .capability-showcase__rail,
  .capability-showcase.is-motion-ready .capability-showcase__row:not(.is-visible) .capability-showcase__card { opacity: 0; }
  .capability-showcase.is-motion-ready .capability-showcase__row.is-visible .capability-showcase__rail { animation: capability-reveal .65s both; }
  .capability-showcase.is-motion-ready .capability-showcase__row.is-visible .capability-showcase__card {
    animation: capability-reveal .7s both;
    animation-delay: var(--reveal-delay, 0ms);
  }
  @keyframes capability-reveal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 900px) {
  .capability-showcase { width: calc(100% - 32px); margin: 24px auto 64px; border-radius: 22px; }
  .capability-showcase__row { grid-template-columns: 48px minmax(0, 1fr); height: 476px; }
  .capability-showcase__viewport { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.6) transparent; scroll-snap-type: x mandatory; }
  .capability-showcase__cards { display: grid; grid-template-columns: repeat(var(--capability-columns), clamp(160px, 31vw, 210px)); width: max-content; min-width: 100%; }
  .capability-showcase__row--sector { height: 476px; }
  .capability-showcase__row--sector .capability-showcase__cards { grid-template-columns: repeat(6, clamp(160px, 31vw, 210px)); }
  .capability-showcase__card { width: auto; scroll-snap-align: start; }
  .capability-showcase__controls { display: contents; }
  .capability-showcase__controls button { position: absolute; z-index: 4; top: 50%; display: grid; width: 32px; height: 56px; place-items: center; padding: 0; border: 0; border-radius: 0; color: #fff; cursor: pointer; font-size: 0; transform: translateY(-50%); }
  .capability-showcase__controls button::before { width: 10px; height: 10px; content: ""; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
  .capability-showcase__controls button[data-scroll-direction="-1"] { left: 48px; background: linear-gradient(90deg, rgba(10, 20, 38, .76), rgba(10, 20, 38, 0)); }
  .capability-showcase__controls button[data-scroll-direction="-1"]::before { transform: rotate(-135deg); }
  .capability-showcase__controls button[data-scroll-direction="1"] { right: 0; background: linear-gradient(270deg, rgba(10, 20, 38, .76), rgba(10, 20, 38, 0)); }
  .capability-showcase__controls button[data-scroll-direction="1"]::before { transform: rotate(45deg); }
  .capability-showcase__controls button:disabled { visibility: hidden; pointer-events: none; }
  .capability-showcase__controls button:focus-visible { outline: 3px solid #ff9a28; outline-offset: 2px; }
}
@media (max-width: 600px) {
  .capability-showcase { width: calc(100% - 32px); margin: 16px auto 48px; border-radius: 18px; }
  .capability-showcase__row { grid-template-columns: 42px minmax(0, 1fr); height: 420px; }
  .capability-showcase__row--sector { height: 420px; }
  .capability-showcase__row--sector .capability-showcase__card { width: auto; }
  .capability-showcase__card { width: auto; }
  .capability-showcase__card-content strong { font-size: .8rem; }
  .capability-showcase__controls button[data-scroll-direction="-1"] { left: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .capability-showcase__card *,
  .capability-showcase__card::after { transition: none !important; }
  .capability-showcase__viewport { scroll-behavior: auto; }
}