* {box-sizing: border-box; margin: 0; padding: 0;}

html {font-size: clamp(15px, 0.65vw, 18px); scroll-behavior: smooth;}
body {display: flex; flex-direction: row; min-height: 100vh; background: white; font-size: 1rem; line-height: 1.6; font-family: 'Raleway', sans-serif; font-weight: 400;}
img {max-width: 100%; width: 100%; height: auto; display: block; border-radius: 0.5rem;}
.container {margin: 0 auto; max-width: 85rem; padding-inline: 6rem;}

h1, h2, h3, h4, h5, h6 {font-weight: 600; line-height: 1.25; margin-bottom: 0.5rem;}
h1 {font-size: 2rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.05rem; font-weight: 600;}
.pretitle {text-transform: uppercase; font-weight: 700; color: #1871bb; font-size: 0.85rem;}
.pretitle + h2 {font-size: 2rem;}

.cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(22.75rem, 1fr)); gap: 2rem;}
.cards > li {list-style: none;}
.cards > li .rotate-card {position: relative; perspective: 1000px;}
.cards > li .back { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #ebebeb; padding: 2rem; display: flex; line-height: 1.5; flex-direction: column; justify-content: center; opacity: 0; transform: rotateY(180deg); backface-visibility: hidden; transition: all 0.3s ease-in-out; text-align: center; font-size: 0.97rem; border-radius: 0.5rem;}
.cards > li .back h2 {margin-top: 0!important;}
.cards > li .front {transition: all 0.3s ease-in-out; backface-visibility: hidden; transform-style: preserve-3d;}
.cards > li:hover .back {opacity: 1; transform: rotateY(0);}
.cards > li:hover .front {opacity: 0; transform: rotateY(-180deg);}

.cards.people {margin-left: 0; margin-top: 2.5rem;}
.cards.people li {list-style: none;}
.cards.people li h2 {margin-block: 0.75rem 0.25rem; font-size: 1.05rem; font-weight: 700;}
.cards.people li > h3 {margin-bottom: 0; font-size: 0.97rem; font-weight: 400;}

.references {margin-top: 3rem;}
.reference {padding-block: 2rem; margin: 0!important; position: relative; padding-left: 5rem;}
.reference::before {
    content: '';
    position: absolute;
    top: 2.25rem;
    left: 0;
    width: 1.75rem;
    height: 1.75rem;
    background: url('/img/quote.svg') no-repeat center / contain;
}
.reference + .reference {border-top: 1px solid rgba(0, 0, 0, 0.15);}
.reference h2 {margin-bottom: 1rem; color: #1871bb;}

header {
    box-shadow: -1px -2px 9px 1px rgba(0, 0, 0, 0.1);
    width: 18rem;
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    max-height: 100vh;
    position: sticky;
    top: 0;
    z-index: 2;
    overflow-y: auto;
    background: white;
}
header #logo + nav {margin-top: 4rem;}
header nav {margin-left: 1rem;}
header nav ul li {list-style: none;}
header nav ul li a {text-decoration: none; color: black; font-weight: 600; padding-block: 0.5rem; display: block; font-size: 1rem; transition: color 0.2s ease-in-out; font-family: 'Raleway', sans-serif;}
header nav ul li ul {max-height: 0; overflow: hidden; transition: max-height 0.25s linear; transition-delay: 0.5s;}
header nav ul li ul li:last-child {padding-bottom: 1rem;}
header nav ul li ul li a {padding-block: 0.15rem; font-weight: 400; color: #777;}
header nav ul li > a:hover, 
header nav ul li.active > a, 
header nav ul li.open > a  {color: #1871bb;}
header nav ul li.open ul, header nav ul li:hover ul, header nav ul li.active ul {max-height: 5rem;}
header nav ul li li > a:hover, 
header nav ul li li.active > a, 
header nav ul li li.open > a {color: #0160ae;}
header nav ul li.has-children {padding-right: 0.5rem;}
header nav ul li.has-children > a::after {position: absolute; content: '▼'; margin: 1.1em 0 0 0.7em; font-size: 0.4rem; display: inline-block;}

header .copyright {font-size: 0.85rem; margin-top: 4rem; text-transform: uppercase; font-weight: 300; text-align: center;}

header button {
    display: none;
    min-width: 2rem;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    bottom: 0.05rem;
}
header button span {
    display: block;
    height: 2px;
    background: #1871bb;
    transition: all 0.1s ease-in-out;
    position: absolute;
    width: 100%;
}
body header button span:nth-child(1) {top: 0;}
body header button span:nth-child(2) {top: 50%; transform: translateY(-1px);}
body header button span:nth-child(3) {top: 100%; transform: translateY(-2px);}
body.menuopen header button span:nth-child(1) {transform: rotate(45deg); top: 50%;}
body.menuopen header button span:nth-child(2) {opacity: 0; top: 50%;}
body.menuopen header button span:nth-child(3) {transform: rotate(-45deg); top: 50%;}

main {flex-grow: 1; overflow-y: auto; background-color: #f8f8f8; font-size: 0.97rem;}

.revealchildren > * {opacity: 0; transition: all 0.5s ease-in-out;}
.revealchildren > *.inview {opacity: 100%;}
body.scrolled .revealchildren > * {transform: translateY(3rem);}
body.scrolled .revealchildren > *.inview {opacity: 100%; transform: translateY(0rem);}




section {padding-block: 7rem 9rem; position: relative; transform: none!important;}
section + section:not(:last-child) {padding-bottom: 5rem;}
section.home {padding: 0;}
section.home > a {display: block; width: 100%;}
section.home > a > img {object-fit: cover; height: 95vw; max-height: 100vh; width: 100%; opacity: 0;}

.prose > * + * {margin-top: 1.5rem;}
.prose > h2 + * {margin-top: 0.75rem;}
.prose a {color: inherit; text-decoration: underline; color: #0160ae; text-underline-offset: 0.15rem; text-decoration-color: rgba(24, 113, 187, 0.7);}
.prose > ul {margin-left: 1.25rem;}
.prose > ul li {list-style: circle; padding-block: 0.25rem; line-height: 1.5;}
.prose p img + em {display: block; margin-top: 0.5rem;}
.prose hr + p, .prose hr + p + hr {margin-top: 0.6rem;}
.prose hr + p {color: #1871bb;}


.columns {display: grid; gap: 4rem;}
.columns.smallgap {gap: 2rem;}
.columns.two {grid-template-columns: repeat(2, 1fr);}
.columns.three {grid-template-columns: repeat(3, 1fr);}

.contact-column {padding-block: 2.5rem;}
.contact-column form {margin-top: -0.5rem;}
.contact-column > div {margin-bottom: 2rem;}
.contact-column .icon {width: 3.5rem; float: left; margin-right: 3rem; margin-bottom: 1rem;}
.contact-column a {text-decoration: none; color: inherit;}

.box-column {padding-block: 0.75rem;}
.box-column > img {margin-bottom: 1.75rem;}

.professional-column {padding-block: 2rem 1rem;}
.professional-column h3 {color: #1871bb;}

form {display: flex; flex-direction: column; gap: 1rem; max-width: 40rem;}
form > div {display: flex; flex-direction: column; gap: 0.1rem;}
form > div input, form > div textarea {
    font-size: 1rem;
    padding: 0.5rem 0.5rem; 
    border: 1px solid #ccc; 
    transition: border-color 0.2s ease-in-out;
    line-height: 1.4;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}
form > div textarea {resize: vertical;}
form button {
    background: #1871bb; 
    color: white; 
    border: 0.16rem solid #1871bb; 
    padding: 0.75rem 1.5rem; 
    font-size: 0.9rem; 
    font-family: 'Raleway', sans-serif; 
    font-weight: 600; 
    text-transform: uppercase; 
    cursor: pointer; 
    align-self: flex-start;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;

}
form button:hover {color: #0160ae; background: transparent; border-color: rgba(1, 96, 174, 0.7);}
address {font-style: normal;}
hr {height: 1px; border: 0; background: rgba(0, 0, 0, 0.2);}


@media (max-width: 1300px) {
    html {scroll-padding-top: 5.25rem;}
    body {flex-direction: column;}
    .container {padding-inline: 2rem; max-width: 100%;}
    header {width: 100%; max-height: none; position: sticky; flex-direction: row; padding: 0.75rem 2rem; gap: 2rem; align-items: center;}
    header > div {display: flex; flex-direction: row; justify-content: space-between; width: 100%; align-items: center; position: relative; bottom: 0.05rem;}
    header #logo {max-width: 8rem; display: block; position: relative; bottom: 0.15rem;}
    header #logo + nav {margin-top: 0;}
    header {min-height: 5.32rem;}
    header .copyright {
        display: block; 
        margin: 0; 
        width: auto;
        position: fixed;
        right: 2rem; 
        bottom: 1.5rem;
        pointer-events: none; 
        opacity: 0;
        transition-delay: 0s;
    }
    body.menuopen header .copyright {
        opacity: 1; 
        pointer-events: auto;
        transition: opacity 0.25s ease-in-out; 
        transition-delay: 0.25s;
    }
    section {padding-block: 5rem 7rem;}
    section + section:not(:last-child) {padding-bottom: 2rem;}
    header nav {
        opacity: 1;
        display: block; 
        position: fixed; 
        top: 5.2rem; 
        left: 0; 
        width: 100%; 
        background: white; 
        padding: 0 3rem; 
        height: calc(100vh - 5.2rem);
        margin: 0;
        transition: all 0.2s ease-in-out;
        height: 0;
        overflow: hidden;
    }
    header button {display: block;}
    body.menuopen header nav {
        opacity: 1;
        height: calc(100vh - 5.2rem);
    }
    body header nav ul {flex-direction: column; gap: 0;}
    body header nav > ul {margin-block: 2rem;}
    body header nav ul ul {position: relative; margin-top: 0; max-height: 5rem!important;}
    body header nav ul li.has-children a::after {content: none;}
}
@media (max-width: 900px) {
    .columns {grid-template-columns: 1fr!important; gap: 2rem;}
    .contact-column {padding-block: 1.5rem 0;}
    .contact-column + .contact-column {padding-top: 1rem;}
    .contact-column > div {margin-bottom: 1rem;}
    .professional-column {padding-block: 1.5rem 0;}
    .professional-column + .professional-column {padding-top: 0.25rem;}
    .professional-column:last-child {padding-bottom: 1rem;}
    .box-column {padding-bottom: 0;}
    .box-column > img {margin-bottom: 1.25rem;}
    .revealchildren > * {opacity: 1!important;}
}
@media (max-width: 600px) {
    .reference {padding-left: 0rem; padding-top: 4.5rem;}
}
@media (max-width: 450px) {
    .contact-column .icon {margin-right: 2rem;}
    .cards {grid-template-columns: 1fr!important;}
    .cards > li .back {font-size: 3.4vw;}
}