/* =========================================
   Contact Hero
========================================= */

.contactHero {
    width: 100%;
    padding: 90px 20px 80px;
    background-color: #ffffff;
}

.contactHeroContainer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* Heading */

.contactHero h1 {
    margin: 0;

    font-family: "DM Serif Display", serif;
    font-size: clamp(65px, 17vw, 105px);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -2px;

    color: #111111;
}


/* Description */

.contactHero p {
    max-width: 650px;

    margin: 32px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;

    color: #555555;
}


/* =========================================
   Tablet
========================================= */

@media (min-width: 768px) {

    .contactHero {
        padding: 130px 40px 120px;
    }

    .contactHero h1 {
        font-size: clamp(85px, 11vw, 125px);
    }

    .contactHero p {
        font-size: 15px;
    }

}


/* =========================================
   Desktop
========================================= */

@media (min-width: 1024px) {

    .contactHero {
        padding: 160px 0 150px;
    }

    .contactHero h1 {
        font-size: clamp(105px, 9vw, 145px);
    }

}

/* =========================================
   Get In Touch
========================================= */

.getInTouch {
    width: 100%;
    padding: 90px 20px;
    background-color: #f7f7f7;
}

.getInTouchContainer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================
   Heading
========================================= */

.getInTouchHeading {
    width: 100%;
}

.getInTouchHeading h2 {
    margin: 0;

    font-family: "DM Serif Display", serif;
    font-size: clamp(58px, 16vw, 100px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -2px;

    color: #111111;
}


/* =========================================
   Content
========================================= */

.getInTouchContent {
    width: 100%;
    margin-top: 45px;
}

.getInTouchIntro {
    max-width: 600px;

    margin: 0 0 45px;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;

    color: #555555;
}


/* =========================================
   Contact Details
========================================= */

.contactDetails {
    width: 100%;
    margin: 0;
    padding: 0;

    font-style: normal;

    border-top: 1px solid #d8d8d8;
}


/* =========================================
   Contact Item
========================================= */

.contactItem {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 15px;

    width: 100%;
    padding: 25px 0;

    border-bottom: 1px solid #d8d8d8;
}


/* Number */

.contactNumber {
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;

    color: #777777;
}


/* Information */

.contactInfo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* Label */

.contactLabel {
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #777777;
}


/* Contact text */

.contactInfo > span:not(.contactLabel),
.contactInfo > a {
    width: fit-content;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;

    color: #111111;

    text-decoration: none;
}


/* Links */

.contactInfo > a {
    position: relative;
}


/* Link underline */

.contactInfo > a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -3px;

    width: 100%;
    height: 1px;

    background-color: #111111;

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

    transition: transform 0.3s ease;
}


/* Hover */

.contactInfo > a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* =========================================
   Tablet
========================================= */

@media (min-width: 768px) {

    .getInTouch {
        padding: 120px 40px;
    }

    .getInTouchHeading h2 {
        font-size: clamp(80px, 11vw, 125px);
    }

    .getInTouchContent {
        margin-top: 60px;
    }

    .getInTouchIntro {
        font-size: 15px;
        margin-bottom: 55px;
    }

    .contactItem {
        grid-template-columns: 70px 1fr;
        padding: 30px 0;
    }

    .contactInfo > span:not(.contactLabel),
    .contactInfo > a {
        font-size: 16px;
    }

}


/* =========================================
   Desktop
========================================= */

@media (min-width: 1024px) {

    .getInTouch {
        padding: 160px 0;
    }

    .getInTouchContainer {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 100px;
    }

    .getInTouchHeading h2 {
        font-size: clamp(95px, 9vw, 140px);
    }

    .getInTouchContent {
        margin-top: 5px;
    }

    .getInTouchIntro {
        margin-top: 0;
    }

}

/* =========================================
   Send A Message
========================================= */

.sendMessage {
    width: 100%;
    padding: 90px 20px;
    background-color: #ffffff;
}

.sendMessageContainer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================
   Heading
========================================= */

.sendMessageHeading {
    width: 100%;
}

.sendMessageHeading h2 {
    margin: 0;

    font-family: "DM Serif Display", serif;
    font-size: clamp(58px, 16vw, 100px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -2px;

    color: #111111;
}


/* =========================================
   Content
========================================= */

.sendMessageContent {
    width: 100%;
    margin-top: 45px;
}

.sendMessageIntro {
    max-width: 600px;

    margin: 0 0 45px;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;

    color: #555555;
}


/* =========================================
   Contact Form
========================================= */

.contactForm {
    width: 100%;
}


/* =========================================
   Form Group
========================================= */

.formGroup {
    width: 100%;
    margin-bottom: 30px;
}


/* =========================================
   Labels
========================================= */

.formGroup label {
    display: block;

    margin-bottom: 10px;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #555555;
}


/* =========================================
   Inputs
========================================= */

.formGroup input,
.formGroup textarea {
    display: block;

    width: 100%;

    padding: 15px 0;

    border: 0;
    border-bottom: 1px solid #cfcfcf;
    border-radius: 0;
    outline: none;

    background-color: transparent;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;

    color: #111111;

    transition: border-color 0.25s ease;
}


/* =========================================
   Textarea
========================================= */

.formGroup textarea {
    min-height: 150px;

    resize: vertical;
}


/* =========================================
   Placeholder
========================================= */

.formGroup input::placeholder,
.formGroup textarea::placeholder {
    color: #999999;
    opacity: 1;
}


/* =========================================
   Focus
========================================= */

.formGroup input:focus,
.formGroup textarea:focus {
    border-bottom-color: #111111;
}


/* =========================================
   Submit Button
========================================= */

.contactSubmitButton {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    min-width: 190px;

    margin-top: 10px;
    padding: 15px 20px;

    border: 1px solid #111111;

    background-color: #111111;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;

    color: #ffffff;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}


/* =========================================
   Button Arrow
========================================= */

.contactSubmitButton span {
    font-size: 18px;
    line-height: 1;
}


/* =========================================
   Button Hover
========================================= */

.contactSubmitButton:hover {
    background-color: #ffffff;
    color: #111111;
}


/* =========================================
   Keyboard Focus
========================================= */

.contactSubmitButton:focus-visible,
.formGroup input:focus-visible,
.formGroup textarea:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
}


/* =========================================
   Tablet
========================================= */

@media (min-width: 768px) {

    .sendMessage {
        padding: 120px 40px;
    }

    .sendMessageHeading h2 {
        font-size: clamp(80px, 11vw, 125px);
    }

    .sendMessageContent {
        margin-top: 60px;
    }

    .sendMessageIntro {
        font-size: 15px;
        margin-bottom: 55px;
    }

    .formGroup {
        margin-bottom: 35px;
    }

    .formGroup input,
    .formGroup textarea {
        font-size: 16px;
    }

}


/* =========================================
   Desktop
========================================= */

@media (min-width: 1024px) {

    .sendMessage {
        padding: 160px 0;
    }

    .sendMessageContainer {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 100px;
    }

    .sendMessageHeading h2 {
        font-size: clamp(95px, 9vw, 140px);
    }

    .sendMessageContent {
        margin-top: 5px;
    }

}

/* =========================================
   Contact Services
========================================= */

.contactServices {
    width: 100%;
    padding: 90px 20px;
    background-color: #f7f7f7;
}

.contactServicesContainer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================
   Heading
========================================= */

.contactServicesHeading {
    width: 100%;
}

.contactServicesHeading h2 {
    margin: 0;

    font-family: "DM Serif Display", serif;
    font-size: clamp(55px, 15vw, 100px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -2px;

    color: #111111;
}


/* =========================================
   Content
========================================= */

.contactServicesContent {
    width: 100%;
    margin-top: 45px;
}

.contactServicesIntro {
    max-width: 550px;

    margin: 0 0 40px;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.8;

    color: #555555;
}


/* =========================================
   Service Options
========================================= */

.serviceOptions {
    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
}


/* =========================================
   Visually Hidden
========================================= */

.visuallyHidden {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================
   Service Option
========================================= */

.serviceOption {
    display: grid;
    grid-template-columns: 35px 1fr 25px;
    align-items: center;
    gap: 10px;

    position: relative;

    width: 100%;
    min-height: 70px;

    padding: 18px 0;

    border-top: 1px solid #d2d2d2;

    cursor: pointer;
}


/* Last border */

.serviceOption:last-child {
    border-bottom: 1px solid #d2d2d2;
}


/* =========================================
   Checkbox
========================================= */

.serviceOption input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}


/* =========================================
   Number
========================================= */

.serviceOptionNumber {
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;

    color: #777777;
}


/* =========================================
   Service Name
========================================= */

.serviceOptionText {
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 500;

    color: #111111;

    transition: transform 0.25s ease;
}


/* =========================================
   Arrow
========================================= */

.serviceOptionArrow {
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "Manrope", sans-serif;
    font-size: 18px;

    color: #777777;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


/* =========================================
   Hover
========================================= */

.serviceOption:hover .serviceOptionText {
    transform: translateX(5px);
}

.serviceOption:hover .serviceOptionArrow {
    color: #111111;
    transform: translate(3px, -3px);
}


/* =========================================
   Selected
========================================= */

.serviceOption:has(input:checked) {
    border-color: #111111;
}

.serviceOption:has(input:checked) .serviceOptionText {
    font-weight: 700;
    transform: translateX(5px);
}

.serviceOption:has(input:checked) .serviceOptionArrow {
    color: #111111;
    transform: translate(3px, -3px);
}


/* =========================================
   Keyboard Focus
========================================= */

.serviceOption:has(input:focus-visible) {
    outline: 2px solid #111111;
    outline-offset: 4px;
}


/* =========================================
   Tablet
========================================= */

@media (min-width: 768px) {

    .contactServices {
        padding: 120px 40px;
    }

    .contactServicesHeading h2 {
        font-size: clamp(80px, 11vw, 125px);
    }

    .contactServicesContent {
        margin-top: 60px;
    }

    .contactServicesIntro {
        font-size: 15px;
        margin-bottom: 50px;
    }

    .serviceOption {
        grid-template-columns: 55px 1fr 35px;

        min-height: 80px;

        padding: 22px 0;
    }

    .serviceOptionText {
        font-size: 17px;
    }

}


/* =========================================
   Desktop
========================================= */

@media (min-width: 1024px) {

    .contactServices {
        padding: 160px 0;
    }

    .contactServicesContainer {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 100px;
    }

    .contactServicesHeading h2 {
        font-size: clamp(95px, 9vw, 140px);
    }

    .contactServicesContent {
        margin-top: 5px;
    }

}

/* =========================================
   Work Together
========================================= */

.workTogether {
    width: 100%;
    padding: 100px 20px;

    background-color: #111111;
}

.workTogetherContainer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================
   Section Number
========================================= */

.workTogether .sectionNumber {
    color: #aaaaaa;
}


/* =========================================
   Heading
========================================= */

.workTogether h2 {
    margin: 25px 0 0;

    font-family: "DM Serif Display", serif;
    font-size: clamp(55px, 15vw, 100px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -2px;

    color: #ffffff;
}


/* =========================================
   Description
========================================= */

.workTogether p {
    max-width: 620px;

    margin: 35px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;

    color: #b5b5b5;
}


/* =========================================
   Actions
========================================= */

.workTogetherActions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    margin-top: 40px;
}


/* =========================================
   Buttons
========================================= */

.workTogetherPrimary,
.workTogetherSecondary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    min-width: 170px;

    padding: 15px 20px;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


/* =========================================
   Primary
========================================= */

.workTogetherPrimary {
    border: 1px solid #ffffff;

    background-color: #ffffff;

    color: #111111;
}


/* =========================================
   Secondary
========================================= */

.workTogetherSecondary {
    border: 1px solid #555555;

    background-color: transparent;

    color: #ffffff;
}


/* =========================================
   Primary Hover
========================================= */

.workTogetherPrimary:hover {
    background-color: transparent;
    color: #ffffff;
}


/* =========================================
   Secondary Hover
========================================= */

.workTogetherSecondary:hover {
    border-color: #ffffff;
    background-color: #ffffff;
    color: #111111;
}


/* =========================================
   Arrow
========================================= */

.workTogetherActions span {
    font-size: 18px;
    line-height: 1;
}


/* =========================================
   Keyboard Focus
========================================= */

.workTogetherActions a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}


/* =========================================
   Tablet
========================================= */

@media (min-width: 768px) {

    .workTogether {
        padding: 130px 40px;
    }

    .workTogether h2 {
        font-size: clamp(80px, 11vw, 125px);
    }

    .workTogether p {
        font-size: 15px;
    }

    .workTogetherActions {
        flex-direction: row;
        align-items: center;

        margin-top: 50px;
    }

}


/* =========================================
   Desktop
========================================= */

@media (min-width: 1024px) {

    .workTogether {
        padding: 170px 0;
    }

    .workTogether h2 {
        font-size: clamp(100px, 9vw, 145px);
    }

    .workTogetherActions {
        margin-top: 55px;
    }

}