/* =========================================================
   SPIRE DIMENSIONS
   BDA & BMC PREMIUM APPROVAL PAGE
========================================================= */


:root{

    --approval-black:#0b0b0a;
    --approval-dark:#11110f;
    --approval-cream:#f4f1ea;
    --approval-white:#ffffff;
    --approval-gold:#c5a46d;
    --approval-gold-light:#dfc18b;
    --approval-grey:#77746e;
    --approval-border:rgba(255,255,255,.12);

}


/* =========================================================
   GLOBAL
========================================================= */

html{
    scroll-behavior:smooth;
}


body{
    overflow-x:hidden;
}


.approval-hero,
.approval-services,
.comparison-section,
.approval-process,
.documents-section,
.why-spire,
.faq-section,
.approval-cta{
    overflow:hidden;
}





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

.approval-hero{

    min-height:100vh;

    position:relative;

    background:
    radial-gradient(
        circle at 75% 35%,
        rgba(197,164,109,.12),
        transparent 28%
    ),
    #0b0b0a;

    color:#fff;

    display:flex;

    align-items:center;

}


.hero-grid-lines{

    position:absolute;

    inset:0;

    opacity:.13;

    background-image:

    linear-gradient(
        rgba(255,255,255,.12) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.12) 1px,
        transparent 1px
    );

    background-size:
    90px 90px;

    mask-image:
    linear-gradient(
        to bottom,
        black,
        transparent
    );

}


.hero-watermark{

    position:absolute;

    right:-60px;

    top:50%;

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

    font-family:
    "Playfair Display",
    serif;

    font-size:
    clamp(70px,10vw,160px);

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

    letter-spacing:
    15px;

    white-space:nowrap;

}


.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    pointer-events:none;

}


.glow-one{

    width:400px;
    height:400px;

    right:8%;
    top:20%;

    background:
    rgba(197,164,109,.07);

}


.glow-two{

    width:300px;
    height:300px;

    left:20%;
    bottom:0;

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

}


.approval-hero-content{

    position:relative;

    z-index:5;

    padding-top:130px;

    padding-bottom:120px;

}


.approval-eyebrow{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:10px;

    letter-spacing:4px;

    color:#c5a46d;

    margin-bottom:30px;

}


.approval-eyebrow span{

    width:35px;

    height:1px;

    background:#c5a46d;

}


.approval-title{

    font-family:
    "Playfair Display",
    serif;

    font-weight:400;

    font-size:
    clamp(65px,8.5vw,135px);

    line-height:.88;

    letter-spacing:-5px;

    max-width:850px;

    margin:0;

}


.approval-title em{

    color:#c5a46d;

    font-weight:400;

}


.approval-intro{

    max-width:570px;

    font-size:16px;

    line-height:1.9;

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

    margin:
    40px 0 35px;

}


.hero-actions{

    display:flex;

    align-items:center;

    gap:30px;

}


.premium-btn{

    background:#c5a46d !important;

    color:#111 !important;

    border-color:#c5a46d !important;

    display:flex;

    align-items:center;

    gap:18px;

}


.premium-btn span{

    font-size:18px;

    transition:
    transform .3s ease;

}


.premium-btn:hover span{

    transform:
    translate(4px,-4px);

}


.text-link{

    color:#fff;

    text-decoration:none;

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

    display:flex;

    gap:14px;

    align-items:center;

}


.text-link span{

    color:#c5a46d;

    font-size:18px;

}


.hero-meta{

    display:flex;

    gap:55px;

    margin-top:85px;

    padding-top:25px;

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

    max-width:800px;

}


.hero-meta div{

    display:flex;

    flex-direction:column;

    gap:6px;

}


.hero-meta strong{

    color:#c5a46d;

    font-family:
    "Playfair Display",
    serif;

    font-size:22px;

    font-weight:400;

}


.hero-meta span{

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

    font-size:9px;

    line-height:1.5;

    letter-spacing:1px;

    max-width:160px;

}



/* =========================================================
   ARCHITECTURAL CARD
========================================================= */

.hero-architecture-card{

    position:absolute;

    z-index:4;

    width:380px;

    height:460px;

    right:7%;

    top:50%;

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

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

    border:
    1px solid
    rgba(197,164,109,.35);

    backdrop-filter:
    blur(15px);

    box-shadow:
    0 40px 100px
    rgba(0,0,0,.5);

    padding:25px;

}


.drawing-header,
.drawing-footer{

    display:flex;

    justify-content:space-between;

    font-size:8px;

    letter-spacing:2px;

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

}


.blueprint{

    position:relative;

    height:350px;

    margin-top:20px;

    border:
    1px solid
    rgba(197,164,109,.18);

    background:
    radial-gradient(
        circle,
        rgba(197,164,109,.04),
        transparent
    );

}


.blueprint::before,
.blueprint::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:.18;

    background-image:

    linear-gradient(
        rgba(197,164,109,.3) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(197,164,109,.3) 1px,
        transparent 1px
    );

    background-size:30px 30px;

}


.blueprint-house{

    position:absolute;

    width:72%;

    height:65%;

    left:14%;

    top:18%;

    border:
    1px solid
    rgba(197,164,109,.65);

    z-index:2;

}


.blueprint-room{

    position:absolute;

    display:flex;

    align-items:center;

    justify-content:center;

    color:
    rgba(197,164,109,.75);

    font-size:7px;

    letter-spacing:1px;

    border:
    1px solid
    rgba(197,164,109,.4);

    animation:
    blueprintReveal .8s ease both;

}


.room-one{

    left:0;
    top:0;
    width:58%;
    height:55%;

}


.room-two{

    right:0;
    top:0;
    width:42%;
    height:55%;

}


.room-three{

    left:0;
    bottom:0;
    width:38%;
    height:45%;

}


.room-four{

    right:0;
    bottom:0;
    width:62%;
    height:45%;

}


.blueprint-door{

    position:absolute;

    width:30px;

    height:5px;

    bottom:-3px;

    left:45%;

    background:
    #0b0b0a;

    border:
    1px solid
    #c5a46d;

}


.blueprint-dimension{

    position:absolute;

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

    font-size:8px;

    letter-spacing:1px;

}


.dimension-one{

    top:4px;
    left:48%;

}


.dimension-two{

    left:5px;
    top:45%;

    transform:
    rotate(-90deg);

}


.approval-status{

    display:flex;

    align-items:center;

    gap:7px;

    color:#c5a46d !important;

}


.approval-status i{

    width:5px;
    height:5px;

    border-radius:50%;

    background:#c5a46d;

    box-shadow:
    0 0 10px #c5a46d;

}


@keyframes blueprintReveal{

    from{

        opacity:0;

        transform:
        scale(.8);

    }

    to{

        opacity:1;

        transform:
        scale(1);

    }

}


.approval-scroll{

    color:
    rgba(255,255,255,.4) !important;

}



/* =========================================================
   MARQUEE
========================================================= */

.approval-marquee{

    overflow:hidden;

    background:#c5a46d;

    color:#111;

    padding:18px 0;

}


.approval-marquee-track{

    display:flex;

    align-items:center;

    width:max-content;

    gap:35px;

    animation:
    approvalMarquee 28s
    linear infinite;

}


.approval-marquee span{

    font-size:10px;

    letter-spacing:3px;

    font-weight:600;

    white-space:nowrap;

}


.approval-marquee b{

    font-size:13px;

}


@keyframes approvalMarquee{

    to{

        transform:
        translateX(-50%);

    }

}



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

.approval-intro-section{

    background:#f4f1ea;

}


.approval-intro-grid{

    display:grid;

    grid-template-columns:
    .8fr 1.2fr;

    gap:100px;

    align-items:start;

}


.approval-large-text p{

    font-family:
    "Playfair Display",
    serif;

    font-size:
    clamp(25px,3vw,45px);

    line-height:1.35;

    color:#171614;

    margin:0 0 30px;

}


.approval-large-text p + p{

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

    font-size:16px;

    line-height:1.9;

    color:#68655f;

    max-width:650px;

}



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

.approval-services{

    background:#f4f1ea;

}


.section-top{

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:50px;

    margin-bottom:70px;

}


.section-side-text{

    max-width:360px;

    color:#77736b;

    line-height:1.8;

    font-size:14px;

}


.approval-card-grid{

    display:grid;

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

    gap:2px;

}


.approval-card{

    position:relative;

    min-height:390px;

    padding:45px;

    background:#ebe7df;

    border:1px solid rgba(0,0,0,.07);

    transition:
    transform .5s ease,
    background .5s ease,
    color .5s ease;

}


.approval-card:hover{

    transform:
    translateY(-10px);

    background:#11110f;

    color:#fff;

}


.approval-card.featured{

    background:#11110f;

    color:#fff;

}


.approval-card-top{

    display:flex;

    justify-content:space-between;

    font-size:9px;

    letter-spacing:2px;

    color:#a09b91;

}


.approval-card-icon{

    margin-top:55px;

    font-family:
    "Playfair Display",
    serif;

    color:#c5a46d;

    font-size:42px;

}


.approval-card h3{

    font-family:
    "Playfair Display",
    serif;

    font-size:30px;

    font-weight:400;

    margin:18px 0;

}


.approval-card p{

    color:#79756e;

    font-size:13px;

    line-height:1.8;

    max-width:430px;

}


.approval-card.featured p{

    color:#aaa69d;

}


.approval-card a{

    position:absolute;

    bottom:35px;

    left:45px;

    color:#c5a46d;

    font-size:10px;

    letter-spacing:1.5px;

    text-transform:uppercase;

    text-decoration:none;

}


.featured-label{

    position:absolute;

    top:0;

    right:0;

    background:#c5a46d;

    color:#111;

    padding:8px 14px;

    font-size:7px;

    letter-spacing:1px;

}



/* =========================================================
   COMPARISON
========================================================= */

.comparison-section{

    background:#11110f;

    color:#fff;

}


.comparison-heading{

    margin-bottom:65px;

}


.comparison-table{

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

}


.comparison-head,
.comparison-row{

    display:grid;

    grid-template-columns:
    1fr 1fr 1fr;

}


.comparison-head{

    color:#c5a46d;

    font-size:9px;

    letter-spacing:2px;

}


.comparison-head div,
.comparison-row div{

    padding:25px;

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

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

}


.comparison-row div:first-child{

    color:#c5a46d;

    font-size:9px;

    letter-spacing:2px;

}


.comparison-row div{

    color:#9b988f;

    font-size:13px;

    line-height:1.7;

}


.comparison-row strong{

    color:#fff;

    font-weight:400;

}


.comparison-note{

    margin-top:35px;

    padding:22px;

    border:
    1px solid
    rgba(197,164,109,.25);

    color:#88847b;

    font-size:11px;

    line-height:1.7;

}


.comparison-note span{

    color:#c5a46d;

    letter-spacing:2px;

    margin-right:15px;

}



/* =========================================================
   STATS
========================================================= */

.approval-stats{

    background:#0b0b0a;

    color:#fff;

    padding:
    120px 0;

}


.stats-heading{

    margin-bottom:80px;

}


.stats-heading h2{

    font-family:
    "Playfair Display",
    serif;

    font-size:
    clamp(45px,6vw,85px);

    line-height:.95;

    font-weight:400;

    margin:20px 0 0;

}


.stats-heading em{

    color:#c5a46d;

}


.approval-stat-grid{

    display:grid;

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

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

}


.approval-stat{

    padding:
    45px 25px;

    border-right:
    1px solid
    rgba(255,255,255,.13);

}


.approval-stat:last-child{

    border-right:0;

}


.approval-stat strong{

    font-family:
    "Playfair Display",
    serif;

    font-size:
    clamp(42px,5vw,75px);

    font-weight:400;

    color:#c5a46d;

}


.approval-stat span{

    display:block;

    margin-top:12px;

    color:#77736c;

    font-size:10px;

    letter-spacing:2px;

    text-transform:uppercase;

}



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

.approval-process{

    background:#f4f1ea;

}


.process-heading{

    margin-bottom:90px;

}


.luxury-timeline{

    position:relative;

    max-width:1000px;

    margin:auto;

}


.luxury-timeline::before{

    content:"";

    position:absolute;

    left:39px;

    top:0;

    bottom:0;

    width:1px;

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

}


.timeline-item{

    position:relative;

    display:grid;

    grid-template-columns:
    80px 1fr;

    gap:55px;

    padding-bottom:75px;

}


.timeline-number{

    width:80px;

    height:80px;

    border-radius:50%;

    border:
    1px solid
    #c5a46d;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f4f1ea;

    color:#c5a46d;

    font-family:
    "Playfair Display",
    serif;

    font-size:20px;

    position:relative;

    z-index:2;

}


.timeline-content{

    padding-top:8px;

}


.timeline-content > span{

    color:#c5a46d;

    font-size:9px;

    letter-spacing:2px;

}


.timeline-content h3{

    font-family:
    "Playfair Display",
    serif;

    font-size:35px;

    font-weight:400;

    margin:10px 0;

}


.timeline-content p{

    color:#77736d;

    line-height:1.8;

    font-size:14px;

    max-width:600px;

}



/* =========================================================
   DOCUMENTS
========================================================= */

.documents-section{

    background:#e9e5dd;

}


.documents-layout{

    display:grid;

    grid-template-columns:
    .8fr 1.2fr;

    gap:100px;

}


.documents-title .text{

    margin-top:30px;

    max-width:400px;

}


.documents-grid{

    display:grid;

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

    gap:2px;

}


.document-card{

    min-height:210px;

    padding:30px;

    background:#f4f1ea;

    border:
    1px solid
    rgba(0,0,0,.05);

    transition:
    transform .4s ease,
    background .4s ease;

}


.document-card:hover{

    transform:
    translateY(-6px);

    background:#11110f;

    color:#fff;

}


.document-card span{

    color:#c5a46d;

    font-size:9px;

    letter-spacing:2px;

}


.document-card h3{

    font-family:
    "Playfair Display",
    serif;

    font-weight:400;

    font-size:21px;

    margin:
    35px 0 12px;

}


.document-card p{

    font-size:12px;

    color:#77736c;

    line-height:1.6;

}


.document-card:hover p{

    color:#99958d;

}



/* =========================================================
   WHY SPIRE
========================================================= */

.why-spire{

    background:#f4f1ea;

}


.why-grid{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:100px;

    align-items:center;

}


.why-image{

    position:relative;

    height:680px;

    overflow:hidden;

}


.why-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
    transform 1.2s ease;

}


.why-image:hover img{

    transform:
    scale(1.05);

}


.image-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.7),
        transparent 50%
    );

}


.why-image-caption{

    position:absolute;

    left:40px;

    bottom:40px;

    color:#fff;

    display:flex;

    flex-direction:column;

    gap:10px;

}


.why-image-caption span{

    color:#c5a46d;

    font-size:9px;

    letter-spacing:3px;

}


.why-image-caption strong{

    font-family:
    "Playfair Display",
    serif;

    font-size:30px;

    font-weight:400;

}


.why-points{

    margin-top:50px;

}


.why-point{

    display:grid;

    grid-template-columns:40px 1fr;

    gap:20px;

    padding:
    25px 0;

    border-top:
    1px solid
    rgba(0,0,0,.12);

}


.why-point > span{

    color:#c5a46d;

    font-size:10px;

    letter-spacing:1px;

}


.why-point h4{

    font-family:
    "Playfair Display",
    serif;

    font-size:20px;

    font-weight:400;

    margin:0 0 8px;

}


.why-point p{

    color:#77736c;

    font-size:12px;

    line-height:1.7;

    margin:0;

}



/* =========================================================
   FAQ
========================================================= */

.faq-section{

    background:#11110f;

    color:#fff;

}


.faq-layout{

    display:grid;

    grid-template-columns:
    .7fr 1.3fr;

    gap:120px;

}


.faq-heading .text{

    color:#88847c;

    max-width:350px;

    margin:30px 0;

}


.faq-list{

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

}


.faq-item{

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

}


.faq-question{

    width:100%;

    border:0;

    background:none;

    color:#fff;

    padding:
    28px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-align:left;

    cursor:pointer;

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

    font-size:14px;

}


.faq-question i{

    font-style:normal;

    color:#c5a46d;

    font-size:22px;

    transition:
    transform .3s ease;

}


.faq-item.active
.faq-question i{

    transform:
    rotate(45deg);

}


.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:
    max-height .5s ease;

}


.faq-answer p{

    color:#858179;

    font-size:13px;

    line-height:1.8;

    padding:
    0 50px 28px 0;

    margin:0;

}



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

.approval-cta{

    position:relative;

    background:#c5a46d;

    color:#111;

    text-align:center;

    padding:
    150px 0;

}


.approval-cta-content{

    position:relative;

    z-index:5;

}


.approval-cta .section-label{

    color:#111;

}


.approval-cta h2{

    font-family:
    "Playfair Display",
    serif;

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

    line-height:.9;

    font-weight:400;

    letter-spacing:-3px;

    margin:
    20px 0 35px;

}


.approval-cta h2 em{

    color:#fff;

}


.approval-cta p{

    max-width:520px;

    margin:
    0 auto 35px;

    line-height:1.8;

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

    font-size:14px;

}


.approval-cta .premium-btn{

    background:#111 !important;

    color:#fff !important;

    border-color:#111 !important;

}


.cta-orbit{

    position:absolute;

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

    border-radius:50%;

    left:50%;

    top:50%;

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

}


.orbit-one{

    width:500px;
    height:500px;

}


.orbit-two{

    width:800px;
    height:800px;

}



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

.approval-contact{

    background:#f4f1ea;

}



/* =========================================================
   REVEAL
========================================================= */

.reveal{

    opacity:0;

    transform:
    translateY(35px);

    transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.2,.7,.2,1);

}


.reveal.active{

    opacity:1;

    transform:
    translateY(0);

}



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

@media(max-width:1100px){

    .hero-architecture-card{

        right:3%;

        width:320px;

        height:410px;

    }


    .blueprint{

        height:300px;

    }


    .approval-title{

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

    }


    .approval-hero-content{

        max-width:650px;

        margin-left:0;

    }


    .hero-meta{

        gap:25px;

    }


    .faq-layout{

        gap:60px;

    }

}



@media(max-width:900px){

    .approval-hero{

        min-height:
        auto;

    }


    .approval-hero-content{

        padding-top:170px;

        padding-bottom:120px;

        max-width:100%;

    }


    .hero-architecture-card{

        display:none;

    }


    .approval-title{

        font-size:
        clamp(58px,12vw,100px);

        letter-spacing:-3px;

    }


    .hero-meta{

        margin-top:60px;

    }


    .approval-intro-grid,
    .documents-layout,
    .why-grid,
    .faq-layout{

        grid-template-columns:1fr;

        gap:60px;

    }


    .approval-card-grid{

        grid-template-columns:1fr;

    }


    .approval-stat-grid{

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

    }


    .approval-stat{

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

    }


    .why-image{

        height:550px;

    }


    .section-top{

        align-items:start;

        flex-direction:column;

    }

}



@media(max-width:700px){

    .approval-hero-content{

        padding-top:145px;

        padding-bottom:90px;

    }


    .approval-eyebrow{

        font-size:8px;

        letter-spacing:2.5px;

    }


    .approval-title{

        font-size:
        clamp(52px,16vw,82px);

        line-height:.9;

    }


    .approval-intro{

        font-size:14px;

        line-height:1.8;

        margin-top:30px;

    }


    .hero-actions{

        flex-direction:column;

        align-items:flex-start;

        gap:25px;

    }


    .hero-meta{

        display:grid;

        grid-template-columns:
        1fr 1fr;

        gap:25px;

    }


    .hero-meta div:last-child{

        grid-column:
        1 / -1;

    }


    .approval-large-text p{

        font-size:27px;

    }


    .approval-card{

        min-height:360px;

        padding:30px;

    }


    .approval-card a{

        left:30px;

        bottom:28px;

    }


    .comparison-table{

        overflow-x:auto;

    }


    .comparison-head,
    .comparison-row{

        min-width:700px;

    }


    .comparison-head div,
    .comparison-row div{

        padding:18px;

    }


    .approval-stat-grid{

        grid-template-columns:1fr 1fr;

    }


    .approval-stat{

        padding:
        30px 15px;

    }


    .approval-stat strong{

        font-size:42px;

    }


    .timeline-item{

        grid-template-columns:
        55px 1fr;

        gap:25px;

    }


    .timeline-number{

        width:55px;

        height:55px;

        font-size:15px;

    }


    .luxury-timeline::before{

        left:27px;

    }


    .timeline-content h3{

        font-size:28px;

    }


    .documents-grid{

        grid-template-columns:1fr;

    }


    .why-image{

        height:430px;

    }


    .why-image-caption{

        left:25px;

        bottom:25px;

    }


    .why-image-caption strong{

        font-size:25px;

    }


    .faq-answer p{

        padding-right:0;

    }


    .approval-cta{

        padding:110px 20px;

    }


    .approval-cta h2{

        font-size:
        clamp(50px,15vw,80px);

        letter-spacing:-2px;

    }


    .orbit-one{

        width:350px;
        height:350px;

    }


    .orbit-two{

        width:600px;
        height:600px;

    }

}



@media(max-width:500px){

    .hero-meta{

        grid-template-columns:
        1fr;

    }


    .hero-meta div:last-child{

        grid-column:auto;

    }


    .approval-stat-grid{

        grid-template-columns:1fr;

    }


    .approval-stat{

        border-right:0;

    }


    .approval-card h3{

        font-size:26px;

    }


    .section-title{

        font-size:
        43px !important;

    }


    .lux-btn{

        font-size:9px;

        letter-spacing:1px;

    }

}



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

@media(max-width:900px){

    .cursor,
    .cursor-ring{

        display:none !important;

    }

}



/* =========================================================
   ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:
        .01ms !important;

        animation-iteration-count:
        1 !important;

        scroll-behavior:auto !important;

        transition-duration:
        .01ms !important;

    }

}