/* Pico Colors */

[data-theme="light"],
:root:not([data-theme="dark"]) {
    --color: #000000;
    --primary: #0069ff;
    --primary-hover: #0069ff;
    --primary-focus: rgba(0, 105, 255, 0.125);
    --primary-inverse: #FFF;
    --accordion-active-summary-color: var(--primary);
    --accordion-closed-summary-color: var(--primary);
    --accordion-open-summary-color: var(--primary);
}

:root {
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);
}

@media (max-width: 575px) {
    .left, .right{
        padding: 0 1em;
    }
    .left {
        margin-bottom: 1em;
    }
    .about .grid {
        display: grid;
    }
    .brand {
        width: 28%;
    }
    .service .title {
        display: inline-flex;
        align-items: center;
        padding: .5em 1.5em;
    }
    .service .title::after {
        right: -1rem;
        position: relative;
        margin-inline-start: 0;
        width: 2rem;
        height: 1rem;
    }
    .service .detail {
        padding: .5em 1.5em 0;
    }
}

@media (min-width:576px) {
    .about .grid {
        display: flex;
    }
    .brand {
        width: 20%;
    }
    .service .title {
        padding: 1em 2em;
    }
    .service .detail {
        padding: .5em 2em 0;
    }
}

@media (max-width: 767px) {
    nav.container, .logo {
        padding:0;
    }
    nav ul {
        width: 100%;
    }
    nav ul.desktop {
        display: none;
    }
    nav ul.mobile {
        display: flex;
        text-align: right;
        max-width: 150px;
    }
    nav ul.mobile li {
        margin-left:auto;
    }
    main.container {
        width: 80%;
        margin: 0 auto;
    }
    .service {
        width: 100%;
        margin: 0 auto 1.4em;
    }
    .left, .right {
        display: block;
        width: 100%;
    }
}

@media (min-width: 768px) {
    nav ul.desktop {
        display: block;
    }
    nav ul.mobile {
        display: none;
    }
    main.container {
        width: 80%;
        margin: 0 auto;
        padding: 2rem 0;
    }
    .service {
        width: 48%;
        margin: 0 2% 1.4em;
    }
    .left, .right {
        display: inline-block;
        width: 50%;
    }
}

h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

h5 {
    color: black;
}

h6 {
    color: var(--color);
    font-style: italic;
}

p {
    line-height: 1.65em;
}

blockquote p {
    margin: 0;
}

blockquote p:before { 
    content: open-quote;
} 

blockquote p:after { 
    content: close-quote;
}

blockquote cite:before {
    content: "— ";
}

blockquote cite {
    padding-left: 2em;
}

section, form {
    margin-bottom: 0;
}

.hero {
    background-image: url('../hero.jpg');
    background-position: center;
    background-size: cover;
    height: 45vh;
}

.honeypot {
    position: absolute;
    left: -9999px;
}

.header, .footer {
    margin: 0;
    padding: 1em 2em;
    background-color: white;    
}

.footer {
    text-align: right;
}

.logo .fine, .logo .tune {
    font-size: 1.45em;
    line-height: 1em;
}

.logo .tune {
    color: var(--h2-color); 
}

.logo .tagline {
    font-style: italic;
    color: black;
}

nav .link {
    color: black;
}

nav .link:hover {
    text-decoration: underline;
}

nav .link:active, nav .logo:active {
    --background-color: none;
    color: var(--primary);
}

nav ul:first-of-type, nav ul:first-of-type li {
    margin: 0;
    padding: 0;
}

.cta {
    max-width: 280px;
    margin: 0 auto;
}

.about .copy {
    text-align: left;
    display: inline-block;
    align-self: flex-end;
    width: 100%;
}

.about .copy h3, .about .copy h4  {
    margin: 0;
}

.headshot img {
    width: 100%;
    max-width: 277px;
}

.brand {
    display: inline-block;
    margin: 2%;
}

.case-study {
    padding-bottom: 4em;
    background: rgba(0,0,0,.04);
    margin: 0 0 2em;
    padding: 2em 1em;
    border-radius: .5em;
}

.case-study, .service {
    border-top: 16px var(--primary) solid;
}

.services {
    text-align: center;
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.service {
    vertical-align: text-top;
    text-align: left;
    background: rgba(0,0,0,.04);
    border-radius: 0.5em;
    margin: 0 0 1em;
}

.service .title {
    margin-bottom: -1em;
    line-height: 1.45em;
}

.service .detail {
    margin: 0;
    line-height: 1.45;
}

.footer {
    display: block;
    margin: 0 auto;
    padding: 2em 0;
    white-space: nowrap;
}

.left, .right {
    position: relative;
    white-space: normal;
}

.left {
    text-align:left;
    color: #777;
}

.left b {
    color: black;
    font-weight: 600;
}

.left .colored {
    color: #444;
}