:root {
  --color-primary: #0c75b6;
  --color-primary-hover: #0a6a9e;
  --color-foreground: #0c4878;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-background: #f8fafc;
  --color-white: #fff;
  --color-dark: #071a2a;
  --font-body: 'Inter', sans-serif;
  --font-display: 'Syne', sans-serif;
  --container-max: 1280px;
  --radius-sm: 4px;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --transition: 0.15s ease;
}
:root {
    --background: 210 20% 98%;
    --foreground: 211 60% 10%;
    --card: 0 0% 100%;
    --card-foreground: 207 82% 26%;
    --popover: 0 0% 100%;
    --popover-foreground: 211 60% 10%;
    --primary: 203 88% 38%;
    --primary-foreground: 0 0% 100%;
    --secondary: 199 64% 81%;
    --secondary-foreground: 207 82% 26%;
    --muted: 220 13% 91%;
    --muted-foreground: 220 9% 46%;
    --accent: 201 79% 67%;
    --accent-foreground: 207 82% 26%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 202 75% 49%;
    --radius: .25rem
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
.bg-primary, .bg-primary\/10 {
    background-color:var(--color-primary);
}

body {
  font-family: var(--font-body) !important; 
  color: var(--color-foreground);
  background: var(--color-background);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.post, .page{
  margin-bottom: 0 !important;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}
  .p-0 {
        padding: calc(var(--spacing)*0)
    }

    .p-1 {
        padding: calc(var(--spacing)*1)
    }

    .p-2 {
        padding: calc(var(--spacing)*2)
    }

    .p-3 {
        padding: calc(var(--spacing)*3)
    }

    .p-4 {
        padding: calc(var(--spacing)*4)
    }

    .p-6 {
        padding: calc(var(--spacing)*6)
    }

    .p-8 {
        padding: calc(var(--spacing)*8)
    }

    .p-10 {
        padding: calc(var(--spacing)*10)
    }

    .p-12 {
        padding: calc(var(--spacing)*12)
    }

    .p-\[1px\] {
        padding: 1px
    }

    .px-1 {
        padding-inline:calc(var(--spacing)*1)}

    .px-13 {
        padding-inline: calc(var(--spacing) * 13);
    }
    
    .px-1\.5 {
        padding-inline: calc(var(--spacing)*1.5)
    }

    .px-2 {
        padding-inline:calc(var(--spacing)*2)}

    .px-2\.5 {
        padding-inline: calc(var(--spacing)*2.5)
    }

    .px-3 {
        padding-inline:calc(var(--spacing)*3)}

    .px-4 {
        padding-inline: calc(var(--spacing)*4)
    }

    .px-6 {
        padding-inline:calc(var(--spacing)*6)}

    .px-8 {
        padding-inline: calc(var(--spacing)*8)
    }

    .px-10 {
        padding-inline:calc(var(--spacing)*10)}

    .px-12 {
        padding-inline: calc(var(--spacing)*12)
    }

    .px-\[--cell-size\] {
        padding-inline: --cell-size
    }

    .py-0\.5 {
        padding-block: calc(var(--spacing)*.5)
    }

    .py-1 {
        padding-block:calc(var(--spacing)*1)}

    .py-1\.5 {
        padding-block: calc(var(--spacing)*1.5)
    }

    .py-2 {
        padding-block:calc(var(--spacing)*2)}

    .py-3 {
        padding-block: calc(var(--spacing)*3)
    }

    .py-4 {
        padding-block:calc(var(--spacing)*4)}

    .py-6 {
        padding-block: calc(var(--spacing)*6)
    }

    .py-8 {
        padding-block:calc(var(--spacing)*8)}

    .py-12 {
        padding-block: calc(var(--spacing)*12)
    }

    .py-20 {
        padding-block:calc(var(--spacing)*20)}

    .py-24 {
        padding-block: calc(var(--spacing)*24)
    }

    .py-32 {
        padding-block:calc(var(--spacing)*32)}

    .pt-0 {
        padding-top: calc(var(--spacing)*0)
    }

    .pt-3 {
        padding-top: calc(var(--spacing)*3)
    }

    .pt-4 {
        padding-top: calc(var(--spacing)*4)
    }

    .pt-6 {
        padding-top: calc(var(--spacing)*6)
    }

    .pt-8 {
        padding-top: calc(var(--spacing)*8)
    }

    .pt-12 {
        padding-top: calc(var(--spacing)*12)
    }

    .pt-16 {
        padding-top: calc(var(--spacing)*16)
    }

    .pt-32 {
        padding-top: calc(var(--spacing)*32)
    }

    .pt-48 {
        padding-top: calc(var(--spacing)*48)
    }

    .pr-1 {
        padding-right: calc(var(--spacing)*1)
    }

    .pr-2 {
        padding-right: calc(var(--spacing)*2)
    }

    .pr-2\.5 {
        padding-right: calc(var(--spacing)*2.5)
    }

    .pr-3 {
        padding-right: calc(var(--spacing)*3)
    }

    .pr-8 {
        padding-right: calc(var(--spacing)*8)
    }

    .pb-1 {
        padding-bottom: calc(var(--spacing)*1)
    }

    .pb-2 {
        padding-bottom: calc(var(--spacing)*2)
    }

    .pb-3 {
        padding-bottom: calc(var(--spacing)*3)
    }

    .pb-4 {
        padding-bottom: calc(var(--spacing)*4)
    }

    .pb-6 {
        padding-bottom: calc(var(--spacing)*6)
    }

    .pb-12 {
        padding-bottom: calc(var(--spacing)*12)
    }

    .pb-20 {
        padding-bottom: calc(var(--spacing)*20)
    }

    .pb-24 {
        padding-bottom: calc(var(--spacing)*24)
    }

    .pb-32 {
        padding-bottom: calc(var(--spacing)*32)
    }

    .pl-2 {
        padding-left: calc(var(--spacing)*2)
    }

    .pl-2\.5 {
        padding-left: calc(var(--spacing)*2.5)
    }

    .pl-3 {
        padding-left: calc(var(--spacing)*3)
    }

    .pl-4 {
        padding-left: calc(var(--spacing)*4)
    }

    .pl-6 {
        padding-left: calc(var(--spacing)*6)
    }

    .pl-8 {
        padding-left: calc(var(--spacing)*8)
    }

    .pl-12 {
        padding-left: calc(var(--spacing)*12)
    }
    .\!m-0 {
        margin: calc(var(--spacing)*0)!important
    }

    .-mx-1 {
        margin-inline:calc(var(--spacing)*-1)}

    .mx-2 {
        margin-inline: calc(var(--spacing)*2)
    }

    .mx-3\.5 {
        margin-inline: calc(var(--spacing)*3.5)
    }

    .mx-4 {
        margin-inline:calc(var(--spacing)*4)}

    .mx-12 {
        margin-inline: calc(var(--spacing)*12)
    }

    .mx-auto {
        margin-inline:auto}

    .-my-2 {
        margin-block:calc(var(--spacing)*-2)}

    .my-0 {
        margin-block: calc(var(--spacing)*0)
    }

    .my-0\.5 {
        margin-block: calc(var(--spacing)*.5)
    }

    .my-1 {
        margin-block:calc(var(--spacing)*1)}

    .-mt-4 {
        margin-top: calc(var(--spacing)*-4)
    }

    .-mt-10 {
        margin-top: calc(var(--spacing)*-10)
    }

    .-mt-12 {
        margin-top: calc(var(--spacing)*-12)
    }

    .mt-0\.5 {
        margin-top: calc(var(--spacing)*.5)
    }

    .mt-1 {
        margin-top: calc(var(--spacing)*1)
    }

    .mt-1\.5 {
        margin-top: calc(var(--spacing)*1.5)
    }

    .mt-2 {
        margin-top: calc(var(--spacing)*2)
    }

    .mt-3 {
        margin-top: calc(var(--spacing)*3)
    }

    .mt-4 {
        margin-top: calc(var(--spacing)*4)
    }

    .mt-8 {
        margin-top: calc(var(--spacing)*8)
    }

    .mt-16 {
        margin-top: calc(var(--spacing)*16)
    }

    .mt-24 {
        margin-top: calc(var(--spacing)*24)
    }

    .mt-32 {
        margin-top: calc(var(--spacing)*32)
    }

    .mt-auto {
        margin-top: auto
    }

    .-mr-12 {
        margin-right: calc(var(--spacing)*-12)
    }

    .mr-2 {
        margin-right: calc(var(--spacing)*2)
    }

    .mb-1 {
        margin-bottom: calc(var(--spacing)*1)
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing)*2)
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing)*3)
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing)*4)
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing)*6)
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing)*8)
    }

    .mb-12 {
        margin-bottom: calc(var(--spacing)*12)
    }

    .mb-16 {
        margin-bottom: calc(var(--spacing)*16)
    }

    .mb-20 {
        margin-bottom: calc(var(--spacing)*20)
    }

    .mb-24 {
        margin-bottom: calc(var(--spacing)*24)
    }

    .-ml-4 {
        margin-left: calc(var(--spacing)*-4)
    }

    .ml-1 {
        margin-left: calc(var(--spacing)*1)
    }

    .ml-4 {
        margin-left: calc(var(--spacing)*4)
    }

    .ml-auto {
        margin-left: auto
    }
ul, ol {
  list-style: none !important;
  margin: 0 !important;
}
p:last-child{
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  /* font-weight: 700; */
  /* color: var(--color-black); */
      letter-spacing: var(--tracking-tighter);
}

/* ==========================================================================
   Layout
   ========================================================================== */
 .container {
        width: 100%;
        margin: auto;
    }

    @media(min-width: 40rem) {
        .container {
            max-width:40rem
        }
    }

    @media(min-width: 48rem) {
        .container {
            max-width:48rem
        }
    }

    @media(min-width: 64rem) {
        .container {
            max-width:64rem
        }
    }

    @media(min-width: 80rem) {
        .container {
            max-width:80rem
        }
    }

    @media(min-width: 96rem) {
        .container {
            max-width:96rem
        }
    }

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  transition: background-color var(--transition), box-shadow var(--transition);
}
body.logged-in .site-header{
	top:32px;
}

.site-header.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

/* Logo swap on scroll is handled by nav.js */

.site-header.scrolled .top-bar {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: none;
}

.site-header.scrolled .nav-link,
.site-header.scrolled .top-bar a,
.site-header.scrolled .mobile-menu-btn,
.site-header.scrolled .nav-menu > .menu-item > a {
  color: var(--color-foreground);
}

.site-header.scrolled .nav-link:hover,
.site-header.scrolled .top-bar a:hover {
  color: var(--color-primary);
}

.top-bar {
  height: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(176, 218, 2380,0.2);
  transition: height var(--transition), opacity var(--transition);
}

/* Hero pages: header + top bar transparent over background image */
.site-header.header-hero-mode .top-bar {
  /* background: transparent; */
  border-bottom-color: rgba(255,255,255,0.15);
}

/* When top bar hides on scroll (home + inner): collapse smoothly so bottom header moves up */
.site-header.top-bar-collapsed .top-bar {
  height: 0;
  min-height: 0;
  opacity: 0;
  overflow: hidden;
  border-bottom-width: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: height 0.25s ease, opacity 0.25s ease;
}

.top-bar-inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  padding: 0 2rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-white);
}

.top-bar a:hover { color: var(--color-primary); }

/* Top bar: ul li (WordPress-ready) */
.top-bar-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-bar-menu li { margin: 0; }

.nav-link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-white);
  transition: color var(--transition);
}

.nav-link-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

.nav-inner {
  display: flex;
  height: 5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

@media (min-width: 1024px) {
  .nav-inner { padding: 0 2rem; }
}

.nav-brand img {
  height: 2.5rem;
  width: auto;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
}

/* WordPress menu container (wraps ul) */
.nav-menu-container {
  display: flex;
  align-items: center;
}

/* Main nav: ul.nav-menu > li (WordPress wp_nav_menu output) */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu > .menu-item {
  position: relative;
}

.nav-menu > .menu-item > a {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-white);
  transition: color var(--transition);
}
.backdrop-blur-md .nav-menu > .menu-item > a,.backdrop-blur-md .top-bar-menu a,.backdrop-blur-md .top-bar-menu li button{
  color: hsl(var(--foreground));
}

.nav-menu > .menu-item > a:hover,
.site-header.scrolled .nav-menu > .menu-item > a:hover {
  color: var(--color-primary);
}

/* Dropdown arrow for menu items with submenu (center-aligned with text) */
.nav-menu > .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  padding-right: 0.5em;
}
.nav-menu > .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  margin-left: 0.35em;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.nav-menu > .menu-item-has-children:hover > a::after {
  transform: rotate(-135deg);
}

/* Dropdown: show exactly below the parent menu item (not full width) */
.nav-menu > .menu-item-has-children > .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 60;
  margin: 0;
  padding: 1.5rem;
  padding-top: 1.75rem;
  width: 16rem;
  list-style: none;
  display: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xl);
}

.nav-menu > .menu-item-has-children:hover > .sub-menu {
  display: block;
}

.nav-menu .sub-menu .menu-item {
  margin: 0;
}

.nav-menu .sub-menu .menu-item + .menu-item {
  margin-top: 0.5rem;
}

.nav-menu .sub-menu a {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  transition: color var(--transition);
}

.nav-menu .sub-menu a:hover {
  color: var(--color-primary);
}

/* Current page highlight - for all menu items (with and without dropdown) */
.nav-menu > .current-menu-item > a,
.site-header.scrolled .nav-menu > .current-menu-item > a {
  color: var(--color-primary) !important;
}

/* Underline for non-dropdown menu items when active */
.nav-menu > .current-menu-item:not(.menu-item-has-children) > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
}

/* Parent of current sub-page (e.g. Oplossingen when on Special purpose) */
.nav-menu > .current-menu-ancestor > a,
.site-header.scrolled .nav-menu > .current-menu-ancestor > a {
  color: var(--color-primary) !important;
}

/* Ensure parent menu item is highlighted when it's the current page (e.g. Oplossingen page itself) */
.nav-menu > .current-menu-item.menu-item-has-children > a,
.site-header.scrolled .nav-menu > .current-menu-item.menu-item-has-children > a {
  color: var(--color-primary) !important;
}

/* Arrow should point up when menu item is active or is an ancestor of current page (all dropdowns) */
.nav-menu > .current-menu-item.menu-item-has-children > a::after,
.nav-menu > .current-menu-ancestor.menu-item-has-children > a::after,
.site-header.scrolled .nav-menu > .current-menu-item.menu-item-has-children > a::after,
.site-header.scrolled .nav-menu > .current-menu-ancestor.menu-item-has-children > a::after {
  transform: rotate(-135deg);
}

.nav-arrow {
  font-size: 10px;
  opacity: 0.6;
}

.btn-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: 0 10px 15px -3px rgba(12,122,184,0.2);
  transition: background var(--transition);
 border: 1px solid rgb(229, 231, 235);
 font-family: var(--font-body);
 line-height: 16px;
}

.btn-nav-cta:hover { background: var(--color-primary-hover); }

.mobile-menu-btn {
  position: relative;
  z-index: 50;
  font-size: 1rem;
  color: var(--color-white);
  background: none;
  border: none;
  cursor: pointer;
}

@media (min-width: 1201px) {
  .mobile-menu-btn,
  #mobile-menu-toggle {
    display: none !important;
  }
}

.site-header  .custom-logo-link img{
  height: calc(var(--spacing) * 10);
    width: auto;
}
header{
  transition: all 0.3s ease-in-out !important;
}

.hero-bottom-panel.backdrop-blur-md {
  top: auto !important;
}

/* Mobile menu button icon toggle */
#mobile-menu-toggle .lucide-x {
  display: none;
}


#mobile-menu-toggle[aria-expanded="true"] .lucide-menu {
  display: none;
}

#mobile-menu-toggle[aria-expanded="true"] .lucide-x{
  display: block !important;
  stroke: #000;
}
.backdrop-blur-md  .lucide-x,.backdrop-blur-md  .lucide-menu{
  stroke: #000 !important;
}

/* Show correct icon based on menu state, not just backdrop class */
.backdrop-blur-md #mobile-menu-toggle[aria-expanded="false"] .lucide-x {
  display: none;
}

.backdrop-blur-md #mobile-menu-toggle[aria-expanded="false"] .lucide-menu {
  display: block;
}

.backdrop-blur-md #mobile-menu-toggle[aria-expanded="true"] .lucide-menu {
  display: none;
}

.backdrop-blur-md #mobile-menu-toggle[aria-expanded="true"] .lucide-x {
  display: block !important;
}

/* Mobile menu: ul.nav-mobile-menu > li (WordPress menu output) */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 54;
  background: var(--color-white);
  padding-top: 8rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 3rem;
  overflow-y: auto;
  display: none;
}

@media (min-width: 1024px) {
  .mobile-menu { display: none !important; }
}

@media (max-width: 1023px) {
  .mobile-menu.is-open { 
    display: block !important; 
  }
}

.nav-mobile-menu-container {
  margin: 0;
  padding: 0;
}

.mobile-menu .nav-mobile-menu,
.mobile-menu .nav-mobile-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu .nav-mobile-menu > .menu-item {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.mobile-menu .nav-mobile-menu > .menu-item > a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-foreground);
}

/* Submenu toggle button for mobile */
.mobile-menu .menu-item-has-children > a {
  position: relative;
  padding-right: 3rem;
}

.mobile-menu .submenu-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-foreground);
  transition: transform 0.25s ease;
  z-index: 1;
}

.mobile-menu .submenu-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.mobile-menu .menu-item-has-children.is-open > .submenu-toggle {
  transform: translateY(-50%) rotate(180deg);
}

/* Mobile submenu styling */
.mobile-menu .nav-mobile-menu .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mobile-menu .nav-mobile-menu .menu-item-has-children.is-open > .sub-menu {
  max-height: 1000px;
  
}
.mobile-menu .nav-mobile-menu .menu-item-has-children > .sub-menu{
  padding-top: 1rem;
  padding-left: 1rem;
}

.mobile-menu .nav-mobile-menu .sub-menu .menu-item {
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

.mobile-menu .nav-mobile-menu .sub-menu .menu-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.mobile-menu .nav-mobile-menu .sub-menu a {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  text-transform: none;
  color: var(--color-muted);
  letter-spacing: normal;
}

.mobile-menu .nav-mobile-menu .sub-menu a:hover {
  color: var(--color-primary);
}

/* Mobile top bar menu */
.mobile-menu .nav-mobile-top-bar {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.mobile-menu .nav-mobile-top-bar-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu .nav-mobile-top-bar-menu li {
  margin: 0;
  padding: 0;
}

.mobile-menu .nav-mobile-top-bar-menu .nav-link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-foreground);
  display: block;
  padding: 0.75rem 0;
  transition: color var(--transition);
}

.mobile-menu .nav-mobile-top-bar-menu .nav-link:hover {
  color: var(--color-primary);
}

.mobile-menu .nav-mobile-top-bar-menu .nav-link-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
  padding: 0.75rem 0;
}

.mobile-menu .nav-mobile-cta {
  margin-top: 2rem;
  padding-bottom: 3rem;
}

.mobile-menu .nav-mobile-cta .btn-nav-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem;
}

/* Top bar hidden on small screens */
@media (max-width: 1201px) {
  .top-bar { display: none; }
  .mobile-menu .nav-mobile-top-bar{
    border-top: 0;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-white);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(12,122,184,0.2);
  transition: background var(--transition);
}

.btn-primary:hover { background: var(--color-primary-hover); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-white);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-full);
  transition: background var(--transition);
}

.btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* ==========================================================================
   Hero (Home)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  background: var(--color-dark);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(7,26,42,0.4), var(--color-dark));
}

.hero-inner {
  position: relative;
  z-index: 10;
  
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.8);
}

.hero-title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 0.95;
  color: var(--color-white);
}

.hero-title span { color: rgba(255,255,255,0.9); }

.hero-subtitle {
  margin-top: 2rem;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
}

@media (min-width: 768px) {
  .hero-subtitle { font-size: 1.25rem; }
}

.hero-buttons {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .hero-buttons { flex-direction: row; }
}

.hero-cards {
  margin-top: 4rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .hero-cards { grid-template-columns: repeat(3, 1fr); }
}

.hero-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  padding: 1.25rem;
  backdrop-filter: blur(8px);
}

.hero-card-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.6);
}

.hero-card-text {
  margin-top: 0.5rem;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

/* ==========================================================================
   Sections (generic)
   ========================================================================== */
.section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.section-white { background: var(--color-white); }

.section-intro-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .section-intro-grid { grid-template-columns: 1fr 1fr; }
}

.eyebrow {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-primary);
}

.section-title {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-foreground);
}

.section-body {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.panel-highlights {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: linear-gradient(to bottom right, rgba(12,122,184,0.05), var(--color-white), rgba(0,0,0,0.02));
  padding: 2.5rem;
}

.panel-highlights ul { display: flex; flex-direction: column; gap: 1rem; }

.panel-highlights li {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.panel-highlights strong { color: var(--color-foreground); }

/* ==========================================================================
   Page content (inner pages)
   ========================================================================== */
.main-content {
  flex: 1;
  min-height: 50vh;
  padding-top: 8rem;
}

.page-header-section {
  padding-top: 12rem;
  padding-bottom: 6rem;
  background: var(--color-white);
}

.page-title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--color-foreground);
}

.page-subtitle {
  margin-top: 2rem;
  max-width: 48rem;
  font-size: 1.125rem;
  color: var(--color-muted);
}

.page-content-inner {
  padding-bottom: 7rem;
}

.page-content-inner .section { padding-top: 4rem; padding-bottom: 4rem; }

/* ==========================================================================
   Contact template – card + Gravity Form (screenshot style)
   ========================================================================== */
.contact-form-card {
  border-radius: 8px;
  border: 1px solid #eee;
  background: var(--color-white);
  padding: 2rem 2.5rem 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Gravity Form inside contact card */
.contact-form-card .gform_wrapper {
  max-width: 100%;
}

.contact-form-card .gform_title {
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.contact-form-card .gform_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}

.contact-form-card .gfield {
  margin-bottom: 0;
}

.contact-form-card .gfield:nth-child(n+3) {
  grid-column: 1 / -1;
}

.contact-form-card .gfield_label {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-foreground);
  margin-bottom: 0.5rem;
}

.contact-form-card .ginput_container input[type="text"],
.contact-form-card .ginput_container input[type="email"],
.contact-form-card .ginput_container input[type="tel"],
.contact-form-card .ginput_container select {
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-foreground);
  background: var(--color-white);
  border: 0 !important;
  border-radius: 4px;
  transition: border-color 0.15s ease;
}

.contact-form-card .ginput_container input::placeholder,
.contact-form-card .ginput_container select option[value=""] {
  color: #9ca3af;
}

.contact-form-card .ginput_container input:focus,
.contact-form-card .ginput_container select:focus,
.contact-form-card .ginput_container textarea:focus {
  outline: none;
  border: none;
}

.contact-form-card .ginput_container select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 2.5rem;
}

.contact-form-card .ginput_container textarea {
  width: 100%;
  min-height: 140px;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-foreground);
  background: var(--color-white);
  border: none;
  border-radius: 4px;
  resize: vertical;
  transition: border-color 0.15s ease;
}

.contact-form-card .gform_title {
  display: none;
}

.contact-form-card .gform_footer {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* Submit button: same style as header CTA (.btn-nav-cta) – force override GF styles */
.contact-form-card .gform_footer input[type="submit"],
.contact-form-card .gform_footer button[type="submit"],
.contact-form-card .gform_footer .btn-nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 32px !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: var(--color-white) !important;
  background: var(--color-primary) !important;
  border: 1px solid rgb(229, 231, 235) !important;
  border-radius: var(--radius-full) !important;
  box-shadow: 0 10px 15px -3px rgba(12, 122, 184, 0.2) !important;
  font-family: var(--font-body) !important;
  line-height: 16px !important;
  cursor: pointer !important;
  transition: background var(--transition) !important;
  width: auto !important;
  min-height: auto !important;
}

.contact-form-card .gform_footer input[type="submit"]:hover,
.contact-form-card .gform_footer button[type="submit"]:hover,
.contact-form-card .gform_footer .btn-nav-cta:hover {
  background: var(--color-primary-hover) !important;
}

/* Legacy / non-GF form fallback */
.contact-form .form-group { margin-bottom: 1.25rem; }
.contact-form label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; }
.contact-form input,
.contact-form textarea { width: 100%; padding: 0.75rem 1rem; border: none; border-radius: 4px; font-family: inherit; font-size: 1rem; }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form .btn-primary { width: 100%; padding: 1rem; margin-top: 0.5rem; }

@media (max-width: 640px) {
  .contact-form-card { padding: 1.5rem; }
  .contact-form-card .gform_fields { grid-template-columns: 1fr; }
  .contact-form-card{
    margin-top: -50px;
  }
}

/* Single job section: heading spacing (my-6 equivalent, works when Tailwind purges) */
.single-job-section h2.font-display,
.single-job-section h3.font-display {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
/* Single job: expectation box vertical spacing (my-6 equivalent) */
.single-job-section .job-expectation-box {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Single job sidebar: form same as contact page, submit button white on blue */
.single-job-section .single-job-sidebar-form.contact-form-card {
  border-color: transparent;
  box-shadow: none;
  padding: 0;
  background: transparent;
  margin: 0;
}
.single-job-section .single-job-sidebar-form.contact-form-card .gform_footer input[type="submit"],
.single-job-section .single-job-sidebar-form.contact-form-card .gform_footer button[type="submit"],
.single-job-section .single-job-sidebar-form.contact-form-card .gform_footer .btn-nav-cta {
  color: var(--color-primary) !important;
  background: var(--color-white) !important;
  border-color: var(--color-white) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.single-job-section .single-job-sidebar-form.contact-form-card .gform_footer input[type="submit"]:hover,
.single-job-section .single-job-sidebar-form.contact-form-card .gform_footer button[type="submit"]:hover,
.single-job-section .single-job-sidebar-form.contact-form-card .gform_footer .btn-nav-cta:hover {
  background: #f3f4f6 !important;
  color: var(--color-primary) !important;
  border-color: #f3f4f6 !important;
}

.contact-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

.contact-details-panel {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: linear-gradient(to bottom right, rgba(12,122,184,0.05), var(--color-white));
  padding: 2.5rem;
}

.contact-details-panel h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.contact-details-panel p { margin-top: 0.75rem; color: var(--color-muted); }

.contact-next-panel {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
}

.contact-next-panel h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.contact-next-panel ol {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.contact-next-panel li strong { color: var(--color-foreground); }

.contact-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
background:hsla(var(--foreground));
  color: var(--color-white);
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.footer-cta {
  display: grid;
  gap: 3rem;
  margin-bottom: 5rem;
}
.footer-cta h2{
  color: #0c4878;
}

@media (min-width: 1024px) {
  .footer-cta { grid-template-columns: 1fr 1fr; align-items: center; }
}

.footer-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.footer-cta-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@media (min-width: 1024px) {
  .footer-cta-actions { justify-content: flex-end; }
}

.footer-grid {
  display: grid;
  gap: 2rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

.footer-brand h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}

.footer-brand p {
  max-width: 20rem;
  font-size: 16px;
  line-height: 24px;
  color: #8f9fb5  ;
  font-family: var(--font-body);
  font-weight: 400;
}

.footer-col h4 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; padding: 0 ; margin: 0;}

.footer-col a {
  font-size: 14px;
  line-height: 20px;
  color: #8f9fb5;
  transition: color var(--transition);
  font-family: var(--font-body);
}

.footer-col a:hover { color: var(--color-primary); }

.footer-bottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
}

@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; }
}

.footer-legal ul { display: flex; gap: 1.5rem; list-style: none; }

.footer-legal a { color: #8f9fb5  ; }
.footer-legal a:hover { color: var(--color-primary); }
.footer-bottom p{
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  color: #8f9fb5;
}

.site-footer .container{
  padding-bottom: 0 !important;
}
/* ==========================================================================
   Utility
   ========================================================================== */
.text-balance { text-wrap: balance; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }


.oplossingen .grid  a group:hover h3{
  color: var(--color-white) !important;
}


.news-section .tracking-tighter{
  color: var(--color-foreground) !important;
}
.news-section .group:hover h3,.step-smo .group:hover h3{
  color: var(--color-primary) !important;
}

.breadcumb li,.projecten-filter ul li{
  list-style: none !important;
}



@media (max-width: 767px) {
  .projects .grid {
gap:30px !important;
  }
  .projects .space-y-12{
    
    transform: none !important;
  }
  .projects .space-y-12 .block:not(:last-child){
    margin-bottom: 30px;
  }
  /* Project filter: horizontal scroll on mobile */
  .projecten-filter ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
    margin: 0 -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .projecten-filter ul li {
    flex-shrink: 0;
  }
}

/* Hero scroll arrow: always visible, up-down + opacity animation */
.hero-scroll-arrow {
  transform: translateX(-50%);
  animation: hero-arrow-bounce 2s ease-in-out infinite;
}
@keyframes hero-arrow-bounce {
  0%, 100% {
    transform: translate(-50%, 0);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, 10px);
    opacity: 1;
  }
}


/* Mobile typography - Professional scaling for smaller screens */
@media (max-width: 767px) {
  /* Scale down large text sizes for better mobile readability */
  .text-3xl {
    font-size: var(--text-2xl) !important;
    line-height: var(--text-2xl--line-height);
  }
  
  /* Scale down text-4xl for mobile, but keep original size in hero section */
  .text-4xl {
    font-size: var(--text-3xl) !important;
    line-height: var(--text-3xl--line-height);
  }
  
  /* Keep original text-4xl size in hero section */
  .hero-scroll-section .text-4xl {
    font-size: var(--text-4xl) !important;
    line-height: var(--text-4xl--line-height);
  }
  
  .text-5xl {
    font-size: var(--text-4xl) !important;
    line-height: var(--text-4xl--line-height);
  }
  
  .text-6xl {
    font-size: var(--text-4xl) !important;
    line-height: var(--text-3xl--line-height);
  }
  
  .text-7xl {
    font-size: var(--text-5xl) !important;
    line-height: var(--text-3xl--line-height);
  }

  /* First section (banner) subtitle on mobile */
  .banner-section .max-w-5xl > p,
  .banner-section .max-w-4xl > p {
    font-size: 16px !important;
    /* letter-spacing: 0.2em; */
    padding-left:10px;
  }

  /* Spacing between first (banner) and second section: 60–80px on mobile */
  .banner-section {
    padding-bottom: 5rem !important; /* 80px */
    
  }
  .banner-section.project-banner{
    padding-bottom: 0 !important;
  }
  .banner-section.breadcumb{
    padding-top: 120px;
  } 
  /* Home: hero has fixed height (250vh), so use margin-bottom for visible gap */
  .banner-section.hero-scroll-section {
    padding-bottom: 0 !important;
    margin-bottom: 5rem !important; /* 80px gap */
  }
  .after-banner {
    padding-top: 0px !important;
    margin-top: 0 !important;
  }
  .banner-section h1{
    word-wrap: break-word;
  }
  .after-banner-first {
    padding-top: 120px;
  }
  .service-pillars{
    padding-top: 0;
  }
  .card-section .grid.items-center{
    padding: 24px;
    gap: 14px;
  }
  .product-groups-section .container > .grid{
    display: block;
  }
  .product-groups-section .container > .grid a.inline-flex{
    width:100%;
    margin-bottom: 30px;
  }
}

/* FAQ accordion */
.faq-accordion {
  --faq-text: #10538a;
  --faq-line: #dedede;
  --faq-line-light: #f0f0f0;
  --faq-chevron: #777;
}
.faq-accordion .container{
  max-width:900px;
  margin: auto;
}
.faq-category-title.category {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--faq-text);
  margin-bottom: 14px;
}
.faq-category-title.category::after {
  content: '';
  flex: 1;
  height: 1px;
  min-width: 20px;
  background: var(--faq-line);
  align-self: center;
}
.faq-category {
  margin-top: 2.5rem;
}
.faq-category:first-of-type {
  margin-top: 0;
}
.faq-list {
  width: 100%;
}
.faq-item {
  border-bottom: 1px solid var(--faq-line-light);
}
.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 400;
  color: var(--faq-text);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  outline: none !important;
}
.faq-trigger:hover {
  color: var(--color-primary);
}
.faq-trigger:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.faq-question {
  flex: 1;
  padding-right: 1rem;
}
.faq-chevron {
  flex-shrink: 0;
  color: var(--faq-chevron);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.faq-item[data-state="open"] .faq-chevron {
  transform: rotate(180deg);
}
.faq-content {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.faq-content.faq-content--closed {
  max-height: 0;
}
.faq-content.faq-content--open {
  max-height: 50rem;
}
.faq-content-inner {
  padding: 0 0 1.25rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--faq-text);
}

/* Single blog page template */
.single-blog-entry-content.entry-content {
  color: var(--color-foreground);
}
.single-blog-entry-content p {
  margin-bottom: 1.25em;
  line-height: 1.7;
}
.single-blog-entry-content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.single-blog-entry-content h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Default pages: typography inside theme "prose" wrapper (content-page.php) */
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tighter);
  color: var(--color-foreground);
}

.prose h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.prose h3 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.prose h4 {
  font-size: 1.125rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.prose h5 {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.prose h6 {
  font-size: 0.875rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Prose: h1 and p (for full_width_content and other prose blocks) */
.prose h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.25;
  color: var(--color-foreground);
}
.prose p {
  margin-top: 0;
  margin-bottom: 1.25em;
  line-height: 1.7;
  color: var(--color-foreground);
}

/* WYSIWYG content: h1–h6, p style & spacing (html_block, left_right_content, or add .wysiwyg-content on any parent) */
.html-block .wysiwyg-content h1,
.left-right-content .wysiwyg-content h1,
.wysiwyg-content h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.25;
  color: var(--color-foreground);
}
.html-block .wysiwyg-content h2,
.left-right-content .wysiwyg-content h2,
.wysiwyg-content h2 {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.35;
  color: var(--color-foreground);
}
.html-block .wysiwyg-content h3,
.left-right-content .wysiwyg-content h3,
.wysiwyg-content h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  color: var(--color-foreground);
}
.html-block .wysiwyg-content h4,
.left-right-content .wysiwyg-content h4,
.wysiwyg-content h4 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.45;
  color: var(--color-foreground);
}
.html-block .wysiwyg-content h5,
.left-right-content .wysiwyg-content h5,
.wysiwyg-content h5 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: var(--color-foreground);
}
.html-block .wysiwyg-content h6,
.left-right-content .wysiwyg-content h6,
.wysiwyg-content h6 {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground);
}
.html-block .wysiwyg-content p,
.left-right-content .wysiwyg-content p,
.wysiwyg-content p {
  margin-top: 0;
  margin-bottom: 1.25em;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #6b7280;
}
.wysiwyg-content h1:first-child,
.wysiwyg-content h2:first-child,
.wysiwyg-content h3:first-child,
.wysiwyg-content h4:first-child,
.wysiwyg-content h5:first-child,
.wysiwyg-content h6:first-child {
  margin-top: 0;
}
.wysiwyg-content ul,
.wysiwyg-content ol {
  margin-top: 0;
  margin-bottom: 1.25em;
  padding-left: 1.5em;
}
.wysiwyg-content li {
  margin-bottom: 0.35em;
}

.single-blog-entry-content ul,
.single-blog-entry-content ol {
  margin-bottom: 1.25em;
  padding-left: 1.5em;
}
.single-blog-entry-content .page-links {
  margin-top: 1.5rem;
}
.single-blog-entry-content .edit-link {
  margin-top: 1rem;
  display: inline-block;
}
.single-blog-entry-content .cat-links,
.single-blog-entry-content .tags-links {
  display: block;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Single blog share icons */
.single-blog-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.single-blog-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 4px;
  color: var(--color-muted);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.single-blog-share-icon:hover {
  color: var(--color-primary);
  background-color: rgba(12, 117, 182, 0.1);
}
.single-blog-share .flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.oplossingen .grid  a:hover img{
	filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(7468%) hue-rotate(249deg) brightness(103%) contrast(96%);
}
.cards-grid-section .grid.gap-8 a img{
	width:auto !important;
}

/* Video modal (video_section.php) */
body.smo-video-modal-open {
  overflow: hidden;
}
.smo-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.smo-video-modal.is-open {
  display: block;
}
.smo-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}
.smo-video-modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(960px, calc(100% - 2rem));
  max-height: calc(100% - 4rem);
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.smo-video-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}
.smo-video-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.smo-video-modal__content {
  position: relative;
}
.smo-video-modal__frameWrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.smo-video-modal__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.smo-video-modal__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
}

@media(max-width:767px){
  .breadcumb  .container .container {
  padding:0 !important;
}
.green-section .rounded-sm h3{
  flex-wrap: wrap;
}
	.page-id-52 .after-banner .container .flex:nth-child(odd){
		padding-right:0 !important;
	}
  .single-job-section {
    padding-top: 60px;
  }
}


.page-id-52 .after-banner .container  .flex:nth-child(odd){
padding-right:100px !important;
}

.left-right-content ul li{
  padding-left: 20px;
  position: relative;
}
.left-right-content ul li::after{
content: "";
width: 6px;
height: 6px;
background: var(--color-primary);
border-radius: 50%;
position: absolute;
left: 0;
top: 9px;
/* transform: translateY(-50%); */
}
.left-right-content ul li:not(:last-child){
  margin-bottom: 12px;
}
.resultaat-section  .author-info p:first-child{
  margin-bottom: 0;
}
.resultaat-section .testimonial-block {
  margin-top: 24px;
}
.resultaat-section .absolute.right-0.top-0.w-1\/2.h-full.bg-secondary\/20.rounded-l-\[100px\].-z-10.transform.translate-x-1\/4{
  display: none;
}
.resultaat-section ul li:not(:last-child){
  margin-bottom: 24px;
}

/* Project gallery: use only custom arrows from template; hide any Slick default arrows inside slider */
.project-gallery-section .project-gallery-slick.slick-slider .slick-arrow {
  display: none;
}

/* Project gallery arrow design: circular, white bg, thin light grey border, grey chevron (like screenshot) */
.project-gallery-arrows {
  display: flex;
  gap: 12px;
  align-items: center;
}
.project-gallery-arrow-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #e2e8f0 !important;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  padding: 0;
  color: #64748b;
  box-shadow: none !important;
}
.project-gallery-arrow-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.project-gallery-arrow-btn:active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.project-gallery-arrow-btn:focus {
  outline: none;
  /* box-shadow: 0 0 0 2px rgba(12, 117, 182, 0.25); */
}
.project-gallery-arrow-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: currentColor;
}
.project-gallery-slider.slick-initialized {
  margin-right: calc(-100vw / 2 + 1000px / 2);
}
@media(max-width:1299px){
  .project-gallery-slider.slick-initialized {
    margin-right: calc(-100vw / 2 + 600px / 2);
  }
}
@media(max-width:767px){
  .project-gallery-slider.slick-initialized {
    margin-right: 0;
  }
}

/* Ambition sphere: once fully open, section no longer sticky; spacer area white so no blue blank on scroll up */
.ambition-scroll-section.ambition-sphere-open .ambition-sticky {
  position: relative !important;
}
.ambition-scroll-section.ambition-sphere-open,
.ambition-scroll-section.ambition-sphere-open .ambition-bg {
  background-color: #fff !important;
}
.step-smo  a:hover{
  color:#fff !important;
}
.page-two-column-content ul li:not(:last-child){
  margin-bottom: 12px;
}

/* Single project: make banner + first section fit viewport */
.single-project .project-hero-wrapper .banner-section.project-banner{
  height: calc(100vh - 148px);
}
body.logged-in.single-project .project-hero-wrapper .banner-section.project-banner{
  height: calc(100vh - 180px);
}
.archive-banner.banner-section a{
  color: var(--color-primary);
  transition: all 0.3s ease-in-out;
}
.archive-banner.banner-section a:hover{
  text-decoration: underline;
}
.archive-banner.banner-section p span:not(:last-child){
  margin-bottom: 14px;
  display: block;
}
.archive-banner.banner-section p br{
  display: none;
}

/* Nieuws archive: no top padding on mobile */
@media (max-width: 767px) {
  .archive-news-grid {
    padding-top: 0;
  }
}

/* Nieuws archive: increase height of small (highlight) cards so description has more room */
.news-archive-grid {
  grid-auto-rows: minmax(360px, 1fr);
}
@media (min-width: 768px) {
  .news-archive-grid {
    grid-auto-rows: minmax(400px, 1fr);
  }
}

/* Projects flex grid: first item spans 2 rows, all other boxes same height */
.projects-flex-grid {
  grid-auto-rows: minmax(260px, 1fr);
}
@media (min-width: 768px) {
  .projects-flex-grid {
    grid-auto-rows: minmax(280px, 1fr);
  }
}
.projects-flex-grid > a {
  min-height: 0;
}

/* ==========================================================================
   Pagination (archives) – theme design
   ========================================================================== */
.pagination-wrapper {
  border-color: var(--color-border);
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 1rem;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-foreground);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pagination .nav-links a.page-numbers:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.pagination .nav-links .page-numbers.current {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  cursor: default;
  pointer-events: none;
}
.pagination .nav-links .prev.page-numbers,
.pagination .nav-links .next.page-numbers {
  min-width: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}