.portfolio-page .site-header { background: #fff; }
.portfolio-cover { position: relative; isolation: isolate; overflow: hidden; min-height: 660px; background: #f8fafb; }
.portfolio-photo { position: absolute; inset: 0 0 0 44%; z-index: -3; background: linear-gradient(0deg,#00263bc9,transparent 45%),url('assets/portfolio-capacete-horizontal.png') 65% center/cover; }
.portfolio-cover:before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg,#fff,#f5f7f8); clip-path: polygon(0 0,43% 0,65% 62%,48% 100%,0 100%); }
.portfolio-ribbon { position: absolute; inset: 0; z-index: -2; background: linear-gradient(130deg,#afd7cb 26%,#008052 55%,#004e35); clip-path: polygon(41% 0,48% 0,71% 62%,54% 100%,47% 100%,64% 62%); }
.portfolio-content { width: 62%; padding: 48px 0 58px 6%; }
.portfolio-logo { display: block; width: min(390px,65%); height: auto; margin-bottom: 36px; }
.portfolio-content h1 { font-size: clamp(32px,4.25vw,78px); line-height: 1.08; font-weight: 900; letter-spacing: -1.7px; color: #061d64; }
.portfolio-content h1:before { content: ''; display: block; width: 115px; height: 5px; margin-bottom: 20px; background: #008052; }
.portfolio-content h1 span { color: #00663e; }
.portfolio-subtitle { color: #3f505b; font-size: clamp(13px,1.35vw,23px); line-height: 1.5; letter-spacing: 3px; margin: 22px 0 30px; }
.portfolio-download { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 17px 26px; border-radius: 30px; background: linear-gradient(140deg,#00885b,#00553f); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; transition: transform .2s,box-shadow .2s; }
.portfolio-download svg { width: 25px; height: 25px; flex-shrink: 0; }
.portfolio-download:hover { transform: translateY(-3px); box-shadow: 0 8px 22px #00553f30; }
.portfolio-download:focus-visible { outline: 3px solid #0a66c2; outline-offset: 4px; }
.portfolio-motto { position: absolute; top: 0; right: 0; margin: 0; padding: 34px 4% 38px 7%; background: #005c40ed; color: #e1f3e9; font-size: clamp(13px,1.25vw,22px); letter-spacing: 3px; line-height: 1.6; clip-path: polygon(0 0,100% 0,100% 100%,22% 100%); }
.portfolio-motto:before,.portfolio-caption:before { content: ''; display: block; width: 62px; height: 4px; margin-bottom: 15px; background: #00d58d; }
.portfolio-caption { position: absolute; right: 4%; bottom: 26px; color: #fff; text-align: right; font-size: 12px; line-height: 1.6; letter-spacing: 2px; }
.portfolio-caption:before { margin-left: auto; }
@media(min-width:1700px) { .portfolio-cover { min-height: 800px; } .portfolio-content { padding-top: 65px; } }
@media(max-width:900px) { .portfolio-cover { min-height: 570px; } .portfolio-content { padding-left: 5%; width: 68%; } .portfolio-logo { margin-bottom: 30px; } .portfolio-subtitle { letter-spacing: 1.5px; } .portfolio-motto { font-size: 12px; letter-spacing: 1.5px; } .portfolio-caption { max-width: 28%; font-size: 10px; } }
@media(max-width:650px) {
 .portfolio-cover { min-height: 0; padding-bottom: 260px; }
 .portfolio-content { width: 100%; padding: 32px 6% 36px; background: #fafcfd; }
 .portfolio-cover:before,.portfolio-ribbon { display: none; }
 .portfolio-photo { inset: auto 0 0; height: 260px; background-position: 70% 65%; }
 .portfolio-logo { width: 250px; max-width: 80%; margin-bottom: 28px; }
 .portfolio-content h1 { font-size: clamp(28px,7.8vw,48px); letter-spacing: -1px; }
 .portfolio-subtitle { font-size: 13px; }
 .portfolio-download { font-size: 15px; padding: 16px 21px; }
 .portfolio-motto { top: auto; bottom: 140px; padding: 14px 6% 14px 35px; font-size: 10px; }
 .portfolio-motto:before { margin-bottom: 8px; }
 .portfolio-caption { max-width: 85%; right: 6%; bottom: 12px; }
}
/* Translucent chevrons along the photo and text divide. */
.portfolio-cover:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(135deg,#c1c8cc25,#8d999e38);
    clip-path: polygon(46% 13%,50% 13%,68% 62%,51% 100%,47% 100%,64% 62%);
}
.portfolio-ribbon:before {
    content: '';
    position: absolute;
    inset: 0;
    background: #004d363b;
    clip-path: polygon(52% 34%,57% 34%,71% 62%,54% 100%,49% 100%,66% 62%);
}
.portfolio-content:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: #ffffff85;
    clip-path: polygon(0 35%,4% 46%,0 57%,0 51%,1.5% 46%,0 41%);
}
@media(max-width:650px) {
    .portfolio-cover:after,.portfolio-content:after { display: none; }
    .portfolio-photo { background-position: center 62%; }
}
/* Fit the helmet inside the right-hand panel without enlarging the photo. */
.portfolio-photo {
    inset: 0 0 0 43%;
    background-color: #193039;
    background-image: linear-gradient(0deg,#00263b99,transparent 32%), url('assets/portfolio-capacete-horizontal.png');
    background-size: 100% 100%, cover;
    background-position: center, right center;
    background-repeat: no-repeat;
}
@media(max-width:650px) {
    .portfolio-photo {
        inset: auto 0 0;
        height: 260px;
        background-size: 100% 100%, cover;
        background-position: center, center;
    }
}
/* Compensate for the transparent left margin inside the logo asset. */
.portfolio-logo { transform: translateX(-12%); }