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

.contact{

    padding:70px 0 70px;

    width:100%;

}


.contact .container{

    max-width:1400px;

}



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


.contact-grid{

    display:grid;

    grid-template-columns:

    minmax(520px,1.15fr)

    minmax(420px,.85fr);


    gap:80px;

    margin-top:50px;

    align-items:stretch;

}




/* ================================
   PROJECT FORM CARD
================================ */


.contact-form-card{

    background:#ffffff;

    border-radius:32px;

    padding:50px;


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


    box-shadow:

    0 30px 80px rgba(0,0,0,.12);


}






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


.form-heading{

    margin-bottom:35px;

}



.form-heading h3{

    color:#000000;

    font-size:32px;

    font-weight:800;

    margin-bottom:12px;

}



.form-heading p{

    color:#383838;

    line-height:1.7;

}





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


.project-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}




.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}





.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}




.form-group label{

    color:#383838;

    font-size:.9rem;

    font-weight:700;

}





.form-group input,
.form-group select,
.form-group textarea{


    width:100%;


    padding:16px 18px;


    border-radius:14px;


    background:#f7f7f7;


    border:1px solid #dddddd;


    color:#000000;


    font-size:.95rem;


    outline:none;


    transition:.3s ease;


}




.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#777777;

}





.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{


    border-color:#961414;


    background:#ffffff;


}




.form-group textarea{

    resize:none;

}






.form-group select{

    color:#383838;

}





.form-group select option{

    background:#ffffff;

    color:#383838;

}





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


.contact-button{

    margin-top:10px;


    background:#961414;


    color:#ffffff;


    padding:18px 32px;


    border:none;


    border-radius:50px;


    font-weight:700;


    cursor:pointer;


    transition:.35s ease;


}





.contact-button:hover{


    background:#5bb780;


    transform:translateY(-4px);


}







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


.contact-info{


    background:

    linear-gradient(

        145deg,

        #111111,

        #1b1b1b

    );


    padding:50px;


    border-radius:32px;


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


    box-shadow:

    0 30px 80px rgba(0,0,0,.18);


}







.contact-info h3{


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


    color:#ffffff;


    margin-bottom:20px;


    line-height:1.15;


}





.contact-info p{


    color:#b5b5b5;


    line-height:1.8;


    margin-bottom:35px;


}







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


.contact-feature{


    padding:24px;


    margin-bottom:20px;


    border-radius:22px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(255,255,255,.10);


    transition:.35s ease;


}





.contact-feature:hover{


    transform:translateY(-6px);


    border-color:#961414;


}







.contact-feature strong{


    display:block;


    margin-bottom:12px;


    color:#961414;


    font-size:1.15rem;


    font-weight:800;


}






.contact-feature span{


    color:#d0d0d0;


    line-height:1.7;


}







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


@media(max-width:1100px){


.contact-grid{


    grid-template-columns:1fr;


    gap:50px;


}



}







@media(max-width:768px){



.contact{


    padding:90px 0;

}



.contact-form-card,
.contact-info{


    padding:30px;

}



.form-row{


    grid-template-columns:1fr;


}



}

/* ================================
   CONTACT FINAL VISIBILITY FIX
================================ */


.contact-info h3{

    color:#ffffff !important;

}


.contact-info p{

    color:#d0d0d0 !important;

}



.contact-feature strong{

    color:#961414 !important;

}



.contact-feature span{

    color:#ffffff !important;

}



.contact-feature svg{

    width:28px;

    height:28px;

    stroke:#961414;

    margin-bottom:15px;

}



.form-heading h3{

    color:#000000 !important;

}



.form-heading p{

    color:#383838 !important;

}



.form-group label{

    color:#383838 !important;

}



.form-group input,
.form-group textarea,
.form-group select{

    color:#000000 !important;

    background:#ffffff !important;

}



.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#777777 !important;

}

/* ================================
   ABOUT CARD VISIBILITY + ICONS
================================ */


.about-card{

    position:relative;

    padding:32px;

    border-radius:24px;

    background:#ffffff;

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

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

}



.about-card svg{

    width:34px;

    height:34px;

    color:#961414;

    margin-bottom:20px;

}



.about-card strong{

    display:block;

    color:#961414 !important;

    font-size:1.25rem;

    font-weight:800;

    margin-bottom:14px;

}



.about-card p{

    color:#383838 !important;

    line-height:1.8;

    font-size:1rem;

}


/* =========================================================
   =========================================================

   ADMITH LEGACY
   CONTACT PAGE

   FILE:
   css/sections/contact.css

   =========================================================
   ========================================================= */


/* =========================================================
   01. CONTACT PAGE BASE
========================================================= */

.contact-page {

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(
                91,
                183,
                128,
                0.08
            ),

            transparent 30%
        ),

        radial-gradient(
            circle at 90% 70%,
            rgba(
                150,
                20,
                20,
                0.04
            ),

            transparent 35%
        ),

        #ffffff;

}


/* =========================================================
   02. CONTACT HERO
========================================================= */

.contact-hero {

    position: relative;

    isolation: isolate;

    display: flex;

    align-items: center;

    /* Keep the hero's base aligned with the first viewport below navigation. */
    min-height: calc(100svh - 90px);

    padding:
        150px
        0
        110px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(
                91,
                183,
                128,
                0.17
            ),

            transparent 35%
        ),

        radial-gradient(
            circle at 15% 80%,
            rgba(
                150,
                20,
                20,
                0.06
            ),

            transparent 35%
        ),

        linear-gradient(
            135deg,
            #f4faf6,
            #ffffff 60%,
            #faf7f7
        );

}


/* Contact uses a live signal panel rather than the About page's orbital visual. */
.contact-hero::before,
.contact-hero::after {

    position: absolute;

    z-index: 2;

    content: "";

    pointer-events: none;

}


.contact-hero::before {

    top: 50%;

    right: clamp(9%, 14vw, 17%);

    width: clamp(13rem, 20vw, 19rem);

    height: clamp(9rem, 14vw, 13rem);

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

    border-radius: 1.5rem;

    background:
        linear-gradient(90deg, rgba(91, 183, 128, 0.65) 0 32%, transparent 32%) 1.5rem 2.1rem / 55% 0.2rem no-repeat,
        linear-gradient(90deg, rgba(17, 17, 17, 0.25) 0 70%, transparent 70%) 1.5rem 3.55rem / 70% 0.16rem no-repeat,
        linear-gradient(90deg, rgba(17, 17, 17, 0.14) 0 48%, transparent 48%) 1.5rem 4.65rem / 62% 0.16rem no-repeat,
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(235, 248, 239, 0.56));

    box-shadow: 0 1.5rem 4rem rgba(27, 86, 52, 0.12);

    transform: translateY(-50%);

    animation: contact-signal-float 5.5s ease-in-out infinite;

}


.contact-hero::after {

    top: calc(50% - clamp(4rem, 7vw, 6.5rem));

    right: clamp(8%, 12vw, 15%);

    width: 0.85rem;

    height: 0.85rem;

    border: 4px solid rgba(255, 255, 255, 0.86);

    border-radius: 50%;

    background: #5bb780;

    box-shadow: 0 0 0 0 rgba(91, 183, 128, 0.42);

    animation: contact-signal-pulse 2.8s ease-out infinite;

}


@keyframes contact-signal-float {

    0%,
    100% {
        transform: translateY(-50%) rotate(-1.5deg);
    }

    50% {
        transform: translateY(calc(-50% - 0.75rem)) rotate(1.5deg);
    }

}


@keyframes contact-signal-pulse {

    0% {
        box-shadow: 0 0 0 0 rgba(91, 183, 128, 0.42);
    }

    70%,
    100% {
        box-shadow: 0 0 0 1rem rgba(91, 183, 128, 0);
    }

}


.contact-hero-content {

    position: relative;

    z-index: 3;

    max-width: 950px;

}


.contact-label {

    display: inline-block;

    margin-bottom: 24px;

    color: #5bb780;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;

}


.contact-hero h1 {

    max-width: 950px;

    margin: 0;

    color: #111111;

    font-family:
        "Manrope",
        sans-serif;

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

    line-height: 0.9;

    letter-spacing: -0.065em;

}


.contact-hero h1 span {

    display: block;

    color: #5bb780;

}


.contact-hero p {

    max-width: 650px;

    margin:
        36px
        0
        0;

    color: #5f6b7a;

    font-size: 1.1rem;

    line-height: 1.75;

}


/* =========================================================
   03. CONTACT HERO META
========================================================= */

.contact-hero-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 55px;

    margin-top: 55px;

}


.contact-hero-meta div {

    display: flex;

    flex-direction: column;

    gap: 6px;

}


.contact-hero-meta span {

    color: #8a939d;

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}


.contact-hero-meta strong {

    color: #111111;

    font-size: 0.95rem;

}


/* =========================================================
   04. CONTACT HERO GRID
========================================================= */

.contact-hero-grid {

    position: absolute;

    top: 0;

    right: 0;

    width: 52%;

    height: 100%;

    opacity: 0.28;

    background-image:

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

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

    background-size:
        60px
        60px;

    mask-image:

        linear-gradient(
            to right,
            transparent,
            black
        );

}


/* =========================================================
   05. HERO ORBS
========================================================= */

.contact-hero-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.contact-orb-one {

    top: 18%;

    right: 15%;

    width: 180px;

    height: 180px;

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

    background:

        radial-gradient(
            circle,
            rgba(
                91,
                183,
                128,
                0.18
            ),

            transparent 70%
        );

}


.contact-orb-two {

    right: 7%;

    bottom: 12%;

    width: 80px;

    height: 80px;

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

}


/* =========================================================
   06. CONTACT PATHWAYS
========================================================= */

.contact-pathways {

    padding:
        130px
        0;

    background:

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

}


.contact-section-heading {

    max-width: 800px;

    margin-bottom: 65px;

}


.contact-section-heading h2 {

    margin:
        18px
        0;

    color: #111111;

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

    line-height: 0.98;

    letter-spacing: -0.06em;

}


.contact-section-heading p {

    max-width: 600px;

    color: #5f6b7a;

    line-height: 1.75;

}


/* =========================================================
   =========================================================

   CONTACT PATHWAYS
   CONSULTATION VS PROJECT CARD SYSTEM

   ONLY THIS SECTION CONTROLS THE TWO PATHWAY CARDS

   =========================================================
   ========================================================= */


/* =========================================================
   01. PATHWAY GRID
========================================================= */

.contact-pathways-grid {

    display: grid;

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

    gap: 24px;

    align-items: stretch;

    width: 100%;

}


/* =========================================================
   02. PATHWAY CARD
   BOTH CARDS HAVE EXACTLY THE SAME DIMENSIONS
========================================================= */

.contact-pathway-card {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    height: 580px;

    min-height: 580px;

    max-height: 580px;

    padding: 32px;

    overflow: hidden;

    box-sizing: border-box;

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

    border-radius: 24px;

    box-shadow:

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

    transition:

        transform 0.4s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),

        box-shadow 0.4s
        ease;

}


/* =========================================================
   03. UNIVERSAL CARD HOVER
   BOTH CONSULTATION AND PROJECT MUST RESPOND
========================================================= */

.contact-pathway-card:hover {

    transform:
        translateY(
            -8px
        );

    box-shadow:

        0 30px 70px
        rgba(
            0,
            0,
            0,
            0.12
        );

}


/* =========================================================
   04. CONSULTATION CARD BACKGROUND
========================================================= */

.contact-pathway-card.consultation-card {

    background:

        linear-gradient(
            145deg,
            #f0faf4 0%,
            #ffffff 75%
        );

}


/* =========================================================
   05. PROJECT CARD BACKGROUND
========================================================= */

.contact-pathway-card.project-card {

    background:

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

}


/* Keep the project pathway grounded, then give it a restrained hover lift. */
.contact-pathway-card.project-card {

    transform: translateY(0);

    transition:
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 320ms ease;

}


@media (hover: hover) and (pointer: fine) {

    .contact-pathway-card.project-card:hover {

        transform: translateY(-5px);

    }

}


/* =========================================================
   06. CARD TOP ROW
   SAME HEIGHT AND SAME ALIGNMENT
========================================================= */

.contact-pathway-card
.pathway-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-shrink: 0;

    width: 100%;

    height: 32px;

}


/* =========================================================
   07. NUMBER
========================================================= */

.contact-pathway-card
.pathway-number {

    display: inline-flex;

    align-items: center;

    height: 30px;

    color: #5bb780;

    font-size: 0.75rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;

}


/* =========================================================
   08. BADGE
========================================================= */

.contact-pathway-card
.pathway-tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 30px;

    padding:
        0
        13px;

    box-sizing: border-box;

    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;

}


/* =========================================================
   09. PROJECT BADGE
========================================================= */

.contact-pathway-card.project-card
.pathway-tag {

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

    color: #961414;

}


/* =========================================================
   10. CARD HEADING
   SAME HEIGHT FOR BOTH CARDS
========================================================= */

.contact-pathway-card h3 {

    display: block;

    width: 100%;

    max-width: 520px;

    height: 82px;

    min-height: 82px;

    max-height: 82px;

    margin:
        48px
        0
        18px;

    overflow: hidden;

    box-sizing: border-box;

    color: #111111;

    font-size:
        clamp(
            2rem,
            3.2vw,
            3.25rem
        );

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -0.045em;

}


/* =========================================================
   11. CARD DESCRIPTION
   SAME HEIGHT FOR BOTH CARDS
========================================================= */

.contact-pathway-card > p {

    display: block;

    width: 100%;

    max-width: 500px;

    height: 54px;

    min-height: 54px;

    max-height: 54px;

    margin:
        0
        0
        30px;

    overflow: hidden;

    box-sizing: border-box;

    color: #5f6b7a;

    font-size: 0.92rem;

    line-height: 1.7;

}


/* =========================================================
   12. CHECKLIST
========================================================= */

.contact-pathway-card ul {

    display: grid;

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

    column-gap: 24px;

    row-gap: 12px;

    width: 100%;

    height: 60px;

    min-height: 60px;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    list-style: none;

}


/* =========================================================
   13. CHECKLIST ITEM
========================================================= */

.contact-pathway-card li {

    display: flex;

    align-items: center;

    height: 24px;

    min-height: 24px;

    color: #5f6b7a;

    font-size: 0.85rem;

    line-height: 1.4;

}


/* =========================================================
   14. CHECKMARK
========================================================= */

.contact-pathway-card li::before {

    content: "✓";

    display: inline-block;

    flex-shrink: 0;

    width: 16px;

    margin-right: 9px;

    color: #5bb780;

    font-size: 0.85rem;

    font-weight: 700;

}


/* =========================================================
   15. PROJECT CHECKMARK
========================================================= */

.contact-pathway-card.project-card
li::before {

    color: #961414;

}


/* =========================================================
   16. CTA
   ONLY THE CTA USES AUTO MARGIN
   THIS PINS BOTH CTAs TO THE SAME BOTTOM POSITION
========================================================= */

.contact-pathway-card
.pathway-link {

    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    flex-shrink: 0;

    width: max-content;

    max-width: 100%;

    gap: 10px;

    margin-top: auto;

    padding:
        0;

    color: #111111;

    font-family: inherit;

    font-size: 0.9rem;

    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

    white-space: nowrap;

}


/* =========================================================
   17. CTA ARROW
========================================================= */

.contact-pathway-card
.pathway-link span {

    display: inline-block;

    width: auto;

    height: auto;

    margin: 0;

    padding: 0;

    color: #5bb780;

    font-size: 1.2rem;

    line-height: 1;

    transition:
        transform 0.3s
        ease;

}


/* =========================================================
   18. PROJECT CTA ARROW
========================================================= */

.contact-pathway-card.project-card
.pathway-link span {

    color: #961414;

}


/* =========================================================
   19. CTA ARROW HOVER
========================================================= */

.contact-pathway-card
.pathway-link:hover
span {

    transform:
        translateX(
            6px
        );

}


/* =========================================================
   20. TABLET
========================================================= */

@media (max-width: 1000px) {

    .contact-pathway-card {

        height: 540px;

        min-height: 540px;

        max-height: 540px;

        padding: 28px;

    }


    .contact-pathway-card h3 {

        height: 76px;

        min-height: 76px;

        max-height: 76px;

        margin-top: 42px;

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

    }


    .contact-pathway-card > p {

        height: 58px;

        min-height: 58px;

        max-height: 58px;

    }


    .contact-pathway-card ul {

        column-gap: 18px;

    }

}


/* =========================================================
   21. MOBILE
   MOBILE RETURNS TO NATURAL HEIGHT
========================================================= */

@media (max-width: 760px) {

    .contact-pathways-grid {

        grid-template-columns:
            1fr;

        gap: 20px;

    }


    .contact-pathway-card {

        height: auto;

        min-height: 0;

        max-height: none;

        padding: 28px;

    }


    .contact-pathway-card h3 {

        height: auto;

        min-height: 0;

        max-height: none;

        margin:
            45px
            0
            18px;

    }


    .contact-pathway-card > p {

        height: auto;

        min-height: 0;

        max-height: none;

        margin-bottom: 28px;

    }


    .contact-pathway-card ul {

        grid-template-columns:
            1fr;

        height: auto;

        min-height: 0;

        row-gap: 12px;

    }


    .contact-pathway-card li {

        height: auto;

        min-height: 24px;

    }


    .contact-pathway-card
    .pathway-link {

        margin-top: 40px;

    }

}




/* =========================================================
   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: 110px;

    align-items: start;

}


.booking-intro {

    position: sticky;

    top: 120px;

}


.booking-intro h2 {

    max-width: 600px;

    margin:
        18px
        0
        24px;

    color: #111111;

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

    line-height: 0.98;

    letter-spacing: -0.06em;

}


.booking-intro > p {

    max-width: 520px;

    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-icon svg {

    display: block;

    width: 1.2rem;

    height: 1.2rem;

}


.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-radius: 28px;

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

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

    box-shadow:

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

    backdrop-filter:
        blur(
            20px
        );

}


.consultation-form {

    display: flex;

    flex-direction: column;

    gap: 24px;

}


.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%;

    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;

}


.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;

}


.form-submit:hover {

    transform:
        translateY(
            -2px
        );

    background: #222222;

}


/* =========================================================
   12. PROJECT INQUIRY
========================================================= */

.project-inquiry {

    padding:
        140px
        0;

    background:

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

}


.project-inquiry-inner {

    max-width: 850px;

}


.project-inquiry-inner h2 {

    margin:
        18px
        0
        24px;

    color: #ffffff;

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

    line-height: 0.95;

    letter-spacing: -0.065em;

}


.project-inquiry-inner p {

    max-width: 600px;

    margin-bottom: 35px;

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

    line-height: 1.75;

}


/* =========================================================
   13. PARTNERSHIP & COLLABORATION
========================================================= */

.collaboration-hub {
    padding: clamp(5rem, 10vw, 9rem) 0;
    color: #ffffff;
    background: radial-gradient(circle at 85% 15%, rgba(91,183,128,.22), transparent 32%), #0d2015;
}

.collaboration-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: end;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.collaboration-intro h2 {
    max-width: 720px;
    margin: 1rem 0 0;
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    line-height: .96;
    letter-spacing: -.06em;
}

.collaboration-intro p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.75;
}

.collaboration-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    background: rgba(255,255,255,.14);
}

.collaboration-card {
    min-height: 290px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: rgba(8,28,17,.92);
}

.collaboration-card > span {
    display: block;
    margin-bottom: 4.5rem;
    color: #75ca95;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.collaboration-card h3 { margin: 0 0 1rem; font-size: 1.35rem; }
.collaboration-card p { margin: 0; color: rgba(255,255,255,.66); line-height: 1.7; }

.collaboration-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 20px;
    background: #ffffff;
    color: #122018;
}

.collaboration-process div { display: grid; gap: .55rem; }
.collaboration-process strong { color: #397c45; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.collaboration-process span { color: #59665e; line-height: 1.55; }

.collaboration-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2.25rem; }
.collaboration-secondary { color: #ffffff; font-weight: 700; text-decoration: none; }
.collaboration-secondary:hover { color: #75ca95; }

@media (max-width: 900px) {
    .collaboration-intro, .collaboration-grid, .collaboration-process { grid-template-columns: 1fr; }
    .collaboration-card { min-height: 0; }
    .collaboration-card > span { margin-bottom: 2.5rem; }
}

@media (max-width: 600px) {
    .collaboration-actions .btn { width: 100%; justify-content: center; text-align: center; }
}


/* =========================================================
   14. OTHER CONTACT
========================================================= */

.other-contact {

    padding:
        130px
        0;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(
                91,
                183,
                128,
                0.10
            ),

            transparent 35%
        ),

        #ffffff;

}


.other-contact-heading {

    max-width: 700px;

    margin-bottom: 65px;

}


.other-contact-heading h2 {

    margin:
        18px
        0;

    color: #111111;

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

    line-height: 0.98;

    letter-spacing: -0.06em;

}


.other-contact-grid {

    display: grid;

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

    gap: 18px;

}


.other-contact-card {

    min-height: 340px;

    padding: 32px;

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

    border-radius: 24px;

    background:

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

}


.other-contact-number {

    display: block;

    margin-bottom: 75px;

    color: #5bb780;

    font-size: 0.75rem;

    font-weight: 700;

}


.other-contact-card h3 {

    margin:
        0
        12px;

    color: #111111;

    font-size: 1.4rem;

}


.other-contact-card p {

    min-height: 80px;

    color: #5f6b7a;

    line-height: 1.65;

}


.other-contact-card a {

    color: #111111;

    font-size: 0.88rem;

    font-weight: 700;

    text-decoration: none;

}


.other-contact-card a:hover {

    color: #5bb780;

}


/* =========================================================
   14. CONTACT 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 h2 {

    margin:
        18px
        0
        20px;

    color: #ffffff;

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

    line-height: 0.95;

    letter-spacing: -0.065em;

}


.contact-cta-inner p {

    margin:
        0
        0
        35px;

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

}


.contact-cta-grid {

    position: absolute;

    inset: 0;

    opacity: 0.18;

    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%
        );

}


/* =========================================================
   15. RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {


    .booking-grid {

        gap: 60px;

    }


    .contact-pathway-card {

        padding: 40px;

    }


    .other-contact-grid {

        grid-template-columns:
            1fr
            1fr;

    }

}


/* =========================================================
   16. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 760px) {


    .contact-hero {

        min-height: auto;

        padding:
            120px
            0
            80px;

    }


    .contact-hero h1 {

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

    }


    .contact-hero-grid {

        width: 100%;

        opacity: 0.15;

    }


    .contact-hero::before {

        right: -3.5rem;

        width: 12rem;

        opacity: 0.6;

    }


    .contact-hero::after {

        right: 1.5rem;

        opacity: 0.7;

    }


    .contact-hero-meta {

        flex-direction: column;

        gap: 22px;

        margin-top: 40px;

    }


    .contact-pathways,

    .consultation-booking,

    .project-inquiry,

    .other-contact,

    .contact-cta {

        padding:
            80px
            0;

    }


    .contact-pathways-grid,

    .booking-grid {

        grid-template-columns:
            1fr;

        gap: 50px;

    }


    .booking-intro {

        position: static;

    }


    .contact-pathway-card {

        min-height: auto;

        padding: 32px;

    }


    .contact-pathway-card h3 {

        margin-top: 55px;

    }


    .contact-pathway-card ul {

        grid-template-columns:
            1fr;

    }


    .booking-form-wrapper {

        padding: 25px;

    }


    .form-row {

        grid-template-columns:
            1fr;

    }


    .other-contact-grid {

        grid-template-columns:
            1fr;

    }


}


/* =========================================================
   17. ACCESSIBILITY
========================================================= */

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


    .contact-hero::before,

    .contact-hero::after {

        animation: none;

    }


    .contact-pathway-card,

    .form-submit {

        transition: none;

    }


    .contact-pathway-card:hover,

    .form-submit:hover {

        transform: none;

    }

}


/* Keep both contact pathways on one shared visual baseline on desktop. */
@media (min-width: 1001px) {

    .contact-pathways-grid {

        grid-auto-rows: 1fr;

        align-items: stretch;

    }


    .contact-pathway-card {

        align-self: stretch;

        height: clamp(29rem, 30vw, 32rem);

        min-height: clamp(29rem, 30vw, 32rem);

        max-height: clamp(29rem, 30vw, 32rem);

        margin: 0;

        padding: clamp(1.9rem, 3vw, 2.5rem);

    }


    .contact-pathway-card h3 {

        height: auto;

        min-height: 0;

        max-height: none;

        margin: clamp(2.25rem, 3.25vw, 3rem) 0 1rem;

        overflow: visible;

        font-size: clamp(1.8rem, 2.35vw, 2.55rem);

        line-height: 1.08;

    }


    .contact-pathway-card > p {

        height: auto;

        min-height: 0;

        max-height: none;

        margin-bottom: 1.5rem;

        overflow: visible;

    }


    .contact-pathway-card ul {

        height: auto;

        min-height: 3.75rem;

    }


    .contact-pathway-card .pathway-link {

        position: relative;

        z-index: 1;

        padding: 0.25rem 0;

        text-decoration: none;

    }

}


/* =========================================================
   =========================================================

   END CONTACT PAGE CSS

   =========================================================
   ========================================================= */
.contact-trust-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0 0 2rem;padding:1.25rem;border:1px solid rgba(24,91,61,.14);border-radius:1.2rem;background:#f4f8f5}.contact-trust-strip div{display:grid;gap:.3rem}.contact-trust-strip span{color:#68766d;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.contact-trust-strip strong,.contact-trust-strip a{color:#153f30;font-size:1rem;font-weight:800}.contact-trust-strip a:hover{text-decoration:underline}@media(max-width:720px){.contact-trust-strip{grid-template-columns:1fr}}