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

html,
body{
    scroll-behavior:auto !important;
}

body{
    font-family:'Inter',sans-serif;
    background:#f5f1ea;
    color:#111;
    overflow-x:hidden;
}

/* =========================================
   HERO
========================================= */

.about-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:0 7%;
    overflow:hidden;
}

.about-hero .hero-video{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
}

.about-hero .hero-video video{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.05);
}

.about-hero .hero-video img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    min-width:100% !important;
    min-height:100% !important;
}

.about-hero .hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.82),
        rgba(0,0,0,.25)
    );
    z-index:1;
}

.about-hero .hero-content{
    position:relative;
    z-index:2;
    max-width:820px;
    color:#fff;
}

.about-hero .hero-content span{
    display:block;
    font-size:12px;
    letter-spacing:5px;
    color:#d9c1ab;
    margin-bottom:24px;
}

.about-hero .hero-content h1{
    font-family:'Cormorant Garamond',serif;
    font-size:140px;
    line-height:1;
    letter-spacing:-3px;
    margin-bottom:30px;
}

.about-hero .hero-content p{
    max-width:560px;
    line-height:2;
    font-size:17px;
    color:rgba(255,255,255,.75);
}

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

.about-story{
    padding:220px 7%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:40px;
}

.story-left{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.story-left span{
    display:block;
    font-size:12px;
    letter-spacing:4px;
    color:#a17f66;
    margin-bottom:24px;
}

.story-left h2{
    font-family:'Cormorant Garamond',serif;
    font-size:140px;
    line-height:1;
    letter-spacing:-3px;
    max-width:1200px;
    margin:0 auto;
}

.story-right{
    max-width:850px;
    margin:0 auto;
}

.story-right p{
    line-height:2.1;
    color:#666;
    font-size:17px;
    margin-bottom:35px;
    text-align:center;
}

/* =========================================
   EXPERIENCE
========================================= */

.experience-section{
    padding:0 7% 220px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}

.experience-image{
    height:760px;
    border-radius:34px;
    overflow:hidden;
}

.experience-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.experience-image:hover img{
    transform:scale(1.06);
}

.experience-content span{
    display:block;
    font-size:12px;
    letter-spacing:4px;
    color:#a17f66;
    margin-bottom:24px;
}

.experience-content h2{
    font-family:'Cormorant Garamond',serif;
    font-size:90px;
    line-height:1;
    margin-bottom:28px;
}

.experience-content p{
    line-height:2;
    color:#666;
    max-width:560px;
}

.exp-grid{
    display:flex;
    gap:24px;
    margin-top:50px;
}

.exp-box{
    background:#fff;
    padding:35px;
    border-radius:24px;
    min-width:220px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.exp-box h3{
    font-family:'Cormorant Garamond',serif;
    font-size:72px;
    margin-bottom:10px;
}

.exp-box p{
    font-size:14px;
}

/* =========================================
   VALUES
========================================= */

.about-values{
    padding:0 7% 220px;
}

.values-head{
    margin-bottom:80px;
}

.values-head span{
    display:block;
    font-size:12px;
    letter-spacing:4px;
    color:#a17f66;
    margin-bottom:24px;
}

.values-head h2{
    font-family:'Cormorant Garamond',serif;
    font-size:110px;
    line-height:1;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.value-card{
    background:#fff;
    padding:60px 50px;
    border-radius:30px;
    box-shadow:0 20px 50px rgba(0,0,0,.05);
    transition:.45s;
}

.value-card:hover{
    transform:translateY(-10px);
}

.value-card i{
    font-size:36px;
    color:#a17f66;
    margin-bottom:30px;
}

.value-card h3{
    font-family:'Cormorant Garamond',serif;
    font-size:42px;
    margin-bottom:18px;
}

.value-card p{
    line-height:2;
    color:#666;
}

/* =========================================
   BANNER
========================================= */

.about-banner{
    position:relative;
    height:850px;
    overflow:hidden;
}

.about-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.banner-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1;
}

.banner-content{
    position:absolute;
    left:7%;
    bottom:120px;
    z-index:2;
    color:#fff;
    max-width:900px;
}

.banner-content span{
    display:block;
    font-size:12px;
    letter-spacing:5px;
    color:#d9c1ab;
    margin-bottom:24px;
}

.banner-content h2{
    font-family:'Cormorant Garamond',serif;
    font-size:110px;
    line-height:1;
}

/* =========================================
   CTA
========================================= */

.about-cta{
    min-height:90vh;
    background:#111;
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 7%;
}

.about-cta span{
    display:block;
    font-size:12px;
    letter-spacing:5px;
    color:#d9c1ab;
    margin-bottom:24px;
}

.about-cta h2{
    font-family:'Cormorant Garamond',serif;
    font-size:120px;
    line-height:1;
    margin-bottom:50px;
}

.about-cta a{
    width:200px;
    height:200px;
    border-radius:50%;
    background:#fff;
    color:#111;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.45s;
}

.about-cta a:hover{
    transform:scale(1.08);
}

/* =========================================
   ANIMATION
========================================= */

.hidden{
    opacity:0;
    transform:translateY(60px);
    transition:1s;
}

.show{
    opacity:1;
    transform:none;
}

/* =========================================
   TABLET
========================================= */

@media(max-width:1200px){

    .experience-section,
    .values-grid{
        grid-template-columns:1fr;
    }

    .about-hero .hero-content h1,
    .story-left h2,
    .experience-content h2,
    .values-head h2,
    .banner-content h2,
    .about-cta h2{
        font-size:72px;
    }
}

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

@media(max-width:768px){

    .navbar,
    .menubar,
    .header-navbar{
        position:fixed !important;
        top:0;
        left:0;
        width:100%;
        z-index:99999 !important;
        background:#fff !important;
    }

    .about-hero{
        min-height:unset !important;
        height:520px !important;
        max-height:520px !important;
        padding:0 22px 40px !important;
        display:flex !important;
        align-items:flex-end !important;
        overflow:hidden !important;
    }

    .about-hero .hero-video{
        display:block !important;
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        overflow:hidden !important;
    }

    .about-hero .hero-video img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center !important;
        display:block !important;
        position:absolute !important;
        inset:0 !important;
        min-width:100% !important;
        min-height:100% !important;
    }

    .about-hero .hero-overlay{
        display:block !important;
        position:absolute !important;
        inset:0 !important;
        background:linear-gradient(
            180deg,
            rgba(0,0,0,.1) 0%,
            rgba(0,0,0,.72) 100%
        ) !important;
        z-index:1 !important;
    }

    .about-hero .hero-content{
        position:relative !important;
        z-index:2 !important;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        min-height:auto !important;
        margin:0 !important;
        padding:0 !important;
        background:none !important;
        border:none !important;
        border-radius:0 !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        overflow:visible !important;
        transform:none !important;
        top:auto !important;
        left:auto !important;
        color:#fff !important;
    }

    .about-hero .hero-content span{
        font-size:10px !important;
        letter-spacing:5px !important;
        color:#d9c1ab !important;
        margin-bottom:16px !important;
    }

    .about-hero .hero-content h1{
        font-size:52px !important;
        line-height:1.05 !important;
        letter-spacing:-1.5px !important;
        color:#fff !important;
        margin-bottom:20px !important;
        overflow:visible !important;
    }

    .about-hero .hero-content p{
        max-width:100% !important;
        font-size:15px !important;
        line-height:1.85 !important;
        color:rgba(255,255,255,.8) !important;
    }

    .about-hero .hero-content *{
        color:#fff !important;
        -webkit-text-fill-color:#fff !important;
    }

    .about-story{
        padding:80px 22px !important;
        text-align:left !important;
        align-items:flex-start !important;
    }

    .story-left{
        align-items:flex-start !important;
    }

    .story-left h2{
        font-size:44px !important;
        line-height:1.05 !important;
        letter-spacing:-1px !important;
        text-align:left !important;
    }

    .story-right{
        max-width:100% !important;
        margin:0 !important;
    }

    .story-right p{
        font-size:15px !important;
        line-height:1.85 !important;
        text-align:left !important;
    }

    .experience-section{
        display:flex;
        flex-direction:column;
        gap:32px;
        padding:0 22px 80px !important;
    }

    .experience-image{
        height:300px !important;
        border-radius:20px !important;
    }

    .experience-content h2,
    .values-head h2,
    .banner-content h2,
    .about-cta h2{
        font-size:44px !important;
        line-height:1.05 !important;
    }

    .experience-content p{
        max-width:100%;
    }

    .exp-grid{
        gap:12px !important;
        margin-top:28px !important;
    }

    .exp-box{
        width:100%;
        min-width:0;
        padding:22px 16px;
        border-radius:16px !important;
    }

    .exp-box h3{
        font-size:44px !important;
    }

    .about-values{
        padding:0 22px 80px !important;
    }

    .values-head{
        margin-bottom:40px !important;
    }

    .values-grid{
        grid-template-columns:1fr;
        gap:14px !important;
    }

    .value-card{
        padding:36px 28px;
        border-radius:20px !important;
    }

    .about-banner{
        height:300px !important;
        min-height:unset !important;
    }

    .banner-content{
        left:22px;
        right:22px;
        bottom:36px;
        max-width:100%;
    }

    .banner-content h2{
        font-size:44px !important;
    }

    .about-cta{
        min-height:auto !important;
        padding:80px 22px !important;
    }

    .about-cta h2{
        font-size:44px !important;
        line-height:1.05 !important;
        margin-bottom:32px !important;
        max-width:100% !important;
    }

    .about-cta span{
        margin-bottom:16px !important;
        font-size:10px !important;
        letter-spacing:4px !important;
    }

    .about-cta a{
        width:130px !important;
        height:130px !important;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:480px){

    .about-hero{
        height:460px !important;
        max-height:460px !important;
        padding:0 18px 36px !important;
    }

    .about-hero .hero-content h1{
        font-size:40px !important;
    }

    .story-left h2,
    .experience-content h2,
    .values-head h2,
    .banner-content h2,
    .about-cta h2{
        font-size:36px !important;
    }

    .exp-grid{
        flex-direction:column;
    }

    .experience-image{
        height:260px !important;
    }

    .about-banner{
        height:240px !important;
        min-height:unset !important;
    }
}