/* =========================================================
   START A PROJECT
========================================================= */

.start-project-page {
    display: grid;
    gap: 24px;
    width: 100%;
}


/* =========================================================
   LANGUAGE
========================================================= */

/* =========================================================
   LANGUAGE
========================================================= */

.start-project-lang--fa {
    display: none !important;
}


html[data-language="fa"]
.start-project-lang--en {
    display: none !important;
}


html[data-language="fa"]
.start-project-lang--fa {
    display: revert !important;
}


/*
 * Persian form direction
 */

html[data-language="fa"]
.start-project-form,
html[data-language="fa"]
.start-project-field {
    direction: rtl;
    text-align: right;
}


    html[data-language="fa"]
    .start-project-field input,
    html[data-language="fa"]
    .start-project-field textarea,
    html[data-language="fa"]
    .start-project-field select {
        direction: rtl;
        text-align: right;
    }


        /*
 * Email and phone values should remain LTR
 */

        html[data-language="fa"]
        .start-project-field input[type="email"],
        html[data-language="fa"]
        .start-project-field input[type="tel"] {
            direction: ltr;
            text-align: left;
        }


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

.start-project-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 370px;
    display: flex;
    align-items: center;
    padding: 54px 42px;
    border: 1px solid rgba(121, 86, 47, 0.14);
    border-radius: 36px;
    background: radial-gradient( circle at 91% 8%, rgba(240, 205, 124, 0.22), transparent 29% ), radial-gradient( circle at 15% 92%, rgba(184, 114, 75, 0.08), transparent 25% ), linear-gradient( 135deg, rgba(255, 252, 246, 0.98), rgba(244, 235, 220, 0.95) );
    box-shadow: 0 22px 50px rgba(78, 53, 28, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

    .start-project-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        opacity: 0.3;
        background-image: linear-gradient( rgba(125, 90, 49, 0.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(125, 90, 49, 0.055) 1px, transparent 1px );
        background-size: 54px 54px;
    }

.start-project-hero__glow {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    pointer-events: none;
}

.start-project-hero__glow--one {
    top: -190px;
    right: -110px;
    width: 430px;
    height: 430px;
    background: radial-gradient( circle, rgba(231, 188, 91, 0.22), transparent 70% );
}

.start-project-hero__glow--two {
    bottom: -250px;
    left: -120px;
    width: 390px;
    height: 390px;
    background: radial-gradient( circle, rgba(179, 109, 72, 0.11), transparent 70% );
}

.start-project-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 920px;
}

.start-project-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 10px 15px;
    border: 1px solid rgba(200, 154, 66, 0.25);
    border-radius: 999px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.72), rgba(247, 235, 210, 0.72) );
    color: #895f23;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    box-shadow: 0 9px 22px rgba(84, 58, 28, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.start-project-eyebrow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient( 135deg, #d19169, #ad694b );
    box-shadow: 0 0 0 5px rgba(182, 112, 77, 0.1);
}

.start-project-title {
    max-width: 800px;
    margin: 0 0 20px;
    color: #35281f;
    font-size: clamp(39px, 4.2vw, 68px);
    font-weight: 950;
    line-height: 1.03;
    letter-spacing: -2.4px;
}

    .start-project-title strong {
        color: #bd862e;
        font-weight: inherit;
    }

.start-project-description {
    max-width: 850px;
    margin: 0;
    color: #667895;
    font-size: 15px;
    font-weight: 620;
    line-height: 1.85;
}


/* =========================================================
   LAYOUT
========================================================= */

.start-project-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.48fr);
    align-items: start;
    gap: 22px;
}


/* =========================================================
   INFORMATION PANEL
========================================================= */

.start-project-info-panel,
.start-project-form-shell {
    border: 1px solid rgba(121, 86, 47, 0.14);
    border-radius: 30px;
    background: radial-gradient( circle at 92% 8%, rgba(240, 205, 124, 0.15), transparent 29% ), linear-gradient( 145deg, rgba(255, 252, 246, 0.98), rgba(244, 235, 220, 0.95) );
    box-shadow: 0 22px 50px rgba(78, 53, 28, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.start-project-info-panel {
    position: sticky;
    top: 100px;
    padding: 28px;
}

.start-project-info-panel__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(121, 86, 47, 0.12);
}

    .start-project-info-panel__header > span {
        display: grid;
        place-items: center;
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
        border-radius: 14px;
        background: linear-gradient( 135deg, #f4dfad, #ca9541 );
        color: #332313;
        font-size: 12px;
        font-weight: 950;
    }

    .start-project-info-panel__header div {
        display: grid;
        gap: 4px;
    }

    .start-project-info-panel__header strong {
        color: #332a25;
        font-size: 17px;
        font-weight: 950;
    }

    .start-project-info-panel__header small {
        color: #7b8698;
        font-size: 11px;
        font-weight: 700;
    }

.start-project-process {
    display: grid;
    gap: 7px;
    margin-top: 20px;
}

    .start-project-process article {
        display: grid;
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 13px;
        padding: 15px 12px;
        border-radius: 18px;
        transition: transform 0.3s cubic-bezier(.22, 1, .36, 1), background 0.3s ease;
    }

        .start-project-process article:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, 0.55);
        }

        .start-project-process article > span {
            display: grid;
            place-items: center;
            width: 35px;
            height: 35px;
            border: 1px solid rgba(190, 137, 56, 0.2);
            border-radius: 12px;
            color: #ae792b;
            font-size: 10px;
            font-weight: 950;
            background: rgba(255, 249, 234, 0.72);
        }

        .start-project-process article div {
            display: grid;
            gap: 5px;
        }

    .start-project-process strong {
        color: #3f332b;
        font-size: 13px;
        font-weight: 900;
    }

    .start-project-process p {
        margin: 0;
        color: #778294;
        font-size: 11.5px;
        font-weight: 620;
        line-height: 1.65;
    }

.start-project-privacy-note {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid rgba(68, 143, 103, 0.16);
    border-radius: 18px;
    background: rgba(225, 244, 232, 0.52);
}

    .start-project-privacy-note > span {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        border-radius: 50%;
        color: #256d49;
        background: rgba(61, 147, 99, 0.14);
        font-weight: 950;
    }

    .start-project-privacy-note p {
        display: grid;
        gap: 5px;
        margin: 0;
    }

    .start-project-privacy-note strong {
        color: #28533c;
        font-size: 12px;
        font-weight: 900;
    }

    .start-project-privacy-note small {
        color: #567266;
        font-size: 10.5px;
        font-weight: 650;
        line-height: 1.6;
    }


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

.start-project-form-shell {
    position: relative;
    overflow: hidden;
    padding: 30px;
}

.start-project-form-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 25px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(121, 86, 47, 0.12);
}

    .start-project-form-heading div {
        display: grid;
        gap: 6px;
    }

    .start-project-form-heading span {
        color: #b17e31;
        font-size: 10px;
        font-weight: 950;
        letter-spacing: 1.4px;
    }

    .start-project-form-heading h2 {
        margin: 0;
        color: #362c25;
        font-size: 27px;
        font-weight: 950;
        letter-spacing: -0.8px;
    }

    .start-project-form-heading > strong {
        color: #8b7f73;
        font-size: 10px;
        font-weight: 800;
    }

.start-project-form {
    position: relative;
}

.start-project-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.start-project-field {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

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

.start-project-field label {
    color: #4a3c32;
    font-size: 11.5px;
    font-weight: 900;
}

.start-project-field input,
.start-project-field select,
.start-project-field textarea {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    padding: 14px 15px;
    border: 1px solid rgba(120, 91, 60, 0.15);
    border-radius: 15px;
    outline: none;
    color: #362f2a;
    background: rgba(255, 255, 255, 0.74);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.start-project-field textarea {
    min-height: 125px;
    resize: vertical;
    line-height: 1.7;
}

.start-project-field
.start-project-description-input {
    min-height: 165px;
}

.start-project-field input:focus,
.start-project-field select:focus,
.start-project-field textarea:focus {
    border-color: rgba(194, 142, 59, 0.55);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 4px rgba(211, 164, 84, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.start-project-field input::placeholder,
.start-project-field textarea::placeholder {
    color: #9a948d;
    opacity: 1;
}

.start-project-field
.validation-message {
    color: #a8443c;
    font-size: 10.5px;
    font-weight: 750;
}


/* =========================================================
   FILE UPLOAD
========================================================= */

.start-project-upload {
    position: relative;
    display: grid;
    grid-template-columns: minmax(190px, 0.65fr) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 88px;
    padding: 15px;
    border: 1px dashed rgba(174, 122, 44, 0.34);
    border-radius: 18px;
    background: rgba(255, 249, 233, 0.52);
}

.start-project-file-input {
    width: 100%;
    font-size: 11px;
}

    .start-project-file-input::file-selector-button {
        min-height: 42px;
        margin-right: 10px;
        padding: 10px 14px;
        border: 1px solid rgba(184, 128, 44, 0.28);
        border-radius: 12px;
        color: #72501e;
        background: linear-gradient( 135deg, #fff1bd, #e5be70 );
        font-weight: 900;
        cursor: pointer;
    }

.start-project-upload__copy {
    display: grid;
    gap: 5px;
}

    .start-project-upload__copy strong {
        color: #504035;
        font-size: 12px;
        font-weight: 900;
    }

    .start-project-upload__copy small {
        color: #8a827b;
        font-size: 10px;
        font-weight: 650;
    }

.start-project-selected-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid rgba(68, 143, 103, 0.17);
    border-radius: 15px;
    background: rgba(225, 244, 232, 0.52);
}

    .start-project-selected-file div {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .start-project-selected-file strong {
        overflow: hidden;
        color: #28533c;
        font-size: 11.5px;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .start-project-selected-file small {
        color: #648071;
        font-size: 10px;
        font-weight: 700;
    }

    .start-project-selected-file button {
        border: 0;
        color: #98534d;
        background: transparent;
        font-size: 10px;
        font-weight: 900;
        cursor: pointer;
    }

.start-project-file-error {
    color: #a8443c;
    font-size: 10.5px;
    font-weight: 750;
}


/* =========================================================
   STATUS
========================================================= */

.start-project-success,
.start-project-error {
    margin-bottom: 22px;
    border-radius: 18px;
}

.start-project-success {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px;
    border: 1px solid rgba(58, 149, 97, 0.2);
    background: rgba(222, 245, 231, 0.68);
}

.start-project-success__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    color: #216641;
    background: rgba(58, 149, 97, 0.15);
    font-weight: 950;
}

.start-project-success div {
    display: grid;
    gap: 6px;
}

.start-project-success strong {
    color: #28533c;
    font-size: 12.5px;
    font-weight: 900;
}

.start-project-success p {
    margin: 0;
    color: #567266;
    font-size: 11px;
    font-weight: 700;
}

.start-project-success b {
    color: #235d3d;
    letter-spacing: 0.6px;
}

.start-project-error {
    padding: 15px 17px;
    border: 1px solid rgba(171, 68, 59, 0.2);
    color: #973f38;
    background: rgba(249, 226, 223, 0.72);
    font-size: 11.5px;
    font-weight: 800;
}


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

.start-project-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(121, 86, 47, 0.12);
}

    .start-project-form-footer p {
        max-width: 480px;
        margin: 0;
        color: #827b74;
        font-size: 10px;
        font-weight: 650;
        line-height: 1.65;
    }

.start-project-submit {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    min-width: 225px;
    min-height: 54px;
    padding: 13px 19px;
    border: 1px solid rgba(255, 241, 184, 0.72);
    border-radius: 16px;
    color: #30240f;
    background: linear-gradient( 135deg, #fff1b8 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% );
    box-shadow: 0 18px 38px rgba(216, 170, 79, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    font-size: 11.5px;
    font-weight: 950;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(.22, 1, .36, 1), box-shadow 0.3s ease;
}

    .start-project-submit:hover:not(:disabled) {
        transform: translateY(-3px) scale(1.01);
        box-shadow: 0 25px 43px rgba(216, 170, 79, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .start-project-submit:disabled {
        cursor: wait;
        opacity: 0.7;
    }

.start-project-submit__spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(43, 33, 15, 0.2);
    border-top-color: #382912;
    border-radius: 50%;
    animation: startProjectSpin 0.75s linear infinite;
}

@keyframes startProjectSpin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   HONEYPOT
========================================================= */

.start-project-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* =========================================================
   RTL
========================================================= */

html[dir="rtl"] .start-project-page,
html[dir="rtl"] .start-project-form {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"]
.start-project-file-input::file-selector-button {
    margin-right: 0;
    margin-left: 10px;
}

html[dir="rtl"]
.start-project-submit > span:last-child {
    transform: rotate(180deg);
}


/* =========================================================
   DARK MODE
========================================================= */

/* =========================================================
   START A PROJECT — UNIFIED DARK THEME
   Matches the main Farhad Portfolio dark design system
========================================================= */


/* =========================================================
   PAGE ROOT
========================================================= */

html[data-theme="dark"]
.start-project-page {
    color: var(--dark-text, #f7efe2) !important;
}


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

html[data-theme="dark"]
.start-project-hero {
    border-color: rgba(216, 170, 79, 0.18) !important;
    background: radial-gradient( circle at 91% 8%, rgba(216, 170, 79, 0.11), transparent 28% ), radial-gradient( circle at 72% 88%, rgba(191, 121, 87, 0.06), transparent 25% ), linear-gradient( 145deg, rgba(21, 23, 28, 0.98), rgba(30, 25, 21, 0.97) ) !important;
    box-shadow: var(--dark-shadow, 0 24px 56px rgba(0, 0, 0, 0.34)), var(--dark-inset, inset 0 1px 0 rgba(255, 255, 255, 0.045)) !important;
}


    html[data-theme="dark"]
    .start-project-hero::before {
        opacity: 0.5 !important;
        background-image: linear-gradient( rgba(245, 216, 139, 0.026) 1px, transparent 1px ), linear-gradient( 90deg, rgba(245, 216, 139, 0.026) 1px, transparent 1px ) !important;
    }


html[data-theme="dark"]
.start-project-hero__glow--one {
    background: radial-gradient( circle, rgba(216, 170, 79, 0.17), transparent 70% ) !important;
    opacity: 0.9;
}


html[data-theme="dark"]
.start-project-hero__glow--two {
    background: radial-gradient( circle, rgba(191, 121, 87, 0.10), transparent 70% ) !important;
    opacity: 0.8;
}


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

html[data-theme="dark"]
.start-project-eyebrow {
    color: var(--dark-gold-light) !important;
    border-color: rgb(216 170 79 / 42%) !important;
    background: linear-gradient(145deg, rgb(203 171 81 / 45%), rgb(216 170 79 / 31%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}


html[data-theme="dark"]
.start-project-eyebrow__dot {
    background: linear-gradient( 135deg, #f1cf82, #b98031 ) !important;
    box-shadow: 0 0 0 5px rgba(216, 170, 79, 0.11), 0 0 18px rgba(216, 170, 79, 0.18) !important;
}


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

html[data-theme="dark"]
.start-project-title {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(100deg, #fff0c2 0%, #f5d88b 20%, #d8aa4f 43%, #b47a2f 65%, #f5d88b 84%, #fff0c2 100%) !important;
    background-size: 260% 100% !important;
    background-position: 0% 50%;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: goldTitleMove 7s ease-in-out infinite !important;
    text-shadow: 0 9px 25px rgba(216, 170, 79, 0.12) !important;
}


    html[data-theme="dark"]
    .start-project-title strong {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        background-image: linear-gradient( 100deg, #fff0c2 0%, #f5d88b 20%, #d8aa4f 43%, #b47a2f 65%, #f5d88b 84%, #fff0c2 100% ) !important;
        background-size: 260% 100% !important;
        background-position: 0% 50%;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        animation: goldTitleMove 7s ease-in-out infinite !important;
        text-shadow: 0 9px 25px rgba(216, 170, 79, 0.12) !important;
    }


html[data-theme="dark"]
.start-project-description {
    color: var(--dark-muted-cool, #aab5c6) !important;
}


/* =========================================================
   MAIN PANELS
========================================================= */

html[data-theme="dark"]
.start-project-form-shell {
    position: relative;
    overflow: visible;
    border-color: var( --dark-line, rgba(222, 181, 104, 0.16) ) !important;
    top: -10px;
    background: radial-gradient( circle at 92% 8%, rgba(216, 170, 79, 0.09), transparent 30% ), radial-gradient( circle at 9% 92%, rgba(191, 121, 87, 0.04), transparent 27% ), linear-gradient( 145deg, var( --dark-surface-1, rgba(22, 24, 29, 0.96) ), var( --dark-surface-2, rgba(28, 25, 21, 0.96) ) ) !important;
    box-shadow: var( --dark-shadow, 0 24px 56px rgba(0, 0, 0, 0.34) ), var( --dark-inset, inset 0 1px 0 rgba(255, 255, 255, 0.045) ) !important;
}

html[data-theme="dark"]
.start-project-info-panel {
    position: relative;
    overflow: visible;
    top: -10px;
    border-color: rgba(216, 170, 79, 0.20) !important;
    background: radial-gradient(circle at 88% 5%, rgba(225, 184, 106, 0.12), transparent 30%), linear-gradient(145deg, #382d24, #2a221c) !important;
    box-shadow: var(--dark-shadow), var(--dark-inset) !important;
}
    /*
 * خط طلایی بسیار ظریف بالای پنل‌ها
 */

    html[data-theme="dark"]
    .start-project-info-panel::before,
    html[data-theme="dark"]
    .start-project-form-shell::before {
        content: "";
        position: absolute;
        top: 0;
        left: 28px;
        right: 28px;
        height: 2px;
        border-radius: 0 0 999px 999px;
        background: linear-gradient( 90deg, transparent, rgba(216, 170, 79, 0.18), rgba(245, 216, 139, 0.62), rgba(216, 170, 79, 0.18), transparent );
        pointer-events: none;
    }





/* =========================================================
   PANEL HEADINGS
========================================================= */

html[data-theme="dark"]
.start-project-info-panel__header,
html[data-theme="dark"]
.start-project-form-heading,
html[data-theme="dark"]
.start-project-form-footer {
    border-color: rgba(216, 170, 79, 0.13) !important;
}


    html[data-theme="dark"]
    .start-project-info-panel__header > span {
        color: #1d160d !important;
        border: 1px solid rgba(255, 240, 194, 0.4);
        background: linear-gradient( 135deg, #f3d88f, #d8aa4f 52%, #aa7528 ) !important;
        box-shadow: 0 13px 26px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
    }


    html[data-theme="dark"]
    .start-project-info-panel__header strong,
    html[data-theme="dark"]
    .start-project-form-heading h2 {
        color: var(--dark-text, #f7efe2) !important;
    }


    html[data-theme="dark"]
    .start-project-info-panel__header small,
    html[data-theme="dark"]
    .start-project-form-heading > strong {
        color: var(--dark-muted-cool, #aab5c6) !important;
    }


    html[data-theme="dark"]
    .start-project-form-heading span {
        color: #d8b46d !important;
    }


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

html[data-theme="dark"]
.start-project-process article {
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}


    html[data-theme="dark"]
    .start-project-process article:hover {
        border-color: rgba(216, 170, 79, 0.14);
        background: linear-gradient( 145deg, rgba(255, 244, 219, 0.065), rgba(216, 170, 79, 0.04) ) !important;
        box-shadow: 0 14px 27px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }


    html[data-theme="dark"]
    .start-project-process article > span {
        color: #e4bf77 !important;
        border-color: rgba(216, 170, 79, 0.20) !important;
        background: rgba(216, 170, 79, 0.08) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }


html[data-theme="dark"]
.start-project-process strong {
    color: var(--dark-text-soft, #d9ccba) !important;
}


html[data-theme="dark"]
.start-project-process p {
    color: var(--dark-muted-cool, #aab5c6) !important;
}


/* =========================================================
   PRIVACY NOTE
========================================================= */

html[data-theme="dark"]
.start-project-privacy-note {
    border-color: rgba(103, 174, 128, 0.19) !important;
    background: linear-gradient( 145deg, rgba(71, 132, 94, 0.11), rgba(52, 98, 72, 0.055) ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


    html[data-theme="dark"]
    .start-project-privacy-note > span {
        color: #a8dbba !important;
        background: rgba(91, 170, 119, 0.14) !important;
        box-shadow: 0 0 0 4px rgba(91, 170, 119, 0.055);
    }


    html[data-theme="dark"]
    .start-project-privacy-note strong {
        color: #c7e5d2 !important;
    }


    html[data-theme="dark"]
    .start-project-privacy-note small {
        color: #9ebaaa !important;
    }


/* =========================================================
   FORM LABELS
========================================================= */

html[data-theme="dark"]
.start-project-field label {
    color: var(--dark-text-soft, #d9ccba) !important;
}


/* =========================================================
   FORM CONTROLS
========================================================= */

html[data-theme="dark"]
.start-project-field input,
html[data-theme="dark"]
.start-project-field select,
html[data-theme="dark"]
.start-project-field textarea {
    color: var(--dark-text, #f7efe2) !important;
    caret-color: var(--dark-gold-light, #c7bea5);
    border-color: rgba(216, 170, 79, 0.16) !important;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.048), rgba(216, 170, 79, 0.035) ) !important;
    box-shadow: var( --dark-inset, inset 0 1px 0 rgba(255, 255, 255, 0.045) ) !important;
}


    html[data-theme="dark"]
    .start-project-field input:hover,
    html[data-theme="dark"]
    .start-project-field select:hover,
    html[data-theme="dark"]
    .start-project-field textarea:hover {
        border-color: rgba(216, 170, 79, 0.26) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.058), rgba(216, 170, 79, 0.045) ) !important;
    }


    html[data-theme="dark"]
    .start-project-field input:focus,
    html[data-theme="dark"]
    .start-project-field select:focus,
    html[data-theme="dark"]
    .start-project-field textarea:focus {
        border-color: rgba(245, 216, 139, 0.50) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.067), rgba(216, 170, 79, 0.052) ) !important;
        box-shadow: 0 0 0 4px rgba(216, 170, 79, 0.085), var( --dark-inset, inset 0 1px 0 rgba(255, 255, 255, 0.045) ) !important;
    }


    html[data-theme="dark"]
    .start-project-field input:disabled,
    html[data-theme="dark"]
    .start-project-field select:disabled,
    html[data-theme="dark"]
    .start-project-field textarea:disabled {
        opacity: 0.58;
        cursor: not-allowed;
    }


    html[data-theme="dark"]
    .start-project-field input::placeholder,
    html[data-theme="dark"]
    .start-project-field textarea::placeholder {
        color: #8f8790 !important;
        opacity: 1;
    }


html[data-theme="dark"]
.start-project-field select {
    color-scheme: dark;
}


html[data-theme="dark"]
.start-project-field option {
    color: var(--dark-text, #f7efe2) !important;
    background: #1c1b1c !important;
}


/* =========================================================
   VALIDATION
========================================================= */

html[data-theme="dark"]
.start-project-field
.validation-message,
html[data-theme="dark"]
.start-project-file-error {
    color: #e98d83 !important;
}


/* =========================================================
   FILE UPLOAD
========================================================= */

html[data-theme="dark"]
.start-project-upload {
    border-color: rgba(216, 170, 79, 0.24) !important;
    background: radial-gradient( circle at 92% 5%, rgba(216, 170, 79, 0.075), transparent 35% ), linear-gradient( 145deg, rgba(255, 244, 219, 0.045), rgba(216, 170, 79, 0.025) ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


    html[data-theme="dark"]
    .start-project-upload:hover {
        border-color: rgba(216, 170, 79, 0.40) !important;
        background: radial-gradient( circle at 92% 5%, rgba(216, 170, 79, 0.11), transparent 35% ), linear-gradient( 145deg, rgba(255, 244, 219, 0.065), rgba(216, 170, 79, 0.038) ) !important;
    }


html[data-theme="dark"]
.start-project-file-input {
    color: var(--dark-muted-cool, #aab5c6) !important;
}


    html[data-theme="dark"]
    .start-project-file-input::file-selector-button {
        color: #211609 !important;
        border-color: rgba(255, 240, 194, 0.38) !important;
        background: linear-gradient( 135deg, #f5d88b, #d8aa4f 52%, #a97428 ) !important;
        box-shadow: 0 11px 23px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
    }


        html[data-theme="dark"]
        .start-project-file-input::file-selector-button:hover {
            filter: saturate(1.08) brightness(1.04);
        }


html[data-theme="dark"]
.start-project-upload__copy strong {
    color: var(--dark-text-soft, #d9ccba) !important;
}


html[data-theme="dark"]
.start-project-upload__copy small {
    color: var(--dark-muted-cool, #aab5c6) !important;
}


/* =========================================================
   SELECTED FILE
========================================================= */

html[data-theme="dark"]
.start-project-selected-file {
    border-color: rgba(100, 172, 126, 0.20) !important;
    background: linear-gradient( 145deg, rgba(68, 132, 91, 0.12), rgba(46, 92, 66, 0.06) ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


    html[data-theme="dark"]
    .start-project-selected-file strong {
        color: #c7e5d2 !important;
    }


    html[data-theme="dark"]
    .start-project-selected-file small {
        color: #94b3a1 !important;
    }


    html[data-theme="dark"]
    .start-project-selected-file button {
        color: #eda59d !important;
    }


        html[data-theme="dark"]
        .start-project-selected-file button:hover {
            color: #ffc0b8 !important;
        }


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

html[data-theme="dark"]
.start-project-success {
    border-color: rgba(101, 176, 129, 0.22) !important;
    background: radial-gradient( circle at 92% 5%, rgba(100, 181, 130, 0.10), transparent 34% ), linear-gradient( 145deg, rgba(61, 121, 83, 0.14), rgba(40, 80, 58, 0.075) ) !important;
    box-shadow: 0 16px 31px rgba(0, 0, 0, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


html[data-theme="dark"]
.start-project-success__icon {
    color: #bce3cb !important;
    background: rgba(93, 171, 120, 0.15) !important;
    box-shadow: 0 0 0 5px rgba(93, 171, 120, 0.055);
}


html[data-theme="dark"]
.start-project-success strong {
    color: #d3ebdc !important;
}


html[data-theme="dark"]
.start-project-success p {
    color: #9ebaaa !important;
}


html[data-theme="dark"]
.start-project-success b {
    color: #c5e7d2 !important;
}


/* =========================================================
   ERROR MESSAGE
========================================================= */

html[data-theme="dark"]
.start-project-error {
    color: #f0aaa2 !important;
    border-color: rgba(215, 105, 94, 0.22) !important;
    background: linear-gradient( 145deg, rgba(142, 62, 55, 0.16), rgba(100, 43, 39, 0.08) ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}


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

html[data-theme="dark"]
.start-project-form-footer p {
    color: var(--dark-muted, #aa9e8e) !important;
}


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

html[data-theme="dark"]
.start-project-submit {
    color: #171109 !important;
    border-color: rgba(255, 241, 184, 0.54) !important;
    background: linear-gradient( 135deg, #fff1b8 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% ) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.31), 0 0 0 1px rgba(216, 170, 79, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}


    html[data-theme="dark"]
    .start-project-submit:hover:not(:disabled) {
        box-shadow: 0 27px 46px rgba(0, 0, 0, 0.38), 0 0 0 5px rgba(216, 170, 79, 0.10), 0 0 30px rgba(216, 170, 79, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
    }


    html[data-theme="dark"]
    .start-project-submit:disabled {
        filter: grayscale(0.18);
        opacity: 0.62;
    }


html[data-theme="dark"]
.start-project-submit__spinner {
    border-color: rgba(31, 22, 10, 0.22) !important;
    border-top-color: #24170a !important;
}


/* =========================================================
   AUTOFILL
========================================================= */

html[data-theme="dark"]
.start-project-field input:-webkit-autofill,
html[data-theme="dark"]
.start-project-field input:-webkit-autofill:hover,
html[data-theme="dark"]
.start-project-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dark-text, #f7efe2) !important;
    caret-color: var(--dark-gold-light, #c7bea5) !important;
    box-shadow: 0 0 0 1000px #1d1b19 inset !important;
    transition: background-color 9999s ease-out 0s;
}


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

html[data-theme="dark"]
.start-project-page
:is( a, button, input, select, textarea ):focus-visible {
    outline: 2px solid rgba(245, 216, 139, 0.78) !important;
    outline-offset: 3px;
}


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

@media (max-width: 1100px) {

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

    .start-project-info-panel {
        position: relative;
        top: auto;
    }

    .start-project-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

        .start-project-process article {
            grid-template-columns: 35px minmax(0, 1fr);
        }
}


@media (max-width: 720px) {

    .start-project-page {
        gap: 16px;
    }

    .start-project-hero {
        min-height: 480px;
        padding: 32px 21px;
        border-radius: 27px;
    }

    .start-project-title {
        font-size: 42px;
        line-height: 1;
        letter-spacing: -2px;
    }

    .start-project-description {
        font-size: 12px;
        line-height: 1.75;
    }

    .start-project-info-panel,
    .start-project-form-shell {
        padding: 21px;
        border-radius: 24px;
    }

    .start-project-process {
        grid-template-columns: 1fr;
    }

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

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

    .start-project-upload {
        grid-template-columns: 1fr;
    }

    .start-project-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .start-project-submit {
        width: 100%;
    }
}



/* =========================================================
   START A PROJECT — BILINGUAL FORM CONTROLS
========================================================= */

/*
 * English is the default language.
 */

.start-project-control--en {
    display: block !important;
}

.start-project-control--fa {
    display: none !important;
}


/*
 * Persian mode
 */

html[data-language="fa"]
.start-project-control--en {
    display: none !important;
}

html[data-language="fa"]
.start-project-control--fa {
    display: block !important;
}


/*
 * Direction
 */

.start-project-control--en {
    direction: ltr !important;
    text-align: left !important;
}

.start-project-control--fa {
    direction: rtl !important;
    text-align: right !important;
}


/*
 * Email and phone values must remain LTR,
 * even in Persian mode.
 */

.start-project-control--ltr {
    direction: ltr !important;
    text-align: left !important;
}



@media (min-width: 721px) and (max-width: 1100px) {
    .start-project-hero {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        top: -20px;
    }
}

@media (max-width: 720px) {
    .start-project-hero {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        top: -20px;
    }
}

@media (max-width: 720px) {

    .start-project-info-panel {

        margin-bottom: 0 !important;
        margin-top: -15px;
    }
}

@media (min-width: 721px) and (max-width: 1100px) {

    .start-project-info-panel {

        margin-bottom: 0 !important;
        margin-top: -20px;
    }
}

@media (min-width: 721px) and (max-width: 1100px) {

    .start-project-form-shell {
        margin-bottom: 0 !important;
        margin-top: -10px;
    }
}

@media (max-width: 720px) {

    .start-project-form-shell {
        margin-bottom: 0 !important;
        margin-top: -10px;
    }
}







/* =========================================================
   START A PROJECT — NATURAL PAGE SCROLL
========================================================= */

html:has(.start-project-page),
body:has(.start-project-page) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
}


    body:has(.start-project-page) .main-area {
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        overflow-y: visible !important;
    }


.start-project-page,
.start-project-layout,
.start-project-form-shell,
.start-project-form {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
}


.start-project-layout {
    align-items: start !important;
}


.start-project-form-shell {
    position: relative !important;
    align-self: start !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}



/* =========================================================
   START A PROJECT — INTERNATIONAL PHONE INPUT
========================================================= */

.start-project-phone-field {
    display: grid;
    gap: 8px;
}


.start-project-phone-control {
    position: relative;
    width: 100%;
    min-width: 0;
    direction: ltr !important;
}


    /*
 * Let the original intl-tel-input CSS control
 * all internal positioning.
 */

    .start-project-phone-control .iti {
        width: 100% !important;
        direction: ltr !important;
        --iti-path-flags-1x: url("/lib/intl-tel-input/img/flags.webp");
        --iti-path-flags-2x: url("/lib/intl-tel-input/img/flags@2x.webp");
        --iti-path-globe-1x: url("/lib/intl-tel-input/img/globe.webp");
        --iti-path-globe-2x: url("/lib/intl-tel-input/img/globe@2x.webp");
    }


    /* Main phone field */

    .start-project-phone-control
    .iti__tel-input {
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        box-sizing: border-box;
        border: 1px solid rgba(120, 91, 60, 0.15);
        border-radius: 15px;
        outline: none;
        color: #362f2a;
        background: rgba(255, 255, 255, 0.74);
        font: inherit;
        font-size: 13px;
        font-weight: 650;
        direction: ltr !important;
        text-align: left !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }


        .start-project-phone-control
        .iti__tel-input:focus {
            border-color: rgba(194, 142, 59, 0.55);
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 0 0 4px rgba(211, 164, 84, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.85);
        }


        .start-project-phone-control
        .iti__tel-input::placeholder {
            color: #9a948d;
            opacity: 1;
        }


    /* Selected country appearance only */

    .start-project-phone-control
    .iti__selected-country {
        border-radius: 15px 0 0 15px;
        background: rgba(184, 128, 44, 0.045);
        padding:20px;
    }


    .start-project-phone-control
    .iti__selected-dial-code {
        color: #6c5949;
        font-size: 12px;
        font-weight: 900;
    }


    /*
 * Do not set position/display on:
 *
 * .iti__country-container
 * .iti__dropdown-content
 * .iti__country-list
 *
 * The original library CSS must control them.
 */


    /* Dropdown visual theme */

    .start-project-phone-control
    .iti__dropdown-content {
        z-index: 99999 !important;
        overflow: hidden;
        border: 1px solid rgba(120, 91, 60, 0.16);
        border-radius: 17px;
        color: #44382f;
        background: #fffaf2;
        box-shadow: 0 24px 60px rgba(63, 44, 26, 0.2);
    }


    .start-project-phone-control
    .iti__search-input {
        color: #44382f;
        background: #fffaf2;
        font-weight: 700;
    }


    .start-project-phone-control
    .iti__country {
        color: #44382f;
        font-size: 12px;
        font-weight: 750;
    }


        .start-project-phone-control
        .iti__country:hover,
        .start-project-phone-control
        .iti__country.iti__highlight {
            background: rgba(216, 170, 79, 0.14);
        }


    .start-project-phone-control
    .iti__dial-code {
        color: #9c773e;
        font-weight: 850;
    }


/* Dark mode */

html[data-theme="dark"]
.start-project-phone-control
.iti__tel-input {
    color: var(--dark-text, #f7efe2);
    caret-color: #f5d88b;
    border-color: rgba(216, 170, 79, 0.16);
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.048), rgba(216, 170, 79, 0.035) );
}


html[data-theme="dark"]
.start-project-phone-control
.iti__selected-country {
    background: rgba(216, 170, 79, 0.045);
}


html[data-theme="dark"]
.start-project-phone-control
.iti__selected-dial-code {
    color: #ddcfba;
}


html[data-theme="dark"]
.start-project-phone-control
.iti__dropdown-content {
    color: #eee3d2;
    border-color: rgba(216, 170, 79, 0.18);
    background: linear-gradient( 145deg, #1a1c21, #211c18 );
}


html[data-theme="dark"]
.start-project-phone-control
.iti__search-input {
    color: #eee3d2;
    background: #1b1b1b;
}


html[data-theme="dark"]
.start-project-phone-control
.iti__country {
    color: #eee3d2;
}


html[data-theme="dark"]
.start-project-phone-control
.iti__dial-code {
    color: #d8aa4f;
}


/* Phone always stays LTR */

html[data-language="fa"]
.start-project-phone-control,
html[data-language="fa"]
.start-project-phone-control .iti,
html[data-language="fa"]
.start-project-phone-control input {
    direction: ltr !important;
    text-align: left !important;
}


/* =========================================================
   CONTACT — INTERNATIONAL PHONE INPUT
========================================================= */

.contact-form__field.contact-phone-field {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
}


    .contact-form__field.contact-phone-field
    .start-project-phone-control {
        width: 100%;
    }


    .contact-form__field.contact-phone-field
    .iti {
        width: 100% !important;
    }


    /*
 * Contact form may have its own general input rules.
 * Keep the international input at the same dimensions.
 */

    .contact-form__field.contact-phone-field
    .iti__tel-input {
        width: 100% !important;
        min-height: 52px !important;
    }


    /*
 * Keep the country dropdown above the contact cards.
 */

    .contact-form__field.contact-phone-field
    .iti__dropdown-content {
        z-index: 99999 !important;
    }