@import 'variables.css';
/* =========================================
   1. UTILITY & BASE
   ========================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background: var(--white-seku);
    font-family: var(--font-body);
    color: var(--black-seku);
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
}
body a {
    color: var(--black-seku);
}
img {
    max-width: 100%;
    display: block;
}
a {
    text-decoration: none;
    color: inherit;
}
section.no-padding-top {
    padding-top: 0 !important
}
section.no-padding-bottom {
    padding-bottom: 0 !important
}
/* =========================================
   2. BUTTONS & TAGS
   ========================================= */

/* Tags */

.tag {
    background: var(--orange-seku);
    border-radius: 4px;
    padding: 8px 16px;
    color: var(--white-seku);
    font-family: var(--font-semibold, sans-serif);
    font-size: 14px;
    line-height: 170%;
    display: inline-flex;
    font-weight: 600;
    width: fit-content;
}
.tag.dark {
    background: var(--black-seku);
}
.tag.white {
    background: var(--white-seku);
    color: var(--black-seku);
}
.tag.grey {
    background: var(--grey-seku);
    color: var(--black-seku);
}
/* --- Common Button Transitions --- */

.button-primary, .button-white, .button-black {
    transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}
.button-circle, .button-white-circle, .button-black-circle {
    transition: border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    padding: 12px;
    width: 3.1875rem;
    height: 3.1875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button-circle img, .button-white-circle img, .button-black-circle img, .button-circle svg, .button-white-circle svg, .button-black-circle svg {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- Primary Button (Orange) --- */

.button-text {
    background: var(--orange-seku);
    border-radius: 4px;
    padding: 12px 24px;
    color: var(--white-seku);
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 3.1875rem;
    transition: all 0.3s ease;
}
.button-circle {
    background: var(--orange-seku);
}
.button-primary:hover {
    gap: 0.0625rem;
}
.button-primary:hover .button-circle {
    border-radius: 0 0.25rem 0.25rem 0;
}
.button-primary:hover .button-circle img {
    transform: rotate(45deg);
}
/* --- White Button --- */

.button-white .button-text {
    background: var(--white-seku);
    color: var(--black-seku);
}
.button-white-circle {
    background: var(--white-seku);
}
.button-white:hover {
    gap: 0.0625rem;
}
.button-white:hover .button-white-circle {
    border-radius: 0 0.25rem 0.25rem 0;
}
.button-white:hover .button-white-circle img {
    transform: rotate(45deg);
}
.button-white:hover .button-text, .button-primary:hover .button-text, .button-black:hover .button-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* --- Black Button --- */

.button-black .button-text {
    background: var(--black-seku);
    color: var(--white-seku);
}
.button-black-circle {
    background: var(--black-seku);
}
.button-black:hover {
    gap: 0.0625rem;
}
.button-black:hover .button-black-circle {
    border-radius: 0 0.25rem 0.25rem 0;
}
.button-black:hover .button-black-circle img, .button-black:hover .button-black-circle svg {
    transform: rotate(45deg);
}
/* Link States Overrides */

a.button-white:visited, a.button-white:hover {
    color: var(--black-seku);
}
a.button-black, a.button-black:visited, a.button-black:hover, a.button-black:active {
    color: var(--white-seku);
}
/* =========================================
   3. NAVIGATION (MOBILE)
   ========================================= */

.topnav-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 24px;
    background: var(--white-seku);
    border-bottom: 0.5px solid #F2F2F2;
    position: sticky;
    top: 0;
    z-index: 100;
}
.topnav-desktop {
    display: none;
}
.topnav-desktop .site-logo-link img {
    display: block;
    height: 100%;
    width: 100%;
    max-width: 19.6875rem;
}
.topnav-mobile .site-logo-link img, .mobile-logo a img {
    display: block;
    height: 100%;
    width: 100%;
    max-width: 14.18756rem;
}
.inner-topnav {
    width: 100%;
    display: flex;
    max-width: 112rem;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}
.inner-topnav .site-logo-link {
    max-width: 200px;
}
/* =========================================
   4. HERO SECTION
   ========================================= */

.hero {
    padding: 388px 32px 48px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 88px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 851px;
    position: relative;
    overflow: hidden;
    background: var(--BLUE-LINEAR---SEKU, linear-gradient(34deg, #032D47 31.75%, #1D4F6E 87.97%));
}
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hero-gradient);
    z-index: 1;
}
.hero-content, .scroll-down {
    position: relative;
    z-index: 2;
}
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-self: stretch;
}
.hero-title {
    color: var(--white-seku);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 32px;
    line-height: 140%;
    margin: 0;
}
.hero-subtitle {
    color: var(--WHITE---SEKU, #FFF);
    font-family: Archivo;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    margin-top: 2rem;
    margin-bottom: 0;
}
.hero-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.scroll-down {
    border: 1px solid var(--white-seku);
    border-radius: 4px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body:not(.home) .hero {
    height: unset;
    min-height: unset;
    padding: 4.5rem 1.5rem;
}
body:not(.home) .scroll-down {
    display: none;
}
.hero.white-bg-header {
    background: #fff;
}
.hero.white-bg-header .hero-title {
    color: #222220;
}
.hero.white-bg-header .hero-subtitle {
    color: #222220;
    max-width: 39.75rem;
}
body .site .hero.has-breadcrumbs {
    padding-top: 2.5rem;
}
/* =========================================
   5. INTRO & STATS
   ========================================= */

.section-intro {
    padding: 5.625rem 0;
    display: flex;
    flex-direction: column;
    gap: 96px;
}
.intro-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 56px;
    align-items: flex-start;
    width: calc(100% - 3rem);
    max-width: 91rem;
    margin-left: auto;
    margin-right: auto;
}
.section-services {
    padding: 7rem 0;
}
.services-inner {
    display: flex;
    flex-direction: column;
    gap: 90px;
    width: calc(100% - 3rem);
    max-width: 91rem;
    margin-left: auto;
    margin-right: auto;
}
.gallery-inner {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    width: calc(100% - 3rem);
    max-width: 91rem;
    margin-left: auto;
    margin-right: auto;
}
.gallery-inner .section-desc {
    margin-bottom: 0;
}
.section-news {
    padding: 7rem 0;
}
.news-inner {
    display: flex;
    flex-direction: column;
    gap: 90px;
    width: calc(100% - 3rem);
    max-width: 91rem;
    margin-left: auto;
    margin-right: auto;
}
.stats-container {
    width: calc(100% - 3rem);
    max-width: 91rem;
    margin-left: auto;
    margin-right: auto;
}
.intro-paragraph {
    font-family: var(--font-light, sans-serif);
    font-size: 24px;
    line-height: 170%;
    font-weight: 300;
    color: var(--black-seku);
    margin: 0;
}
.intro-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.stats-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.stat-item {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%, 0 calc(100% - 2rem));
    background-color: #F2F2F2;
}
.stat-content {
    position: relative;
    z-index: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stat-value {
    font-family: var(--font-heading);
    font-size: 64px;
    line-height: 120%;
    color: var(--black-seku);
    font-weight: 400;
}
.stat-description {
    font-size: 12px;
    line-height: 170%;
    max-width: 250px;
    color: var(--black-seku);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    /* 1.4875rem */
}
.s-stat-title .stat-value {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 1.75rem */
    letter-spacing: -0.0125rem;
}
.s-stat-title .stat-content {
    gap: 2.5rem;
    padding-bottom: 2rem;
    height: auto
}
.s-stat-title .stat-item {
    height: auto;
}
.contact-stats .stat-content {
    gap: 1rem;
}
.contact-stats .stat-content a {
    text-decoration: underline;
}
.contact-stats .stat-content a:hover {
    text-decoration: unset
}
.contact-form {
    width:100%;
    max-width:41.25rem;
    margin:0 auto;
}
.contact-section-seku  {
        width: calc(100% - 3rem);
    max-width: 91rem;
    margin-left: auto;
    margin-right: auto;
    gap: 2.5rem;
    display: flex
;
    flex-direction: column;
}
.contact-section-seku  .stats-container  {
    width:100%;

}
.gform_wrapper.gravity-theme input[type=color], .gform_wrapper.gravity-theme input[type=date], .gform_wrapper.gravity-theme input[type=datetime-local], .gform_wrapper.gravity-theme input[type=datetime], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=month], .gform_wrapper.gravity-theme input[type=number], .gform_wrapper.gravity-theme input[type=password], .gform_wrapper.gravity-theme input[type=search], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=time], .gform_wrapper.gravity-theme input[type=url], .gform_wrapper.gravity-theme input[type=week], .gform_wrapper.gravity-theme select, .gform_wrapper.gravity-theme textarea {
    padding: 1rem;
    border-radius: 0 !important;
    border-color:#fff;
    font-size: 1rem;
    line-height:1.5rem;
}
.contact-form .gform_wrapper {width:100%;}
.contact-form-inner {
    display: flex;
    width:100%;
    padding: 2.5rem 2.5rem 4.5rem 2.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    flex: 1 0 0;
    background: #F2F2F2;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%, 0 calc(100% - 2rem));
    background-color: #F2F2F2;

font-family: Museo;
}
 .contact-form  .gform_wrapper.gravity-theme .gform_footer {
padding-bottom: 0;
}
.contact-form .gform_wrapper.gravity-theme .gform_footer button{
    padding: 0;
    margin:0;
    border:0;
cursor: pointer;
    background: transparent;
}
.contact-form .gform_wrapper.gravity-theme .gfield_label {
    font-weight: 400;
    margin-top: 0.5rem;
}
body .gform_wrapper.gravity-theme .gfield_required {
    color: var(--black-seku);
}
.contact-form .gform_title {
    color: var(--BLACK---SEKU, #222220);
/* Heading/H3 */
font-family: Museo;

font-style: normal;
font-weight: 400;
line-height: 120%; /* 3.6rem */
letter-spacing: -0.03rem;
margin-bottom: 1rem;
}
.contact-form .gform_required_legend {
    display: none;
}
/* =========================================
   6. GALLERY
   ========================================= */

.section-gallery {
    padding: 7rem 0;
    display: flex;
    flex-direction: column;
    gap: 96px;
    align-items: center;
    overflow-x: hidden;
}
.gallery-wrapper {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    justify-content: flex-start;
    width: 100%;
}
.pagination {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
.dots {
    display: flex;
    gap: 17px;
}
.dot {
    width: 8px;
    height: 8px;
    border: 2px solid var(--black-seku);
    border-radius: 4px;
}
.dot.active {
    border-width: 4px;
}
.page-count {
    border: 1px solid var(--black-seku);
    border-radius: 4px;
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    height: 54px;
}
/* =========================================
   7. SERVICES
   ========================================= */

.section-services {
    display: flex;
    flex-direction: column;
    gap: 90px;
}
.services-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    margin: 0 auto;
    justify-content: center;
}
.section-title {
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 140%;
    font-weight: 400;
    letter-spacing: -0.035rem;
}
.section-desc, .section-description {
    color: var(--dark-grey-seku);
    font-size: 16px;
    line-height: 170%;
}
.services-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}
.services-accordion {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.service-item.active, .service-item.collapsed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
}
.service-card-title, .service-card-title2 {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--black-seku);
}
.service-card-title {
    font-weight: 400;
}
.service-card-link a {
    color: #000;
}
.service-card-link a:hover {
    text-decoration: unset;
}
.service-card-description ul {
    list-style-position: inside;
    margin-left: unset;
}
.services-images, .desktop-only {
    display: none;
}
.bekijk-vastgoedonderhoud {
    text-decoration: underline;
    font-family: var(--font-medium, sans-serif);
    color: var(--black-seku);
}
.line-5 {
    border-top: 1px solid var(--dark-grey-seku);
    width: 100%;
    height: 1px;
    margin-bottom: 24px;
}
/* Services Simple Layout (Mobile) */

.services-cards {
    display: flex;
    flex-direction: column-reverse;
    gap: 48px;
    align-items: center;
    width: 100%;
}
.service-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.service-card-description {
    margin-top: 1.5rem
}
.service-image-wrapper {
    position: relative;
    width: 100%;
    height: auto;
}
.vector-3 {
    width: 100%;
    height: auto;
}
.services-cards .vector-4 {
    display: none;
}
/* =========================================
   8. PROJECTS (Blue)
   ========================================= */

.section-projects {
    background: var(--blue-linear-seku);
    position: relative;
    overflow: hidden;
}
.bg-graphics {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: none;
}
.projects-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 96px;
    align-items: center;
}
.white-text {
    color: var(--white-seku);
}
.project-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 32px;
    padding: 0;
}
.project-image-container img {
    width: 100%;

    clip-path: polygon(0 0, calc(100% - 8rem) 0, 100% 8rem, 100% 100%, 0 100%);
}
.project-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}
.project-info-card {
    background: transparent;
    color: var(--white-seku);
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(6px);
    padding: 2rem;
    clip-path: polygon( 0 0, calc(100% - 4rem) 0, 100% 4rem, 100% 100%, 0 100%);
}
.project-details-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.project-meta-row {
    display: flex;
    gap: 8px;
    font-size: 14px;
    align-items: center;
}
.project-address {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    word-wrap: break-word;
}
.project-text {
    line-height: 170%;
    font-size: 16px;
}
.project-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}
.project-hero-image-wrapper {
    max-height: 49.875rem;
    overflow: hidden;
}
.project-hero-image-wrapper img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* =========================================
   9. PROJECTS OVERVIEW (New)
   ========================================= */

.section-projects-overview {
    padding: 104px 0 152px;
    background: var(--white-seku);
}
.overview-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 24px;
}
.filter-wrapper {
    margin-bottom: 32px;
}
.filter-label {
    font-family: var(--font-heading);
    font-size: 40px;
    margin-bottom: 32px;
    color: var(--black-seku);
    font-weight: 400;
}
.filter-tools {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.filter-pill {
    background: transparent;
    border: 1px solid var(--black-seku);
    border-radius: 4px;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--black-seku);
    line-height: 1.5rem;
}
.filter-pill:hover, .filter-pill.active {
    background: var(--black-seku);
    color: var(--white-seku);
}
.search-bar {
    display: flex;
    align-items: center;
    background: var(--grey-seku);
    padding: 12px 24px;
    border-radius: 4px;
    gap: 12px;
    width: 100%;
    max-width: 284px;
}
.section-jobs-overview .search-bar {
    background-color: #fff;
}
.search-bar input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 18px;
    font-family: var(--font-light);
    width: 100%;
}
.jobs-count {
    text-align: right;
}
.results-count {
    text-align: right;
    margin-bottom: 56px;
    font-family: var(--font-body);
    color: var(--black-seku);
}
.masonry-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.masonry-col {
    display: flex;
    gap: 7rem;
    flex-direction: column;
}
/* Project Card Overview Style */

.project-card-overview {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}
.project-card-image-link {
    display: block;
    width: 100%;
    overflow: hidden;
}
.image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 659 / 617;
}
.project-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.project-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.meta-row {
    display: flex;
    gap: 8px;
    color: var(--black-seku);
    font-size: 14px;
}
.project-address-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 400;
    margin: 0;
    line-height: 120%;
    word-break: break-all;
}
.project-description {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 170%;
    color: var(--black-seku);
}
.project-action .button-primary-outline {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--black-seku);
    color: var(--white-seku);
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    width: fit-content;
}
.btn-circle {
    background: var(--black-seku);
    border: 1px solid var(--white-seku);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* =========================================
   10. NEWS
   ========================================= */

.section-news {
    padding: 7rem 0;
    display: flex;
    flex-direction: column;
    gap: 90px;
}
body .services-header {
    margin-bottom: 0;
}
.section-link {
    text-align: right;
    text-decoration: underline;
    font-family: var(--font-medium, sans-serif);
    width: 100%;
    display: block;
}
body .section-link:hover {
    text-decoration: unset;
}
.section-news .section-link {
    text-align: center;
    align-items: center;
    justify-content: center;
}
.news-grid-wrapper {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.news-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.news-img {
    width: 100%;
    height: 204px;
    object-fit: cover;
}
.news-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--grey-seku);
}
.news-card-title {
    font-family: var(--font-medium, sans-serif);
    font-size: 24px;
    line-height: 170%;
    margin: 0;
    font-weight: 500;
}
.news-card-description {
    font-size: 18px;
    line-height: 170%;
}
.news-card-link {
    text-decoration: underline;
    font-weight: 500;
    font-family: var(--font-medium, sans-serif);
    font-size: 16px;
    display: block;
    margin-top: auto;
}
body .news-card-link {
    color: #000;
}
.news-list-column {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.news-list-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.news-list-text {
    font-family: var(--font-medium, sans-serif);
    font-size: 18px;
    line-height: 170%;
    margin: 8px 0;
}
.line-2 {
    border-top: 1px solid var(--dark-grey-seku);
    width: 100%;
}
.text5 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* =========================================
   11. FAQ
   ========================================= */

.section-faq {
    padding: 152px 24px;
    display: flex;
    flex-direction: column;
    gap: 96px;
    background: var(--grey-seku);
    position: relative;
    overflow: hidden;
    background-color: var(--grey-seku);
    background-image: url(https://sekubouw.nl/wp-content/uploads/2025/12/background-overlay2.svg);
    background-repeat: no-repeat;
    background-position: center top -5rem;
    background-size: 116%;
}
.contact-section {
    background-color: var(--grey-seku);
    background-image: url(https://sekubouw.nl/wp-content/uploads/2025/12/background-overlay2.svg);
    background-repeat: no-repeat;
    background-position: center top -5rem;
    background-size: 116%;
}
.section-projects.section-gallery {
    background-image: url(https://sekubouw.nl/wp-content/uploads/2025/12/bg-overlay.svg), linear-gradient(33.54deg, rgba(3, 45, 71, 1) 0%, rgba(29, 79, 110, 1) 99.76%);
    background-repeat: no-repeat, no-repeat;
    background-position: center top -4rem, center center;
    background-size: cover;
}
.bg-graphics-faq {
    display: none !important;
}
.faq-header {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: 0 auto 5.625rem auto;
}
.faq-titles {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
.section-faq .section-link {
    text-align: center;
    justify-content: center;
    color: var(--black-seku);
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.faq-item {
    background: var(--white-seku);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.faq-trigger {
    width: 100%;
    padding: 32px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 24px;
}
.faq-question {
    font-family: var(--font-medium, sans-serif);
    font-size: 18px;
    line-height: 170%;
    color: var(--black-seku);
    font-weight: 500;
}
.faq-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.faq-icon img {
    width: 24px;
    height: 24px;
    display: block;
    transition: transform 0.3s ease;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer-inner {
    padding: 0 40px 32px 40px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 170%;
    color: var(--black-seku);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.faq-item.is-open .faq-icon img {
    transform: rotate(180deg);
}
.faq-item.is-open .faq-answer-inner {
    opacity: 1;
    transform: translateY(0);
}
/* =========================================
   12. CONTENT LEFT/RIGHT
   ========================================= */

.section-content-lr {
    padding: 90px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--white-seku);
}
.content-lr-container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
}
.content-lr-left {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
}
.content-lr-heading {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.content-lr-title {
    color: var(--black-seku);
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 130%;
    letter-spacing: -0.01em;
    font-weight: 400;
    margin: 0;
}
.content-lr-right {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.content-lr-description {
    color: var(--black-seku);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 170%;
    font-weight: 400;
    margin: 0;
}
/* =========================================
   13. CONTACT CTA
   ========================================= */

.contact-section {
    padding: 7rem 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    position: relative;
    overflow: visible;
    background-color: var(--grey-seku);
}
.contact-container {
    padding: 0 0;
    display: flex;
    flex-direction: column;
    gap: 58px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    position: relative;
    width: calc(100% - 3rem);
    max-width: 91rem;
    margin-left: auto;
    margin-right: auto;
}
.contact-blob {
    position: absolute;
    left: 24px;
    top: 111px;
    width: 345px;
    height: 637px;
    z-index: 0;
    overflow: visible;
    display: none;
}
.contact-card {
    position: relative;
    z-index: 1;
    background: var(--white-seku);
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    padding: 3rem 2rem;
}
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    position: relative;
}
.contact-text-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
}
.contact-title {
    font-size: 32px;
    font-family: var(--font-heading);
    color: var(--black-seku);
    line-height: 120%;
    letter-spacing: -0.01em;
    font-weight: 400;
}
.contact-description {
    font-size: 16px;
    line-height: 170%;
    color: var(--black-seku);
    font-family: var(--font-body);
    font-weight: 400;
    margin-bottom: 0;
}
.contact-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.contact-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}
/* =========================================
   14. FOOTER
   ========================================= */

.footer {
    background: var(--BLUE-LINEAR---SEKU, linear-gradient(34deg, #032D47 31.75%, #1D4F6E 87.97%));
    padding: 96px 24px 48px;
    color: var(--white-seku);
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.footer-top {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
}
.footer-logo-section {
    display: flex;
    flex-direction: column;
    gap: 56px;
    align-items: center;
    text-align: center;
    width: 100%;
}
.footer-logo-section img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-bottom: 0 !important;
}
.footer-logo-section p {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 170%;
    margin: 0;
    color: var(--white-seku);
    max-width: 100%;
}
.footer-logo-section .hero-actions {
    justify-content: center;
    width: 100%;
}
.footer-links-grid {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
    align-items: center;
    text-align: center;
}
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}
.footer-col h4 {
    color: var(--dark-grey-seku);
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    line-height: 140%;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.footer-col li {
    margin: 0;
    padding: 0;
}
.footer-col a {
    display: block;
    font-family: var(--font-light);
    font-size: 16px;
    line-height: 170%;
    color: var(--white-seku);
    text-decoration: none;
    font-weight: 300;
    padding: 4px 0;
}
.footer-col a:hover {
    text-decoration: underline;
}
.footer-legal-nav a:hover {
    color: #fff;
}
.socials {
    display: flex;
    gap: 32px;
    justify-content: center;
    margin-top: 0;
    padding-bottom: 24px;
}
body .social-link:hover {
    color: #fff;
}
body .social-link {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--dark-grey-seku);
    font-family: var(--font-light);
    font-size: 16px;
    line-height: 170%;
    font-weight: 300;
}
.social-link span {
    display: inline-block;
}
.footer-bottom {
    border-top: 1px solid var(--dark-grey-seku);
    padding-top: 24px;
    text-align: center;
    color: var(--dark-grey-seku);
    font-family: var(--font-light);
    font-size: 14px;
    line-height: 170%;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
.footer-bottom-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.footer-legal-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.footer-legal-nav a, .cookie-settings {
    color: var(--dark-grey-seku);
    text-decoration: none;
}
.copyright {
    color: var(--dark-grey-seku);
}
.credits {
    color: var(--dark-grey-seku);
}
body .credits a {
    color: var(--dark-grey-seku);
}
.vector-4 {
    display: none
}
/* =========================================
   15. PROJECT DETAIL HEADER (Mobile)
   ========================================= */

.project-header {
    background: var(--blue-linear-seku);
    /* De blauwe gradient */
    padding: 2.5rem 24px 48px;
    /* Padding uit iPhone design */
    position: relative;
    overflow: hidden;
    color: var(--white-seku);
}
.project-header-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: var(--site-max-width);
    margin: 0 auto;
}
/* Achtergrond Graphics */

.header-bg-graphics {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.header-bg-graphics img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Navigatie Top (Breadcrumbs + Terug knop) */

.project-nav-top {
    display: flex;
    flex-direction: column;
    /* Mobiel onder elkaar */
    gap: 24px;
    align-items: flex-start;
}
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--white-seku);
    flex-wrap: wrap;
}
.crumb-arrow {
    width: 16px;
    height: 16px;
    display: block;
}
body .back-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white-seku);
    font-family: var(--font-body);
    font-size: 16px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.back-link:hover {
    opacity: 0.8;
}
/* Header Content */

.project-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centraal op mobiel? In design lijkt het links of center */
    text-align: center;
    gap: 32px;
    margin-top: 24px;
}
.project-header-content .tag {
    background: var(--grey-seku);
    color: var(--black-seku);
}
.project-meta-large {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 14px;
    /* Klein op mobiel */
    justify-content: center;
    font-family: var(--font-light);
    color: var(--white-seku);
}
.project-main-title {
    font-family: var(--font-heading);
    /* Museo 500 */
    font-size: 24px;
    /* 24px op mobiel */
    line-height: 140%;
    margin: 0;
    font-weight: 400;
    text-align: center;
}
.project-header-container .heading-2 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
    align-items: center;
}
/* =========================================
   16. PROJECT SPECS GRID (Mobile)
   ========================================= */

.section-project-specs {
    width: calc(100% - 3rem);
    max-width: 91rem;
    margin-left: auto !important;
    margin-right: auto !important;
    margin: 0 auto;
}
.specs-grid {
    display: flex;
    flex-direction: column;
    /* Onder elkaar op mobiel */
    gap: 40px;
}
.spec-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Ruimte tussen label en waarde */
    width: 100%;
    position: relative;
}
.spec-label {
    font-family: var(--font-body);
    /* Archivo Regular */
    font-size: 12px;
    /* Tiny normal */
    line-height: 170%;
    color: var(--black-seku);
    opacity: 1;
}
.spec-value {
    font-family: var(--font-heading);
    /* Museo 500 */
    font-size: 14px;
    /* Klein op mobiel */
    line-height: 140%;
    color: var(--black-seku);
    font-weight: 400;
}
/* =========================================
   17. TESTIMONIAL / QUOTE (Mobile)
   ========================================= */

.section-testimonial {
    padding: 76px 24px;
    background: var(--white-seku);
    display: flex;
    justify-content: center;
}
.testimonial-container {
    display: flex;
    flex-direction: column;
    gap: 66px;
    /* Ruimte tussen tekst en auteur op mobiel */
    width: 100%;
    max-width: 1196px;
    /* Max breedte uit desktop design */
    align-items: center;
    /* Centraal uitlijnen */
}
/* De Quote Tekst */

.testimonial-quote {
    font-family: var(--font-heading);
    /* Museo 500 */
    font-size: 24px;
    /* Mobiel grootte */
    line-height: 140%;
    letter-spacing: -0.01em;
    color: var(--black-seku);
    margin: 0;
    text-align: left;
    /* Links uitgelijnd in design */
    width: 100%;
}
/* Auteur Sectie */

.testimonial-author {
    display: flex;
    flex-direction: column;
    /* Onder elkaar op mobiel */
    gap: 36px;
    width: 100%;
    align-items: flex-start;
    /* Links uitlijnen */
}
/* Auteur Afbeelding / Logo */

.author-image img {
    width: 158px;
    /* Vaste breedte uit design */
    height: auto;
    object-fit: contain;
    display: block;
}
/* Auteur Meta Data */

.author-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.author-name {
    font-family: var(--font-body);
    /* Archivo */
    font-weight: 400;
    /* Regular */
    font-size: 14px;
    line-height: 170%;
    color: var(--black-seku);
}
.author-position {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 170%;
    color: var(--black-seku);
    opacity: 0.5;
    /* Design heeft 50% opacity */
}
/* =========================================
   RANKMATH BREADCRUMBS STYLING
   ========================================= */

.breadcrumbs-wrapper {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--white-seku);
}
.rank-math-breadcrumb, .rank-math-breadcrumb a {
    color: var(--white-seku);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease;
}
.rank-math-breadcrumb a:hover {
    opacity: 0.8;
    text-decoration: underline;
}
.rank-math-breadcrumb>p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.white-bg-header .rank-math-breadcrumb, .white-bg-header .rank-math-breadcrumb a {
    color: #000;
}
.white-bg-header .rank-math-breadcrumb .separator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M9.75398 7.9667L4.55181 2.76453C4.41626 2.62898 4.34787 2.46025 4.34665 2.25836C4.34531 2.05648 4.41237 1.88353 4.54781 1.73953C4.69448 1.59286 4.86943 1.51953 5.07265 1.51953C5.27587 1.51953 5.44948 1.59286 5.59348 1.73953L11.033 7.17103C11.1463 7.28436 11.2285 7.41009 11.2795 7.5482C11.3306 7.68642 11.3561 7.82592 11.3561 7.9667C11.3561 8.10748 11.3306 8.24698 11.2795 8.3852C11.2285 8.52331 11.1463 8.64903 11.033 8.76236L5.58081 14.2145C5.43415 14.3612 5.26265 14.4318 5.06631 14.4262C4.86998 14.4206 4.69848 14.3445 4.55181 14.1979C4.41626 14.0512 4.3457 13.8797 4.34015 13.6834C4.33459 13.487 4.40515 13.3155 4.55181 13.1689L9.75398 7.9667Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* De Separator (scheidingsteken) */

.rank-math-breadcrumb .separator {
    /* Verberg het standaard tekst-scheidingsteken (bijv. '-' of '/') */
    font-size: 0;
    content: "";
    /* Afmetingen & Positie */
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 16px;
    /* Ruimte links en rechts van de pijl */
    vertical-align: middle;
    /* Zorgt dat hij mooi uitlijnt met de tekst */
    /* De SVG als achtergrond */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M9.75398 7.9667L4.55181 2.76453C4.41626 2.62898 4.34787 2.46025 4.34665 2.25836C4.34531 2.05648 4.41237 1.88353 4.54781 1.73953C4.69448 1.59286 4.86943 1.51953 5.07265 1.51953C5.27587 1.51953 5.44948 1.59286 5.59348 1.73953L11.033 7.17103C11.1463 7.28436 11.2285 7.41009 11.2795 7.5482C11.3306 7.68642 11.3561 7.82592 11.3561 7.9667C11.3561 8.10748 11.3306 8.24698 11.2795 8.3852C11.2285 8.52331 11.1463 8.64903 11.033 8.76236L5.58081 14.2145C5.43415 14.3612 5.26265 14.4318 5.06631 14.4262C4.86998 14.4206 4.69848 14.3445 4.55181 14.1979C4.41626 14.0512 4.3457 13.8797 4.34015 13.6834C4.33459 13.487 4.40515 13.3155 4.55181 13.1689L9.75398 7.9667Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* Huidige item (laatste in de reeks) */

.rank-math-breadcrumb .last {
    font-weight: 400;
    /* Of bold, afhankelijk van design */
    opacity: 0.8;
}
/* Back Link Styling fix */

.back-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white-seku);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 16px;
    transition: opacity 0.2s ease;
}
.back-link:hover {
    opacity: 0.8;
}
/* Zorgt dat de SVG de tekstkleur overneemt */

.back-icon svg {
    fill: currentColor;
    display: block;
}
/* =========================================
   VACATURES (JOBS)
   ========================================= */

.section-jobs-overview {
    padding: 64px 24px;
    background: var(--grey-seku);
}
.jobs-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.jobs-header {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.filter-controls {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 32px;
    gap: 0;
}
.job-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.job-filter-btn {
    padding: 12px 24px;
    border-radius: 4px;
    border: 1px solid var(--black-seku);
    background: transparent;
    color: var(--black-seku);
    font-family: var(--font-body);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.5rem;
}
.job-filter-btn.active, .job-filter-btn:hover {
    background: var(--black-seku);
    color: var(--white-seku);
}
.job-search-bar {
    width: 100%;
}
.jobs-list-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
/* JOB CARD STYLING */

.job-card {
    background: var(--white-seku);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    border-radius: 0;
    /* Design is strak */
}
.job-card-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.job-title {
    font-family: var(--font-heading);
    font-size: 20px;
    line-height: 140%;
    margin-bottom: 16px;
    font-weight: 400;
}
.job-intro {
    font-size: 16px;
    line-height: 170%;
    margin-bottom: 0;
}
.job-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.job-meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vacancy-heading-wrapper {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
}
.meta-icon svg {
    display: block;
    width: 24px;
    /* Figma size */
    height: 24px;
}
.meta-text {
    font-family: "Onest-Regular", var(--font-body);
    /* Specifiek font uit design */
    font-size: 18px;
    line-height: 150%;
}
.job-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.button-primary-outline {
    border: 1px solid var(--black-seku);
    color: var(--black-seku);
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s ease;
}
.button-primary-outline:hover {
    background: var(--black-seku);
    color: var(--white-seku);
}
.button-circle-outline {
    width: 51px;
    height: 51px;
    border: 1px solid var(--black-seku);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.button-circle-outline:hover {
    background: var(--black-seku);
    color: var(--white-seku);
}
/* =========================================
   SINGLE VACATURE STYLES
   ========================================= */

/* Header Meta Pills (Locatie/Tijd) */

.job-meta-header {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}
.job-meta-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    color: var(--black-seku);
    font-family: var(--font-body);
    font-size: 14px;
}
.job-meta-pill img {
    width: 24px;
    height: 24px;
}
.header-cta {
    margin-top: 32px;
}
.header-cta .button-primary {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}
.single .header-cta {
    margin-top: 0;
}
/* =========================================
   SINGLE VACATURE - HEADER & META
   ========================================= */

/* De "Pills" in de blauwe header (Locatie + Uren) */

.job-meta-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-b justify-content: center;
    margin-bottom: 0;
}
.job-meta-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 4px;
    padding: 8px 16px;
    color: var(--black-seku);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
}
.job-meta-pill img, .job-meta-pill svg {
    width: 20px;
    height: 20px;
    display: block;
}
.header-cta {
    margin-top: 48px;
}
.job-meta-pill span {
    color: #fff;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    /* 1.9125rem */
}
.job-icon {
    display: flex;
    padding: 0.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.25rem;
    background: #fff;
}
/* =========================================
   TEAM SECTIE - FIGMA DESIGN
   ========================================= */

.section-team {
    display: flex;
    padding-top: 7rem;
    flex-direction: column;
    gap: 96px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    background: var(--white-seku);
    display: none !important;
}
/* Heading Wrapper */

.services-heading-wrap {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.services-heading h2 {
    color: var(--BLACK---SEKU, #222220);
    text-align: center;
    font-family: Museo;
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 2.625rem */
    letter-spacing: -0.01875rem;
}
.section-desc-center {
    color: var(--dark-grey-seku, #9c9c9c);
    text-align: center;
    font-family: var(--font-body, "Archivo-Regular", sans-serif);
    font-size: 18px;
    line-height: 170%;
    max-width: 1190px;
    margin: 0 auto;
    margin-top: 2rem;
}
/* Team Grid - Mobiel: verticaal */

.team-grid {
    padding: 0 24px 112px 24px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
/* Team Member Card */

.team-member-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 100%;
    max-width: 453px;
    position: relative;
}
/* Afbeelding Wrapper - 453x424 zoals Figma */

.member-image-wrapper {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 453 / 424;
    position: relative;
    overflow: hidden;
    background-color: var(--grey-seku);
    border-radius: 0;
}
.member-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Member Info - gap 29px zoals Figma */

.member-info {
    display: flex;
    flex-direction: column;
    gap: 29px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
/* Text Group - gap 16px zoals Figma */

.member-text-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.naam-achternaam {
    color: var(--black-seku, #222220);
    text-align: left;
    font-family: var(--font-heading, "Museo-500", sans-serif);
    font-size: 24px;
    line-height: 140%;
    letter-spacing: -0.01em;
    font-weight: 400;
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.functieomschrijving {
    color: var(--black-seku, #222220);
    text-align: left;
    font-family: var(--font-body, "Archivo-Regular", sans-serif);
    font-size: 16px;
    line-height: 170%;
    font-weight: 400;
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
/* Member Actions - gap 16px zoals Figma */

.member-actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}
/* Icon Buttons - 48x48px zoals Figma */

.button7.icon-only {
    border-radius: 4px;
    border: 1px solid var(--black-seku, #000000);
    padding: 12px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    position: relative;
    transition: all 0.2s ease;
}
.button7.icon-only img, .button7.icon-only svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
}
.button7.icon-only:hover {
    background-color: var(--black-seku);
}
.button7.icon-only:hover img, .button7.icon-only:hover svg {
    filter: brightness(0) invert(1);
}
/* Base Sectie Styling */

.section-job-lists {
    padding: 90px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white-seku);
}
/* Grid Container - Mobiel: Kolom, Desktop: Grid */

.job-lists-grid {
    display: flex;
    flex-direction: column;
    gap: 14rem 34px;
    width: 100%;
    max-width: var(--site-max-width);
}
/* Card Wrapper - Bevat afbeelding, content en achtergrond */

.job-list-card-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
/* Afbeelding Container */

.job-list-image-wrapper {
    width: 100%;
    max-width: 659px;
    aspect-ratio: 659 / 617;
    border-radius: 0;
    position: relative;
    z-index: 2;
}
.job-list-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    clip-path: polygon(0 0, calc(100% - 5rem) 0, 100% 6rem, 100% 100%, 0 100%);
}
/* Card Content */

.job-list-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 616px;
    position: relative;
    z-index: 2;
}
/* Titel Styling - Museo 32px zoals in Figma */

.job-list-card-title {
    color: var(--black-seku, #222220);
    text-align: left;
    font-family: var(--font-heading, "Museo-500", sans-serif);
    font-size: 28px;
    line-height: 140%;
    letter-spacing: -0.01em;
    font-weight: 400;
    margin: 0;
}
/* Content/Lijst Styling - Archivo 16px zoals in Figma */

.job-list-description {
    color: var(--black-seku, #222220);
    text-align: left;
    font-family: var(--font-body, "Archivo-Regular", sans-serif);
    font-size: 16px;
    line-height: 170%;
    font-weight: 400;
}
/* Lijst Styling met custom bullets */

.job-list-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.job-list-content li {
    position: relative;
    padding-left: 24px;
    line-height: 170%;
    color: var(--black-seku, #222220);
    font-family: var(--font-body, "Archivo-Regular", sans-serif);
    font-size: 16px;
}
/* Custom Bullet (Zwart bolletje) */

.job-list-content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    background-color: var(--black-seku, #222220);
    border-radius: 50%;
}
/* Achtergrond Vector - Verborgen op mobiel */

.job-list-bg-vector {
    display: none;
    position: absolute;
    width: 659px;
    height: 617px;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
    opacity: 0.1;
}
/* Tablet/Desktop responsive breakpoints - zie desktop.css */

/* =========================================
   SINGLE VACATURE - HEADER & META
   ========================================= */

/* De "Pills" in de blauwe header (Locatie + Uren) */

.job-meta-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-b justify-content: center;
    margin-bottom: 0;
}
.job-meta-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 4px;
    padding: 8px 16px;
    color: var(--black-seku);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
}
.job-meta-pill img, .job-meta-pill svg {
    width: 20px;
    height: 20px;
    display: block;
}
.header-cta {
    margin-top: 48px;
}
.job-meta-pill span {
    color: #fff;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    /* 1.9125rem */
}
.job-icon {
    display: flex;
    padding: 0.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.25rem;
    background: #fff;
}
.full-width-content-inner>p:first-child, .full-width-content-inner .content-body>p:first-child {
    margin-top: 0;
}
.full-width-content-inner>p:last-child, .full-width-content-inner .content-body>p:last-child {
    margin-bottom: 0;
}
.section-full-width-content img {
    max-height: 49.875rem;
    object-fit: cover;
}
.about-content-inner {
    width: calc(100% - 3rem);
    max-width: 91rem;
    margin-left: auto;
    margin-right: auto;
}
.about-content {
    width: 100%;
    display: flex;
    height: 100%;
    align-items: center;
}
.about-content-text {
    background-color: #fff;
    width: 100%;
    max-width: 51.6875rem;
    padding: 2rem;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    /* 1.7rem */
    clip-path: polygon(0 0, calc(100% - 3rem) 0, 100% 3rem, 100% 100%, 0 100%)
}
.about-content-text>p:last-child {
    margin-bottom: 0;
}
.about-content-text h2 {
    /* Heading/H6 */
    font-family: Museo;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 2.1rem */
    letter-spacing: -0.015rem;
    margin-bottom: 1.5rem;
}
.section-full-width-content {
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 170%;
    padding: 7.5rem 0;
}
.full-width-content-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.full-width-content-inner {
    position: relative;
    width: 100%;
    height: 100%;
}
@media (max-width: 600px) {
    .job-meta-pill span {
        font-size: 0.875rem;
    }
}
/* =========================================
   NIEUWS OVERZICHT - Masonry Layout
   Gebaseerd op .section-projects-overview
   ========================================= */

.section-news-overview {
    padding: 104px 0 152px;
    background: var(--white-seku);
}
.section-news-overview .overview-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
}
.section-news-overview .filter-wrapper {
    margin-bottom: 32px;
}
.section-news-overview .filter-label {
    font-family: var(--font-heading);
    font-size: 40px;
    margin-bottom: 32px;
    color: var(--black-seku);
    font-weight: 400;
}
.section-news-overview .filter-tools {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.section-news-overview .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.section-news-overview .filter-pill {
    background: transparent;
    border: 1px solid var(--black-seku);
    border-radius: 4px;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--black-seku);
}
.section-news-overview .filter-pill:hover, .section-news-overview .filter-pill.active {
    background: var(--black-seku);
    color: var(--white-seku);
}
.section-news-overview .search-bar {
    display: flex;
    align-items: center;
    background: var(--grey-seku);
    padding: 12px 24px;
    border-radius: 4px;
    gap: 12px;
    width: 100%;
    max-width: 284px;
}
.section-news-overview .search-bar input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 18px;
    font-family: var(--font-light);
    width: 100%;
}
.section-news-overview .results-count {
    text-align: right;
    margin-bottom: 56px;
    font-family: var(--font-body);
    color: var(--black-seku);
}
.section-news-overview .masonry-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.section-news-overview .masonry-col {
    display: flex;
    gap: 7rem;
    flex-direction: column;
}
/* News Card Overview Style - Identiek aan project-card-overview */

.news-card-overview {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}
.news-card-image-link {
    display: block;
    width: 100%;
    overflow: hidden;
}
.news-card-overview .image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 659 / 617;
}
.news-card-overview .placeholder-img {
    width: 100%;
    aspect-ratio: 659 / 617;
    background: var(--grey-seku);
}
.news-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.news-card-body .tag-wrapper {
    width: fit-content;
}
.news-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.news-meta .meta-row {
    display: flex;
    gap: 8px;
    color: var(--black-seku);
    font-size: 14px;
    font-family: var(--font-body);
}
.news-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 400;
    margin: 0;
    line-height: 120%;
}
.news-description {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 170%;
    color: var(--black-seku);
}
.news-action {
    margin-top: auto;
}
.section-news-overview .no-results-msg {
    text-align: center;
    padding: 60px 20px;
    color: var(--dark-grey-seku);
    font-size: 18px;
    font-family: var(--font-body);
}
/* Hover States */

.news-card-image-link {}
.news-card-overview:hover .news-card-image-link {}
.news-card-overview .image-wrapper {
    overflow: hidden;
}
.news-card-overview:hover .image-wrapper img {}
/* =========================================
   RESPONSIVE - TABLET & DESKTOP
   ========================================= */

@media (min-width: 1024px) {
    .section-news-overview {
        padding: 152px 0;
    }
    .section-news-overview .overview-container {}
    .section-news-overview .filter-wrapper {
        margin-bottom: 48px;
    }
    .section-news-overview .filter-label {
        font-size: 48px;
        margin-bottom: 40px;
    }
    .section-news-overview .filter-tools {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .section-news-overview .results-count {
        margin-bottom: 64px;
        font-size: 18px;
    }
    .section-news-overview .masonry-grid {
        flex-direction: row;
        gap: 48px;
        align-items: flex-start;
    }
    .section-news-overview .masonry-col {
        flex: 1;
        gap: 7rem;
    }
    .news-title {
        font-size: 40px;
    }
    .news-description {
        font-size: 18px;
    }
}
@media (min-width: 1440px) {
    .section-news-overview .overview-container {}
    .section-news-overview .masonry-grid {
        gap: 64px;
    }
    .contact-section-seku {
           flex-direction: row; 
           gap:3.5rem;
               align-items: flex-start;
    }
     .contact-section-seku .stats-container{
        display: grid;
        gap:1.5rem;

        align-items: start;
     }
     .contact-form .gform_title {
    color: var(--BLACK---SEKU, #222220);
/* Heading/H3 */
font-family: Museo;
font-size: 3rem;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 3.6rem */
letter-spacing: -0.03rem;
margin-bottom: 2rem;
}
.contact-section-seku .stat-item {
    height: 220px;
}
}
/* =========================================
   NIEUWS OVERZICHT - Masonry Layout
   Updated to match services-cards pattern
   ========================================= */

.section-news-overview {
    padding: 104px 0 152px;
    background: var(--white-seku);
}
.section-news-overview .overview-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
}
.section-news-overview .filter-wrapper {
    margin-bottom: 32px;
}
.section-news-overview .filter-label {
    font-family: var(--font-heading);
    font-size: 40px;
    margin-bottom: 32px;
    color: var(--black-seku);
    font-weight: 400;
}
.section-news-overview .filter-tools {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.section-news-overview .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.section-news-overview .filter-pill {
    background: transparent;
    border: 1px solid var(--black-seku);
    border-radius: 4px;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--black-seku);
}
.section-news-overview .filter-pill:hover, .section-news-overview .filter-pill.active {
    background: var(--black-seku);
    color: var(--white-seku);
}
.section-news-overview .search-bar {
    display: flex;
    align-items: center;
    background: var(--grey-seku);
    padding: 12px 24px;
    border-radius: 4px;
    gap: 12px;
    width: 100%;
    max-width: 284px;
}
.section-news-overview .search-bar input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 18px;
    font-family: var(--font-light);
    width: 100%;
}
.section-news-overview .results-count {
    text-align: right;
    margin-bottom: 56px;
    font-family: var(--font-body);
    color: var(--black-seku);
}
.section-news-overview .masonry-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.section-news-overview .masonry-col {
    display: flex;
    gap: 7rem;
    flex-direction: column;
}
/* =========================================
   NEWS CARD - Services Cards Pattern
   ========================================= */

.news-card-overview {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    position: relative;
}
/* Image Wrapper */

.news-card-image-link {
    display: block;
    width: 100%;
    overflow: hidden;
    align-self: stretch;
}
.news-card-overview .image-wrapper {
    width: 100%;
    overflow: hidden;
}
.news-card-overview .image-wrapper img {
    width: 100%;
    height: 497px;
    object-fit: cover;
    display: block;
    position: relative;
    overflow: visible;
}
.news-card-overview .placeholder-img {
    width: 100%;
    height: 497px;
    background: var(--grey-seku);
}
/* Content Container - matches frame-2147225107 */

.news-card-content-wrapper {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
/* Content Box - matches frame-2087327503 */

.news-card-body {
    background: var(--grey-seku, #f2f2f2);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    position: relative;
}
/* Content Inner - matches frame-2087327501 */

.news-card-content-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
/* Tag */

.news-card-body .tag-wrapper {
    width: fit-content;
}
.news-card-body .tag {
    background: var(--black-seku, #222220);
    border-radius: 4px;
    padding: 8px 16px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}
.news-card-body .tag.grey {
    background: var(--black-seku);
    color: var(--white-seku);
}
/* Text Container - matches frame-2087327480 & text2 */

.news-meta-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.news-text-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
/* Date - small text above title */

.news-meta .meta-row {
    display: flex;
    gap: 8px;
    color: var(--black-seku);
    font-size: 14px;
    font-family: var(--font-body);
    margin-bottom: 8px;
}
/* Title */

.news-title {
    color: var(--black-seku, #222220);
    text-align: left;
    font-family: var(--text-large-medium-font-family, "Archivo-Medium", sans-serif);
    font-size: var(--text-large-medium-font-size, 24px);
    line-height: var(--text-large-medium-line-height, 170%);
    font-weight: var(--text-large-medium-font-weight, 500);
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}
/* Description/Excerpt */

.news-description {
    color: var(--black-seku, #222220);
    text-align: left;
    font-family: var(--text-medium-normal-font-family, "Archivo-Regular", sans-serif);
    font-size: var(--text-medium-normal-font-size, 18px);
    line-height: var(--text-medium-normal-line-height, 170%);
    font-weight: var(--text-medium-normal-font-weight, 400);
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
/* Link - matches lees-meer */

.news-action {
    margin-top: 0;
}
.news-action a, .news-card-link {
    color: var(--black-seku, #222220);
    text-align: left;
    font-size: var(--text-regular-medium-font-size, 16px);
    line-height: var(--text-regular-medium-line-height, 170%);
    font-weight: var(--text-regular-medium-font-weight, 500);
    text-decoration: underline;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
/* Remove button styling for this pattern */

.news-action .button-black {
    all: unset;
    color: var(--black-seku, #222220);
    text-align: left;
    font-family: var(--text-regular-medium-font-family, "Archivo-Medium", sans-serif);
    font-size: var(--text-regular-medium-font-size, 16px);
    line-height: var(--text-regular-medium-line-height, 170%);
    font-weight: var(--text-regular-medium-font-weight, 500);
    text-decoration: underline;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}
.news-action .button-black .button-text {
    all: unset;
    color: inherit;
    font: inherit;
    text-decoration: inherit;
}
.news-action .button-black .button-black-circle {
    display: none;
}
.section-news-overview .no-results-msg {
    text-align: center;
    padding: 60px 20px;
    color: var(--dark-grey-seku);
    font-size: 18px;
    font-family: var(--font-body);
}
/* Hover States */

.news-card-image-link {
    transition: transform 0.3s ease;
}
.news-card-overview:hover .image-wrapper img {}
.news-card-link:hover, .news-action a:hover {
    text-decoration: unset;
}
.mobile-search-form .search-field {
    font-family: var(--seku-font);
}
/* =========================================
   RESPONSIVE - TABLET & DESKTOP
   ========================================= */

@media (min-width: 1024px) {
    .section-news-overview {}
    .section-news-overview .overview-container {}
    .section-news-overview .filter-wrapper {
        margin-bottom: 48px;
    }
    .section-news-overview .filter-label {
        font-size: 48px;
        margin-bottom: 40px;
    }
    .section-news-overview .filter-tools {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .section-news-overview .results-count {
        margin-bottom: 64px;
        font-size: 18px;
    }
    .section-news-overview .masonry-grid {
        flex-direction: row;
        gap: 24px;
        align-items: flex-start;
    }
    .section-news-overview .masonry-col {
        flex: 1;
        gap: 7rem;
    }
}
@media (min-width: 1440px) {
    .section-news-overview {}
    .section-news-overview .masonry-grid {
        gap: 24px;
    }
}
.section-related-projects {
    background: var(--white-seku);
    padding: 9.5rem 0;
}
.section-related-projects.no-padding-top {
    padding-top: 0;
}
.section-related-projects.no-padding-bottom {
    padding-bottom: 0;
}
.related-projects-container {
    max-width: var(--site-max-width, 1408px);
    margin: 0 auto;
    padding: 0 24px;
}
.section-related-projects .section-intro {
    padding: 0;
    gap: 2rem;
}
.related-projects-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.section-related-projects .section-description {
    max-width: 65.375rem;
    margin-bottom: 6rem;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    /* 2.55rem */
    text-align: center;
}
.related-projects-header .tag {
    margin-bottom: 1.5rem
}
/* =========================================
   PROJECTS GRID
   ========================================= */

.related-projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}
.section-related-projects .section-title {
    text-align: center;
}
@media (min-width: 1024px) {
    .related-projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px;
    }
}
@media (min-width: 1440px) {
    .related-projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}
@media (max-width: 767px) {
    .project-card-overview .image-wrapper, .news-card-overview .image-wrapper {
        height: 14.9375rem;
    }
    .project-card-overview .image-wrapper img, .news-card-overview .image-wrapper img {
        clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 3rem, 100% 100%, 0 100%);
    }
    .contact-image {
        display: block;
        max-width: 100%;
    }
    .contact-image-wrapper {
        display: block;
    }
    .hero {
        min-height: unset;
    }
    .stat-content {
        padding: 32px 40px
    }
    .services-accordion {
        text-align: center;
    }
    .project-wrapper {
        gap: 0;
    }
    .project-image-container {}
    .news-card .news-img {
        clip-path: polygon(0 0, calc(100% - 3rem) 0, 100% 3rem, 100% 100%, 0 100%);
    }
    .project-info-card {
        background: transparent;
        padding-right: 0;
        opacity: 0;
        padding-bottom: 0;
        padding-left: 0
    }
    .swiper-slide.swiper-slide-active .project-info-card {
        opacity: 1;
    }
    body .section-projects .gallery-pagination {
        padding: 0;
    }
    .footer-bottom {
        text-align: left;
        align-items: flex-start;
        padding-top: 3rem;
    }
    .footer-legal-nav {
        text-align: left;
        align-items: flex-start;
    }
    .socials {
        justify-content: flex-start;
    }
    .hero-content {
        gap: 3rem;
    }
    .rank-math-breadcrumb>p {
        margin-bottom: 0;
    }
    body:not(.home) .hero.has-breadcrumbs {
        padding-top: 2.5rem;
    }
    .content-lr-container {
        gap: 2rem;
    }
    body .services-cards {
        padding: 0;
        gap: 2rem;
    }
    .service-image-wrapper img {
        height: 14.9375rem;
    }
    .section-related-projects .section-description {
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 170%;
        /* 1.7rem */
    }
    .section-project-specs .specs-grid {
        padding: 0 1.5rem;
        grid-template-columns: repeat(2, 1fr);
        display: grid;
    }
    .hero.has-video {
        height: calc(100dvh - 119.05px);
    }
    .home .scroll-down.desktop-only {
        display: flex;
    }
    .footer-logo-section a {
        max-width: 18.5625rem
    }
    .projects-content.mobile-only {
        display: none;
    }
    body .section-services .vector-32 {
        clip-path: polygon(0 0, /* Top Left */
        calc(100% - 3rem) 0, /* Top Edge (Stop 4rem before the right) */
        100% 3rem, /* Right Edge (Start 4rem down from top) */
        100% 100%, /* Bottom Right */
        0 100%
        /* Bottom Left */
        );
    }
}
.img-border {
    position: relative;
}
.section-gallery .gallery-image {
    position: relative;
}
.project-image-inner {
    position: relative;
}
/* =========================================
   FLOATING BORDER - Contact Section
   ========================================= */

.contact-image {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%, 0 calc(100% - 2rem));
}
.img-border {
    position: relative;
}
.contact-image {
    display: block;
    width: 100%;
}
.floating-border {
    position: absolute;
    top: 0.85rem;
    left: -0.85rem;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
.border-path {
    fill: none;
    stroke: #f05a22;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
@media (min-width: 1280px) {
    .floating-border {
        position: absolute;
        top: 1rem;
        left: -1rem;
    }
}
/* =========================================
   FLOATING BORDER - Gallery & Projects
   ========================================= */

.section-gallery .gallery-image, .project-image-container {
    position: relative;
}
.section-gallery .gallery-image img, .project-image-container img {
    display: block;
}
/* Floating border positioning */

.section-gallery .floating-border, .project-image-container .floating-border {
    position: absolute;
    top: -0.85rem;
    left: 0.85rem;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
.border-path {
    fill: none;
    stroke: #f05a22;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
/* Desktop: grotere offset */

@media (min-width: 1280px) {
    .section-gallery .floating-border, .project-image-container .floating-border {
        top: -1rem;
        left: 1rem;
    }
}
/* Verwijder oude background-image regels als ze er nog zijn */

.section-gallery .gallery-image:after, .project-image-inner:after {
    display: none;
}
/* =========================================
   FLOATING BORDER - Services Section
   ========================================= */

/* Services image wrapper */

.services-img-border {
    position: relative;
}
.section-services .vector-32 {
    display: block;
    width: 100%;
    clip-path: polygon(0 0, calc(100% - 8rem) 0, 100% 8rem, 100% 100%, 0 100%);
}
/* Floating border voor services */

.services-floating-border {
    position: absolute;
    top: -0.85rem;
    right: -0.85rem;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
    left: unset;
}
.services-border-path {
    fill: none;
    stroke: #f05a22;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
/* Desktop: grotere offset */

@media (min-width: 1280px) {
    .services-floating-border {
        top: -1rem;
        right: -1rem;
        left: unset;
    }
}
/* =========================================
   FLOATING BORDER - Job Lists (New)
   ========================================= */

.job-floating-wrapper {
    position: relative;
}
.job-floating-wrapper .floating-border {
    position: absolute;
    /* Offset: Verplaats border naar linksonder t.o.v. de foto */
    top: -0.85rem;
    right: -0.85rem;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
    left: unset;
}
/* Tablet/Desktop: Iets grotere offset */

@media (min-width: 1280px) {
    .job-floating-wrapper .floating-border {
        top: -1rem;
        right: -1rem;
        left: unset;
    }
}
.static-search-page.search-dropdown {
    border: 0;
    width: calc(100% - 3rem);
    max-width: 91rem;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}
.search-dropdown .results-count {
    margin-bottom: 0;
}
/* =========================================
   FORCE DESKTOP SEARCH STYLES ON MOBILE
   (For the Static Search Page only)
   ========================================= */

/* 1. Ensure the container is visible and flows normally */

.search-dropdown.static-search-page {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
    gap: 32px;
    position: relative !important;
    /* Stop absolute positioning */
    background: var(--white-seku);
    padding: 7.5rem 0;
    /* Adjusted for mobile spacing */
    box-shadow: none !important;
}
/* 2. Titles & Headings */

.static-search-page .search-heading, .static-search-page .results-heading {
    display: flex;
    flex-direction: column;
    /* Stack on mobile, row on desktop */
    gap: 16px;
    width: 100%;
}
.static-search-page .search-title {
    color: var(--black-seku);
    font-family: var(--font-heading);
    font-size: 32px;
    line-height: 140%;
    letter-spacing: -0.01em;
    font-weight: 400;
    margin: 0;
}
.static-search-page .results-title {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    color: var(--black-seku);
}
.static-search-page .results-count {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--black-seku);
    margin-bottom: 0;
}
/* 3. The Search Input Box */

.static-search-page .text-input {
    background: var(--grey-seku);
    border-radius: 4px;
    padding: 20px 24px;
    /* Slightly smaller padding for mobile */
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    width: 100%;
}
.static-search-page .search-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--black-seku);
    /* Ensure icon is visible */
}
.static-search-page .type-your-message {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    font-family: var(--font-light);
    font-size: 16px;
    /* 16px prevents iOS zoom on focus */
    line-height: 170%;
    font-weight: 300;
    color: var(--black-seku);
    padding: 0;
}
/* 4. Divider Line */

.static-search-page .line-9 {
    width: 100%;
    height: 1px;
    background-color: var(--grey-seku);
    margin: 0;
}
/* 5. Results Container */

.static-search-page .search-results-container {
    width: 100%;
    max-height: none !important;
    /* Allow full height on results page */
}
/* Placeholder box (if you use it) */

.static-search-page .text-input2 {
    background: var(--grey-seku);
    border-radius: 4px;
    padding: 16px 12px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}
.static-search-page .text-input2 .placeholder {
    color: rgba(0, 0, 0, 0.6);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 170%;
}
/* =========================================
   DESKTOP TWEAKS FOR STATIC PAGE
   (Re-applying row layouts for larger screens)
   ========================================= */

@media (min-width: 768px) {
    .static-search-page .search-heading, .static-search-page .results-heading {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .static-search-page .text-input {
        padding: 32px 40px;
        /* Restore big desktop padding */
    }
    .static-search-page .type-your-message {
        font-size: 18px;
    }
}
/* =========================================
   HERO WIDTH FIX (Standardized Container)
   ========================================= */

/* 1. Remove side padding from the main section 
   so the background/video stays full width */

.hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Keeps your top/bottom padding: 388px top, 48px bottom */
}
/* 2. Apply the standardized container width to the content wrapper */

.hero-content {
    width: calc(100% - 3rem) !important;
    /* 1.5rem margin on each side (Mobile) */
    max-width: 91rem !important;
    /* Matches your intro/contact sections */
    margin-left: auto !important;
    margin-right: auto !important;
    /* Ensure flex properties remain intact */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
/* =========================================
   DESKTOP OVERRIDES (1280px+)
   Ensure the container doesn't get messed up by desktop.css
   ========================================= */

@media (min-width: 1280px) {
    .hero {
        /* Reset padding for desktop if defined differently there */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .hero-content {
        /* Ensure it stays centered and max-width applies on large screens */
        width: calc(100% - 3rem) !important;
        /* Or just 100% if you want it flush with max-width */
        max-width: 91rem !important;
        margin: 0 auto !important;
    }
}
/* =========================================
   FOOTER WIDTH FIX (CSS Only)
   ========================================= */

/* 1. Remove side padding from the main blue container */

.footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* 2. Constrain the inner content containers */

.footer-top, .footer-bottom {
    width: calc(100% - 3rem) !important;
    /* Mobile width */
    max-width: 91rem !important;
    /* Max width */
    margin-left: auto !important;
    /* Center align */
    margin-right: auto !important;
    /* Center align */
}
/* 3. Desktop Overrides to prevent 'desktop.css' from breaking it */

@media (min-width: 1280px) {
    .footer {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .footer-top, .footer-bottom {
        width: 100% !important;
        /* Fallback */
        width: calc(100% - 3rem) !important;
        max-width: 91rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Keep vertical spacing that desktop.css normally handles */
    .footer-top {
        margin-bottom: 48px !important;
    }
}
/* =========================================
   CONTENT LEFT/RIGHT WIDTH FIX
   ========================================= */

/* 1. Remove side padding from the main wrapper */

.section-content-lr {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* 2. Constrain the inner container */

.content-lr-container {
    width: calc(100% - 3rem) !important;
    /* Mobile width */
    max-width: 91rem !important;
    /* Max width */
    margin-left: auto !important;
    /* Center align */
    margin-right: auto !important;
    /* Center align */
    /* Ensure it behaves as a container */
    box-sizing: border-box;
}
/* =========================================
   DESKTOP OVERRIDES (1280px+)
   Override desktop.css padding rules
   ========================================= */

@media (min-width: 1280px) {
    .section-content-lr {
        /* Override desktop.css which sets padding: 152px 24px */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .content-lr-container {
        /* Override desktop.css max-width vars */
        width: 100% !important;
        width: calc(100% - 3rem) !important;
        max-width: 91rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* =========================================
   RELATED PROJECTS WIDTH FIX
   ========================================= */

/* 1. Ensure parent has no side padding that interferes */

.section-related-projects {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* 2. Constrain the inner container */

.related-projects-container {
    width: calc(100% - 3rem) !important;
    /* Mobile width logic */
    max-width: 91rem !important;
    /* 1456px */
    margin-left: auto !important;
    margin-right: auto !important;
    /* Remove old padding since we use calc() for spacing now */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}
/* =========================================
   DESKTOP OVERRIDES (1280px+)
   ========================================= */

@media (min-width: 1280px) {
    .section-related-projects {
        /* Ensure no padding sneaks in from desktop styles */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .related-projects-container {
        /* Maintain max-width on large screens */
        width: 100% !important;
        width: calc(100% - 3rem) !important;
        max-width: 91rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* =========================================
   TEAM SECTION WIDTH FIX
   ========================================= */

/* 1. Remove side padding from the main wrapper */

.section-team {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* 2. Constrain the inner containers */

.services-heading-wrap, .team-grid {
    width: calc(100% - 3rem) !important;
    /* Mobile width */
    max-width: 91rem !important;
    /* Max width */
    margin-left: auto !important;
    /* Center align */
    margin-right: auto !important;
    /* Center align */
    /* Remove any internal padding that might conflict */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}
/* =========================================
   DESKTOP OVERRIDES (1280px+)
   Override desktop.css padding rules
   ========================================= */

@media (min-width: 1280px) {
    .section-team {
        /* Override desktop.css padding (usually 152px 160px) */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .services-heading-wrap, .team-grid {
        width: 100% !important;
        width: calc(100% - 3rem) !important;
        max-width: 91rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* =========================================
   JOBS OVERVIEW WIDTH FIX
   ========================================= */

/* 1. Remove side padding from the main wrapper */

.section-jobs-overview {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* 2. Constrain the inner container */

.jobs-container {
    width: calc(100% - 3rem) !important;
    /* Mobile width */
    max-width: 91rem !important;
    /* Max width */
    margin-left: auto !important;
    /* Center align */
    margin-right: auto !important;
    /* Center align */
    /* Ensure it acts as a container */
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* =========================================
   DESKTOP OVERRIDES (1280px+)
   Override desktop.css rules
   ========================================= */

@media (min-width: 1280px) {
    .section-jobs-overview {
        /* Override desktop padding */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .jobs-container {
        /* Override desktop widths */
        width: 100% !important;
        width: calc(100% - 3rem) !important;
        max-width: 91rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* =========================================
   JOB LISTS WIDTH FIX
   ========================================= */

/* 1. Remove side padding from the main wrapper */

.section-job-lists {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* 2. Constrain the inner grid container */

.job-lists-grid {
    width: calc(100% - 3rem) !important;
    /* Mobile width logic */
    max-width: 91rem !important;
    /* 1456px */
    margin-left: auto !important;
    /* Center align */
    margin-right: auto !important;
    /* Center align */
    /* Ensure no internal padding conflicts */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}
/* =========================================
   DESKTOP OVERRIDES (1280px+)
   Override desktop.css rules
   ========================================= */

@media (min-width: 1280px) {
    .section-job-lists {
        /* Override desktop.css padding (usually has large side padding) */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .job-lists-grid {
        /* Maintain max-width constraints on large screens */
        width: 100% !important;
        width: calc(100% - 3rem) !important;
        max-width: 91rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* Ensure the grid display stays active */
        display: grid;
    }
}
/* =========================================
   PROJECTS OVERVIEW WIDTH FIX
   ========================================= */

/* 1. Remove side padding from the main wrapper */

.section-projects-overview {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* 2. Constrain the inner container */

.overview-container {
    width: calc(100% - 3rem) !important;
    /* Mobile width */
    max-width: 91rem !important;
    /* Max width */
    margin-left: auto !important;
    /* Center align */
    margin-right: auto !important;
    /* Center align */
    /* Ensure it acts as a container */
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* =========================================
   DESKTOP OVERRIDES (1280px+)
   Override desktop.css rules
   ========================================= */

@media (min-width: 1280px) {
    .section-projects-overview {
        /* Override desktop padding */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .overview-container {
        /* Override desktop widths */
        width: 100% !important;
        width: calc(100% - 3rem) !important;
        max-width: 91rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}