.work-section{background:#fff}
.work-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2.3rem}
.work-head>div{max-width:800px}
.work-head h2{margin-bottom:.7rem}
.work-head p{max-width:680px;margin-bottom:0;color:var(--muted)}
.work-head .button{flex:0 0 auto}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.work-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 16px 46px rgba(0,34,41,.08)}
.work-card[hidden]{display:none}
.work-card__visual{position:relative;overflow:hidden;aspect-ratio:1.7;background:#dfeaec}
.work-shot{overflow:hidden;background:#eaf2f3}
.work-shot.after{position:absolute;inset:0}
.work-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.work-shot:not(.after){position:absolute;z-index:3;left:20px;bottom:20px;width:28%;aspect-ratio:1.43;border:3px solid #fff;border-radius:10px;box-shadow:0 15px 38px rgba(0,34,41,.38)}
.work-shot span{position:absolute;z-index:4;top:10px;left:10px;padding:.32rem .54rem;border-radius:6px;background:rgba(0,34,41,.9);color:#fff;font:800 .63rem "Manrope",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.work-shot.after span{background:var(--cyan);color:var(--ink)}
.work-card__body{display:flex;flex:1;flex-direction:column;padding:1.35rem 1.45rem 1.5rem}
.work-sector{display:block;margin-bottom:.45rem;color:#087f99;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.work-card h3{margin-bottom:.55rem;font-size:1.25rem}
.work-card p{margin-bottom:1.1rem;color:var(--muted);font-size:.84rem}
.work-link{margin-top:auto;color:#087f99;font:800 .8rem "Manrope",sans-serif;text-decoration:none}
.work-link:after{content:" →"}
.work-link:hover{text-decoration:underline}
.work-note{margin-top:1.25rem;color:var(--muted);font-size:.76rem}
.work-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.4rem}
.work-filter{padding:.56rem .8rem;border:1px solid #bdd4d9;border-radius:99px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer}
.work-filter[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.work-grid:not(.portfolio-grid) .work-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,2.25fr) minmax(280px,1fr)}
.work-grid:not(.portfolio-grid) .work-card:first-child .work-card__visual{min-height:510px;aspect-ratio:auto}
.work-grid:not(.portfolio-grid) .work-card:first-child .work-card__body{justify-content:center;padding:clamp(2rem,4vw,4rem)}
.work-grid:not(.portfolio-grid) .work-card:first-child h3{font-size:clamp(1.8rem,3vw,2.7rem)}
.work-grid:not(.portfolio-grid) .work-card:first-child p{font-size:1rem}
.portfolio-hero{position:relative;overflow:hidden;padding:clamp(5rem,9vw,8rem) 0 4.5rem;background:radial-gradient(40rem 32rem at 88% 2%,rgba(4,200,243,.18),transparent 68%)}
.portfolio-hero:before{content:"07";position:absolute;right:-.03em;top:-.15em;font:800 min(40vw,520px)/1 "Manrope";color:rgba(4,200,243,.04)}
.portfolio-hero .wrap{position:relative}
.portfolio-hero h1{max-width:950px}
.portfolio-intro{max-width:760px}
.portfolio-grid{grid-template-columns:1fr;gap:clamp(2.2rem,5vw,4.5rem)}
.portfolio-grid .work-card{border:0;border-radius:28px;background:var(--mist);box-shadow:0 24px 70px rgba(0,34,41,.12)}
.portfolio-grid .work-card__visual{aspect-ratio:1.72}
.portfolio-grid .work-card__body{order:-1;display:grid;grid-template-columns:minmax(220px,.65fr) minmax(300px,1fr) auto;align-items:end;gap:1rem 2.5rem;padding:2rem 2.2rem}
.portfolio-grid .work-sector{grid-column:1;margin:0}
.portfolio-grid .work-card h2{grid-column:1;margin:.35rem 0 0;font-size:clamp(1.65rem,3vw,2.35rem)}
.portfolio-grid .work-card p{grid-column:2;grid-row:1/3;margin:0;font-size:1rem}
.portfolio-grid .work-link{grid-column:3;grid-row:1/3;align-self:center;max-width:190px}
.portfolio-proof{padding:2rem 0;border-block:1px solid var(--line);background:var(--mist)}
.portfolio-proof__inner{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem 2rem;color:var(--ink);font-size:.82rem;font-weight:800}
.portfolio-proof__inner span:before{content:"✓";margin-right:.45rem;color:var(--green)}

@media(max-width:920px){.work-head{align-items:flex-start;flex-direction:column}
.work-grid{grid-template-columns:1fr}
.work-grid:not(.portfolio-grid) .work-card:first-child{display:flex}
.work-grid:not(.portfolio-grid) .work-card:first-child .work-card__visual{min-height:0;aspect-ratio:1.7}
.portfolio-grid .work-card__body{grid-template-columns:1fr auto}
.portfolio-grid .work-card p{grid-column:1/3;grid-row:auto}
.portfolio-grid .work-link{grid-column:2;grid-row:1/3}
}

@media(max-width:640px){.work-head .button{width:100%}
.work-shot:not(.after){left:12px;bottom:12px;width:35%;border-width:2px}
.work-shot span{top:7px;left:7px;font-size:.55rem}
.portfolio-hero{padding-top:4rem}
.portfolio-proof__inner{display:grid;justify-content:start}
.portfolio-grid{gap:2rem}
.portfolio-grid .work-card{border-radius:18px}
.portfolio-grid .work-card__body{display:flex;align-items:flex-start;gap:0;padding:1.3rem}
.portfolio-grid .work-card h2{font-size:1.55rem}
.portfolio-grid .work-card p{margin:.7rem 0 1rem}
.portfolio-grid .work-link{max-width:none}
.portfolio-grid .work-card__visual{aspect-ratio:1.25}
}