/* Edit these tokens to change the starter's visual identity. */
:root {
    color-scheme: light;
    --ink: #24313b;
    --muted: #58616a;
    --paper: #fff;
    --soft: #f5f6f7;
    --line: #dde0e3;
    --brand: #d4521d;
    --accent: #ffcb79;
    --max-width: 1160px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .23em; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid #ae4013; outline-offset: 5px; border-radius: 2px; }
::selection { color: var(--ink); background: var(--accent); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.045em; font-weight: 600; }
h1 { font-size: clamp(3.4rem, 7.5vw, 6.8rem); margin-bottom: 1.7rem; overflow-wrap: anywhere; }
h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 1.5rem; }
h3 { font-size: 1.45rem; letter-spacing: -.025em; line-height: 1.25; }
p { margin-bottom: 1.2rem; }
.wrap { width: min(var(--max-width), calc(100% - 6rem)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 10; top: .5rem; left: .5rem; padding: .8rem 1.3rem; background: var(--accent); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.draft-notice { background: #f3f4f5; color: #58616a; text-align: center; font-size: .875rem; padding: .5rem 1.5rem; }
.site-header { display: flex; justify-content: space-between; align-items: center; min-height: 108px; gap: 2rem; border-bottom: 1px solid var(--line); }
.wordmark { font-size: 2rem; font-weight: 750; letter-spacing: -.065em; text-decoration: none; line-height: 1; }
.wordmark img { display: block; width: 192px; height: auto; }
nav { display: flex; align-items: center; gap: 1.65rem; }
nav a { font-size: .9375rem; text-decoration: none; padding-block: .65rem; }
nav a:hover, nav a[aria-current="page"] { color: var(--brand); text-decoration: underline; }
nav .nav-contact { display: flex; align-items: center; gap: 1.5rem; padding: .55rem 1.05rem; border: 1px solid var(--line); border-radius: 4px; }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 4rem; padding-block: 4.5rem 5rem; }
.hero h1 { font-size: clamp(3rem, 4.6vw, 4.6rem); letter-spacing: -.055em; line-height: 1.07; }
.hero-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: .85rem; font-size: .875rem; font-weight: 600; margin-bottom: 1.8rem; }
.accent-line { width: 2rem; height: 3px; background: var(--brand); flex-shrink: 0; }
.lead { font-size: 1.125rem; color: var(--muted); max-width: 38rem; line-height: 1.8; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; padding: .85rem 1.25rem; margin-top: 1rem; background: var(--brand); color: white; border: 1px solid var(--brand); border-radius: 4px; font-weight: 600; text-decoration: none; }
.button:hover { background: #88320f; }
.hero-photo { margin: 0; border-bottom: 4px solid #e88220; background: var(--soft); }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1.12; object-fit: cover; }
.hero-photo figcaption { padding: 1rem 1.2rem; font-size: .875rem; color: var(--muted); }
.text-link { display: inline-block; margin-top: 1.25rem; font-size: .9375rem; font-weight: 600; color: var(--brand); }
.text-link span { margin-left: .4rem; }
.section { padding-block: 5rem; scroll-margin-top: 2rem; }
.about { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6rem; border-top: 1px solid var(--line); }
.section-number { color: var(--brand); font-size: .875rem; font-variant-numeric: tabular-nums; }
.section-heading .eyebrow { margin-bottom: 1.2rem; }
.about-copy { padding-top: 2.7rem; font-size: 1.125rem; color: var(--muted); }
.about-copy p:last-child { margin-bottom: 0; }
.services-section { background: var(--soft); scroll-margin-top: 2rem; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 2rem; margin-top: 3rem; }
.service { border-top: 1px solid #d0d4d8; padding-top: 1.2rem; }
.service-index { display: flex; justify-content: space-between; color: var(--muted); font-size: .875rem; margin-bottom: 3rem; }
.service-index > span { font-size: 1.25rem; }
.service p { color: var(--muted); margin-bottom: 0; }
.contact-section { background: #24313b; color: white; scroll-margin-top: 2rem; border-top: 4px solid #e88220; }
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; }
.contact-section .eyebrow, .contact-section .section-number { color: var(--accent); }
.contact-section h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); }
.contact-intro { color: #d4dce2; max-width: 30rem; }
.contact-details { align-self: center; display: grid; gap: 1.8rem; min-width: 0; }
.contact-label { font-size: .875rem; color: #c4cdd4; margin-bottom: .35rem; }
.contact-link { font-size: clamp(1.15rem, 2vw, 1.6rem); text-decoration: none; overflow-wrap: anywhere; }
.contact-link:hover { color: var(--accent); text-decoration: underline; }
.contact-link span { margin-left: .6rem; color: var(--accent); }
.contact-section a:focus-visible { outline-color: var(--accent); }
address { font-style: normal; }
address span { display: block; }
.contact-placeholder { border-top: 1px solid #527570; padding-top: 1.3rem; color: #d0dfda; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 2rem; color: var(--muted); font-size: .875rem; }
.site-footer a { padding-block: .5rem; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.company-number { display: block; }
.footer-links { flex-wrap: wrap; padding-block: 2rem 0; gap: .5rem 1.8rem; }
.footer-links a { font-size: .875rem; }
.page-heading { padding-block: 3.5rem 3rem; border-bottom: 1px solid var(--line); }
.page-heading h1 { max-width: 900px; font-size: clamp(2.8rem, 5vw, 4.5rem); }
.page-heading .lead { max-width: 48rem; margin-bottom: 0; }
.breadcrumb { display: inline-block; margin-bottom: 2rem; font-size: .875rem; text-decoration: none; color: var(--muted); }
.breadcrumb span { padding-left: 1rem; color: var(--brand); }
.page-content { padding-block: 3.5rem 5rem; }
.page-sections { max-width: 780px; }
.page-sections.with-section-photos { max-width: none; }
.with-section-photos > .content-section:not(.with-photo) { max-width: 780px; }
.page-content.with-image { display: grid; grid-template-columns: .75fr 1.25fr; gap: 4rem; align-items: start; }
.page-image { margin: 0; }
.page-image img { display: block; width: 100%; height: auto; border-radius: 4px; }
.content-section { margin-bottom: 2.8rem; scroll-margin-top: 2rem; }
.content-section:last-child { margin-bottom: 0; }
.content-section h2 { font-size: clamp(1.65rem, 2.7vw, 2.15rem); letter-spacing: -.03em; }
.content-section p, .content-section li { color: var(--muted); font-size: 1.0625rem; }
.content-section ul { padding-left: 1.2rem; }
.content-section li { padding-left: .3rem; margin-bottom: .5rem; }
.content-section li::marker { color: var(--brand); }
.content-section.with-photo { display: grid; grid-template-columns: minmax(0, 1fr) 28%; grid-template-areas: "copy photo"; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); padding-block: 2.5rem; margin-bottom: 2.5rem; border-top: 1px solid var(--line); }
.content-section.photo-left { grid-template-columns: 28% minmax(0, 1fr); grid-template-areas: "photo copy"; }
.section-copy { grid-area: copy; min-width: 0; }
.section-copy > :last-child { margin-bottom: 0; }
.section-photo { grid-area: photo; display: block; }
.section-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.gallery-section { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.gallery-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.gallery-heading h2 { margin-bottom: 0; }
.gallery-help { max-width: 28rem; margin-bottom: .25rem; color: var(--muted); font-size: .9375rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .75rem; }
.gallery-item { display: block; padding: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.gallery-item:hover { border-color: var(--brand); }
.gallery-item:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.lightbox { width: min(calc(min(70vh, 640px) + 2.5rem), calc(100% - 2rem)); max-width: none; padding: 0; border: 0; border-radius: 3px; background: var(--paper); color: var(--ink); box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 35%); }
.lightbox::backdrop { background: rgb(20 28 35 / 78%); }
.lightbox-inner { padding: 1rem 1.25rem 1.25rem; }
.lightbox-toolbar, .lightbox-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lightbox-count { margin: 0; color: var(--muted); font-size: .875rem; }
.lightbox-close, .lightbox-controls button { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.lightbox-close:hover, .lightbox-controls button:hover { border-color: var(--brand); color: var(--brand); }
.lightbox-close span { margin-left: .6rem; font-size: 1.35rem; line-height: .7; vertical-align: -.1em; }
.lightbox figure { margin: 1rem 0; }
.lightbox figure img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: transparent; }
.lightbox figcaption { padding-top: .75rem; min-height: 1.5em; box-sizing: content-box; color: var(--muted); font-size: .9375rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox-controls button:disabled { opacity: .45; cursor: default; }
.not-found { min-height: 62vh; padding-block: 6rem; }
.not-found h1 { font-size: clamp(3rem, 6vw, 5rem); }
@media (min-width: 1600px) { .hero { padding-block: 5rem; } }
@media (max-width: 900px) {
    .wrap { width: calc(100% - 3rem); }
    .site-header { flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem; }
    nav { flex-wrap: wrap; gap: .5rem 1.5rem; }
    .hero { gap: 2.5rem; padding-block: 4rem; }
    .about { gap: 3rem; }
    .page-content.with-image { gap: 2rem; }
    .gallery-heading { display: block; }
    .gallery-help { margin-top: 1rem; }
    .gallery-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .contact-grid { gap: 3rem; }
}
@media (max-width: 640px) {
    .wrap { width: calc(100% - 2.5rem); }
    .draft-notice { font-size: .8125rem; }
    .site-header { flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem; }
    .wordmark img { width: 175px; }
    nav { gap: 1rem; flex-wrap: wrap; }
    nav a { font-size: .875rem; }
    nav .nav-contact { border: 0; padding-inline: 0; gap: .35rem; }
    .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3rem; }
    .hero h1 { font-size: clamp(2.8rem, 11vw, 3.6rem); }
    .hero-photo img { aspect-ratio: 1.3; }
    .page-content.with-image { grid-template-columns: 1fr; gap: 2.5rem; }
    .page-image { max-width: 360px; }
    .content-section.with-photo { grid-template-columns: 1fr; grid-template-areas: "copy" "photo"; gap: 1.5rem; padding-block: 2rem 0; }
    .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
    .gallery-section { margin-top: 2.5rem; padding-top: 2rem; }
    .page-heading { padding-block: 2.5rem; }
    .page-content { padding-block: 2.5rem 3rem; }
    .section { padding-block: 3rem; }
    .about, .contact-grid { grid-template-columns: 1fr; gap: 1rem; }
    .about-copy { padding-top: 0; }
    .service-grid { gap: 2rem; margin-top: 2rem; }
    .service-index { margin-bottom: 1.5rem; }
    .contact-details { margin-top: 1rem; }
    .site-footer { align-items: flex-start; flex-wrap: wrap; gap: .75rem; }
    .not-found { padding-block: 4rem; }
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    .button, .contact-link { transition: background-color .15s ease, color .15s ease; }
}
@media print {
    .draft-notice, nav, .hero-photo, .button, .skip-link, .site-footer > a { display: none; }
    .wrap { width: 100%; }
    .hero, .about, .contact-grid { display: block; padding: 1rem 0; }
    .section { padding: 1rem 0; }
    .contact-section { background: white; color: black; }
    .contact-section p, .contact-section .eyebrow, .contact-section .section-number { color: black; }
}

/* Subheadings inside a content section (team roles, sub-topics) */
.section-copy h3 { font-size: 1.1rem; letter-spacing: -.01em; margin: 1.75rem 0 .6rem; }
.section-copy h2 + h3 { margin-top: -.25rem; color: var(--muted); font-weight: 500; font-size: 1rem; }

/* Never split the company name over two lines */
.nobr { white-space: nowrap; }

/* Team page: portrait starts level with the name */
#joris-zwaenepoel { align-items: start; }
#joris-zwaenepoel .section-photo { margin-top: .35rem; }