/* Featured Work: centered carousel with peeking sides (native implementation). */
.featured-work {
  --carousel-card-width: clamp(560px, 48vw, 640px);
  --carousel-peek: clamp(84px, 6.667vw, 96px);
  --carousel-viewport-width: calc(var(--carousel-card-width) + var(--carousel-peek) + var(--carousel-peek));
  padding: clamp(80px, 8vw, 112px) 0 96px;
  overflow: hidden;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}

.featured-work__header { margin: 0 auto clamp(40px, 5vw, 64px); }
.featured-work__heading { max-width: 800px; }
.featured-work .section-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--clr-brand-primary);
  font: 700 12px/1.2 var(--ff-display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.featured-work .section-heading {
  max-width: 800px;
  margin: 0 0 18px;
  color: var(--clr-dark);
  font: 800 clamp(38px, 5vw, 56px)/1.05 var(--ff-display);
  letter-spacing: -.035em;
}
.featured-work .section-subtitle { max-width: 800px; color: #4a4a4a; font-size: 16px; line-height: 1.65; }

.featured-work-carousel {
  position: relative;
  width: min(100%, calc(var(--carousel-viewport-width) + 88px));
  margin: 0 auto 28px;
}
.carousel-viewport {
  width: min(100%, var(--carousel-viewport-width));
  margin: 0 auto;
  overflow: hidden;
  padding: 10px 0 24px;
}
.carousel-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 360ms ease;
  will-change: transform;
}
.carousel-slide {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--carousel-card-width);
  min-width: 0;
  opacity: .35;
  transform: scale(.85);
  transform-origin: center top;
  transition: opacity 360ms ease, transform 360ms ease;
  cursor: pointer;
}
.carousel-slide.is-active { z-index: 3; opacity: 1; transform: scale(1); cursor: default; }
.carousel-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .12);
}
.carousel-card__image { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #eee; }
.carousel-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel-card__content { min-height: 140px; padding: 14px 18px 16px; background: #fff; }
.carousel-card__link { display: flex; flex-direction: column; min-height: 110px; color: inherit; text-decoration: none; }
.carousel-card__industry {
  margin-bottom: 6px;
  color: var(--clr-brand-primary);
  font: 700 11px/1.2 var(--ff-display);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.carousel-card__title {
  display: -webkit-box;
  margin: 0 0 6px;
  overflow: hidden;
  color: var(--clr-dark);
  font: 700 17px/1.2 var(--ff-display);
  letter-spacing: -.02em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.carousel-card__description {
  display: -webkit-box;
  flex: 1 1 auto;
  margin: 0;
  overflow: hidden;
  color: #666;
  font-size: 13px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.carousel-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  color: var(--clr-brand-primary);
  font: 700 13px/1.2 var(--ff-display);
}
.carousel-card__cta span { display: inline-block; transition: transform 220ms ease; }
.carousel-card__link:hover .carousel-card__cta span,
.carousel-card__link:focus-visible .carousel-card__cta span { transform: translateX(4px); }
.carousel-card__link:focus-visible { outline: 3px solid var(--clr-brand-primary); outline-offset: 4px; border-radius: 4px; }

.carousel-controls__prev--side,
.carousel-controls__next--side {
  position: absolute;
  top: clamp(160px, 18vw, 220px);
  z-index: 5;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: .5px solid rgba(0, 0, 0, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: var(--clr-dark);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
  backdrop-filter: blur(4px);
}
.carousel-controls__prev--side { left: 0; }
.carousel-controls__next--side { right: 0; }
.carousel-controls__prev--side:hover,
.carousel-controls__next--side:hover,
.carousel-controls__prev--side:focus-visible,
.carousel-controls__next--side:focus-visible {
  background: #fff;
  color: var(--clr-brand-primary);
  transform: translateY(-50%) scale(1.06);
}
.carousel-controls__prev--side:focus-visible,
.carousel-controls__next--side:focus-visible { outline: 3px solid var(--clr-brand-primary); outline-offset: 3px; }

.carousel-pagination-wrapper { display: flex; justify-content: center; margin: 0 auto 36px; min-height: 24px; }
.carousel-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; }
.carousel-pagination__button {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #bdbdbd;
  cursor: pointer;
  transition: width 220ms ease, background-color 220ms ease;
}
.carousel-pagination__button.is-active { width: 24px; background: var(--clr-brand-primary); }
.carousel-pagination__button:focus-visible { outline: 3px solid var(--clr-brand-primary); outline-offset: 4px; }
.carousel-pagination.is-thumbnails { gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.carousel-pagination.is-thumbnails .carousel-pagination__button { width: 48px; height: 32px; overflow: hidden; border-radius: 4px; background: #ddd; opacity: .55; }
.carousel-pagination.is-thumbnails .carousel-pagination__button.is-active { width: 48px; opacity: 1; outline: 2px solid var(--clr-brand-primary); outline-offset: 2px; }
.carousel-pagination__thumb { display: block; width: 100%; height: 100%; object-fit: cover; }

.featured-work__footer--v3 { display: flex; justify-content: center; }

@media (max-width: 1024px) and (min-width: 769px) {
  .featured-work { --carousel-card-width: min(82vw, 620px); --carousel-peek: 8vw; }
  .carousel-controls__prev--side,
  .carousel-controls__next--side { top: clamp(220px, 30vw, 310px); }
}

@media (max-width: 768px) {
  .featured-work { --carousel-card-width: calc(100vw - 32px); --carousel-peek: 0px; padding: 64px 0 72px; }
  .featured-work__header { margin-bottom: 32px; }
  .featured-work .section-heading { font-size: clamp(36px, 11vw, 48px); }
  .featured-work .section-subtitle { font-size: 15px; }
  .featured-work-carousel { width: 100%; margin-bottom: 20px; }
  .carousel-viewport { width: 100%; padding: 4px 0 16px; }
  .carousel-slide { opacity: 0; transform: scale(1); pointer-events: none; }
  .carousel-slide.is-active { opacity: 1; pointer-events: auto; }
  .carousel-card__content { min-height: 150px; padding: 14px 16px; }
  .carousel-card__title { font-size: 17px; }
  .carousel-controls__prev--side,
  .carousel-controls__next--side { display: none; }
  .carousel-pagination-wrapper { margin-bottom: 28px; }
  .featured-work__footer-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
  .carousel-slide { transition: opacity 180ms ease; transform: none; }
  .carousel-slide:not(.is-active) { opacity: .35; }
  .carousel-card__cta span, .carousel-pagination__button { transition: none; }
}