/* ==========================================
   MARTIN PICH
   STYLE V1.0
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --white:#ffffff;
    --black:#111111;
    --gray:#7b7b7b;
    --light:#f6f6f6;

    --max-width:1400px;
    --header-height:100px;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Segoe UI",sans-serif;
    font-weight:300;

    color:var(--black);
    background:var(--white);

    line-height:1.6;
    overflow-y:auto;
    overflow-x:hidden;

}

/* ---------------------------- */

.container{

    width:min(92%,var(--max-width));
    margin:auto;

}

/* ---------------------------- */

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    background:white;

    z-index:1000;

    border-bottom:1px solid #ececec;

}

.header .container{


    display:flex;

    justify-content:space-between;

    align-items:center;

    height:100px;

    padding-left:clamp(20px,3vw,40px);
   padding-right:clamp(20px,3vw,40px);

}


/* ---------------------------- */

.logo{

    display:flex;
    align-items:center;

}

.logo img{

    height:clamp(48px,4vw,60px);
    width:auto;

    display:block;

    transition:0.25s;

}

.logo:hover img{

    opacity:.75;

}

/* ---------------------------- */

.navigation{

    display:flex;

    gap:clamp(20px,2vw,38px);

}

.navigation a{

    display:inline-block;

    text-decoration:none;

    color:var(--black);

    font-size:clamp(16px,1.1vw,20px);

    text-transform:uppercase;

    letter-spacing:1px;

    transition:.25s;

    position:relative;

    padding-bottom:8px;

}



.navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:var(--black);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .25s;

}

.navigation a:hover::after{

    transform:scaleX(1);

}

.navigation a.active::after{

    transform:scaleX(1);

}

/* ---------------------------- */

.hero{

    width:min(90%,1400px);

    margin:0 auto;

    padding-top:40px;
    padding-bottom:0;

    height:calc(100dvh - var(--header-height));

   overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:clamp(30px,4vw,60px);

}

/* ---------------------------- */

.subtitle{

    font-size:16px;

    color:var(--gray);

    text-transform:uppercase;

    letter-spacing:3px;

    margin-bottom:30px;

}

/* ---------------------------- */

.hero h1{

    font-size:clamp(58px,4vw,76px);

    font-weight:300;

    line-height:0.92;

    margin-bottom:50px;

}
.hero h1 .big{

     font-size:clamp(82px,6vw,110px);

    letter-spacing:4px;

}

.hero h1 span:last-child{

    font-size:clamp(52px,4vw,72px);

}

/* ---------------------------- */

.description{

    font-size:clamp(24px,2vw,31px);
    font-weight:300;

    line-height:1.3;

    max-width:630px;

    color:#555;

      text-align:justify;
    text-justify:inter-word;

}

/* ---------------------------- */

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:auto;

    height:clamp(500px,78vh,820px);

    max-width:100%;

    object-fit:contain;

    display:block;

}

/* ---------------------------- */






.hidden{opacity:0;visibility:hidden}
#intro{position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:5000;transition:all .8s cubic-bezier(.22,.61,.36,1)}
#intro img{

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:min(520px,55vw);

    transition:
        top 1.8s cubic-bezier(.22,.61,.36,1),
        left 1.8s cubic-bezier(.22,.61,.36,1),
        width 1.8s cubic-bezier(.22,.61,.36,1);

}
#intro.animate{pointer-events:none}
#intro.fade{opacity:0}
.header,.hero{transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.22,.61,.36,1)}
.hero.hidden{transform:translateY(18px)}
.header.show,.hero.show{opacity:1;visibility:visible;transform:none}
.timeline-separator{
    height:28px;
}

.menu-toggle{

    display:none;

}
@media (max-width:900px){

/* ---------------- HEADER ---------------- */

.header .container{

    height:80px;

    padding:0 20px;

}

.logo img{

    height:40px;

}

.menu-toggle{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    width:42px;

    height:42px;

    background:none;

    border:none;

    cursor:pointer;

    padding:0;

}

.menu-toggle span{

    display:block;

    width:30px;

    height:2px;

    background:#111;

    border-radius:2px;

    transition:all .3s ease;

}

.menu-toggle.open span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.menu-toggle.open span:nth-child(2){

    opacity:0;

    width:0;

    transform:scaleX(0);

}

.menu-toggle.open span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}

/* ---------------- MENU ---------------- */

.navigation{

    display:none;

   position:fixed;

    top:80px;

    left:0;

    width:100%;
    
    right:0;
    
    z-index:999;

    background:#fff;

    flex-direction:column;

    gap:0;

    border-bottom:1px solid #ececec;

}

.navigation.show{

    display:flex;

}

.navigation a{

    width:100%;

    padding:18px 24px;

    border-bottom:1px solid #ececec;

}

/* ---------------- HERO ---------------- */

.hero{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    text-align:center;

    width:min(92%,600px);

    min-height:auto;

    height:auto;

    padding:55px 0 30px;

    gap:28px;

}

.hero-image{

    order:1;

    width:100%;

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:68%;

    max-width:300px;

    height:auto;

    max-height:none;

    object-fit:contain;

}

.hero-text{

    order:2;

}

.hero h1{

    font-size:32px;

    line-height:1;

    margin-bottom:20px;

}

.hero h1 .big{

    font-size:46px;

}

.hero h1 span:last-child{

    font-size:32px;

}

.description{

    font-size:21px;

    line-height:1.5;

    text-align:center;

    max-width:100%;

}

}