/* =====================================
   PITCHES SPACES
   Luxury Architecture Website
===================================== */


/* RESET */

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


html{
    scroll-behavior:smooth;
}


body{

    background:#111111;
    color:#ffffff;
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;

}


/* =====================
   LOADER
===================== */

.loader{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:#111111;

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

    z-index:9999;

}


.loader-logo h2{

    font-family:'Playfair Display',serif;

    font-size:45px;

    color:#C8A25D;

    letter-spacing:2px;

}



/* =====================
   CUSTOM CURSOR
===================== */


.cursor,
.cursor2{

    position:fixed;

    border-radius:50%;

    pointer-events:none;

    z-index:999;

}


.cursor{

    width:10px;
    height:10px;

    background:#C8A25D;

}


.cursor2{

    width:40px;
    height:40px;

    border:1px solid #C8A25D;

}



/* =====================
 NAVIGATION
===================== */


header{

    position:absolute;

    width:100%;

    top:0;

    z-index:100;

}


.navbar{


    width:90%;

    margin:30px auto;

    padding:18px 35px;


    display:flex;

    justify-content:space-between;

    align-items:center;


    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(15px);


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

    border-radius:20px;


}


.logo a{

    color:white;

    text-decoration:none;

    font-family:'Playfair Display',serif;

    font-size:32px;

    font-weight:700;

}


.logo span{

    color:#C8A25D;

}



.nav-links{

    display:flex;

    gap:40px;

    list-style:none;

}


.nav-links a{

    text-decoration:none;

    color:#fff;

    font-size:14px;

    transition:.4s;

}



.nav-links a:hover,
.nav-links .active{

    color:#C8A25D;

}



.nav-btn{


    text-decoration:none;

    color:white;


    border:1px solid #C8A25D;

    padding:12px 25px;

    border-radius:30px;

    transition:.4s;


}


.nav-btn:hover{

    background:#C8A25D;

    color:#111;

}




.menu-btn{

    display:none;

    font-size:25px;

}




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

.hero {

    position: relative;

    width: 100%;

    height: 90vh;

    min-height: 650px;

    overflow: hidden;

    color: #ffffff;

}


/* =================================
   VIDEO
================================= */

.hero-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =================================
   VIDEO DARKENING
================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            rgba(5, 20, 28, .58),
            rgba(5, 20, 28, .42)
        );

}


/* =================================
   NAVIGATION
================================= */

.hero-header {

     position: absolute;

    z-index: 10;

    top: 0;

    left: 0;

    width: 100%;

    min-height: 90px;

    padding: 20px 3vw;

    display: flex;

    align-items: center;

    justify-content: center;


}


.nav-left {

       position: absolute;

    left: 10vw;

    display: flex;

    align-items: center;

    gap: clamp(15px, 3vw, 45px);


}


.nav-right {

     position: absolute;

    right: 10vw;

    display: flex;

    align-items: center;

    gap: clamp(15px, 3vw, 45px);

}



.hero-header a {

    color: #ffffff;

    text-decoration: none;

    font-size: clamp(8px, .7vw, 11px);

    font-weight: 700;

     letter-spacing: clamp(1px, .15vw, 2px);

    white-space: nowrap;

    transition: opacity .3s ease;

}


.hero-header a:hover {

    opacity: .55;

}


/* =================================
   CENTER LOGO
================================= */

.hero-logo {

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

    width: 110px;
    height: auto;

    text-decoration: none;

}

.hero-logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


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

.hero-center {

    position: absolute;

    z-index: 5;

    top: 50%;

    left: 0;

    width: 100%;

    transform: translateY(-35%);

    text-align: center;


}


/* =================================
   STATIC BUILDING
================================= */

.hero-title {

      position: relative;

    z-index: 5;

    margin: 0;

    font-size: clamp(55px, 7vw, 105px);

    line-height: .9;

    font-weight: 700;

    letter-spacing: 2px;

}


/* =================================
   PHRASE WINDOW
================================= */

.phrase-window {

    position: relative;

    width: 100%;

    height: clamp(100px, 12vw, 170px);

    margin-top: 0;

    overflow: hidden;


}


/* =================================
   PHRASE TRACK
================================= */

.phrase-track {

      position: relative;

    width: 100%;

    height: 100%;

}


/* =================================
   PHRASES
================================= */

.phrase-track span {

     position: absolute;

    top: 0;

    white-space: nowrap;

    font-size: clamp(30px, 9vw, 115px);

    line-height: .9;

    font-weight: 610;

    letter-spacing: 2px;

    color: #fbaf41;

}


/* =================================
   BOTTOM
================================= */

.hero-bottom {

    position: absolute;

    z-index: 10;

    bottom: 30px;

    left: 3vw;

    right: 3vw;

    display: flex;

    justify-content: space-between;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

}


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

@media (max-width: 1100px) {


    .hero-header {

        padding: 20px;

    }


    .nav-left {

        left: 20px;

        gap: 18px;

    }


    .nav-right {

        right: 20px;

        gap: 18px;

    }


    .hero-header a {

        font-size: 8px;

        letter-spacing: 1px;

    }


    .hero-logo {

        width: 70px;

        height: 42px;

    }

}

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

@media (max-width: 850px) {


    .nav-left {

        gap: 12px;

    }


    .nav-right {

        gap: 12px;

    }


    .hero-header a {

        font-size: 7px;

    }


    .hero-logo {

        width: 65px;

        height: 38px;

    }

}

@media (max-width: 650px) {


    .hero-header {

        height: 75px;

        padding: 15px;

    }


    .nav-left,
    .nav-right {

        display: none;

    }


    .hero-logo {

        position: absolute;

        left: 50%;

        transform: translateX(-50%);

        width: 75px;

        height: 42px;

    }


    .hero-header::after {

        content: "☰";

        position: absolute;

        right: 20px;

        font-size: 20px;

        color: white;

        cursor: pointer;

    }

}


/* ===============================
   WHY TRUST US
================================ */

.trust-section {

    height: 100vh;

    background: #050505;

    color: white;

    position: relative;

}


/* Fixed visual panel */

.trust-panel {

    height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


/* Subtle architectural circle */

.trust-panel::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    border: 1px solid #fbad4128;

    border-radius: 50%;

    left: -300px;

    top: -250px;

}


/* Label */

.trust-eyebrow {

    position: absolute;

    top: 55px;

    left: 7%;

    color: #fbaf41;

    font-family: monospace;

    font-size: 11px;

    letter-spacing: 3px;

}


/* Text area */

.trust-text {

    position: relative;

    width: min(850px, 90%);

    height: 260px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* All slides occupy exactly the same space */

.trust-slide {

    position: absolute;

    width: 100%;

    text-align: center;

    opacity: 0;

    visibility: hidden;

    transform: translateY(30px);

}


.trust-slide.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* Main text */

.trust-slide p {

    margin: 0;

    font-size: clamp(42px, 6vw, 90px);

    line-height: 1;

    letter-spacing: -3px;

    font-weight: 300;

}


.trust-slide span {

    color: #fbaf41;

}


/* CTA */

.trust-cta {

    margin-top: 45px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

}


.trust-cta small {

    color: #777;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 4px;

}


.trust-cta strong {

    color: #c9a36a;

    font-size: 13px;

    font-weight: 400;

    letter-spacing: 3px;

}


.trust-cta b {

    color: #c9a36a;

    font-size: 24px;

    font-weight: 300;

}


/* Progress */

.trust-progress {

    position: absolute;

    bottom: 55px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 12px;

}


.trust-progress span {

    width: 35px;

    height: 2px;

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

    transition: .4s ease;

}


.trust-progress span.active {

    background: #c9a36a;

}

.trust-skyline {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 150px;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    z-index: 1;

}


.trust-skyline img {

    position: static;

    flex: 0 0 auto;

    width: auto;

    height: 150px;

    max-width: none;

    opacity: .35;

    object-fit: contain;

}

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

.projects-section {

    position: relative;
    width: 100%;
    padding: 120px 0 0;
    background: #050505;

}

.project-number {

    position: absolute;

    top: 30px;

    right: 30px;

    z-index: 2;

    color: white;

    font-family: monospace;

    font-size: 11px;

    letter-spacing: 2px;

}

.projects-header {

    margin-bottom: 100px;

}

.projects-header span {

    color: #c9a36a;

    font-family: monospace;

    font-size: 11px;

    letter-spacing: 3px;

}

.projects-header h2 {

    margin-top: 40px;

    font-size: clamp(

        50px,

        8vw,

        130px

    );

    line-height: .9;

    font-weight: 300;

    letter-spacing: -5px;

}

.projects-header em {

    color: #c9a36a;

    font-style: normal;

}

.projects-stack {

   position: relative;
    width: 100%;

}

.project-page {

    position: sticky;

    top: 60px;

    width: 100%;

    height: 80vh;

    min-height: 500px;

    margin: 0 0 120px;

    overflow: hidden;

    background: #111;
}


.project-background {

    position: absolute;

    inset: 0;

    z-index: 0;

}

.project-background img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 1.2s ease;

}

.project-overlay {

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.85) 0%,

            rgba(0,0,0,.25) 60%,

            rgba(0,0,0,.1) 100%

        );

}

.project-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(

            to right,

            rgba(0,0,0,.8),

            rgba(0,0,0,.35),

            rgba(0,0,0,.15)

        );

}

.project-page:nth-child(1) {

    z-index: 1;

    background: #111;

}

.project-page:nth-child(2) {

    z-index: 2;

    background: #161616;

}

.project-page:nth-child(3) {

    z-index: 3;

    background: #1b1b1b;

}

.project-page:nth-child(4) {

    z-index: 4;

    background: #202020;

}




.project-page:hover
.project-image img {

    transform: scale(1.04);

}

.project-info {

     position: absolute;

    left: 40px;

    bottom: 40px;

    z-index: 2;

    max-width: 500px;

}

.project-category {

 color: #c9a36a;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 2px;

}

.project-info h3 {

   margin: 15px 0;

    color: white;

    font-size: clamp(

        40px,

        6vw,

        90px

    );

    line-height: .9;

    font-weight: 300;


}

.project-info p {

    max-width: 350px;

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

    font-size: 14px;

    line-height: 1.6;

}

.project-info a {

    display: inline-block;

    margin-top: 30px;

    color: white;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 2px;

    text-decoration: none;

}

@media (max-width: 768px) {

    .projects-section {

        padding: 80px 20px 0;

    }


    .projects-header {

        margin-bottom: 60px;

    }


    .project-page {

        top: 20px;

        height: 75svh;

        min-height: 500px;

        display: flex;

        flex-direction: column;

        gap: 0;

        padding: 15px;

        margin-bottom: 80px;

    }


    .project-image {

        height: 55%;

    }


    .project-info {

        padding: 20px 5px 5px;

    }


    .project-info h3 {

        margin: 10px 0;

        font-size: 32px;

    }


    .project-info p {

        font-size: 13px;

    }

}


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

.services-section {

    background: #050505;

    color: white;

    padding: 140px 7%;

}

.services-header {

    margin-bottom: 70px;

}

.services-header > span {

    color: #c9a36a;

    font-family: monospace;

    font-size: 11px;

    letter-spacing: 3px;

}

.services-header h2 {

    font-size: clamp(50px, 7vw, 110px);

    line-height: .9;

    font-weight: 300;

    letter-spacing: -5px;

    margin-top: 25px;

}

.services-header em {

    color: #c9a36a;

    font-style: normal;

}

.services-grid {

    display: grid;

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

    height: 520px;

    gap: 2px;

}

.service-panel {

    position: relative;

    padding: 25px;

    background: #101010;

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

    overflow: hidden;

    transition:

        flex .8s cubic-bezier(.77,0,.18,1),

        background .5s ease;

}

.service-top {

    display: flex;

    justify-content: space-between;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 2px;

    color: #777;

}

.service-panel.active .service-top {

    color: #c9a36a;

}

.service-content {

    position: absolute;

    left: 25px;

    right: 25px;

    bottom: 35px;

}

.service-content h3 {

    font-size: 32px;

    font-weight: 400;

    margin-bottom: 20px;

}

.service-content p {

    color: #999;

    font-size: 14px;

    line-height: 1.6;

    max-width: 280px;

}

.service-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 30px;

    padding-top: 20px;

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

}

.service-list span {

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 1px;

    color: #bbb;

}

.service-arrow {

    position: absolute;

    top: 25px;

    right: 25px;

    color: #c9a36a;

    font-size: 20px;

}

.service-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;

    filter: blur(100%);

    opacity: .65;

    transition:

        transform 1.2s ease,

        opacity .6s ease,

        filter .6s ease;

}

/* =====================================
   VISION SECTION
===================================== */

.vision-section {


    position: relative;

    min-height: 650px;

    padding: 80px 7% 0;

    background: #050505;

    color: white;

    overflow: hidden;


}

.vision-label {

   position: relative;

    z-index: 5;


}

.vision-label span {

     color: #c9a36a;

    font-family: monospace;

    font-size: 11px;

    letter-spacing: 3px;
}

.vision-statement {

   position: relative;

    z-index: 5;

    margin-top: 100px;

    width: 65%;

}

.vision-line {

     height: auto;

    overflow: hidden;

}

.vision-line span {

    display: block;

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

    font-weight: 300;

    line-height: .9;

    letter-spacing: -5px;

    transform: translateY(100%);

    opacity: 0;

    transition:

        transform 1s cubic-bezier(.77,0,.18,1),

        opacity 1s ease;

}

.vision-line.active span {

    transform: translateY(0);

    opacity: 1;

}

.vision-line:last-child span {

    color: #c9a36a;

}

.vision-bottom {

    position: absolute;

    z-index: 5;

    right: 7%;

    bottom: 170px;

    width: 260px;

}

.vision-bottom p {

     margin: 0;

    color: #777;

    font-size: 14px;

    line-height: 1.7;
}

.vision-scroll {

    display: block;

    margin-top: 30px;

    color: #777;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 2px;

}

.vision-blueprint {

   position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

}

.blueprint-line {

 position: absolute;

    height: 1px;

    background: rgba(201,163,106,.25);
}

.line-1 {

    top: 35%;

    right: 7%;

    width: 30%;

}

.line-2 {

    top: 58%;

    right: 7%;

    width: 22%;

}

.line-3 {

    top: 78%;

    left: 7%;

    width: 35%;

}

.line-4 {

    top: 75%;

    right: 5%;

    width: 30%;

    transform-origin: right;

}

.vision-skyline {

       position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 90px;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    z-index: 2;

    opacity: .35;

}

.vision-skyline img {
  height: 90px;

    width: auto;

    max-width: none;

    flex-shrink: 0;


}