/* ==========================================================
   KBHFILMS V2
   Premium Cinematic Portfolio
========================================================== */

/* ---------- RESET ---------- */

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

html{
    scroll-behavior:smooth;
}

body{

    background:#050505;
    color:#ffffff;

    font-family:"DM Sans",sans-serif;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;
    max-width:100%;

}

a{

    color:inherit;
    text-decoration:none;

}

button{

    border:none;
    background:none;
    cursor:pointer;

}

/* ---------- VARIABLES ---------- */

:root{

    --bg:#050505;
    --bg2:#101010;

    --white:#ffffff;

    --gold:#D8B36A;

    --gray:#8b8b8b;

    --border:rgba(255,255,255,.08);

    --transition:.4s ease;

}

/* ---------- GLOBAL ---------- */

.section{

    width:min(1400px,90%);
    margin:auto;

    padding:140px 0;

}

.section-meta{

    display:flex;

    justify-content:space-between;

    margin-bottom:60px;

    color:var(--gray);

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

}

.section-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:80px;

    margin-bottom:80px;

}

.section-heading h2{

    font-family:"Space Grotesk",sans-serif;

    font-size:clamp(60px,8vw,120px);

    line-height:.9;

}

.section-heading span{

    color:var(--gold);

}

.section-heading p{

    max-width:450px;

    color:#bdbdbd;

    line-height:1.9;

}

/* ---------- PRELOADER ---------- */

.preloader{

    position:fixed;

    inset:0;

    background:#000;

    z-index:99999;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:45px;

}

.preloader-top,
.preloader-bottom{

    display:flex;

    justify-content:space-between;

    color:#666;

    font-size:12px;

    letter-spacing:3px;

}

.preloader-center{

    text-align:center;

}

.preloader-logo{

    font-family:"Space Grotesk";

    font-size:70px;

    font-weight:700;

}

.preloader-logo span{

    color:var(--gold);

}

.loading-track{

    width:360px;

    height:2px;

    margin:40px auto;

    background:#222;

    overflow:hidden;

}

.loading-bar{

    width:0%;

    height:100%;

    background:var(--gold);

}

.loading-info{

    width:360px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    color:#777;

    font-size:12px;

}

/* ---------- NAVBAR ---------- */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:28px 5%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(255,255,255,.05);

}

.logo{

    font-family:"Space Grotesk";

    font-size:28px;

    font-weight:700;

    letter-spacing:2px;

}

.logo span{

    color:var(--gold);

}

.desktop-nav{

    display:flex;

    gap:42px;

}

.desktop-nav a{

    font-size:13px;

    letter-spacing:2px;

    transition:var(--transition);

}

.desktop-nav a:hover{

    color:var(--gold);

}

.menu-toggle{

    display:none;

}

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

.mobile-navigation{

    display:none;

}

.mobile-navigation a{

    display:block;

    margin:28px 0;

    font-size:26px;

    font-family:"Space Grotesk";

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:0 5%;

    overflow:hidden;

}

.hero-bg{

    position:absolute;

    inset:0;

    z-index:-2;

}

.hero-grid{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:90px 90px;

    opacity:.35;

}

.hero-orb{

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    filter:blur(140px);

}

.hero-orb-one{

    top:-220px;

    right:-180px;

    background:#5d4315;

}

.hero-orb-two{

    bottom:-280px;

    left:-180px;

    background:#1b1b1b;

}

.grain{

    position:absolute;

    inset:0;

    opacity:.04;

    background-image:url("https://grainy-gradients.vercel.app/noise.svg");

}

.hero-content{

    width:min(1100px,100%);

}

.hero-kicker{

    color:var(--gold);

    letter-spacing:4px;

    font-size:13px;

    margin-bottom:35px;

}

.hero-title{

    font-family:"Space Grotesk";

    font-size:clamp(72px,11vw,170px);

    line-height:.88;

    font-weight:700;

}

.hero-title span{

    color:var(--gold);

}

.hero-description{

    margin-top:40px;

    max-width:620px;

    font-size:20px;

    line-height:1.9;

    color:#c9c9c9;

}

.hero-buttons{

    display:flex;

    gap:24px;

    margin-top:55px;

}

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:999px;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:var(--transition);

}

.button-primary{

    background:var(--gold);

    color:#111;

    font-weight:700;

}

.button-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(216,179,106,.30);

}

.button-text{

    border:1px solid rgba(255,255,255,.12);

}

.button-text:hover{

    color:var(--gold);

    border-color:var(--gold);

}

.camera-hud{

    position:absolute;

    inset:35px;

    pointer-events:none;

    font-family:"Space Mono",monospace;

    font-size:11px;

    color:rgba(255,255,255,.45);

}

.hud-top-left,
.hud-top-right{

    position:absolute;

    display:flex;

    gap:18px;

}

.hud-top-left{

    top:0;

    left:0;

}

.hud-top-right{

    top:0;

    right:0;

}

.rec{

    display:flex;

    align-items:center;

    gap:8px;

}

.rec i{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#ff3d3d;

    animation:blink 1s infinite;

}

@keyframes blink{

    50%{

        opacity:.2;

    }

}/* ==========================================================
   FEATURED WORK
========================================================== */

.featured-work{

    margin-top:40px;

}

.featured-image{

    position:relative;

    height:720px;

    border-radius:30px;

    overflow:hidden;

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

    background:
    radial-gradient(circle at top,#2b2b2b,#090909);

}

.featured-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.15)
    );

}

.fake-film{

    position:absolute;

    top:40px;

    left:40px;

    z-index:2;

}

.fake-film span{

    display:block;

    font-size:12px;

    letter-spacing:3px;

    color:#bcbcbc;

}

.fake-film strong{

    display:block;

    margin-top:12px;

    font-family:"Space Grotesk";

    font-size:58px;

}

.play-button{

    position:absolute;

    inset:0;

    margin:auto;

    width:110px;

    height:110px;

    border-radius:50%;

    display:grid;

    place-items:center;

    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(15px);

    font-size:34px;

    transition:var(--transition);

}

.play-button:hover{

    transform:scale(1.08);

    border-color:var(--gold);

}

.film-label{

    position:absolute;

    left:40px;

    bottom:40px;

    letter-spacing:4px;

    font-size:12px;

    color:#d7d7d7;

}

.featured-info{

    margin-top:35px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

}

.project-type{

    color:var(--gold);

    font-size:12px;

    letter-spacing:3px;

}

.featured-info h3{

    margin-top:18px;

    font-family:"Space Grotesk";

    font-size:56px;

    line-height:.95;

}

.project-arrow{

    display:flex;

    align-items:center;

    gap:12px;

    letter-spacing:2px;

    transition:var(--transition);

}

.project-arrow:hover{

    color:var(--gold);

}

/* ==========================================================
   CREATIVE WORLDS
========================================================== */

.creative-worlds{

    display:flex;

    flex-direction:column;

    gap:60px;

}

.world-heading{

    display:flex;

    justify-content:space-between;

    color:#888;

    letter-spacing:3px;

    font-size:12px;

    text-transform:uppercase;

}

.world-card{

    display:grid;

    grid-template-columns:80px 1.15fr 1fr;

    gap:45px;

    align-items:center;

    padding:45px 0;

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

    transition:var(--transition);

}

.world-card:last-child{

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

}

.world-card:hover{

    transform:translateX(10px);

}

.world-number{

    font-family:"Space Mono";

    color:var(--gold);

    font-size:18px;

}

.world-visual{

    position:relative;

    height:340px;

    border-radius:24px;

    overflow:hidden;

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

    display:flex;

    justify-content:center;

    align-items:center;

}

.ads{

    background:radial-gradient(circle at top,#6d531f,#111);

}

.ugc{

    background:radial-gradient(circle at top,#363636,#0b0b0b);

}

.podcast{

    background:radial-gradient(circle at top,#163344,#080808);

}

.wedding{

    background:radial-gradient(circle at top,#6f5a39,#0a0a0a);

}

.world-center{

    position:relative;

    text-align:center;

    z-index:2;

}

.world-center small{

    display:block;

    margin-bottom:12px;

    letter-spacing:3px;

    color:#d0d0d0;

    font-size:11px;

}

.world-center h3{

    font-family:"Space Grotesk";

    font-size:58px;

}

.world-center span{

    display:block;

    margin-top:16px;

    color:#bdbdbd;

    font-size:12px;

}

.world-info span{

    color:var(--gold);

    font-size:12px;

    letter-spacing:3px;

}

.world-info h4{

    margin:18px 0;

    font-family:"Space Grotesk";

    font-size:42px;

    line-height:1.1;

}

.world-info p{

    color:#bdbdbd;

    line-height:1.9;

    margin-bottom:28px;

}

.world-info a{

    display:inline-block;

    padding-bottom:6px;

    border-bottom:1px solid rgba(255,255,255,.15);

    transition:var(--transition);

}

.world-info a:hover{

    color:var(--gold);

    border-color:var(--gold);

}/* ==========================================================
   MANIFESTO
========================================================== */

.manifesto{

    background:#f6f6f6;

    color:#111;

    overflow:hidden;

}

.manifesto-inner{

    width:min(1400px,90%);

    margin:auto;

    padding:150px 0;

}

.dark-meta{

    color:#777;

}

.manifesto h2{

    font-family:"Space Grotesk";

    font-size:clamp(60px,8vw,130px);

    line-height:.92;

    max-width:1200px;

}

.manifesto h2 span{

    color:#b58a35;

}

.manifesto-bottom{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:80px;

    margin-top:80px;

}

.manifesto-bottom p{

    max-width:620px;

    line-height:2;

    color:#444;

    font-size:20px;

}

.manifesto-stamp{

    width:180px;

    height:180px;

    border:2px solid rgba(0,0,0,.15);

    border-radius:50%;

    display:grid;

    place-items:center;

    font-family:"Space Grotesk";

    font-size:48px;

    color:#b58a35;

    transform:rotate(-10deg);

}

/* ==========================================================
   PROCESS
========================================================== */

.process-list{

    display:flex;

    flex-direction:column;

}

.process-item{

    display:grid;

    grid-template-columns:120px 1fr auto;

    gap:40px;

    align-items:center;

    padding:45px 0;

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

    transition:var(--transition);

}

.process-item:last-child{

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

}

.process-item:hover{

    padding-left:25px;

    border-color:rgba(216,179,106,.35);

}

.process-number{

    font-family:"Space Mono";

    color:var(--gold);

    font-size:18px;

}

.process-content h3{

    font-family:"Space Grotesk";

    font-size:42px;

    margin-bottom:16px;

}

.process-content p{

    color:#bdbdbd;

    line-height:1.9;

    max-width:620px;

}

.process-symbol{

    font-size:48px;

    color:#555;

    transition:var(--transition);

}

.process-item:hover .process-symbol{

    color:var(--gold);

    transform:rotate(90deg);

}

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

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    align-items:flex-start;

}

.about-heading h2{

    font-family:"Space Grotesk";

    font-size:clamp(60px,8vw,120px);

    line-height:.92;

}

.about-heading span{

    color:var(--gold);

}

.about-copy{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.about-lead{

    font-size:28px;

    color:#fff;

    line-height:1.6;

}

.about-copy p{

    color:#bdbdbd;

    line-height:2;

}

.about-copy blockquote{

    border-left:3px solid var(--gold);

    padding-left:25px;

    font-family:"Space Grotesk";

    font-size:32px;

    line-height:1.4;

    margin:10px 0;

}

.about-facts{

    display:grid;

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

    gap:20px;

    margin-top:20px;

}

.about-facts div{

    background:#101010;

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

    border-radius:18px;

    padding:24px;

}

.about-facts span{

    display:block;

    color:#777;

    letter-spacing:2px;

    font-size:11px;

    margin-bottom:10px;

}

.about-facts strong{

    font-size:15px;

}/* ==========================================================
   CONTACT
========================================================== */

.contact{

    position:relative;

    overflow:hidden;

    padding:180px 5%;

}

.contact-bg{

    position:absolute;

    inset:0;

    z-index:-1;

}

.contact-orb{

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:#3b2a09;

    filter:blur(180px);

    left:50%;

    top:50%;

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

}

.contact-content{

    width:min(1200px,100%);

    margin:auto;

}

.contact-kicker{

    color:var(--gold);

    letter-spacing:3px;

    margin-bottom:25px;

    font-size:13px;

}

.contact h2{

    font-family:"Space Grotesk";

    font-size:clamp(60px,9vw,150px);

    line-height:.9;

}

.contact h2 span{

    color:var(--gold);

}

.contact-button{

    display:inline-flex;

    align-items:center;

    gap:15px;

    margin-top:60px;

    padding:22px 42px;

    background:var(--gold);

    color:#111;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.contact-button:hover{

    transform:translateY(-6px);

}

/* ==========================================================
   FOOTER
========================================================== */

footer{

    width:min(1400px,90%);

    margin:auto;

    padding:70px 0;

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

}

.footer-main{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:50px;

}

.footer-logo{

    font-family:"Space Grotesk";

    font-size:42px;

    font-weight:700;

}

.footer-logo span{

    color:var(--gold);

}

.footer-main p{

    color:#888;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#777;

    font-size:13px;

}

.footer-bottom a{

    transition:var(--transition);

}

.footer-bottom a:hover{

    color:var(--gold);

}

/* ==========================================================
   ANIMATIONS
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

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

@media(max-width:992px){

    .desktop-nav{

        display:none;

    }

    .menu-toggle{

        display:flex;

        flex-direction:column;

        gap:6px;

    }

    .menu-toggle span{

        width:28px;

        height:2px;

        background:#fff;

    }

    .section-heading,
    .featured-info,
    .manifesto-bottom,
    .about-grid{

        display:block;

    }

    .world-card{

        grid-template-columns:1fr;

    }

    .process-item{

        grid-template-columns:1fr;

    }

    .about-facts{

        grid-template-columns:1fr;

    }

    .footer-main,
    .footer-bottom{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

}

@media(max-width:768px){

    .hero-title{

        font-size:62px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }

    .featured-image{

        height:420px;

    }

    .section{

        padding:90px 0;

    }

    .camera-hud{

        display:none;

    }

}