@charset "UTF-8";
/* CSS Document */
/* =========================================
   MODERN FLUID HEADER
   LEFTHAND STYLE
========================================= */

header {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    height: clamp(72px, 5vw, 92px);
    z-index: 99999;
    display: flex;
    align-items: center;
    padding-inline: clamp(16px, 3vw, 48px);
	user-select: none;
}
/* =========================================
   INNER
========================================= */

.header-inner {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
}

/* =========================================
   COLUMNS
========================================= */
.header-col {
    display: flex;
    align-items: center;
    min-width: 0;
}
/* LEFT */
.header-col.left {
    justify-content: flex-start;
}
/* CENTER */
.header-col.center {
    justify-content: center;
}
/* RIGHT */
.header-col.right {
    justify-content: flex-end;
}

/* =========================================
   STORY HEADER
========================================= */

.header-light{

    color:white;

}

.header-light .text-logotype,
.header-light .jelly-btn,
.header-light .jelly-btn span{

    color:white;

}

main {
  display: block;
}
section {	
}
.section-inner {
  --pad-top: clamp(2rem, 6vw, 5rem);
  --pad-bottom: clamp(2rem, 6vw, 5rem);
  --pad-x: clamp(1.25rem, 4vw, 3rem);

  max-width: 90%;
  margin-inline: auto;

  padding-top: var(--pad-top);
  padding-bottom: var(--pad-bottom);
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

/* mobile: 1 stĺpec */
@media (max-width: 767px) {
  .cols-2 {
    grid-template-columns: 1fr;
  }
}
.section--hero {
	background: var(--color-bg-hero);
	color: var(--color-dark);
	display: grid;
    place-content: center;
    text-align: center;
	min-height: 100vh;
}
.section--about-home {
	background: var(--color-blue);
	display: grid;
    place-content: center;
    text-align: center;
	min-height: 100vh;
}
.manifesto {
	min-height: 100vh;
}
.section--clients-home {
	background: var(--color-neutral-200);
	min-height: 75vh;
}
.section--center-center {
	display: grid;
    place-content: center;
    text-align: center;
}


/* STORYTELLING */
.manifesto-story{
position:relative;
height:300vh;
}
.manifesto-sticky,
.image-story-sticky{
position:sticky;
top:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.manifesto-item{
position:absolute;
text-align:center;
max-width:900px;
padding:2rem;
opacity:0;
transform:translateY(60px) scale(.96);
transition:all .8s ease;
}
.manifesto-item.active{
opacity:1;
transform:translateY(0) scale(1);
}

.manifesto-item p{
font-size:clamp(1rem,1.5vw,1.4rem);
opacity:.7;
max-width:700px;
margin:auto;
}
.image-story-section{
position:relative;
height:400vh;
}
.image-story-sticky{
position:sticky;
    top:0;
    height:100vh;
    overflow:hidden;
}
.story-copy{

    position:absolute;
    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    z-index:3;

    pointer-events:none;

}
.story-copy h2{

    text-align:center;

    margin:0;
	  transition:
    opacity .4s ease;

}
/*.story-images{
position:relative;
width:min(80vw,900px);
height:min(60vh,700px);
display:flex;
align-items:center;
justify-content:center;
}*/
.story-image{

    position:absolute;
 opacity:1;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:1;

}
/*.story-image.active{
opacity:1;
transform:scale(1);
}*/
.story-overlay{

    position:absolute;
    inset:0;

    background:
    rgba(0,0,0,.25);

    z-index:2;

}
/* =========================================
   STORY TITLE INTRO / OUTRO
========================================= */

#story-title{

    opacity:0;

    transform:translateY(40px);

    transition:
    opacity .6s ease,
    transform .6s ease;

}

#story-title.story-active{

    opacity:1;

    transform:translateY(0);

}

/* =========================================
   MOBILE HEADER
========================================= */

@media screen and (max-width:768px){

    header{

        height:120px;

        padding-inline:24px;

    }
.header-inner{

    position:relative;

    width:100%;
    height:100%;

}

.header-col.left{

    position:absolute;

    left:50%;
    bottom:10px;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;

}

.header-col.center{

    position:absolute;

    left:0;
    top:20px;

}

.header-col.right{

    position:absolute;

    right:0;
    top:20px;

}
}