@media only screen and (min-width: 480px) and (max-width: 900px) {
    .headline-wrapper#about .headline {
        height: max-content;
        padding: 12px 0px;
    }

    /* .headline-wrapper#about .headline * {
        font-size: 100px;
    } */

    .section#about .header {
        flex-direction: row !important;
        gap: 80px;
    }

    .section#about #introduction .title {
        font-size: 48px;
    }

    .title#philosophy {
        padding: 0px 0px;
    }

    .column-2#mission {
        gap: 80px;
    }

    #process-container {
        padding: 64px 0px;
    }

    .section#faqs {
        padding: 64px 0px;
    }

    .section#contact a #line {
        margin-top: -0%;
    }

    .section#footer .headline {
        font-size: 16vw;
    }

    .section#achievements .header,
    .section#achievements .column-2 {
        gap: 16vw;
    }

    .section#footer #container .info {
        gap: 16vw;
    }


    .header#column {
        width: 100% !important;
    }

    .column-2#mission {
        flex-direction: column;
    }

    #content #heading-alt {
        margin-left: 0px;
    }

    .phase .heading {
        font-size: 36px;
    }

    .phase .description {
        font-size: 16px;
    }

    #process-container {
        gap: 32px;
    }

    .award {
        width: 100%;
        gap: 32px;
    }


    .section#mywork .project-container {
          height: max-content;
    }

    a.project {
        width: 100% !important;
        position: static !important;
    }

    .section#mywork .project-container a.project .image {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        aspect-ratio: 16 / 9;
    }


    .hero#services .headline {
        height: 20vw;
    }



    .section#services .title {
        font-size: 6vw;
    }

    .subservice-container {
        flex-direction: column;
    }

    .subservice-container * {
        border: none;
    }

    .quality-container *::before,
    .subservice-container :before,
    .quality-container *::after {
        content: " • ";
        color: var(--darkgray)
    }

    .service {
        padding: 0px 8vw;
    }

    .hero#contact .description {
        padding: 0px;
    }

    .hero#contact .headline * {
        font-size: 14vw;
        text-wrap: nowrap;
    }

    .section#form .column-2 {
        flex-direction: column;
        gap: 40px;
    }

    .section#form .subtitle {
        width: 100%;
    }

}

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

@media only screen and (max-width: 480px) {
    .menu {
        height: 72px;
        padding: 20px 20px;
    }

    .section {
        padding: 20px 20px 100px 20px;
    }

    .hero {
        padding: 100px 20px;
    }

    .headline {
        height: auto;
    }

    .headline * {
        font-size: 20vw;
    }

    .tagline-wrapper {
        flex-direction: column;
        gap: 120px;
    }

    .tagline {

        font-size: 20px;
    }



    .section .header {
        flex-direction: column;
        gap: 16px;
    }

    .section .header .title {
        font-size: 40px;
    }

    .project .image-container {
        height: 320px;
    }



    .service-card,
    .award {
        gap: 48px;
        height: 140px;
    }

    .service-card .name,
    .award .name {
        height: 32px;
    }

    .service-card .name *,
    .award .name * {
        font-size: 24px;
    }

    .service-card :first-child,
    .award :first-child {
        font-size: 24px;
    }


    .section#achievements .column-2 {
        width: 100%;
        flex-direction: column;
        gap: 48px;
    }

    .section#achievements #intro {
        width: 100%;
        position: sticky;
    }

    .section#achievements .achievement {
        padding: 16px 0px 80px 0px;
    }

    .section#achievements .achievement * {
        font-size: 20px;
    }

    .section#achievements .achievement :first-child {
        font-size: 150px;
    }



    .section#contact {
        height: 100vh;
    }

    .section#contact a {
        font-size: 64px;
    }

    .section#contact a #line {
        margin-top: -8px;
        height: 6px;
    }

    .section#contact a:hover #line {
        height: 6px;
    }




    .section#footer {
        flex-direction: column;
        padding: 80px 20px 20px 20px;
    }

    .section#footer #container .info {
        flex-direction: column;
        gap: 16px;
    }

    .section#footer .links {
        padding-top: 48px;
    }

    .section#footer .headline {
        font-size: 16vw;
    }

    .section#footer .credit {
        font-size: 14px;
    }


    /* ABOUT */
    .headline-wrapper#about .headline * {
        height: 16vw;
    }

    .info-wrapper {
        gap: 24px;
    }

    #introduction {
        margin-top: 40px;
    }

    .title#philosophy {
        font-size: 40px;
        padding: 0px 20px;
    }

    .quality-container {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .subservice-container {
        flex-direction: column;
        gap: 0px;
    }

    .subservice-container * {
        border: none;
    }

    .quality-container *,
    .subservice-container * {

        font-size: 20px;
    }

    .quality-container *::before,
    .subservice-container :before,
    .quality-container *::after {
        content: " • ";
        color: var(--darkgray)
    }

    .quality-container *:nth-child(even) {
        display: none;
    }

    .section#gallery {
        flex-direction: column;
    }

    .section#gallery img {
        object-fit: cover;
        width: 100%;
        height: 200px;
    }

    .column-2#mission {
        flex-direction: column;
        gap: 32px;
    }

    #content #heading {
        font-size: 20px;
    }

    #content * {
        font-size: 16px;
        line-height: 27px;
    }

    #content #heading-alt {
        width: 100%;
        font-size: 32px;
        margin: 80px 0px 0px 0px;
        line-height: 125%;
    }

    #process-container {
        padding: 0px;
        flex-direction: column;
    }

    #process-container #left {
        width: 100%;
        margin-top: 40px;
    }

    #process-container #right {
        margin-top: -200%;
        width: 100%;
    }

    .phase {
        height: auto;
    }

    .phase .subtitle {
        font-size: 14px;
    }

    .phase .heading {
        font-size: 32px;
    }

    .phase .description {
        font-size: 16px;
    }

    .section .header#column#awards {
        text-align: center;
        background-color: red;
    }

    .section .header#column#awards .title {
        text-align: center;
    }

    .award {
        width: 100%;
    }

    .section#faqs .container {
        width: 100%;
    }





    .hero#mywork .headline {
        height: 36vw;
    }

    .hero#mywork .headline * {
        font-size: 18vw;
        text-wrap: wrap;
    }

    .hero#mywork .headline:nth-child(2) {
        margin-top: -16px;
    }


    a.project {
        width: 100% !important;
        position: static !important;
    }

    .section#mywork .project-container a.project .info {
        flex-direction: column;
        gap: 8px;
    }

    .section#mywork .project-container a.project .image-container {
        height: 100%;
    }

    .section#mywork .project-container a.project .image {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;

        width: 100%;
        aspect-ratio: 16/9;
    }

    .section#mywork .project-container {
        height: max-content;
    }

    .project-container {
        gap: 64px;
    }




    .hero#contact,
    .hero#services {
        justify-content: start;
        box-sizing: border-box;
        padding: 100px 20px 20px 20px;
    }

    .hero#services .headline * {
        font-size: 64px;
    }




    .service {
        width: 100%;
    }

    .service .name {
        font-size: 32px;
    }

    .service .symbol {
        width: 12px;
        height: 12px;
        font-size: 32px;
    }


    .hero#contact {
        justify-content: end;
        padding: 100px 20px 100px 20px;
        gap: 48px;
    }

    .hero#contact .description {
        padding: 0px;
    }

    .section#form .column-2 {
        flex-direction: column;
        gap: 32px;
    }

    .section#form .column-2 .subtitle {
        width: 100%;
    }

    .contact-info {
        flex-direction: column;
        gap: 32px;
        padding-bottom: 200px;
    }



    .hero#project {
        padding: 280px 20px 60px 20px;
        justify-content: start;

        height: max-content;
    }

    .hero#project .headline-wrapper {
        height: max-content !important;
        align-items: start !important;

        gap: 32px;
    }

    .hero#project .headline-wrapper .headline * {
        text-align: left;
        font-size: 64px;
    }

    .hero#project .description {
        width: 100%;
        font-size: 14px;
    }

    .section#project-info-container {
        flex-direction: column;
        padding: 20px;
    }

    .project-info {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .project-info :first-child::after {
        content: ":";
    }

    .project-info :nth-child(2) {
        width: 70%;
        font-size: 24px;
        text-align: left;
    }

    .section#project-description {
        padding: 100px 20px;
    }

    .section#project-description .subservice-container {
        margin-top: -64px;
    }

    #project-image img {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .section#project-description #results {
        margin: 0px;
    }

    .project-gallery {
        flex-direction: column;
    }
}

@media only screen and (max-width: 400px) {
    .section#footer .headline {
        font-size: 64px;
    }
}