header.main-header {
    background-color: var(--primary-color);
}

.nav-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    @media (width >= 80rem) { 
        padding-top: 35px;
        padding-bottom: 35px;
    }
    @media (width >= 96rem) {
        padding-top: 49px;
        padding-bottom: 49px;
    }
}

.nav-logo-wrapper a {
    display: block;
    height: 100%;
}

.nav-wrapper nav {
    display: none;
}

@media (width >= 64rem) {
    .nav-wrapper nav {
        display: flex;
        align-items: center;
    }
}

.nav-wrapper nav ul {
    padding: 0;
    margin: 0;
    display: flex;
    gap: calc(22 / 16 * 1rem);
    flex-direction: row;
    list-style: none;
}

.nav-wrapper nav ul li a {
    font-size: calc(22 / 16 * 1rem);
    color: var(--secondary-color);
    text-decoration: none;
}

.nav-wrapper nav ul li a::after {
    width: 0;
    transition: all 200ms ease-in-out;
    content: " ";
    display: block;
    border-bottom: 2px solid transparent;
}

.nav-wrapper nav ul li a:hover::after {
    width: 100%;
    content: " ";
    display: block;
    border-bottom: 2px solid var(--secondary-color);
}

.nav-wrapper nav ul li a.is-active {
    font-weight: 600;
}

.container-outer {
    background-color: var(--primary-color);
}

.mobile-menu-button {
    cursor: pointer;
    display: block;
    border: 0;
    background: transparent;
    width: 50px;
    background-image: url("images/mobile-menu-button.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.mobile-menu-wrapper {
    z-index: 100;
    position: absolute;
    width: 100%;
    display: none;
    padding: calc(24 / 16 * 1rem) 0 calc(28 / 16 * 1rem) 0;
    background-color: var(--tertiary-color);
}

.mobile-menu-wrapper.mobile-menu-active {
    display: block;
}


@media (width >= 64rem) { 
    .mobile-menu-wrapper {
        display: none;
    }
}

.mobile-menu-navigation ul {
    display: flex;
    gap: calc(19 / 16 * 1rem);
    flex-direction: column;
    list-style: none;
}

.mobile-menu-navigation ul li {
    text-align: center;
}

.mobile-menu-navigation ul li a {
    color: var(--tertiary-offset);
    font-size: calc(22 / 16 * 1rem);
    text-decoration: none;
}

@media (width >= 64rem) { 
    .mobile-menu-button {
        display: none;
    }
}



footer {
    padding-top: calc(64 / 16 * 1rem);
    padding-bottom: calc(64 / 16 * 1rem);
    background-color: var(--primary-color);
}

footer nav.footer-menu ul {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(12 / 16 * 1rem);
    list-style: none;
    margin-bottom: 0;
}

footer .footer-col-1 {
    order: 1;
}

footer .footer-col-2 {
    order: 3;
    display: flex;
    gap: calc(12 / 16 * 1rem);
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    @media (width >= 48rem) { 
        order: 2;
    }
}

footer .footer-col-3 {
    order: 2;
    display: flex;
    justify-content: start;
    @media (width >= 48rem) {
        order: 3;
        justify-content: end;
        align-items: center;
    }
}

footer .footer-col-title {
    margin-top: 0;
    font-size: calc(24 / 16 * 1rem);
    font-family: "marine-up", sans-serif;
    color: var(--secondary-color);
}

footer ul.footer-social-media {
    display: flex;
    margin-bottom: 0;
    gap: 1rem;
    flex-direction: row;
    list-style: none;
    padding: 0;
}

footer ul.footer-social-media li a {
    transition: all ease-in-out 200ms;
    display: block;
    width: calc(24 / 16 * 1rem);
    height: calc(24 / 16 * 1rem);
    text-decoration: none;
}

footer ul.footer-social-media li a span {
    opacity: 0;
    display: block;
    height: 0;
    width: 0;
    overflow: hidden;
}

footer ul.footer-social-media li.twitter {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjI3MzcgMTAuMTYzNUwyMy4yMDIzIDBIMjEuMDg3MkwxMy4zMzEzIDguODIzMDVMNy4xNDEyNSAwSDBMOS4zNjI2IDEzLjM0MzNMMCAyNEgyLjExNTA0TDEwLjMwMDIgMTQuNjgwNkwxNi44Mzg4IDI0SDIzLjk4TTIuODc4NCAxLjU2MTlINi4xMjc2OUwyMS4wODU2IDIyLjUxNDhIMTcuODM1NSIgZmlsbD0iIzE5NjYzOCIvPgo8L3N2Zz4K');
}

footer ul.footer-social-media li.instagram {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ0M18yODMpIj4KPHBhdGggZD0iTTEyIDIuMTYzQzE1LjIwNCAyLjE2MyAxNS41ODQgMi4xNzUgMTYuODUgMi4yMzNDMjAuMTAyIDIuMzgxIDIxLjYyMSAzLjkyNCAyMS43NjkgNy4xNTJDMjEuODI3IDguNDE3IDIxLjgzOCA4Ljc5NyAyMS44MzggMTIuMDAxQzIxLjgzOCAxNS4yMDYgMjEuODI2IDE1LjU4NSAyMS43NjkgMTYuODVDMjEuNjIgMjAuMDc1IDIwLjEwNSAyMS42MjEgMTYuODUgMjEuNzY5QzE1LjU4NCAyMS44MjcgMTUuMjA2IDIxLjgzOSAxMiAyMS44MzlDOC43OTYgMjEuODM5IDguNDE2IDIxLjgyNyA3LjE1MSAyMS43NjlDMy44OTEgMjEuNjIgMi4zOCAyMC4wNyAyLjIzMiAxNi44NDlDMi4xNzQgMTUuNTg0IDIuMTYyIDE1LjIwNSAyLjE2MiAxMkMyLjE2MiA4Ljc5NiAyLjE3NSA4LjQxNyAyLjIzMiA3LjE1MUMyLjM4MSAzLjkyNCAzLjg5NiAyLjM4IDcuMTUxIDIuMjMyQzguNDE3IDIuMTc1IDguNzk2IDIuMTYzIDEyIDIuMTYzWk0xMiAwQzguNzQxIDAgOC4zMzMgMC4wMTQgNy4wNTMgMC4wNzJDMi42OTUgMC4yNzIgMC4yNzMgMi42OSAwLjA3MyA3LjA1MkMwLjAxNCA4LjMzMyAwIDguNzQxIDAgMTJDMCAxNS4yNTkgMC4wMTQgMTUuNjY4IDAuMDcyIDE2Ljk0OEMwLjI3MiAyMS4zMDYgMi42OSAyMy43MjggNy4wNTIgMjMuOTI4QzguMzMzIDIzLjk4NiA4Ljc0MSAyNCAxMiAyNEMxNS4yNTkgMjQgMTUuNjY4IDIzLjk4NiAxNi45NDggMjMuOTI4QzIxLjMwMiAyMy43MjggMjMuNzMgMjEuMzEgMjMuOTI3IDE2Ljk0OEMyMy45ODYgMTUuNjY4IDI0IDE1LjI1OSAyNCAxMkMyNCA4Ljc0MSAyMy45ODYgOC4zMzMgMjMuOTI4IDcuMDUzQzIzLjczMiAyLjY5OSAyMS4zMTEgMC4yNzMgMTYuOTQ5IDAuMDczQzE1LjY2OCAwLjAxNCAxNS4yNTkgMCAxMiAwWk0xMiA1LjgzOEM4LjU5NyA1LjgzOCA1LjgzOCA4LjU5NyA1LjgzOCAxMkM1LjgzOCAxNS40MDMgOC41OTcgMTguMTYzIDEyIDE4LjE2M0MxNS40MDMgMTguMTYzIDE4LjE2MiAxNS40MDQgMTguMTYyIDEyQzE4LjE2MiA4LjU5NyAxNS40MDMgNS44MzggMTIgNS44MzhaTTEyIDE2QzkuNzkxIDE2IDggMTQuMjEgOCAxMkM4IDkuNzkxIDkuNzkxIDggMTIgOEMxNC4yMDkgOCAxNiA5Ljc5MSAxNiAxMkMxNiAxNC4yMSAxNC4yMDkgMTYgMTIgMTZaTTE4LjQwNiA0LjE1NUMxNy42MSA0LjE1NSAxNi45NjUgNC44IDE2Ljk2NSA1LjU5NUMxNi45NjUgNi4zOSAxNy42MSA3LjAzNSAxOC40MDYgNy4wMzVDMTkuMjAxIDcuMDM1IDE5Ljg0NSA2LjM5IDE5Ljg0NSA1LjU5NUMxOS44NDUgNC44IDE5LjIwMSA0LjE1NSAxOC40MDYgNC4xNTVaIiBmaWxsPSIjMTk2NjM4Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNDQzXzI4MyI+CjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4=');
}

footer ul.footer-social-media li.youtube {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF80NDNfMjg1KSI+CiAgICA8cGF0aCBkPSJNMTkuNjE1IDMuMTg0QzE2LjAxMSAyLjkzOCA3Ljk4NCAyLjkzOSA0LjM4NSAzLjE4NEMwLjQ4OCAzLjQ1IDAuMDI5IDUuODA0IDAgMTJDMC4wMjkgMTguMTg1IDAuNDg0IDIwLjU0OSA0LjM4NSAyMC44MTZDNy45ODUgMjEuMDYxIDE2LjAxMSAyMS4wNjIgMTkuNjE1IDIwLjgxNkMyMy41MTIgMjAuNTUgMjMuOTcxIDE4LjE5NiAyNCAxMkMyMy45NzEgNS44MTUgMjMuNTE2IDMuNDUxIDE5LjYxNSAzLjE4NFpNOSAxNlY4TDE3IDExLjk5M0w5IDE2WiIgZmlsbD0iIzE5NjYzOCIvPgogICAgPC9nPgogICAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAwXzQ0M18yODUiPgogICAgPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgogICAgPC9jbGlwUGF0aD4KICAgIDwvZGVmcz4KICAgIDwvc3ZnPg==');
}

footer ul.footer-social-media li.linkedin {
    background-image: url('data:image/svg+xml;base64,ICAgIDxzdmcgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF80NDNfMjg3KSI+CjxwYXRoIGQ9Ik0xOSAwSDVDMi4yMzkgMCAwIDIuMjM5IDAgNVYxOUMwIDIxLjc2MSAyLjIzOSAyNCA1IDI0SDE5QzIxLjc2MiAyNCAyNCAyMS43NjEgMjQgMTlWNUMyNCAyLjIzOSAyMS43NjIgMCAxOSAwWk04IDE5SDVWOEg4VjE5Wk02LjUgNi43MzJDNS41MzQgNi43MzIgNC43NSA1Ljk0MiA0Ljc1IDQuOTY4QzQuNzUgMy45OTQgNS41MzQgMy4yMDQgNi41IDMuMjA0QzcuNDY2IDMuMjA0IDguMjUgMy45OTQgOC4yNSA0Ljk2OEM4LjI1IDUuOTQyIDcuNDY3IDYuNzMyIDYuNSA2LjczMlpNMjAgMTlIMTdWMTMuMzk2QzE3IDEwLjAyOCAxMyAxMC4yODMgMTMgMTMuMzk2VjE5SDEwVjhIMTNWOS43NjVDMTQuMzk2IDcuMTc5IDIwIDYuOTg4IDIwIDEyLjI0MVYxOVoiIGZpbGw9IiMxOTY2MzgiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF80NDNfMjg3Ij4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=');
}

footer nav.footer-menu ul li {
    display: flex;
}

footer nav.footer-menu ul li a {
    cursor: pointer;
    color: var(--secondary-color);
    text-decoration: none;
}

footer nav.footer-menu ul li a::after {
    transition: all 200ms ease-in-out;
    width: 0;
    content: " ";
    display: block;
    border-bottom: 2px solid transparent;
}

footer nav.footer-menu ul li a:hover::after {
    width: 100%;
    content: " ";
    display: block;
    border-bottom: 2px solid var(--secondary-color);
}

p.footer-copyright-text { 
    margin: 0;
    text-align: left;
    color: var(--secondary-color);
    @media (width >= 40rem) { 
        text-align: center;
    }
}

.footer-social-media-wrapper {
    display: flex;   
}

.footer-logo {
    width: calc(101 / 16 * 1rem);
    height: calc(101 / 16 * 1rem);
}

html, 
body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth !important;
}

:root {
    --primary-color: #A1CCFF;
    --secondary-color: #196638;
    --tertiary-color: #FB93D0;
    --tertiary-offset: #B5182F;
    --highlight-color: #A2F4E6;
    --light-gray: #FFFAFA;
    --white: #ffffff;
    --dark: #282828;
    --black: #000000;
    --small: 40rem;
    --medium: 48rem;
    --large: 64rem;
    --xlarge: 80rem;
    --xxlarge: 96rem;
    font-family: sans-serif;
}

h1,
h2,
h3,
h4, 
h5, 
h6 {
    margin: 0;
    font-family: "rl-aqva", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.text-heading {
    font-family: "rl-aqva", sans-serif;
}

.text-body {
    font-family: "marine-up", sans-serif;
}

/* heading 72px */
.heading-xl {
    font-size: calc(36 / 16 * 1rem);
    @media (width >= 48rem) { 
        font-size: calc(72 / 16 * 1rem);
    }
}
/* heading 60px */
.heading-lg {
    font-size: clamp(2rem, 4vw, 3.75rem);
}
/* heading 36px */
.heading-md {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
}
/* heading 24px */
.heading-sm {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
}

/* heading 45px */
.featured-projects__title {
    font-size: clamp(1.45rem, 4vw, 2.813rem);
}

/* body 20px */
.body-lead {
    font-size: clamp(1rem, 4vw, 1.25rem);
}

.font-bold {
    font-weight: 600;
}

.font-black {
    font-weight: 900;
}

.text-primary {
    color: var(--primary-color);
}

.text-secondary {
    color: var(--secondary-color);
}

.text-tertiary {
    color: var(--tertiary-color);
}

.text-tertiary-offset {
    color: var(--tertiary-offset);
}

.text-black {
    color: var(--black);
}

.text-dark {
    color: var(--dark);
}

.text-white {
    color: var(--white);
}

.text-highlight {
    color: var(--highlight-color);
}

.gap-xxs {gap: calc(2 / 16 * 1rem);}
.gap-xs {gap: calc(4 / 16 * 1rem);}
.gap-sm {gap: calc(6 / 16 * 1rem);}
.gap-md {gap: calc(10 / 16 * 1rem);}
.gap-lg {gap: calc(20 / 16 * 1rem);}
@media (width >= 48rem) { 
    .gap-xxs {gap: calc(4 / 16 * 1rem);}
    .gap-xs {gap: calc(8 / 16 * 1rem);}
    .gap-sm {gap: calc(12 / 16 * 1rem);}
    .gap-md {gap: calc(20 / 16 * 1rem);}
    .gap-lg {gap: calc(40 / 16 * 1rem);}
}

.visually-hidden {
    display: block;
    text-decoration: none;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.text-uppercase {
    text-transform: uppercase;
}

.button,
ul,
li,
p {
    font-family: "marine-up", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 150%;
}

form label {
    font-family: "marine-up", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1rem;
}

form input {
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: "marine-up", sans-serif;
    transition: all 200ms ease-in-out;
}

form textarea {
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: "marine-up", sans-serif;
    transition: all 200ms ease-in-out;
}

main.page section {
    padding: calc(30 / 16 * 1rem) 0;
    @media (width >= 48rem) {
        padding: calc(69 / 16 * 1rem) 0;
    }
}

main.project section {
    padding: calc(28 / 16 * 1rem) 0;
    @media (width >= 48rem) {
        padding: calc(60 / 16 * 1rem) 0;
    }
}

main.project section.bg-white + section.bg-white {
    padding-top: 0;
}

main.project .project-button-wrapper {
    display: flex;
    justify-content: center;
    padding-bottom: calc(60 / 16 * 1rem);
    @media (width >= 48rem) {
        padding-bottom: calc(120 / 16 * 1rem);
    }
}

section.bg-white {
    background-color: var(--white);
}

section.bg-black {
    background-color: var(--black);
}

section.bg-primary {
    background-color: var(--primary-color);
}

section.bg-secondary {
    background-color: var(--secondary-color);
}

section.bg-tertiary {
    background-color: var(--tertiary-color);
}

.container {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1200px;
}

.container-xl {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1440px;
}

.button-wrapper {
    display: flex;
}

button.button,
a.button {
    cursor: pointer;
    white-space: nowrap;
    font-weight: 900;
    text-decoration: none;
    display: block;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    transition: all 200ms ease-in-out;
    border-radius: calc(50 / 16 * 1rem);
    padding: calc(5 / 16 * 1rem) calc(27 / 16 * 1rem);
    @media (width >= 48rem) { 
        padding: calc(10 / 16 * 1rem) calc(54 / 16 * 1rem);
    }
}
 

button.button-tertiary,
a.button-tertiary {
    color: var(--tertiary-offset);
    background-color: var(--tertiary-color);
}

button.button-tertiary:hover,
a.button-tertiary:hover {
    color: var(--white);
    background-color: var(--tertiary-offset);
}

button.button-tertiary-offset,
a.button-tertiary-offset {
    color: var(--tertiary-color);
    background-color: var(--tertiary-offset);
}

button.button-tertiary-offset:hover,
a.button-tertiary-offset:hover {
    color: var(--tertiary-offset);
    background-color: var(--tertiary-color);
}


button.button-primary,
a.button-primary {
    color: var(--secondary-color);
    background-color: var(--primary-color);
}

button.button-primary.w-border,
a.button-primary.w-border {
    border: 3px solid var(--secondary-color);
}

button.button-primary:hover,
a.button-primary:hover {
    color: var(--primary-color);
    background-color: var(--secondary-color);
}

a.filter-button,
button.filter-button {
    font-family: "marine-up", sans-serif;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 900;
    text-decoration: none;
    display: block;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    transition: all 200ms ease-in-out;
    border-radius: calc(50 / 16 * 1rem);
    padding: calc(5 / 16 * 1rem) calc(27 / 16 * 1rem);
    background-color: var(--tertiary-color);
    color: var(--tertiary-offset);
    border: 0.125rem solid var(--tertiary-offset);
}

button.filter-button:hover {
    color: var(--tertiary-color);
    background-color: var(--tertiary-offset);
}

button.form-button {
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 900;
    text-decoration: none;
    display: block;
    transition: all 200ms ease-in-out;
    border-radius: 0.5rem;
    padding: calc(5 / 16 * 1rem) calc(27 / 16 * 1rem);
    background-color: transparent;
}

.page-title {
    margin-bottom: 1rem;
}

.grid {
    display: grid;
    gap: calc(12 / 16 * 1rem);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.col-span-1, 
.col-span-2,
.col-span-3,
.col-span-4,
.col-span-5,
.col-span-6,
.col-span-7,
.col-span-8, 
.col-span-9,
.col-span-10,
.col-span-11,
.col-span-12 {
    grid-column: span 12;
}

@media (width >= 48rem) { 
    .col-span-1 {grid-column: span 1;}
    .col-span-2 {grid-column: span 2;}
    .col-span-3 {grid-column: span 3;}
    .col-span-4 {grid-column: span 4;}
    .col-span-5 {grid-column: span 5;}
    .col-span-6 {grid-column: span 6;}
    .col-span-7 {grid-column: span 7;}
    .col-span-8 {grid-column: span 8;}
    .col-span-9 {grid-column: span 9;}
    .col-span-10 {grid-column: span 10;}
    .col-span-11 {grid-column: span 11;}
    .col-span-12 {grid-column: span 12;}
}




section.hero {
    position: relative;
}

section.hero > .container {
    position: relative;
}

section.hero.theme-home .hero-background-image {
    display: none;
    height: 100%;
    position: absolute;
    width: 100%;
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    max-width: 700px;
    right: 0;
}

@media (width >= 40rem) { 
    section.hero.theme-home .hero-background-image {
        display: block;
    }
}

section.hero .hero-background-image span {
    display: none;
}

section.hero.theme-home .hero-meta-wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(27 / 16 * 1rem);
    padding-top: calc(20 / 16 * 1rem);
    padding-bottom: calc(24 / 16 * 1rem);
    @media (width >= 40rem) { 
        padding-top: calc(124 / 16 * 1rem);
        padding-bottom: calc(240 / 16 * 1rem);
    }
}

section.hero.theme-home .hero-strapline,
section.hero.theme-home .hero-title {
    color: var(--tertiary-color);
}

section.hero.theme-home .hero-strapline {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    margin: 0;
}

section.hero.theme-home .hero-strapline p {
    margin: 0;
}

section.hero.bg-secondary .hero-strapline,
section.hero.bg-secondary .hero-title {
    color: var(--highlight-color);
}

section.hero .hero-meta-wrapper .hero-title {
    text-align: left;
    @media (width >= 48rem) { 
        text-align: right;
    }
}

section.hero .hero-meta-wrapper .hero-title br {
    display: none;
    @media (width >= 48rem) { 
        display: block;
    }
}

section.hero.theme-portfolio .hero-meta-wrapper {
    order: 2;
    display: flex;
    grid-column-start: 1;
    grid-column-end: 12;
    @media (width >= 48rem) { 
        justify-content: end;
        align-items: end;
        grid-column-start: 6;
        grid-column-end: 11;
    }
}

section.hero .hero-image-wrapper {
    display: none;
    @media (width >= 48rem) { 
        display: flex;
    }
}
 
section.hero.theme-home .hero-meta-wrapper {
    grid-column-start: 1;
    grid-column-end: 12;
    @media (width >= 80rem) { 
        grid-column-start: 2;
    }
}

section.hero.theme-home .hero-meta-wrapper .hero-title {
    text-align: left;
}

section.hero.theme-portfolio .hero-image-wrapper {
    justify-content: start;
    order: 1;
    grid-column-start: 3;
    grid-column-end: 6;    
}  

section.hero.theme-about .hero-meta-wrapper {
    grid-column-start: 1;
    grid-column-end: 12;
    @media (width >= 48rem) { 
        grid-column-start: 3;
        grid-column-end: 7;
    }
}

section.hero.theme-about .hero-image-wrapper {
    grid-column-start: 1;
    grid-column-end: 12;
    @media (width >= 48rem) {
        display: flex;
        justify-content: center;  
        grid-column-start: 8;
        grid-column-end: 11;
    }
}

section.hero.theme-experience .hero-meta-wrapper .hero-title {
    text-align: left;
}

section.hero.theme-experience .hero-meta-wrapper {
    grid-column-start: 1;
    grid-column-end: 12;
    @media (width >= 48rem) { 
        display: flex;
        align-items: end;
        grid-column-start: 3;
        grid-column-end: 7;
    }
}

section.hero.theme-experience .hero-image-wrapper {
    transform: rotate(-15deg);
    grid-column-start: 1;
    grid-column-end: 12;
    @media (width >= 48rem) {
        margin-top: 2rem;
        display: flex;
        justify-content: center;  
        grid-column-start: 8;
        grid-column-end: 11;
    }
}



section.hero.theme-contact .hero-meta-wrapper {
    order: 2;
    grid-column-start: 1;
    grid-column-end: 12;
    @media (width >= 48rem) { 
        grid-column-start: 7;
        grid-column-end: 11;
    }
}

section.hero.theme-contact .hero-image-wrapper {
    order: 1;
    grid-column-start: 1;
    grid-column-end: 12;
    @media (width >= 48rem) {
        display: flex;
        justify-content: center;    
        grid-column-start: 3;
        grid-column-end: 6;
    }
}



section.image-text.bg-secondary {
    background-color: var(--secondary-color);
}

section.image-text.bg-white .image-text-text-column {
    color: var(--dark);
}

section.image-text.bg-white .image-text__title {
    color: var(--primary-color);
}

section.image-text.left-to-right .image-text-column {
    order: 1;
}

section.image-text.left-to-right .image-text-text-column {
    order: 2;
}

section.image-text.left-to-right .image-text-graphic {
    order: 3;
}

section.image-text.right-to-left .image-text-image-column {
    order: 2;
}

section.image-text.right-to-left .image-text-text-column {
    order: 1;
}

section.image-text.right-to-left .image-text-graphic {
    order: 3;
}

section.image-text.right-to-left .image-text-image-column .image-text-image__wrapper {
    justify-self: flex-start;
    @media (width >= 48rem) { 
        justify-self: flex-end;
    }
}

section.image-text .image-text-image-column .image-text-image__wrapper.image-text-orientation__portrait {
    /* aspect-ratio: 285 / 380; */
    overflow: hidden;
} 

section.image-text.right-to-left .image-text-image-column .image-text-image__wrapper.image-text-orientation__portrait {
    margin-left: 0;
    @media (width >= 48rem) { 
        margin-left: calc(80 / 16 * 1rem);
    }
}   

section.image-text.left-to-right .image-text-image-column .image-text-image__wrapper.image-text-orientation__portrait {
    margin-right: 0;
    @media (width >= 48rem) { 
        margin-right: calc(80 / 16 * 1rem);
    }
}

section.image-text.right-to-left .image-text-image-column {
    grid-column: span 12;
    @media (width >= 48rem) { 
        grid-column-start: 9;
        grid-column-end: 13;
    }
}

section.image-text.theme-project.right-to-left .image-text-text-column {
    grid-column: span 12;
    @media (width >= 40rem) { 
        grid-column: span 7;
    }
}

section.theme-project .image-text-text-column .image-text__title {
    font-family: "marine-up", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

section.image-text.bg-white .image-text-text-column .image-text__title {
    color: var(--dark);
}

section.image-text .image-text-image-column .image-text-image__wrapper img {
    width: 100%;
    height: 100%;
    border-radius: calc(24 / 16 * 1rem);
}

section.image-text.bg-secondary .image-text__content, 
section.image-text.bg-secondary .image-text__title {
    color: var(--highlight-color);
} 

section.image-text .image-text__title {
    margin: 0;
}

section.image-text .image-text__content p {
    margin: 0;
}

section.image-text .image-text__content p {
    margin-bottom: 1.5rem;
}

section.image-text .image-text__content p:last-of-type {
    margin-bottom: 0;
}

section.image-text .row {
    display: flex;
    flex-direction: row;
}

section.image-text .image-text-image-column {
    grid-column: span 12; 
    @media (width >= 48rem) { 
        grid-column: span 5;
    }
}

section.image-text .image-text-text-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-column: span 12;
    @media (width >= 48rem) {
        grid-column: span 8;
    }
}

section.image-text.left-to-right .image-text-image-column {
    grid-column: span 12;
    @media (width >= 48rem) {
        grid-column: span 4;
    }
}

section.image-text.has-graphic .image-text-text-column {
    grid-column: span 12;
    @media (width >= 48rem) { 
        grid-column: span 5;
    }
}

section.image-text.has-graphic .image-text-graphic {
    display: none; 
    transform: scale(70%);
    background-image: url("/images/hero/flower-pot.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    @media (width >= 48rem) {
        display: flex;
        align-items: flex-end;
        grid-column: span 2;
    }
}

section.image-text .buttons-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(20 / 16 * 1rem);
    @media (width >= 48rem) { 
        flex-direction: row;
    }
}


article.quick-link-card.quick-link-card-index__1 {
    grid-column-start: 1; 
    grid-column-end: 12;
    @media (width >= 40rem) { 
        grid-column-start: 2;
        grid-column-end: 6;
    }
}

article.quick-link-card.quick-link-card-index__2 {
    grid-column-start: 1;
    grid-column-end: 12;
    @media (width >= 40rem) {
        grid-column-start: 8;
        grid-column-end: 12;
    }
}

article.quick-link-card .quick-link-card__title {
    margin-top: 1rem;
    color: var(--tertiary-color);
}

article.quick-link-card .quick-link-card__blurb p {
    color: var(--dark);
    margin-bottom: calc(20 / 16 * 1rem);
    @media (width >= 48rem) { 
        margin-bottom: calc(40 / 16 * 1rem);
    }
}

article.quick-link-card .quick-link-card-image__wrapper {
    aspect-ratio: 386 / 291;
    max-width: 386px;
}

article.quick-link-card .image-wrapper .quick-link-card__image {
    width: 100%;
    height: auto;
}

article.quick-link-card .image-wrapper {
    width: 100%;
}

 

.projects-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: calc(40 / 16 * 1rem);
    @media (width >= 48rem) { 
        margin-bottom: calc(55 / 16 * 1rem);
    }
}

.projects-wrapper {
    display: flex;
    gap: 1.25rem;
    flex-direction: column;
    @media (width >= 48rem) { 
        flex-direction: row;
    }
}

.projects-wrapper article {
    width: auto;
    @media (width >= 48rem) { 
        width: 33.33%;
    }
}

article.project-card {
    display: flex;
    gap: calc(20 / 16 * 1rem);
    flex-direction: column;
    padding: 1.125rem;
    overflow: hidden;
    border-radius: 1.25rem;
}

article.theme-tertiary-offset {
    border: 3px solid var(--tertiary-offset);
}

article.theme-secondary {
    background-color: var(--white);
    border: 3px solid var(--secondary-color);
}

section.bg-secondary article.theme-secondary {
    background-color: var(--white);
    border: 3px solid var(--highlight-color);
}


article.theme-secondary .project-card__title {
    color: var(--secondary-color);
}

article.project-card p.project-card__excerpt {
    margin: 0;
}

article.project-card .project-card-image__wrapper {
    background-color: var(--primary-color);
    overflow: hidden;
    border-radius: 20px;
}

article.project-card .project-card__image {
    aspect-ratio: 346 / 260;
}

article.project-card .project-card__image {
    width: 100%;
    height: 100%;
}

article.project-card .button-wrapper {
    margin-top: auto;
}

section.resume h3.resume-title {
    text-align: center;
    color: var(--tertiary-offset);
}

section.resume .filters-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(20 / 16 * 1rem);
    padding-bottom: calc(50 / 16 * 1rem);
    @media (width >= 48rem) { 
        padding-bottom: calc(100 / 16 * 1rem);
        gap: calc(37 / 16 * 1rem);
    }
}

section.resume .filters-section-wrapper .resume-filters__wrapper {
    display: flex;
    flex-direction: row;   
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    @media (width >= 48rem) { 
        gap: calc(37 / 16 * 1rem);
    }
}

section.resume h5.resume-education__title {
    text-transform: uppercase;
}

section.resume h5.resume-education__title span {
    text-transform: none;
}

section.resume .resume-subtitle {
    font-family: "marine-up", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

section.resume .resume-subsubtitle {
   font-family: "marine-up", sans-serif;
   font-weight: bold;
}

section.resume .resume-skills__title {
    margin-bottom: 0;
    font-family: "marine-up", sans-serif;
    font-style: italic;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    text-transform: uppercase;
}

section.resume .resume-skills__group {
    display: flex;
    flex-direction: column;
    gap: calc(25 / 16 * 1rem);
    @media (width >= 48rem) { 
        gap: calc(50 / 16 * 1rem);
    }
}

section.resume .resume-skills__group ul.resume-skills__list {
    margin: 0;
    display: flex;
    gap: calc(25 / 16 * 1rem);
    flex-direction: column;
    padding-left: 0;
    list-style: none;
    @media (width >= 48rem) { 
        gap: calc(50 / 16 * 1rem);
    }
}

section.resume .articles-wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(30 / 16 * 1rem);
    @media (width >= 48rem) { 
        gap: calc(58 / 16 * 1rem);
    }
}

section.resume article {
    color: var(--dark);
}

section.resume .articles-wrapper article {
    display: flex;
    gap: calc(11 / 16 * 1rem);
    flex-direction: column;
}

section.resume .articles-wrapper article p {
    margin: 0;
}

section.resume .articles-wrapper__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

section.resume .resume-meta__wrapper {
    display: flex; 
    flex-direction: column;
    gap: calc(15 / 16 * 1rem);
    @media (width >= 48rem) { 
        gap: calc(28 / 16 * 1rem)
    }
}

section.resume article.resume-education .resume-meta__wrapper {
    gap: 0;
}

section.resume .button-wrapper {
    justify-content: center;
    margin-top: calc(40 / 16 * 1rem);
    @media (width >= 48rem) { 
        margin-top: calc(90 / 16 * 1rem);
    }
    @media (width >= 64rem) { 
        margin-top: calc(140 / 16 * 1rem);
    }
}

section.resume .resume-wrapper {
    display: flex;
    gap: calc(40 / 16 * 1rem);
    flex-direction: column;
    @media (width >= 48rem) { 
        gap: calc(90 / 16 * 1rem);
    }
    @media (width >= 64rem) { 
        gap: calc(140 / 16 * 1rem);
    }
} 

section.featured-projects.bg-white .featured-projects__title {
    color: var(--secondary-color);
}

section.featured-projects .featured-projects__title {
    text-align: center;
}

section.featured-projects.bg-secondary .featured-projects__title {
    color: var(--primary-color);
}

section.featured-projects .featured-projects__title {
    margin-bottom: calc(20 / 16 * 1rem);
    @media (width >= 48rem) {
        margin-bottom: calc(40 / 16 * 1rem);
    }
}

section.featured-projects .featured-projects__wrapper {
    display: flex;
    gap: 1.25rem;
    flex-direction: column;
    justify-content: center;
    @media (width >= 48rem) { 
        flex-direction: row;
    }
}

section.featured-projects .featured-projects__wrapper article {
    width: auto;
    @media (width >= 48rem) { 
        width: 33.33%;
    }
}




section.project-header.bg-white {
    padding: calc(80 / 16 * 1rem) 0 0 0 !important;
    margin: 0;
}

section.project-header ul.article-header__swatches {
    margin: 1.25rem 0;
    list-style: none;
}

section.project-header ul.article-header__tags {
    display: flex;
    flex-direction: row;
    margin: 0;
    list-style: none;
}

section.project-header ul.article-header__tags {
    padding: 0;
}


section.project-header ul.article-header__tags li::after {
    content: "|";
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

section.project-header ul.article-header__tags li:last-of-type::after {
    display: none;
}

section.project-header ul li.article-header__tag {
    font-weight: 900;
}

section.project-header .article-header-meta__wrapper {
    display: flex;
    gap: 0;
    flex-direction: column;
}

section.project-header .article-header__title {
    margin: 0 0 calc(50 / 16 * 1rem) 0;
    @media (width >= 48rem) { 
        margin: 0 0 calc(90 / 16 * 1rem) 0;
    }
}

section.project-header .article-header-meta__wrapper p.article-header__meta {
    margin: 0;
}

section.project-header .article-header-loc__wrapper {
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    @media (width >= 48rem) {
        justify-content: end;
        align-items: end;       
    }
}

section.project-header p.article-header__location {
    margin: 0;
}

section.project-header ul.article-header__swatches {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(12 / 16 * 1rem);
    padding: 0;
}

section.project-header ul.article-header__swatches li.article-header__swatch {
    overflow: hidden;
    border-radius: 50%;
    width: clamp(2rem, 4vw, 4.68rem);
    height: clamp(2rem, 4vw, 4.68rem);
}

section.project-header ul.article-header__swatches li.article-header__swatch.w-border {
    border: 1px solid var(--dark);
}

section.project-header .article-header-image__wrapper {
    overflow: hidden;
    border: 1px solid var(--dark);
    border-radius: 1.25rem;
    aspect-ratio: 1200 / 500;
}  

section.project-header .article-header-image__wrapper img {
    width: 100%;
    height: auto;
}







section.contact-form .column-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

section.contact-form.theme-portfolio .column-text {
    grid-column: span 12;
    @media (width >= 48rem) { 
        grid-column-start: 2;
        grid-column-end: 5;
    }
}

section.contact-form.theme-portfolio .column-form {
    grid-column: span 12;
    @media (width >= 48rem) { 
        grid-column-start: 6;
        grid-column-end: 12;
    }
}

section.contact-form.theme-contact .column-text {
    grid-column: span 12;
    @media (width >= 48rem) {
        grid-column-start: 4;
        grid-column-end: 10;
    }
}

section.contact-form.theme-contact .column-form {
    grid-column: span 12;
    @media (width >= 48rem) { 
        grid-column-start: 4;
        grid-column-end: 10;
    }
}

section.contact-form.theme-contact .cta-title {
    margin-bottom: 1rem;
    @media (width >= 48rem) { 
        margin-bottom: calc(30 / 16 * 1rem);
    }
}

section.contact-form.theme-contact .column-text {
    text-align: center;
}

section.contact-form .column-text .graphic-wrapper {
    align-self: flex-end;
    width: calc(122 / 16 * 1rem);
    height: calc(122 / 16 * 1rem);
    background-image: url('/images/cherry-punnet.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

section.contact-form .column-form form {
    display: flex;
    gap: 1.5rem;
    flex-direction: column;
    padding: 1.25rem;
    border-radius: 20px;
}

section.contact-form.bg-secondary .cta-title {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    @media (width >= 48rem) { 
        gap: 0;
        justify-content: space-between;
    }
}

section.contact-form.bg-tertiary .cta-title {
    color: var(--tertiary-offset);
}

section.contact-form.bg-secondary .cta-title {
    color: var(--highlight-color);
}

section.contact-form.bg-secondary form {
    border: 3px solid var(--highlight-color);
}

section.contact-form.bg-tertiary form {
    border: 3px solid var(--tertiary-offset);
}

section.contact-form .column-form form .form-field-wrap {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

section.contact-form.bg-tertiary form label {
    color: var(--tertiary-offset);
}

section.contact-form.bg-secondary form label {
    color: var(--highlight-color);
}

section.bg-secondary form textarea, 
section.bg-secondary form input {
    outline: 1px solid var(--highlight-color);
}

section.contact-form.bg-tertiary form textarea, 
section.contact-form.bg-tertiary form input {
    outline: 1px solid var(--tertiary-offset);
}

section.contact-form.bg-tertiary form textarea:focus,
section.contact-form.bg-tertiary form input:focus {
    outline: 2px solid var(--tertiary-offset);
}

section.contact-form.bg-secondary form textarea:focus,
section.contact-form.bg-secondary form input:focus {
    outline: 2px solid var(--highlight-color);
}

section.contact-form.bg-tertiary form button.form-button {
    border: 3px solid var(--tertiary-offset);
    color: var(--tertiary-offset);
}

section.contact-form.bg-tertiary form button.form-button:hover {
    color: var(--tertiary-color);
    background-color: var(--tertiary-offset);
}
section.contact-form.bg-secondary form button.form-button {
    border: 3px solid var(--highlight-color); 
    color: var(--highlight-color);
}

section.contact-form.bg-secondary form button.form-button:hover {
    color: var(--dark);
    background-color: var(--highlight-color);
}



section.full-width-image .image-wrapper img {
    width: 100%;
    height: auto;
}

section.text-block .text-block__wrapper {
    grid-column: span 12;
    @media (width >= 48rem) { 
        grid-column-start: 2;
        grid-column-end: 12;    
    }
}

section.text-block .signposts-wrapper {
    margin-bottom: calc(30 / 16 * 1rem);
    @media (width >= 48rem) { 
        margin-bottom: calc(60 / 16 * 1rem);
    }
}
 
section.text-block .text-block__title {
    text-transform: uppercase;
}

section.text-block article.signpost {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

section.text-block article.signpost p.caption {
    text-transform: uppercase;
    font-weight: 900;
}

section.text-block article.signpost.col-span-2 {
    grid-column: span 6;
    @media (width >= 48rem) { 
        grid-column: span 2;
    }
}

section.text-block article.signpost .signpost-logo-wrapper {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

section.text-block article.signpost .signpost-logo-wrapper img {
    width: 100%;
}

section.logo-grid {
    background-color: white;
}

section.logo-grid .span-full {
    grid-column: span 12;
}

section.logo-grid .logo-image-wrapper img {
    width: 100%;
    height: auto;
}

section.logo-grid .grid {
    gap: 0;
}

section.logo-grid .grid.logo-grid-wrapper {
    background-color: var(--light-gray);
}

section.logo-grid .item {
    position: relative;
    border-color: var(--secondary-color);
    border-style: solid;
    padding: 3rem;
}

section.logo-grid .item .logo-grid__title {
    font-family: "marine-up", sans-serif;
    font-weight: 900;
    margin-top: 0.5rem;
    top: 0;
    position: absolute;
}

section.logo-grid .item.first-full {
    border-width: 3px 3px 0px 3px;
    border-top-left-radius: calc(30 / 16 * 1rem);
    border-top-right-radius: calc(30 / 16 * 1rem);
}

 
section.logo-grid .item.mid-left {
    border-width: 3px 3px 3px 3px;
}

section.logo-grid .item.mid-right {
    border-width: 0px 3px 3px 3px;
    @media (width >= 48rem) { 
        border-width: 3px 3px 3px 0px;
    }
}

section.logo-grid .item.mid-full {
    border-width: 3px;
}


section.logo-grid .item.bottom-left {
    border-width: 0px 3px 3px 3px;
    @media (width >= 48rem) { 
        border-bottom-left-radius: calc(30 / 16 * 1rem);
    }
}

section.logo-grid .item.bottom-right {
    border-width: 0px 3px 3px 3px;
    border-bottom-left-radius: calc(30 / 16 * 1rem);
    border-bottom-right-radius: calc(30 / 16 * 1rem);
    @media (width >= 48rem) {
        border-width: 0 3px 3px 0; 
        border-bottom-left-radius: 0;
        border-bottom-right-radius: calc(30 / 16 * 1rem);
    }
}

section.logo-grid .logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
 
section.logo-grid .logo-wrapper img {
    width: 100%;
}

section.logo-grid .item .logo.orientation-square {
    aspect-ratio: 1 / 1;
}

section.logo-grid .item .logo.orientation-landscape {
    aspect-ratio: 7 / 1;
}