/* SELECTED WORKS CAROUSEL - 1:1 with the reference spec, scoped to .work-sec. Self-hosted Swiper + fonts. */
.work-sec{--beige:#faf9f6;--black:#1c1c1c;--wc-border:#e1e1e1;--wc-muted:rgba(28,28,28,.65);--wc-peek:126px;
  background:var(--beige);color:var(--black);font-family:'Urbanist',sans-serif;font-weight:400;overflow:hidden;padding:64px 0}
.work-sec *,.work-sec *::before,.work-sec *::after{box-sizing:border-box}
.work-sec .container{width:100%;max-width:none;padding:0 24px;margin:auto}
.work-sec h2{font-family:'Manrope',sans-serif;font-weight:700;font-size:26px;margin:0;color:var(--black)}
.work-sec p{font-size:16px;line-height:118%;margin:0 0 16px}
.work-sec h4{font-family:'Urbanist',sans-serif;font-weight:700;font-size:20px;margin:0}
.work-sec .flex-row{display:flex;flex-direction:row}
.work-sec .jcsb{justify-content:space-between}
.work-sec .aic{align-items:center}
.work-sec .ofc{display:block;object-fit:cover;width:100%;height:100%}
.work-sec .title-btn-row{margin:0 0 24px}

.work-sec .btn{display:inline-flex;align-items:center;font-family:'Urbanist',sans-serif;font-weight:700;font-size:16px;color:var(--black);text-decoration:none;transition:opacity .2s;cursor:pointer}
.work-sec a.btn:hover{opacity:.8}
.work-sec .btn .svg-wrap{display:block;overflow:hidden}
.work-sec .btn svg{display:block}
.work-sec .btn.animate svg{animation:wc-btn-anim .8s ease forwards}
@keyframes wc-btn-anim{0%{transform:translate(0,0);visibility:visible}48%{transform:translate(100%,-100%);visibility:visible}50%{transform:translate(100%,-100%);visibility:hidden}51%{transform:translate(-100%,100%);visibility:hidden}52%{transform:translate(-100%,100%);visibility:visible}100%{transform:translate(0,0);visibility:visible}}

.work-carousel{position:relative;overflow:visible;cursor:grab}
.work-carousel:active{cursor:grabbing}
.work-carousel .swiper-slide{height:auto}

.work-card{position:relative;height:100%;border-radius:16px;border:1px solid var(--wc-border);background:var(--beige);box-shadow:0 0 17px 0 rgba(28,28,28,.06);overflow:hidden;transition:.2s}
.work-card:hover{box-shadow:0 0 17px 0 rgba(28,28,28,.12)}
.work-card-inner{position:relative;cursor:pointer;transition:.5s}
.work-card.open .work-card-inner{transform:translateY(calc(-100% + var(--wc-peek)))}
.work-card .img-container{height:382px;border-radius:0 0 16px 16px;overflow:hidden;background:#e9e8e4}
.work-bottom{padding:16px}
.work-sec .title-meta-row p{margin:0;font-size:14px;color:var(--black)}
.work-card-inner ul{padding:0;list-style:none;margin:16px 0 0}
.work-card-inner ul li{display:flex;margin:0 0 4px;font-size:14px}
.work-card-inner ul li span{opacity:.65}
.work-card-inner ul li::before{content:"";flex:0 0 auto;width:10px;height:10px;margin:3px 7px 0 0;background:radial-gradient(circle,rgba(28,28,28,.55) 0 3.6px,transparent 4.2px)}
.work-card-inner ul>li:last-of-type{margin:0}
.work-bottom .open-icon{position:absolute;bottom:16px;right:16px;width:17px;height:16px;transition:.5s;color:var(--wc-muted)}
.work-card.open .work-bottom .open-icon{transform:rotate(-180deg)}
.work-card-inner .extra-content{position:absolute;top:100%;left:16px;width:calc(100% - 32px);padding:16px 0 32px;max-height:calc(100% - var(--wc-peek));overflow-y:auto;scrollbar-width:none}
.work-card-inner .extra-content::-webkit-scrollbar{display:none}
.work-card-inner .extra-content p{font-size:14px;opacity:.65}
.work-card-inner .extra-content ul{margin:16px 0}
.work-card-inner .extra-content li{color:var(--wc-muted)}
.work-card-inner .extra-content .body a{text-decoration:underline;color:inherit}
.work-card-inner .extra-content .btn-container{margin:32px 0 0;text-align:right}
.work-card-inner .extra-content .btn-container a{font-size:14px}

.swiper-pag-row{width:calc(33.33% - 32px);margin:24px auto 0}
.swiper-pag-row .swiper-btn{cursor:pointer;display:flex;user-select:none;color:var(--black)}
.swiper-pag-row .swiper-btn svg{width:32px;height:32px;display:block}
.swiper-pag-row .swiper-button-disabled{opacity:.4;cursor:not-allowed}
.swiper-pag-row .swiper-pag{display:flex;flex-direction:row;justify-content:center;align-items:center;position:static;width:auto}
.swiper-pag-row .swiper-pagination-bullet{width:10px;height:3px;border-radius:5px;background:var(--black);opacity:.4;transition:.3s;margin:0 3px!important}
.swiper-pag-row .swiper-pagination-bullet.swiper-pagination-bullet-active{width:28px;opacity:1}

/* load-in stagger */
.work-sec .title-btn-row h2,.work-sec .title-btn-row .btn-container,.work-carousel .swiper-wrapper>div,.swiper-pag-row{transform:translateY(60px);opacity:0;transition:opacity .6s,transform .6s}
.work-sec .title-btn-row h2,.work-sec .title-btn-row .btn-container{transition-delay:.3s}
.work-carousel .swiper-wrapper>div:nth-of-type(1){transition-delay:.4s}
.work-carousel .swiper-wrapper>div:nth-of-type(2){transition-delay:.5s}
.work-carousel .swiper-wrapper>div:nth-of-type(3){transition-delay:.6s}
.swiper-pag-row{transition-delay:.7s}
.work-sec.page-loaded .title-btn-row h2,.work-sec.page-loaded .title-btn-row .btn-container,.work-sec.page-loaded .swiper-wrapper>div,.work-sec.page-loaded .swiper-pag-row{transform:translateY(0);opacity:1}
.work-sec.wc-revealed .swiper-wrapper>div{transition-delay:0s}

@media (max-width:992px){.work-sec .container{padding:0 16px}.swiper-pag-row{width:100%}}
@media (max-width:768px){
  .work-sec h2{font-size:20px}
  .work-card::after{content:"";position:absolute;bottom:0;left:-24px;width:calc(100% + 48px);height:24px;z-index:5;background:linear-gradient(0deg,rgba(28,28,28,.15) 0%,rgba(255,255,255,0) 100%);opacity:0;transition:opacity .3s;pointer-events:none}
  .work-card.open::after{opacity:1}
}
@media (max-width:500px){.work-card .img-container{height:280px}}
@media (min-width:1440px){
  .work-sec{--wc-peek:7.8vw}
  .work-sec .container{overflow:hidden}
  .work-sec h2{font-size:1.8vw}
  .work-sec h4{font-size:1.3vw}
  .work-sec p,.work-sec .btn{font-size:1.1vw}
  .work-sec p{margin:0 0 1.1vw}
  .work-sec .btn svg{width:1.6vw;height:auto}
  .work-sec .title-btn-row{margin-bottom:1.6vw}
  .work-card{border-radius:1.1vw}
  .work-card .img-container{height:25.5vw;border-radius:0 0 1.1vw 1.1vw}
  .work-bottom{padding:1.1vw}
  .work-bottom .open-icon{width:1.1vw;height:1.1vw;bottom:1.1vw;right:1.1vw}
  .work-card-inner .extra-content p,.work-card-inner ul li,.work-sec .title-meta-row p{font-size:.93vw}
  .work-card-inner ul li{margin:0 0 .27vw}
  .work-card-inner ul li::before{width:.67vw;height:.67vw;margin:.2vw .47vw 0 0;background:radial-gradient(circle,rgba(28,28,28,.55) 0 36%,transparent 42%)}
  .work-card-inner .extra-content ul{margin:1.1vw 0}
  .work-card-inner .extra-content .btn-container a{font-size:.92vw}
  .work-card-inner .extra-content .btn svg{width:1.1vw}
  .swiper-pag-row{margin-top:1.6vw}
  .swiper-pag-row .swiper-btn svg{width:2.1vw;height:2.1vw}
  .swiper-pag-row .swiper-pagination-bullet{height:.2vw;width:.67vw;margin:0 .2vw!important}
  .swiper-pag-row .swiper-pagination-bullet.swiper-pagination-bullet-active{width:1.8vw}
}

/* Projects page grid (same cards, no carousel) */
.projects-sec{padding:40px 0 80px}
.projects-sec .page-top{text-align:center;padding:40px 0 40px}
.projects-sec .page-top h1{font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(32px,4vw,42px);margin:0;color:var(--black)}
.projects-sec .page-top p{font-size:16px;line-height:1.5;color:var(--wc-muted);margin:8px auto 0;max-width:520px}
.text-center{text-align:center}
.projects-grid{display:grid;grid-template-columns:repeat(3,calc(33.33% - 16px));gap:24px}
@media(max-width:1180px){.projects-grid{grid-template-columns:repeat(2,calc(50% - 12px))}}
@media(max-width:768px){.projects-grid{grid-template-columns:100%}}
.projects-cell{display:flex}
.projects-cell .work-card{width:100%;height:100%}

/* Projects page load-in stagger (hero + grid rise in) */
.projects-sec .page-top h1,.projects-sec .page-top p,.projects-sec .projects-cell{opacity:0;transform:translateY(40px);transition:opacity .6s ease,transform .6s ease}
.projects-sec .page-top h1{transition-delay:.05s}
.projects-sec .page-top p{transition-delay:.15s}
.projects-sec .projects-cell:nth-child(3n+1){transition-delay:.25s}
.projects-sec .projects-cell:nth-child(3n+2){transition-delay:.33s}
.projects-sec .projects-cell:nth-child(3n){transition-delay:.41s}
@media(max-width:1180px){.projects-sec .projects-cell:nth-child(2n+1){transition-delay:.25s}.projects-sec .projects-cell:nth-child(2n){transition-delay:.33s}}
.work-sec.page-loaded .page-top h1,.work-sec.page-loaded .page-top p,.work-sec.page-loaded .projects-cell{opacity:1;transform:none}
.work-sec.wc-revealed .projects-cell{transition-delay:0s}