/* V19 — show every COMPRO vessel image as a continuous full-width story */
.portfolio-section{padding-bottom:0!important;overflow:hidden}
.portfolio-section>.site-container{max-width:none!important;width:100%!important;padding:0!important}
.portfolio-section .section-intro{width:min(1180px,calc(100% - 48px));margin:0 auto clamp(60px,8vw,110px)!important}

.portfolio-grid{display:block!important;width:100%!important;min-height:0!important}
.portfolio-grid>article{position:relative!important;display:block!important;width:100%!important;
  min-height:clamp(560px,63vw,820px)!important;margin:0!important;overflow:hidden!important;
  background:#031927!important;border:0!important;border-radius:0!important}
.portfolio-grid>article+article{margin-top:-9vw!important}

.portfolio-grid>article .portfolio-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  margin:0!important;border:0!important;border-radius:0!important;clip-path:none!important;
  mask-image:none!important;-webkit-mask-image:none!important;overflow:hidden!important}
.portfolio-grid>article .portfolio-image img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center!important;filter:saturate(.9) contrast(1.04)!important}

/* Alternating atmospheric fade makes each photograph merge with the next */
.portfolio-grid>article .portfolio-image:after{content:""!important;display:block!important;position:absolute!important;inset:0!important;
  background:linear-gradient(90deg,#031927 0%,rgba(3,25,39,.78) 23%,rgba(3,25,39,.12) 62%,#031927 100%),
  linear-gradient(0deg,#031927 0%,transparent 25%,transparent 68%,#031927 100%)!important;pointer-events:none}
.portfolio-grid>article:nth-child(even) .portfolio-image:after{
  background:linear-gradient(270deg,#031927 0%,rgba(3,25,39,.78) 23%,rgba(3,25,39,.12) 62%,#031927 100%),
  linear-gradient(0deg,#031927 0%,transparent 25%,transparent 68%,#031927 100%)!important}
.portfolio-grid>article:nth-child(3n) .portfolio-image img{transform:scale(1.04);object-position:60% center!important}

.portfolio-grid>article .portfolio-meta,
.portfolio-grid>article:nth-child(even) .portfolio-meta{position:absolute!important;z-index:3!important;top:50%!important;bottom:auto!important;
  left:max(7vw,42px)!important;right:auto!important;width:min(440px,38vw)!important;margin:0!important;padding:0!important;
  transform:translateY(-50%)!important;background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;backdrop-filter:none!important;display:block!important}
.portfolio-grid>article:nth-child(even) .portfolio-meta{left:auto!important;right:max(7vw,42px)!important;text-align:right!important}
.portfolio-meta>span{display:block!important;font-size:clamp(6rem,13vw,13rem)!important;line-height:.72!important;
  color:var(--flow-cyan)!important;opacity:.11!important;margin-bottom:-20px!important}
.portfolio-meta h3{font-size:clamp(2rem,4.2vw,4.5rem)!important;line-height:1!important;margin:0 0 16px!important}
.portfolio-meta p{font-size:1rem!important;color:#cfeaf5!important;max-width:34ch!important}
.portfolio-grid>article:nth-child(even) .portfolio-meta p{margin-left:auto!important}

/* Compact visual index for all seven images */
.portfolio-grid:after{content:"01  /  02  /  03  /  04  /  05  /  06  /  07";display:block;
  padding:42px 7vw 70px;color:rgba(111,221,255,.65);font-size:.72rem;letter-spacing:.32em;text-align:center;
  background:#031927}

@media(max-width:700px){
 .portfolio-section .section-intro{width:calc(100% - 40px)}
 .portfolio-grid>article{min-height:650px!important}.portfolio-grid>article+article{margin-top:-55px!important}
 .portfolio-grid>article .portfolio-image:after,.portfolio-grid>article:nth-child(even) .portfolio-image:after{
   background:linear-gradient(0deg,#031927 0%,rgba(3,25,39,.82) 30%,rgba(3,25,39,.08) 65%,#031927 100%)!important}
 .portfolio-grid>article .portfolio-meta,.portfolio-grid>article:nth-child(even) .portfolio-meta{
   top:auto!important;bottom:90px!important;left:24px!important;right:24px!important;width:auto!important;
   text-align:left!important;transform:none!important}
 .portfolio-grid>article:nth-child(even) .portfolio-meta p{margin-left:0!important}
 .portfolio-meta>span{font-size:6.5rem!important}
}