.portfolio-body{background:#fff;color:#111}.portfolio-body .p3-header nav a,.portfolio-body .p3-actions a{position:relative}.portfolio-body .p3-header nav a.active:after,.portfolio-body .p3-actions a.active:after{content:"";position:absolute;right:0;bottom:-8px;left:0;height:2px;background:#20e887}.portfolio-page{overflow:hidden}.portfolio-hero{width:min(1220px,calc(100% - 48px));margin:0 auto;padding:150px 0 118px}.portfolio-kicker{display:flex;align-items:center;gap:12px;margin:0 0 34px;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.portfolio-kicker span{width:34px;height:3px;background:#20e887}.portfolio-hero h1{max-width:1120px;margin:0;font:700 clamp(64px,8.7vw,132px)/.88 "Manrope",sans-serif;letter-spacing:-.078em}.portfolio-hero h1 em,.portfolio-cta h2 em{font-style:normal}.portfolio-hero h1 i,.portfolio-cta h2 i{display:inline-block;margin-left:.16em;color:#20e887;font-style:normal;font-size:.34em;vertical-align:.15em;transform:rotate(-9deg)}.portfolio-hero-bottom{margin-top:68px;display:flex;align-items:flex-end;justify-content:space-between;gap:60px}.portfolio-hero-bottom>p{max-width:590px;margin:0;color:#595b5a;font-size:18px;line-height:1.6}.portfolio-hero-bottom>a{display:flex;align-items:center;gap:34px;padding:0 0 9px;border-bottom:1px solid #111;font-size:14px;font-weight:700}.portfolio-projects{width:min(1500px,calc(100% - 28px));margin:0 auto;padding:14px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;gap:14px;background:#111}.portfolio-project{position:relative;grid-column:span 6;height:clamp(350px,34vw,520px);overflow:hidden;background:#242424}.portfolio-project:nth-child(1){grid-column:span 8}.portfolio-project:nth-child(2){grid-column:span 4}.portfolio-project:nth-child(3){grid-column:span 5}.portfolio-project:nth-child(4){grid-column:span 7}.portfolio-project:nth-child(5){grid-column:span 7}.portfolio-project:nth-child(6){grid-column:span 5}.portfolio-project:nth-child(7){grid-column:span 4}.portfolio-project:nth-child(8){grid-column:span 8}.portfolio-project:nth-child(9){grid-column:span 9}.portfolio-project:nth-child(10){grid-column:span 3}.portfolio-project:nth-child(11){grid-column:span 5}.portfolio-project:nth-child(12){grid-column:span 7}.portfolio-project img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .35s}.portfolio-project:hover img{transform:scale(1.035)}.project-number{position:absolute;z-index:2;top:18px;left:18px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#20e887;color:#07140d;font-size:11px;font-weight:800}.portfolio-project>div{position:absolute;right:0;bottom:0;left:0;padding:65px 24px 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.76))}.portfolio-project h2{margin:0;font:700 25px/1.05 "Manrope",sans-serif;letter-spacing:-.04em}.portfolio-project p{margin:0;color:rgba(255,255,255,.72);font-size:12px;text-align:right}.portfolio-cta{width:min(1220px,calc(100% - 48px));margin:150px auto;padding:115px 40px;background:#111;color:#fff;text-align:center}.portfolio-cta>p{margin:0 0 22px;color:#a8aaa9;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.portfolio-cta h2{margin:0;font:700 clamp(48px,6.4vw,92px)/.94 "Manrope",sans-serif;letter-spacing:-.065em}.portfolio-cta .button{margin-top:42px;background:#20e887;border-color:#20e887;color:#07140d}.portfolio-cta .button:hover{background:#fff;border-color:#fff}.portfolio-body .p3-footer{margin-top:0}
@media(max-width:950px) and (min-width:701px){.portfolio-projects{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-project,.portfolio-project:nth-child(n){grid-column:span 1;height:50vw}.portfolio-project:nth-child(1),.portfolio-project:nth-child(6),.portfolio-project:nth-child(9){grid-column:1/-1;height:56vw}}
@media(max-width:700px){.portfolio-hero{width:calc(100% - 36px);padding:92px 0 74px}.portfolio-kicker{margin-bottom:24px}.portfolio-hero h1{font-size:clamp(52px,16vw,76px)}.portfolio-hero-bottom{margin-top:40px;align-items:flex-start;flex-direction:column;gap:30px}.portfolio-hero-bottom>p{font-size:16px}.portfolio-projects{width:calc(100% - 18px);padding:8px;grid-template-columns:1fr;gap:8px}.portfolio-project,.portfolio-project:nth-child(n){grid-column:auto;height:68vw;min-height:260px}.project-number{top:12px;left:12px;width:36px;height:36px}.portfolio-project>div{padding:55px 16px 16px}.portfolio-project h2{font-size:20px}.portfolio-project p{max-width:125px;font-size:10px}.portfolio-cta{width:calc(100% - 32px);margin:85px auto;padding:76px 20px}.portfolio-cta h2{font-size:44px}}
@media(prefers-reduced-motion:reduce){.portfolio-project img{transition:none}}
.portfolio-page .portfolio-project img,.portfolio-page .portfolio-project:hover img{filter:grayscale(0)!important}

/* Full-bleed section backgrounds with constrained inner content. */
.portfolio-hero{width:100%;padding-right:max(24px,calc((100vw - 1220px)/2));padding-left:max(24px,calc((100vw - 1220px)/2));background:#111;color:#fff}
.portfolio-hero-bottom>p{color:#b9bcba}.portfolio-hero-bottom>a{border-bottom-color:#fff}
.portfolio-projects{width:100%;margin-right:0;margin-left:0;padding-right:max(14px,calc((100vw - 1500px)/2 + 14px));padding-left:max(14px,calc((100vw - 1500px)/2 + 14px))}
.portfolio-cta{width:100%;margin-right:0;margin-bottom:0;margin-left:0;padding-right:max(40px,calc((100vw - 1220px)/2 + 40px));padding-left:max(40px,calc((100vw - 1220px)/2 + 40px))}
@media(max-width:700px){.portfolio-hero{width:100%;padding-right:18px;padding-left:18px}.portfolio-projects{width:100%;padding-right:8px;padding-left:8px}.portfolio-cta{width:100%;margin-right:0;margin-left:0}}

/* Align the portfolio page with the main site's editorial system. */
.portfolio-body .p3-header{background:#111;color:#fff;box-shadow:0 0 0 100vmax #111;clip-path:inset(0 -100vmax)}
.portfolio-body .p3-header-logo img{filter:grayscale(1) brightness(0) invert(1)}
.portfolio-body .p3-header .button{background:#20e887;border-color:#20e887;color:#07140d}
.portfolio-body .p3-header .button:hover{background:#fff;border-color:#fff;color:#111}
.portfolio-body .p3-header nav a.active:after,.portfolio-body .p3-actions a.active:after{background:#20e887}
.portfolio-projects{padding-top:26px;padding-bottom:26px;background:#fff;gap:14px}
.portfolio-project{border-radius:18px;background:#eceeeb}
.portfolio-project>div{padding:76px 24px 22px;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.project-number{top:16px;left:16px;box-shadow:0 5px 18px rgba(0,0,0,.12)}
@media(max-width:700px){.portfolio-projects{padding-top:9px;padding-bottom:9px;gap:9px}.portfolio-project{border-radius:14px}}

/* Cohesive portfolio flow. */
.portfolio-index-bar{width:100%;padding:34px max(24px,calc((100vw - 1220px)/2));display:flex;align-items:flex-end;justify-content:space-between;gap:50px;border-bottom:1px solid #dedfdb;background:#fff}
.portfolio-index-bar>div{display:grid;gap:5px}.portfolio-index-bar span{color:#6a6e6a;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.portfolio-index-bar strong{font:700 22px/1.2 "Manrope",sans-serif;letter-spacing:-.035em}.portfolio-index-bar p{max-width:560px;margin:0;color:#666a66;font-size:12px;line-height:1.55;text-align:right}
.portfolio-projects{padding-top:24px;padding-bottom:120px;background:#f2f3f0;gap:16px}
.portfolio-project{border:1px solid rgba(17,17,17,.08);border-radius:20px;box-shadow:0 7px 24px rgba(20,24,21,.05);transition:transform .35s ease,box-shadow .35s ease}
.portfolio-project:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(20,24,21,.12)}
.portfolio-project:after{content:'↗';position:absolute;z-index:3;top:16px;right:16px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;font-size:15px;font-weight:800;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s}
.portfolio-project:hover:after{opacity:1;transform:translateY(0)}
.portfolio-project h2{font-size:24px}.portfolio-project p{letter-spacing:.01em}
.portfolio-cta{margin-top:0}
@media(max-width:700px){.portfolio-index-bar{padding:25px 18px;align-items:flex-start;flex-direction:column;gap:13px}.portfolio-index-bar p{text-align:left}.portfolio-projects{padding-top:9px;padding-bottom:70px;gap:9px}.portfolio-project{border-radius:15px}.portfolio-project:after{display:none}.portfolio-cta{margin-top:0}}
