/* Homepage recent work — scoped to this section. */
.recent-work { background: #fff; }
.recent-work > .container { width: calc(100% - 56px); max-width: 1600px; }
.recent-work-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.recent-work-heading h2 { margin: 0 0 10px; }
.recent-work-heading p { max-width: 620px; margin: 0; }
.recent-work-heading > .btn { flex: 0 0 auto; }
.recent-work .portfolio-wrap { padding: 0; }
.recent-work .portfolio-swiper { overflow: hidden; width: 100%; }
.recent-work .swiper-slide { height: auto; }
.recent-project-card { height: 100%; min-width: 0; padding: 9px; background: #fff; border: 1px solid #e4eaf1; border-radius: 18px; box-shadow: 0 9px 28px rgba(17,24,39,.07); transition: transform .25s, box-shadow .25s; }
.recent-project-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(17,24,39,.12); }
.recent-project-preview { position: relative; display: block; overflow: hidden; border: 1px solid #e7ebef; border-radius: 11px; background: #f6f8fa; }
.recent-project-preview:focus-visible { outline-offset: 3px; }
.recent-browser-bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; background: #f3f5f8; }
.recent-browser-bar > i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #ff8f87; }
.recent-browser-bar > i:nth-child(2) { background: #f6c464; }
.recent-browser-bar > i:nth-child(3) { background: #8bcf9e; }
.recent-browser-bar > span { max-width: 72%; margin: auto; padding: 2px 10px; overflow: hidden; border-radius: 4px; background: #fff; color: #7c8795; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.recent-project-preview > img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; object-position: top center; background: #fff; }
.recent-project-concept .recent-project-preview > img { object-fit: contain; background: #fff5e8; }
.recent-concept-badge { position: absolute; right: 10px; bottom: 10px; padding: 5px 9px; border-radius: 99px; background: #fff; color: #a95100; font-size: 10px; font-weight: 700; box-shadow: 0 3px 12px rgba(17,24,39,.1); }
.recent-project-details { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 86px; padding: 16px 10px 9px; }
.recent-project-type { display: block; margin-bottom: 6px; color: #ad5900; font-size: 11px; font-weight: 600; }
.recent-project-details h3 { margin: 0; color: #111827; font-size: 17px; line-height: 1.25; }
.recent-project-link { display: grid; place-items: center; flex: 0 0 37px; width: 37px; height: 37px; border: 1px solid #ffdbad; border-radius: 50%; color: #cb6500; background: #fff9f0; }
.recent-project-link:hover { color: #fff; background: #e87500; }
.recent-work .nav-arrow { top: 45%; }
.recent-work .nav-arrow.swiper-button-disabled { opacity: .3; pointer-events: none; }
.recent-work .portfolio-swiper:not(.swiper-initialized) .swiper-wrapper { display: grid; width: 100% !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 18px; }
.recent-work .portfolio-swiper:not(.swiper-initialized) .swiper-slide { width: auto; }
@media (min-width: 992px) { .recent-work .portfolio-prev, .recent-work .portfolio-next { display: none; } }
@media (max-width: 991.98px) {
  .recent-work .portfolio-swiper:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .recent-work-heading { align-items: start; }
}
@media (max-width: 767.98px) {
  .recent-work > .container { width: calc(100% - 32px); }
  .recent-work-heading { flex-direction: column; gap: 15px; }
  .recent-work .portfolio-swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; grid-template-columns: none !important; }
  .recent-work .portfolio-swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 82%; scroll-snap-align: start; }
  .recent-work .portfolio-prev, .recent-work .portfolio-next { display: grid; top: 43%; }
  .recent-project-details h3 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .recent-project-card { transition: none; } }