/** fonts **/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap');

/** variables **/

:root {
    --font: 'IBM Plex Sans', sans-serif;
    --pac-purple: #aca3d3;
    --pac-purple-rgb: 172, 163, 211;
    --heading-text-color: #554795;
    --link-text-color: #554795;
}

html {
    font-family: var(--font);
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

header, footer {
    --bg-color: #1a1a1a;
    --text-color: #fff;
}

header {
    --nav-bg-color: #000;
}

#tagline {
    --heading-underline-color: #aca3d3;
    --bg-color: #1a1a1a;
    --text-color: #fff;
}

/** styles **/

html, body {
    font-family: var(--font);
    font-size: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.outer-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

h1, h2, h3, h4, h5, h6, .page-heading {
    font-family: var(--font);
}

h1, h2 {
    margin-top: 0.5em;
    margin-bottom: 0;
}

h1, h2, p {
    line-height: 1.5em;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

figure {
    margin: 0;
}

footer > .content {
    padding: 0 1em;
}

header, footer {
    padding: 2.8em 1em 1em;
    flex-grow: 0;
    flex-shrink: 0;
}

header {
    border-bottom: 1px solid #fff;
    background-color: #000;
    padding-bottom: 3em;
}

main a,
#main a {
    color: var(--link-text-color);
    text-underline-offset: 2px;
    text-decoration: underline 1px;
}

main a:hover,
#main a:hover {
    color: var(--link-text-color);
    text-decoration: underline 3px;
    -webkit-tap-highlight-color: transparent;
}

main a:focus,
#main a:focus {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

main a:focus:not(:focus-visible),
#main a:focus:not(:focus-visible) {
    outline: unset;
}

main a:focus-visible,
#main a:focus-visible {
    border-radius: 5px;
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

main h2 a:focus-visible,
#main h2 a:focus-visible {
    display: inline-block;
}

.screen-reader-shortcut {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.screen-reader-shortcut:focus {
    clip: initial;
    clip-path: initial;
    height: auto;
    width: auto;
    overflow: visible;
    white-space: normal;
    margin: 0;
    padding: 1em;
    border: 1px solid white;
    background-color: var(--pac-purple);
    color: #000;
}

header .pac-logo,
footer .pac-logo {
    text-decoration: none;
}

header .pac-logo {
    flex: 0 1 4.6875em;
    margin-left: 5px;
    height: 2.3125em;
}

@media (min-width: 65em) {
    header .pac-logo {
        flex: 0 1 6.375em;
        margin-bottom: 12px;
        margin-left: 0;
        height: 3.125em;
    }
}

header .pac-logo img {
    width: 4.6875em;
    height: auto;
}

@media (min-width: 65em) {
    header .pac-logo img {
        width: 6.375em;
    }
}

header .pac-logo:hover img {
    filter: brightness(3);
}

footer .pac-logo {
    display: inline-block;
    margin-bottom: 1em;
    height: 2.5em;
}

footer .pac-logo img {
    width: 5em;
    height: auto;
}

footer .pac-logo:hover img {
    filter: brightness(3);
}

header .pac-logo:focus,
footer .pac-logo:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

header .pac-logo:focus:not(:focus-visible),
footer .pac-logo:focus:not(:focus-visible) {
    outline: unset;
}

header .pac-logo:focus-visible,
footer .pac-logo:focus-visible {
    border-radius: 1px;
    position: relative;
    outline: 2px solid #fff;
}

header .pac-logo:focus-visible::before,
footer .pac-logo:focus-visible::before {
    content: "";
    border-radius: 7px;
    position: absolute;
    box-shadow: 0 0 0 2px #1a1a1a;
}

header .pac-logo:focus-visible { outline-offset: 8px; }
header .pac-logo:focus-visible::before { inset: -6px; }

footer .pac-logo:focus-visible { outline-offset: 6px; }
footer .pac-logo:focus-visible::before { inset: -4px; }

header #nav-region {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

header button#site-nav-control {
    background: none;
    font-family: var(--font);
    font-size: 1em;
    color: var(--text-color);
    border: 1px solid var(--pac-purple);
    border-radius: 2rem;
    padding: .5em 1em;
    align-self: center;
}

header button#site-nav-control:hover {
    border-color: var(--pac-purple);
    background-color: var(--pac-purple);
    color: #000;
    outline: none;
}

header button#site-nav-control:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;

}

header button#site-nav-control:focus:not(:focus-visible) {
    outline: unset;
}

header button#site-nav-control:focus-visible {
    border-radius: 25px;
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #1a1a1a;
}

header button#site-nav-control span {
    display: none;
}

header button#site-nav-control svg {
    max-width: 1em;
    max-height: 1em;
    margin-left: 0.4em;
    margin-bottom: -0.2em;
}

header button#site-nav-control[aria-expanded="true"] .expanded,
header button#site-nav-control[aria-expanded="false"] .collapsed {
    display: inline;
}

header button#site-nav-control[aria-expanded="true"] .expanded svg,
header button#site-nav-control[aria-expanded="false"] .collapsed svg {
    fill: #fff;
}

header button#site-nav-control[aria-expanded="true"]:hover .expanded svg,
header button#site-nav-control[aria-expanded="false"]:hover .collapsed svg {
    fill: #000;
}

header button#site-nav-control[aria-expanded="false"] ~ nav {
    display: none;
}

/** menu search **/

header .menu-item-search {
    position: relative;
    z-index: 1;
}

header .menu-item-search .search-field {
    border: 1px solid black;
    border-radius: 0;
    width: 100%;
}

header .menu-item-search .search-submit {
    font-size: 1em;
    display: block;
    margin: 8px 0 0 auto;
    padding: 0.2em 0.6em 0.2em 0.7em;
    width: auto;
}

header .menu-item-search .search-submit svg {
    max-width: 1em;
    max-height: 1em;
}

.form-group label {
    display: block;
    font-weight: bold;
}

header #toggle-search + form > * + * {
    margin-top: .5em;
}

header button#toggle-search {
    font-size: 1em;
    font-family: var(--font);
    color: var(--text-color);
    border: 2px solid var(--pac-purple);
    border-radius: 2rem;
    background: none;
    display: flex;
    padding: .5em 1em;
    min-width: 5.5em;
}

header button#toggle-search:hover {
    background-color: var(--pac-purple);
    color: #000;
    outline: 0;
}

header button#toggle-search:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

header button#toggle-search:focus:not(:focus-visible) {
    outline: unset;
}

header button#toggle-search:focus-visible {
    border-radius: 25px;
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #1a1a1a;
}

header button#toggle-search svg {
    fill: #fff;
    margin-bottom: -0.2em;
    margin-left: 0.2em;
    max-width: 1em;
    max-height: 1em;
}

header button#toggle-search:hover svg {
    fill: #000;
}

header #toggle-search + form {
    margin-top: 1em;
    background-color: var(--pac-purple);
    padding: 1em;
    flex-direction: column;
    border: 1px solid #fff;
    border-radius: 0.2em;
}

header #toggle-search + form .search-field:focus,
header #toggle-search + form .search-submit:focus {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

header #toggle-search + form .search-field:focus:not(:focus-visible),
header #toggle-search + form .search-submit:focus:not(:focus-visible) {
    outline: unset;
}

header #toggle-search + form .search-field:focus-visible,
header #toggle-search + form .search-submit:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

header #toggle-search + form .search-submit:focus-visible {
    border-radius: 15px;
}

header #toggle-search + form:not([hidden]) {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
    width: 12em;
}

@media (min-width: 65em) {
    header #toggle-search + form:not([hidden]) {
        right: 0;
        left: auto;
        transform: unset;
    }
}

header button#toggle-search span {
    display: none;
}

header button#toggle-search[aria-expanded="true"] .expanded,
header button#toggle-search[aria-expanded="false"] .collapsed {
    display: inline;
}

/** header navigation **/

@media screen and (min-width: 65em) {
    header button#site-nav-control[aria-expanded="false"] ~ nav {
        display: flex;
        justify-content: end;
    }
}

@media screen and (min-width: 65em) {
    header #nav-region {
        padding: 3.1em 1em 2em;
        flex-wrap: nowrap;
    }
}

@media screen and (min-width: 65em) {
    header #site-nav ul {
        display: flex;
        justify-content: end;
        align-items: center;
        width: 100%;
    }
}

header nav li:last-child {
    padding-top: 0.5em;
    padding-left: 0.7em;
}

@media screen and (min-width: 65em) {
    header nav li:last-child {
        padding-top: 0;
    }
}

header nav {
    flex: 0 1 calc(100% - 6.375em);
    display: flex;
    justify-content: space-around;
    padding-top: 1em;
    padding-bottom: 0;
}

@media screen and (min-width: 65em) {
    header nav {
        padding-top: 0;
    }
}

header nav button {
    color: var(--text-color);
    display: inline-block;
    padding: 0.5em;
    font-size: 1.3em;
}

header nav a {
    color: var(--text-color);
    font-size: 1.3em;
    text-decoration: none;
    display: inline-block;
    position: relative;
    padding: 0.5em 0.625em;
}

header nav a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(100% - 0.65em);
    height: 0.625em;
    transform: translate(-50%, 0);
}

header nav a:hover {
    -webkit-tap-highlight-color: transparent;
}

header nav a:hover::after {
    border-bottom: 1px solid var(--pac-purple);
}

header nav a:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

header nav a:focus:not(:focus-visible) {
    outline: unset;
}

header nav a:focus-visible {
    border-radius: 5px;
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #1a1a1a;
}

/** content **/

main {
    flex-grow: 1;
}

main .content-wrapper {
    padding-left: 2em;
    padding-right: 2em;
}

main .content-wrapper {
    padding: 1em 2em;
}

/** content - tagline **/

#tagline {
    background-color: var(--bg-color);
    color: var(--text-color);
}

#tagline .content-wrapper {
    padding: 4.6em 2em 2.7em;
}

#tagline .content {
    padding-top: 0;
}

@media screen and (min-width: 65em) {
    #tagline .content {
        max-width: none;
    }
}

#tagline .tagline-subtext {
    width: 100%;
}

@media screen and (min-width: 65em) {
    #tagline .tagline-subtext {
        max-width: 767px;
    }
}

#tagline h1,
#tagline .page-heading {
    color: var(--pac-purple);
    font-size: 2.25em;
    line-height: 1.3;
    font-weight: normal;
    word-wrap: break-word;
    margin-top: 0;
    padding-bottom: 0.7em;
}

@media screen and (min-width: 65em) {
    #tagline h1,
    #tagline .page-heading {
        font-size: 4.1875em;
        padding-bottom: 0.32em;
    }
}

.home #tagline h1,
.home #tagline .page-heading {
    padding-bottom: 0.64em;
}

@media screen and (min-width: 65em) {
    .home #tagline h1,
    .home #tagline .page-heading {
        padding-bottom: 0.28em;
    }
}

/* Hook into desktop Safari only */
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
    .home #tagline h1,
    .home #tagline .page-heading {
        max-width: 784px;
    }
}

#tagline h1.second-level-page {
    font-size: 2em;
}

@media screen and (min-width: 65em) {
    #tagline h1.second-level-page {
        font-size: 3em;
    }
}

body:not(.home) #tagline h1::after,
body:not(.home) #tagline .page-heading::after {
    content: '';
    max-width: 115px;
    display: block;
    padding-top: 0.6em;
    border-bottom: 5px solid var(--text-color);
}

@media screen and (min-width: 65em) {
    body:not(.home) #tagline h1::after,
    body:not(.home) #tagline .page-heading::after {
        border-bottom-width: 8px;
        padding-top: 0.3em;
        max-width: 767px;
    }
}

.home .tagline-subtext::before {
    content: '';
    max-width: 115px;
    display: block;
    border-bottom: 5px solid var(--text-color);
    margin-bottom: 1em;
}

@media screen and (min-width: 65em) {
    .home .tagline-subtext::before {
        border-bottom-width: 8px;
        max-width: 767px;
        margin-bottom: 0.76em;
    }
}

#tagline .tagline-subtext,
#tagline .tagline-subtext p {
    font-size: 1.065em;
    text-wrap: pretty;
    display: inline-block;
    margin-top: 0;
}

@media screen and (min-width: 65em) {
    #tagline .tagline-subtext,
    #tagline .tagline-subtext p {
        font-size: 1.375rem;
    }
}

.home #tagline .tagline-subtext {
    font-size: 1.375em;
    text-wrap: balance;
}

@media screen and (min-width: 65em) {
    .home #tagline .tagline-subtext {
        font-size: 2em;
    }
}

#tagline .tagline-subtext + .tagline-subtext {
    display: block;
    padding-top: 0.2em;
}

#tagline a,
#tagline a:hover {
    color: var(--text-color);
}

#tagline a:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

#tagline a:not(:focus-visible) {
    outline: unset;
}

#tagline a:focus-visible {
    border-radius: 5px;
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #1a1a1a;
}

/** content **/

main .content {
    padding-top: 2em;
    padding-bottom: 35px;
}

main .content img {
    max-width: 100%;
}

main h2 {
    color: var(--heading-text-color);
    font-size: 1.5em;
    font-weight: bold;
}

main #our-ways-and-showcase {
    border-bottom: 1px solid #000;
}

main #our-ways h2:first-of-type {
    margin-top: 0;
}

main #our-ways h2 {
    margin-bottom: 0;
}

main #our-ways h2 + p {
    margin-top: 0.5em;
}

main #featured-projects {
    color: var(--heading-text-color);
    margin-top: 1.5em;
    padding-bottom: 1em;
}

.project-image figcaption {
    color: var(--heading-text-color);
    margin:.25em 0 2.5em;
}

main #featured-projects h2 {
    margin-top: 0;
    font-size: 1.2em;
}

main #featured-projects .description {
    margin-bottom: 0.2em;
    margin-top: 0.5em;
    min-height: 5.5em;
}

main #featured-projects .featured-project img {
    border: 1px solid var(--pac-purple);
    object-fit: cover;
    width: 27em;
    height: 27em;
}

main #featured-projects-controls {
    display: flex;
    flex-direction: column;
    align-items: end;
}

main #featured-projects-controls p {
    margin: 0 .25em 0.5em 0;
    font-size: .9em;
}

main #featured-projects-controls button {
    padding: 0.2em 0.5em;
    min-width: 7.3em;
    font-size: .8em;
}

main #featured-projects-controls button:focus {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

main #featured-projects-controls button:focus:not(:focus-visible) {
    outline: unset;
}

main #featured-projects-controls button:focus-visible {
    border-radius: 15px;
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

main #featured-projects-controls button + button {
    margin-left: .5em;
}

main #our-clients {
    margin-top: 3em;
    width: 100%;
    max-width: 54.25em;
}

main ul#client-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2em;
    margin: 4em 0;
}

/* min-width: 481px */
@media (min-width: 30.0625em) {
    main ul#client-logos {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 30.0625em) and (max-width: 37.5em)  {
    main ul#client-logos li.before-orphen-sm:nth-last-child(2) {
        grid-column-start: 1;
        grid-column-end: 2;
    }
}

/* min-width: 601px */
@media (min-width: 37.5625em) {
    main ul#client-logos {
        grid-template-columns: repeat(4, 1fr);
    }
    main ul#client-logos li:nth-child(9) {
        grid-column-start: auto;
        grid-column-end: auto;
    }
}

@media (min-width: 37.5625em) and (max-width: 48em) {
    main ul#client-logos li.before-orphen-md:nth-last-child(2) {
        grid-column-start: 1;
        grid-column-end: 2;
    }
}

/* min-width: 769px */
@media (min-width: 48.0625em) {
    main ul#client-logos {
        grid-template-columns: repeat(5, 1fr);
    }
}

main ul#client-logos li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

main ul#client-logos img {
    width: auto;
    max-width: 6.125em;
    height: auto;
    max-height: 4.875em;
}

main ul#client-logos img[alt="The Met"] {
    max-height: 4.25em;
}

main ul[aria-labelledby="selected-clients-heading"] {
    line-height: 1.8em;
}

main #should-we-work-together h2 {
    font-weight: normal;
    font-size: 4em;
    margin-top: 0.5em;
    margin-bottom: 0.2em;
}

main #should-we-work-together a img {
    margin-left: .5em;
}

main #should-we-work-together a {
    display: flex;
    align-content: baseline;
    color: #000; /* TODO should be a variable */
    text-decoration: none;
    font-size: 2em;
}

main #should-we-work-together a:focus {
    outline: none;
}

main #should-we-work-together a img.active,
main #should-we-work-together a:focus img.default,
main #should-we-work-together a:hover img.default {
    display: none;
}

main #should-we-work-together a:focus img.active,
main #should-we-work-together a:hover img.active {
    display: inline;
}

/** footer **/

footer {
    background-color: var(--bg-color);
    color: var(--text-color);
}

footer .content {
    padding-top: 2em;
    padding-bottom: 2em;
}

/* footer * + * { } */

footer .company-name,
footer nav {
    margin-left: 14px;
}

footer .company-name {
    font-weight: bold;
    margin-top: 0.5em;
    padding-bottom: 1em;
}

footer nav {
    margin-top: 1em;
    display: flex;
    flex-direction: column;
}

footer nav ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

footer nav a {
    color: var(--text-color);
    font-size: 1.3em;
    text-underline-offset: 2px;
    text-decoration: underline 1px;
    display: inline-block;
    padding: 0.5em;
}

footer nav a:hover {
    text-decoration: underline 3px;
    -webkit-tap-highlight-color: transparent;
}

footer nav a:first-of-type {
    margin-left: -0.5em;
}

footer nav a:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

footer nav a:focus:not(:focus-visible) {
    outline: unset;
}

footer nav a:focus-visible {
    border-radius: 5px;
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #1a1a1a;
}

footer nav a:focus::before {
    border-top-color: var(--text-color);
}

/** GENERIC BREAKPOINTS **/

@media screen and (min-width: 65em) {

    header, main, footer {
        padding: 0;
    }

    header .content,
    footer .content {
        max-width: 75em;
    }

    main .content-wrapper {
        max-width: 67em;
    }

    main .content-wrapper .content {
        max-width: 49.75em;
    }

    main .content-wrapper .contained {
        max-width: 39em;
    }

    h2#project-images-heading {
        margin: 1.5em 0 1em;
    }

    main .content-wrapper .content.horizontal-fill {
        max-width: none;
    }

    header .content,
    main .content-wrapper,
    footer .content {
        margin: 0 auto;
    }

    #site-nav-control {
        display: none;
    }

    header #toggle-search + form {
        position: absolute;
    }

    main #featured-projects {
        margin-top: 0;
    }

    main #our-ways-and-showcase {
        display: grid;
        grid-template-columns: 60% 40%;
        margin-top: 2em;
        padding-bottom: 2.5em;
    }

    main #our-ways {
        margin-right: 3em;
        width: 90%;
    }

    main ul[aria-labelledby="selected-clients-heading"] {
        columns: 2;
    }

    footer .content {
        padding-top: 4em;
        padding-bottom: 4em;
    }

    footer nav {
        margin-top: 0;
    }

    footer nav, footer nav ul {
        flex-direction: row;
    }

    footer nav, footer nav ul {
        gap: 2em;
    }
}

/** HOME **/
.page-home-plus .page-heading {
    color: var(--heading-text-color);
    font-weight: bold;
    text-wrap: balance;
}

.primary {
    background: black;
    padding: 0.5em 1em;
    color: white;
    border-radius: 2rem;
    border: 1px solid transparent;
    text-decoration: none;
}

.primary svg {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    fill: #fff;
    margin-bottom: -0.2em;
}

.primary.point-right svg {
    transform: rotate(270deg);
    margin-left: 0.5em;
}

.primary.point-left svg {
    transform: rotate(90deg);
    margin-right: 0.5em;
}

.point-up svg {
    transform: rotate(180deg);
}

/* .point-down svg { } */

.primary:hover,
.primary:focus {
    outline: 0;
    border: 1px solid black;
    background: #fff;
    color: #000;
}

.primary:hover svg,
.primary:focus svg {
    fill: var(--heading-text-color);
}

.page-home-plus main .content > * + * {
    margin-top: 1em;
}

/** SERVICES **/

.page-services main .content-wrapper .contained {
    max-width: unset;
}

.page-services main h2 {
    margin-bottom: .3em;
}

.page-services main .description.contained h2 {
    border-top: 1px solid black;
    margin-top: 2.7em;
    padding-top: 2.5em;
}

.page-services main .description.contained h2:first-child {
    border-top-style: none;
    margin-top: 0.75em;
    padding-top: 0;
}

.page-services main .description.contained p {
    max-width: 39em;
}

/** PROJECTS **/

.page-projects .project h2 {
    font-size: 1.2em;
}

.page-projects .project h2 a {
    color: var(--heading-text-color);
    text-decoration: none;
}

.page-projects .project h2 a:hover {
    text-decoration: underline;
}

.page-projects #projects {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.page-projects #projects .project {
    flex: 0 1 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 auto 4.1em;
    max-width: 30em;
}

@media (min-width: 48.0625em) {
    .page-projects #projects .project {
        flex: 0 1 46%;
        margin: 0 0 5.35em;
        max-width: unset;
    }
}

@media (min-width: 65em) {
    .page-projects #projects .project {
        flex: 0 1 29%;
    }
}

.page-projects .project .project-img {
    order: 1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.075);
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-top: 67%;
    width: 100%;
}

.page-projects .project .project-img img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page-projects .project h2 {
    color: var(--heading-text-color);
    order: 2;
    font-size: 1.2em;
    line-height: 1.3;
    margin: 0.75em 0 0.25em;
}

.page-projects main .project h2 a,
.page-projects #main .project h2 a {
    text-decoration: none;
}

.page-projects main .project h2 a:hover,
.page-projects #main .project h2 a:hover {
    text-decoration: underline 3px;
}

.page-projects .project .client {
    order: 3;
    font-weight: bold;
    margin-top: 0.3em;
}

.page-projects .project .client::after {
    padding-top: 1em;
    margin-bottom: 1em;
    content: "";
    border-bottom: 3px solid black;
    display: block;
    width: 5em;
}

.page-projects .project .description {
    order: 4;
}

/** SINGLE PROJECT **/

.single-projects .project-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

.single-projects #tagline span p {
    margin-bottom: 0;
}

/** RESOURCES **/

.page-resources main ul + h2 {
    margin-top: 2em;
}

.page-resources main li + li {
    margin-top: 1em;
}

.page-resources main a {
    color: black;
}

/** ABOUT **/

.video-container iframe {
    /** prevent youtube embed from stretching the content outside its box **/
    max-width: 100%;
}

/** NEWS OVERVIEW **/
.page-news main dt {
    color: var(--heading-text-color);
    font-weight: bold;
}

.page-news main dd {
    font-size: 1em;
    margin-left: 0.5em;
}

.page-news main dt,
.page-news main dd {
    display: inline-block;
}

.page-news .news-title,
.page-news .news-meta,
.page-news .description {
    max-width: 39em;
}

.page-news #news .news-title h2 a {
    text-decoration: none;
}

.page-news #news .news-title h2 a:hover {
    text-decoration: underline 3px;
}

/** NEWS ARTICLE **/

.single-news main .content > * + * {
    margin-top: 1em;
}

/** CONTACT FORM **/

.col-2 .wpcf7-form-control-wrap {
    position: inherit;
}

.form-row {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 2em;
    float: left;
}

.form-cell.first-name, .form-cell.last-name, .form-cell.email-address, .form-cell.subject {
    width: calc(50% - 10px);
    float: left;
}

.form-cell.first-name, .form-cell.email-address {
    margin-right: 20px;
}

.wpcf7-form input, .wpcf7-form textarea, .comments-area input, .comments-area textarea {
    width: 98%;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    background-color: transparent;
    border-radius: 0;
    margin: 0;
    padding: .5em 0 .5em .25em;
    font-weight: 400;
    color: #0f0f0f;
    font-size: 1.15rem;
    letter-spacing: 0;
    line-height: 1.3;
    border: .085em solid;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.comments-area input:focus,
.comments-area textarea:focus {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.wpcf7-form input:focus:not(:focus-visible),
.wpcf7-form textarea:focus:not(:focus-visible),
.comments-area input:focus:not(:focus-visible),
.comments-area textarea:focus:not(:focus-visible) {
    outline: unset;
}

.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible,
.comments-area input:focus-visible,
.comments-area textarea:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

.wpcf7-form textarea {
    width: 99%;
}

.wpcf7-form .wpcf7-submit, .comments-area .submit {
    width: auto;
    text-transform: uppercase;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.15rem;
    line-height: 1.875;
    font-weight: 500;
    border-radius: 10rem;
    border: 0.07em solid #4d03b7;
    background: #4d03b7;
    padding: .25rem 1.5rem .125rem;
    cursor: pointer;
    color: #fff;
    box-shadow: 2px 6px 40px rgba(0,0,0,0);
}

.comments-area p.comment-form-comment {
    width: 98%;
    padding-right: 0;
}

.comments-area p.comment-form-author, .comments-area p.comment-form-email {
    float: left;
    width: 50%;
    padding-right: 20px;
}

.wpcf7-form label, .comments-area label {
    display: inline-block;
    width: 100%;
    font-size: 1.15rem;
    font-weight: 500;
}

.wpcf7-not-valid-tip {
    color: darkred;
}

.wpcf7-form .wpcf7-submit,
.comment-form .submit {
    border: 2px solid black;
    background-color: black;
    text-transform: capitalize;
    margin-bottom: 0.5em;
}

.wpcf7-form .wpcf7-submit:hover,
.comment-form .submit:hover {
    background: white;
    color: black;
    outline: 0;
    font-weight: bold;
}

.wpcf7-spinner span {
    display: inline-block;
    padding-left: 2em;
}

.wpcf7-form .wpcf7-submit:focus,
.comment-form .submit:focus {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.wpcf7-form .wpcf7-submit:focus:not(:focus-visible),
.comment-form .submit:focus:not(:focus-visible) {
    outline: unset;
}

.wpcf7-form .wpcf7-submit:focus-visible,
.comment-form .submit:focus-visible {
    border-radius: 25px;
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;

}

/** BLOG **/

.blog .post .post-excerpt {
    margin-top: 1em;
}

.blog #blog .post h2 a {
    text-decoration: none;
}

.blog #blog .post h2 a:hover {
    text-decoration: underline 3px;
}

.post-text ul {
    margin: 1em;
    list-style-type: disc;
}

.post-text li::marker {
    color: var(--heading-text-color);
}

.post-text h2, #comments h2 {
    margin-top: 1em;
}

.post-text h3 {
    color: #000;
    font-weight: bold;
    margin-bottom: 0;
}

/** TEAM **/

@media (max-width: 64.9375em) {
    .page-team #team-members.separated-list > * + * {
        border-top-style: none;
    }
}

.page-team #team-members .team-member {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    gap: 0;
    height: 100%;
}

.page-team #team-members .team-member figure {
    grid-row-start: 1;
    grid-row-end: 1;
}

.page-team #team-members .team-member .bio {
    margin-top: 1em;
    grid-row-start: 3;
    grid-row-end: 3;
}

.page-team .member-name {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.page-team figure {
    margin: 0 0 0.5em;
    max-width: 20em;
}

.page-team .member-name .pronouns {
    color: var(--heading-text-color);
    padding-left: 0.3em;
    font-size: 1.5em;
}

.page-team .member-name h2 {
    margin-top: 0;
}

.page-team .member-title {
    font-weight: bold;
    padding-bottom: 1em;
    border-bottom: 2px solid black;
    display: inline-block;
    padding-right: 3em;
}

@media screen and (min-width: 65em) {
    .page-team #team-members .team-member {
        grid-template-rows: auto 1fr;
        grid-template-columns: 25em auto;
        max-width: 80%;
    }

    .page-team #team-members .team-member figure {
        margin-top: 0.5em;
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: 3;
        grid-column-end: 3;
    }

    .page-team #team-members .member-name-and-title {
        grid-row-start: 1;
        grid-column-start: 3;
        grid-row-end: 2;
        grid-column-end: 4;
    }

    .page-team #team-members .team-member .bio {
        margin-top: 1em;
        grid-row-start: 2;
        grid-column-start: 3;
        grid-row-end: 3;
        grid-column-end: 4;
    }
}

/** SEARCH RESULTS **/

.search-results #search-results {
    margin: 1em;
    list-style-type: disc;
}

.search-results #search-results li + li {
    margin-top: 0.5em;
}

.search-results #search-results li::marker {
    color: var(--heading-text-color);
}

/* search form wrapper */
.search-results .search-form-wrapper {
    padding-top: 1rem;
}

.search-results .search-form-wrapper .search-form {
    padding-left: 1em;
    max-width: 12em;
}

.search-results .search-form-wrapper .search-field {
    border: 1px solid black;
    border-radius: 0;
    width: 100%;
    min-height: 26px;
}

.search-results .search-form-wrapper .search-field:focus {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.search-results .search-form-wrapper .search-field:focus:not(:focus-visible) {
    outline: unset;
}

.search-results .search-form-wrapper .search-field:focus:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

.search-results .search-form-wrapper .primary  {
    margin-top: 0.5em;
    padding: 0.2em 0.6em 0.2em 0.7em;
}

.search-results .search-form-wrapper .primary :focus {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.search-results .search-form-wrapper .primary :focus:not(:focus-visible) {
    outline: unset;
}

.search-results .search-form-wrapper .primary :focus-visible {
    border-radius: 15px;
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

.search-results .search-form-wrapper .primary.point-right svg {
    transform: rotate(270deg);
    margin-left: 0.5em;
    max-width: 1em;
    max-height: 1em;
}

/** ABOUT **/
.page-about main h2 {
    margin-bottom: 0.5em;
}

/** utilities **/
svg.pac-triangle {
    max-width: 1.2em;
    max-height: 1.2em;
}

.separated-list h2 a {
    color: var(--heading-text-color);
}

.separated-list > * {
    padding-bottom: 2.5em;
}

.separated-list > * + * {
    padding-top: 2.5em;
    border-top: 1px solid black;
}