/* Responsive finishing layer shared by the Dutch and German pages.
   Keep the established desktop design; size mobile content from its container. */
/* Clip decorative full-viewport backgrounds at the main canvas. Unlike hidden,
   clip does not introduce a scroll container or interfere with anchor scrolling. */
.home-page main {
    overflow-x: clip;
}

.route-mobile-summary {
    display: none;
}

@media (min-width: 769px) and (max-width: 1100px) {
    .home-page main > .container {
        width: 100%;
        max-width: none;
        padding-inline: 0;
    }

    .home-page .about-grid {
        width: 88%;
        margin-inline: auto;
    }

    .home-page .team-section,
    .home-page .story-sections {
        width: 100%;
        left: auto;
        right: auto;
        margin-inline: 0;
    }
}

@media (max-width: 768px) {
    :root {
        --mobile-edge: clamp(1rem, 4.8vw, 1.5rem);
    }

    html {
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: calc(90px + env(safe-area-inset-top));
    }

    body.mobile-menu-open {
        touch-action: auto;
    }

    nav {
        padding-left: max(var(--mobile-edge), env(safe-area-inset-left)) !important;
        padding-right: max(var(--mobile-edge), env(safe-area-inset-right)) !important;
    }

    nav .logo {
        min-width: 0;
    }

    nav .logo img {
        max-width: min(180px, 54vw);
        height: auto !important;
        max-height: 54px !important;
        object-fit: contain;
    }

    /* The homepage logo file has transparent margins compensated by its crop. */
    .home-nav .logo img {
        max-width: none;
        max-height: none !important;
    }

    .nav-links {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        transform: translateY(-102%) !important;
        touch-action: pan-y pinch-zoom;
    }

    .nav-links.active {
        transform: translateY(0) !important;
    }

    .nav-links li a {
        min-height: 48px !important;
        line-height: 1.3 !important;
    }

    .nav-links li:nth-child(6) a {
        margin-top: 0.35rem;
    }

    .home-page main > .container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .home-page .team-section,
    .home-page .story-sections,
    .home-page .story-sections > section {
        left: auto;
        right: auto;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        transform: none;
    }

    .home-page .about-grid {
        width: calc(100% - var(--mobile-edge) * 2);
        max-width: 560px;
        padding-inline: 0;
    }

    .home-page #team .section-header,
    .home-page #team .team-grid,
    .home-page #galerij .section-header,
    .home-page #galerij .gallery-full-grid,
    .home-page #route > .section-header,
    .home-page #route > .container,
    .home-page #aanbod .process-panel {
        width: calc(100% - var(--mobile-edge) * 2) !important;
        max-width: 560px !important;
        margin-inline: auto !important;
    }

    .home-page #route > .container {
        padding-inline: 0;
    }

    .home-page #aanbod .process-panel .section-header,
    .home-page #aanbod .process-panel .gallery-grid {
        width: 100% !important;
    }

    .welcome-section {
        padding: 3rem var(--mobile-edge) !important;
    }

    .welcome-content {
        max-width: 560px;
        gap: 1.5rem;
    }

    .home-page .welcome-content h2,
    .home-page .text-column h2,
    .home-page .section-header h2 {
        max-width: 100% !important;
        line-height: 1.16 !important;
        overflow-wrap: break-word;
    }

    .quality-heading h2 span {
        line-height: inherit;
    }

    .home-page .quality-copy p,
    .home-page .section-header p {
        max-width: 100%;
    }

    .quality-metrics {
        margin-top: 0.5rem !important;
        gap: 0 !important;
    }

    .quality-metrics article {
        display: grid !important;
        grid-template-columns: minmax(5.5rem, 0.65fr) minmax(0, 1.35fr);
        align-items: baseline;
        gap: 1rem;
        padding: 1rem 0 !important;
    }

    .quality-metrics strong {
        margin: 0 !important;
        font-size: 1.2rem;
    }

    .quality-metrics span:last-child {
        font-size: 1rem !important;
    }

    .about-section .image-column {
        min-width: 0;
    }

    .about-section .image-column img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .team-grid {
        gap: 1rem !important;
    }

    .team-info h3 {
        font-size: clamp(1.0625rem, 4.6vw, 1.375rem) !important;
        line-height: 1.25;
        overflow-wrap: normal;
    }

    .team-info .role {
        font-size: 0.8125rem !important;
        line-height: 1.55;
    }

    .home-page #team .member-clickable .call-overlay {
        width: 44px;
        height: 44px;
    }

    .home-page .story-sections > section {
        padding-block: 3.5rem !important;
    }

    .gallery-item a {
        min-height: 44px;
    }

    .home-page #route .route-map-layout {
        gap: 1rem;
        padding: clamp(0.875rem, 4vw, 1.25rem);
        border: 1px solid rgba(65, 102, 56, 0.14);
        border-radius: 12px;
        background: rgba(255, 254, 250, 0.9);
    }

    .home-page #route > .section-header {
        margin-bottom: 1.5rem;
    }

    .home-page #route .germany-map-container {
        min-height: 0;
        height: auto;
        padding: 0;
    }

    .home-page #route .map-depth-scene {
        width: min(100%, 260px);
        max-width: 260px;
        margin-inline: auto;
    }

    .home-page #route .route-info-panel {
        gap: 1.25rem;
    }

    .home-page #route .route-description > p {
        display: none;
    }

    .home-page #route .route-mobile-summary {
        display: grid;
        gap: 0.5rem;
    }

    .home-page #route .route-mobile-summary strong {
        color: #203b2c;
        font-size: 1.0625rem;
        line-height: 1.45;
    }

    .home-page #route .route-mobile-summary p {
        margin: 0;
        color: #465449;
        font-size: 0.9375rem;
        line-height: 1.65;
    }

    .home-page #route .region-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        border-top: 0;
    }

    .home-page #route .region-card {
        min-width: 0;
        min-height: 52px;
        padding: 0.75rem 0.625rem;
        border: 1px solid #cdd8c3;
        border-radius: 3px;
        background: #eef2e6;
        box-shadow: none;
        transform: none;
        font: 600 0.875rem / 1.45 'Open Sans', sans-serif;
        hyphens: none;
    }

    .home-page #route .region-name {
        hyphens: none;
        word-break: normal;
        overflow-wrap: normal;
        text-decoration: none;
    }

    .home-page #route .region-card:is(:hover, :focus-visible, .highlight) {
        background: #e3ecd9;
        border-color: #91a681;
        border-radius: 3px;
    }

    .region-card h3 {
        font-size: 0.875rem;
        line-height: 1.45;
        hyphens: auto;
        overflow-wrap: break-word;
    }

    .footer-container {
        width: calc(100% - var(--mobile-edge) * 2) !important;
        max-width: 560px;
        padding-inline: 0;
    }

    .footer-content {
        max-width: none !important;
    }

    .footer-contact-link,
    .footer-quick a {
        min-height: 44px;
        padding-block: 0.65rem !important;
    }

    .footer-quick ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem 1rem;
    }

    .footer-col li {
        min-width: 0;
    }

    .footer-quick a {
        width: 100%;
        line-height: 1.5;
    }

    .whatsapp-badge {
        display: none !important;
    }

    .lightbox-overlay .close-lightbox {
        top: max(0.75rem, env(safe-area-inset-top));
        right: max(0.75rem, env(safe-area-inset-right));
        width: 48px;
        height: 48px;
    }

    /* Touch scrolling and keyboard focus must never depend on a reveal. */
    body.motion-ready .reveal,
    body.motion-ready .reveal.active {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* A single photo hero from small phones through portrait tablets. Its height
   can grow with larger text instead of clipping content in a fixed box. */
@media (max-width: 768px) {
    #home {
        --hero-wave-height: 62px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-height: 520px !important;
        height: auto !important;
        max-height: none;
        padding: clamp(2.5rem, 9vw, 4rem) var(--mobile-edge)
            calc(var(--hero-wave-height) + 2rem) !important;
    }

    #home .hero-slider {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    #home .hero-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 90% 55%;
    }

    #home .hero-overlay {
        display: block;
        background: linear-gradient(100deg, rgba(8, 25, 15, 0.8), rgba(8, 25, 15, 0.38));
    }

    #home .hero-content {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        padding: 0 !important;
    }

    #home .hero-content h1 {
        font-size: clamp(2rem, 9.5vw, 3.4rem) !important;
        line-height: 1.08 !important;
    }

    #home .hero-content h1 span {
        white-space: normal;
        overflow-wrap: break-word;
    }

    #home .hero-content p {
        max-width: 30em;
        font-size: 1.0625rem !important;
        line-height: 1.65;
    }

    #home .hero-kicker {
        max-width: 34em;
        font-size: 0.75rem;
        line-height: 1.6;
    }
}

@media (max-width: 768px) and (max-height: 720px) {
    .nav-links {
        padding-top: calc(5.2rem + env(safe-area-inset-top)) !important;
    }

    .nav-links::before,
    .nav-links::after {
        display: none;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    #home {
        min-height: 420px !important;
    }
}

@media (min-width: 769px) and (max-width: 1100px) and (max-height: 520px) {
    #home {
        --hero-wave-height: 54px;
        min-height: 400px !important;
        height: auto !important;
        padding: 2rem 5vw 5rem !important;
    }

    #home .hero-content {
        width: min(100%, 520px);
    }

    #home .hero-kicker {
        margin-bottom: 0.75rem;
    }

    #home .hero-content h1 {
        margin-bottom: 0.75rem;
        font-size: clamp(2rem, 4.5vw, 2.6rem) !important;
        line-height: 1.08 !important;
    }

    #home .hero-content p {
        margin-bottom: 1rem;
    }
}

@media (max-width: 360px) {
    .home-page #route .region-cards,
    .footer-quick ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-links,
    .nav-links.active,
    .nav-links li,
    .nav-links.active li {
        animation: none !important;
        transition: none !important;
    }

    .nav-links.active li {
        opacity: 1;
        transform: none;
    }
}

/* Let enlarged browser text determine its own line breaks and row heights. */
.home-page :is(.quality-heading, .quality-copy) {
    min-width: 0;
    max-width: 100%;
}

.home-page .quality-copy p,
.home-page .quality-heading h2 span,
.home-page .team-info h3,
.contact-grid-layout :is(h1, h2, h3, label) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.home-page #home .hero-content h1 span {
    white-space: normal;
    overflow-wrap: anywhere;
}

.home-page #home .hero-cta {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.home-page #route :is(.section-header h2, .route-description p, .region-name) {
    overflow-wrap: anywhere;
}

.home-page #route .region-name {
    min-width: 0;
    max-width: 100%;
}

.home-page #aanbod .process-panel .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.home-page #aanbod .gallery-card {
    grid-template-columns: min(2.6rem, 44px) minmax(0, 1fr);
    column-gap: min(0.8rem, 16px);
}

.home-page #aanbod :is(.card-content, .card-content h3, .card-content p) {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (min-width: 769px) {
    nav {
        height: auto !important;
        min-height: 74px;
    }

    .home-nav {
        min-height: 80px;
    }

    nav .nav-links {
        min-width: 0;
        flex-wrap: wrap;
    }

    nav .nav-links > li {
        min-width: 0;
    }

    nav .nav-links > li > a {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    header[id],
    section[id],
    footer[id] {
        scroll-margin-top: calc(var(--site-nav-height, 124px) + 12px);
    }

    .home-page #home {
        height: auto !important;
        min-height: max(clamp(650px, 76vh, 780px), 36.8vw) !important;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .home-page #home {
        min-height: clamp(530px, 78vw, 640px) !important;
    }
}

@media (min-width: 769px) and (max-width: 1100px) and (max-height: 520px) {
    .home-page #home {
        min-height: 400px !important;
    }
}