/* Page-specific features only: portfolio.html */
@layer pages{
:root{--portfolio-primary: var(--primary, #1F73E8);--portfolio-primary-light: var(--primary-light, #4EA6FF);--portfolio-accent: var(--accent, #7BC4FF);--portfolio-dark: var(--dark, #172033);--portfolio-gray: var(--gray, #667085);--portfolio-page: #f6faff;--portfolio-soft: #f8fbff;--portfolio-border: #dbe9ff;--portfolio-white: #fff;--portfolio-shadow: 0 16px 40px rgba(15, 38, 75, .09);--portfolio-shadow-hover: 0 24px 56px rgba(15, 38, 75, .14);--portfolio-radius: 18px;--portfolio-radius-lg: 23px;--portfolio-transition: .22s ease;}
#portfolio-work,#portfolio-process,#final-cta{scroll-margin-top: 110px;}
#portfolio-work,#portfolio-process{padding: 92px 0;}
#portfolio-work{background: var(--portfolio-white);}
#portfolio-process{background: var(--portfolio-page);}
#portfolio-work .section-title,#portfolio-process .section-title{max-width: 860px;margin: 0 auto 42px;text-align: center;}
#portfolio-work .section-title h2,#portfolio-process .section-title h2{margin-bottom: 12px;color: var(--portfolio-primary);}
#portfolio-hero{position: relative;overflow: hidden;padding: 102px 0 96px;text-align: center;color: #fff;background:
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.22), transparent 27%),
        radial-gradient(circle at 12% 88%, rgba(123,196,255,.30), transparent 32%),
        linear-gradient(135deg, var(--portfolio-primary), var(--portfolio-primary-light));}
#portfolio-hero::before{content: "";position: absolute;inset: 0;pointer-events: none;background:
        linear-gradient(120deg, transparent 0 62%, rgba(255,255,255,.07) 62% 64%, transparent 64%),
        linear-gradient(30deg, transparent 0 72%, rgba(255,255,255,.05) 72% 74%, transparent 74%);}
#portfolio-hero .container{position: relative;z-index: 1;}
#portfolio-hero h1{max-width: 980px;margin: 0 auto 18px;color: #fff;font-size: clamp(2.5rem, 5.5vw, 4.45rem);line-height: 1.08;}
#portfolio-hero p{max-width: 880px;margin: 0 auto;color: rgba(255,255,255,.95);font-size: clamp(1rem, 1.7vw, 1.16rem);line-height: 1.75;}
#portfolio-hero .hero-buttons{display: flex;flex-wrap: wrap;justify-content: center;gap: 13px;margin-top: 31px;}
#portfolio-hero .btn{min-width: 180px;}
#portfolio-hero .btn.secondary{border-color: rgba(255,255,255,.8);background: rgba(255,255,255,.10);color: #fff;backdrop-filter: blur(6px);}
#portfolio-hero .btn.secondary:hover,#portfolio-hero .btn.secondary:focus-visible{border-color: #fff;background: #fff;color: var(--portfolio-primary);}
.portfolio-filter{display: flex;flex-wrap: wrap;justify-content: center;gap: 11px;margin: 30px 0 38px;}
.filter-btn{min-height: 44px;padding: 10px 18px;border: 1px solid #cfe0f8;border-radius: 999px;background: #fff;color: #344054;cursor: pointer;font: inherit;font-weight: 750;transition:
        transform var(--portfolio-transition),
        border-color var(--portfolio-transition),
        background var(--portfolio-transition),
        color var(--portfolio-transition),
        box-shadow var(--portfolio-transition);}
.filter-btn:hover,.filter-btn:focus-visible{transform: translateY(-1px);border-color: var(--portfolio-primary);color: var(--portfolio-primary);outline: none;box-shadow: 0 0 0 4px rgba(31,115,232,.11);}
.filter-btn.active,.filter-btn[aria-pressed="true"]{border-color: var(--portfolio-primary);background: var(--portfolio-primary);color: #fff;box-shadow: 0 10px 24px rgba(31,115,232,.18);}
.portfolio-gallery{display: grid ;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 25px;column-count: initial ;}
.portfolio-item{min-width: 0;overflow: hidden;border: 1px solid var(--portfolio-border);border-radius: var(--portfolio-radius);background: var(--portfolio-white);box-shadow: var(--portfolio-shadow);break-inside: avoid;transition:
        transform var(--portfolio-transition),
        border-color var(--portfolio-transition),
        box-shadow var(--portfolio-transition);}
.portfolio-item:hover{transform: translateY(-5px);border-color: #b6d2f6;box-shadow: var(--portfolio-shadow-hover);}
.portfolio-item[hidden]{display: none ;}
.portfolio-item button{display: flex;width: 100%;height: 100%;padding: 0;border: 0;background: transparent;color: inherit;cursor: pointer;flex-direction: column;text-align: left;}
.portfolio-item button:focus-visible{outline: 0;box-shadow: inset 0 0 0 4px rgba(31,115,232,.18);}
.portfolio-item img{display: block;width: 100%;min-height: 0;aspect-ratio: 4 / 3;object-fit: cover;background:
        linear-gradient(135deg, #eef6ff, #dcecff);transition: transform .35s ease;}
.portfolio-item:hover img{transform: scale(1.025);}
.portfolio-item img.portfolio-brand-guide{object-fit:contain;background:#111115;padding:10px;}
.portfolio-card-copy{display: flex;flex: 1;flex-direction: column;padding: 24px;}
.portfolio-card-copy h3{margin-bottom: 8px;color: var(--portfolio-primary);font-size: 1.25rem;}
.portfolio-card-copy p{margin-bottom: 0;color: #536071;line-height: 1.65;}
.portfolio-meta{display: flex;flex-wrap: wrap;gap: 8px;margin-top: auto;padding-top: 17px;}
.portfolio-meta span{padding: 6px 12px;border-radius: 999px;background: #eef6ff;color: var(--portfolio-primary);font-size: .82rem;font-weight: 750;}
.portfolio-empty{display: none;max-width: 780px;margin: 32px auto 0;padding: 42px 28px;border: 1px solid var(--portfolio-border);border-radius: var(--portfolio-radius);background: #eef7ff;text-align: center;}
.portfolio-empty.show{display: block;}
.portfolio-empty h3{margin-bottom: 8px;color: var(--portfolio-primary);}
.portfolio-empty p{margin: 0;}
.portfolio-process-grid{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 24px;}
.portfolio-process-card{position: relative;min-width: 0;padding: 30px;border: 1px solid var(--portfolio-border);border-radius: var(--portfolio-radius);background: #fff;box-shadow: var(--portfolio-shadow);transition:
        transform var(--portfolio-transition),
        border-color var(--portfolio-transition),
        box-shadow var(--portfolio-transition);}
.portfolio-process-card:hover{transform: translateY(-4px);border-color: #b7d2f4;box-shadow: var(--portfolio-shadow-hover);}
.portfolio-process-card span{display: flex;align-items: center;justify-content: center;width: 52px;height: 52px;margin-bottom: 18px;border-radius: 50%;background:
        linear-gradient(135deg, var(--portfolio-primary), var(--portfolio-primary-light));color: #fff;box-shadow: 0 10px 24px rgba(31,115,232,.18);font-family: "Poppins", sans-serif;font-weight: 800;}
.portfolio-process-card h3{margin-bottom: 9px;color: var(--portfolio-primary);}
.portfolio-process-card p{margin: 0;color: #536071;line-height: 1.65;}
.modal.hidden{display: none ;}
#portfolioModal:not(.hidden){position: fixed;inset: 0;z-index: 3000;display: grid;place-items: center;overflow-y: auto;padding: 24px;background: rgba(9,18,32,.80);backdrop-filter: blur(7px);}
#portfolioModal .modal-content{position: relative;width: min(920px, 100%);max-height: calc(100vh - 48px);overflow-y: auto;padding: 28px;border: 1px solid rgba(255,255,255,.45);border-radius: 22px;background: #fff;box-shadow: 0 32px 90px rgba(0,0,0,.34);animation: portfolioModalIn .22s ease;}
@keyframes portfolioModalIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
#portfolioModal .close-modal{position: absolute;top: 14px;right: 14px;z-index: 2;display: grid;place-items: center;width: 42px;height: 42px;padding: 0;border: 0;border-radius: 50%;background: #fff;color: #172033;box-shadow: 0 8px 22px rgba(0,0,0,.16);cursor: pointer;font-size: 1.5rem;line-height: 1;transition:
        transform var(--portfolio-transition),
        background var(--portfolio-transition),
        color var(--portfolio-transition);}
#portfolioModal .close-modal:hover,#portfolioModal .close-modal:focus-visible{transform: rotate(5deg) scale(1.04);background: var(--portfolio-primary);color: #fff;outline: none;}
.portfolio-modal-image{display: block;width: 100%;max-height: 62vh;border-radius: 16px;object-fit: contain;background: #eef6ff;}
.portfolio-modal-copy{padding-top: 25px;}
.portfolio-modal-copy .badge{display: inline-flex;align-items: center;min-height: 31px;margin-bottom: 11px;padding: 5px 11px;border-radius: 999px;background: #eef6ff;color: var(--portfolio-primary);font-size: .78rem;font-weight: 800;}
.portfolio-modal-copy h2{margin-bottom: 11px;color: var(--portfolio-primary);}
.portfolio-modal-copy p{color: #536071;line-height: 1.72;}
#final-cta{position: relative;overflow: hidden;padding: 88px 0;color: #fff;background:
        radial-gradient(circle at 84% 17%, rgba(255,255,255,.19), transparent 25%),
        linear-gradient(135deg, var(--portfolio-primary), var(--portfolio-primary-light));text-align: center;}
#final-cta .container{position: relative;z-index: 1;}
#final-cta .cta-logo{display: block;width: min(150px, 42vw);max-height: 95px;margin: 0 auto 18px;object-fit: contain;}
#final-cta h2{margin-bottom: 13px;color: #fff;}
#final-cta p{max-width: 760px;margin: 0 auto;color: rgba(255,255,255,.93);}
#final-cta .cta-buttons{display: flex;flex-wrap: wrap;justify-content: center;gap: 12px;margin-top: 27px;}
#final-cta .btn.secondary{border-color: rgba(255,255,255,.8);background: rgba(255,255,255,.10);color: #fff;}
#final-cta .btn.secondary:hover,#final-cta .btn.secondary:focus-visible{background: #fff;color: var(--portfolio-primary);}
#backToTop{position: fixed;right: 22px;bottom: 22px;z-index: 900;display: grid;place-items: center;width: 46px;height: 46px;border: 0;border-radius: 50%;background: var(--portfolio-primary);color: #fff;box-shadow: 0 12px 28px rgba(0,0,0,.18);cursor: pointer;opacity: 0;visibility: hidden;transform: translateY(12px);transition: var(--portfolio-transition);}
#backToTop.show{opacity: 1;visibility: visible;transform: translateY(0);}
#backToTop:hover,#backToTop:focus-visible{background: #1764cc;outline: none;transform: translateY(-2px);}
@media (max-width: 1180px) {.portfolio-gallery{grid-template-columns: repeat(2, minmax(0, 1fr));}
.portfolio-process-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 760px) {#portfolio-hero{padding: 75px 0 72px;}
#portfolio-work,#portfolio-process{padding: 64px 0;}
.portfolio-gallery,.portfolio-process-grid{grid-template-columns: 1fr;}
.portfolio-filter{align-items: stretch;flex-direction: column;}
.filter-btn{width: 100%;}
#portfolio-hero .hero-buttons,#final-cta .cta-buttons{align-items: stretch;flex-direction: column;}
#portfolio-hero .btn,#final-cta .btn{width: 100%;}
#portfolioModal{padding: 12px ;}
#portfolioModal .modal-content{max-height: calc(100vh - 24px);padding: 20px;}}
@media (max-width: 520px) {.portfolio-card-copy,.portfolio-process-card{padding: 20px;}
.portfolio-modal-copy{padding-top: 20px;}
#portfolioModal .close-modal{top: 10px;right: 10px;width: 39px;height: 39px;}}
@media (prefers-reduced-motion: reduce) {.portfolio-item,.portfolio-item img,.portfolio-process-card,.filter-btn,#backToTop,#portfolioModal .modal-content,#portfolioModal .close-modal{animation: none ;transition: none ;}}
@media print {.site-header,#portfolio-hero .hero-buttons,#portfolio-work .portfolio-filter,#portfolioModal,#final-cta,#backToTop{display: none ;}
#portfolio-work,#portfolio-process{padding: 24px 0;background: #fff;}
.portfolio-gallery,.portfolio-process-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
.portfolio-item,.portfolio-process-card{break-inside: avoid;box-shadow: none;}}
#portfolio-hero p{max-width: 850px;margin: 0 auto;color: #fff;}
#portfolio-hero .hero-buttons{margin-top: 32px;}
#portfolio-work{padding: 100px 0;}
.portfolio-gallery{column-count: 3;column-gap: 25px;}
.portfolio-item{background: #fff;}
.portfolio-item[hidden]{display: none ;}
.portfolio-item button{display: block;width: 100%;padding: 0;border: 0;background: transparent;color: inherit;cursor: pointer;text-align: left;}
.portfolio-item img{width: 100%;min-height: 260px;object-fit: cover;background: linear-gradient(135deg, #eef6ff, #dcecff);}
.portfolio-card-copy{padding: 24px;}
.portfolio-card-copy h3{margin-bottom: 8px;color: var(--primary);}
.portfolio-card-copy p{margin-bottom: 0;}
.portfolio-meta{display: flex;flex-wrap: wrap;gap: 8px;margin-top: 16px;}
.portfolio-meta span{padding: 6px 12px;border-radius: 999px;background: #eef6ff;color: var(--primary);font-size: .82rem;font-weight: 700;}
.portfolio-empty{display: none;padding: 45px;border-radius: 18px;background: #eef7ff;text-align: center;}
.portfolio-empty.show{display: block;}
#portfolio-process{padding: 100px 0;background: #f8fbff;}
.portfolio-process-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 28px;}
.portfolio-process-card{padding: 32px;border-radius: 18px;background: #fff;box-shadow: var(--shadow);}
.portfolio-process-card span{display: flex;align-items: center;justify-content: center;width: 52px;height: 52px;margin-bottom: 18px;border-radius: 50%;background: var(--primary);color: #fff;font-weight: 800;}
.portfolio-modal-image{width: 100%;max-height: 62vh;border-radius: 16px;object-fit: contain;background: #eef6ff;}
.portfolio-modal-copy{padding-top: 25px;}
.portfolio-modal-copy h2{color: var(--primary);}
@media (max-width: 992px) {.portfolio-gallery{column-count: 2;}}
@media (max-width: 650px) {.portfolio-gallery{column-count: 1;}
.portfolio-filter{align-items: stretch;flex-direction: column;}
.filter-btn{width: 100%;}}
noscript{display: block;padding: 18px;background: #fff1d6;color: #714d00;font-weight: 700;text-align: center;}
#portfolio-work{padding: 90px 0;}
.portfolio-filter{display: flex;flex-wrap: wrap;justify-content: center;gap: 11px;margin: 30px 0 38px;}
.filter-btn{padding: 11px 18px;border: 1px solid #cfe0f8;border-radius: 999px;background: #fff;color: #344054;cursor: pointer;font: inherit;font-weight: 700;transition: .2s ease;}
.filter-btn:hover,.filter-btn:focus-visible,.filter-btn.active{border-color: var(--primary);background: var(--primary);color: #fff;outline: none;}
.portfolio-gallery{display: grid ;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 25px;column-count: initial ;}
.portfolio-item{min-width: 0;overflow: hidden;border: 1px solid #dbe9ff;border-radius: 19px;background: #fff;box-shadow: 0 15px 36px rgba(0,0,0,.08);break-inside: avoid;transition: transform .2s ease, box-shadow .2s ease;}
.portfolio-item:hover{transform: translateY(-4px);box-shadow: 0 20px 44px rgba(0,0,0,.12);}
.portfolio-item button{height: 100%;}
.portfolio-item img{display: block;width: 100%;min-height: 0;aspect-ratio: 4 / 3;object-fit: cover;}
.portfolio-card-copy{padding: 24px;}
.portfolio-empty{margin-top: 28px;border: 1px solid #dbe9ff;}
.modal.hidden{display: none ;}
#portfolioModal:not(.hidden){position: fixed;inset: 0;z-index: 3000;display: grid;place-items: center;overflow-y: auto;padding: 24px;background: rgba(9, 18, 32, .78);}
#portfolioModal .modal-content{position: relative;width: min(920px, 100%);max-height: calc(100vh - 48px);overflow-y: auto;padding: 28px;border-radius: 22px;background: #fff;box-shadow: 0 30px 80px rgba(0,0,0,.3);}
#portfolioModal .close-modal{position: absolute;top: 14px;right: 14px;z-index: 2;display: grid;place-items: center;width: 42px;height: 42px;border: 0;border-radius: 50%;background: #fff;color: #172033;box-shadow: 0 7px 20px rgba(0,0,0,.16);cursor: pointer;font-size: 1.5rem;}
.portfolio-modal-image{display: block;width: 100%;max-height: 62vh;border-radius: 16px;object-fit: contain;background: #eef6ff;}
#backToTop{position: fixed;right: 22px;bottom: 22px;z-index: 900;display: grid;place-items: center;width: 46px;height: 46px;border: 0;border-radius: 50%;background: var(--primary);color: #fff;box-shadow: 0 12px 28px rgba(0,0,0,.18);cursor: pointer;opacity: 0;visibility: hidden;transform: translateY(12px);transition: .25s ease;}
#backToTop.show{opacity: 1;visibility: visible;transform: translateY(0);}
@media (max-width: 992px) {.portfolio-gallery{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 650px) {.portfolio-gallery{grid-template-columns: 1fr;}
.portfolio-filter{align-items: stretch;flex-direction: column;}
.filter-btn{width: 100%;}
#portfolioModal{padding: 12px ;}
#portfolioModal .modal-content{max-height: calc(100vh - 24px);padding: 20px;}}
}