@font-face{
    font-family:"peyda";
    src:url("../font/peyda/Peyda-Bold.ttf") format("truetype");
}

@font-face{
    font-family:"Vazirmatn";
    src:url("../font/vazirmatn/fonts/ttf/Vazirmatn-Regular.ttf") format("truetype");
}

:root{
    --bg:#070707;
    --bg-soft:#0b0b0b;
    --card:#0d0d0d;
    --card-2:#111;
    --text:#f4f4ef;
    --muted:#858585;
    --muted-2:#555;
    --line:rgba(255,255,255,.1);
    --line-soft:rgba(255,255,255,.055);
    --gold:#ae883c;
    --gold-light:#e0bd68;
    --gold-soft:rgba(174,136,60,.15);
    --max:1180px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Vazirmatn,sans-serif;
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-2;

    background:
            radial-gradient(
                    circle at 80% 15%,
                    rgba(174,136,60,.09),
                    transparent 25%
            ),
            radial-gradient(
                    circle at 15% 75%,
                    rgba(174,136,60,.045),
                    transparent 28%
            );
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;

    background:
            linear-gradient(
                    90deg,
                    transparent 49.9%,
                    rgba(255,255,255,.018) 50%,
                    transparent 50.1%
            );
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

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

::selection{
    background:var(--gold);
    color:#000;
}


/* =====================================================
   NOISE
===================================================== */

.noise{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1000;
    opacity:.055;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    mix-blend-mode:screen;
}


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

body{
    animation:pageReveal .8s cubic-bezier(.16,1,.3,1) both;
}

@keyframes pageReveal{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


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

.inner-wrap{
    width:min(var(--max),calc(100% - 60px));
    margin:auto;
}


/* =====================================================
   HEADER
===================================================== */

.inner-header{
    position:absolute;
    top:0;
    left:0;
    right:0;

    z-index:100;

    padding:25px 0;

    animation:
            headerReveal 1s cubic-bezier(.16,1,.3,1) .1s both;
}

@keyframes headerReveal{

    from{
        opacity:0;
        transform:translateY(-20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.inner-header .inner-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
}


/* =====================================================
   BRAND
===================================================== */

.inner-brand{
    position:relative;

    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    border-radius:50%;
}

.inner-brand::before{
    content:"";

    position:absolute;
    inset:-7px;

    border:1px solid rgba(174,136,60,.15);
    border-radius:50%;

    transform:scale(.7);
    opacity:0;

    transition:
            transform .7s cubic-bezier(.16,1,.3,1),
            opacity .5s ease;
}

.inner-brand::after{
    content:"";

    position:absolute;
    inset:-13px;

    border:1px solid rgba(174,136,60,.05);
    border-radius:50%;
}

.inner-brand:hover::before{
    transform:scale(1);
    opacity:1;
    transition: .5s linear !important;
}

.inner-brand img{
    width:52px;
    height:52px;
    object-fit:contain;

    transition:
            transform .6s cubic-bezier(.16,1,.3,1),
            filter .5s ease;
}

.inner-brand:hover img{
    transform:scale(1.08);
    filter:drop-shadow(0 0 15px rgba(174,136,60,.35));
    transition: .5s !important;
}


/* =====================================================
   BACK LINK
===================================================== */

.back-link{
    position:relative;

    color:#777;
    font-size:13px;

    padding-bottom:8px;

    transition:
            color .35s ease,
            transform .35s cubic-bezier(.16,1,.3,1);
}

.back-link::after{
    content:"";

    position:absolute;

    right:0;
    bottom:0;

    width:100%;
    height:1px;

    background:var(--gold);

    transform:scaleX(0);
    transform-origin:right;

    transition:
            transform .5s cubic-bezier(.16,1,.3,1);
}

.back-link:hover{
    color:#fff;
    transform:translateY(-2px);
    transition: .5s linear !important;
}

.back-link:hover::after{
    transform:scaleX(1);
    transform-origin:left;
    transition: .5s linear !important;
}


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

.project-hero{
    position:relative;

    min-height:75vh;

    display:flex;
    align-items:flex-end;

    padding:160px 0 105px;

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

    overflow:hidden;
}

.project-hero::before{
    content:"";

    position:absolute;

    width:550px;
    height:550px;

    left:-180px;
    top:-220px;

    border-radius:50%;

    background:
            radial-gradient(
                    circle,
                    rgba(174,136,60,.12),
                    transparent 65%
            );

    filter:blur(30px);

    pointer-events:none;

    animation:heroGlow 8s ease-in-out infinite alternate;
}

@keyframes heroGlow{

    from{
        transform:translate(0,0) scale(1);
    }

    to{
        transform:translate(80px,60px) scale(1.15);
    }

}

.project-hero::after{
    content:"";

    position:absolute;

    right:10%;
    bottom:-200px;

    width:1px;
    height:450px;

    background:
            linear-gradient(
                    to bottom,
                    transparent,
                    rgba(174,136,60,.35),
                    transparent
            );

    transform:rotate(30deg);
}

.project-hero .inner-wrap{
    position:relative;
    z-index:2;
}


/* =====================================================
   EYEBROW
===================================================== */

.eyebrow{
    position:relative;

    display:inline-flex;
    align-items:center;

    color:#666;

    font-size:10px;
    letter-spacing:.2em;

    direction:ltr;

    margin-bottom:30px;

    padding-left:45px;
}

.eyebrow::before{
    content:"";

    position:absolute;

    left:0;

    width:30px;
    height:1px;

    background:var(--gold);

    transform-origin:left;

    animation:
            eyebrowLine 1s cubic-bezier(.16,1,.3,1) .5s both;
}

@keyframes eyebrowLine{

    from{
        transform:scaleX(0);
    }

    to{
        transform:scaleX(1);
    }

}


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

.project-hero h1{
    position:relative;

    font-family:peyda;

    font-size:clamp(70px,11vw,150px);

    line-height:.82;

    letter-spacing:-.09em;

    margin:0;

    max-width:1000px;

    animation:
            titleReveal 1.2s cubic-bezier(.16,1,.3,1) .15s both;
}

@keyframes titleReveal{

    from{
        opacity:0;
        transform:
                translateY(80px)
                scale(.96);
        clip-path:inset(100% 0 0 0);
    }

    to{
        opacity:1;
        transform:
                translateY(0)
                scale(1);
        clip-path:inset(0 0 0 0);
    }

}

.project-hero h1 span{
    color:var(--gold);

    display:inline-block;

    animation:
            goldTextReveal 1s cubic-bezier(.16,1,.3,1) .45s both;
}

@keyframes goldTextReveal{

    from{
        opacity:0;
        transform:translateX(-30px);
        filter:blur(8px);
    }

    to{
        opacity:1;
        transform:translateX(0);
        filter:blur(0);
    }

}

.project-hero p{
    max-width:650px;

    color:#888;

    font-size:18px;
    line-height:2;

    margin:45px 0 0;

    animation:
            paragraphReveal 1s cubic-bezier(.16,1,.3,1) .65s both;
}

@keyframes paragraphReveal{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =====================================================
   HERO GRID / CONTENT
===================================================== */

.project-section{
    position:relative;

    padding:140px 0;

    overflow:hidden;
}

.project-section::before{
    content:"";

    position:absolute;

    top:0;
    right:12%;

    width:1px;
    height:100%;

    background:
            linear-gradient(
                    to bottom,
                    transparent,
                    rgba(255,255,255,.035) 20%,
                    rgba(255,255,255,.035) 80%,
                    transparent
            );

    pointer-events:none;
}

.project-layout{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:.75fr 1.25fr;

    gap:100px;

    align-items:start;
}


/* =====================================================
   INFO
===================================================== */

.project-info{
    position:relative;
}

.project-info h2{
    font-family:peyda;

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

    line-height:.9;

    letter-spacing:-.08em;

    margin:0 0 35px;

    animation:contentReveal 1s cubic-bezier(.16,1,.3,1) both;
}

.project-info > p{
    color:#888;

    line-height:2;

    font-size:17px;

    max-width:500px;
}

.project-info > p + p{
    margin-top:25px;
}


/* =====================================================
   PROJECT STEPS
===================================================== */

.project-steps{
    margin-top:60px;

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

.project-step{
    position:relative;

    display:grid;

    grid-template-columns:50px 1fr;

    gap:20px;

    padding:28px 0;

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

    transition:
            padding-right .5s cubic-bezier(.16,1,.3,1),
            background .5s ease;
}

.project-step::before{
    content:"";

    position:absolute;

    right:-20px;
    left:-20px;

    top:0;
    bottom:0;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(174,136,60,.035),
                    transparent
            );

    opacity:0;

    transition:opacity .5s ease;

    pointer-events:none;
}

.project-step:hover{
    padding-right:15px;
    transition: .5s linear !important;
}

.project-step:hover::before{
    opacity:1;
    transition: .5s linear !important;
}

.project-step > span{
    position:relative;
    z-index:2;

    color:var(--gold);

    font-size:11px;

    transition:
            transform .5s cubic-bezier(.16,1,.3,1);
}

.project-step:hover > span{
    transform:translateX(-6px);
    transition: .5s linear !important;
}

.project-step strong{
    position:relative;
    z-index:2;

    display:block;

    font-size:18px;

    margin-bottom:7px;

    transition:color .35s ease;
}

.project-step:hover strong{
    color:var(--gold-light);
    transition: .5s linear !important;
}

.project-step p{
    position:relative;
    z-index:2;

    color:#666;

    font-size:13px;

    line-height:1.9;

    margin:0;
}


/* =====================================================
   FORM BOX
===================================================== */

.project-form-box{
    position:relative;

    background:
            radial-gradient(
                    circle at 100% 0%,
                    rgba(174,136,60,.08),
                    transparent 35%
            ),
            linear-gradient(
                    145deg,
                    #111,
                    #0a0a0a
            );

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

    border-radius:30px;

    padding:45px;

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

    overflow:hidden;

    animation:
            formReveal 1.1s cubic-bezier(.16,1,.3,1) .35s both;
}

@keyframes formReveal{

    from{
        opacity:0;
        transform:
                translateY(70px)
                scale(.97);
    }

    to{
        opacity:1;
        transform:
                translateY(0)
                scale(1);
    }

}

.project-form-box::before{
    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:250px;
    height:250px;

    border-radius:50%;

    border:1px solid rgba(174,136,60,.12);

    box-shadow:
            0 0 80px rgba(174,136,60,.05);

    pointer-events:none;
}

.project-form-box::after{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    var(--gold),
                    transparent
            );

    opacity:.45;
}


/* =====================================================
   FORM HEADING
===================================================== */

.form-heading{
    position:relative;

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

    padding-bottom:30px;

    margin-bottom:35px;
}

.form-heading span{
    color:var(--gold);

    font-size:10px;

    letter-spacing:.2em;

    direction:ltr;
}

.form-heading h2{
    font-family:peyda;

    font-size:42px;

    margin:12px 0 0;

    letter-spacing:-.05em;
}


/* =====================================================
   FORM GRID
===================================================== */

.form-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;
}

.field{
    position:relative;

    display:flex;

    flex-direction:column;

    gap:10px;
}

.field.full{
    grid-column:1/-1;
}

.field label{
    color:#aaa;

    font-size:13px;

    transition:color .3s ease;
}

.field:focus-within label{
    color:var(--gold-light);
}

.field input,
.field textarea,
.field select{
    width:100%;

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

    outline:none;

    background:#080808;

    color:#eee;

    border-radius:12px;

    padding:15px 17px;

    font-size:14px;

    transition:
            border-color .4s ease,
            box-shadow .4s ease,
            background .4s ease,
            transform .4s cubic-bezier(.16,1,.3,1);
}

.field input,
.field select{
    height:55px;
}

.field textarea{
    resize:vertical;

    min-height:150px;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
    border-color:rgba(174,136,60,.7);

    background:#0a0a0a;

    box-shadow:
            0 0 0 3px rgba(174,136,60,.05),
            0 15px 40px rgba(0,0,0,.15);

    transform:translateY(-2px);
}

.field input::placeholder,
.field textarea::placeholder{
    color:#444;
}

.field select{
    appearance:none;

    cursor:pointer;
}


/* =====================================================
   AGREEMENT
===================================================== */

.form-agreement{
    position:relative;

    margin:30px 0;

    padding:20px;

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

    border-radius:12px;

    color:#777;

    font-size:12px;

    line-height:1.9;

    transition:
            border-color .4s ease,
            background .4s ease;
}

.form-agreement:hover{
    border-color:rgba(174,136,60,.25);

    background:rgba(174,136,60,.025);
    transition: .5s linear !important;
}

.form-agreement label{
    display:flex;

    align-items:flex-start;

    gap:10px;

    cursor:pointer;
}

.form-agreement input{
    margin-top:6px;

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

.form-agreement a{
    display:inline-block;

    color:var(--gold-light);

    margin-top:8px;

    transition:color .3s ease;
}

.form-agreement a:hover{
    color:#fff;
    transition: .5s linear !important;
}


/* =====================================================
   SUBMIT
===================================================== */

.submit-button{
    position:relative;

    width:100%;

    height:60px;

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

    border-radius:100px;

    background:var(--gold);

    color:#050505;

    cursor:pointer;

    padding:0 25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-size:15px;

    overflow:hidden;

    isolation:isolate;

    transition:
            transform .5s cubic-bezier(.16,1,.3,1),
            color .4s ease;
}

.submit-button::before{
    content:"";

    position:absolute;

    inset:0;

    background:#f0e6c9;

    transform:translateX(101%);

    transition:
            transform .6s cubic-bezier(.16,1,.3,1);

    z-index:-1;
}

.submit-button:hover::before{
    transform:translateX(0);
    transition: .5s linear !important;
}

.submit-button:hover{
    transform:translateY(-4px);
    transition: .5s linear !important;
}

.submit-button span:last-child{
    font-size:20px;

    transition:
            transform .5s cubic-bezier(.16,1,.3,1);
}

.submit-button:hover span:last-child{
    transform:translateX(-8px);
    transition: .5s linear !important;
}


/* =====================================================
   FORM MESSAGE
===================================================== */

.form-message{
    display:none;

    margin-top:20px;

    padding:15px;

    border-radius:10px;

    font-size:13px;

    line-height:1.8;

    animation:
            messageReveal .5s cubic-bezier(.16,1,.3,1) both;
}

.form-message.show{
    display:block;
}

@keyframes messageReveal{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


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

.inner-footer{
    position:relative;

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

    padding:35px 30px;

    display:flex;

    justify-content:space-between;

    color:#555;

    font-size:10px;

    direction:ltr;

    overflow:hidden;
}

.inner-footer::before{
    content:"";

    position:absolute;

    top:0;
    left:-20%;

    width:20%;
    height:1px;

    background:var(--gold);

    animation:
            footerLine 5s linear infinite;
}

@keyframes footerLine{

    from{
        left:-20%;
    }

    to{
        left:120%;
    }

}


/* =====================================================
   SERVICES / CONTENT PAGE ENHANCEMENT
===================================================== */

.project-section > .inner-wrap > .project-steps{
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

.project-section > .inner-wrap > .project-info{
    max-width:850px;
    margin-left:auto;
    margin-right:auto;
}

.project-section > .inner-wrap > .project-info .project-steps{
    max-width:none;
}


/* =====================================================
   SCROLL REVEAL BASE
===================================================== */

.project-step{
    opacity:0;
    transform:translateY(35px);
}

.reveal-ready .project-step{
    opacity:1;
    transform:translateY(0);
}


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

@media(max-width:900px){

    .inner-wrap{
        width:min(var(--max),calc(100% - 36px));
    }

    .inner-header{
        padding:18px 0;
    }

    .inner-brand{
        width:50px;
        height:50px;
    }

    .inner-brand img{
        width:45px;
        height:45px;
    }

    .project-hero{
        min-height:68vh;

        padding:
                130px
                0
                80px;
    }

    .project-hero h1{
        font-size:18vw;
    }

    .project-hero p{
        font-size:16px;

        margin-top:35px;
    }

    .project-section{
        padding:100px 0;
    }

    .project-layout{
        grid-template-columns:1fr;

        gap:70px;
    }

    .project-info h2{
        font-size:17vw;
    }

    .project-form-box{
        padding:30px 22px;
    }

}


@media(max-width:600px){

    .inner-wrap{
        width:calc(100% - 32px);
    }

    .back-link{
        font-size:11px;
    }

    .project-hero{
        min-height:62vh;

        padding:
                120px
                0
                65px;
    }

    .project-hero h1{
        font-size:20vw;
    }

    .project-hero p{
        font-size:15px;
        line-height:2;
    }

    .project-section{
        padding:80px 0;
    }

    .project-info h2{
        font-size:18vw;
    }

    .project-info > p{
        font-size:15px;
    }

    .project-step{
        grid-template-columns:40px 1fr;

        gap:12px;

        padding:23px 0;
    }

    .project-step strong{
        font-size:16px;
    }

    .project-step p{
        font-size:12px;
    }

    .project-form-box{
        padding:25px 18px;

        border-radius:22px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .field.full{
        grid-column:auto;
    }

    .form-heading h2{
        font-size:34px;
    }

    .inner-footer{
        flex-direction:column;

        gap:12px;

        align-items:center;

        text-align:center;
    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

}