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

*{
    max-width:100%;
}

html,
body{
    width:100%;
    overflow-x:hidden;
}

.about-hero,
.story-section{
    grid-template-columns:1fr;
    gap:3rem;
}

.timeline-section{
    grid-template-columns:1fr;
}

.hero-text h1{
    font-size:clamp(3rem,9vw,5rem);

    word-break:break-word;
}

.story-left h2,
.quote-section h2{
    font-size:clamp(2.5rem,8vw,4rem);

    word-break:break-word;
}

.logo-box img{
    width:100%;
    max-width:100%;
}
}



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

html,
body{
    width:100%;
    overflow-x:hidden;
}

*{
    min-width:0;
}

.about-hero{
    width:100%;

    min-height:auto;

    padding:5vh 5vw;

    gap:2rem;
}

.logo-box{
    width:100%;
}

.logo-box img{
    width:100%;

    max-width:100%;

    border-radius:2rem;

    display:block;
}

.hero-text{
    width:100%;
}

.hero-text h1{
    font-size:clamp(2.5rem,11vw,4rem);

    line-height:1.05;

    margin:1rem 0 1.5rem;
}

.hero-text p,
.story-right p{
    font-size:0.95rem;

    line-height:1.9;
}



.story-section{
    width:100%;

    padding:2vh 5vw 8vh;

    gap:2rem;
}

.story-left,
.story-right{
    width:100%;
}

.story-left h2{
    margin-top:1rem;

    line-height:1.1;
}
}
@media(max-width:768px){

.top-header{

    padding:1rem 1.2rem;
}

.brand-title{

    font-size:0.72rem;

    letter-spacing:0.18rem;

    line-height:1.5;
}

.hamburger{

    width:2.8rem;
    height:2.8rem;
}

.mobile-nav{

    width:75vw;

    top:5rem;
}

}