/* Business bevat alleen themavariabelen en unieke layouts bovenop base.css/components.css. */
:root {
    --color-primary: #19324d;
    --color-secondary: #365d7d;
    --color-accent: #c7953e;
    --color-text: #25313c;
    --color-text-light: #64717d;
    --color-background: #fff;
    --color-background-alt: #f3f6f8;
    --color-border: #dce2e7;
    --font-body: Arial, sans-serif;
    --font-heading: Georgia, serif;
    --border-radius: .25rem
}

.eyebrow {
    margin-bottom: .65rem;
    color: var(--color-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}

.lead {
    max-width: 42rem;
    color: var(--color-text-light);
    font-size: 1.15rem
}

.section-number,
.page-code {
    color: var(--color-accent);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em
}

.text-link {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--color-accent);
    font-weight: 700;
    text-decoration: none
}

.button-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap
}

.button--light {
    background: #fff;
    color: var(--color-primary)
}

.button--light:hover {
    background: var(--color-accent)
}

.site-header {
    background: #fff
}

.site-header__inner {
    min-height: 5.4rem
}

.site-logo {
    display: grid;
    flex: 0 0 auto;
    margin: 0;
    text-align: left;
    line-height: 1
}

.site-logo span {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .11em
}

.site-logo small {
    margin-top: .35rem;
    color: var(--color-text-light);
    font-family: Arial, sans-serif;
    font-size: .58rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase
}

.main-nav {
    flex: 1;
    margin: 0 0 0 clamp(2rem, 8vw, 8rem)
}

.main-nav ul {
    justify-content: flex-end;
    gap: clamp(1rem, 3vw, 2.6rem)
}

.main-nav a {
    font-size: .82rem;
    font-weight: 600
}

.main-nav a[aria-current=page] {
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--color-accent)
}

.business-hero {
    padding-block: 0;
    background: linear-gradient(90deg, var(--color-background-alt) 0 65%, var(--color-primary) 65%)
}

.business-hero__grid {
    display: grid;
    grid-template-columns: 1fr 17rem;
    min-height: 39rem
}

.business-hero__copy {
    align-self: center;
    padding: 5rem clamp(2rem, 8vw, 7rem) 5rem 0
}

.business-hero h1 {
    max-width: 16ch;
    margin-bottom: 1.5rem;
    font-size: clamp(3rem, 6vw, 5.3rem);
    line-height: 1.03
}

.business-hero__facts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 2rem;
    color: #fff
}

.business-hero__facts div {
    display: grid;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgb(255 255 255 / 20%)
}

.business-hero__facts strong {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 400
}

.business-hero__facts span {
    color: rgb(255 255 255 / 70%);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase
}

.trust-bar {
    padding-block: 1.2rem;
    border-block: 1px solid var(--color-border)
}

.trust-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem
}

.trust-bar span {
    color: var(--color-text-light);
    font-size: .68rem;
    text-transform: uppercase
}

.trust-bar p {
    margin: 0;
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-weight: 700
}

.business-intro__grid {
    display: grid;
    grid-template-columns: .35fr 1fr .65fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start
}

.business-intro h2 {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3.5rem)
}

.business-intro__grid>div:last-child {
    padding-left: 1.5rem;
    border-left: 2px solid var(--color-accent)
}

.service-ledger {
    background: var(--color-background-alt)
}

.section-heading-line {
    display: grid;
    grid-template-columns: .35fr 1fr;
    gap: 2rem;
    align-items: end;
    margin-bottom: 2.5rem
}

.section-heading-line h2 {
    margin: 0
}

.service-ledger__list {
    border-top: 2px solid var(--color-primary)
}

.service-ledger__list>a {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    gap: 2rem;
    align-items: center;
    padding: 1.6rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: inherit;
    text-decoration: none
}

.service-ledger__list>a:hover {
    background: #fff
}

.service-ledger__list>a>span {
    color: var(--color-accent);
    font-weight: 700
}

.service-ledger h3 {
    margin-bottom: .3rem;
    font-size: 1.5rem
}

.service-ledger__list p {
    margin: 0;
    color: var(--color-text-light)
}

.service-ledger__list b {
    font-size: 1.3rem
}

.case-highlight__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center
}

.case-highlight__image {
    position: relative
}

.case-highlight__image img {
    width: 100%;
    height: 34rem;
    object-fit: cover
}

.case-highlight__image span {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .8rem 1rem;
    background: var(--color-primary);
    color: #fff;
    font-size: .7rem;
    letter-spacing: .12em
}

.case-highlight h2 {
    font-size: clamp(2rem, 4vw, 3.2rem)
}

.case-highlight dl {
    margin: 2rem 0
}

.case-highlight dl div,
.artist-facts div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--color-border)
}

.case-highlight dt {
    color: var(--color-text-light)
}

.case-highlight dd {
    margin: 0;
    font-weight: 700;
    text-align: right
}

.business-cta {
    background: var(--color-primary);
    color: #fff
}

.business-cta .container {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: end
}

.business-cta h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3.5rem)
}

.page-header {
    padding-block: var(--spacing-xl);
    background: var(--color-background-alt);
    border-bottom: 1px solid var(--color-border)
}

.page-header__grid {
    display: grid;
    grid-template-columns: .3fr 1fr;
    gap: 3rem
}

.page-header h1 {
    max-width: 23ch;
    margin-bottom: 1.2rem;
    font-size: clamp(3rem, 6vw, 5rem)
}

.page-header__grid>div>p {
    max-width: 45rem;
    color: var(--color-text-light);
    font-size: 1.1rem
}

.company-story__grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center
}

.company-story h2 {
    font-size: clamp(2.2rem, 4vw, 3.5rem)
}

.company-story figure {
    margin: 0
}

.company-story figure img {
    width: 100%;
    height: 35rem;
    object-fit: cover
}

.company-story figcaption {
    padding-top: .6rem;
    color: var(--color-text-light);
    font-size: .72rem;
    text-align: right;
    text-transform: uppercase
}

.mission-grid {
    background: var(--color-primary);
    color: #fff
}

.mission-grid .container {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.mission-grid article {
    padding: 1rem 3rem 1rem 0;
    border-right: 1px solid rgb(255 255 255 / 20%)
}

.mission-grid article+article {
    padding: 1rem 0 1rem 3rem;
    border: 0
}

.mission-grid span {
    color: var(--color-accent);
    font-size: .7rem;
    letter-spacing: .14em
}

.mission-grid h2 {
    margin: 1.2rem 0 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 400
}

.values-table__rows {
    border-top: 2px solid var(--color-primary)
}

.values-table article {
    display: grid;
    grid-template-columns: 4rem .55fr 1fr;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border)
}

.values-table article>span {
    color: var(--color-accent);
    font-weight: 700
}

.values-table h3 {
    margin: 0
}

.values-table p {
    margin: 0;
    color: var(--color-text-light)
}

.team-section {
    background: var(--color-background-alt)
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem
}

.team-card {
    width: auto;
    padding: 0;
    border: 1px solid var(--color-border);
    background: #fff
}

.profile {
    height: 20rem;
    overflow: hidden;
    background: #e8edf1
}

.profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.65)
}

.role {
    padding: 1.5rem
}

.role>span {
    color: var(--color-accent);
    font-size: .7rem
}

.role h3 {
    margin: .5rem 0 .2rem;
    font-size: 1.35rem
}

.role p:nth-of-type(1) {
    color: var(--color-secondary);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase
}

.role p:nth-of-type(2) {
    color: var(--color-text-light)
}

.role a {
    font-size: .82rem;
    font-weight: 700
}

.services-overview__grid {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start
}

.services-overview aside {
    position: sticky;
    top: 2rem;
    padding-right: 2rem;
    border-right: 1px solid var(--color-border)
}

.services-overview aside nav {
    display: grid;
    margin-top: 2rem;
    border-top: 1px solid var(--color-border)
}

.services-overview aside nav a {
    padding: .8rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: .82rem;
    text-decoration: none
}

.services-overview__content>article {
    padding: 0 0 4rem;
    margin-bottom: 4rem;
    border-bottom: 1px solid var(--color-border)
}

.services-overview__content>article:last-child {
    margin: 0
}

.service-title {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 1rem
}

.service-title>span {
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: 1.8rem
}

.service-title h2 {
    font-size: clamp(2.2rem, 4vw, 3.4rem)
}

.service-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--color-background-alt)
}

.service-columns h3 {
    font-size: 1rem
}

.service-columns ul {
    margin: 0
}

.work-method {
    background: var(--color-background-alt)
}

.work-method ol {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--color-primary)
}

.work-method li {
    padding: 1.5rem;
    border-right: 1px solid var(--color-border)
}

.work-method li:last-child {
    border: 0
}

.work-method li>span {
    display: block;
    margin-bottom: 2rem;
    color: var(--color-accent);
    font-weight: 700
}

.work-method h3 {
    font-size: 1.2rem
}

.work-method p {
    margin: 0;
    color: var(--color-text-light)
}

.case-index {
    padding-bottom: 0
}

.case-row {
    display: grid;
    grid-template-columns: 7rem 1fr 1fr;
    gap: 3rem;
    align-items: stretch;
    padding: 0 0 4rem;
    margin-bottom: 4rem;
    border-bottom: 1px solid var(--color-border)
}

.case-row__meta {
    font-size: .72rem
}

.case-row__meta span {
    color: var(--color-accent);
    font-weight: 700
}

.case-row__meta p {
    margin: .8rem 0 0;
    color: var(--color-text-light)
}

.case-row>img {
    width: 100%;
    height: 30rem;
    object-fit: cover
}

.case-row__copy {
    align-self: center
}

.case-row__copy h2 {
    font-size: clamp(2rem, 4vw, 3.1rem)
}

.case-row__copy dl {
    margin-top: 2rem
}

.case-row__copy dl div {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--color-border)
}

.case-row__copy dt {
    color: var(--color-text-light)
}

.case-row__copy dd {
    margin: 0
}

.case-row--reverse img {
    grid-column: 3;
    grid-row: 1
}

.case-row--reverse .case-row__copy {
    grid-column: 2;
    grid-row: 1
}

.results-band {
    padding-block: 2rem;
    background: var(--color-secondary);
    color: #fff
}

.results-band .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.results-band .container>div {
    display: grid;
    padding: 1rem 2rem;
    border-right: 1px solid rgb(255 255 255 / 25%)
}

.results-band .container>div:last-child {
    border: 0
}

.results-band strong {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 400
}

.results-band span {
    color: rgb(255 255 255 / 70%);
    font-size: .7rem;
    text-transform: uppercase
}

.contact-header {
    background: var(--color-primary);
    color: #fff
}

.contact-header__grid {
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 5rem;
    align-items: end
}

.contact-header h1 {
    margin: .7rem 0;
    color: #fff;
    font-size: clamp(3rem, 6vw, 5rem)
}

.contact-header__grid>div>p:last-child {
    max-width: 40rem;
    color: rgb(255 255 255 / 72%)
}

.contact-header aside {
    padding: 2rem;
    border: 1px solid rgb(255 255 255 / 20%);
    border-top: 3px solid var(--color-accent)
}

.contact-header aside a {
    display: block;
    padding: .7rem 0;
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    text-decoration: none
}

.contact-information__grid {
    display: grid;
    grid-template-columns: 1fr .7fr 1fr;
    gap: 3rem
}

.contact-information__intro {
    padding-right: 2rem
}

.contact-information address,
.contact-company {
    padding: 1.5rem;
    border-left: 1px solid var(--color-border)
}

.contact-information address>span,
.contact-company>span {
    color: var(--color-accent);
    font-weight: 700
}

.contact-information h3 {
    margin-top: 2rem
}

.contact-company dl div {
    padding: .5rem 0;
    border-bottom: 1px solid var(--color-border)
}

.contact-company dt {
    color: var(--color-text-light);
    font-size: .75rem
}

.contact-company dd {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere
}

.hours-route {
    background: var(--color-background-alt)
}

.hours-route__grid {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 4rem
}

.office-hours {
    padding: 2rem;
    background: #fff;
    border-top: 3px solid var(--color-accent)
}

.office-hours dl div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--color-border)
}

.office-hours dd {
    margin: 0;
    text-align: right
}

.note {
    margin: 1.5rem 0 0;
    color: var(--color-text-light);
    font-size: .85rem
}

.route-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center
}

.map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 26rem;
    background: linear-gradient(35deg, transparent 48%, rgb(255 255 255 / 65%) 49% 51%, transparent 52%), #d9e0e5;
    background-size: 6rem 6rem;
    text-align: center
}

.map-placeholder span {
    padding: .7rem 1rem;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700
}

.map-placeholder small {
    padding: .4rem .7rem;
    background: #fff
}

.contact-prep {
    padding-block: 2rem;
    border-top: 1px solid var(--color-border)
}

.contact-prep .container {
    display: flex;
    align-items: center;
    gap: 3rem
}

.contact-prep h2 {
    margin: 0;
    font-size: 1.4rem
}

.contact-prep ul {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none
}

.contact-prep li::before {
    content: "✓ ";
    color: var(--color-accent);
    font-weight: 700
}

.site-footer {
    background: #10263b;
    font-size: .82rem;
    text-align: left
}

.site-footer .item {
    padding-inline: 2rem;
    border-right: 1px solid rgb(255 255 255 / 16%)
}

.site-footer .item:last-child {
    border: 0
}

@media(max-width:900px) {
    .business-intro__grid {
        grid-template-columns: .25fr 1fr
    }

    .business-intro__grid>div:last-child {
        grid-column: 2
    }

    .case-highlight__grid,
    .company-story__grid,
    .contact-header__grid {
        grid-template-columns: 1fr
    }

    .team-grid {
        grid-template-columns: 1fr 1fr
    }

    .services-overview__grid {
        grid-template-columns: 1fr
    }

    .services-overview aside {
        position: static;
        border: 0
    }

    .work-method ol {
        grid-template-columns: 1fr 1fr
    }

    .case-row {
        grid-template-columns: 5rem 1fr
    }

    .case-row>img {
        grid-column: 2
    }

    .case-row__copy {
        grid-column: 2
    }

    .case-row--reverse img,
    .case-row--reverse .case-row__copy {
        grid-column: 2;
        grid-row: auto
    }

    .contact-information__grid {
        grid-template-columns: 1fr 1fr
    }

    .contact-information__intro {
        grid-column: 1/-1
    }

    .hours-route__grid {
        grid-template-columns: 1fr
    }

    .contact-prep .container,
    .contact-prep ul {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem
    }
}

@media(max-width:768px) {

    .site-logo,
    .main-nav {
        margin: 0
    }

    .business-hero {
        background: var(--color-background-alt)
    }

    .business-hero__grid {
        grid-template-columns: 1fr
    }

    .business-hero__copy {
        padding: 4rem 0
    }

    .business-hero__facts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
        background: var(--color-primary)
    }

    .business-hero__facts div {
        padding: 1.2rem
    }

    .trust-bar .container {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .page-header__grid,
    .section-heading-line,
    .mission-grid .container,
    .values-table article,
    .contact-information__grid {
        grid-template-columns: 1fr
    }

    .mission-grid article,
    .mission-grid article+article {
        padding: 2rem 0;
        border-right: 0;
        border-bottom: 1px solid rgb(255 255 255 / 20%)
    }

    .team-grid {
        grid-template-columns: 1fr
    }

    .service-columns,
    .route-card {
        grid-template-columns: 1fr
    }

    .case-row {
        display: block
    }

    .case-row__meta {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem
    }

    .case-row>img {
        height: 24rem;
        margin-bottom: 2rem
    }

    .results-band .container {
        grid-template-columns: 1fr
    }

    .results-band .container>div {
        border-right: 0;
        border-bottom: 1px solid rgb(255 255 255 / 25%)
    }

    .business-cta .container {
        grid-template-columns: 1fr
    }

    .site-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem
    }

    .site-footer .item {
        padding: 0;
        border: 0
    }
}

@media(max-width:520px) {

    .business-hero h1,
    .page-header h1,
    .contact-header h1 {
        font-size: 2.8rem
    }

    .business-hero__facts {
        grid-template-columns: 1fr
    }

    .business-intro__grid {
        display: block
    }

    .business-intro__grid>div:last-child {
        margin-top: 2rem
    }

    .service-ledger__list>a {
        grid-template-columns: 2.5rem 1fr
    }

    .service-ledger__list b {
        grid-column: 2
    }

    .work-method ol {
        grid-template-columns: 1fr
    }

    .contact-header aside a {
        font-size: 1.05rem
    }

    .office-hours dl div {
        align-items: flex-start;
        flex-direction: column;
        gap: .1rem
    }

    .office-hours dd {
        text-align: left
    }
}