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

.about-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#000;

}

.about-hero-image{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.about-hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.08);

    filter:brightness(.45);

}

.about-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.45) 55%,
        rgba(0,0,0,.65) 100%
    );

}

.about-hero .container{

    position:relative;

    z-index:2;

}

.about-hero-content{

    max-width:760px;

}

.about-hero-content span{

    display:inline-block;

    margin-bottom:22px;

    color:var(--gold);

    font-size:.82rem;

    letter-spacing:.45em;

    text-transform:uppercase;

    opacity:0;

    transform:translateY(40px);

}

.about-hero-content h1{

    margin-bottom:35px;

    font-size:clamp(4rem,8vw,7rem);

    line-height:.95;

    opacity:0;

    transform:translateY(40px);

}

.about-hero-content p{

    max-width:620px;

    font-size:1.15rem;

    opacity:0;

    transform:translateY(40px);

}

/* ==========================================================================
   INTRO
========================================================================== */

.about-intro{

    padding:var(--space-lg) 0;

    background:#050505;

}

.intro-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:140px;

    align-items:center;

}

.intro-content{

    max-width:620px;

    opacity:0;

    transform:translateY(60px);

}

.intro-content span{

    display:inline-block;

    margin-bottom:22px;

    color:var(--gold);

    letter-spacing:.45em;

    text-transform:uppercase;

    font-size:.82rem;

}

.intro-content h2{

    margin-bottom:35px;

    font-size:clamp(3rem,5vw,5rem);

    line-height:1.05;

}

.intro-content p{

    margin-bottom:28px;

}

.intro-image{

    overflow:hidden;

    border-radius:var(--radius);

    background:#0b0b0b;

    opacity:0;

    transform:translateY(60px);

}

.intro-image img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    transition:transform 6s ease;

}

.intro-image:hover img{

    transform:scale(1.05);

}

/* ==========================================================================
   FULL IMAGE
========================================================================== */

.about-banner{

    position:relative;

    height:90vh;

    overflow:hidden;

}

.about-banner img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:brightness(.72);

    transition:transform 8s ease;

}

.about-banner:hover img{

    transform:scale(1.04);

}
/* ==========================================================================
   PHILOSOPHY
========================================================================== */

.philosophy{

    padding:var(--space-lg) 0;

    background:#000;

}

.philosophy-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

}

.philosophy-card{

    padding:70px 55px;

    background:#0b0b0b;

    border:1px solid var(--border);

    border-radius:var(--radius);

    transition:var(--transition);

    opacity:0;

    transform:translateY(60px);

}

.philosophy-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

}

.philosophy-card h3{

    margin-bottom:24px;

    font-size:2rem;

}

.philosophy-card p{

    margin:0;

}

/* ==========================================================================
   SERVICES
========================================================================== */

.about-services{

    padding:var(--space-lg) 0;

    background:#050505;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

}

.service-card{

    display:block;

    padding:70px 55px;

    background:#0b0b0b;

    border-radius:var(--radius);

    border:1px solid var(--border);

    transition:var(--transition);

    opacity:0;

    transform:translateY(60px);

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

}

.service-card h3{

    margin-bottom:24px;

    font-size:2rem;

}

.service-card p{

    margin:0;

}

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

.about-cta{

    padding:220px 0;

    text-align:center;

    background:#000;

    opacity:0;

    transform:translateY(60px);

}

.about-cta h2{

    margin-bottom:30px;

    font-size:clamp(3.5rem,6vw,6rem);

    line-height:1.05;

}

.about-cta p{

    max-width:760px;

    margin:0 auto 50px;

}

/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media (max-width:991px){

    .intro-grid{

        grid-template-columns:1fr;

        gap:80px;

    }

    .intro-content{

        max-width:100%;

    }

    .philosophy-grid{

        grid-template-columns:1fr;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .about-banner{

        height:60vh;

    }

    .about-cta{

        padding:140px 0;

    }

}

@media (max-width:768px){

    .about-hero{

        min-height:85vh;

    }

    .about-hero-content h1{

        font-size:clamp(3rem,10vw,4.5rem);

    }

    .about-intro{

        padding:120px 0;

    }

    .philosophy-card,

    .service-card{

        padding:45px 35px;

    }

    .about-cta h2{

        font-size:clamp(2.5rem,8vw,4rem);

    }

}
/* ==========================================================================
   ABOUT BANNER
========================================================================== */

.about-banner{

    position:relative;

    height:95vh;

    overflow:hidden;

}

.about-banner img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:brightness(.45);

}

.about-banner-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.82),
        rgba(0,0,0,.35)
    );

}

.about-banner .container{

    position:relative;

    z-index:2;

    height:100%;

    display:flex;

    align-items:center;

}

.about-banner-content{

    max-width:650px;

    opacity:0;

    transform:translateY(60px);

}

.about-banner-content span{

    display:inline-block;

    margin-bottom:20px;

    color:var(--gold);

    letter-spacing:.45em;

    text-transform:uppercase;

    font-size:.82rem;

}

.about-banner-content h2{

    margin-bottom:30px;

    font-size:clamp(3rem,6vw,5.5rem);

    line-height:1.05;

}

.about-banner-content p{

    max-width:580px;

}