@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ==================================================
   RESET & GLOBAL
   ================================================== */

/* RESET */

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

:root{
    --font-body:"Manrope", "Segoe UI", Arial, sans-serif;
    --font-display:"Cormorant Garamond", Georgia, serif;
    --bg:#070b10;
    --bg-soft:#10161d;
    --text:#f4efe9;
    --muted:rgba(244,239,233,.76);
    --accent:#d5b27b;
    --accent-strong:#b98d4d;
    --accent-soft:rgba(213,178,123,.12);
    --line:rgba(255,255,255,.09);
}

html{
    scroll-behavior:smooth;
    scroll-snap-type:y mandatory;
}

body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    font-family:var(--font-body);
    letter-spacing:.01em;
    text-rendering:optimizeLegibility;
    color:var(--text);
    scroll-behavior:smooth;
}

h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:.01em;
}

p,a,span,li,button,input,select,textarea{
    font-family:var(--font-body);
}

button,input,select,textarea{
    font-size:inherit;
}

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

/* HERO */

.hero{
    width:100%;
    min-height:100svh;
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #070b10,
            #10161d
        );
}

/* ==================================================
   SLIDESHOW
   ================================================== */

/* SLIDES */

.slide{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    opacity:0;

    transform:scale(1.05); /* Keep last zoom state */

    transition:
        opacity 2.5s ease-in-out,
        transform 14s linear;
}

/* DUMMY IMAGES */

.slide:nth-child(1){
    background-image:url('../assets/images/slide1.jpeg');
}

.slide:nth-child(2){
    background-image:url('../assets/images/WH_4.png');
}

/* ACTIVE SLIDE */

.slide.active{
    opacity:1;
    transform:scale(1.20);
}

/* OVERLAY */

.overlay{
    position:absolute;
    inset:0;

    background:rgba(7,11,16,0.75);

    z-index:2;
}

/* LOGO */

.logo-container{
    position:absolute;

    top:50%;
    left:50%;

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

    z-index:10;

    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-logo{

    width:min(35vw, 650px);
    height:auto;

    opacity:0;

    animation:logoReveal 2s ease-out 0.8s forwards;

    filter:
        drop-shadow(0 0 25px rgba(0,0,0,.20))
        drop-shadow(0 0 60px rgba(0,0,0,.10));

}

@keyframes logoReveal{

    0%{
        opacity:0;
        transform:scale(0.85);
        filter:blur(10px);
    }

    60%{
        opacity:1;
    }

    100%{
        opacity:1;
        transform:scale(1);
        filter:blur(0);
    }

}

/* MOBILE */

@media(max-width:768px){

    .hero-logo{
        width:70vw;
    }

}

.scroll-indicator{
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
    cursor:pointer;

    color:var(--text);

    text-align:center;

    letter-spacing:4px;
    font-size:12px;

    opacity:0;

    animation:fadeUp 2s ease 2s forwards;
}

.scroll-indicator:hover{
    opacity:.8;
}

.mouse{

    width:20px;
    height:32px;

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

    border-radius:20px;

    position:relative;

    margin:0 auto 12px auto;
}

.wheel{

    width:4px;
    height:6px;

    background:var(--accent);

    border-radius:4px;

    position:absolute;

    left:50%;
    top:8px;

    transform:translateX(-50%);

    animation:scrollWheel 1.8s infinite;
}

@keyframes scrollWheel{

    0%{
        opacity:0;
        top:8px;
    }

    30%{
        opacity:1;
    }

    70%{
        opacity:1;
    }

    100%{
        opacity:0;
        top:22px;
    }
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translate(-50%,20px);
    }

    to{
        opacity:1;
        transform:translate(-50%,0);
    }

}

.scroll-indicator{

    cursor:pointer;

    transition:all .3s ease;
}

.scroll-indicator:hover{

    transform:
        translateX(-50%)
        scale(1.05);
}

/* ==================================================
   PROJECTS SECTION
   ================================================== */

.projects{

    position:relative;

    height:100vh;

    overflow:hidden;

    background:#070b10;

    padding:0;
}

.projects .section-title{

    position:absolute;

    top:45px;

    left:50%;

    width:max-content;

    margin:0;

    z-index:3;

    opacity:0;

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

    filter:blur(12px);

    transition:
        opacity 1.2s ease,
        transform 1.4s cubic-bezier(.22,1,.36,1),
        filter 1.2s ease;
}

.projects .section-title.reveal{

    opacity:1;

    transform:translate(-50%,0);

    filter:blur(0);
}

.projects::before{

    content:"";

    position:absolute;
    inset:0;

    background-image:
        url('../assets/images/blue-print.png');

    background-size:cover;
    background-position:center;

    opacity:.08;

    filter:
        grayscale(100%)
        contrast(120%)
        blur(4px);

    pointer-events:none;
}

.projects::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:180px;

    background:
        linear-gradient(
            to bottom,
            rgba(5,5,5,.95) 10%,
            rgba(5,5,5,.70) 55%,
            rgba(5,5,5,.25) 70%,
            transparent 100%
        );

    z-index:2;

    pointer-events:none;
}

.projects-top-fade,
.projects-bottom-fade{

    position:absolute;
    left:0;

    width:100%;
    height:210px;

    z-index:2;

    pointer-events:none;
}

.projects-top-fade{

    top:0;

    background:
        linear-gradient(
            to bottom,
            rgba(5,5,5,.50),
            rgba(5,5,5,.7),
            transparent
        );
}

.projects-bottom-fade{

    bottom:0;

    background:
        linear-gradient(
            to top,
            rgba(5,5,5,.95),
            rgba(5,5,5,.50),
            transparent
        );
}

.project-info h3{

    color:var(--text);

    font-size:14px;

    font-weight:300;

    letter-spacing:2px;

    text-transform:uppercase;

    text-align:left;

    margin:0;

    text-shadow:
        0 2px 8px rgba(0,0,0,.8);

    position:relative;

    z-index:10;
}

.section-title,
.projects-slider,
.explore-projects{

    position:relative;
    z-index:2;
}

.section-title{

    color:var(--accent);

    font-family:var(--font-display);

    font-size:clamp(25px,5vw,32px);
    letter-spacing:clamp(4px,2vw,18px);
    font-weight:600;
    text-transform:uppercase;

    text-align:center;

    margin-bottom:65px;

    opacity:0;

    transform:translateY(50px);

    filter:blur(12px);

    transition:
        opacity 1.2s ease,
        transform 1.4s cubic-bezier(.22,1,.36,1),
        filter 1.2s ease;
}

/* Visible State */

.section-title.reveal{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}

.portfolio-gallery{

    position:absolute;

    inset:0;

    overflow:hidden;

    width:100%;

    height:100%;

    z-index:1;
}

.gallery-track{

    display:flex;

    gap:12px;

    height:140%;

    padding:70px 18px;
}

.gallery-column{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:12px;
}

.gallery-column img{

    width:100%;

    border-radius:4px;

    object-fit:cover;

    transition:
        transform .8s ease,
        filter .8s ease;

    filter:
        brightness(1.03)
        contrast(104%);    

    cursor:pointer;
}

.gallery-column img:hover{

    transform:scale(1.03);

    filter:brightness(0.88);
}

.gallery-column img.large{

    height:420px;
}

.gallery-column img:not(.large){

    height:220px;
}

.portfolio-gallery:hover .gallery-track{

    animation-play-state:running;
}

.gallery-column:nth-child(1){
    animation:column1 36s linear infinite;
}

.gallery-column:nth-child(2){
    animation:column2 42s linear infinite;
}

.gallery-column:nth-child(3){
    animation:column3 38s linear infinite;
}

.gallery-column:nth-child(4){
    animation:column4 45s linear infinite;
}


@keyframes column1{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-49.5%);
    }

}

@keyframes column2{

    from{
        transform:translateY(-80px);
    }

    to{
        transform:translateY(calc(-50% - 80px));
    }

}

@keyframes column3{

    from{
        transform:translateY(-160px);
    }

    to{
        transform:translateY(calc(-50% - 160px));
    }

}

@keyframes column4{

    from{
        transform:translateY(-40px);
    }

    to{
        transform:translateY(calc(-50% - 40px));
    }

}

.projects-slider{
    position:relative;
    display:flex;
    align-items:center;

    margin-top:40px;
}

.project-info{

    position:absolute;

    bottom:0;
    left:0;
    right:0;

    z-index:5;

    padding:45px 30px 25px;

    background:
        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,.85) 55%,
            rgba(0,0,0,.98) 100%
        );

    transition:.4s ease;
}

.slider-btn{
    background:none;
    border:none;
    color:var(--text);
    font-size:30px;
    cursor:pointer;
    padding:20px;
    transition:
        transform .3s ease,
        opacity .3s ease;
}

.slider-btn:hover{

    transform:scale(1.15);

    opacity:.8;
}

.hero,
.projects,
.what-we-do,
.about-us{
    scroll-snap-align:start;
}

.explore-projects{

    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:80px;
}

#exploreProjectsBtn{

    padding:16px 32px;

    background:transparent;

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

    color:var(--text);

    letter-spacing:4px;

    cursor:pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

#exploreProjectsBtn:hover{

    background:var(--accent);

    color:black;

    transform:scale(1.05);
}

.projects-modal{

    position:fixed;
    inset:0;

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

    z-index:9999;

    display:none;

    overflow-y:auto;
}

.projects-modal.active{
    display:block;
}

.modal-content{

    width:90%;
    max-width:1400px;

    margin:60px auto;

    color:var(--text);
}

.close-modal{

    font-size:40px;

    cursor:pointer;

    float:right;
}

.modal-content h2{

    margin-bottom:40px;

    letter-spacing:4px;

    font-weight:300;
}

.modal-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(350px,1fr));

    gap:30px;
}

.modal-project img{

    width:100%;
    height:250px;

    object-fit:cover;

    border-radius:10px;

    cursor: pointer;

    transition:
        transform .3s ease,
        opacity .3s ease;

    filter:
        brightness(.80)
        contrast(108%);
}

.modal-project img:hover{

    transform:scale(1.02);

    filter:
        grayscale(0%)
        contrast(108%);
}

.modal-project h3{

    margin-top:15px;

    font-weight:300;
}

/* ==================================================
   PROJECT MODAL & VIEWER
   ================================================== */

/* IMAGE VIEWER */

.image-viewer{

    position:fixed;
    inset:0;

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

    display:none;

    justify-content:center;
    align-items:center;

    z-index:10000;
}

.image-viewer.active{
    display:flex;
}

.image-viewer img{

    width:auto;
    height:auto;

    max-width:95vw;
    max-height:95vh;

    object-fit:contain;
}

.close-viewer{

    position:absolute;

    top:25px;
    right:40px;

    color:var(--text);

    font-size:50px;

    cursor:pointer;

    z-index:10001;
}

/* ==================================================
   WHAT WE DO SECTION
   ================================================== */

/* WHAT WE DO */

.what-we-do{

    min-height:100svh;

    background:#070b10;

    padding:80px 5% 40px;

    position:relative;

    overflow:hidden;
}

.services-panels{

    height:calc(100vh - 220px);

    display:flex;

    gap:10px;
}

.service-panel{

    flex:1;

    position:relative;

    overflow:hidden;

    border-radius:12px;

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

    cursor:pointer;

    transition:
        flex .9s cubic-bezier(.22,1,.36,1),
        box-shadow .5s ease;
}

.service-panel::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:12px;

    background:
        linear-gradient(
            120deg,
            transparent 40%,
            rgba(255, 255, 255, 0.062) 50%,
            transparent 60%
        );

    transform:translateX(-200%);
}

.architecture::after {
    transition:transform 1.2s ease;
}

.interior::after {
    transition:transform 1.2s ease;
}

.construction::after {
    transition:transform 1.2s ease;
}

.service-panel:hover::after{
    transform:translateX(200%);
}

.service-panel:hover{

    flex:2;

    box-shadow:
        0 0 30px rgba(255,255,255,.08),
        0 15px 40px rgba(0,0,0,.40);
}

.service-panel::before{

    content:"";

    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    z-index:0;

    filter:
        brightness(1.10)
        contrast(100%)
        
        saturate(100%);

    transition:
        transform 0.8s ease,
        filter 0.6s ease;
}

.service-panel:hover::before{

    transform:scale(1.08);

    filter:
        brightness(1)
        contrast(100%)
        saturate(90%);
}

.service-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.10),
            rgba(0,0,0,.55)
        );

    transition:all .6s ease;
}

.service-panel:hover .service-overlay{

    background:
        linear-gradient(
            rgba(0,0,0,.25),
            rgba(0,0,0,.75)
        );
}

.architecture::before{

    background-image:
        url('../assets/images/arch.jpg');
}

.interior::before{

    background-image:
        url('../assets/images/interior_v2.png');
}

.construction::before{

    background-image:
        url('../assets/images/construction2.png');
}

.service-content{
    position:absolute;
    left:40px;
    bottom:50px;

    width:calc(100% - 80px);

    transition:
        bottom .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1);
}

.service-content span{

    font-size:14px;

    letter-spacing:4px;

    opacity:.7;
}

.service-content h2{

    font-size:28px;
    font-weight:300;
    letter-spacing:3px;

    color:var(--text);

    transition:
        transform .7s cubic-bezier(.22,1,.36,1),
        letter-spacing .7s ease;
}

.service-panel:hover .service-content{

    bottom:50%;
    transform:translateY(50%);
}

.service-panel:hover h2::after{

    width:100%;
}

.service-line{

    position:absolute;

    left:0;
    bottom:-220px;

    width:0;
    height:1px;

    background:rgba(255,255,255,.8);

    transition:width .6s ease;
}

.architecture:hover .service-content h2{
    transform:translateY(200px);
}

.interior:hover .service-content h2{
    transform:translateY(200px);
}

.construction:hover .service-content h2{
    transform:translateY(200px);
}

.architecture:hover .service-line{
    width:260px;
}

.interior:hover .service-line{
    width:165px;
}

.construction:hover .service-line{
    width:265px;
}

.service-content p{

    position:absolute;

    left:0;
    bottom:-275px;

    width:100%;

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .4s ease .2s,
        transform .4s ease .2s;

    line-height:1.8;

    color:rgba(244,239,233,.9);
}

.service-panel:hover p{

    opacity:1;

    transform:translateY(0);
}

@media(max-width:768px){

    .services-panels{

        flex-direction:column;

        height:auto;
    }

    .service-panel{

        min-height:250px;
    }

    .service-panel:hover{

        flex:1;
    }

    .service-content h2{

        font-size:28px;
    }

    .service-content p{

        opacity:1;
        transform:none;
    }
}

/* ==================================================
   ABOUT US SECTION
   ================================================== */

/* ABOUT US */

.about-us{
    min-height:100svh;
    background:#070b10;
    padding:100px 8%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.about-wrapper{
    max-width:1200px;
    margin:auto;
    color:var(--text);
}

.about-quote{
    text-align:center;
    margin-bottom:80px;
}

.about-quote span{
    letter-spacing:5px;
    color:rgba(244,239,233,.5);
    font-size:14px;
}

.about-quote h2{
    font-size:clamp(32px,6vw,72px);
    font-weight:300;
    line-height:1.1;
    margin:25px 0;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

.about-quote p{
    max-width:700px;
    margin:auto;
    color:rgba(244,239,233,.76);
    line-height:1.9;
}

.about-values{
    display:flex;
    gap:50px;
    margin-bottom:80px;
}

.value{
    flex:1;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.15);
}

.value span{
    font-size:clamp(42px, 5vw, 64px);
    line-height:.85;
    color:var(--accent);
}

.value h3{
    margin:15px 0;
    font-size:clamp(32px, 3.2vw, 46px);
    font-weight:600;
    letter-spacing:2px;
}

.value p{
    color:rgba(244,239,233,.76);
    line-height:1.8;
}

.about-services{
    display:flex;
    justify-content:center;
    letter-spacing:2px;
    color:rgba(244,239,233,.5);
    font-style: italic;
}

/* ==========================
   GRID TITLE ANIMATION
   ========================== */

.grid-title{

    font-size:72px;
    font-weight:300;
    line-height:1.1;

    max-width:900px;
    margin:auto;

    overflow:hidden;
}

.grid-title .word{

    display:inline-block;
    margin-right:18px;
}

.grid-title span span{

    display:inline-block;

    opacity:0;

    transform:
        translateX(var(--x))
        translateY(30px)
        scale(.7);

    filter:
        blur(10px);

    animation:
        gridAssemble 1.2s cubic-bezier(.22,1,.36,1)
        forwards;
}

@keyframes gridAssemble{

    0%{

        opacity:0;

        transform:
            translateX(var(--x))
            translateY(30px)
            scale(.7);

        filter:blur(10px);
    }

    60%{

        opacity:1;
    }

    100%{

        opacity:1;

        transform:
            translateX(0)
            translateY(0)
            scale(1);

        filter:blur(0);
    }

}

@media(max-width:768px){

    .about-container{

        flex-direction:column;
    }

    .about-left h2{

        font-size:38px;
    }

}

@keyframes borderSweep{

    0%{
        left:-150%;
    }

    100%{
        left:250%;
    }
}

@media (max-width:768px){

.section-title{
    font-size:22px;
    letter-spacing:5px;
}

.hero-logo{
    width:80vw;
}

.services-panels{
    flex-direction:column;
}

.about-values{
    flex-direction:column;
}

.about-quote h2{
    font-size:38px;
}

.gallery-track{
    flex-direction:column;
}

}

/* ==================================================
   CONTACT STRIP
   ================================================== */

.contact-strip{

    margin-top:90px;

    padding-top:60px;

    border-top:1px solid rgba(255,255,255,.08);

}

.contact-heading{

    text-align:center;

    margin-bottom:45px;
}

.contact-heading h3{

    color:var(--text);

    font-size:34px;

    font-weight:300;

    letter-spacing:2px;

    margin-bottom:15px;
}

.contact-heading p{

    max-width:650px;

    margin:auto;

    color:rgba(244,239,233,.55);

    line-height:1.8;
}

.contact-form{

    max-width:850px;

    margin:auto;
}

.form-honeypot{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}

.contact-form-status{
    margin:16px 0 0;
    text-align:center;
    font-size:14px;
}

.contact-form-status[data-state="success"]{color:#b8d8c2;}
.contact-form-status[data-state="error"]{color:#f1a6a6;}

.contact-row{

    display:flex;

    gap:20px;
}

.contact-row input{

    flex:1;
}

.contact-form input,
.contact-form textarea,
.contact-form select{

    width:100%;

    height:56px;

    padding:16px 40px 16px 0;

    background:transparent;

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

    color:rgba(244,239,233,.76);

    font-size:15px;
    font-family:inherit;

    cursor:pointer;

    outline:none;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    transition:.3s;
}

.contact-form select:focus{

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

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:var(--accent);
}

.contact-form textarea{

    resize:none;
}

.contact-form select option{

    background:#10161d;

    color:var(--text);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{

    color:rgba(244,239,233,.45);
}

.contact-form button{

    display:block;
    margin:30px auto 0;

    padding:14px 38px;

    background:transparent;

    border:1px solid rgba(213,178,123,.55);

    color:var(--text);

    letter-spacing:3px;

    cursor:pointer;

    transition:.35s;
}

.contact-form button:hover{

    background:var(--accent);

    color:#070b10;
}

.contact-footer{

    margin-top:50px;

    display:flex;

    justify-content:center;

    gap:60px;

    color:rgba(244,239,233,.45);

    font-size:14px;

    letter-spacing:1px;
}

@media(max-width:768px){

    .contact-row{

        flex-direction:column;

        gap:0;
    }

    .contact-footer{

        flex-direction:column;

        align-items:center;

        gap:12px;
    }

}

.select-wrapper{

    position:relative;

    width:100%;
}

.select-wrapper::after{

    content:"⌄";

    position:absolute;

    right:2px;
    top:50%;

    transform:translateY(-50%);

    color:rgba(244,239,233,.55);

    font-size:18px;

    pointer-events:none;

    transition:.3s ease;
}

.select-wrapper:hover::after{

    color:var(--accent);
}

.select-wrapper:focus-within::after{

    transform:
        translateY(-50%)
        rotate(180deg);

    color:var(--text);
}

.contact-row .select-wrapper{

    flex:1;
}