/* Approved center spotlight: keep the existing service artwork and card colors. */
#expertise.services-spotlight { overflow: hidden; padding-inline: 0; padding-bottom: 24px; }
/* Share one compact transition between the carousel controls and the paths. */
#expertise.services-spotlight + .flow-section { padding-top: 32px; }
#expertise.services-spotlight + .flow-section .flow-section-heading h2 { margin-top: 0; }
@media (max-width: 700px) {
  #expertise.services-spotlight { padding-bottom: 20px; }
  #expertise.services-spotlight + .flow-section { padding-top: 28px; }
}
#expertise.services-spotlight > .section-heading { margin: 0 clamp(24px, 4vw, 64px) 24px; }
#expertise .service-carousel-controls button:focus-visible { outline: 2px solid #087b9d; outline-offset: 3px; }
#expertise .capability-grid-four.is-carousel { --service-card-width: min(360px, calc(100% - 40px)); display: block; position: relative; height: 510px; margin: 0; gap: 0; touch-action: pan-y; }
#expertise .is-carousel > .capability-card {
  position: absolute; top: 0; left: calc((100% - var(--service-card-width)) / 2); width: var(--service-card-width); max-width: none; height: 100%; min-height: 0;
  display: flex; flex-direction: column; gap: 0; padding: 28px 28px 104px; border-radius: 20px;
  isolation: isolate; background: none; border: 0; overflow: visible;
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s, visibility 0s; transform: none; opacity: 1;
  box-shadow: none;
}
#expertise .is-carousel > .capability-card::before { display: none; }
#expertise .is-carousel .service-card-surface { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; filter: drop-shadow(0 12px 15px #12324722); }
#expertise .is-carousel > .capability-card[data-position="previous"] { transform: translateX(-104%) scale(.9); opacity: .38; }
#expertise .is-carousel > .capability-card[data-position="next"] { transform: translateX(104%) scale(.9); opacity: .38; }
#expertise .is-carousel > .capability-card[data-position="away"] { transform: translateX(215%) scale(.85); opacity: 0; }
#expertise .is-carousel > .capability-card[data-position="active"] { z-index: 2; }
#expertise .is-carousel > .capability-card[data-position="away"] { pointer-events: none; visibility: hidden; transition-delay: 0s, 0s, .45s; }
#expertise .is-carousel > .capability-card[data-position="away"][data-away-side="left"] { transform: translateX(-215%) scale(.85); }
#expertise .is-carousel > .capability-card.is-repositioning { transition: none; visibility: hidden; }
#expertise .is-carousel > .capability-card[data-position="previous"],
#expertise .is-carousel > .capability-card[data-position="next"] { cursor: pointer; }
#expertise .is-carousel .capability-card > h3 { flex: none; font-size: 30px; line-height: 1.16; margin: 0 0 16px; max-width: none; min-height: 0; width: 100%; text-align: left; align-self: auto; }
#expertise .is-carousel .capability-card > p { flex: none; font-size: 14px; line-height: 1.65; margin: 0; min-height: 0; max-width: none; width: 100%; }
#expertise .is-carousel .cap-illustration { flex: 1 1 180px; position: relative; inset: auto; width: 234px; height: auto; min-height: 0; max-width: 100%; max-height: 182px; aspect-ratio: 360 / 280; margin: 18px auto 0; padding: 0; box-sizing: border-box; align-self: center; }
#expertise .is-carousel .cap-illustration > svg { width: 100%; height: 100%; max-height: 100%; }
#expertise .is-carousel .service-explore { position: absolute; right: 0; bottom: 8px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 9px; width: 164px; height: 44px; padding: 0 12px; border: 0; border-radius: 24px; background: #77d7ed; color: #082c43; font: 500 14px 'Space Grotesk',sans-serif; text-decoration: none; opacity: 1; transform: none; pointer-events: auto; }
#expertise .is-carousel .service-explore:hover { background: #a5eafa; }
#expertise .is-carousel .service-explore:focus-visible { outline: 3px solid #087b9d; outline-offset: 4px; }
#expertise .is-carousel .service-explore svg { display: block; width: 22px; height: 22px; flex: none; overflow: visible; }
#expertise .service-carousel-controls { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin: 24px clamp(24px, 4vw, 64px) 0; }
#expertise .service-carousel-arrows { display: flex; gap: 8px; }
#expertise .service-carousel-arrows button { min-height: 44px; border: 1px solid #91acbc; border-radius: 24px; background: transparent; color: #153247; padding: 10px 18px; font: 400 14px 'Space Grotesk', sans-serif; }
#expertise .service-carousel-arrows button:not(:disabled):hover { background: #cfdee6; }
@media (max-width: 743px) {
  #expertise .is-carousel > .capability-card { padding-inline: 24px; }
}
@media (max-width: 380px) {
  #expertise .capability-grid-four.is-carousel { height: 480px; }
  #expertise .is-carousel .capability-card > h3 { font-size: 27px; }
  #expertise .service-carousel-controls { gap: 8px; }
  #expertise .service-carousel-arrows button { padding-inline: 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #expertise .is-carousel > .capability-card { transition: none; }
  #expertise .is-carousel .capability-card > h3,
  #expertise .is-carousel .capability-card > p,
  #expertise .is-carousel .cap-illustration,
  #expertise .is-carousel .service-explore { transform: none; }
}

/* Keep neighboring cards visible as a swipe cue on narrow screens. */
@media (max-width: 743px) {
  #expertise .capability-grid-four.is-carousel { --service-card-width: min(360px, calc(100% - 88px)); height: 530px; }
  #expertise .is-carousel > .capability-card { padding-inline: 20px; }
  #expertise .is-carousel > .capability-card[data-position="previous"] { transform: translateX(-90%) scale(.9); opacity: .65; }
  #expertise .is-carousel > .capability-card[data-position="next"] { transform: translateX(90%) scale(.9); opacity: .65; }
  #expertise .is-carousel .capability-card > h3 { font-size: 27px; }
}
@media (max-width: 380px) {
  #expertise .capability-grid-four.is-carousel { --service-card-width: calc(100% - 72px); height: 550px; }
  #expertise .is-carousel > .capability-card { padding-inline: 18px; }
  #expertise .is-carousel .capability-card > h3 { font-size: 25px; }
}

/* Service names live on the cards. */
#expertise .is-carousel .capability-card > .service-name {
  color: #8de3f3; font-size: 16px; line-height: 1.3; font-weight: 500; margin: 0 0 16px;
}
/* One mobile-only hint, rather than repeated instructions on every card. */
#expertise .is-carousel .service-swipe-cue { display: none; }
@media (max-width: 743px) {
  #expertise .is-carousel.has-swipe-hint .service-swipe-cue {
    position: absolute; z-index: 4; bottom: 80px; left: 50%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: max-content; padding: 8px 12px; border-radius: 18px;
    background: #d2f4fb; color: #12394d; transform: translateX(-50%);
    font: 500 12px 'Space Grotesk', sans-serif; pointer-events: none;
    animation: service-hint-appear .3s ease-out 1.1s both;
  }
  #expertise .service-swipe-cue svg { width: 24px; height: 16px; flex: none; }
  #expertise .is-carousel.swipe-demo > .capability-card {
    animation: service-swipe-demo 1.2s cubic-bezier(.22,1,.36,1) .2s both;
  }
}
@keyframes service-swipe-demo {
  0%, 100% { translate: 0 0; }
  45%, 65% { translate: -24px 0; }
}
@keyframes service-hint-appear {
  from { opacity: 0; } to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #expertise .is-carousel.swipe-demo > .capability-card,
  #expertise .is-carousel.has-swipe-hint .service-swipe-cue { animation: none; }
}
#expertise .service-explore svg circle { opacity: 1; transform-box: fill-box; transform-origin: center; }
/* Reuse the hero button's dotted-arrow sequence without replaying card artwork. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #expertise .service-explore:hover svg circle { animation: dot-appear .13s ease both; }
  #expertise .service-explore:hover svg circle:nth-of-type(1) { animation-delay: .18s; }
  #expertise .service-explore:hover svg circle:nth-of-type(2) { animation-delay: .23s; }
  #expertise .service-explore:hover svg circle:nth-of-type(3) { animation-delay: .28s; }
  #expertise .service-explore:hover svg path { animation: tip-move .26s cubic-bezier(.4,0,.2,1) both; }
}
@media (prefers-reduced-motion: no-preference) {
  #expertise .service-explore:focus-visible svg circle { animation: dot-appear .13s ease both; }
  #expertise .service-explore:focus-visible svg circle:nth-of-type(1) { animation-delay: .18s; }
  #expertise .service-explore:focus-visible svg circle:nth-of-type(2) { animation-delay: .23s; }
  #expertise .service-explore:focus-visible svg circle:nth-of-type(3) { animation-delay: .28s; }
  #expertise .service-explore:focus-visible svg path { animation: tip-move .26s cubic-bezier(.4,0,.2,1) both; }
}

/* Hover-capable non-mobile devices reveal the button; touch stays ready to tap. */
@media (min-width: 744px) and (hover: hover) and (pointer: fine) {
  #expertise:not([data-touch-input]) .is-carousel .service-explore {
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .18s ease-out, transform .24s cubic-bezier(.16,1,.3,1), background .15s;
  }
  #expertise:not([data-touch-input]) .is-carousel .capability-card[data-position="active"]:is(:hover, :focus-within) .service-explore {
    opacity: 1; transform: none; pointer-events: auto;
  }
  @supports (d: path("M0 0L1 1")) {
    #expertise:not([data-touch-input]) .service-card-surface > path {
      d: var(--service-surface-rest);
      transition: d .26s cubic-bezier(.16,1,.3,1);
    }
    #expertise:not([data-touch-input]) .capability-card[data-position="active"]:is(:hover, :focus-within) .service-card-surface > path {
      d: var(--service-surface-open);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  #expertise:not([data-touch-input]) .is-carousel .service-explore {
    transition: none; transform: none;
  }
  #expertise:not([data-touch-input]) .service-card-surface > path { transition: none; }
}

#expertise .service-carousel-arrows button:disabled { opacity: .4; cursor: default; }