/* ===========================================================================
   Portfolio page (page-id 75)
   The hero uses the same service-main-hero-bg.webp as the Services/
   Industries/Technologies/Solutions/Locations hubs, flush-start treatment.
   A bespoke black-background hero was tried here briefly and reverted.
   The grid itself (.posts-grid/.article-card/...) is the theme's own
   states-side-posts-grid widget, already styled globally - only this page's
   section spacing needs a rule here.
   =========================================================================== */
/* theme default is .site-content{padding-top:40px} - drop it so the hero
   starts flush against the header, matching the other hub pages that share
   this same background image */
body.sts-page-75 .site-content {
    padding-top: 0;
    padding-bottom: 0;
}

.sts-75 .sts-page-header .entry-thumbnail img {
    object-position: center center;
}

.sts-75 .sts-page-header .overlay {
    background-image: linear-gradient(0deg, #000000, #00000000);
}

/* Theme default puts a backdrop-filter: blur(30px) glass overlay on every
   .article-card.portfolio (theme.css, sitewide - the homepage's identical
   cards keep it). Turned off just here: 30px of backdrop blur repainting
   continuously under the custom hover-cursor's rAF loop is exactly what was
   making the cursor feel slow/stuck while moving over these cards. */
.sts-75 .article-card.portfolio::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Without --display set, `display: var(--display)` on .e-con is invalid and
   the container never establishes its box - the section then renders
   full-bleed edge-to-edge instead of staying inside the layout width, same
   bug documented in sts-tech-groups.css. */
.sts-75 .sts-element.sts-element-pf-grid {
    --display: flex;
    --flex-direction: column;
    --gap: 18px 18px;
    --row-gap: 18px;
    --column-gap: 18px;
    --padding-top: 140px;
    --padding-bottom: 140px;
}

@media (max-width: 1024px) {
    .sts-75 .sts-element.sts-element-pf-grid { --padding-top: 96px; --padding-bottom: 96px; }
}

@media (max-width: 767px) {
    .sts-75 .sts-element.sts-element-pf-grid { --padding-top: 70px; --padding-bottom: 70px; }
}