/*
Theme Name: WP Proverkeer Theme
Theme URI: https://example.com/wp-proverkeer-theme
Author: Proverkeer
Author URI: https://example.com
Description: A custom WordPress theme for the Proverkeer project.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-proverkeer-theme
Tags: custom, responsive, blog
*/

/* ============================================================
   PRO-VERKEER B.V. — Main Stylesheet
   Colour palette:
     #0f1923  background
     #22C55E  green   → primary CTA, active states, brand accent
     #94a3b8  slate   → body text, muted content
   ============================================================ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0f1923;
  --bg-card:    #162030;
  --bg-light:   #1d2d3e;
  /* green — primary CTA, brand, active */
  --green:      #22C55E;
  --green-dim:  #16a34a;
  --slate:      #94a3b8;
  --slate-dim:  #64748b;
  --white:      #ffffff;
  --border:     rgba(148,163,184,.15);
  --radius:     12px;
  --radius-lg:  20px;
  --trans:      .4s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Typography ── */
h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; }
h2 { font-size: clamp(1.8rem, 3vw, 3rem);   font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.3; }
p  { color: var(--slate); font-size: 1.05rem; }

.accent { color: var(--green); }

/* ── Layout ── */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 2rem;
}
.container--wide { max-width: 1400px; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.8rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  cursor: pointer;
  border: none;
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--green);
  color: #0f1923;
  box-shadow: 0 0 0 0 rgba(34,197,94,.4);
}
.btn-primary:hover {
  background: #2edf6b;
  box-shadow: 0 8px 30px rgba(34,197,94,.35);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.3);
}
.btn-ghost:hover {
  border-color: var(--green);
  color: var(--green);
}

.btn-outline {
  background: transparent;
  color: var(--green);
  border: 1.5px solid var(--green);
}
.btn-outline:hover {
  background: var(--green);
  color: #0f1923;
}

/* ── Section spacing ── */
.section { padding: 7rem 0; }
.section--sm { padding: 4rem 0; }
.section--lg { padding: 10rem 0; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1rem;
}
.section-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
}

.section-header { margin-bottom: 3.5rem; }
.section-header p { max-width: 560px; margin-top: .75rem; font-size: 1.15rem; }

/* ── Navigation ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background var(--trans), backdrop-filter var(--trans), box-shadow var(--trans);
  padding: 1.25rem 0;
}
.nav.scrolled {
  background: rgba(15,25,35,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border);
  padding: .85rem 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.nav__logo img {
  height: 36px;
  width: auto;
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav__links a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--slate);
  transition: color var(--trans);
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--green);
  transition: width var(--trans);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after { width: 100%; }
.nav__links a.active { color: var(--green); }

.nav__cta { flex-shrink: 0; }

/* Hamburger */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
}
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 0;
  background: rgba(15,25,35,.98);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 1.5rem 2rem 2rem;
}
.nav__mobile.open { display: flex; }
.nav__mobile a {
  padding: .85rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  border-bottom: 1px solid var(--border);
  transition: color var(--trans);
}
.nav__mobile a:hover { color: var(--green); }
.nav__mobile .btn { margin-top: 1.5rem; width: 100%; justify-content: center; }

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  transform: scale(1);
  transition: none;
}
.hero__bg.loaded { transform: scale(1); }

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15,25,35,.92) 0%,
    rgba(15,25,35,.75) 50%,
    rgba(15,25,35,.55) 100%
  );
}
.hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,25,35,.95) 0%, transparent 40%);
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: 10rem 0 6rem;
  max-width: 780px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.3);
  color: var(--green);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .7s .2s forwards;
}
.hero__badge .dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.hero h1 {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp .8s .4s forwards;
  margin-bottom: 1.5rem;
}
.hero h1 em { font-style: normal; color: var(--green); }

.hero__sub {
  font-size: 1.2rem;
  color: rgba(255,255,255,.75);
  max-width: 560px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .7s .6s forwards;
  margin-bottom: 2.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .7s .8s forwards;
  margin-bottom: 4rem;
}

.hero__stats {
  display: flex;
  gap: 3rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .7s 1s forwards;
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}
.stat__number {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .25rem;
}
.stat__number span { color: var(--green); }
.stat__label { font-size: .82rem; color: var(--slate); font-weight: 500; }

.hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: 0;
  animation: fadeUp .6s 1.4s forwards;
}
.hero__scroll-line {
  width: 1.5px;
  height: 40px;
  background: linear-gradient(to bottom, var(--green), transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}

/* ── Services Grid ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.service-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  transition: transform var(--trans);
}
.service-card:hover { z-index: 2; }

.service-card__img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: scale(1);
  /* !important overrides any inline style="transition:…" set by lazy-load plugins */
  transition: transform .8s cubic-bezier(.4,0,.2,1), filter .8s, opacity .6s ease !important;
  filter: brightness(.6) saturate(.8);
}
.service-card:hover .service-card__img {
  transform: scale(1.06);
  filter: brightness(.5) saturate(.6);
}

.service-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,25,35,.95) 0%, rgba(15,25,35,.2) 60%, transparent 100%);
}

.service-card__body {
  position: relative;
  z-index: 2;
  padding: 2rem;
}
.service-card__tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .75rem;
}
.service-card__body h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.service-card__body p {
  font-size: .9rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--green);
  transition: gap var(--trans);
}
.service-card:hover .service-card__link { gap: .75rem; }
.service-card__link svg { transition: transform var(--trans); }
.service-card:hover .service-card__link svg { transform: translateX(4px); }

/* ── USP / Feature strip ── */
.usp-strip {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.usp-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.usp-item {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border);
  transition: background var(--trans);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.usp-item:last-child { border-right: none; }
.usp-item:hover { background: rgba(34,197,94,.04); }

.usp-item__icon {
  width: 48px;
  height: 48px;
  background: rgba(34,197,94,.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  margin-bottom: 1rem;
  font-size: 1.4rem;
}
.usp-item h3 { font-size: 1rem; margin-bottom: .4rem; }
.usp-item p { font-size: .88rem; }

/* ── Split section (text + image) ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.split--reverse .split__media { order: -1; }

.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
}
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.4,0,.2,1), opacity .6s ease !important;
}
.split__media:hover img { transform: scale(1.04); }
.split__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--border);
  border-radius: inherit;
  pointer-events: none;
}

.split__badge {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  background: rgba(15,25,35,.9);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 2;
}
.split__badge-num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--green);
  letter-spacing: -.04em;
  line-height: 1;
}
.split__badge-text { font-size: .8rem; color: var(--slate); }

.split__text h2 { margin-bottom: 1.25rem; }
.split__text > p { margin-bottom: 2rem; font-size: 1.1rem; }

.feature-list { margin-bottom: 2.5rem; }
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before {
  content: '';
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: rgba(34,197,94,.15);
  border-radius: 50%;
  border: 1.5px solid var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2322C55E'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 2px;
}

/* ── Photo Grid / Masonry ── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: 8px;
}
.photo-grid__item {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.4,0,.2,1), filter .8s, opacity .6s ease !important;
  filter: brightness(.75) saturate(.9);
}
.photo-grid__item:hover img { transform: scale(1.05); filter: brightness(.9) saturate(1); }

.photo-grid__item:nth-child(1) { grid-column: 1/6; grid-row: 1/5; }
.photo-grid__item:nth-child(2) { grid-column: 6/9; grid-row: 1/3; }
.photo-grid__item:nth-child(3) { grid-column: 9/13; grid-row: 1/4; }
.photo-grid__item:nth-child(4) { grid-column: 6/9; grid-row: 3/5; }
.photo-grid__item:nth-child(5) { grid-column: 9/13; grid-row: 4/6; }
.photo-grid__item:nth-child(6) { grid-column: 1/5; grid-row: 5/7; }
.photo-grid__item:nth-child(7) { grid-column: 5/9; grid-row: 5/7; }
.photo-grid__item:nth-child(8) { grid-column: 9/13; grid-row: 6/8; }
.photo-grid__item:nth-child(9) { grid-column: 1/5; grid-row: 7/9; }
.photo-grid__item:nth-child(10){ grid-column: 5/9; grid-row: 7/9; }

/* 5-photo compact variant: 1 large left + 2×2 right */
.photo-grid--5 {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
}
.photo-grid--5 .photo-grid__item:nth-child(1) { grid-column: 1/7;  grid-row: 1/5; }
.photo-grid--5 .photo-grid__item:nth-child(2) { grid-column: 7/10; grid-row: 1/3; }
.photo-grid--5 .photo-grid__item:nth-child(3) { grid-column: 10/13;grid-row: 1/3; }
.photo-grid--5 .photo-grid__item:nth-child(4) { grid-column: 7/10; grid-row: 3/5; }
.photo-grid--5 .photo-grid__item:nth-child(5) { grid-column: 10/13;grid-row: 3/5; }

/* ── Cards ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.card:hover {
  border-color: rgba(34,197,94,.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.card__icon {
  width: 52px;
  height: 52px;
  background: rgba(34,197,94,.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}
.card h3 { margin-bottom: .6rem; font-size: 1.1rem; }
.card p  { font-size: .9rem; }

/* ── Image + card overlay ── */
.img-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
}
.img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.4,0,.2,1), opacity .6s ease !important;
}
.img-card:hover img { transform: scale(1.04); }
.img-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15,25,35,.9) 0%, transparent 60%),
    rgba(15,25,35,.35);
}
.img-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem;
  z-index: 2;
}
.img-card__body h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.img-card__body p { font-size: .9rem; color: rgba(255,255,255,.65); }

/* ── Marquee / ticker ── */
.marquee-wrap {
  overflow: hidden;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}
.marquee-inner {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
}
.marquee-item span { color: var(--green); }

/* ── CTA Band ── */
.cta-band {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(34,197,94,.08) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5rem 0;
  text-align: center;
}
.cta-band h2 { margin-bottom: 1rem; }
.cta-band p { font-size: 1.15rem; max-width: 560px; margin: 0 auto 2.5rem; }
.cta-band__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ── Contact section ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.contact-info h2 { margin-bottom: 1rem; }
.contact-info > p { font-size: 1.1rem; margin-bottom: 2.5rem; }
.contact-detail {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.contact-detail:last-child { border-bottom: none; }
.contact-detail__icon {
  width: 44px;
  height: 44px;
  background: rgba(34,197,94,.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.contact-detail__value { font-weight: 600; color: var(--white); }
.contact-detail__label { font-size: .8rem; color: var(--slate); }

/* Contact form */
.contact-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--white); margin-bottom: .5rem; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .85rem 1rem;
  color: var(--white);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color var(--trans), background var(--trans);
  outline: none;
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--green);
  background: rgba(34,197,94,.04);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select option { background: var(--bg-card); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Footer ── */
footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}
.footer-brand__logo {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -.03em;
  margin-bottom: 1rem;
}
.footer-brand__logo span { color: var(--green); }
.footer-brand > p { font-size: .9rem; max-width: 280px; margin-bottom: 1.5rem; }

.footer-col h4 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.footer-col ul li + li { margin-top: .75rem; }
.footer-col ul li a {
  font-size: .9rem;
  color: var(--slate);
  transition: color var(--trans);
}
.footer-col ul li a:hover { color: var(--green); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--slate-dim);
  gap: 1rem;
  flex-wrap: wrap;
}

.social-links {
  display: flex;
  gap: .75rem;
}
.social-link {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  font-size: .9rem;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.social-link:hover {
  background: rgba(34,197,94,.1);
  color: var(--green);
  border-color: rgba(34,197,94,.3);
}

/* ── Page Hero (inner pages) ── */
.page-hero {
  position: relative;
  padding: 12rem 0 6rem;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15,25,35,.92) 0%,
    rgba(15,25,35,.75) 50%,
    rgba(15,25,35,.55) 100%
  );
}
.page-hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,25,35,.95) 0%, transparent 40%);
}
.page-hero__content { position: relative; z-index: 2; }
.page-hero .section-label { display: inline-flex; }
.page-hero h1 { margin-bottom: 1rem; }
.page-hero > .container > p { font-size: 1.2rem; max-width: 640px; }

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--slate-dim);
  margin-bottom: 1.5rem;
}
.breadcrumb a { transition: color var(--trans); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb span { color: var(--slate); }

/* ── Detail quality / steps list ── */
.quality-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.quality-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: border-color var(--trans);
}
.quality-item:hover { border-color: rgba(34,197,94,.25); }
.quality-item__num {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--green);
  margin-bottom: .5rem;
}
.quality-item h3 { font-size: 1rem; margin-bottom: .5rem; }
.quality-item p { font-size: .88rem; }

/* ── Job perks ── */
.perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.perk-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: border-color var(--trans);
}
.perk-item:hover { border-color: rgba(34,197,94,.25); }
.perk-item__icon {
  font-size: 1.4rem;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(34,197,94,.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.perk-item h3 { font-size: .95rem; margin-bottom: .25rem; }
.perk-item p { font-size: .85rem; }

/* ── News grid ── */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.news-grid--4 { grid-template-columns: repeat(4, 1fr); }
.news-card {
  display: block; /* card is an <a> tag — keep block layout in grid */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  border-color: rgba(34,197,94,.25);
}
.news-card__img {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform .8s cubic-bezier(.4,0,.2,1), opacity .6s ease !important; }
.news-card:hover .news-card__img img { transform: scale(1.06); }
.news-card__body { padding: 1.75rem; }
.news-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .78rem;
  color: var(--slate-dim);
  margin-bottom: .75rem;
}
.news-card__meta .tag {
  background: rgba(34,197,94,.12);
  color: var(--green);
  padding: .2rem .6rem;
  border-radius: 4px;
  font-weight: 700;
}
/* ── News filter bar ── */
.news-filter {
  display: flex;
  gap: .5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.news-filter__btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--slate);
  padding: .5rem 1.25rem;
  border-radius: 99px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.news-filter__btn:hover { color: var(--white); border-color: var(--slate); }
.news-filter__btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #000;
}

.news-card__body h3 { font-size: 1.05rem; margin-bottom: .5rem; color: var(--white); }
.news-card__body p { font-size: .88rem; }
.news-card__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--green);
  margin-top: 1rem;
  transition: gap var(--trans);
}
.news-card:hover .news-card__link { gap: .75rem; }

/* ── Accordion ── */
.accordion { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-item:last-child { border-bottom: none; }
.accordion-header {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  cursor: pointer;
  text-align: left;
  color: var(--white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  transition: background var(--trans), color var(--trans);
  gap: 1rem;
}
.accordion-header:hover { background: rgba(255,255,255,.03); color: var(--green); }
.accordion-header.open { color: var(--green); }
.accordion-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: rgba(34,197,94,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 1.1rem;
  transition: transform var(--trans), background var(--trans);
}
.accordion-header.open .accordion-icon { transform: rotate(45deg); background: rgba(34,197,94,.2); }
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
}
.accordion-body.open { max-height: 600px; }
.accordion-body__inner {
  padding: 0 2rem 1.75rem;
  color: var(--slate);
  font-size: .95rem;
  line-height: 1.7;
}

/* ── Animations ── */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(.7); }
}
@keyframes scrollLine {
  0%   { transform: scaleY(0) translateY(-100%); opacity: 1; }
  50%  { transform: scaleY(1) translateY(0); opacity: 1; }
  100% { transform: scaleY(0) translateY(100%); opacity: 0; }
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
@keyframes shimmer {
  0%  { background-position: -200% 0; }
  100%{ background-position:  200% 0; }
}

/* ── Scroll-reveal utility ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }
.reveal--delay-4 { transition-delay: .32s; }
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.reveal-left.in-view { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.reveal-right.in-view { opacity: 1; transform: translateX(0); }

/* ── Fix: hover states broken by .reveal cascade ───────────────────────────
   .reveal / .reveal-left / .reveal-right all have specificity 0,1,0 and
   appear AFTER the component rules, so they silently override transitions
   and transform values on hovered elements.  We restore them here, after
   the reveal block, so the cascade wins cleanly without !important.
──────────────────────────────────────────────────────────────────────────── */

/* Restore complete news-card transition (reveal overwrites it to opacity+transform only) */
.news-card {
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}

/* Restore news-card lift on hover.
   .news-card.in-view:hover  →  specificity 0,3,0
   .reveal.in-view           →  specificity 0,2,0   (was winning before this fix) */
.news-card.in-view:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  border-color: rgba(34,197,94,.25);
}

/* ── News article page ── */
.article-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 21/8;
  overflow: hidden;
  background: var(--bg-card);
}
.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.75);
}
.article-cover__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,25,35,.8) 0%, transparent 60%);
}
.article-cover__meta {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 760px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.article-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}
.article-body h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 2rem;
  line-height: 1.2;
}
.article-body h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 2.5rem 0 .75rem;
  color: var(--white);
}
.article-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 2rem 0 .5rem;
  color: var(--white);
}
.article-body p {
  color: var(--slate);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.article-body ul, .article-body ol {
  color: var(--slate);
  line-height: 1.8;
  margin: 0 0 1.25rem 1.5rem;
}
.article-body li { margin-bottom: .35rem; }
.article-body .article-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .85rem;
  color: var(--slate-dim);
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.article-divider {
  height: 1px;
  background: var(--border);
  margin: 3rem 0;
}

.article-prev {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}
.article-prev__label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--slate-dim);
  margin-bottom: 1rem;
}
.article-prev__card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--trans), transform var(--trans);
}
.article-prev__card:hover {
  border-color: rgba(34,197,94,.4);
  transform: translateY(-2px);
}
.article-prev__card img {
  width: 140px;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-prev__card-body {
  padding: 1.5rem 1.5rem 1.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4rem;
}
.article-prev__card-body .tag { align-self: flex-start; }
.article-prev__card-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}
.article-prev__card-body span {
  font-size: .82rem;
  color: var(--slate-dim);
}

/* ── Misc ── */
.text-green { color: var(--green); }
.text-slate  { color: var(--slate); }
.mt-0 { margin-top: 0 !important; }
.divider { height: 1px; background: var(--border); margin: 0; }

/* ── Responsive ── */
@media (max-width: 767px) {
  /* ── Global overflow fix ── */
  body { overflow-x: hidden; }

  /* ── Buttons: allow wrapping, full width when stacked ── */
  .btn { white-space: normal; text-align: center; }
  .btn-outline { word-break: break-word; }

  /* Button rows in hero / split / cta-band */
  div[style*="display:flex"][style*="gap:1rem"],
  .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-band__actions .btn { width: 100%; justify-content: center; }

  /* ── News grid: 1 column ── */
  .news-grid,
  .news-grid--4 { grid-template-columns: 1fr; }

  /* ── Service cards: 1 column ── */
  .services-grid { grid-template-columns: 1fr; }
  .service-card  { aspect-ratio: 4/3; }

  /* ── USP strip: 2×2 ── */
  .usp-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .usp-item { border-right: none; border-bottom: 1px solid var(--border); }
  .usp-item:nth-child(odd) { border-right: 1px solid var(--border); }
  .usp-item:nth-child(3),
  .usp-item:nth-child(4)   { border-bottom: none; }

  /* ── Nav ── */
  .nav__links  { display: none; }
  .nav__cta    { display: none; }
  .nav__burger { display: flex; }

  /* ── Hero ── */
  .hero__title { font-size: clamp(2.2rem, 10vw, 3.5rem); }

  /* ── Split sections: stack vertically ── */
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--reverse .split__media { order: 0; }
  .split__text > p { font-size: 1rem; }

  /* ── Quality list (diensten article): 1 column ── */
  .quality-list { grid-template-columns: 1fr; }

  /* ── Cards grid (related diensten, waarom) ── */
  .cards-grid { grid-template-columns: 1fr; }

  /* ── CTA band ── */
  .cta-band { padding: 3.5rem 0; }
  .cta-band p { font-size: 1rem; }

  /* ── Contact section (over-ons) ── */
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-row     { grid-template-columns: 1fr; }
  .contact-form { padding: 1.5rem; }

  /* ── Footer ── */
  .footer-grid   { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .5rem; }
  .footer-brand > p { max-width: 100%; }

  /* ── Page hero ── */
  .page-hero__content { padding: 6rem 0 3rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* News grid: 2 columns */
  .news-grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* Service cards: 2 columns */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* USP strip: 2×2 */
  .usp-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .usp-item { border-right: none; border-bottom: 1px solid var(--border); }
  .usp-item:nth-child(odd) { border-right: 1px solid var(--border); }
  .usp-item:nth-child(3),
  .usp-item:nth-child(4)   { border-bottom: none; }

  /* Split sections */
  .split { gap: 3rem; }

  /* Contact grid: stack on tablet */
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }

  /* Footer: 2 columns */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}

/* ── WordPress admin bar: push fixed nav down so it doesn't overlap ── */
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}

/* ── Logo in nav ── */
.nav__logo img {
  height: 36px;
  width: auto;
  display: block;
}
.nav__logo-text {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -.02em;
}