.realizacje-page{display:block}

.realizacje-hero{position:relative;min-height:calc(100vh - 103px);display:flex;align-items:flex-end;padding-bottom:clamp(4rem,9vw,8rem)}
.realizacje-hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.realizacje-hero__overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.35) 58%,rgba(0,0,0,.12) 100%)}
.realizacje-hero__content{position:relative;width:min(850px,calc(100% - 2rem));margin-left:clamp(1rem,7vw,7rem);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.realizacje-hero__content h1{max-width:15ch}

.realizacje-intro__inner{max-width:600px;margin-inline:auto;text-align:center}

.realizacje-grid__lead{max-width:700px}
.realizacje-grid__masonry{column-count:3;column-gap:var(--space-3);margin-top:var(--space-3)}
.realizacje-grid__masonry img{width:100%;margin-bottom:var(--space-3);border:var(--border-thin);transition:transform var(--transition-fast),filter var(--transition-fast)}
.realizacje-grid__masonry img:hover{transform:translateY(-6px);filter:contrast(1.05)}

.realizacje-types__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.realizacje-types__grid > *{min-width:0}

.realizacje-creative__grid{display:grid;grid-template-columns:60% 40%;gap:var(--space-4);align-items:center}
.realizacje-creative__text{max-width:700px}
.realizacje-creative__image img{width:100%;border:var(--border-thin)}

.realizacje-selection__inner{max-width:500px;margin-inline:auto;text-align:center}

.realizacje-scope__panel{max-width:700px;margin-inline:auto}

.realizacje-cta{background:linear-gradient(135deg,var(--color-garnet-accent),var(--color-ruby-accent))!important;color:#fff}
.realizacje-cta__inner{max-width:600px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--space-2)}

@media (max-width:1100px){
.realizacje-grid__masonry{column-count:2}
.realizacje-types__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.realizacje-creative__grid{grid-template-columns:1fr}
}

@media (max-width:600px){
.realizacje-grid__masonry{column-count:1}
.realizacje-types__grid{grid-template-columns:1fr}
.realizacje-hero{min-height:70vh}
.realizacje-hero__content{margin:0 var(--space-2)}
}