/* =============================================
   MODUS DIGITAL - SECTIONS
   Page sections: testimonial, USP, CTA, footer, etc.
   ============================================= */

/* ----------------------------------------
   Base section padding
   Every <section> gets symmetric vertical padding via
   --md-section-pad-y (clamp 56→120px). Sections with their
   own explicit padding rules (text-and-image, vacancies,
   features, md-cta-primary, etc.) override this. Bare
   <section class="..."> elements (Meer-cases on case pages,
   md-video-section, etc.) pick up the token-based default.
   ---------------------------------------- */
section {
    padding-top: var(--md-section-pad-y);
    padding-bottom: var(--md-section-pad-y);
}

/* ----------------------------------------
   USP Boxes
   ---------------------------------------- */
.usp-box-onhover .col-12:hover {
    box-shadow: 0 0 20px #ededed;
    transition: box-shadow ease-in-out 200ms;
}

.usp-box-onhover.hover-vertical .col-12 {
    border-radius: var(--md-radius-xl);
}

.usp-box-onhover.hover-horizontal .col-12:first-child {
    border-radius: var(--md-radius-xl) 0 0 var(--md-radius-xl);
    ;
}

.usp-box-onhover.hover-horizontal .col-12:last-child {
    border-radius: 0 var(--md-radius-xl) var(--md-radius-xl) 0;
}

.usp-box-onhover p {
    font-size: 14px;
}

/* ----------------------------------------
   Text and Image
   ---------------------------------------- */
section.text-and-image {
    padding-top: 140px;
    padding-bottom: 60px;
}

.text-and-image p {
    font-size: var(--md-font-size-lg);
    line-height: var(--md-line-height-normal);
    margin-bottom: var(--md-space-10);
}


.text-and-image ul {
    font-size: var(--md-font-size-lg);
    line-height: var(--md-line-height-normal);
    list-style: none;
}

/* ----------------------------------------
   Listing-page section roles
   For /cases, /blog, /vacatures listing templates. These pages have
   a tight three-section header (title → optional intro → content)
   where inter-section spacing is smaller than the default section
   rhythm. Replaces the inline pt-0 / pb-0 / pb-4 / pb-5 / pt-md-0
   Bootstrap utilities that used to live on each <section>.
   ---------------------------------------- */

/* Title-block section. Top padding comes from .md-top-page-padding;
   bottom collapses to 0 so the next section (intro on cases/blogs,
   content on vacatures) sits close. Separation between H1 and the
   next block is provided by .md-listing-title-row's margin-bottom. */
.md-listing-header {
    padding-bottom: 0;
}

/* Description / intro section. Layered on .text-and-image to preserve
   its larger paragraph + list typography while overriding the 140/60
   page-body padding for the tight listing-page rhythm. */
section.text-and-image.md-listing-intro {
    padding-top: 0;
    padding-bottom: var(--md-space-stack-md);  /* 24px */
}

/* Filter chips + entry grid section. Cancels the global section
   padding-top so the grid sits tight under the intro (cases/blogs)
   or directly under the title (vacatures). */
.md-listing-content {
    padding-top: 0;
    padding-bottom: var(--md-space-12);  /* 48px */
}

/* ----------------------------------------
   Cases Introduction
   ---------------------------------------- */
.md-cases-introduction p {
    font-size: var(--md-font-size-lg);
    line-height: var(--md-line-height-normal);
}

.md-cases-introduction h3 {
    margin-bottom: 29px;
}

/* ----------------------------------------
   Tags
   ---------------------------------------- */
section.tags {
    padding-bottom: 135px;
}

.md-tag {
    font-size: 22px;
    line-height: 25px;
    text-align: center;
    background-color: rgba(198, 198, 198, 0.32);
    border-radius: 27.5px;
    display: inline-block;
    padding: 13.5px 42px;
    margin-right: 16px;
    margin-bottom: 16px;
}

/* ----------------------------------------
   Testimonial (old)
   ---------------------------------------- */
.md-testimonial {
    background-color: var(--md-color-gray-150);
}
.md-testimonial .md-title-alt {
    color: var(--md-color-blue-deep);
    margin-bottom: 28px;
}
/* Quote title uses the heading color so the quoted phrase reads with
   the same weight as other headings on the page. Earlier this rule
   forced body color to make it read as prose — flipped per design
   ask 2026-06-16. */
.md-testimonial .h1,
.md-testimonial h1,
.md-testimonial h2,
.md-testimonial h3 {
    color: var(--md-color-text-heading);
}

/* ----------------------------------------
   Testimonial sections — shared vertical rhythm
   Applies to both .md-testimonial (quote_block) and
   .md-testimonial-section (image_and_quote).
   Padding lives inside the section (covered by its own bg);
   margin separates it from neighbouring sections.
   Note: when a testimonial sits between sections of different
   bg colours (e.g. white above, gray below), the margin shows
   the body bg as a stripe. The homepage override below absorbs
   the testimonial→blogs_block transition into the next section's
   padding-top so the stripe doesn't appear there. Permanent fix
   is the section-adjacency system parked in the backlog.
   ---------------------------------------- */
.md-testimonial,
.md-testimonial-section {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-top: 60px;
    margin-bottom: 60px;
}

@media (max-width: 991.98px) {
    .md-testimonial,
    .md-testimonial-section {
        padding-top: 60px;
        padding-bottom: 60px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (max-width: 575.98px) {
    .md-testimonial,
    .md-testimonial-section {
        padding-top: 40px;
        padding-bottom: 40px;
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* HOMEPAGE STRIPE WORKAROUND — temporary, until the section-adjacency
   system from the parked backlog item ships.
   On the homepage the testimonial section (dark or gray bg) is followed
   by the blogs_block bloq, which renders <section class="md-section-py">
   with a light-gray bg. The testimonial's margin-bottom would otherwise
   show the body bg as a white stripe between the two coloured sections.
   Fix: pull the next .md-section-py up with a negative margin-top equal
   to the testimonial's margin-bottom, and add the same value back as
   padding-top so content positions stay identical. Net effect: no
   transparent gap between sections, visual rhythm preserved.
   This triggers for any .md-testimonial / .md-testimonial-section
   immediately followed by a .md-section-py block. In practice that's
   only the homepage today. */
.md-testimonial + .md-section-py,
.md-testimonial-section + .md-section-py {
    margin-top: -60px;
    padding-top: calc(var(--md-section-pad-y) + 60px);
}

@media (max-width: 991.98px) {
    .md-testimonial + .md-section-py,
    .md-testimonial-section + .md-section-py {
        margin-top: -40px;
        padding-top: calc(var(--md-section-pad-y) + 40px);
    }
}

@media (max-width: 575.98px) {
    .md-testimonial + .md-section-py,
    .md-testimonial-section + .md-section-py {
        margin-top: 0;
        padding-top: var(--md-section-pad-y);
    }
}

/* ----------------------------------------
   USPs Section
   ---------------------------------------- */
.md-usp-item {
    text-align: center;
    padding-top: 80px;
    padding-bottom: 70px;
}
.md-usp-item i {
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 30px;
}
.md-usp-item h6 {
    font-size: var(--md-font-size-base);
    line-height: var(--md-line-height-relaxed);
    color: var(--md-color-blue-deep);
}

/* ----------------------------------------
   Text and Image Section
   Uses the unified section padding from the base `section` rule
   (--md-section-pad-y, clamp 56→120px). Bespoke 154/215px removed.
   ---------------------------------------- */

/* ----------------------------------------
   Client Logos
   ---------------------------------------- */
/* Client logos */
/* Adopt the unified --md-section-pad-y token (clamp 56→120px fluid).
   First section to land on the new section-padding system; other
   sections roll out individually as their layouts are audited. */
section.client-logos {
    padding-top: var(--md-section-pad-y);
    padding-bottom: var(--md-section-pad-y);
}

section.client-logos h3 {
    margin-bottom: 66px;
}

section.client-logos .image-link {
    margin-bottom: var(--md-space-6);
    border-radius: var(--md-radius-md);
    background-color: var(--md-color-white);
    height: 170px;
    border: 0 solid var(--md-color-white);
    transition: all ease 200ms;
}

section.client-logos .image-link img {
    max-height: 68px;
    max-width: 70%;
    filter: grayscale(100%);
}

section.client-logos .image-link:hover img {
    filter: grayscale(0%);
}

/* ----------------------------------------
   Vacancies
   ---------------------------------------- */
/* Legacy section padding for the embedded vacancies bloq (bloqs_v2 {vacancies_block}).
   Scoped away from the /vacatures listing sections so they use the shared
   .md-listing-header / .md-listing-content rhythm like /cases and /blog —
   without this :not(), section.vacancies (0-1-1) out-specifies .md-listing-*
   (0-1-0) and reintroduces ~135px+185px of stray padding around the title. */
section.vacancies:not(.md-listing-header):not(.md-listing-content) {
    padding-top: 135px;
    padding-bottom: 185px;
}

section.vacancies p {
    font-size: var(--md-font-size-lg);
    line-height: var(--md-line-height-normal);
}

section.vacancies .badge {
    padding: 4px 7px;
    font-size: 11px;
    max-width: 19px;
}

.md-vacancy-count {
    position: relative;
    top: -12px;
    right: 18px;
}

section.vacancies {}

/* Vacancy / service tile — flex column with the icon anchored top-left and
   a bottom footer (.md-tile-footer) that holds the text content on the left
   and the click-affordance chevron on the right. The icon is conditional
   (`{if icon}` in the template) — when absent the footer is the sole child,
   so its own `margin-top: auto` (below) keeps it pinned to the bottom
   instead of rising to flex-start. */
.md-vacancy-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--md-space-6);          /* 24px */
    padding: var(--md-space-7);      /* 28px */
    min-height: 280px;
    height: 100%;                    /* fill the Bootstrap column so sibling cards match heights */
    background-color: var(--md-color-dark);
    color: var(--md-color-white);
    text-decoration: none;
    border-radius: var(--md-radius-3xl);  /* 24px */
}

.md-vacancy-tile:hover {
    background-color: var(--md-color-accent);
}

.md-tile-icon {
    align-self: flex-start;
    font-size: 45px;  /* hero icon — specific designed size, off the icon scale */
    line-height: 1;
    color: var(--md-color-accent);
}

.md-tile-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--md-space-4);  /* 16px */
    margin-top: auto;        /* pin to bottom of .md-vacancy-tile when there's no icon above */
}

.md-tile-content {
    flex: 1;
    min-width: 0;
}

.md-vacancy-tile :is(h2, h3, h4, h5) {
    margin-top: 0;
    /* Reads the cascade-aware heading token. .md-vacancy-tile in the
       dark-context union (md-tokens.css) rebinds this to white at
       default state; .md-vacancy-tile:hover in the accent-context
       union rebinds it to shark-grey-950 (dark) on hover. The legacy
       --md-color-text-heading-inverse alias is NOT rebound and pinned
       to white regardless, breaking the yellow-hover state. */
    color: var(--md-color-text-heading);
    font-family: var(--md-font-display);
}

/* "Ook een expert?" CTA tile heading — markup is `<h3 class="h5">`.
   The .h5 utility's 16-18px is too small for the tile design; bump
   to --md-font-size-xl. Line-height inherits from .h5 (140% in
   md-reset.css) — no override needed. */
.md-vacancy-tile h3.h5 {
    font-size: var(--md-font-size-xl);
}

.md-vacancy-tile p {
    /* Reads the cascade-aware body token, same reasoning as the
       heading rule above. Default state: shark-grey-100 (body-on-dark).
       Hover state: shark-grey-800 (body-on-accent). */
    color: var(--md-color-text-body);
    margin-bottom: 0;
}

.md-tile-chevron {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--md-color-accent);
    transition: transform var(--md-transition-base), color var(--md-transition-base);
}

.md-vacancy-tile:hover .md-tile-chevron,
.md-vacancy-tile:hover .md-tile-icon {
    color: var(--md-color-text-body);
}

.md-vacancy-tile:hover .md-tile-chevron {
    transform: translateX(4px);
}

/* Hover state: tile bg turns accent (yellow). Text-token inversion
   (heading/body/eyebrow) is now centralized under the accent-context
   selector union in md-tokens.css — `.md-vacancy-tile:hover` is listed
   there and rebinds the tokens to their on-accent (dark) values, so
   headings and paragraphs re-resolve automatically via the cascade.
   Per-element overrides removed (were redundant + the h2/h3/h4/h5
   selector didn't catch h1 anyway). */

.vacancy-details {
    /*display: flex;*/
    /*justify-content: space-between;*/
}

.vacancy-detail-item {
    display: inline-block;
    padding-right: 26px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.vacancy-detail-item i {
    font-size: 22px;
    line-height: 22px;
    color: var(--md-color-dark);
    margin-right: 11px;
    vertical-align: middle;
}

/* ----------------------------------------
   404
   ---------------------------------------- */
.img-404 {
    margin-top: 200px;
    width: 66%;
    height: auto;
}

.title-404 {
    margin-top: 240px;
}

/* ----------------------------------------
   Call-to-Action
   ---------------------------------------- */
section.call-to-action {
    padding-top: 78px;
    padding-bottom: 67px;
    position: relative;
    overflow: hidden;
}
section.call-to-action::before {
    content: '';
    display: block;
    background: linear-gradient(to right, #253848 0, #253848 33%, #244057 33%, #244057 66%, #234663 66%, #234663 100%);
    opacity: 1;
    width: 50%;
    height: 180%;
    top: -120px;
    right: -100px;
    position: absolute;
    transform: matrix(0.98, 0.21, -0.21, 0.76, 0.98, 0);
    animation: shrink 8s infinite alternate;
}

section.call-to-action h4 {
    font-size: 32px;
    font-weight: 700;
    line-height: 36px;
}

/* ----------------------------------------
   CTA Primary — used as the bottom CTA on bloq pages, case studies,
   and vacancy posts. Reworked 2026-05-26 to match the blog CTA pattern
   (dark bg + diagonal gradient sweep), photos dropped. Mirrors the
   .md-cta-blog rules in md-blog.css.
   ---------------------------------------- */
.md-cta-primary {
    background-color: var(--md-color-bg);      /* themed: .md-section--dark → bg-dark */
    color: var(--md-color-text-body);          /* themed: → text-on-dark; children inherit */
    padding-top: 79px;
    padding-bottom: 79px;
    position: relative;
    overflow: hidden;
}

.md-cta-primary::before {
    content: '';
    display: block;
    background: var(--md-gradient-carousel-bg);
    opacity: 0.8;
    width: 40%;
    height: 130%;
    top: -40px;
    right: -100px;
    position: absolute;
    transform: matrix(0.98, 0.21, -0.21, 0.98, 0, 0);
    animation: shrink 8s infinite alternate;
}

.md-cta-primary .container {
    position: relative;
    z-index: 1;
}

/* Desktop only — give the section a fixed minimum height and center
   the content inside vertically. Keeps the band visually consistent
   across pages where the CTA copy is short vs long. Tablet/mobile
   keep the natural padding-based height for now. Backlog: revisit
   whether this min-height should also apply at smaller breakpoints
   and whether 320px is the right value. */
@media (min-width: 992px) {
    .md-cta-primary {
        min-height: 320px;
        display: flex;
        align-items: center;
    }
    .md-cta-primary .container {
        width: 100%;
    }
}

.md-cta-primary__title {
    font-family: var(--md-font-display);
    /* size comes from the .h1 class on the element (the title is the headline) */
    font-weight: 700;
    color: var(--md-color-text-heading);       /* themed: → white on dark */
    margin-bottom: 14px;
}

.md-cta-primary__body {
    font-size: var(--md-font-size-md);
    line-height: var(--md-line-height-body);
    margin-bottom: 0;
    max-width: 744px;
    font-weight: 500;
    /* colour inherited from .md-cta-primary (themed text-on-dark) */
}

.md-cta-primary__actions {
    margin-top: 0;
}

.md-cta-light {}

.md-cta-light h3 {
    color: var(--md-color-black);
    margin-bottom: 42px;
}

/* Person photo backgrounds removed 2026-05-26 with the CTA rework
   (.bg-project-manager-1 / .person-N classes no longer in any active
   template). Image files preserved under web/images/ in case the
   design decision is revisited. */

/* ----------------------------------------
   Market Filter
   ---------------------------------------- */
.md-market-filter-option {
    margin-bottom: 10px;

}

.md-market-filter-option .btn {
    /* border-color: #191919;
    color: #191919;
    text-align: left; */
    position: relative;
    padding-right: 40px;
    /* font-weight: normal; */
    margin-right: 8px;
}

.md-market-filter-option .btn i {
    position: absolute;
    right: 13px;
    top: 12px;
}
/*
.md-market-filter-option .btn-outline-secondary:hover {
    border-color: #218aab;
    color: #218aab;
    background-color: #FFFFFF
} */

.md-market-filter-option input[type="checkbox"]:checked+.btn {
    border-color: var(--md-color-accent);
    background-color: var(--md-color-accent);
    color: var(--md-color-black);
}

.md-market-filter-option input[type="checkbox"]:checked+.btn i.fa-square::before {
    content: "\f14a";
}

.md-market-filter-option input[type="checkbox"] {
    display: none;
}

.md-market-selection-section {
    padding-top: 54px;
    padding-bottom: 54px;
    background-color: var(--md-color-white);
}

/* ----------------------------------------
   Features Section
   ---------------------------------------- */
section.features {
    padding-bottom: 183px;
}

.md-feature {
    font-size: var(--md-font-size-lg);
    line-height: var(--md-line-height-snug);
    margin-bottom: var(--md-space-4);
}

.md-i-pre {
    display: inline-block;
    width: 46px;
    float: left;
}

.md-i-pre i {
    font-size: 36px;
    line-height: 36px;
    color: var(--md-color-primary);
    vertical-align: middle;
}

/* ----------------------------------------
   Features Blocks
   ---------------------------------------- */
.md-features-block-container i.fas {
    color: var(--md-color-blue-teal);
    line-height: 27px;
}

.md-features-block-container h4 {
    font-size: 23px;
    line-height: 27px;
    font-weight: 600;
    margin-bottom: 23px;
}

.md-features-block-container p {
    /* font-size: 15px;
    line-height: 18px; */
    max-width: 500px;
    margin-bottom: 70px;
}

.md-fz-bigger {
    color: var(--md-color-blue-teal);
    line-height: 27px;
    font-size: 28px;
}

.md-box-features ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 0;
}

.md-box-features ul li {
    flex: calc(50% - 13px);
    background-color: var(--md-color-blue-feature-bg);
    color: #439aaa;
    font-size: 21px;
    line-height: 23px;
    padding: 51px 46px;
    border-radius: var(--md-radius-xl);
}

/* ----------------------------------------
   Case Contact
   ---------------------------------------- */
.case-contact {
    background-color: var(--md-color-gray-100);
}

.case-contact-card {
    background-color: white;
}

.case-contact-card-detail {
    padding: 50px 0 70px 0;
}

.case-contact-card-detail-intro>*:first-child {
    width: 50px;
    margin-right: 10px;
}

.case-contact-card-detail-intro i {
    font-size: 30px;
}

.case-contact-card-detail-intro {
    color: black;
    margin: 5px 0;
}

a.case-contact-card-detail-intro:hover {
    color: gray;
    text-decoration: none;
}

a.case-contact-card-detail-intro:hover span {
    text-decoration: underline;
}

.case-contact-card-detail-intro h4 {
    font-weight: 900;
    font-size: 24px;
    margin: 0;
    font-family: "Museo-Sans";
}

.case-contact-card-detail-intro h5 {
    font-weight: 100;
    font-family: "Museo-Sans";
    font-size: 22px;
    margin: 0;
}

/* ----------------------------------------
   Testimonial Section (new)
   ---------------------------------------- */
.md-testimonial-section {
    background-color: var(--md-color-dark);
}

.md-testimonial-section.md-testimonial-case {
    background-color: transparent;
    margin-bottom: -30px;
    overflow: visible;
}

.md-testimonial-section.md-testimonial-case .row {
    overflow: visible;
}

.md-testimonial-section.md-testimonial-case .row > div:first-child {
    overflow: visible;
}

.md-testimonial-section.md-testimonial-case img.md-testimonial-img {
    max-width: 600px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--md-radius-2xl);
    position: relative;
    z-index: 2;
    transform: translateY(-30px);
    margin-top: 0;
    margin-bottom: 0;
}

.md-testimonial-bg {
    position: absolute;
    background-color: var(--md-color-dark);
    top: -120px;
    bottom: -120px;
    left: -100vw;
    right: -100vw;
    z-index: 0;
}

.md-testimonial-section.md-testimonial-case .md-bg-quote {
    position: relative;
    z-index: 3;
    overflow: visible;
}

.md-testimonial-section.md-testimonial-case .md-bg-quote::before {
    z-index: 10 !important;
    transform: scale(0.7);
    transform-origin: top left;
}

.md-testimonial-section.md-testimonial-case + .md-steps-vertical {
    padding-top: 90px;
}

.md-testimonial-section img {
    max-height: 479px;
}

.md-testimonial-img {
    position: relative;
    border-radius: var(--md-radius-2xl);
    margin-top: -120px;
    margin-bottom: -120px;
    z-index: 2;
}

.md-bg-quote * {
    z-index: 1;
}

.md-bg-quote p {
    color: var(--md-color-white);
}

/* Quote text inside the testimonial-card background (image_and_quote
   block + project_text_in_between on case pages). Selector matches the
   new <blockquote class="md-quote"> markup AND the legacy <h5> markup
   so the migration can land template-by-template. */
.md-bg-quote :is(h5, .md-quote) {
    font-family: var(--md-font-body);
    font-size: var(--md-font-size-lg);
    line-height: var(--md-line-height-normal);
    color: var(--md-color-white);
    font-weight: bold;
    font-style: normal;
    margin: 0;
}

/* Canonical .md-quote — large display-quote (case-page top quote_text).
   In .md-bg-quote contexts the rule above overrides with the smaller
   inline-quote visual. */
.md-quote {
    font-family: var(--md-font-display);
    font-size: var(--md-font-size-3xl);
    line-height: 46px;
    font-style: normal;
    margin: 0;
}

.md-bg-quote {
    position: relative;
}

.md-bg-quote::before {
    content: '\A';
    width: 166px;
    height: 197px;
    left: -70px;
    top: -130px;
    display: block;
    position: absolute;
    background-image: url(/images/double-quote-outline.svg);
    background-size: auto;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.6;
}

/* ----------------------------------------
   Footer
   ---------------------------------------- */
.footer-main {
    /*padding: 40px 0 60px 0;*/
    padding-top: 61px;
    position: relative;
    overflow: hidden !important;
    /* background-image: url(images/footer-swirl.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -100px center; */
}

.footer-main img.md-emblem {
    position: absolute;
    max-width: 470px;
    opacity: .95;
}

.footer-main h5 {
    font-family: var(--md-font-display);
    color: var(--md-color-dark);
    font-size: 24px;
    line-height: 30px;
}

.footer-main a {
    text-decoration: none;
}
.footer-main a.md-link,
.footer-main p.md-link {
    color: var(--md-color-dark);
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0.75rem;
}

.footer-main a.md-link:hover {
    text-decoration: none;
}

.footer-main a.md-link:hover i {
    margin: 0 10px 0 10px;
}

.footer-main a.md-link i {
    color: var(--md-color-dark);
    margin: 0 20px 0 0;
    transition: all ease 200ms;
    font-size: 15px;
    line-height: 15px;
}

/* Multi-line link variant — vertically centers the icon on the FIRST line of
   text instead of the visual midpoint of the wrapped block. Used by the
   two-line address row. The icon's line-height is bumped to match the first
   text line-height (20px), so the 15px glyph sits centered within its 20px
   line-box, which top-aligns flush with the first text line. */
.footer-main a.md-link--multiline {
    align-items: flex-start;
}

.footer-main a.md-link--multiline i {
    line-height: 20px;
}

/* Legal-identity rows (KvK, BTW) — label uses .h5 (display font), value uses
   regular footer body styling (16px Roboto, same as address/phone). Each
   group is its own block so label + value sit on separate lines, flush-left,
   with a one-row gap above (matching the contact group's rhythm). */
.footer-main .md-footer-legal {
    color: var(--md-color-dark);
    margin-top: 1.25rem;
}

.footer-main .md-footer-legal__label {
    margin-bottom: 0.5rem;
}

.footer-main .md-footer-legal__value {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0;
}

/* KvK + BTW: stacked on desktop, side-by-side on mobile. The Modus column
   at col-lg-3 is narrow on desktop so the legal rows stay column-vertical;
   on mobile the column is full-width so 2-col reads better and saves
   vertical real estate. */
@media (max-width: 767.98px) {
    .footer-main .md-footer-legal-group {
        display: flex;
        gap: var(--md-space-5);
    }
    .footer-main .md-footer-legal-group .md-footer-legal {
        flex: 1;
    }
}

/* Mobile column-stack rhythm: when the footer columns stack on xs/sm, the
   gap between Ga naar and Modus should match the vertical rhythm inside
   the Modus column (h2 → address → phone → legal). The legal rows use
   `margin-top: 1.25rem` (20px = --md-space-5), so any stacked col after
   another col gets the same 20px breathing room above. */
@media (max-width: 767.98px) {
    .footer-main > .container > .row > .col-12 + .col-12 {
        margin-top: var(--md-space-5);
    }
}

/* .footer-main img {
    max-width: 180px;
    opacity: .05;
} */

.md-footer-bottom {
    padding-top: 220px;
    padding-bottom: 46px;
}

.sub-footer a.social-media-link {
    display: inline-block;
    text-align: center;
}

a.social-media-link {
    background-color: var(--md-color-dark);
    color: var(--md-color-white);
    border-radius: 100px;
    width: 40px;
    height: 40px;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--md-transition-base), color var(--md-transition-base);
}

a.social-media-link:hover {
    background-color: var(--md-color-accent) !important;
    color: var(--md-color-black) !important;
    text-decoration: none !important;
}

a.social-media-link i {
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}

a.md-link-sub {
    font-size: var(--md-font-size-base);
    line-height: 32px;
    font-weight: bold;
    color: var(--md-color-dark);
}

a.md-link-sub:first-child::after {
    content: '|';
    margin-left: 8px;
}

/* ----------------------------------------
   Team
   ---------------------------------------- */
section.team {}

section.team a {
    color: var(--md-color-dark);
}
/* Employee name (the always-visible one under each photo). Scoped to
   .item so the inside-photo hover name (white on dark) keeps inheriting
   its color. Matches both <h5> and .h5 utility class so the post-#50
   markup `<h3 class="h5">` is captured — same visual size as the
   adjacent "Ook een expert?" vacancy-tile h5. */
section.team .md-employee-photo-hover .item :is(h5, .h5) {
    color: var(--md-color-dark);
    font-size: 28px;
    line-height: 25px;
    margin-top: 0;
    margin-bottom: 0;
}

.md-employee-photo {
    background-size: cover;
    background-position: center;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    position: relative;
    min-height: 160px;
    border-radius: var(--md-radius-xl);
}

/* Team section: the "Ook een expert?" tile should match the height of the
   employee cards next to it. The tile already has height:100% for this, so just
   drop the global 1:1 aspect-ratio (applied >=992px) that would otherwise force
   it into a square and break the match. Scoped to section.team so the service /
   homepage vacancy tiles keep their square ratio. */
section.team .md-vacancy-tile {
    aspect-ratio: auto;
}

.md-photo-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--md-color-dark);
    color: var(--md-color-white);
    padding: 33px;
    opacity: 0;
    border-radius: var(--md-radius-xl);
    /* Center the sticker + about-text on both axes (name removed from
       the hover markup). */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.md-photo-inner img {
    max-width: 132px;   /* 2x the previous 66px sticker */
    margin-bottom: 21px;
}

.md-photo-inner p {
    font-size: 17px !important;
    line-height: 20px !important;
    color: var(--md-color-white);
    font-weight: normal !important;
}

.md-photo-inner a {
    color: var(--md-color-white) !important;
}

.md-employee-photo-hover:hover .md-photo-inner {
    opacity: 1;
    transition: .3s ease opacity;
}
.md-employee-photo .md-title-alt {
    font-size: 20px;
    line-height: 23px;
    font-weight: normal;
    margin-bottom: 0;
}

/* ----------------------------------------
   Swiper / Steps
   ---------------------------------------- */
.swiper {
    width: 100%;
    height: 780px;
}

.swiper-slide {
    font-size: 18px;
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px;
}

.md-swiper-steps .container {
    --scroll-gradient: linear-gradient(to bottom, var(--md-color-accent) 0%, var(--md-shark-grey-950) 0%);
}
.md-swiper-steps .container::before {
    content: '\A';
    position: absolute;
    left: 5%;
    width: 4px;
    top: 0;
    bottom: 0;
    background: var(--scroll-gradient, linear-gradient(to bottom, var(--md-color-accent) 0%, var(--md-shark-grey-950) 0%));
    z-index: -1;
    transition: background 0.2s;
}
.md-swiper-vertical .card {
    border: 3px solid var(--md-color-dark);
    border-radius: 16px;
    padding: 40px 30px;
    text-decoration: none;
    color: var(--md-color-dark);
}
.md-swiper-vertical .card:hover {
    background-color: var(--md-color-dark);
    color: #FFFFFF!important;
    transition: all ease .3s;
}
.md-swiper-vertical .card:hover .fa-li {
    color: var(--md-color-accent);
}
.md-swiper-vertical .card:hover .btn-dark {
    border-color: var(--md-color-accent);
    background-color: var(--md-color-accent);
    color: var(--md-color-dark);
}
.card .md-price {
    font-weight: bold;
    font-size: 13px;
    line-height: 12px;
    margin-bottom: 16px;
}
.card .md-price b {
    font-family: var(--md-font-display);
    font-size: 26px;
    line-height: 23px;
    margin-left: 6px;
}

.card ul {
    margin-bottom: 26px;
}
/* .card .btn {
    border-radius: 6px;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
} */
.card .btn-dark {
    background-color: var(--md-color-dark);
}

.md-swiper-progress {
    position: absolute;
    right: 20%;
    top: 0;
    z-index: 3;
}
.md-swiper-progress ul {
    list-style-type: none;
    padding: 0;
    position: relative;
}
.md-swiper-progress ul::before {
    content: '\A';
    position: absolute;
    left: 16px;
    width: 3px;
    top: 0;
    bottom: 0;
    background-color: var(--md-color-dark);
    z-index: -1;
}
.md-swiper-progress ul li {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 12px;
    cursor: pointer;
}
.md-swiper-progress ul li span {
    font-size: 13px;
    line-height: 34px;
    text-align: center;
    width: 34px;
    height: 34px;
    background-color: var(--md-color-dark);
    display: inline-block;
    vertical-align: middle;
    color: var(--md-color-white);
    margin-right: 18px;
    border-radius: 100%;
    font-weight: bold;
    transition: all ease .3s;
}
.md-swiper-progress ul li span.active {
    background-color: var(--md-color-accent);
    color: var(--md-color-dark);
    transition: all ease .3s;
}

.md-steps-vertical {
    position: relative;
    /* overflow-x: hidden; */
}

.md-vertical-line i {
    font-size: clamp(32px, 8vw, 60px) !important;
    line-height: 1 !important;
    background: #FFF;
    z-index: 2;
    margin-bottom: 0;
}
.md-vertical-line::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    bottom: 0;
    width: 3px;
    background-color: var(--md-color-black);
    z-index: 1;
}
.md-step:last-of-type .md-vertical-line::before {
    content: none !important;
}
.md-step p {
    font-size: var(--md-font-size-md);
    margin-bottom: 114px;
}
/* Last step in the vertical_steps_container has no following content, so
   its 114px paragraph margin would leak below the section. */
.md-step:last-of-type p {
    margin-bottom: 0;
}
.md-swiper-vertical .md-step p {
    margin-bottom: 12px;
    line-height: 22px;
}
.md-step ul {
    color: var(--md-color-blue-deep);
    font-size: 17px;
    line-height: 22px;
}
.md-step h6 {
    color: var(--md-color-blue-deep);
    font-size: var(--md-font-size-lg);
    line-height: var(--md-line-height-snug);
    margin-bottom: var(--md-space-4);
}
.md-vertical-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0;
}

.md-nr {
    font-size: 120px;
    line-height: 120px;
    letter-spacing: 1.2px;
    font-family: var(--md-font-display);
    -webkit-text-stroke: 2px #1E609120;
    color: transparent;
    position: absolute;
    top: 0px;
    left: 0;
}

/* ----------------------------------------
   Hover Effects
   ---------------------------------------- */
.md-hover-darker {
    background-color: var(--md-color-dark);
    color: var(--md-color-white);
}

.md-hover-darker:hover {
    background-color: var(--md-color-accent);
    transition: all ease .2s;
}

.md-hover-darker i {
    color: var(--md-color-accent);
}

.md-hover-darker:hover i,
.md-hover-darker:hover span,
.md-hover-darker:hover h5,
.md-hover-darker:hover p,
.md-hover-darker:hover b {
    color: var(--md-color-dark) !important;
    transition: all ease .2s;
}

.md-hover-dark:hover i,
.md-hover-dark:hover span,
.md-hover-dark:hover b {
    color: var(--md-color-white) !important;
    transition: all ease .2s;
}

.md-hover-medium:hover i,
.md-hover-medium:hover span,
.md-hover-medium:hover b {
    color: var(--md-color-white) !important;
}

.md-hover-light:hover i,
.md-hover-light:hover span,
.md-hover-light:hover b {
    color: var(--md-color-white) !important;
}

/* ----------------------------------------
   Contact Section
   ---------------------------------------- */
.contact-gegevens h3 {
    margin: 20px 0;
    font-weight: 900 !important;
    font-size: 28px;
}

.row-contact {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* ----------------------------------------
   CTA Alt
   ---------------------------------------- */
.md-cta-alt {
    padding: 48px 0;
    background: linear-gradient(171deg, #FFEAF1 16%, #FFD4E2 125%);
}

.md-cta-alt-card {
    display: flex;
    align-items: center;
    gap: 36px;
}

.md-cta-alt-content {
    flex: 1;
    min-width: 0;
}

.md-cta-alt-pretitle {
    display: block;
    font-family: var(--md-font-accent);
    font-weight: 400;
    font-size: 34px;
    line-height: 40px;
    /* Tokenized: was hardcoded #353C44 (= shark-grey-900). Same value
       on default light context; auto-themes on dark / accent surfaces. */
    color: var(--md-color-text-eyebrow);
    margin-bottom: 12px;
}

.md-cta-alt-title {
    font-family: var(--md-font-display);
    font-size: clamp(2.25rem, 1.714rem + 1.429vw, 3rem);
    line-height: 1.1;
    /* Tokenized: was --md-color-black. Shifts to shark-grey-950
       (#272E36) on default; auto-themes via cascade. */
    color: var(--md-color-text-heading);
    margin-bottom: 12px;
    max-width: 660px;
}

.md-cta-alt-text {
    font-family: var(--md-font-body);
    font-weight: 500;
    font-size: var(--md-font-size-lg);
    line-height: var(--md-line-height-normal);
    /* Tokenized: was hardcoded #3B454F (= shark-grey-800). Same value
       on default light context; auto-themes on dark / accent surfaces. */
    color: var(--md-color-text-body);
    margin-bottom: 0;
    max-width: 660px;
}

.md-cta-alt-actions {
    margin-top: 36px;
}

.md-cta-alt-image {
    flex-shrink: 0;
    max-width: 389px;
    display: flex;
    align-items: center;
}

.md-cta-alt-image img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 360px;
    object-fit: contain;
}

/* ----------------------------------------
   Subnavigation
   ---------------------------------------- */
.md-subnavigation-link {
    text-decoration: none;
    font-size: 16px;
    line-height: 18px;
}
.md-subnavigation-link i {
    vertical-align: middle;
    margin-left: 12px;
}

/* ----------------------------------------
   Scroll to Team
   ---------------------------------------- */
#scrollToTeam {
    float: right;
    margin-right: 26px;
}

/* ----------------------------------------
   List Markers
   ---------------------------------------- */
ul li::marker {
    color: var(--md-color-blue-deep);
}

/* ----------------------------------------
   Responsive: 768px - 992px (USP box border-radius)
   ---------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .usp-box-onhover.hover-horizontal .col-12:first-child {
        border-radius: var(--md-radius-xl) 0 0 0 !important;
    }

    .usp-box-onhover.hover-horizontal .col-12:nth-child(2) {
        border-radius: 0 var(--md-radius-xl) 0 0 !important;
    }

    .usp-box-onhover.hover-horizontal .col-12:nth-child(3) {
        border-radius: 0 0 0 var(--md-radius-xl) !important;
    }

    .usp-box-onhover.hover-horizontal .col-12:last-child {
        border-radius: 0 0 var(--md-radius-xl) 0 !important;
    }
}

/* ----------------------------------------
   Responsive: 992px - 1200px (landing page footer)
   ---------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .landingPage-footer a:first-of-type {
        margin-left: 20px;
    }

    .landingPage-footer a:last-of-type {
        margin-left: 20px;
    }
}

/* ----------------------------------------
   Responsive: max 992px
   ---------------------------------------- */
@media screen and (max-width: 992px) {
    .md-swiper-progress {
        display: none;
    }
}

/* ----------------------------------------
   Responsive: min 992px — square spec cards
   ---------------------------------------- */
@media screen and (min-width: 992px) {
    .md-vacancy-tile {
        aspect-ratio: 1 / 1;
    }
}

/* ----------------------------------------
   Responsive: max 1199.98px
   ---------------------------------------- */
@media screen and (max-width:1199.98px) {
    .md-swiper-progress {
        right: 10%;
    }
}

/* ----------------------------------------
   Responsive: max 1024px
   ---------------------------------------- */
@media screen and (max-width: 1024px) {
    .md-feature {
        font-size: var(--md-font-size-base);
    }

    /* Clip horizontally (the decorative swirl + watermark would
       otherwise cause body scroll) but keep vertical overflow visible
       so the swirl can bleed past the top/bottom of the section.
       overflow-x:clip allows overflow-y:visible — overflow-x:hidden
       does not. */
    .md-steps-vertical {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
}

/* ----------------------------------------
   Responsive: max 991.98px
   ---------------------------------------- */
@media screen and (max-width: 991.98px) {
    .vacancy-detail-item {
        padding-right: 16px;
    }

    section .row.py-5 [data-per="4"] {
        margin-bottom: 24px;
    }

    /* Vertical steps mobile */
    section.md-steps-vertical .row.md-step {
        --bs-gutter-x: 0.5rem;
        position: relative;
        display: flex;
        flex-wrap: nowrap;
    }

    section.md-steps-vertical .md-vertical-line {
        flex: 0 0 auto;
        width: 16.666667%;
    }

    section.md-steps-vertical .md-step > .col-8 {
        width: 80%;
        flex: 0 0 auto;
        /* Lift text content above the decorative .md-nr watermark in
           the absolute-positioned last col. */
        position: relative;
        z-index: 1;
    }

    section.md-steps-vertical .md-step p {
        /* font-size cascades from `.md-step p` (var(--md-font-size-md))
           and resolves to 18px on mobile via the clamp's min. */
        line-height: var(--md-line-height-normal);
        margin-bottom: var(--md-space-16);
    }

    /* Number watermark column. Pinned right, anchored to the row's
       top (top:0 not -1.5rem) so the section's overflow:hidden never
       clips the digits. The watermark sits BEHIND the text content
       (.col-8 above is z-index: 1) as a large decorative element, so
       no max-width cap — wide numbers extend leftward across the row
       and read as a background watermark.

       right: var(--md-space-18) (72px) buffers the rightmost glyph
       well clear of the section's right edge so neither
       ClashDisplay-Bold's right bearings nor the 1.5px text-stroke +
       letter-spacing tail clip. space-16 (64px) was still tight. */
    section.md-steps-vertical .md-step > div:last-child {
        position: absolute;
        top: 0;
        right: var(--md-space-18);
        width: auto;
        padding: 0;
        z-index: 0;
        margin-right: 0;
        pointer-events: none;
        text-align: right;
        overflow: visible;
    }

    section.md-steps-vertical .row.md-step:first-of-type {
        margin-top: 2.5rem;
    }

    /* Large decorative watermark behind the step text on mobile.
       Scales with viewport so it reads as a clear background number;
       text content sits in front via z-index on .col-8 above.

       letter-spacing: 0 overrides the base rule's 1.2px. Trailing
       letter-spacing isn't always included in the line-box, so killing
       it eliminates one source of right-side overflow against the
       section's overflow:hidden. */
    .md-nr {
        font-size: clamp(96px, 22vw, 160px);
        line-height: 1;
        letter-spacing: 0;
        font-family: var(--md-font-display);
        -webkit-text-stroke: 1.5px #1E609120;
        color: transparent;
        position: static;
        opacity: 0.6;
        white-space: nowrap;
    }
}

/* ----------------------------------------
   Responsive: max 768px
   ---------------------------------------- */
@media screen and (max-width: 768px) {
    .usp-box-onhover .col-12 {
        border-radius: var(--md-radius-xl) !important;
    }
}

/* ----------------------------------------
   Responsive: max 767px
   ---------------------------------------- */
@media (max-width: 767px) {
    .md-testimonial-section.md-testimonial-case {
        background-color: var(--md-color-dark) !important;
        padding-top: 0px !important;
        padding-bottom: 40px !important;
        margin-bottom: 0px;
        margin-top: 10px;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 15px;
        padding-right: 15px;
        width: 100vw;
    }

    .md-testimonial-bg {
        display: none;
    }

    .md-testimonial-section.md-testimonial-case img.md-testimonial-img {
        transform: translateY(-40px);
        aspect-ratio: 3 / 2;
        width: 100%;
    }

    .md-testimonial-img {
        margin-top: 0;
        margin-bottom: 20px;
    }
}

/* ----------------------------------------
   Responsive: max 575.98px
   ---------------------------------------- */
@media screen and (max-width: 575.98px) {
    section.text-and-image {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .text-and-image p {
        font-size: var(--md-font-size-base);
        line-height: var(--md-line-height-normal);
    }

    .md-tag {
        font-size: 16px;
        padding: 6px 12px;
    }

    .md-photo-inner p {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .title-404 {
        margin-top: 80px;
    }

    .md-usp-item {
        text-align: center;
        padding-top: 55px;
        padding-bottom: 45px;
    }
}

/* ----------------------------------------
   Responsive: max 453.98px
   ---------------------------------------- */
@media screen and (max-width: 453.98px) {
    .md-photo-inner p {
        font-size: 11px !important;
        line-height: 15px !important;
    }

}

/* ----------------------------------------
   Responsive: min 768px, max 991.98px (photo inner)
   ---------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .md-photo-inner p {
        font-size: 13px !important;
        line-height: 16px !important;
    }
}

/* ----------------------------------------
   Responsive: max 991.98px (CTA Alt)
   ---------------------------------------- */
@media screen and (max-width: 991.98px) {
    .md-cta-alt {
        position: relative;
        /* Top padding clears the image which protrudes 50% above the
           section. Image max-height 214px → 107px above section top,
           107px inside; ~140px top leaves a small gap below image. */
        padding: 140px 0 36px;
        /* Top margin keeps the protruding image (~107px above the
           section) from overlapping whatever sits above this block
           on every page that uses it. */
        margin-top: 7rem;
    }

    .md-cta-alt-card {
        flex-direction: column;
        gap: 36px;
    }

    .md-cta-alt-image {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 232px;
    }

    .md-cta-alt-image img {
        max-height: 214px;
    }

    .md-cta-alt-pretitle {
        font-size: var(--md-font-size-xl);
        line-height: var(--md-line-height-snug);
    }

    .md-cta-alt-text {
        font-size: 20px;
        line-height: var(--md-line-height-normal);
    }

    .md-cta-alt-actions {
        margin-top: 36px;
    }

    .md-cta-alt-actions a {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* ----------------------------------------
   Features container (bloqs_v2 {features_container} block)
   Scoped to .md-section-stack which lives only on this block,
   so layout rhythm rules here don't ripple to other sections.

   Layout: CSS Grid with auto-fit + minmax. Each card has a 280px min
   width and the grid fits as many cards per row as the container can
   hold. No template-side count logic needed — works for any number of
   features, independent of sibling bloqs (link_button etc).

   The bloqs_v2 {feature} block still emits Bootstrap col-* classes for
   historical reasons; the second rule below neutralises those widths
   so grid placement wins. The count-based col-lg-3 / col-lg-4 choice
   in bloqs_v2.html becomes dead but harmless.
   ---------------------------------------- */
.md-features-grid {
    /* Zero out Bootstrap's row gutter so it doesn't compound with grid gap. */
    --bs-gutter-x: 0;
    row-gap: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--md-space-12);   /* 48px row + col gap on desktop */
}

/* Neutralise the Bootstrap col-* widths on the feature cards — grid handles
   placement. Padding-x reset so card content aligns to the grid track edge. */
.md-features-grid > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: initial;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 767.98px) {
    .md-features-grid {
        gap: var(--md-space-6);   /* 24px on mobile */
    }
}

/* Heading block → next content row: 96px. Dense content blocks
   (cards grids, tile rows, etc.) benefit from extra breathing room
   between the heading and the first content row. Applies to any
   second .row inside .md-section-stack — features_container's
   .md-features-grid, graphical_block_container's children row, and
   any future block using the same section-stack pattern. */
.md-section-stack > .row + .row {
    margin-top: var(--md-space-rhythm-block);   /* 64px */
}

/* Tighter on mobile — stacked cards don't need the full gap. Must come after
   the base rule above (equal specificity) to win at this breakpoint. */
@media (max-width: 767.98px) {
    .md-section-stack > .row + .row {
        margin-top: var(--md-space-12);  /* 48px */
    }
}

/* Cards → CTA row in features_container (overrides the generic
   .row + .row above via equal specificity + later source order). */
.md-section-stack > .md-features-grid + .md-features-cta {
    margin-top: var(--md-space-rhythm-body-to-cta-lg);   /* 48px / 3rem */
}

/* Heading row → comparison cards grid. Same intent as the generic
   .row + .row rule above, but .md-comparison__grid is a custom CSS
   grid (not a Bootstrap .row), so the generic selector misses it. */
.md-section-stack > .row + .md-comparison__grid {
    margin-top: var(--md-space-rhythm-block);   /* 64px */
}

@media (max-width: 767.98px) {
    .md-section-stack > .row + .md-comparison__grid {
        margin-top: var(--md-space-12);  /* 48px */
    }
}

/* Comparison cards → CTA row (mirrors the features-grid → features-cta
   pattern above). */
.md-section-stack > .md-comparison__grid + .md-btn-row {
    margin-top: var(--md-space-rhythm-body-to-cta-lg);   /* 48px */
}

/* ==========================================================================
   FAQ — shared accordion (faq_block bloq + faq/index page)
   ========================================================================== */

/* FAQ header (eyebrow/title/description) → Q&A accordion: tight by default
   (no description). Higher specificity (4 classes) so it wins. */
.md-faq-section .md-section-stack > .row + .row {
    margin-top: var(--md-space-4);   /* 1rem / 16px */
}

/* When a description (.fz-lg) is present in the heading row, fall back to
   the standard section-stack rhythm — the extra copy needs more air before
   the accordion. :has() pre-check makes this opt-in per entry. */
.md-faq-section .md-section-stack > .row:has(.fz-lg) + .row {
    margin-top: var(--md-space-rhythm-block);   /* 64px */
}

@media (max-width: 767.98px) {
    .md-faq-section .md-section-stack > .row:has(.fz-lg) + .row {
        margin-top: var(--md-space-12);   /* 48px */
    }
}

/* Brand-styled Bootstrap accordion — separated rounded cards: 2px dark
   border, 20px radius, Roboto question, dark chevron that rotates on open. */
.md-faq-accordion .accordion-item {
    background-color: var(--md-color-white);
    border: var(--md-border-width-2) solid var(--md-color-border-strong);
    border-radius: var(--md-radius-2xl);
    overflow: hidden;
}
.md-faq-accordion .accordion-item + .accordion-item {
    margin-top: var(--md-space-4);
}
.md-faq-accordion .accordion-button,
.md-faq-accordion .accordion-button:not(.collapsed) {
    font-family: var(--md-font-body);
    font-weight: 500;
    font-size: var(--md-font-size-lg);
    line-height: var(--md-line-height-normal);
    color: var(--md-color-dark);
    background-color: var(--md-color-white);
    padding: var(--md-space-6) var(--md-space-8);
    box-shadow: none;
}
.md-faq-accordion .accordion-button:hover {
    background-color: var(--md-color-gray-100);
}
.md-faq-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--md-color-primary);
    outline-offset: -2px;
}
.md-faq-accordion .accordion-button::after,
.md-faq-accordion .accordion-button:not(.collapsed)::after {
    width: 24px;
    height: 24px;
    background-size: 24px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23272e36' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='M3 6l5 5 5-5'/%3e%3c/svg%3e");
}
/* Tighter arrow on mobile — 24px feels oversized next to the smaller
   accordion-button text. */
@media (max-width: 767.98px) {
    .md-faq-accordion .accordion-button::after,
    .md-faq-accordion .accordion-button:not(.collapsed)::after {
        width: 16px;
        height: 16px;
        background-size: 16px;
    }
}
.md-faq-accordion .accordion-body {
    padding: var(--md-space-2) var(--md-space-8) var(--md-space-6);
}
/* Target wrapper + descendants directly. md-reset.css sets
   `p, ul li, ul ol { font-size; line-height }` globally and that wins over
   inheritance from .md-faq-answer when the answer body contains real <p>/<li>. */
.md-faq-answer,
.md-faq-answer p,
.md-faq-answer li {
    font-family: var(--md-font-body);
    font-size: var(--md-font-size-md);
    line-height: var(--md-line-height-relaxed);
    color: var(--md-color-dark);
}
.md-faq-answer p:last-child {
    margin-bottom: 0;
}
.md-faq-answer a {
    color: var(--md-color-primary);
}

/* Mobile: tighten the accordion card — half the inside padding, smaller
   question text + chevron. */
@media (max-width: 767.98px) {
    .md-faq-accordion .accordion-button,
    .md-faq-accordion .accordion-button:not(.collapsed) {
        padding: var(--md-space-3) var(--md-space-4);   /* half of 24/32 */
        font-size: var(--md-font-size-base);            /* 22 → 18 */
    }
    .md-faq-accordion .accordion-body {
        padding: var(--md-space-1) var(--md-space-4) var(--md-space-3);  /* half of 8/32/24 */
    }
    .md-faq-accordion .accordion-button::after,
    .md-faq-accordion .accordion-button:not(.collapsed)::after {
        width: 20px;
        height: 20px;
        background-size: 20px;
    }
    .md-faq-answer,
    .md-faq-answer p,
    .md-faq-answer li {
        font-size: var(--md-font-size-meta);            /* 16px */
    }
}

/* ==========================================================================
   FAQ — full page (faq/index)
   ========================================================================== */

.md-faq-hero {
    background-color: var(--md-color-gray-150);
}

/* Anchor offset so the fixed navbar doesn't cover the heading on jump
   (still useful for deep-links to a category section). */
.md-faq-cat {
    scroll-margin-top: 120px;
}
.md-faq-cat + .md-faq-cat {
    margin-top: var(--md-space-12);
}
.md-faq-cat-title {
    margin-bottom: var(--md-space-5);
}

/* ----------------------------------------
   Stats container (bloqs_v2 {stats_container} block)
   A row of highlighted numbers + labels, split by thin vertical
   rules, on a light band. Child {stat} blocks render .md-stat.
   Numbers wear the accent highlight; items flex-grow equally and
   wrap below 768px (dividers drop on mobile so wrapped rows don't
   show stray edge rules).
   ---------------------------------------- */
.md-stats-section {
    background-color: var(--md-color-gray-150);
}

.md-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: var(--md-space-10);   /* 40px between wrapped rows */
}

.md-stat {
    flex: 1 0 0;
    min-width: 239px;
    max-width: 660px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--md-space-2);            /* 8px number → label */
    padding-inline: var(--md-space-3); /* 12px */
    text-align: center;
    border-right: 2px solid var(--md-color-gray-300);
}

.md-stat:last-child {
    border-right: 0;
}

.md-stat-number {
    font-family: var(--md-font-display);
    font-size: var(--md-font-size-3xl);   /* 41px */
    line-height: 46px;
    color: var(--md-color-dark);
    background-color: var(--md-color-accent);
    padding-inline: 0.15em;                /* highlight hugs the number */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.md-stat-label {
    font-family: var(--md-font-body);
    font-weight: var(--md-font-weight-bold);
    font-size: var(--md-font-size-lg);     /* 22px */
    line-height: 30px;
    color: var(--md-color-dark);
}

@media (max-width: 767.98px) {
    .md-stat {
        border-right: 0;
    }
}

/* ----------------------------------------
   Marquee / scrolling text section
   Single dusty-blue-50 band, text scrolls leftward (enters from
   the right). Section padding matches the exploration page
   (48px top + bottom via --md-space-12). Text is shark-grey-600
   at the display-s clamp. Edge fade via mask-image keeps the
   leading + trailing characters from hitting the section's
   hard edge.

   Used by:
   - scrolling_text_block (bloqs_v2.html)
   - the optional scrolling_text section on case posts
     (case.group/post.html)
   ---------------------------------------- */
section.md-text-anim {
    position: relative;
    overflow: hidden;
    background: var(--md-color-bg-tertiary);
    padding-block: var(--md-space-12);
}

/* Desktop-only outer margin so the banner breathes between sections.
   On mobile/tablet the banner sits flush against neighbours. */
@media (min-width: 992px) {
    section.md-text-anim {
        margin-block: var(--md-space-16);
    }
}

.md-text-anim .marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
            mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.md-text-anim .track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: scroll-text-left 32s linear infinite;
}

.md-text-anim .content {
    flex: 0 0 auto;
    padding-right: 0.6em;
    white-space: nowrap;
    font-family: ClashDisplay-Bold, var(--md-font-display);
    font-weight: 900;
    font-size: var(--md-font-size-display-s);
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--md-color-text-body);
}

@keyframes scroll-text-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .md-text-anim .track {
        animation: none;
    }
}

/* ----------------------------------------
   Tech-stack block
   2-col split: lead content (left) + horizontal-tile grid (right).
   Column structure matches text_and_image. Section sits on the
   gray surface via .md-section--gray (hardcoded in the template);
   tiles are white on top. No hover affordance, no per-item link.
   Items are a Relationship atom (short name `tech_items` in CP)
   pointing at a separate Tech Stack channel. Previous shipping
   attempts (PR #251/#254/#259/#267) all broke because of a MySQL
   row/packet size limit being exceeded on the EE DB; that limit
   has since been raised on both dev and prod (see
   project-bloqs-db-limit-corruption memory).
   ---------------------------------------- */

.md-tech-stack {
    background-color: var(--md-color-bg);          /* themed: .md-section--gray → bg-secondary */
    padding-block: var(--md-section-pad-y, 80px);  /* match other section bloqs' vertical rhythm */
}

.md-tech-stack__grid {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    /* Equalise row heights across the whole grid. With 1fr on an
       auto-height grid, every row resolves to the height of the
       tallest row's content — short-description rows match the
       tallest tile instead of shrinking. */
    grid-auto-rows: 1fr;
    gap: var(--md-space-3);
}

/* xl and up: lock to 2 cols regardless of container width. The
   right-hand column (col-xl-7) is ~660-770px wide at xl, which
   without this rule would fit 3 tiles via auto-fit. We want max 2. */
@media (min-width: 1200px) {
    .md-tech-stack__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.md-tech-tile {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--md-space-4);
    padding: var(--md-space-5);
    border-radius: var(--md-radius-lg);
    background: var(--md-color-white);
    transition: box-shadow var(--md-transition-base);
}

.md-tech-tile:hover {
    box-shadow: var(--md-shadow-lg);
}

.md-tech-tile__logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter var(--md-transition-base);
}

.md-tech-tile:hover .md-tech-tile__logo {
    filter: grayscale(0);
}

.md-tech-tile__body {
    min-width: 0;
}

.md-tech-tile__name {
    margin: 0;
    font-family: var(--md-font-body);
    font-size: var(--md-font-size-md);
    font-weight: var(--md-font-weight-semibold);
    color: var(--md-color-text-body);
    line-height: var(--md-line-height-snug);
}

.md-tech-tile__desc {
    margin: var(--md-space-1) 0 0;
    font-size: var(--md-font-size-meta);
    color: var(--md-color-text-subtle);
    line-height: var(--md-line-height-normal);
}

/* ----------------------------------------
   Big numbers block
   3-up grid of big-display numbers with yellow letterform highlights
   and Roboto-semibold caption labels. Credibility break between
   content sections.

   Hardcoded to .md-section--blue (dusty-blue surface) on the template
   side. If a future instance needs another surface, restore the
   `surface` atom + the {if surface != 'white'}md-section--{surface}{/if}
   pattern in bloqs_v2.html.
   ---------------------------------------- */
section.md-big-numbers {
    background: var(--md-color-bg);   /* re-bound to dusty-blue by .md-section--blue */
    /* Tighter than the unified --md-section-pad-y; 64/48/32 ramp mirrors
       the testimonial pattern's 1 : 0.75 : 0.5 ratio. */
    padding-top:    var(--md-space-16);   /* 64px */
    padding-bottom: var(--md-space-16);
}

/* Wider container only on this block — overrides Bootstrap's narrower
   xxl cap (1320px) so the 3-up row breathes at large viewports. */
section.md-big-numbers > .container {
    max-width: var(--md-container-max);   /* 1440px */
}

@media (max-width: 991.98px) {
    section.md-big-numbers {
        padding-top:    var(--md-space-12);   /* 48px */
        padding-bottom: var(--md-space-12);
    }
}

@media (max-width: 575.98px) {
    section.md-big-numbers {
        padding-top:    var(--md-space-8);    /* 32px */
        padding-bottom: var(--md-space-8);
    }
}

.md-big-numbers__row {
    display: flex;
    /* Items get a fixed width below; space-between distributes them
       flush left / centered / flush right. With equal item widths,
       the middle item is geometrically centered (no free-space drift). */
    justify-content: space-between;
    /* Top-align items so a wrapping label in one cell doesn't push the
       other cells' numbers downward. */
    align-items: start;
    gap: var(--md-space-6);
    text-align: center;
}

.md-big-numbers__item {
    /* Fixed width gives consistent visual rhythm + a predictable wrap
       zone for labels longer than ~3 words. */
    flex: 0 0 auto;
    width: 320px;
}

/* Mobile + tablet (<992px): stack vertically with a bottom divider
   between cards, tighter number-to-label spacing. Desktop (>=992px)
   keeps the original space-between row, no dividers, looser margin. */
@media (max-width: 991.98px) {
    .md-big-numbers__row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--md-space-8);
    }
    .md-big-numbers__item {
        width: 100%;
    }
    .md-big-numbers__item:not(:last-child) {
        padding-bottom: var(--md-space-8);
        border-bottom: 1px solid var(--md-color-gray-200);
    }
    .md-big-numbers__number {
        margin-bottom: var(--md-space-2);
    }
}

.md-big-numbers__number {
    display: inline-block;
    margin: 0 0 var(--md-space-4);
    padding: var(--md-space-2) var(--md-space-1);   /* 8px / 4px */
    font-family: ClashDisplay-Bold, var(--md-font-display);
    font-weight: var(--md-font-weight-black);
    line-height: var(--md-line-height-display);
    font-size: var(--md-font-size-display-s);
    color: var(--md-color-text-heading);
    letter-spacing: var(--md-letter-spacing-tight);
    background: var(--md-color-bg-accent);   /* yellow-500 */
    /* Trim cap-height whitespace so the yellow highlight hugs the
       letterforms instead of the full line-box. Chrome 133+ / Safari
       18.2+; older browsers see a slightly taller highlight, no
       breakage. */
    text-box: trim-both cap alphabetic;
}

.md-big-numbers__label {
    margin: 0;
    font-family: var(--md-font-body);
    font-size: var(--md-font-caption);
    font-weight: var(--md-font-weight-semibold);
    line-height: var(--md-line-height-heading);
    color: var(--md-color-text-body);
    text-wrap: balance;
}

/* ----------------------------------------
   Comparison block (md-comparison)
   Two-card layout for the {comparison_block} bloq. SaaS-style card on the
   left (white bg, gray-300 border, gray X icons), Modus card on the right
   (dusty-blue-50 tinted header, primary-blue border + shadow, white check
   icons). Replaces the legacy {table_block} comparison on /software-op-maat.

   Schema note: each comparison_row child outputs BOTH halves (--saas + --modus)
   because EE Bloqs children can't read parent context (see
   [[project-bloqs-rework-conventions]]). The .md-comparison__card--X
   ancestor selector hides the wrong half via display:none, so each card
   shows only its own column. Doubled DOM, zero a11y/SEO impact (hidden
   half is excluded from the accessibility tree).
   ---------------------------------------- */

.md-comparison__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;   /* overlap via negative margin on the Modus card (see below) */
}

/* Mobile: drop the tilt, swap the two-column grid for a horizontal scroll
   carousel with snap. Modus card shows first (via order); SaaS card peeks
   from the right (~48px = --md-space-12). Padding, icon size, icon-to-text
   gap and body line-height all step down for the narrower viewport. */
@media (max-width: 767.98px) {
    .md-comparison__grid {
        display: flex;
        grid-template-columns: none;
        flex-direction: row;
        gap: var(--md-space-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .md-comparison__card {
        flex: 0 0 calc(100% - var(--md-space-12));
        scroll-snap-align: start;
    }

    .md-comparison__card--modus { order: 0; }
    .md-comparison__card--saas  { order: 1; }

    .md-comparison__card--saas,
    .md-comparison__card--modus {
        transform: none;
    }

    .md-comparison__card__header {
        padding: var(--md-space-6) var(--md-space-6) var(--md-space-4);
    }

    .md-comparison__card__body {
        padding: var(--md-space-6);
        gap: var(--md-space-3);
    }

    .md-comparison__row {
        grid-template-columns: 24px 1fr;
        gap: var(--md-space-1) var(--md-space-3);
    }

    .md-comparison__row::before {
        width: 20px;
        height: 20px;
        background-size: 12px;
    }

    .md-comparison__row__text {
        line-height: var(--md-line-height-snug);
    }
}

.md-comparison__card {
    background: var(--md-color-white);
    border: 2px solid var(--md-color-gray-300);   /* token-gap: border */
    border-radius: var(--md-radius-2xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.md-comparison__card--modus {
    border-color: var(--md-color-primary);
    box-shadow: var(--md-shadow-lg);
}

/* Slight outward tilt. Each card pivots around its OUTER-bottom corner
   (bottom-left for saas, bottom-right for modus) and leans away from the
   centre at the top, while the bottom inner edges overlap. The Modus card
   is pulled left over the SaaS card via negative margin and lifted on top
   via z-index, so the overlap reads as Modus-in-front. */
.md-comparison__card--saas {
    transform-origin: bottom left;
    transform: rotate(-1deg);
}

.md-comparison__card--modus {
    transform-origin: bottom right;
    transform: rotate(1deg);
    margin-left: calc(var(--md-space-2) * -1);   /* -8px overlap into SaaS card */
    position: relative;
    z-index: 1;
}

.md-comparison__card__header {
    padding: var(--md-space-10) var(--md-space-10) var(--md-space-8);
    border-bottom: 1px solid var(--md-color-gray-200);   /* token-gap: border */
}

.md-comparison__card--modus .md-comparison__card__header {
    background: var(--md-color-bg-tertiary);
}

.md-comparison__card__name {
    font-family: var(--md-font-display);
    font-size: var(--md-font-size-xl);
    font-weight: var(--md-font-weight-bold);
    line-height: var(--md-line-height-heading);
    margin: 0;
}

.md-comparison__card__body {
    padding: var(--md-space-8);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--md-space-4);
}

.md-comparison__row {
    display: grid;
    grid-template-columns: 28px 1fr;
    /* Row-gap one step down from --md-space-2 to --md-space-1 (4px) to
       tighten the label-to-text rhythm. Column-gap (icon-to-content)
       unchanged at --md-space-4. */
    gap: var(--md-space-1) var(--md-space-4);
    align-items: start;
}

/* Half-row scoping: each card only shows its own half. The other half is
   rendered (because EE Bloqs children always render the full child
   template) but hidden via display:none — excluded from both layout and
   the accessibility tree, so SR + crawlers see only the visible half. */
.md-comparison__card--saas .md-comparison__row--modus,
.md-comparison__card--modus .md-comparison__row--saas {
    display: none;
}

.md-comparison__row::before {
    content: "";
    grid-row: 1;
    grid-column: 1;
    width: 24px;
    height: 24px;
    border-radius: var(--md-radius-pill);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
    margin-top: 2px;
}

/* Icon SVGs are inline data-URIs so stroke colour is part of the asset
   itself (CSS can't drive an inline SVG stroke). The strokes inside the
   SVGs (%237A828E for SaaS, white for Modus) are component-internal magic
   values; the surrounding circle colour is tokenised via background-color. */
.md-comparison__card--saas .md-comparison__row::before {
    background-color: var(--md-color-gray-200);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A828E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'%3e%3cpath d='M4 4l8 8M12 4l-8 8'/%3e%3c/svg%3e");
}

.md-comparison__card--modus .md-comparison__row::before {
    background-color: var(--md-color-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'%3e%3cpath d='M3 8.5l3.5 3.5L13 5'/%3e%3c/svg%3e");
}

.md-comparison__row__label {
    grid-column: 2;
    margin: 0;
    font-family: var(--md-font-display);
    font-size: var(--md-font-size-lg);
    font-weight: var(--md-font-weight-bold);
    line-height: var(--md-line-height-snug);
}

.md-comparison__row__text {
    grid-column: 2;
    margin: 0;
    color: var(--md-color-text-subtle);
    line-height: var(--md-line-height-body);
}