/* Optional: calligraphy font (recommended)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Allura&display=swap" rel="stylesheet">
*/
:root{
  --font-script: "Allura", "Georgia", serif;
  --fqg-nav-h: 112px;     /* fallback */
  --fqg-nav-gap: 18px;    /* extra lucht onder navbar */
}

/* HERO */
.fqg-hero{
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
  display: grid;
  place-items: center;
}

/* Video fills */
.fqg-hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

/* Overlay for readability */
.fqg-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.65)),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.70));
}

/* Content */
.fqg-hero__content{
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: 120px; /* space for your fixed double navbar */
  padding-bottom: 64px;
  max-width: 900px;
}

/* Calligraphy headline */
.fqg-hero__title{
  margin: 0 0 14px 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.3rem, 1.6rem + 3.2vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Short text */
.fqg-hero__lead{
  margin: 0 auto 24px auto;
  max-width: 60ch;
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.18rem);
  line-height: var(--lh-normal);
  color: rgba(255,255,255,.86);
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Buttons (reuse your .btn styles, just make them pop on dark) */
.fqg-hero__actions{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.fqg-hero .btn{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.fqg-hero .btn:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}
.fqg-hero .btn--primary{
  background: var(--gold);
  border-color: var(--gold);
  color: #111;
}
.fqg-hero .btn--primary:hover{
  background: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* Scroll indicator */
.fqg-hero__scroll{
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.fqg-hero__scroll:hover{
  transform: translateX(-50%) translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}
.fqg-hero__scrollDot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  animation: fqgScrollDot 1.2s ease-in-out infinite;
}
@keyframes fqgScrollDot{
  0%,100%{ transform: translateY(-4px); opacity: .65; }
  50%{ transform: translateY(6px); opacity: 1; }
}

/* Mobile tweaks */
@media (max-width: 520px){
  .fqg-hero__content{ padding-top: 110px; }
}

/*About us steps*/
/* =========================
   FQG ABOUT FULLSCREEN (Pinned)
========================= */

/* =========================
   FQG About Fullscreen (FIXED NAV OFFSET)
========================= */
.fqg-aboutFS{
  position: relative;
  height: 300vh;          /* 3 steps */
  isolation: isolate;
  overflow: clip;
  background: #000;

  /* ✅ voorkomt dat #about-fs onder navbar landt */
  scroll-margin-top: calc(var(--fqg-nav-h) + var(--fqg-nav-gap));
}

/* Sticky background full viewport */
.fqg-aboutFS__bg{
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 0;
}
.fqg-aboutFS__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .55s ease, transform .85s ease;
}
.fqg-aboutFS__img.is-active{
  opacity: 1;
  transform: scale(1);
}

/* Overlay for readability */
.fqg-aboutFS__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1000px 520px at 30% 35%, rgba(0,0,0,.12), rgba(0,0,0,.55)),
    linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.55));
}

/* ✅ Sticky stage uses REAL navbar height */
.fqg-aboutFS__stage{
  position: sticky;
  top: calc(var(--fqg-nav-h) + var(--fqg-nav-gap));
  height: calc(100vh - (var(--fqg-nav-h) + (var(--fqg-nav-gap) * 2)));
  z-index: 2;

  display: grid;
  align-items: center;

  /* in plaats van translateY hack: netjes wat breathing room */
  padding-block: clamp(10px, 1.4vw, 18px);
}

/* Layout */
.fqg-aboutFS__inner{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items: center;
}

/* Left */
.fqg-aboutFS__eyebrow{ color: rgba(255,255,255,.75); }
.fqg-aboutFS__title{
  margin: 0 0 10px 0;
  color: #fff;
  font-size: var(--h2);
  text-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.fqg-aboutFS__subtitle{
  margin: 0 0 18px 0;
  color: rgba(255,255,255,.82);
  max-width: 52ch;
}

.fqg-aboutFS__steps{ display: grid; gap: 10px; }

/* Glass step buttons */
.fqg-aboutFS__step{
  width: 100%;
  text-align: left;
  cursor: pointer;

  border-radius: calc(var(--radius) + 2px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);

  padding: 14px 16px;
  color: rgba(255,255,255,.92);

  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.fqg-aboutFS__step:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.20);
}
.fqg-aboutFS__nr{
  grid-row: 1 / span 2;
  align-self: start;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
  color: var(--gold);
  line-height: 1;
  margin-top: 2px;
}
.fqg-aboutFS__label{ font-weight: 900; letter-spacing: -0.01em; }
.fqg-aboutFS__hint{ font-size: var(--sm); color: rgba(255,255,255,.70); }
.fqg-aboutFS__step.is-active{
  background: rgba(195,146,46,.16);
  border-color: rgba(195,146,46,.35);
}

/* Progress */
.fqg-aboutFS__progress{
  margin-top: 14px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  overflow: hidden;
}
.fqg-aboutFS__bar{
  display:block;
  height: 100%;
  width: 0%;
  background: rgba(195,146,46,.85);
  border-radius: 999px;
  transition: width .2s ease;
}

/* Right */
.fqg-aboutFS__right{
  position: relative;
  min-height: 560px;
}
.fqg-aboutFS__panel{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;

  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);

  padding: clamp(18px, 2.2vw, 28px);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
}
.fqg-aboutFS__panel.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fqg-aboutFS__panel h3{ color: #fff; margin-top: 8px; }
.fqg-aboutFS__panel p{ color: rgba(255,255,255,.80); }

.fqg-aboutFS__ctas{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.fqg-aboutFS .btn{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.fqg-aboutFS .btn:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}
.fqg-aboutFS .btn--primary{
  background: var(--gold);
  border-color: var(--gold);
  color: #111;
}
.fqg-aboutFS .btn--primary:hover{
  background: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* Brand cards */
.fqg-aboutFS__brandGrid{ display: grid; gap: 10px; margin-top: 14px; }
.fqg-aboutFS__brand{
  display:block;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  color: rgba(255,255,255,.92);
}
.fqg-aboutFS__brand:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.16);
  border-color: rgba(255,255,255,.22);
}
.fqg-aboutFS__brandTop{ display:flex; align-items:center; gap: 10px; margin-bottom: 8px; }
.fqg-aboutFS__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 14px 30px rgba(195,146,46,.28);
}
.fqg-aboutFS__brandName{ font-weight: 900; }
.fqg-aboutFS__brand p{ margin: 0 0 10px 0; font-size: var(--sm); color: rgba(255,255,255,.78); }
.fqg-aboutFS__brandLink{ font-weight: 900; font-size: var(--sm); color: rgba(195,146,46,.95); }

/* Quality items */
.fqg-aboutFS__quality{ display: grid; gap: 10px; margin-top: 14px; }
.fqg-aboutFS__qItem{
  display:grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
}
.fqg-aboutFS__qIcon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(195,146,46,.18);
  border: 1px solid rgba(195,146,46,.30);
  font-weight: 900;
  color: #fff;
}
.fqg-aboutFS__qTitle{ font-weight: 900; margin-bottom: 2px; color:#fff; }
.fqg-aboutFS__qText{ font-size: var(--sm); color: rgba(255,255,255,.78); }

/* Mobile */
@media (max-width: 980px){
  .fqg-aboutFS{
    height: auto;
    background: var(--surface);
    scroll-margin-top: 0;
  }
  .fqg-aboutFS__bg,
  .fqg-aboutFS__overlay{ display:none; }

  .fqg-aboutFS__stage{
    position: relative;
    top: auto;
    height: auto;
    padding: clamp(56px, 6vw, 90px) 0;
    background: var(--surface);
  }

  .fqg-aboutFS__inner{ grid-template-columns: 1fr; }
  .fqg-aboutFS__title,
  .fqg-aboutFS__subtitle,
  .fqg-aboutFS__eyebrow{ color: var(--text); text-shadow: none; }
  .fqg-aboutFS__subtitle{ color: var(--text-secondary); }

  .fqg-aboutFS__step,
  .fqg-aboutFS__panel,
  .fqg-aboutFS__brand,
  .fqg-aboutFS__qItem{
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    backdrop-filter: none;
  }
  .fqg-aboutFS__hint{ color: var(--text-muted); }

  .fqg-aboutFS__panel{
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-top: 14px;
    box-shadow: var(--shadow-soft);
  }
  .fqg-aboutFS__right{ min-height: auto; }
  .fqg-aboutFS__panel p{ color: var(--text-secondary); }
  .fqg-aboutFS__brand p{ color: var(--text-secondary); }
  .fqg-aboutFS__brandLink{ color: var(--gold); }
  .fqg-aboutFS__qIcon{ color: var(--text); }
  .fqg-aboutFS__qTitle{ color: var(--text); }
  .fqg-aboutFS__qText{ color: var(--text-secondary); }
}

/*Start vacatures*/
/* =========================
   FQG Careers — Chain concept (Concept 3)
   Tone of voice: "behind the scenes"
========================= */

.fqg-careers{
  position: relative;
  padding: clamp(64px, 7vw, 112px) 0;
  background: var(--bg);
}

.fqg-careers__head{
  max-width: 980px;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.fqg-careers__kicker{
  font-size: var(--sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.fqg-careers__titleRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.fqg-careers__title{
  margin: 0;
  font-size: var(--h2);
  letter-spacing: -0.03em;
}

.fqg-careers__lead{
  margin-top: 12px;
  max-width: 70ch;
  font-size: var(--p);
  color: var(--text-secondary);
}

.fqg-careers__ctas{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fqg-careers__btn{
  box-shadow: 0 10px 26px rgba(195,146,46,.18);
}
.fqg-careers__arrow{
  display:inline-block;
  transition: transform .18s ease;
}
.fqg-careers__btn:hover .fqg-careers__arrow{
  transform: translateX(2px);
}

/* ===== Chain ===== */
.fqg-chain{
  position: relative;
  border-radius: calc(var(--radius) + 10px);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding: clamp(16px, 2.4vw, 26px);
  overflow: hidden;
}

.fqg-chain__rail{
  position:absolute;
  left: 26px;
  right: 26px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    rgba(195,146,46,.15),
    rgba(195,146,46,.55),
    rgba(195,146,46,.15)
  );
  opacity: .75;
}

.fqg-chain{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Node */
.fqg-node{
  position: relative;
  z-index: 1;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(250,250,248,.9), rgba(255,255,255,1));
  padding: 16px 16px 14px 16px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  outline: none;
}

.fqg-node:hover,
.fqg-node:focus-visible{
  transform: translateY(-2px);
  border-color: rgba(195,146,46,.35);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

.fqg-node__badge{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: var(--sm);
  background: rgba(195,146,46,.14);
  border: 1px solid rgba(195,146,46,.22);
  color: var(--text);
  margin-bottom: 10px;
}

.fqg-node__title{
  margin: 0 0 8px 0;
  font-size: var(--h4);
  letter-spacing: -0.02em;
}

.fqg-node__text{
  margin: 0 0 12px 0;
  font-size: var(--sm);
  color: var(--text-secondary);
  line-height: 1.5;
  min-height: 3.5em;
}

.fqg-node__tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fqg-tag{
  font-size: var(--sm);
  color: var(--text-secondary);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Focused state (JS adds .is-active on hover/focus) */
.fqg-chain.is-focused .fqg-node{
  opacity: .60;
  filter: saturate(.95);
}
.fqg-chain.is-focused .fqg-node.is-active{
  opacity: 1;
  filter: none;
  border-color: rgba(195,146,46,.55);
  box-shadow: 0 18px 46px rgba(0,0,0,.10);
}

/* ===== Openings card ===== */
.fqg-openings{
  margin-top: 14px;
}

.fqg-openings__card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow-soft);
  padding: clamp(16px, 2.6vw, 28px);
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}

.fqg-openings__title{
  margin: 0 0 8px 0;
  font-size: var(--h3);
}

.fqg-openings__text{
  margin: 0;
  color: var(--text-secondary);
}

.fqg-openings__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.fqg-openings__item{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  overflow: hidden;
}

.fqg-openings__link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-weight: 600;
  font-size: var(--sm);
  transition: transform .16s ease, background .16s ease;
}
.fqg-openings__link:hover{
  background: rgba(195,146,46,.12);
  transform: translateY(-1px);
}

.fqg-openings__meta{
  margin-left: auto;
  font-weight: 600;
  color: var(--text-muted);
}

.fqg-openings__go{
  display:inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.7);
  transition: transform .16s ease;
}
.fqg-openings__link:hover .fqg-openings__go{
  transform: translateX(2px);
}

.fqg-openings__ctaRow{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== Reveal animation (IntersectionObserver) ===== */
.fqg-reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .55s ease;
}
.fqg-reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .fqg-chain{
    grid-template-columns: 1fr;
  }
  .fqg-chain__rail{
    display:none;
  }
  .fqg-openings__card{
    grid-template-columns: 1fr;
  }
}

/*Einde vacatures*/
/* =========================
   FQG Brand Slider (Full width)
   Uses your :root vars + .btn
========================= */

.fqg-brandSlider{
  position: relative;
  width: 100%;
  background: #000;
}

.fqg-brandSlider__viewport{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.fqg-brandSlider__track{
  display: flex;
  width: 100%;
  transform: translateX(0);
  transition: transform .6s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  touch-action: pan-y; /* allow vertical scroll, we handle horizontal */
}

/* Each slide = full width */
.fqg-brandSlide{
  position: relative;
  flex: 0 0 100%;
  min-height: clamp(520px, 70vh, 780px);
  color: #fff;
}

.fqg-brandSlide__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fqg-brandSlide__bg img,
.fqg-brandSlide__bg video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  filter: saturate(1.02) contrast(1.02);
}

/* Overlay for readability */
.fqg-brandSlide__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 560px at 50% 40%, rgba(0,0,0,.12), rgba(0,0,0,.68)),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.70));
}

/* Content */
.fqg-brandSlide__content{
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 6vw, 90px) 0;
  max-width: 1120px; /* your container already does this, but safe */
}

.fqg-brandSlide__pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  font-size: var(--sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  margin-bottom: 14px;
}

.fqg-brandSlide__title{
  margin: 0 0 10px 0;
  font-size: clamp(2.1rem, 1.7rem + 1.8vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #fff;
}

.fqg-brandSlide__lead{
  margin: 0 0 18px 0;
  max-width: 65ch;
  color: rgba(255,255,255,.84);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
}

.fqg-brandSlide__bullets{
  margin: 0 0 22px 0;
  padding-left: 18px;
  color: rgba(255,255,255,.82);
  max-width: 65ch;
}
.fqg-brandSlide__bullets li{ margin: 0 0 8px 0; }

.fqg-brandSlide__ctaRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Make secondary button readable on dark */
.fqg-brandSlide .btn{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  backdrop-filter: blur(10px);
}
.fqg-brandSlide .btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}
.fqg-brandSlide .btn--primary{
  background: var(--gold);
  border-color: var(--gold);
  color: #111;
}
.fqg-brandSlide .btn--primary:hover{
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: #111;
}

/* Arrows */
.fqg-brandSlider__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.fqg-brandSlider__arrow:hover{
  transform: translateY(-50%) scale(1.03);
  background: rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.26);
}
.fqg-brandSlider__arrow span{
  font-size: 28px;
  line-height: 1;
}

.fqg-brandSlider__arrow--prev{ left: 16px; }
.fqg-brandSlider__arrow--next{ right: 16px; }

/* Dots */
.fqg-brandSlider__dots{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 5;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

.fqg-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.25);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.fqg-dot:hover{ transform: scale(1.12); }
.fqg-dot.is-active{
  background: var(--gold);
  border-color: rgba(195,146,46,.9);
}

/* Progress bar (optional) */
.fqg-brandSlider__progress{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 62px;
  width: min(420px, calc(100% - 40px));
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  z-index: 5;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.fqg-brandSlider__bar{
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--gold);
}

/* Responsive tweaks */
@media (max-width: 820px){
  .fqg-brandSlider__arrow{
    width: 44px;
    height: 44px;
  }
  .fqg-brandSlider__arrow--prev{ left: 10px; }
  .fqg-brandSlider__arrow--next{ right: 10px; }
  .fqg-brandSlide__content{
    padding: clamp(54px, 7vw, 82px) 0;
  }
}

/* ============================================================
   Plakken in assets/css/index.css,
   direct BOVEN de regel:   /*Einde brands* /
   ============================================================ */

/* -------------------------------------------------------------------
   Brands op mobiel
   De pijlen stonden verticaal gecentreerd, dus midden over de tekst heen.
   Op een smal scherm is daar geen ruimte naast de tekst, daarom verhuizen
   ze naar onderen, op één rij met de bolletjes. De inhoud krijgt onderaan
   ruimte zodat de knop nooit onder de bediening verdwijnt.
   ------------------------------------------------------------------- */
@media (max-width: 820px){
  /* Hoogte de inhoud laten volgen: met een vaste minimumhoogte ontstaat er
     een gat tussen de knop en de bediening onderaan. */
  .fqg-brandSlide{
    min-height: 0;
  }
  .fqg-brandSlide__content{
    min-height: 0;
    padding: clamp(38px, 8vw, 62px) 0 112px;
  }

  .fqg-brandSlider__arrow{
    top: auto;
    bottom: 14px;
    transform: none;
    width: 42px;
    height: 42px;
  }
  .fqg-brandSlider__arrow:hover{
    transform: none;
  }
  .fqg-brandSlider__arrow span{
    font-size: 22px;
  }
  .fqg-brandSlider__arrow--prev{ left: 12px; }
  .fqg-brandSlider__arrow--next{ right: 12px; }

  .fqg-brandSlider__dots{ bottom: 20px; }
  .fqg-brandSlider__progress{
    bottom: 72px;
    width: calc(100% - 24px);
  }

  /* Iets rustiger zetsel; de tekst is lang op een smal scherm */
  .fqg-brandSlide__lead{ font-size: 1rem; }
  .fqg-brandSlide__bullets{ margin-bottom: 18px; }
}

@media (max-width: 430px){
  .fqg-brandSlide__pill{ font-size: .72rem; padding: 7px 10px; }
  .fqg-brandSlide__bullets{ padding-left: 16px; }
}
/*Einde brands*/
/*Start contact*/
/* =========================
   FQG Contact (Concept 3)
   Uses your :root variables
========================= */

/* Safety: box sizing inside section */
.fqg-contact,
.fqg-contact *{
  box-sizing: border-box;
}

.fqg-contact{
  padding: clamp(72px, 7vw, 110px) 0;
  background: var(--bg);
}

/* ✅ Fix: always keep side whitespace around content (even if global container has no padding) */
.fqg-contact .fqg-container{
  width: min(1200px, 100%);
  margin: 0 auto;
  padding-inline: clamp(16px, 3.2vw, 28px);
}

/* Head */
.fqg-contact__head{
  max-width: 72ch;
  margin: 0 auto 22px auto;
  text-align: center; /* zoals je screenshot */
}

.fqg-contact__title{
  margin-top: 6px;
}

.fqg-contact__sub{
  margin-top: 10px;
}

/* Topic grid */
.fqg-contact__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  grid-auto-rows: 1fr;
  margin-top: 20px;
}

/* Topic card button */
.fqg-topic{
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow-soft);
  padding: 16px 16px;
  text-align: left;
  cursor: pointer;
  display:flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  min-height: unset;
}

.fqg-topic:hover{
  transform: translateY(-2px);
  border-color: #d9d9d7;
}

/* active */
.fqg-topic.is-active{
  background: linear-gradient(180deg, rgba(195,146,46,.10), rgba(195,146,46,.04));
  border-color: rgba(195,146,46,.35);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

.fqg-topic:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(195,146,46,.28), var(--shadow-soft);
}

.fqg-topic__pill{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: var(--sm);
  color: #111;
  background: var(--gold-soft);
  border: 1px solid var(--gold-border);
}

.fqg-topic__body{
  min-width: 0;
}

.fqg-topic__title{
  font-size: var(--h4);
  margin: 2px 0 6px 0;
  letter-spacing: -0.02em;
}

.fqg-topic__desc{
  font-size: var(--sm);
  color: var(--text-secondary);
  line-height: 1.45;
}

.fqg-topic__chev{
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  opacity: .75;
  align-self: center;
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease;
}
.fqg-topic.is-active .fqg-topic__chev{
  transform: rotate(-45deg) translateX(1px);
  opacity: 1;
  border-color: var(--gold);
}

/* Form wrap */
.fqg-contact__formwrap{
  margin-top: 18px;
}

.fqg-formcard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 2.2vw, 28px); /* ✅ fix: nicer spacing on all sizes */
  overflow: hidden;
  position: relative;
}

/* Make sure inner content never touches edges */
.fqg-formcard > *{
  max-width: 100%;
}

.fqg-formcard__head{
  margin-bottom: 14px;
}

.fqg-formcard__kicker{
  font-size: var(--sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fqg-formcard__title{
  margin: 10px 0 8px 0;
}

.fqg-formcard__hint{
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--p);
  max-width: 70ch;
}

/* subtle enter animation (no layout shift) */
.fqg-formcard.is-swapping{
  animation: fqgSwap .18s ease;
}
@keyframes fqgSwap{
  from{ transform: translateY(4px); opacity: .85; }
  to{ transform: translateY(0); opacity: 1; }
}

/* fields */
.fqg-fields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  /* ✅ Fix: spacing between fields */
  column-gap: 14px;
  row-gap: 12px;

  margin-top: 16px;
}

/* Ensure inputs never “stretch weird” inside grid */
.fqg-fields input,
.fqg-fields textarea{
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 12px 12px;
  font-size: var(--p);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.fqg-fields textarea{
  grid-column: 1 / -1;
  resize: vertical;
  min-height: 140px;
  line-height: 1.45;
}

.fqg-fields input:focus,
.fqg-fields textarea:focus{
  background: var(--surface);
  border-color: rgba(195,146,46,.40);
  box-shadow: 0 0 0 3px rgba(195,146,46,.18);
}

/* actions */
.fqg-formactions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  /* ✅ Fix: right side gets the same “air” as left */
  padding-inline: 6px;
  width: 100%;
}

.fqg-submit{
  box-shadow: 0 10px 26px rgba(195,146,46,.20);
}

.fqg-submit__arrow{
  display:inline-block;
  transition: transform .16s ease;
}

.fqg-submit:hover .fqg-submit__arrow{
  transform: translateX(2px);
}

.fqg-formnote{
  margin-left: auto;
  text-align: right;
  padding-right: 6px; /* ✅ extra safety */
  color: var(--text-muted);
  max-width: 48ch;
}

/* feedback */
.fqg-feedback{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-size: var(--sm);
}
.fqg-feedback--success{
  background: rgba(31, 178, 92, .08);
  border-color: rgba(31, 178, 92, .22);
}
.fqg-feedback--error{
  background: rgba(220, 38, 38, .08);
  border-color: rgba(220, 38, 38, .22);
}

/* Responsive */
@media (max-width: 980px){
  .fqg-contact__head{
    text-align: center;
  }

  .fqg-contact__grid{
    grid-template-columns: 1fr;
  }
  .fqg-topic{
    min-height: unset;
  }
  .fqg-fields{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 12px;
  }

  .fqg-formactions{
    flex-direction: column;
    align-items: stretch;
    padding-inline: 0;
  }
  .fqg-formnote{
    margin-left: 0;
    text-align: left;
    padding-right: 0;
    opacity: .85;
  }
}
/*End contact*/

/*Footer*/
/* =========================
   FQG Footer — clean, premium, responsive
   Uses :root vars where possible
========================= */

/* Fallback container (als fqg-container niet bestaat) */
.fqg-container{
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}

/* Footer wrapper */
.fqg-footer{
  background: var(--surface);
  color: var(--text);
}

.fqg-footer__wrap{
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(195,146,46,.06), transparent 120px);
}

/* Main grid */
.fqg-footer__grid{
  padding: clamp(34px, 4.2vw, 56px) 0; /* vertical padding */
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr .95fr;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}

/* Brand column */
.fqg-footer__logo{
  display:inline-flex;
  padding: 6px 0;
}
.fqg-footer__logo img{
  height: 46px;
  width: auto;
  display:block;
}

.fqg-footer__tagline{
  margin: 10px 0 12px 0;
  max-width: 46ch;
  color: var(--text-secondary);
  font-size: var(--sm);
  line-height: 1.6;
}

.fqg-footer__meta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 16px;
}

.fqg-footer__sep{
  opacity: .55;
}

.fqg-footer__smalllink{
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .16s ease, color .16s ease;
}
.fqg-footer__smalllink:hover{
  color: var(--text);
  border-color: rgba(195,146,46,.5);
}

/* Store badges (jouw afbeeldingen) */
.fqg-footer__stores{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.fqg-store{
  display:inline-flex;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.fqg-store img{
  display:block;
  height: 42px;     /* ✅ consistent */
  width: auto;
}
.fqg-store:hover{
  transform: translateY(-1px);
  border-color: rgba(195,146,46,.30);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

/* Location columns */
.fqg-footer__title{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
}

.fqg-footer__text{
  color: var(--text-secondary);
  font-size: var(--sm);
  line-height: 1.6;
  margin-bottom: 10px;
}

.fqg-footer__link{
  display:inline-block;
  margin: 3px 0;
  color: var(--text);
  font-size: var(--sm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .16s ease, color .16s ease;
}
.fqg-footer__link:hover{
  border-color: rgba(195,146,46,.55);
}

/* Nav column */
.fqg-footer__nav{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.fqg-footer__navlinks{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.fqg-footer__navlinks a{
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--sm);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .16s ease, transform .16s ease, border-color .16s ease, color .16s ease;
}
.fqg-footer__navlinks a:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.05);
  transform: translateY(-1px);
  color: var(--text);
}

/* CTA + back to top */
.fqg-footer__cta{
  margin-top: 8px;
  display:inline-flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #111;
  font-weight: 900;
  font-size: var(--sm);
  text-decoration:none;
  box-shadow: 0 16px 40px rgba(195,146,46,.18);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.fqg-footer__cta span{
  transition: transform .16s ease;
}
.fqg-footer__cta:hover{
  transform: translateY(-1px);
  background: var(--gold-hover);
  box-shadow: 0 20px 55px rgba(195,146,46,.24);
}
.fqg-footer__cta:hover span{
  transform: translateX(2px);
}

.fqg-footer__top{
  display:inline-flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
  font-size: var(--sm);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.fqg-footer__top:hover{
  transform: translateY(-1px);
  border-color: rgba(195,146,46,.30);
  background: rgba(195,146,46,.06);
}

/* Bottom bar */
.fqg-footer__bottom{
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.fqg-footer__bottominner{
  padding: 14px 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.fqg-footer__legal{
  display:flex;
  align-items:center;
  gap: 10px;
}
.fqg-footer__legal a{
  color: var(--text-muted);
  text-decoration:none;
  border-bottom: 1px solid transparent;
  transition: border-color .16s ease, color .16s ease;
}
.fqg-footer__legal a:hover{
  color: var(--text);
  border-color: rgba(195,146,46,.55);
}

/* ✅ Responsive */
@media (max-width: 1100px){
  .fqg-footer__grid{
    grid-template-columns: 1fr 1fr;
  }
  .fqg-footer__nav{
    grid-column: 1 / -1;
  }
  .fqg-footer__navlinks{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .fqg-footer__cta,
  .fqg-footer__top{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px){
  .fqg-footer__grid{
    grid-template-columns: 1fr;
  }
  .fqg-footer__bottominner{
    flex-direction: column;
    align-items: flex-start;
  }
  .fqg-footer__stores{
    flex-direction: column;
    align-items: flex-start;
  }
  .fqg-store{
    width: 100%;
    justify-content: center;
  }
  .fqg-store img{
    height: 44px;
    width: auto;
  }
  .fqg-footer__navlinks{
    grid-template-columns: 1fr;
  }
}


/*VACATURES PAGE*/
/*VACATURES PAGE*/
/* =========================
   FQG Vacatures — Option 1 Explorer (Premium)
   Uses your :root variables
========================= */

.fqg-jobsHero{
  padding: clamp(54px, 6vw, 92px) 0 clamp(26px, 3.5vw, 40px);
  background: radial-gradient(900px 340px at 20% 10%, rgba(195,146,46,.16), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.02), transparent 55%);
}
.fqg-jobsHero__inner{ max-width: 980px; }
.fqg-jobsHero__title{
  margin: 6px 0 10px 0;
  font-size: var(--h1);
  letter-spacing: -0.035em;
}
.fqg-jobsHero__lead{ margin: 0 0 16px 0; }
.fqg-jobsHero__actions{
  display:flex; gap: 12px; flex-wrap: wrap;
}

/* Explorer */
.fqg-jobs{
  padding: clamp(22px, 3vw, 44px) 0 clamp(64px, 6vw, 96px);
  background: var(--bg);
}
.fqg-jobs__toolbar{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.fqg-jobs__search{
  flex: 1 1 380px;
  display:flex;
  align-items:center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 14px;
  box-shadow: var(--shadow-soft);
}
.fqg-jobs__searchIcon{ opacity: .55; font-weight: 900; }
.fqg-jobs__searchInput{
  width: 100%;
  border: 0;
  outline: none;
  font-size: var(--p);
  background: transparent;
  color: var(--text);
}
.fqg-jobs__filters{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.fqg-jobs__select{
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 12px;
  font-size: var(--sm);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}
.fqg-jobs__reset{ padding-inline: 14px; }

/* Grid */
.fqg-jobs__grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 16px;
  align-items: start;
}

/* List */
.fqg-jobsList{
  position: sticky;
  top: 110px; /* navbar offset, pas aan als nodig */
}
.fqg-jobsList__head{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  margin-bottom: 12px;
}
.fqg-jobsList__count{ font-weight: 800; }
.fqg-jobsList__items{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.fqg-jobCard{
  width: 100%;
  text-align:left;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.fqg-jobCard:hover{
  transform: translateY(-1px);
  border-color: rgba(195,146,46,.35);
  box-shadow: 0 16px 42px rgba(0,0,0,.08);
}
.fqg-jobCard.is-active{
  background: linear-gradient(180deg, rgba(195,146,46,.10), rgba(195,146,46,.04));
  border-color: rgba(195,146,46,.40);
}
.fqg-jobCard__top{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content: space-between;
}
.fqg-jobCard__title{
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.02rem;
}
.fqg-jobCard__meta{
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: var(--sm);
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fqg-dotSep{ opacity: .55; }
.fqg-jobCard__sub{ margin-top: 8px; }

.fqg-jobCard__badge{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(195,146,46,.16);
  border: 1px solid rgba(195,146,46,.28);
  color: #111;
  white-space: nowrap;
}
.fqg-jobCard__badge--soft{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
  color: var(--text);
}
.fqg-jobCard--open{
  border-style: dashed;
}

/* Empty state */
.fqg-jobsList__empty{ margin-top: 10px; }
.fqg-emptyCard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.fqg-emptyCard__title{ font-weight: 900; margin-bottom: 6px; }
.fqg-emptyCard__text{ color: var(--text-secondary); margin-bottom: 12px; }

/* Detail */
.fqg-jobDetail__card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.fqg-jobDetail__header{
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.fqg-jobDetail__title{
  margin: 6px 0 6px 0;
  font-size: var(--h3);
}
.fqg-jobDetail__meta{
  color: var(--text-secondary);
  font-size: var(--sm);
}
.fqg-jobDetail__ctaCol{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.fqg-jobDetail__body{ padding: 18px; }
.fqg-jobDetail__intro{
  color: var(--text-secondary);
  margin: 0 0 16px 0;
}
.fqg-jobDetail__cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.fqg-jobDetail__col{
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}
.fqg-jobDetail__offer{
  background: linear-gradient(180deg, rgba(195,146,46,.10), rgba(195,146,46,.04));
  border: 1px solid rgba(195,146,46,.25);
  border-radius: 16px;
  padding: 14px;
  margin-top: 10px;
}
.fqg-jobDetail__h{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.fqg-jobDetail__p{
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--sm);
  line-height: 1.55;
}
.fqg-jobDetail__bottom{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Apply modal */
.fqg-applyModal{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display:none;
  padding: clamp(14px, 3vw, 28px); /* iets luxer, ook mobiel */
  box-sizing: border-box;
  isolation: isolate;
}
.fqg-applyModal.is-open{
  display:flex;
  align-items: flex-start;
  justify-content: center;
}

.fqg-applyModal__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  z-index: 1;
}

.fqg-applyModal__panel{
  position: relative;
  z-index: 2;
  width: min(820px, 100%); /* net iets breder, oogt premium */
  border-radius: calc(var(--radius) + 14px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0,0,0,.24);
  overflow: hidden;
  transform: translateY(-6px);
  animation: fqgModalIn .18s ease forwards;
}
@keyframes fqgModalIn{
  to{ transform: translateY(0); }
}

.fqg-applyModal__top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px; /* FIX: meer lucht */
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(195,146,46,.10), rgba(195,146,46,.03));
  position: relative;
}

.fqg-applyModal__title{
  margin: 6px 0 4px 0;
  letter-spacing: -0.02em;
}

.fqg-applyModal__close{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.75);
  cursor: pointer;
  display:grid;
  place-items:center;
  transition: transform .16s ease, background .16s ease;
}
.fqg-applyModal__close:hover{
  transform: scale(1.04);
  background: rgba(255,255,255,.95);
}

/* FIX: body padding + box sizing zodat rechts/onder altijd klopt */
.fqg-applyModal__body{
  padding: 18px 22px 22px;
  box-sizing: border-box;
  width: 100%;
}

/* Apply form tweaks (uses your .fqg-fields baseline) */
.fqg-fields--apply{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; /* FIX: consistente ruimte tussen velden */
}

/* extra safety: inputs in modal mogen nooit “buiten” hun grid */
.fqg-fields--apply input,
.fqg-fields--apply textarea{
  width: 100%;
  box-sizing: border-box;
}

.fqg-fields--apply textarea{
  grid-column: 1 / -1;
  min-height: 170px;
}

/* FIX: actions row die niet tegen rechterrand plakt */
.fqg-applyForm__actions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start; /* ipv space-between */
}

.fqg-applyForm__note{
  max-width: 48ch;
  margin-left: auto;  /* duwt naar rechts binnen padding */
  text-align: right;
}

/* Responsive */
@media (max-width: 980px){
  .fqg-jobs__grid{ grid-template-columns: 1fr; }
  .fqg-jobsList{ position: static; top: auto; }
  .fqg-jobDetail__cols{ grid-template-columns: 1fr; }
  .fqg-fields--apply{ grid-template-columns: 1fr; }
}

/* Modal responsive: netjes stacken en padding behouden */
@media (max-width: 720px){
  .fqg-applyModal__top{ padding: 16px 16px 12px; }
  .fqg-applyModal__body{ padding: 14px 16px 16px; }
  .fqg-applyForm__actions{
    flex-direction: column;
    align-items: stretch;
  }
  .fqg-applyForm__note{
    margin-left: 0;
    text-align: left;
  }
}

/* Upload block (CV / Motivation) */
.fqg-upload{
  grid-column: 1 / -1; /* in jouw 2-col grid altijd volle breedte */
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.fqg-upload__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items:center;
  padding: 10px 8px;
  border-radius: 12px;
}

.fqg-upload__row + .fqg-upload__row{
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 14px;
}

.fqg-upload__label{
  display:flex;
  flex-direction:column;
  gap: 4px;
}

.fqg-upload__title{
  font-weight: 900;
  letter-spacing: -0.01em;
}

.fqg-upload__meta{
  font-size: var(--sm);
  color: var(--text-secondary);
}

.fqg-upload__control{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Make the native file input look intentional */
.fqg-upload__input{
  width: 100%;
  max-width: 340px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 10px 12px;
  box-shadow: var(--shadow-soft);
  font-size: var(--sm);
  color: var(--text);
  cursor: pointer;
}

/* Nice filename pill */
.fqg-upload__file{
  font-size: var(--sm);
  color: var(--text-secondary);
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 8px 10px;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hint */
.fqg-upload__hint{
  margin-top: 10px;
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 980px){
  .fqg-upload__row{
    grid-template-columns: 1fr;
  }
  .fqg-upload__control{
    justify-content: flex-start;
  }
  .fqg-upload__input,
  .fqg-upload__file{
    max-width: 100%;
  }
}

/* Form status (success / error) */
.fqg-formStatus{
  grid-column: 1 / -1;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-size: var(--sm);
  line-height: 1.5;
  margin-top: 10px;
}

.fqg-formStatus.is-success{
  border-color: rgba(40, 167, 69, .35);
  background: linear-gradient(180deg, rgba(40,167,69,.10), rgba(40,167,69,.04));
}

.fqg-formStatus.is-error{
  border-color: rgba(220, 53, 69, .35);
  background: linear-gradient(180deg, rgba(220,53,69,.10), rgba(220,53,69,.04));
}

.fqg-formStatus__title{
  font-weight: 900;
  margin-bottom: 4px;
}

.fqg-formStatus__text{
  color: var(--text-secondary);
}
/* Mobile: modal mag nooit hoger zijn dan viewport */
@media (max-width: 720px){
  .fqg-applyModal__panel{
    max-height: calc(100dvh - 24px); /* dynamische viewport height */
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 720px){
  .fqg-applyModal__body{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
    flex: 1 1 auto;
  }
}
@media (max-width: 720px){
  .fqg-applyForm__actions{
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/*Product Page*/
/* =========================
   FQG Products Overview (cards → dedicated pages)
   Uses your :root variables
========================= */

.fqg-products{
  background: var(--bg);
}

.fqg-productsHero{
  padding: clamp(62px, 6.5vw, 96px) 0 clamp(18px, 3vw, 28px);
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(195,146,46,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.02), transparent 55%);
  padding-top: 15vh;
}

.fqg-productsHero__inner{
  max-width: 980px;
}

.fqg-productsHero__title{
  margin: 6px 0 10px 0;
  font-size: var(--h1);
  letter-spacing: -0.035em;
}

.fqg-productsHero__lead{
  margin: 0 0 18px 0;
}

/* filter bar (premium glass) */
.fqg-productsHero__filters{
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
}

.fqg-filter{
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: var(--sm);
  color: var(--text);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.fqg-filter:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.06);
}
.fqg-filter.is-active{
  background: rgba(195,146,46,.16);
  border-color: rgba(195,146,46,.28);
}

.fqg-productsGrid{
  padding: clamp(22px, 3vw, 38px) 0 clamp(70px, 7vw, 110px);
}

/* grid */
.fqg-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* product card */
.fqg-prodCard{
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 360px;
}

.fqg-prodCard:hover{
  transform: translateY(-3px);
  border-color: rgba(195,146,46,.30);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
}

/* media */
.fqg-prodCard__media{
  position: relative;
  height: 190px;
  background: var(--surface-alt);
  overflow: hidden;
}
.fqg-prodCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .5s ease;
}
.fqg-prodCard:hover .fqg-prodCard__media img{
  transform: scale(1.06);
}

/* body */
.fqg-prodCard__body{
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.fqg-prodCard__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.fqg-prodCard__title{
  margin: 0;
  font-size: var(--h4);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.fqg-prodCard__chip{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--text);
  white-space: nowrap;
}

.fqg-prodCard__desc{
  margin: 0;
  font-size: var(--sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.fqg-prodCard__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: var(--sm);
  color: var(--gold);
  margin-top: 4px;
}

.fqg-prodCard__arrow{
  transition: transform .16s ease;
}
.fqg-prodCard:hover .fqg-prodCard__arrow{
  transform: translateX(2px);
}

/* filter hiding */
.fqg-prodCard.is-hidden{
  display: none;
}

.fqg-productsEmpty{
  margin-top: 16px;
}

.fqg-productsFoot{
  margin-top: 18px;
}
.fqg-productsFoot__card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fqg-productsFoot__title{
  margin: 0 0 6px 0;
  font-size: var(--h3);
  letter-spacing: -0.02em;
}
.fqg-productsFoot__text{
  margin: 0;
}

/* Actions row */
.fqg-prodCard__actions{
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fqg-prodCard__btn{
  width: 100%;
  justify-content: center;
}

@media (max-width: 640px){
  .fqg-prodCard__actions{
    grid-template-columns: 1fr;
  }
}

/* responsive */
@media (max-width: 980px){
  .fqg-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .fqg-grid{
    grid-template-columns: 1fr;
  }
  .fqg-productsHero__filters{
    width: 100%;
    justify-content: center;
  }
}
.fqg-prodCard__actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Make buttons compact ONLY in product cards */
.fqg-prodCard__actions .btn{
  width: auto !important;           /* override global full-width */
  min-height: unset;
  padding: 10px 14px;               /* smaller */
  border-radius: 999px;
  font-size: var(--sm);
  line-height: 1;
  box-shadow: none;
}

/* Primary slightly stronger but still compact */
.fqg-prodCard__actions .btn--primary{
  box-shadow: 0 10px 24px rgba(195,146,46,.18);
}

/* Keep arrows tight */
.fqg-prodCard__actions .btn span[aria-hidden="true"]{
  margin-left: 6px;
}

/* Mobile: keep them side-by-side if there’s room, otherwise wrap nicely */
@media (max-width: 520px){
  .fqg-prodCard__actions{
    gap: 8px;
  }
  .fqg-prodCard__actions .btn{
    padding: 10px 12px;
  }
}
@media (max-width: 420px){
  .fqg-prodCard__actions{
    flex-wrap: nowrap;
  }
  .fqg-prodCard__actions .btn{
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

/*Specific product page*/

.fqg-product{
  background: var(--bg);
}

.fqg-productHero{
  padding: clamp(44px, 5vw, 86px) 0 clamp(26px, 3vw, 44px);
  background:
    radial-gradient(900px 360px at 18% 12%, rgba(195,146,46,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.02), transparent 55%);
  padding-top: 15vh;
}

.fqg-productHero__inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}

.fqg-productHero__kicker{
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px 0;
}

.fqg-productHero__title{
  margin: 0 0 8px 0;
  font-size: var(--h1);
  letter-spacing: -0.04em;
}

.fqg-productHero__subtitle{
  margin: 0 0 14px 0;
  color: var(--text-secondary);
  font-size: var(--p);
}

.fqg-productHero__lead{
  margin: 0 0 18px 0;
  max-width: 64ch;
}

.fqg-productHero__ctas{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Visual */
.fqg-productHero__visual{
  position: sticky;
  top: 110px; /* navbar offset */
}

.fqg-productHero__imgWrap{
  border-radius: calc(var(--radius) + 14px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  padding: 14px;
}

.fqg-productHero__img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: calc(var(--radius) + 10px);
  background: #fff;
}

/* Facts card */
.fqg-facts{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 14px);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.fqg-facts__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.fqg-facts__title{
  font-weight: 900;
  letter-spacing: -0.02em;
}

.fqg-facts__badge{
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(195,146,46,.12);
  border: 1px solid rgba(195,146,46,.22);
  color: #111;
}

.fqg-facts__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.fqg-fact{
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}

.fqg-fact dt{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 900;
}

.fqg-fact dd{
  margin: 0;
  color: var(--text);
  font-size: var(--p);
}

/* Body */
.fqg-productBody{
  padding: clamp(20px, 3vw, 44px) 0 clamp(66px, 7vw, 110px);
}

.fqg-productBody__inner{
  display:grid;
  gap: clamp(22px, 3vw, 34px);
}

.fqg-productH2{
  margin: 0 0 10px 0;
  letter-spacing: -0.03em;
}

.fqg-productH3{
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.fqg-productP{
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: var(--p);
}

/* Story */
.fqg-productStory__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.fqg-storyCard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 12px);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

/* Usage */
.fqg-productUsage__head{
  margin-bottom: 10px;
}
.fqg-productUsage__sub{
  max-width: 70ch;
}

.fqg-usageGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.fqg-usageCard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 12px);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.fqg-usageCard::before{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(520px 260px at 18% 0%, rgba(195,146,46,.14), transparent 55%);
  pointer-events:none;
  opacity: .6;
}

.fqg-usageCard__icon{
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(195,146,46,.14);
  border: 1px solid rgba(195,146,46,.22);
  color: #111;
  font-weight: 900;
  margin-bottom: 10px;
}

.fqg-usageCard__title{
  position: relative;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.fqg-usageCard__text{
  position: relative;
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: var(--sm);
}

/* FAQ */
.fqg-productFAQ__head{
  margin-bottom: 12px;
}
.fqg-productFAQ__accent{
  color: var(--gold);
}

.fqg-accordion{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 14px);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.fqg-accItem + .fqg-accItem{
  border-top: 1px solid var(--border);
}

.fqg-accBtn{
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 16px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.fqg-accQ{
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text);
}

.fqg-accIcon{
  width: 18px;
  height: 18px;
  border-right: 2px solid rgba(0,0,0,.45);
  border-bottom: 2px solid rgba(0,0,0,.45);
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .7;
}

.fqg-accBtn[aria-expanded="true"] .fqg-accIcon{
  transform: rotate(-135deg);
  opacity: 1;
  border-color: rgba(195,146,46,.85);
}

.fqg-accPanel{
  padding: 0 16px 16px;
}

.fqg-accPanel p{
  margin: 0;
}

/* CTA block */
.fqg-productCTA__card{
  background: linear-gradient(180deg, rgba(195,146,46,.10), rgba(195,146,46,.04));
  border: 1px solid rgba(195,146,46,.22);
  border-radius: calc(var(--radius) + 14px);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.fqg-productCTA__title{
  margin: 0 0 6px 0;
}

.fqg-productCTA__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .fqg-productHero__inner{
    grid-template-columns: 1fr;
  }
  .fqg-productHero__visual{
    position: relative;
    top: auto;
  }
  .fqg-facts__grid{
    grid-template-columns: 1fr;
  }
  .fqg-productStory__grid{
    grid-template-columns: 1fr;
  }
  .fqg-usageGrid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   NEWS
   Nieuwssectie (homepage), nieuwsarchief en artikelpagina.
   Alle maten en kleuren lopen via variabelen: de tokens hieronder erven van
   de merkvariabelen uit style.css, dus pas je daar de huisstijl aan, dan
   volgt het nieuws automatisch. Wil je alleen het nieuws bijstellen, dan
   verander je hier één regel.
   ========================= */

:root{
  /* Ritme */
  --news-gap:            clamp(16px, 2vw, 26px);
  --news-section-pad:    clamp(56px, 6vw, 104px);

  /* Kaart */
  --news-card-radius:    calc(var(--radius) + 4px);
  --news-card-bg:        var(--surface);
  --news-card-border:    var(--border);
  --news-card-shadow:    var(--shadow-soft);
  --news-card-pad:       clamp(16px, 1.6vw, 22px);
  --news-media-ratio:    16 / 10;
  --news-media-ratio-wide: 16 / 9;

  /* Accenten */
  --news-accent:         var(--gold);
  --news-accent-soft:    var(--gold-soft);
  --news-accent-border:  var(--gold-border);
  --news-chip-bg:        var(--gold-soft);
  --news-chip-text:      var(--text);

  /* Artikel */
  --news-article-width:  72ch;
  --news-article-lh:     1.75;
}

/* ---------------------------------------------------------------
   Gedeelde kaart
   --------------------------------------------------------------- */
.fqg-newsCard{
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--news-card-bg);
  border: 1px solid var(--news-card-border);
  border-radius: var(--news-card-radius);
  box-shadow: var(--news-card-shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.fqg-newsCard:hover{
  transform: translateY(-3px);
  border-color: var(--news-accent-border);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
.fqg-newsCard:focus-within{
  border-color: var(--news-accent-border);
}

/* Media */
.fqg-newsCard__media{
  position: relative;
  aspect-ratio: var(--news-media-ratio);
  overflow: hidden;
  background: var(--surface-alt);
}
.fqg-newsCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.9,.2,1);
}
.fqg-newsCard:hover .fqg-newsCard__media img{
  transform: scale(1.04);
}

/* Placeholder voor artikelen zonder afbeelding */
.fqg-newsCard__placeholder{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 30% 0%, var(--news-accent-soft), transparent 70%),
    linear-gradient(135deg, var(--surface-alt), var(--surface));
}
.fqg-newsCard__placeholder span{
  font-weight: 800;
  letter-spacing: .28em;
  font-size: var(--sm);
  color: var(--news-accent);
  opacity: .75;
}

/* Body */
.fqg-newsCard__body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--news-card-pad);
  flex: 1;
}
.fqg-newsCard__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fqg-newsCard__chip{
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--news-accent-border);
  background: var(--news-chip-bg);
  color: var(--news-chip-text);
  font-size: var(--sm);
  font-weight: 700;
  line-height: 1.2;
}
.fqg-newsCard__date{
  font-size: var(--sm);
  color: var(--text-muted);
}
.fqg-newsCard__title{
  margin: 0;
  font-size: var(--h4);
  line-height: var(--lh-tight);
}
.fqg-newsCard__link{
  color: var(--text);
  text-decoration: none;
}
/* De hele kaart is klikbaar, maar de link blijft één nette focusdoelen. */
.fqg-newsCard__link::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.fqg-newsCard__link:hover{ color: var(--text); }
.fqg-newsCard__excerpt{
  margin: 0;
  font-size: var(--p);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fqg-newsCard__foot{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fqg-newsCard__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sm);
  font-weight: 700;
  color: var(--text);
}
.fqg-newsCard__arrow{
  transition: transform .18s ease;
  color: var(--news-accent);
}
.fqg-newsCard:hover .fqg-newsCard__arrow{ transform: translateX(4px); }
.fqg-newsCard__read{
  font-size: var(--sm);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Uitgelichte variant: grotere kop en beeldverhouding */
.fqg-newsCard--wide .fqg-newsCard__media{ aspect-ratio: var(--news-media-ratio-wide); }
.fqg-newsCard--wide .fqg-newsCard__title{ font-size: var(--h3); }
.fqg-newsCard--wide .fqg-newsCard__body{ padding: clamp(20px, 2vw, 30px); gap: 12px; }
.fqg-newsCard--wide .fqg-newsCard__excerpt{ -webkit-line-clamp: 4; }

/* Compacte variant: liggend, klein beeld links */
@media (min-width: 780px){
  .fqg-newsCard--compact{ flex-direction: row; }
  .fqg-newsCard--compact .fqg-newsCard__media{
    aspect-ratio: auto;
    flex: 0 0 clamp(150px, 16vw, 210px);
  }
  .fqg-newsCard--compact .fqg-newsCard__excerpt{ -webkit-line-clamp: 2; }
}

/* ---------------------------------------------------------------
   Homepage: nieuwssectie
   --------------------------------------------------------------- */
.fqg-newsTeaser{
  padding: var(--news-section-pad) 0;
  background:
    radial-gradient(900px 420px at 80% 0%, var(--news-accent-soft), transparent 62%),
    var(--bg);
}
.fqg-newsTeaser__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.fqg-newsTeaser__headText{ max-width: 640px; }
.fqg-newsTeaser__title{
  margin: 6px 0 10px 0;
  font-size: var(--h2);
}
.fqg-newsTeaser__lead{ margin: 0; }
.fqg-newsTeaser__all{ flex: 0 0 auto; white-space: nowrap; }
.fqg-newsTeaser__allMobile{ display: none; margin-top: 26px; }

.fqg-newsTeaser__grid{
  display: grid;
  gap: var(--news-gap);
}
.fqg-newsTeaser__grid--two{ grid-template-columns: repeat(2, 1fr); }

/* Drie of meer: één uitgelichte kaart met twee compacte ernaast */
@media (min-width: 1000px){
  .fqg-newsTeaser__grid--three{
    grid-template-columns: 1.25fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .fqg-newsTeaser__grid--three > .fqg-newsCard:first-child{
    grid-row: span 2;
  }
}
@media (max-width: 999px){
  .fqg-newsTeaser__grid--three{ grid-template-columns: 1fr; }
}
@media (max-width: 780px){
  .fqg-newsTeaser__grid--two{ grid-template-columns: 1fr; }
  .fqg-newsTeaser__head{ flex-direction: column; align-items: flex-start; }
  .fqg-newsTeaser__all{ display: none; }
  .fqg-newsTeaser__allMobile{ display: block; }
}

/* ---------------------------------------------------------------
   Archiefpagina
   --------------------------------------------------------------- */
.fqg-newsHero{
  padding: clamp(62px, 6.5vw, 96px) 0 clamp(18px, 3vw, 28px);
  padding-top: 15vh;
  background:
    radial-gradient(900px 420px at 20% 10%, var(--news-accent-soft), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.02), transparent 55%);
}
.fqg-newsHero__inner{ max-width: 980px; }
.fqg-newsHero__title{
  margin: 6px 0 10px 0;
  font-size: var(--h1);
  letter-spacing: -0.035em;
}
.fqg-newsHero__lead{ margin: 0 0 18px 0; }

/* Filterbalk, zelfde vorm als bij het assortiment maar met links */
.fqg-newsHero__filters{
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
}
.fqg-newsHero__filters .fqg-filter{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
}
.fqg-newsHero__filters .fqg-filter:hover{ color: var(--text); }

.fqg-newsArchive{
  padding: clamp(22px, 3vw, 38px) 0 clamp(70px, 7vw, 110px);
}
.fqg-newsArchive__count{
  margin: 0 0 18px 0;
}

.fqg-newsGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--news-gap);
}
@media (max-width: 1000px){
  .fqg-newsGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .fqg-newsGrid{ grid-template-columns: 1fr; }
}

/* Paginering */
.fqg-newsPager{
  margin-top: clamp(30px, 4vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fqg-newsPager__btn.is-disabled{
  opacity: .4;
  pointer-events: none;
}
.fqg-newsPager__pages{
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.fqg-newsPager__page{
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--sm);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}
.fqg-newsPager__page:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.06);
  color: var(--text);
}
.fqg-newsPager__page.is-active{
  background: var(--news-accent-soft);
  border-color: var(--news-accent-border);
}

/* Lege staat: dit is wat je ziet tot het eerste artikel gepubliceerd is */
.fqg-newsEmpty{
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 40px) 0;
}
.fqg-newsEmpty__card{
  max-width: 620px;
  text-align: center;
  border-radius: calc(var(--radius) + 10px);
  border: 1px dashed var(--news-accent-border);
  background:
    radial-gradient(600px 300px at 50% 0%, var(--news-accent-soft), transparent 70%),
    var(--surface);
  padding: clamp(28px, 4vw, 48px);
}
.fqg-newsEmpty__mark{
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  border: 1px solid var(--news-accent-border);
  background: var(--surface);
  font-size: var(--sm);
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--news-accent);
}
.fqg-newsEmpty__title{ margin: 0 0 10px 0; font-size: var(--h3); }
.fqg-newsEmpty__text{ margin: 0 auto 22px auto; max-width: 46ch; }
.fqg-newsEmpty__actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   Artikelpagina
   --------------------------------------------------------------- */
.fqg-article__hero{
  padding: 15vh 0 0;
  background:
    radial-gradient(900px 420px at 20% 10%, var(--news-accent-soft), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.02), transparent 55%);
}
.fqg-article__heroInner{ max-width: var(--news-article-width); }

.fqg-article__crumbs{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: var(--sm);
  color: var(--text-muted);
}
.fqg-article__crumbs a{ color: var(--text-muted); }
.fqg-article__crumbs a:hover{ color: var(--gold-hover); }

.fqg-article__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: var(--sm);
  color: var(--text-muted);
}
.fqg-article__chip{
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--news-accent-border);
  background: var(--news-chip-bg);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.fqg-article__chip:hover{ background: var(--news-accent); color: var(--text); }
.fqg-article__dot{ color: var(--border); }

.fqg-article__title{
  margin: 0 0 14px 0;
  font-size: var(--h1);
  letter-spacing: -0.035em;
}
.fqg-article__lead{
  margin: 0 0 clamp(24px, 3vw, 40px) 0;
  max-width: var(--news-article-width);
}

.fqg-article__cover{
  margin: 0;
  border-radius: calc(var(--radius) + 8px);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  aspect-ratio: var(--news-media-ratio-wide);
}
.fqg-article__cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fqg-article__content{
  padding: clamp(34px, 4vw, 60px) 0 clamp(50px, 6vw, 90px);
}
.fqg-article__body{
  max-width: var(--news-article-width);
  font-size: var(--p);
  line-height: var(--news-article-lh);
  color: var(--text-secondary);
}
.fqg-article__body > p{
  margin: 0 0 1.15em 0;
  line-height: var(--news-article-lh);
}
/* Eerste alinea iets groter, geeft het artikel een rustige aanloop */
.fqg-article__body > p:first-child{
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--text);
}
.fqg-article__h{
  margin: 1.8em 0 .5em 0;
  font-size: var(--h3);
  color: var(--text);
}
.fqg-article__list{
  margin: 0 0 1.3em 0;
  padding-left: 1.2em;
}
.fqg-article__list li{
  margin-bottom: .5em;
  padding-left: .2em;
}
.fqg-article__list li::marker{ color: var(--news-accent); }

.fqg-article__quote{
  margin: 1.8em 0;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 30px);
  border-left: 3px solid var(--news-accent);
  border-radius: var(--radius);
  background: var(--news-accent-soft);
}
.fqg-article__quote p{
  margin: 0;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--text);
  line-height: 1.5;
}
.fqg-article__quote cite{
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: var(--sm);
  color: var(--text-muted);
}

.fqg-article__figure{
  margin: 1.8em 0;
}
.fqg-article__figure img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.fqg-article__figure figcaption{
  margin-top: 10px;
  font-size: var(--sm);
  color: var(--text-muted);
}

.fqg-article__ctaRow{ margin: 1.6em 0; }

.fqg-article__author{
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--border);
}

.fqg-article__foot{
  margin-top: clamp(28px, 3vw, 44px);
  max-width: var(--news-article-width);
}

/* Vorige en volgende */
.fqg-article__nav{
  margin-top: clamp(30px, 4vw, 50px);
  padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--news-gap);
}
.fqg-article__navLink{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--news-card-radius);
  background: var(--surface);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.fqg-article__navLink:hover{
  border-color: var(--news-accent-border);
  transform: translateY(-2px);
}
.fqg-article__navLink--next{ text-align: right; align-items: flex-end; }
.fqg-article__navLabel{
  font-size: var(--sm);
  color: var(--text-muted);
}
.fqg-article__navTitle{
  font-weight: 700;
  color: var(--text);
  line-height: var(--lh-tight);
}
@media (max-width: 700px){
  .fqg-article__nav{ grid-template-columns: 1fr; }
  .fqg-article__navLink--next{ text-align: left; align-items: flex-start; }
}

/* Gerelateerd nieuws */
.fqg-newsRelated{
  padding: var(--news-section-pad) 0;
  background: var(--surface-alt);
}
.fqg-newsRelated__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.fqg-newsRelated__title{
  margin: 0;
  font-size: var(--h2);
}

/* Rustiger voor wie beweging liever beperkt houdt */
@media (prefers-reduced-motion: reduce){
  .fqg-newsCard,
  .fqg-newsCard__media img,
  .fqg-newsCard__arrow,
  .fqg-article__navLink{ transition: none; }
  .fqg-newsCard:hover{ transform: none; }
  .fqg-newsCard:hover .fqg-newsCard__media img{ transform: none; }
}

.fqg-applyModal.is-open{
  align-items: center;
}
.fqg-applyModal__panel{
  max-height: calc(100dvh - 2 * clamp(14px, 3vw, 28px));
  display: flex;
  flex-direction: column;
}
.fqg-applyModal__top{
  flex: 0 0 auto;
}
.fqg-applyModal__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.fqg-fields--apply textarea{
  min-height: clamp(96px, 18vh, 170px);
}
.fqg-upload__file{
  display: none;
}

button, input, select, textarea{
  font-family: inherit;
}

.fqg-aboutFS__qIcon{
  color: var(--gold);
}
.fqg-aboutFS__qIcon .fqg-icon{
  display: block;
  width: 18px;
  height: 18px;
}

/* About-panelen: kaart groeit mee met de hoogste inhoud (desktop) */
@media (min-width: 981px){
  .fqg-aboutFS__right{
    display: grid;
    min-height: 0;
  }
  .fqg-aboutFS__panel{
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
  }
}

/* About-sectie: content meteen over de achtergrondfoto, minder scrollafstand */
@media (min-width: 981px){
  .fqg-aboutFS{
    height: 200vh;
  }
  .fqg-aboutFS__bg{
    margin-bottom: -100vh;
  }
}

/* About-panelen: elke kaart zo hoog als zijn eigen inhoud, verticaal gecentreerd */
@media (min-width: 981px){
  .fqg-aboutFS__panel{
    align-self: center;
  }
}