/* 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;}
noscript{display: block;padding: 18px;background: #fff1d6;color: #714d00;font-weight: 700;text-align: center;}
#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;margin-top: 0;}
.portfolio-item{display: flex;min-width: 0;width: 100%;margin: 0;overflow: hidden;border: 1px solid #173a61;border-radius: var(--portfolio-radius);background: linear-gradient(155deg, #0a2342, #06172d);box-shadow: 0 18px 42px rgba(3, 18, 38, .2);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: #3f8fff;box-shadow: 0 24px 54px rgba(5, 34, 68, .3), 0 0 0 1px rgba(123, 196, 255, .14);}
.portfolio-item[hidden]{display: none ;}
.portfolio-item button{display: flex;flex: 1;min-width: 0;width: 100%;height: auto;padding: 0;border: 0;background: transparent;color: #fff;cursor: pointer;flex-direction: column;align-items: stretch;text-align: left;}
.portfolio-item button:focus-visible{outline: 3px solid #7bc4ff;outline-offset: -4px;}
/* Artwork keeps its own proportions inside a stable frame at every breakpoint. */
.portfolio-item button > img,.portfolio-item .tcs-placeholder{
        width: 100%;height: 260px;min-height: 260px;flex: 0 0 auto;
}

  .portfolio-request-collection{grid-column:1 / -1;min-width:0;margin-top:6px;padding:28px;border:1px solid #dbe9ff;border-radius:18px;background:#f6faff;}
  .portfolio-request-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px;}
  .portfolio-request-heading h3{margin:0;color:#12365d;font-size:clamp(1.4rem,3vw,1.9rem);}
  .portfolio-request-heading p{max-width:520px;margin:0;color:#536071;line-height:1.6;}
  .portfolio-request-eyebrow{display:block;margin-bottom:6px;color:#315b88;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
  .portfolio-request-stack{display:grid;gap:12px;}
  .portfolio-item.portfolio-stack-card{display:block;box-shadow:0 6px 18px rgba(3,18,38,.11);}
  .portfolio-item.portfolio-stack-card:hover{transform:none;box-shadow:0 10px 26px rgba(3,18,38,.18);}
  .portfolio-stack-card>summary{display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;gap:16px;min-height:82px;padding:18px 22px;list-style:none;color:#fff;cursor:pointer;}
  .portfolio-stack-card>summary::-webkit-details-marker{display:none;}
  .portfolio-stack-card>summary:focus-visible{outline:3px solid #7bc4ff;outline-offset:-5px;border-radius:inherit;}
  .portfolio-stack-label{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere;}
  .portfolio-stack-label strong{color:#e9f5ff;font-size:1.06rem;line-height:1.4;}
  .portfolio-stack-label small{color:#b6cee6;font-size:.84rem;line-height:1.5;}
  .portfolio-stack-toggle{position:relative;width:32px;height:32px;border:1px solid #4272a2;border-radius:50%;background:#1f73e82a;}
  .portfolio-stack-toggle:before,.portfolio-stack-toggle:after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2px;border-radius:2px;background:#bfe2ff;transform:translate(-50%,-50%);}
  .portfolio-stack-toggle:after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .22s ease;}
  .portfolio-stack-card[open]>summary .portfolio-stack-toggle:after{transform:translate(-50%,-50%) rotate(0deg);}
  .portfolio-stack-card[open]>summary{background:#1f73e81f;}
  .portfolio-stack-card>button{display:grid;grid-template-columns:minmax(160px,26%) minmax(0,1fr);border-top:1px solid #25486e;}
  .portfolio-stack-card:not([open])>button{display:none;}
  .portfolio-stack-card>button>img,.portfolio-stack-card>button>.tcs-placeholder{height:240px;min-height:240px;align-self:center;}
  .portfolio-stack-card .portfolio-card-copy{justify-content:center;}
  .portfolio-stack-card .portfolio-card-copy h4{margin:0 0 9px;color:#9fd3ff;font-family:Poppins,Inter,Arial,sans-serif;font-size:1.12rem;}
  .portfolio-stack-card .portfolio-meta{margin-top:0;}
  .portfolio-stack-action{display:inline-flex;gap:8px;margin-top:16px;color:#bfe2ff;font-size:.86rem;font-weight:750;text-decoration:underline;text-underline-offset:4px;}
  @media(max-width:760px){
    .portfolio-request-collection{padding:20px;}
    .portfolio-request-heading{align-items:flex-start;flex-direction:column;gap:10px;}
    .portfolio-stack-card>button{grid-template-columns:minmax(140px,32%) minmax(0,1fr);}
  }
  @media(max-width:520px){
    .portfolio-request-collection{padding:14px;}
    .portfolio-stack-card>summary{padding:16px;}
    .portfolio-stack-card>button{grid-template-columns:1fr;}
    .portfolio-stack-card>button>img{height:220px;min-height:220px;}
    .portfolio-stack-card>button>.tcs-placeholder{height:140px;min-height:140px;}
  }
  @media(prefers-reduced-motion:reduce){.portfolio-stack-toggle:after{transition:none;}}
.portfolio-item button > img{display: block;aspect-ratio: auto;object-fit: contain;object-position: center;padding: 12px;background: linear-gradient(135deg, #e8eef7, #f8fbff);}
.portfolio-item:hover img{transform: none;}
.portfolio-item img.portfolio-document-preview{
        object-fit: contain;
        object-position: center top;
        background: linear-gradient(135deg, #e8eef7, #f8fbff);
        padding: 12px;
}
.portfolio-item:hover img.portfolio-document-preview{transform: none;}
.portfolio-card-copy{display: flex;flex: 1;width: 100%;min-width: 0;flex-direction: column;padding: 24px;overflow-wrap: anywhere;background: linear-gradient(180deg, rgba(10, 35, 66, .98), #06172d);}
.portfolio-card-copy h3{margin-bottom: 8px;color: #9fd3ff;font-size: 1.25rem;}
.portfolio-card-copy p{margin-bottom: 0;color: #d4e5f6;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: 1px solid rgba(123, 196, 255, .26);border-radius: 999px;background: rgba(31, 115, 232, .22);color: #bfe2ff;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);max-height: calc(100dvh - 48px);overflow-y: auto;padding: 64px 28px 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;}
#portfolioModal .close-modal:focus-visible{outline: 3px solid #1f73e8;outline-offset: 3px;}
.portfolio-modal-image{display: block;width: 100%;height: auto;max-height: 62vh;max-height: 62dvh;border-radius: 12px;object-fit: contain;background: #eef6ff;}
.portfolio-modal-actions{display: flex;flex-wrap: wrap;gap: 12px;}
.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{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));align-items: stretch;}
.portfolio-filter .filter-btn{width: 100%;flex: 0 0 auto;}
.portfolio-filter .filter-btn[data-filter="all"]{grid-column: 1 / -1;}
#portfolio-hero .hero-buttons,#final-cta .cta-buttons{align-items: stretch;flex-direction: column;}
#portfolio-hero .btn,#final-cta .btn{width: 100%;}
#portfolioModal:not(.hidden){padding: 12px;}
#portfolioModal .modal-content{max-height: calc(100vh - 24px);max-height: calc(100dvh - 24px);padding: 60px 20px 20px;}
.portfolio-modal-actions{flex-direction: column;}}
@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 {.tcs-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;}}

/* Placeholder artwork shares the navy project-card palette. */
.portfolio-gallery .tcs-placeholder{
  border-bottom-color: rgba(123, 196, 255, .22);
  background:
    radial-gradient(circle at 82% 18%, rgba(78, 166, 255, .22), transparent 30%),
    linear-gradient(135deg, #0d2d54, #06162c);
  color: #e9f5ff;
}
.portfolio-gallery .tcs-placeholder small{color: #80c5ff;}
.portfolio-gallery .tcs-placeholder strong{color: #fff;}

@media print{
  .portfolio-gallery .portfolio-item,
  .portfolio-gallery .portfolio-card-copy{background: #fff;color: #111;}
  .portfolio-gallery .portfolio-item{
    border-color: #d7dce3;
    box-shadow: none;
  }
  .portfolio-gallery .portfolio-card-copy h3{color: #1f73e8;}
  .portfolio-gallery .portfolio-card-copy p{color: #333;}
  .portfolio-gallery .portfolio-meta span{
    border-color: #cfe0f8;
    background: #eef6ff;
    color: #1f73e8;
  }
  .portfolio-gallery .tcs-placeholder{
    border-color: #dbe9ff;
    background: #eef6ff;
    color: #172033;
  }
  .portfolio-gallery .tcs-placeholder strong{color: #172033;}
}
}