/* =========================================================
   START A PROJECT PAGE
   PAGE-SPECIFIC STYLES
========================================================= */


/* =========================================================
   01. START PROJECT HERO
========================================================= */

.start-project-hero {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        130px
        0
        90px;

    background:

        radial-gradient(
            circle at 15% 25%,
            rgba(
                91,
                183,
                128,
                0.16
            ),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(
                150,
                20,
                20,
                0.08
            ),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #f7faf8,
            #ffffff
        );

}


.start-project-hero-grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.45;

    background-image:

        linear-gradient(
            rgba(
                91,
                183,
                128,
                0.06
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                91,
                183,
                128,
                0.06
            ) 1px,
            transparent 1px
        );

    background-size:
        80px
        80px;

    mask-image:

        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 72%
        );

}


.start-project-hero-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

}


.start-project-hero-content .section-label {

    display: inline-block;

    margin-bottom: 25px;

}


.start-project-hero-content h1 {

    max-width: 900px;

    margin:
        0
        0
        30px;

    color: #111111;

    font-size:
        clamp(
            4rem,
            8vw,
            8rem
        );

    line-height: 0.92;

    letter-spacing: -0.07em;

    font-weight: 700;

}


.start-project-hero-content h1 strong {

    display: block;

    color: #5bb780;

    font-weight: 700;

}


.start-project-hero-content p {

    max-width: 650px;

    margin: 0;

    color: #5f6b7a;

    font-size: 1.05rem;

    line-height: 1.8;

}



/* =========================================================
   02. CONTACT PATHWAYS
========================================================= */

.contact-pathways {

    padding:
        130px
        0;

    background: #ffffff;

}


.contact-pathways .section-heading {

    max-width: 850px;

    margin-bottom: 65px;

}


.contact-pathways-grid {

    display: grid;

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

    gap: 24px;

    align-items: stretch;

    width: 100%;

}



/* =========================================================
   03. PATHWAY CARDS
========================================================= */

.contact-pathway-card {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    min-width: 0;

    min-height: 560px;

    padding: 40px;

    box-sizing: border-box;

    overflow: hidden;

    border:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.06
        );

    border-radius: 24px;

    box-shadow:

        0 18px 50px
        rgba(
            0,
            0,
            0,
            0.055
        );

    transition:

        transform 0.4s ease,

        box-shadow 0.4s ease;

}


.contact-pathway-card:hover {

    transform:
        translateY(
            -7px
        );

    box-shadow:

        0 28px 70px
        rgba(
            0,
            0,
            0,
            0.11
        );

}


/* =========================================================
   04. CARD THEMES
========================================================= */

.consultation-card {

    background:

        linear-gradient(
            145deg,
            #effaf4 0%,
            #ffffff 78%
        );

}


.project-card {

    background:

        linear-gradient(
            145deg,
            #fff5f5 0%,
            #ffffff 78%
        );

}


/* =========================================================
   05. CARD TOP ROW
========================================================= */

.pathway-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 32px;

}


.pathway-number {

    display: inline-flex;

    align-items: center;

    color: #5bb780;

    font-size: 0.75rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;

}


.project-card .pathway-number {

    color: #961414;

}


.pathway-tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 30px;

    padding:
        7px
        14px;

    border-radius: 999px;

    background:
        rgba(
            91,
            183,
            128,
            0.12
        );

    color: #3e9164;

    font-size: 0.65rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.project-card .pathway-tag {

    background:
        rgba(
            150,
            20,
            20,
            0.08
        );

    color: #961414;

}



/* =========================================================
   06. CARD HEADING
========================================================= */

.contact-pathway-card h3 {

    max-width: 620px;

    min-height: 108px;

    margin:
        52px
        0
        20px;

    color: #111111;

    font-size:
        clamp(
            2.3rem,
            3.4vw,
            3.6rem
        );

    line-height: 1;

    letter-spacing: -0.055em;

    font-weight: 700;

}



/* =========================================================
   07. CARD DESCRIPTION
========================================================= */

.contact-pathway-card > p {

    max-width: 560px;

    min-height: 58px;

    margin:
        0
        0
        34px;

    color: #5f6b7a;

    font-size: 0.92rem;

    line-height: 1.7;

}



/* =========================================================
   08. CARD CHECKLIST
========================================================= */

.contact-pathway-card ul {

    display: grid;

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

    column-gap: 25px;

    row-gap: 14px;

    width: 100%;

    margin: 0;

    padding: 0;

    list-style: none;

}


.contact-pathway-card li {

    display: flex;

    align-items: flex-start;

    min-width: 0;

    min-height: 25px;

    color: #5f6b7a;

    font-size: 0.84rem;

    line-height: 1.5;

}


.contact-pathway-card li::before {

    content: "✓";

    flex-shrink: 0;

    margin:
        1px
        9px
        0
        0;

    color: #5bb780;

    font-size: 0.82rem;

    font-weight: 700;

}


.project-card li::before {

    color: #961414;

}



/* =========================================================
   09. CTA
========================================================= */

.pathway-link {

    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 10px;

    margin-top: auto;

    padding-top: 40px;

    color: #111111;

    font-size: 0.9rem;

    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

}


.pathway-link span {

    display: inline-block;

    color: #5bb780;

    font-size: 1.25rem;

    line-height: 1;

    transition:
        transform 0.3s ease;

}


.project-card .pathway-link span {

    color: #961414;

}


.pathway-link:hover span {

    transform:
        translateX(
            6px
        );

}



/* =========================================================
   10. CONSULTATION BOOKING
========================================================= */

.consultation-booking {

    padding:
        140px
        0;

    background:

        radial-gradient(
            circle at 15% 30%,
            rgba(
                91,
                183,
                128,
                0.13
            ),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #f2f9f5,
            #ffffff
        );

}


.booking-grid {

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    gap: 100px;

    align-items: start;

}


.booking-intro {

    position: sticky;

    top: 120px;

}


.booking-intro .section-label {

    display: inline-block;

    margin-bottom: 18px;

}


.booking-intro h2 {

    max-width: 600px;

    margin:
        0
        0
        25px;

    color: #111111;

    font-size:
        clamp(
            3rem,
            5vw,
            5rem
        );

    line-height: 0.98;

    letter-spacing: -0.06em;

}


.booking-intro > p {

    max-width: 520px;

    margin: 0;

    color: #5f6b7a;

    line-height: 1.75;

}


.booking-note {

    display: flex;

    gap: 18px;

    margin-top: 50px;

    padding: 22px;

    border-radius: 18px;

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

    border:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.06
        );

}


.booking-note-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 42px;

    height: 42px;

    border-radius: 12px;

    background: #5bb780;

    color: #ffffff;

    font-size: 1.3rem;

}


.booking-note strong {

    color: #111111;

    font-size: 0.9rem;

}


.booking-note p {

    margin:
        6px
        0
        0;

    color: #6f7882;

    font-size: 0.85rem;

    line-height: 1.6;

}



/* =========================================================
   11. BOOKING FORM
========================================================= */

.booking-form-wrapper {

    padding: 45px;

    border:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.07
        );

    border-radius: 28px;

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

    box-shadow:

        0 30px 80px
        rgba(
            0,
            0,
            0,
            0.06
        );

    backdrop-filter:
        blur(
            20px
        );

}


.consultation-form,

.project-form {

    display: flex;

    flex-direction: column;

    gap: 24px;

}


.form-heading {

    margin-bottom: 8px;

}


.form-heading .section-label {

    display: inline-block;

    margin-bottom: 14px;

}


.form-heading h3 {

    margin:
        0
        0
        10px;

    color: #111111;

    font-size: 1.7rem;

    letter-spacing: -0.035em;

}


.form-heading p {

    margin: 0;

    color: #6f7882;

    font-size: 0.9rem;

    line-height: 1.7;

}



/* =========================================================
   12. FORM SYSTEM
========================================================= */

.form-group {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.form-group label {

    color: #111111;

    font-size: 0.78rem;

    font-weight: 700;

}


.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    box-sizing: border-box;

    padding:
        16px
        18px;

    border:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.12
        );

    border-radius: 12px;

    outline: none;

    background: #ffffff;

    color: #111111;

    font-family: inherit;

    font-size: 0.9rem;

    transition:

        border-color 0.3s ease,

        box-shadow 0.3s ease;

}


.form-group textarea {

    resize: vertical;

    min-height: 130px;

}


.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    border-color: #5bb780;

    box-shadow:

        0 0 0 4px
        rgba(
            91,
            183,
            128,
            0.10
        );

}


.form-row {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 18px;

}



/* =========================================================
   13. FORM BUTTON
========================================================= */

.form-submit {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    width: 100%;

    padding:
        17px
        24px;

    border: none;

    border-radius: 100px;

    background: #111111;

    color: #ffffff;

    font-family: inherit;

    font-size: 0.9rem;

    font-weight: 700;

    cursor: pointer;

    transition:

        transform 0.3s ease,

        background 0.3s ease;

}


.form-submit span {

    color: #5bb780;

    font-size: 1.2rem;

    transition:
        transform 0.3s ease;

}


.form-submit:hover {

    transform:
        translateY(
            -2px
        );

    background: #222222;

}


.form-submit:hover span {

    transform:
        translateX(
            5px
        );

}



/* =========================================================
   14. PROJECT INQUIRY
========================================================= */

.project-inquiry {

    padding:
        140px
        0;

    background:

        linear-gradient(
            135deg,
            #111111,
            #18201b
        );

}


.project-inquiry-inner {

    max-width: 850px;

    margin-bottom: 60px;

}


.project-inquiry-inner .section-label {

    display: inline-block;

    margin-bottom: 20px;

}


.project-inquiry-inner h2 {

    max-width: 850px;

    margin:
        0
        0
        25px;

    color: #ffffff;

    font-size:
        clamp(
            3rem,
            7vw,
            6rem
        );

    line-height: 0.95;

    letter-spacing: -0.065em;

}


.project-inquiry-inner p {

    max-width: 600px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    line-height: 1.75;

}



/* =========================================================
   15. PROJECT FORM
========================================================= */

.project-form-wrapper {

    max-width: 1000px;

    padding: 50px;

    border-radius: 28px;

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

    box-shadow:

        0 30px 80px
        rgba(
            0,
            0,
            0,
            0.18
        );

}


.project-form-wrapper .form-heading h3 {

    font-size: 2rem;

}



/* =========================================================
   16. FINAL CTA
========================================================= */

.contact-cta {

    position: relative;

    padding:
        150px
        0;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(
                91,
                183,
                128,
                0.18
            ),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(
                150,
                20,
                20,
                0.10
            ),
            transparent 35%
        ),

        #111111;

}


.contact-cta-inner {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin:
        0
        auto;

    text-align: center;

}


.contact-cta-inner .section-label {

    display: inline-block;

    margin-bottom: 20px;

}


.contact-cta-inner h2 {

    margin:
        0
        20px;

    color: #ffffff;

    font-size:
        clamp(
            3rem,
            7vw,
            6.5rem
        );

    line-height: 0.95;

    letter-spacing: -0.065em;

}


.contact-cta-inner p {

    max-width: 600px;

    margin:
        0
        auto
        35px;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    line-height: 1.7;

}


.contact-cta-grid {

    position: absolute;

    inset: 0;

    opacity: 0.18;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.08
            ) 1px,
            transparent 1px
        ),

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

    background-size:
        70px
        70px;

    mask-image:

        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

}



/* =========================================================
   17. TABLET
========================================================= */

@media (max-width: 1000px) {


    .start-project-hero {

        min-height: 560px;

        padding:
            130px
            0
            90px;

    }


    .contact-pathway-card {

        min-height: 540px;

        padding: 32px;

    }


    .contact-pathway-card h3 {

        min-height: 100px;

        font-size:
            clamp(
                2.1rem,
                4vw,
                3rem
            );

    }


    .booking-grid {

        gap: 60px;

    }


    .booking-form-wrapper {

        padding: 35px;

    }


    .project-form-wrapper {

        padding: 40px;

    }

}



/* =========================================================
   18. MOBILE
========================================================= */

@media (max-width: 760px) {


    .start-project-hero {

        min-height: auto;

        padding:
            120px
            0
            80px;

    }


    .start-project-hero-content h1 {

        font-size:
            clamp(
                3.5rem,
                15vw,
                5.5rem
            );

    }


    .start-project-hero-content p {

        font-size: 0.95rem;

    }


    .contact-pathways,

    .consultation-booking,

    .project-inquiry,

    .contact-cta {

        padding:
            80px
            0;

    }


    .contact-pathways-grid {

        grid-template-columns:
            1fr;

        gap: 20px;

    }


    .contact-pathway-card {

        min-height: 0;

        padding: 28px;

    }


    .contact-pathway-card h3 {

        min-height: 0;

        margin:
            45px
            0
            18px;

        font-size:
            clamp(
                2.3rem,
                10vw,
                3.5rem
            );

    }


    .contact-pathway-card > p {

        min-height: 0;

        margin-bottom: 28px;

    }


    .contact-pathway-card ul {

        grid-template-columns:
            1fr;

        row-gap: 12px;

    }


    .pathway-link {

        margin-top: 40px;

        padding-top: 0;

    }


    .booking-grid {

        grid-template-columns:
            1fr;

        gap: 50px;

    }


    .booking-intro {

        position: static;

    }


    .booking-form-wrapper {

        padding: 25px;

    }


    .form-row {

        grid-template-columns:
            1fr;

    }


    .project-inquiry-inner {

        margin-bottom: 40px;

    }


    .project-form-wrapper {

        padding: 25px;

        border-radius: 20px;

    }


    .project-form-wrapper .form-heading h3 {

        font-size: 1.6rem;

    }


    .contact-cta-inner h2 {

        font-size:
            clamp(
                3rem,
                13vw,
                5rem
            );

    }

}



/* =========================================================
   19. ACCESSIBILITY
========================================================= */

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


    .contact-pathway-card,

    .pathway-link span,

    .form-submit,

    .form-submit span {

        transition: none;

    }


    .contact-pathway-card:hover,

    .form-submit:hover {

        transform: none;

    }

}


/* =========================================================
   START A PROJECT
   PAGE-SPECIFIC STYLES
   File:
   css/sections/start-a-project.css
========================================================= */


/* =========================================================
   01. PAGE FOUNDATION
========================================================= */

.start-project-page {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f7fbf8 0%,
            #ffffff 52%,
            #fff8f8 100%
        );

}


/* =========================================================
   02. PROJECT HERO
========================================================= */

.start-project-hero {

    position: relative;

    padding:
        150px
        0
        100px;

    overflow: hidden;

}


.start-project-hero::before {

    content: "";

    position: absolute;

    top: -180px;

    right: -150px;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(
                91,
                183,
                128,
                0.16
            ),
            transparent 70%
        );

    pointer-events: none;

}


.start-project-hero::after {

    content: "";

    position: absolute;

    bottom: -200px;

    left: -150px;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(
                150,
                20,
                20,
                0.08
            ),
            transparent 70%
        );

    pointer-events: none;

}


/* =========================================================
   03. HERO CONTAINER
========================================================= */

.start-project-hero .container {

    position: relative;

    z-index: 2;

}


.start-project-intro {

    max-width: 850px;

}


.start-project-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    color: #5bb780;

    font-size: 0.72rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.start-project-label::before {

    content: "";

    width: 28px;

    height: 1px;

    background: #5bb780;

}


.start-project-intro h1 {

    max-width: 850px;

    margin: 0 0 28px;

    color: #111111;

    font-size:
        clamp(
            3.5rem,
            7vw,
            7rem
        );

    line-height: 0.94;

    font-weight: 700;

    letter-spacing: -0.065em;

}


.start-project-intro p {

    max-width: 650px;

    margin: 0;

    color: #5f6b7a;

    font-size: 1.05rem;

    line-height: 1.8;

}


/* =========================================================
   04. PROJECT FORM SECTION
========================================================= */

.start-project-form-section {

    position: relative;

    padding:
        50px
        0
        140px;

}


.start-project-grid {

    display: grid;

    grid-template-columns:
        0.75fr
        1.25fr;

    gap: 90px;

    align-items: start;

}


/* =========================================================
   05. FORM SIDE INTRO
========================================================= */

.start-project-sidebar {

    position: sticky;

    top: 120px;

}


.start-project-sidebar h2 {

    max-width: 500px;

    margin:
        0
        0
        22px;

    color: #111111;

    font-size:
        clamp(
            2.2rem,
            4vw,
            4rem
        );

    line-height: 1;

    letter-spacing: -0.055em;

}


.start-project-sidebar > p {

    max-width: 470px;

    margin: 0;

    color: #68727d;

    font-size: 0.95rem;

    line-height: 1.75;

}


/* =========================================================
   06. PROCESS INDICATOR
========================================================= */

.start-project-process {

    display: flex;

    flex-direction: column;

    gap: 24px;

    margin-top: 50px;

}


.start-project-process-item {

    display: grid;

    grid-template-columns:
        42px
        1fr;

    gap: 16px;

    align-items: start;

}


.start-project-process-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background:
        rgba(
            91,
            183,
            128,
            0.12
        );

    color: #3e9164;

    font-size: 0.72rem;

    font-weight: 700;

}


.start-project-process-item strong {

    display: block;

    margin-bottom: 5px;

    color: #111111;

    font-size: 0.9rem;

}


.start-project-process-item span {

    display: block;

    color: #727b84;

    font-size: 0.82rem;

    line-height: 1.6;

}


/* =========================================================
   07. FORM CARD
========================================================= */

.start-project-form-card {

    position: relative;

    padding: 48px;

    border:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.07
        );

    border-radius: 28px;

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

    box-shadow:

        0
        30px
        90px
        rgba(
            0,
            0,
            0,
            0.07
        );

    backdrop-filter:
        blur(
            20px
        );

}


/* =========================================================
   08. FORM HEADER
========================================================= */

.start-project-form-header {

    margin-bottom: 38px;

}


.start-project-form-header h2 {

    margin:
        0
        0
        10px;

    color: #111111;

    font-size: 1.8rem;

    line-height: 1.15;

    letter-spacing: -0.035em;

}


.start-project-form-header p {

    margin: 0;

    color: #707982;

    font-size: 0.88rem;

    line-height: 1.65;

}


/* =========================================================
   09. FORM LAYOUT
========================================================= */

.start-project-form {

    display: flex;

    flex-direction: column;

    gap: 24px;

}


.start-project-form-row {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 18px;

}


/* =========================================================
   10. FORM GROUP
========================================================= */

.start-project-form-group {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.start-project-form-group label {

    color: #222222;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.01em;

}


.start-project-form-group input,

.start-project-form-group select,

.start-project-form-group textarea {

    width: 100%;

    padding:
        15px
        17px;

    border:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.11
        );

    border-radius: 12px;

    outline: none;

    background: #ffffff;

    color: #111111;

    font-family: inherit;

    font-size: 0.88rem;

    box-sizing: border-box;

    transition:

        border-color
        0.3s
        ease,

        box-shadow
        0.3s
        ease,

        transform
        0.3s
        ease;

}


.start-project-form-group textarea {

    min-height: 150px;

    resize: vertical;

}


.start-project-form-group input::placeholder,

.start-project-form-group textarea::placeholder {

    color: #a0a7ad;

}


/* =========================================================
   11. FORM FOCUS
========================================================= */

.start-project-form-group input:focus,

.start-project-form-group select:focus,

.start-project-form-group textarea:focus {

    border-color: #5bb780;

    box-shadow:

        0
        0
        0
        4px
        rgba(
            91,
            183,
            128,
            0.10
        );

}


/* =========================================================
   12. FORM SUBMIT
========================================================= */

.start-project-submit {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    width: 100%;

    margin-top: 8px;

    padding:
        17px
        25px;

    border: none;

    border-radius: 100px;

    background: #111111;

    color: #ffffff;

    font-family: inherit;

    font-size: 0.88rem;

    font-weight: 700;

    cursor: pointer;

    transition:

        transform
        0.3s
        ease,

        background
        0.3s
        ease,

        box-shadow
        0.3s
        ease;

}


.start-project-submit span {

    color: #5bb780;

    font-size: 1.2rem;

    transition:

        transform
        0.3s
        ease;

}


.start-project-submit:hover {

    transform:
        translateY(
            -3px
        );

    background: #1b1b1b;

    box-shadow:

        0
        15px
        35px
        rgba(
            0,
            0,
            0,
            0.15
        );

}


.start-project-submit:hover span {

    transform:
        translateX(
            5px
        );

}


/* =========================================================
   13. FORM PRIVACY NOTE
========================================================= */

.start-project-form-note {

    margin:
        4px
        0
        0;

    color: #8a9299;

    font-size: 0.72rem;

    line-height: 1.6;

    text-align: center;

}


/* =========================================================
   14. RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .start-project-hero {

        padding:
            130px
            0
            80px;

    }


    .start-project-grid {

        grid-template-columns:
            1fr;

        gap: 60px;

    }


    .start-project-sidebar {

        position: static;

    }


    .start-project-process {

        display: grid;

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

        gap: 20px;

    }


    .start-project-form-card {

        padding: 40px;

    }

}


/* =========================================================
   15. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 760px) {

    .start-project-hero {

        padding:
            110px
            0
            70px;

    }


    .start-project-intro h1 {

        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );

    }


    .start-project-form-section {

        padding:
            30px
            0
            80px;

    }


    .start-project-grid {

        gap: 45px;

    }


    .start-project-process {

        grid-template-columns:
            1fr;

    }


    .start-project-form-card {

        padding: 28px;

        border-radius: 22px;

    }


    .start-project-form-row {

        grid-template-columns:
            1fr;

        gap: 24px;

    }

}


/* =========================================================
   16. REDUCED MOTION
========================================================= */

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

    .start-project-submit,

    .start-project-submit span,

    .start-project-form-group input,

    .start-project-form-group select,

    .start-project-form-group textarea {

        transition: none;

    }

}

/* =========================================================
   CONSULTATION BOOKING AVAILABILITY
========================================================= */

.booking-availability {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: -8px;
    margin-bottom: 24px;

    padding: 12px 16px;

    border: 1px solid rgba(91, 183, 128, 0.18);
    border-radius: 10px;

    background: rgba(91, 183, 128, 0.05);

    color: #5f6663;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.5;
}

.availability-dot {
    position: relative;

    display: inline-block;

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #5bb780;

    box-shadow:
        0 0 0 4px rgba(91, 183, 128, 0.10),
        0 0 12px rgba(91, 183, 128, 0.35);
}


/* =========================================================
   DARK / PREMIUM BOOKING FORM COMPATIBILITY
========================================================= */

.booking-form-wrapper .booking-availability {
    width: fit-content;
    max-width: 100%;
}


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

@media (max-width: 600px) {

    .booking-availability {
        width: 100%;

        margin-top: -4px;

        padding: 11px 14px;

        font-size: 12px;
    }

}


/* =========================================================
   FORM STATUS MESSAGES
========================================================= */

.form-status {
    display: none;

    margin-top: 18px;
    margin-bottom: 18px;

    padding: 14px 16px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.6;
}


/* SUCCESS */

.form-status.success {
    display: block;

    color: #2f7651;

    background: rgba(91, 183, 128, 0.08);

    border: 1px solid rgba(91, 183, 128, 0.25);
}


/* ERROR */

.form-status.error {
    display: block;

    color: #961414;

    background: rgba(150, 20, 20, 0.06);

    border: 1px solid rgba(150, 20, 20, 0.18);
}


/* =========================================================
   FORM BUTTON — SUBMISSION STATE
========================================================= */

.form-submit.is-submitting {
    opacity: 0.7;

    pointer-events: none;

    cursor: wait;
}


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

@media (max-width: 600px) {

    .form-status {

        padding: 12px 14px;

        font-size: 13px;

    }

}

/* =========================================================
   FORM HELPER TEXT
========================================================= */

.form-help {
    display: block;

    margin-top: 8px;

    color: #777;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   DISABLED SELECT STATE
========================================================= */

.form-group select:disabled {
    opacity: 0.6;

    cursor: not-allowed;

    background-color: rgba(0, 0, 0, 0.025);
}


/* =========================================================
   AVAILABLE TIME SELECT
========================================================= */

#consultation-time:not(:disabled) {
    opacity: 1;

    cursor: pointer;
}