html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* voorkomt horizontaal schuiven */
}
/* =========================================================
   Base (Nexa Marketing)
   ========================================================= */
/* =========================
   GLOBAL FIX (no horizontal scroll)
   ========================= */
*,
*::before,
*::after{
  box-sizing: border-box;
}
.site-footer{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}


html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* BELANGRIJK */
}

/* media nooit breder dan container */
img, video, svg, canvas{
  max-width: 100%;
  height: auto;
  display: block;
}

/* als je ergens 100vw gebruikt: dat veroorzaakt vaak overflow */
.full-bleed,
[data-fullbleed]{
  width: 100%;
  max-width: 100%;
}

/* container standaard (voorkomt witruimte links/rechts) */
.container{
  width: min(1120px, 100%);
  margin-inline: auto;
  padding-inline: 20px; /* mobile gutter */
}

/* absolute blobs mogen NOOIT de pagina breder maken */
.has-blob,
.has-blobs,
.contact-card{
  overflow: clip; /* beter dan hidden (als browser het support) */
}
@supports not (overflow: clip){
  .has-blob,
  .has-blobs,
  .contact-card{
    overflow: hidden;
  }
}

:root{
  --bg: #ffffff;
  --text: #0e2f2a;        /* donker, groen-achtig */
  --muted: #5b6b66;
  --line: rgba(14, 47, 42, 0.10);

  --brand: #0b4a3e;       /* primary groen */
  --brand-2: #15a27a;     /* accent (later voor highlights) */

  --radius: 16px;
  --radius-lg: 22px;

  --shadow-sm: 0 8px 24px rgba(0,0,0,.06);
  --shadow-md: 0 14px 38px rgba(0,0,0,.10);

  --container: 1180px;
}

/* basis */
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* container helper (optioneel) */
.container{
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

/* =========================================================
   Navbar
   ========================================================= */

/* Sticky header basis */
/* Header fixed zodat hide/show altijd werkt */
.site-header{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;

  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);

  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  will-change: transform;
}

/* ruimte bovenaan zodat content niet onder header valt */
body{
  padding-top: 78px; /* match met .navbar height */
}

.site-header.is-scrolled{
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.site-header.is-hidden{
  transform: translateY(-110%);
}

@media (prefers-reduced-motion: reduce){
  .site-header{ transition: none; }
}



.navbar{
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 78px;
}

.nav-left{
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo{
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--text);
}

/* midden menu */
.nav-center{
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-center a{
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  padding: 10px 6px;
  opacity: .85;
  position: relative;
  transition: opacity .18s ease;
}

.nav-center a:hover{
  opacity: 1;
}

.nav-center a::after{
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.nav-center a:hover::after{
  transform: scaleX(1);
}

/* rechts CTA */
.nav-right{
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;

  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;

  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  filter: brightness(1.03);
}

/* responsive */
@media (max-width: 900px){
  .nav-center{
    display: none; /* later vervangen door hamburger */
  }
  .navbar{
    height: 72px;
  }
}




/* =========================================================
   Hero
   ========================================================= */

   .hero-media{
  position: relative;
}

/* vloer-schaduw ONDER de hero */
.hero-media::after{
  content:"";
  position:absolute;

  left: 8%;
  right: 8%;
  bottom: -70px;      /* ← hoe lager, hoe zichtbaarder */
  height: 120px;

  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,.55),
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.18) 60%,
    rgba(0,0,0,0) 80%
  );

  filter: blur(45px);
  opacity: 1;

  z-index: 0;
  pointer-events: none;
}

.hero{
  position: relative;
  padding: 72px 0 48px;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  min-height: calc(100vh - 78px);
}

.hero-kicker{
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.hero-title{
  margin: 0 0 18px;
  font-size: clamp(42px, 5.2vw, 72px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.accent{
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  color: var(--brand);
}

.typewrap{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.typeTarget{
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--brand);
  font-weight: 600;
  min-width: 140px;
}

.caret{
  opacity: .65;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink{
  50%{ opacity: 0; }
}

.hero-sub{
  margin: 0 0 24px;
  max-width: 54ch;
  color: var(--text);
  opacity: .85;
  font-size: 16px;
}

.hero-ctas{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.btn-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid rgba(11, 74, 62, .28);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: transform .18s ease, border-color .18s ease;
}

.btn-secondary:hover{
  transform: translateY(-1px);
  border-color: rgba(11, 74, 62, .45);
}

.hero-proof{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.proof-chip{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  font-size: 13px;
  color: var(--muted);
}

/* media card */
.hero-media{
  position: relative;
  display: grid;
  place-items: center;
}

.media-card{
  width: min(520px, 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.media-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.media-badge{
  font-weight: 600;
  color: var(--text);
}

.media-tag{
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.media-placeholder{
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(21,162,122,.14), rgba(11,74,62,.10));
  color: rgba(14,47,42,.65);
  font-weight: 600;
}

.media-bottom{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 16px 16px;
}

.mini-stat{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(255,255,255,.7);
  text-align: center;
}

.mini-number{
  font-weight: 700;
  color: var(--text);
}

.mini-label{
  font-size: 12px;
  color: var(--muted);
}

/* blob achter card */
.blob{
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 46% 54% 52% 48% / 46% 42% 58% 54%;
  background: radial-gradient(circle at 30% 20%, rgba(21,162,122,.34), transparent 55%),
              radial-gradient(circle at 70% 80%, rgba(11,74,62,.26), transparent 60%),
              linear-gradient(135deg, rgba(177,224,229,.65), rgba(145,198,162,.45));
  filter: blur(0.2px);
  opacity: .9;
  transform: translate(40px, 30px);
  z-index: 1;
}

/* scroll hint */
.hero-scroll{
  display: grid;
  place-items: center;
  gap: 6px;
  color: rgba(14,47,42,.55);
  font-size: 13px;
  padding-bottom: 10px;
}

.hero-scroll .down{
  animation: floaty 1.6s ease-in-out infinite;
}

@keyframes floaty{
  50%{ transform: translateY(6px); }
}

@media (max-width: 980px){
  .hero-grid{
    grid-template-columns: 1fr;
    min-height: unset;
    padding-top: 24px;
  }
  .blob{
    width: 440px;
    height: 440px;
    transform: translate(0, 60px);
  }
}

/* =========================
   HERO MEDIA / VIDEO CARD
   (vertical TikTok-style)
   ========================= */

/* =========================================
   HERO: geen onnodige hoogte / geen scroll
========================================= */

:root{
  --nav-h: 88px; /* pas aan als je navbar hoger/lager is */
}

.hero{
  padding: clamp(22px, 3vw, 44px) 0;
}

.hero-grid{
  min-height: calc(100svh - var(--nav-h));
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}

/* als je nog steeds net scroll hebt door margins etc */
body{
  overflow-x: hidden;
}

/* =========================================
   MEDIA CARD: maak het smaller + geen “grote doos”
========================================= */

.hero-media{
  display: flex;
  justify-content: flex-end;
}

/* vervang die grote ‘media-card’ look door iets subtiels */
.media-card{
  width: min(420px, 100%);
  padding: 0;                    /* weg met die dikke padding */
  border-radius: 26px;
  background: transparent;       /* geen witte grote box */
  border: 0;
  box-shadow: none;
}

/* bovenbalkje (titel + tag) kan blijven, maar compacter */
.media-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 10px 4px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 12px;
}

/* =========================================
   VIDEO FRAME: “phone frame” i.p.v. mega container
========================================= */

.media-video{
  width: 100%;
  max-width: 300px;              /* kleiner! (pas gerust 260-320 aan) */
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  overflow: hidden;
  position: relative;

  /* subtiel frame */
  background: #0b0b0b;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow:
    0 18px 50px rgba(0,0,0,.10),
    0 0 0 8px rgba(255,255,255,.55); /* “matte” rand, voelt premium */
}

/* video zelf */
.hero-video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 20%;
  transform: scale(1.02);
  filter: saturate(.96) contrast(.98);
}

/* =========================================
   STATS onder video: compacter en cleaner
========================================= */

.media-bottom{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.mini-stat{
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.mini-number{
  font-weight: 700;
  line-height: 1.1;
}

.mini-label{
  font-size: 12px;
  opacity: .7;
  margin-top: 2px;
}

/* =========================================
   Mobile: video onder tekst, netjes
========================================= */

@media (max-width: 900px){
  .hero-grid{
    min-height: auto;
    padding-top: 6px;
  }

  .hero-media{
    justify-content: center;
    margin-top: 18px;
  }

  .media-card{
    width: 100%;
    max-width: 360px;
  }

  .media-video{
    max-width: 260px;
  }
}


/* Optional: Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .media-card{ transition: none; }
  .media-card:hover{ transform: none; }
}

/* Optional: mobiel iets kleiner zodat het nooit te dominant wordt */
@media (max-width: 640px){
  .media-card{ padding: 14px; border-radius: 22px; }
  .media-video{ max-width: 260px; border-radius: 20px; }
}




/* =========================
   WHY NEXA / VERGELIJKING
========================= */
.why-nexa{
  padding: clamp(56px, 6vw, 92px) 0;
  background: #ffffff;
  position: relative;
}

.why-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(22px, 4vw, 56px);
  align-items: start;
}

/* Left */
.section-kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(10, 45, 40, .55);
  margin-bottom: 10px;
}

.why-title{
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.06;
  margin: 0 0 14px;
  color: #0c2f28;
  font-weight: 700;
}

.accent-word{
  font-style: italic;
  font-weight: 700;
  color: #0c2f28;
  position: relative;
}

/* subtiele underline accent */
.accent-word::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 10px;
  border-radius: 999px;
  background: rgba(78, 188, 160, .28);
  filter: blur(.2px);
  z-index: -1;
}

.why-sub{
  margin: 0 0 18px;
  color: rgba(10, 45, 40, .72);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 52ch;
}

.why-chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.why-chips .chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(12, 47, 40, .12);
  background: rgba(255,255,255,.75);
  color: rgba(12, 47, 40, .85);
  font-size: 13px;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

/* Right */
.compare-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.compare-card{
  border-radius: 22px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

.compare-card--other{
  background: rgba(255,255,255,.70);
}

.compare-card--nexa{
  border-color: rgba(22, 126, 102, .25);
  box-shadow: 0 22px 60px rgba(12, 47, 40, .10);
}

/* Glow accent achter Nexa card */
.compare-card--nexa::before{
  content:"";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  right: -180px;
  top: -160px;
  background: rgba(78, 188, 160, .22);
  filter: blur(2px);
}

.compare-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 12px;
}

.compare-title{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0c2f28;
}

.compare-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(10,45,40,.75);
  background: rgba(255,255,255,.75);
  white-space: nowrap;
}

.compare-badge--other{
  border-color: rgba(0,0,0,.10);
}

.compare-badge--nexa{
  border-color: rgba(22, 126, 102, .25);
  background: rgba(78, 188, 160, .16);
  color: rgba(12, 47, 40, .92);
}

.compare-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.compare-list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(10,45,40,.78);
  font-size: 14px;
  line-height: 1.45;
}

.compare-list .x,
.compare-list .check{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex: 0 0 22px;
  transform: translateY(1px);
}

.compare-list .x{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.55);
}

.compare-list .check{
  background: rgba(78, 188, 160, .16);
  color: rgba(12, 47, 40, .95);
  border: 1px solid rgba(22, 126, 102, .20);
}

.compare-cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Responsive */
@media (max-width: 980px){
  .why-grid{
    grid-template-columns: 1fr;
  }
  .compare-grid{
    grid-template-columns: 1fr;
  }
  .why-sub{
    max-width: 60ch;
  }
}




























/* =========================
   DIENSTEN (Services Stack)
   ========================= */

.services-stack{
  padding: 72px 0;
  background: #fff;
  
}

/* Head (sluit aan op jouw style) */
.services-stack .section-head{
  max-width: 820px;
  margin-bottom: 26px;
}

.services-stack .section-kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(18,22,26,.55);
  margin-bottom: 10px;
}

.services-stack .section-title{
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  margin: 0 0 12px;
  color: #0f2a24;
}

.services-stack .section-sub{
  color: rgba(18,22,26,.70);
  line-height: 1.6;
  max-width: 62ch;
}

/* Underline accent (netter dan die balk) */
.underline-accent{
  position: relative;
  display: inline-block;
  font-style: italic;
}

.underline-accent::after{
  content:"";
  position:absolute;
  left: 0.08em;
  right: 0.08em;
  bottom: 0.12em;
  height: .55em;
  background: linear-gradient(90deg, rgba(145,198,162,.35), rgba(177,224,229,.35));
  border-radius: 999px;
  z-index: -1;
  transform: skewX(-8deg);
}

/* Grid van 3 kaarten */
.services-grid{
  display: grid;
  gap: 18px;
}

/* Card base */
.svc-card{
  --card-pad: 22px;
  --radius: 28px;
  --soft: rgba(255,255,255,.78);
  --stroke: rgba(0,0,0,.06);
  --shadow: 0 22px 60px rgba(0,0,0,.06);

  border-radius: var(--radius);
  border: 1px solid rgba(11,59,46,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 60px rgba(0,0,0,.06);
  padding: var(--card-pad);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Nexa zachte "bokeh" */
.svc-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.75;
  background:
    radial-gradient(720px 260px at 78% 55%, rgba(177,224,229,.35), transparent 60%),
    radial-gradient(520px 220px at 30% 35%, rgba(145,198,162,.20), transparent 60%);
}

/* Variaties per kaart (kleur iets anders) */
.svc-card--content::before{
  background:
    radial-gradient(760px 280px at 78% 55%, rgba(177,224,229,.38), transparent 62%),
    radial-gradient(520px 220px at 28% 35%, rgba(145,198,162,.18), transparent 60%);
}
.svc-card--photo::before{
  background:
    radial-gradient(760px 280px at 78% 55%, rgba(145,198,162,.28), transparent 62%),
    radial-gradient(520px 220px at 28% 35%, rgba(177,224,229,.18), transparent 60%);
}
.svc-card--web::before{
  background:
    radial-gradient(760px 280px at 78% 55%, rgba(18,82,113,.14), transparent 62%),
    radial-gradient(520px 220px at 28% 35%, rgba(177,224,229,.14), transparent 60%);
}


.svc-main,
.svc-media{
  position: relative;
  z-index: 1;
}

/* Top row */
.svc-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.svc-title{
  margin: 0;
  font-size: 20px;
  color: #0f2a24;
  line-height: 1.25;
}



.muted{
  color: rgba(18,22,26,.55);
  font-weight: 500;
  font-size: .95em;
}

/* Tags */
.svc-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: 280px;
}

.tag{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  color: rgba(18,22,26,.70);
}

/* Body */
.svc-body{
  display: grid;
  gap: 14px;
}

.svc-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.svc-list li{
  display:flex;
  align-items: center;
  gap: 10px;
  color: rgba(18,22,26,.78);
  line-height: 1.35;
}

/* Dots (per kaart kleur) */
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 10px;
  background: rgba(177,224,229,.95);
  box-shadow: 0 0 0 3px rgba(177,224,229,.25);
}
.svc-card--photo .dot{
  background: rgba(145,198,162,.92);
  box-shadow: 0 0 0 3px rgba(145,198,162,.25);
}
.svc-card--web .dot{
  background: rgba(18,82,113,.55);
  box-shadow: 0 0 0 3px rgba(18,82,113,.16);
}



.metric{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.76);
  padding: 12px;
}

.metric-num{
  font-weight: 750;
  color: #0f2a24;
  font-size: 16px;
  margin-bottom: 2px;
}

.metric-lbl{
  font-size: 12px;
  color: rgba(18,22,26,.60);
}

/* Media common */
.svc-media{
  display: grid;
  gap: 10px;
  justify-items: end;
  align-self: center;
}

.media-caption{
  display:flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pill{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(177,224,229,.22);
  border: 1px solid rgba(177,224,229,.45);
  color: rgba(18,22,26,.70);
}

.caption{
  font-size: 12px;
  color: rgba(18,22,26,.65);
}

/* =========================
   CONTENT: media stack
   ========================= */

.media-stack{
  /* Hoogte zodat kaart niet mega wordt + blijft in verhouding */
  width: min(360px, 100%);
  height: 260px;                 /* <<< tweak: 240-300 */
  position: relative;
  border-radius: 22px;
  overflow: visible;
}

.stack-item{
  position: absolute;
  width: 76%;
  height: 100%;
  right: 0;
  top: 0;
  border-radius: 22px;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #f6f8f7;
  box-shadow: 0 18px 55px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
}

/* 3 lagen */
.stack-item--a{
  transform: rotate(0deg);
  z-index: 3;
}
.stack-item--b{
  right: 10%;
  top: 10px;
  width: 70%;
  height: 92%;
  transform: rotate(-6deg);
  z-index: 2;
  opacity: .98;
}
.stack-item--c{
  right: 20%;
  top: 18px;
  width: 64%;
  height: 86%;
  transform: rotate(7deg);
  z-index: 1;
  opacity: .96;
}

/* =========================
   FOTO: figure (zelfde vibe)
   ========================= */

.photo-figure{
  width: min(360px, 100%);
  height: 260px;                 /* zelfde hoogte als content stack */
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #f6f8f7;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 55px rgba(0,0,0,.10);
}

.photo-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =========================
   WEB: mock (kleiner & strak)
   ========================= */

.web-mock{
  position: relative;
  width: min(420px, 100%);
  height: 260px;               /* zelfde hoogte */
  display: grid;
  place-items: center;
  overflow: visible;
}

.web-desktop{
  height: 88%;
  width: auto;
  max-width: 100%;
  display: block;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.14));
}

.web-phone{
  position: absolute;
  right: 6%;
  bottom: 6%;
  height: 64%;
  width: auto;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.18));
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 980px){
  .svc-card{
    grid-template-columns: 1fr;
  }

  .svc-media{
    justify-items: start;
  }

  .media-caption{
    justify-content: flex-start;
  }

  .svc-top{
    flex-direction: column;
    align-items: flex-start;
  }

  .svc-tags{
    justify-content: flex-start;
    max-width: none;
  }

  .media-stack,
  .photo-figure,
  .web-mock{
    width: min(520px, 100%);
  }
}

/* Kleine screens */
@media (max-width: 520px){
  .services-stack{
    padding: 54px 0;
  }

  .svc-card{
    padding: 18px;
    border-radius: 24px;
  }

  .svc-metrics{
    grid-template-columns: 1fr;
  }

  .media-stack,
  .photo-figure,
  .web-mock{
    height: 240px;
  }

  .stack-item{
    width: 86%;
  }
  .stack-item--b{ width: 80%; }
  .stack-item--c{ width: 74%; }
}

























































/* =========================================
   BOVENSTE KAART (Content) — video volledig zichtbaar
   Past in je bestaande diensten-styling
   ========================================= */

.svc-media--social{
  display: grid;
  gap: 10px;
  align-self: center;
  width: 100%;

  justify-items: end;
}

/* DIT is de echte “duw naar rechts” */
.svc-media--social .svc-stage{
  margin-left: auto;           /* duwt naar rechts */
  margin-right: 92px;         /* extra push (tweak: -12 tot -48) */
}


.svc-media--social .svc-stage{
  width: min(330px, 100%);   /* rechterop → video lijkt groter */
  height: 270px;             /* iets hoger, maar nog in familie */
  border-radius: 26px;       /* meer rounded */
}



/* Video zelf ook ronder */
.svc-media--social .svc-video{
  border-radius: 22px;
}

/* Groene pill ("voorbeelden") weg */
.svc-card--content .svc-media--social{
  justify-items: center;   /* <<< alleen content kaart */
}




/* =========================
   NEXA ARROWS — CLEAN & MAT
   ========================= */

.svc-card--content .svc-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 40px;
  height: 40px;
  border-radius: 999px;

  background: #004743;                 /* mat forest */
  border: 1px solid rgba(145,198,162,.45);

  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;

  display: grid;
  place-items: center;
  cursor: pointer;

  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}
/* Hover = subtiele mint touch */
.svc-card--content .svc-nav:hover{
  background: #91C6A2;               /* mint */
  color: #004743;
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

/* Active (klik) */
.svc-card--content .svc-nav:active{
  transform: translateY(-50%) scale(.96);
}






/* Video’s: altijd volledig zichtbaar (geen crop) */
.svc-media--social .svc-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  object-fit: contain;          /* <<< jouw eis */
  object-position: center;

  opacity: 0;
  transform: scale(.995);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

.svc-media--social .svc-video.is-active{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Subtiele overlay zodat “lege ruimte” bij contain premium blijft */
.svc-media--social .svc-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 45%, rgba(0,0,0,.06));
  pointer-events:none;
}

/* Dots boven de caption */
.svc-media--social .svc-stage-dots{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.svc-media--social .svc-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(15,42,36,.25);
  transform: scale(.95);
  transition: transform .35s ease, background .35s ease, width .35s ease;
}

.svc-media--social .svc-dot.is-active{
  width: 18px;
  background: rgba(15,42,36,.55);
  transform: scale(1);
}

/* Responsive: jouw bestaande regels blijven leidend,
   maar we sluiten aan op je patterns */
@media (max-width: 980px){
  .svc-media--social{
    justify-items: start;
  }
  .svc-media--social .svc-stage{
    width: min(520px, 100%);
  }
}

@media (max-width: 520px){
  .svc-media--social .svc-stage{
    height: 240px; /* match jouw mobile hoogte voor media */
  }
}

/* motion respect */
@media (prefers-reduced-motion: reduce){
  .svc-media--social .svc-video,
  .svc-media--social .svc-dot{
    transition: none !important;
  }
}







/* =========================================
   DEFINITIEF: GEEN grote box meer
   - container wordt 9:16 (rechtop)
   - container volledig transparant
   - video krijgt radius + shadow
   ========================================= */

/* alles wat extra UI is: weg */
.svc-card--content .svc-media--social .svc-stage-dots,
.svc-card--content .svc-media--social .media-caption{
  display: none !important;
}

/* de container (stage) mag NIET meer als “kaart” voelen */
.svc-card--content .svc-media--social .svc-stage{
  /* maak hem rechtop, zodat er geen liggende box kan ontstaan */
  width: min(200px, 100%);
  aspect-ratio: 9 / 16;     /* <<< dit is de sleutel */
  height: auto;

  /* volledig onzichtbaar */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;

  position: relative;
}

/* overlay weg */
.svc-card--content .svc-media--social .svc-stage::before,
.svc-card--content .svc-media--social .svc-stage::after{
  display: none !important;
}

/* video’s vullen de stage, maar blijven volledig zichtbaar */
.svc-card--content .svc-media--social .svc-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: contain;      /* alles zichtbaar */
  object-position: center;

  /* ALLEEN de video ziet er “premium” uit */
  border-radius: 26px;
  background: transparent !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.12);

  opacity: 0;
  transform: scale(.995);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

.svc-card--content .svc-media--social .svc-video.is-active{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* mobiel: net iets groter */
@media (max-width: 520px){
  .svc-card--content .svc-media--social .svc-stage{
    width: min(340px, 100%);
  }
}





.site-header.is-hidden .logo--floating{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.logo--floating{
  transition: opacity .18s ease, visibility .18s ease;
}










.underline-accent{
  position: relative;
  display: inline-block;
  font-style: italic;
  z-index: 1;
}

.underline-accent::after{
  content: "";
  position: absolute;
  left: -0.06em;            /* klein beetje overhang */
  right: -0.06em;
  bottom: -0.02em;
           /* lager = dichter bij underline */
  height: 0.28em;           /* dunner */
  background: linear-gradient(
    90deg,
    rgba(177,224,229,.70),
    rgba(177,224,229,.25)
  );
  border-radius: 999px;
  z-index: -1;              /* achter de tekst */
  filter: blur(.2px);       /* zachte rand */
}












/* =========================================================
   WERKWIJZE / PROCESS — CLEAN VERSION (Nexa)
   - Desktop: horizontale steps (7) + detail panel
   - Mobile: accordion stappen
   - Handmatig tweaken: DOT / NUM / LABEL per step (px)
========================================================= */

/* =============== */
/* Nexa kleuren     */
/* =============== */
:root{
  --forest:#004743;
  --mint:#91C6A2;
  --blue:#125271;
  --ice:#B1E0E5;

  --ink:#0f1916;
  --muted:rgba(15,25,22,.70);
  --line:rgba(15,25,22,.10);
  --card:#ffffff;

  --r-xl:28px;
  --r-lg:22px;
  --shadow: 0 18px 55px rgba(0,0,0,.08);
}

/* ========================= */
/* Section wrapper + heading */
/* ========================= */
.process{
  padding: 84px 0;
  background: #fff;
}

.process-wrap{
  width: min(1180px, 92vw);
  margin: 0 auto;
}

.process-head{
  max-width: 820px;
  margin-bottom: 22px;
}

.process .kicker{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(15,25,22,.55);
  margin: 0 0 10px;
}

.process .title{
  margin: 0 0 12px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  color: var(--forest);
}

.process .sub{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 65ch;
}

/* underline accent (zelfde vibe als jouw hero) */
.underline-accent{
  position: relative;
  display: inline-block;
  font-style: italic;
}
.underline-accent::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(177,224,229,.0), rgba(177,224,229,.95), rgba(145,198,162,.55));
  transform: skewX(-8deg);
  opacity: .95;
}

/* ===================== */
/* Shell (achtergrond)   */
/* ===================== */
.process-shell{
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(760px 300px at 18% 50%, rgba(177,224,229,.35), transparent 60%),
    radial-gradient(760px 300px at 70% 40%, rgba(145,198,162,.22), transparent 58%),
    #fff;
  box-shadow: 0 22px 70px rgba(0,0,0,.06);
  padding: 26px;
  overflow: hidden;
}

/* ===================================== */
/* DESKTOP: horizontale stappen (7 items) */
/* ===================================== */
.process-steps{
  display: flex;
  justify-content: space-between;  /* verdeelt over hele breedte */
  gap: 16px;                       /* extra ruimte tussen pills */
  align-items: stretch;
  position: relative;
  margin-bottom: 18px;
}


/* connector line achter de dots */
.process-steps::before{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  top: 16px;                 /* hoogte van de dot */
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,25,22,.12), transparent);
  pointer-events:none;
}

/* =============================== */
/* STEP BUTTON (klikbare pill)     */
/* =============================== */
.process-steps .step{
  /* ⬇️ HIER komen de per-step vars (default) */
  --dot-x: 0px;   --dot-y: 0px;
  --num-x: 0px;   --num-y: 0px;
  --label-x: 0px; --label-y: 0px;
flex: 1 1 0;    
  appearance: none;
  border: 1px solid rgba(15,25,22,.10);
  background: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 18px 12px 12px;   /* extra top voor dot */
  cursor: pointer;

  display: grid;
  justify-items: center;
  gap: 2px;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  position: relative;
  overflow: visible;
}

/* DOT (bolletje) wordt hier gemaakt */
.process-steps .step::before{
  content:"";
  position:absolute;
  top: 6px;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(177,224,229,.95); /* ice */
  box-shadow: 0 0 0 6px rgba(177,224,229,.22);
  border: 1px solid rgba(0,0,0,.06);

  /* ⬇️ HIER wordt DOT verschoven met jouw vars */
  transform: translate(calc(-50% + var(--dot-x)), calc(var(--dot-y)));
  z-index: 2;
}

/* hover */
.process-steps .step:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,.08);
  border-color: rgba(0,71,67,.18);
}

/* NUM + LABEL (met vars schuifbaar) */
.process-steps .step .step-num{
  display: inline-block;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(15,25,22,.55);

  /* ⬇️ HIER verschuif jij het NUMMER */
  transform: translate(var(--num-x), var(--num-y));
}

.process-steps .step .step-label{
  display: inline-block;
  font-weight: 800;
  font-size: 13px;
  color: rgba(15,25,22,.82);

  /* ⬇️ HIER verschuif jij het WOORD */
  transform: translate(var(--label-x), var(--label-y));
}

/* active */
.process-steps .step.is-active{
  background: rgba(0,71,67,.92);
  border-color: rgba(0,71,67,.0);
  box-shadow: 0 18px 45px rgba(0,71,67,.18);
  transform: translateY(-2px);
}
.process-steps .step.is-active .step-num,
.process-steps .step.is-active .step-label{
  color: #fff;
}
.process-steps .step.is-active::before{
  background: rgba(145,198,162,.95);  /* mint */
  box-shadow: 0 0 0 7px rgba(145,198,162,.20);
}

/* ===================================== */
/* PANEL (rechts/below) — content wisselt */
/* ===================================== */
.process-panel{
  border-radius: var(--r-xl);
  border: 1px solid rgba(15,25,22,.08);
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow);
  padding: 22px;

  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items: center;
  min-height: 280px;

  position: relative;
  overflow: hidden;
}

.process-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(640px 260px at 18% 35%, rgba(145,198,162,.18), transparent 60%),
    radial-gradient(640px 260px at 85% 55%, rgba(18,82,113,.12), transparent 60%);
  pointer-events:none;
  opacity:.95;
}

.process-panel > *{
  position: relative;
  z-index: 1;
}

.panel-title{
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--ink);
}

.panel-desc{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 62ch;
}

.panel-points{
  margin: 0;
  padding-left: 18px;
  color: rgba(15,25,22,.76);
  line-height: 1.6;
}

.panel-visual{
  display: grid;
  justify-items: end;
}

.panel-illo{
  width: min(320px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.10));
}

/* panel anim */
.process-panel.is-anim{
  animation: panelPop .22s ease;
}
@keyframes panelPop{
  from{ transform: translateY(6px); opacity: .0; }
  to{ transform: translateY(0); opacity: 1; }
}

/* ===================== */
/* MOBILE: accordion      */
/* ===================== */
.process-mobile{
  display: none;
}

.mstep{
  border: 1px solid rgba(15,25,22,.10);
  background: rgba(255,255,255,.82);
  border-radius: 22px;
  box-shadow: 0 16px 45px rgba(0,0,0,.06);
  overflow: hidden;
}

.mstep + .mstep{ margin-top: 12px; }

.mstep-head{
  width: 100%;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  cursor: pointer;
}

.mstep-dot{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  background: var(--forest);
  box-shadow: 0 12px 30px rgba(0,71,67,.18);
  flex: 0 0 44px;
}

.mstep-name{
  font-weight: 900;
  color: var(--ink);
  font-size: 16px;
}

.mstep-body{
  padding: 0 14px 14px;
  color: rgba(15,25,22,.76);
  line-height: 1.65;
  display: none;
}

.mstep-body ul{
  margin: 10px 0 12px;
  padding-left: 18px;
}

.mstep-body img{
  width: min(320px, 100%);
  height: auto;
  display: block;
  margin-top: 8px;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

.mstep.is-open .mstep-body{
  display: block;
}

/* ================= */
/* Responsive rules  */
/* ================= */
@media (max-width: 980px){
  .process-shell{
    padding: 18px;
  }

  .process-steps{
    display: none;
  }

  .process-panel{
    display: none;
  }

  .process-mobile{
    display: block;
  }
}

@media (prefers-reduced-motion: reduce){
  .process-steps .step{
    transition: none !important;
  }
}

/* =========================================================
   ✅ HIER PAS JIJ HANDMATIG AAN (PIXELS) — PER STEP 1 T/M 7
   - bolletje: --dot-x / --dot-y
   - nummer:   --num-x / --num-y
   - woord:    --label-x / --label-y
========================================================= */

.process-steps .step:nth-child(1){
  --dot-x: -50px;   --dot-y: 15px;
  --num-x: 0px;   --num-y: 0px;
  --label-x: 0px; --label-y: 0px;
}

.process-steps .step:nth-child(2){
 --dot-x: -50px;   --dot-y: 15px;
  --num-x: 0px;   --num-y: 0px;
  --label-x: 0px; --label-y: 0px;
}

.process-steps .step:nth-child(3){
 --dot-x: -50px;   --dot-y: 15px;
  --num-x: 0px;   --num-y: 0px;
  --label-x: 0px; --label-y: 0px;
}

.process-steps .step:nth-child(4){
 --dot-x: -50px;   --dot-y: 15px;
  --num-x: 0px;   --num-y: 0px;
  --label-x: 0px; --label-y: 0px;
}

.process-steps .step:nth-child(5){
  --dot-x: -50px;   --dot-y: 15px;
  --num-x: 0px;   --num-y: 0px;
  --label-x: 0px; --label-y: 0px;
}

.process-steps .step:nth-child(6){
  --dot-x: -50px;   --dot-y: 15px;
  --num-x: 0px;   --num-y: 0px;
  --label-x: 0px; --label-y: 0px;
}

.process-steps .step:nth-child(7){
  --dot-x: -50px;   --dot-y: 15px;
  --num-x: 0px;   --num-y: 0px;
  --label-x: 0px; --label-y: 0px;
}

























/* ===================================
   WORK SECTION — Nexa stijl
   (plak OVER je huidige work css)
   =================================== */

.work-section{
  padding: 92px 0;
  background: #fff;
}

/* Header */
.work-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 22px;
  margin-bottom: 26px;
}

.work-header__left .kicker{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(15,25,22,.55);
  display:inline-block;
  margin-bottom: 10px;
}

.work-header__left h2{
  margin: 0 0 12px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  color: var(--forest);
  font-family: "Sora", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.work-header__left p{
  margin: 0;
  color: rgba(15,25,22,.70);
  line-height: 1.6;
  max-width: 62ch;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Filter */
.work-filter{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,25,22,.10);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(0,0,0,.06);
}

.filter-btn{
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,25,22,.72);
  background: transparent;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.filter-btn:hover{
  transform: translateY(-1px);
  background: rgba(177,224,229,.25);
  border-color: rgba(177,224,229,.55);
}

.filter-btn.active{
  background: var(--forest);
  color: #fff;
  border-color: rgba(0,71,67,.0);
  box-shadow: 0 16px 40px rgba(0,71,67,.18);
}

/* Grid */
.work-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

/* Cards */
.work-item{
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,25,22,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.06);
  isolation: isolate;
}

/* subtiele “Nexa bloom” bovenop media */
.work-item::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 18% 25%, rgba(145,198,162,.20), transparent 55%),
    radial-gradient(520px 220px at 85% 70%, rgba(177,224,229,.22), transparent 58%);
  opacity: .95;
  pointer-events:none;
  z-index: 1;
  mix-blend-mode: soft-light;
}

/* Aspect ratios (zoals jouw logic) */
.work-item{
  aspect-ratio: 4 / 5;
}
.work-item[data-type="video"]:first-child,
.work-item[data-type="video"]:nth-child(3),
.work-item[data-type="video"]:nth-child(5){
  aspect-ratio: 9 / 16;
}
.work-item[data-type="website"],
.work-item[data-type="foto"]{
  aspect-ratio: 16 / 10;
}

/* Media */
.work-item__media{
  position: relative;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

.work-item__media img,
.work-item__media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease;
  display:block;
  filter: saturate(.96) contrast(.98);
}

/* Hover: premium, niet te hard */
.work-item:hover .work-item__media img,
.work-item:hover .work-item__media video{
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.02);
}

/* Overlay (altijd een heel lichte base zodat tekst nooit “verdwijnt”) */
.work-item__overlay{
  position:absolute;
  inset:0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.70) 100%);
  display:flex;
  align-items:flex-end;
  padding: 18px;
  opacity: 0;
  transition: opacity .28s ease;
}

/* Op touch devices: overlay standaard iets zichtbaar */
@media (hover: none){
  .work-item__overlay{ opacity: 1; background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.62) 100%); }
}

.work-item:hover .work-item__overlay{
  opacity: 1;
}

/* Info block in overlay: “designed” card */
.work-item__info{
  width: 100%;
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

.work-item__info h3{
  color: #fff;
  font-size: 18px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  font-family: "Sora", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.work-item__info p{
  color: rgba(255,255,255,.82);
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 12px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* CTA: Nexa link-look (geen standaard underline) */
.work-item__cta{
  appearance:none;
  border: 0;
  background: transparent;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 0;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  position: relative;
}

/* underline-accent mini */
.work-item__cta::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width: 58px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(177,224,229,.0), rgba(177,224,229,.9), rgba(145,198,162,.55));
  transform: skewX(-10deg);
  opacity: .95;
}

.work-item__cta:hover{
  color: var(--ice);
}

/* Focus */
.filter-btn:focus-visible,
.work-item__cta:focus-visible{
  outline: 3px solid rgba(177,224,229,.65);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Responsive */
@media (max-width: 900px){
  .work-header{
    flex-direction: column;
    align-items:flex-start;
  }
  .work-filter{
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px){
  .work-grid{
    grid-template-columns: 1fr;
  }
  .work-item{
    aspect-ratio: 16 / 10;
  }
}














/* =========================
   NEXA BLOBS (multi-use)
   ========================= */

/* Container die blobs mag hebben */
.has-blobs{
  position: relative;
  isolation: isolate;
}

/* Een losse blob (je kunt er meerdere in 1 section zetten) */
.nexa-blob{
  position: absolute;
  z-index: -1;
  pointer-events: none;

  width: var(--blob-w, 520px);
  height: var(--blob-h, 520px);
  left: var(--blob-x, -120px);
  top: var(--blob-y, -80px);

  opacity: var(--blob-o, .95);
  filter: blur(var(--blob-blur, 0px));

  border-radius: var(--blob-radius, 58% 42% 55% 45% / 45% 60% 40% 55%);
  transform: translate(var(--blob-tx, 0), var(--blob-ty, 0)) rotate(var(--blob-rot, -8deg));

  background: radial-gradient(circle at 30% 35%,
    rgba(145,198,162,.55),
    rgba(145,198,162,.25) 45%,
    rgba(145,198,162,.10) 70%,
    rgba(145,198,162,0) 100%
  );
}

/* Kleurvariaties */
.nexa-blob.blob--mint{
  background: radial-gradient(circle at 30% 35%,
    rgba(145,198,162,.55),
    rgba(145,198,162,.25) 45%,
    rgba(145,198,162,.10) 70%,
    rgba(145,198,162,0) 100%
  );
}
.nexa-blob.blob--ice{
  background: radial-gradient(circle at 30% 35%,
    rgba(177,224,229,.55),
    rgba(177,224,229,.25) 45%,
    rgba(177,224,229,.10) 70%,
    rgba(177,224,229,0) 100%
  );
}

/* Grootte presets */
.nexa-blob.blob--sm{ --blob-w: 380px; --blob-h: 380px; --blob-o: .9; }
.nexa-blob.blob--lg{ --blob-w: 640px; --blob-h: 640px; --blob-o: .9; }

/* Zachter */
.nexa-blob.blob--soft{ --blob-blur: 4px; }

/* Positie presets (optioneel) */
.nexa-blob.blob--left{ --blob-x: -140px; --blob-y: -90px; }
.nexa-blob.blob--right{ --blob-x: calc(100% - 380px); --blob-y: -90px; }
.nexa-blob.blob--center{
  --blob-x: 50%;
  --blob-y: -60px;
  --blob-tx: -50%;
}





/* Zorg dat de grid een referentie is voor absolute positioning */
.work-grid{
  position: relative; /* belangrijk */
}

/* De quote zweeft boven de grid en neemt GEEN ruimte in */
.work-quote-float{
  position: absolute;
  z-index: 2;
  pointer-events: none; /* je kan nog gewoon kaarten klikken */

  /* >>> HIER BEPAAL JE DE PLEK (witte vak) <<< */
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);

  width: min(320px, 34vw);
  text-align: center;
}

/* Typografie */
.work-quote-float p{
  margin: 0;
  font-family: "Alegreya Sans SC", "Mulish", system-ui, sans-serif;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.035em;
  font-weight: 600;
  font-style: italic;
  color: rgba(0, 71, 67, 0.55);
}

.work-quote-float span{
  color: rgba(0, 71, 67, 0.92);
  font-weight: 700;
  font-style: italic;
}

/* Responsive: op mobiel gewoon als normaal blok tussen items */
@media (max-width: 900px){
  .work-quote-float{
    position: static;
    transform: none;
    width: 100%;
    padding: 26px 12px;
    pointer-events: auto;
  }
  .work-quote-float p{
    max-width: 420px;
    margin: 0 auto;
  }
}









































/* REVIEWS - clean text only */
:root{
  --forest: #0B3B2E;
  --forest-soft: rgba(11,59,46,.14);
}

.reviews{
  padding: clamp(64px, 7vw, 110px) 0;
}

.reviews-head{
  max-width: 860px;
  margin: 0 0 26px;
}

.reviews-title{
  margin: 8px 0 10px;
  line-height: 1.02;
  font-size: clamp(40px, 4.4vw, 64px);
  letter-spacing: -0.02em;
}

.reviews-sub{
  margin: 0;
  color: rgba(10,25,20,.70);
}

.reviews-marquee{
  overflow: hidden;
  padding: 10px 0;
}

.reviews-track{
  display: flex;
  gap: 18px;
  will-change: transform;
  animation: reviews-marquee 30s linear infinite;
}

@keyframes reviews-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* los zwevende cards */
.review-card{
  flex: 0 0 auto;
  width: min(420px, 86vw);
  border-radius: 22px;
  padding: 22px 22px 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(10,25,20,.10);
  box-shadow:
    0 24px 60px rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.85) inset;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transform-style: preserve-3d;
}

.review-card:hover{
  border-color: rgba(11,59,46,.28);
  box-shadow:
    0 34px 85px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.85) inset;
}

/* quote text */
.review-text{
  margin: 0 0 14px;
  color: rgba(10,25,20,.86);
  line-height: 1.65;
  font-size: 15.8px;
}

/* signature */
.review-sign{
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(10,25,20,.08);
  color: rgba(10,25,20,.70);
  font-size: 13.5px;
}

/* accent words: ander font + forest groen */
/* accent woorden in reviews: alleen schuin, geen mark */
.review-accent{
  font-style: italic;
  font-weight: 500;
  color: inherit;          /* zelfde kleur als tekst */
}


/* mobile */
@media (max-width: 520px){
  .review-card{ width: min(360px, 88vw); }
}

@media (prefers-reduced-motion: reduce){
  .reviews-track{ animation: none; }
  .review-card{ transition: none; }
}






/* =========================
   REVIEWS — Nexa Premium Upgrade
   (plak onder je huidige CSS)
   ========================= */

.review-card{
  position: relative;
  overflow: hidden;
  border-radius: 24px;

  /* cleaner glass */
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,71,67,.12);

  box-shadow:
    0 18px 55px rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.75) inset;

  padding: 24px 24px 18px;
  backdrop-filter: blur(10px);
}

/* Nexa glow blob in card */
.review-card::before{
  content:"";
  position:absolute;
  width: 240px;
  height: 240px;
  right: -120px;
  top: -120px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%,
    rgba(145,198,162,.35),
    rgba(177,224,229,.18) 55%,
    rgba(145,198,162,0) 70%
  );
  filter: blur(2px);
  opacity: .9;
  pointer-events:none;
}

/* Quote mark (subtiel) */
.review-card::after{
  content: "“";
  position: absolute;
  left: 18px;
  top: 10px;
  font-size: 64px;
  line-height: 1;
  font-weight: 900;
  color: rgba(0,71,67,.10);
  pointer-events: none;
}

.review-text{
  margin: 6px 0 14px; /* ruimte voor quote */
  font-size: 16px;
  line-height: 1.7;
  color: rgba(10,25,20,.86);
  letter-spacing: -0.01em;
}

.review-sign{
  display:flex;
  align-items:center;
  gap: 10px;

  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0,71,67,.10);

  font-size: 13.5px;
  color: rgba(10,25,20,.68);
}

/* klein “verified” dotje */
.review-sign::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(145,198,162,.55);
  border: 1px solid rgba(0,71,67,.18);
  box-shadow: 0 0 0 4px rgba(145,198,162,.15);
}

/* Hover: Nexa lift (niet te heftig) */
@media (hover:hover){
  .review-card:hover{
    transform: translateY(-6px);
    border-color: rgba(0,71,67,.22);
    box-shadow:
      0 26px 80px rgba(0,0,0,.10),
      0 1px 0 rgba(255,255,255,.75) inset;
  }
}

/* Focus (toegankelijk) */
.review-card:focus-within{
  outline: 3px solid rgba(177,224,229,.65);
  outline-offset: 4px;
}

/* Marquee pauzeren bij hover (pro) */
.reviews-marquee:hover .reviews-track{
  animation-play-state: paused;
}

/* Mobile: iets compacter */
@media (max-width: 520px){
  .review-card{
    padding: 20px 18px 16px;
    border-radius: 22px;
  }
  .review-card::after{
    font-size: 54px;
    top: 8px;
  }
}

.review-accent{
  position: relative;
  font-style: italic;
  font-weight: 600;
  color: inherit;
  z-index: 1;
}

.review-accent::after{
  content:"";
  position:absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.06em;
  height: .55em;
  border-radius: 999px;
  background: rgba(177,224,229,.35);
  z-index: -1;
}



















/* =========================
   CONTACT / KENNISMAKEN (FULL CSS)
   ========================= */

.contact-section{
  padding: 96px 0;
}

.contact-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: start;
  min-width: 0;
}

/* Left */
.contact-title{
  margin: 10px 0 12px;
  font-size: clamp(34px, 3.3vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.contact-sub{
  max-width: 520px;
  color: rgba(10,25,20,.70);
  line-height: 1.55;
  margin: 0 0 22px;
}

.contact-points{
  display: grid;
  gap: 14px;
  margin: 18px 0 22px;
}

.cp-item{
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.cp-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 6px;
  background: rgba(145,198,162,.35);
  border: 1px solid rgba(0,71,67,.18);
}

.cp-title{
  font-weight: 800;
  color: rgba(10,25,20,.92);
}

.cp-text{
  color: rgba(10,25,20,.68);
  font-size: 14px;
  margin-top: 2px;
}

.contact-mini{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.mini-link{
  color: rgba(0,71,67,.92);
  text-decoration: none;
  font-weight: 800;
}

.mini-link:hover{
  text-decoration: underline;
}

.mini-sep{
  color: rgba(10,25,20,.35);
}

/* =========================
   FORM CARD
   ========================= */

.contact-card{
  position: relative;
  isolation: isolate;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(10,25,20,.10);
  border-radius: 26px;
  box-shadow: 0 18px 46px rgba(0,0,0,.08);
  backdrop-filter: blur(12px);
  overflow: hidden;
  min-width: 0;
  max-width: 560px;   /* <-- breder/smaller maken */
  margin-left: auto;  /* kaart netjes rechts uitlijnen */
}

/* Mint blob in card (rechtsboven) */
.contact-card::before{
  content:"";
  position:absolute;
  top: -120px;
  right: -140px;
  width: 420px;
  height: 420px;
  z-index: -1;
  pointer-events: none;
  border-radius: 58% 42% 55% 45% / 45% 60% 40% 55%;
  transform: rotate(-10deg);

  background: radial-gradient(circle at 30% 35%,
    rgba(145,198,162,.55),
    rgba(145,198,162,.18) 55%,
    rgba(145,198,162,0) 100%
  );
  filter: blur(2px);
  opacity: .95;
}

.contact-form{
  padding: 28px;
}

/* =========================
   FORM GRID + FIELDS
   ========================= */

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 40px; /* => ruimte tussen inputs */
  min-width: 0;
}

.field{
  min-width: 0;
}

.field label{
  display: block;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(10,25,20,.58);
  margin: 0 0 10px;
}

.field input,
.field select,
.field textarea{
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(10,25,20,.14);
  background: #fff;
  padding: 6px 10px;
  min-height: 50px;          /* luxer + geen “tegen elkaar” gevoel */
  outline: none;
  color: rgba(10,25,20,.92);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* extra micro-lucht tegen “plakkende lijnen” */
.field input,
.field select,
.field textarea{
  margin-bottom: 2px;
}

.field textarea{
  resize: vertical;
  min-height: 150px;
  padding-top: 12px;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(0,71,67,.30);
  box-shadow: 0 0 0 4px rgba(145,198,162,.22);
}

/* Select arrow */
.field select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,71,67,.65) 50%),
    linear-gradient(135deg, rgba(0,71,67,.65) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.field.full{
  grid-column: 1 / -1;
}

/* =========================
   CHECKBOX (klein & strak)
   ========================= */

.check{
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: rgba(10,25,20,.68);
  line-height: 1.35;
  min-width: 0;
}

.check input{
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: rgba(0,71,67,.95);
}

/* ✅ checkbox niet laten vallen onder .field input styling */
.field .form-consent{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;                 /* label margin reset */
  text-transform: none;      /* anders wordt alles CAPS */
  letter-spacing: normal;
  font-size: 13px;
  color: rgba(10,25,20,.68);
  line-height: 1.35;
}

.field .form-consent input[type="checkbox"]{
  width: 14px !important;
  height: 14px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 4px;        /* of 3px */
  accent-color: #004743;
  flex: 0 0 14px;
}

.field .form-consent span{
  text-transform: none;
}










/* =========================
   ACTIONS (buttons)
   ========================= */

.form-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin-top: 20px;
}

.form-actions .btn-primary,
.form-actions .btn-whatsapp{
  width: 100%;
  height: 54px;                 /* vaste hoogte = altijd gelijk */
  border-radius: 14px;
  padding: 0 16px;              /* geen gekke verticale padding */
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Primary */
.btn-primary{
  position: relative;
  overflow: hidden;

  height: 48px;
  padding: 0 24px;
  border-radius: 999px;

  background: #004743;
  color: #fff;
  font-weight: 700;
}

.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.25),
    transparent
  );
  transform: translateX(-100%);
  transition: transform .6s ease;
}

.btn-primary:hover::after{
  transform: translateX(100%);
}


.navbar{
  height: 72px; /* was 78 */
}

.nav-center a{
  font-size: 14px;
  font-weight: 500;
  opacity: .7;
}

.nav-center a:hover{
  opacity: 1;
}

.nav-center a.is-active{
  opacity: 1;
  font-weight: 700;
}

@media (max-width: 768px){
  .btn-primary{
    height: 50px;
    padding: 0 26px;
    font-size: 15px;
  }
}

/* WhatsApp */
.btn-whatsapp{
  text-decoration: none;
  cursor: pointer;
  color: rgba(0,71,67,.92);
  background: rgba(145,198,162,.14);
  border: 1px solid rgba(0,71,67,.22);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-whatsapp:hover{
  transform: translateY(-1px);
  background: rgba(145,198,162,.22);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

/* icon strak */
.btn-whatsapp svg{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
}

/* Note onder buttons */
.form-note{
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 13px;
  color: rgba(10,25,20,.62);
}

/* mobile: buttons onder elkaar */
@media (max-width: 520px){
  .form-actions{ grid-template-columns: 1fr; }
}





/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .contact-card{
    max-width: 100%;
    margin-left: 0;
  }

  .contact-form{
    padding: 20px;
  }

  .form-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .form-actions{
    grid-template-columns: 1fr; /* buttons onder elkaar op mobiel */
  }
}






/* =========================
   HAMBURGER MENU (mobile only)
   ========================= */

/* default: desktop = geen burger, geen mobile menu */
.burger{ display: none; }
.mobile-backdrop{ display: none; }
.mobile-menu{ display: none; }

/* =========================
   MOBILE ONLY
   ========================= */
@media (max-width: 900px){

  /* verberg desktop nav + desktop kennismaken */
  .nav-links,
  .nav-cta{
    display: none !important;
  }

  /* burger zichtbaar op mobile */
  .burger{
    display: grid;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(10,25,20,.10);
    background: rgba(255,255,255,.95);
    place-items: center;
    cursor: pointer;
    position: relative;
    margin-left: auto; /* rechts */
    z-index: 1101;
  }

  .burger span{
    position: absolute;
    width: 18px;
    height: 2px;
    background: rgba(0,71,67,.85);
    border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }

  .burger span:nth-child(1){ transform: translateY(-6px); }
  .burger span:nth-child(2){ transform: translateY(0); }
  .burger span:nth-child(3){ transform: translateY(6px); }

  /* open = strak kruis */
  body.menu-open .burger span:nth-child(1){ transform: rotate(45deg); }
  body.menu-open .burger span:nth-child(2){ opacity: 0; }
  body.menu-open .burger span:nth-child(3){ transform: rotate(-45deg); }

  /* backdrop (niet doorzichtig, dus geen dubbel beeld) */
  .mobile-backdrop{
    display: block;
    position: fixed;
    inset: 0;
    background: #ffffff; /* volledig wit */
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 1100;
  }

  body.menu-open .mobile-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  /* menu pane */
  .mobile-menu{
    display: grid;
    position: fixed;
    top: 12px;
    right: 12px;
    width: min(92vw, 360px);
    height: calc(100dvh - 24px);
    background: #fff; /* niet translucent */
    border: 1px solid rgba(10,25,20,.10);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(0,0,0,.18);
    transform: translateX(110%);
    transition: transform .28s cubic-bezier(.2,.9,.2,1);
    z-index: 1102;

    padding: 18px;
    align-content: start;
    gap: 10px;
  }

  body.menu-open .mobile-menu{
    transform: translateX(0);
  }

  .mobile-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(10,25,20,.08);
    margin-bottom: 8px;
  }

  .mobile-brand{
    font-weight: 900;
    letter-spacing: .08em;
    font-size: 12px;
    color: rgba(0,71,67,.85);
  }

  .mobile-close{
    border: 0;
    background: rgba(145,198,162,.14);
    color: rgba(0,71,67,.92);
    width: 36px;
    height: 36px;
    border-radius: 12px;
    cursor: pointer;
  }

  .m-link{
    text-decoration: none;
    color: rgba(10,25,20,.86);
    font-weight: 800;
    padding: 12px 12px;
    border-radius: 14px;
    transition: background .2s ease, transform .2s ease;
  }

  .m-link:hover{
    background: rgba(145,198,162,.14);
    transform: translateX(2px);
  }

  /* Kennismaken alleen in menu */
  .m-cta{
    margin-top: 8px;
    text-decoration: none;
    background: rgba(0,71,67,.95);
    color: #fff;
    font-weight: 900;
    text-align: center;
    padding: 13px 14px;
    border-radius: 14px;
  }
}

@media (max-width: 900px){
  .nav-cta{
    display: none !important;
  }
}


@media (max-width: 900px){
  /* verberg desktop Kennismaken knop */
  header .btn-primary{
    display: none !important;
  }
}


/* =========================
   LOGO
   ========================= */

.logo{
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img{
  height: 180px;          /* desktop hoogte */
  width: auto;
  display: block;
}

/* iets kleiner op mobiel */
@media (max-width: 900px){
  .logo img{
    height: 150px;
  }
}

.logo:hover img{
  transform: translateY(-1px);
  transition: transform .15s ease;
}

.logo:hover{
  opacity: .9;
}








/* =========================
   FOOTER (FOREST GREEN)
   ========================= */

.site-footer{
  position: relative;
  padding: 40px 0 20px;
  background: #004743; /* forest */
  color: rgba(255,255,255,.88);
  overflow: hidden;
}

/* zachte blob */
.footer-blob{
  position: absolute;
  top: -180px;
  right: -220px;
  width: 560px;
  height: 560px;
  border-radius: 58% 42% 55% 45% / 45% 60% 40% 55%;
  transform: rotate(-10deg);
  background: radial-gradient(circle at 30% 30%,
    rgba(145,198,162,.55),
    rgba(145,198,162,.18) 55%,
    rgba(145,198,162,0) 100%
  );
  filter: blur(2px);
  opacity: .95;
  pointer-events: none;
}

.footer-inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 48px;
  align-items: start;
  min-width: 0;
}

.footer-left, .footer-right{ min-width: 0; }

/* logo */
.footer-logo{
  display: inline-block;
  text-decoration: none;
}
.footer-logo img{
  height: 100px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.18));
}

.footer-text{
  margin: 10px 0 12px;
  max-width: 420px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}
.footer-text em{
  font-style: italic;
  color: rgba(255,255,255,.92);
}

/* contact row */
.footer-contact{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.footer-email{
  color: rgba(255,255,255,.92);
  font-weight: 900;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  transition: transform .2s ease, background .2s ease;
}
.footer-email:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
}

/* whatsapp button */
.footer-wa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-decoration: none;
  font-weight: 900;

  padding: 10px 14px;
  border-radius: 999px;

  color: rgba(0,71,67,.98);
  background: rgba(145,198,162,.95);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.footer-wa:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,.22);
  filter: brightness(1.03);
}
.wa-ico{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.28);
}
.footer-wa svg{
  width: 16px;
  height: 16px;
  transform: translateY(1px);
}

/* small */
.footer-small{
  margin: 10px 0 0;
  color: rgba(255,255,255,.70);
  line-height: 1.6;
  font-size: 14px;
}

/* right */
.footer-kicker{
  margin: 2px 0 12px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

/* social buttons (PNG) */
.footer-social{
  display: flex;
  gap: 12px;
  align-items: center;
}

.social-btn{
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  text-decoration: none;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.social-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}

.footer-inner{
  padding: 0 24px; /* zorgt dat content niet tegen rand plakt */
}

.footer-kvk{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

.footer-wa{
  padding: 12px 18px;
  font-size: 15px;
}

.wa-ico{
  width: 32px;
  height: 32px;
}
.footer-wa svg{
  width: 18px;
  height: 18px;
}


.social-btn img{
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.22));
}

/* divider */
.footer-line{
  margin: 18px 0 14px;
  height: 1px;
  background: rgba(255,255,255,.14);
}

/* bottom */
.footer-bottom{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}

.footer-bottom .dot{ opacity: .55; }

.footer-legal{
  color: rgba(255,255,255,.86);
  text-decoration: none;
  font-weight: 800;
}
.footer-legal:hover{ text-decoration: underline; }

/* responsive */
@media (max-width: 900px){
  .footer-inner{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .footer-social{ justify-content: flex-start; }
}





section,
.process,
.services-stack,
.work-section,
.contact-section{
  overflow: visible !important;
}




















/* =========================
   HERO COLLAGE – RUIM, GROOT & LEESBAAR
   ========================= */

.hero-collage{
  position: relative;
  width: min(700px, 100%);
  height: 640px;
  margin-left: auto;
  isolation: isolate;
}

/* blob groter & rustiger */
.hero-collage__blob{
  position: absolute;
  inset: -25%;
  z-index: -3;
  border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%;
  background: radial-gradient(circle at 30% 35%,
    rgba(145,198,162,.55),
    rgba(145,198,162,.18) 55%,
    rgba(145,198,162,0) 100%
  );
}

/* base card */
.hero-shot{
  position: absolute;
  overflow: hidden;
  border-radius: 32px;
  background: #fff;
  border: 1px solid rgba(10,25,20,.10);
  box-shadow: 0 26px 70px rgba(0,0,0,.14);
}

.hero-shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* tag */
.hero-shot__tag{
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: 12px;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(10,25,20,.12);
  color: rgba(0,71,67,.95);
}

/* =========================
   POSITIES (LOGISCH & RUSTIG)
   ========================= */

/* =========================
   POSITIES (MEER UIT ELKAAR)
   ========================= */

/* Fotografie – helemaal rechts / achter */
.hero-shot--photo{
  right: -26px;         /* <-- meer naar rechts */
  top: -4%;
  width: 50%;
  height: 54%;
  z-index: 1;
  transform: rotate(1deg);
  opacity: .96;
}

/* Webdesign – meer naar links */
.hero-shot--web{
  left: -34px;          /* <-- meer naar links */
  top: 22%;
  width: 52%;
  height: 68%;
  z-index: 2;
  transform: rotate(-1deg);
}

/* Social & content – meer naar rechts + iets lager */
.hero-shot--social{
  left: 34%;            /* <-- meer naar rechts */
  bottom: -10px;
  width: 66%;
  height: 48%;
  z-index: 3;
  transform: rotate(1deg);
}


/* Tag positie: standaard links */
.hero-shot__tag{
  left: 20px;
  right: auto;
  bottom: 20px;
}

/* Fotografie tag rechts in de card */
.hero-shot--photo .hero-shot__tag{
  left: auto;
  right: 20px;         /* <-- woord naar rechts */
}

/* =========================
   SUBTIELE INTERACTIE
   ========================= */

@media (hover:hover){
  .hero-shot{
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .hero-shot:hover{
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 36px 90px rgba(0,0,0,.18);
  }
}


.card,
.work-item,
.svc-card{
  transition: 
    transform .25s cubic-bezier(.2,.9,.2,1),
    box-shadow .25s ease;
}

.card:hover,
.work-item:hover,
.svc-card:hover{
  transform: translateY(-2px);
  border-color: rgba(11,59,46,.18);
  box-shadow: 
    0 20px 60px rgba(0,0,0,.12),
    0 0 0 1px rgba(145,198,162,.25);
}

.underline-accent{
  position: relative;
  display: inline-block;
}

.underline-accent::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: .08em;
  width: 100%;
  height: .18em;
  background: rgba(145,198,162,.55); /* mint matte */
  border-radius: 999px;
  z-index: -1;
}


/* Forest green blob achter logo – HARD, ORGANISCH */
.logo.logo--floating::before{
  content: "";
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 180px;
  height: 160px;

  background: #044634; /* EXACT dezelfde forest green als navbar */

  border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%;
  

  z-index: -1;
  pointer-events: none;
}

/* Verberg logo + blob volledig als header hidden is */
.site-header.is-hidden .logo.logo--floating{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
}



.card,
.work-item,
.svc-card{
  transition: 
    transform .25s cubic-bezier(.2,.9,.2,1),
    box-shadow .25s ease;
}

.card:hover,
.work-item:hover,
.svc-card:hover{
  transform: translateY(-6px);
  box-shadow: 
    0 20px 60px rgba(0,0,0,.12),
    0 0 0 1px rgba(145,198,162,.25);
}


h1, h2{
  letter-spacing: -0.035em;
}

h1{
  line-height: 1.02;
}


p, li{
  line-height: 1.65;
  color: rgba(10,25,20,.72);
}



.nav-center a.active{
  opacity: 1;
}

.nav-center a.active::after{
  transform: scaleX(1);
}


.m-link{
  opacity: 0;
  transform: translateY(6px);
}

body.menu-open .m-link{
  animation: slideIn .35s ease forwards;
}

body.menu-open .m-link:nth-child(1){ animation-delay:.05s }
body.menu-open .m-link:nth-child(2){ animation-delay:.1s }
body.menu-open .m-link:nth-child(3){ animation-delay:.15s }

@keyframes slideIn{
  to{
    opacity:1;
    transform:none;
  }
}


@media (max-width: 768px){
  .svc-media--social{
    justify-items: center;
  }

  .svc-media--social .svc-stage{
    width: 88%;          /* kleiner dan 100% */
    max-width: 180px;    /* HARD LIMIT */
    height: auto;        /* hoogte niet forceren */
    aspect-ratio: 9 / 16; /* reels / shorts ratio */
  }

  .svc-media--social .svc-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
  }
}

@media (max-width: 768px){
  .svc-media--social{
    padding-left: 18px;   /* DUWT alles naar rechts */
  }

  .svc-media--social .svc-stage{
    margin-left: auto;    /* extra duw naar rechts */
    margin-right: 60px;
  }
}


/* DESKTOP default */
.svc-card--content .svc-nav--prev{
  left: calc(50% - 150px);
}

.svc-card--content .svc-nav--next{
  right: calc(50% - 150px);
}





/* =========================================
   MOBILE FIX: BLOBS NIET OVER ELKAAR / TE FEL
   ========================================= */
@media (max-width: 900px){

  /* voorkomen dat je ooit horizontaal kan scrollen door blobs */
  html, body{ overflow-x: hidden; }

  /* alle blobs: minder aanwezig */
  .nexa-blob,
  .blob,
  .footer-blob{
    opacity: .35 !important;     /* zachter */
    filter: blur(22px) !important;
    transform: none !important;  /* voorkomt rare overlap door rotate */
  }

  /* HERO blob: kleiner + meer naar achter */
  .hero .blob{
    width: 520px !important;
    height: 520px !important;
    left: 50% !important;
    top: -120px !important;
    translate: -50% 0 !important;
    opacity: .28 !important;
    z-index: -1 !important;
  }

  /* SECTION blobs links/rechts: vaak te veel op mobiel -> uitzetten */
  .work-section .nexa-blob,
  .services-section .nexa-blob,
  .why-section .nexa-blob{
    display: none !important;
  }

  /* Contact card blob: wél nice, maar klein en subtiel */
  .contact-card::before{
    width: 320px !important;
    height: 320px !important;
    top: -140px !important;
    right: -160px !important;
    opacity: .35 !important;
    filter: blur(18px) !important;
  }

  /* Footer blob ook minder agressief */
  .footer-blob{
    width: 420px !important;
    height: 420px !important;
    top: -220px !important;
    right: -240px !important;
    opacity: .25 !important;
  }
}









/* =========================
   NEXA OVERRIDE PATCH (onderaan plakken)
   ========================= */

/* 1) Eén bron van waarheid voor navbar hoogte */
:root{
  --nav-h: 72px; /* match jouw .navbar height */
}

/* 2) Header + body spacing consistent (fix “streep” / content jump) */
body{
  padding-top: 96px;  
}

/* Zorg dat navbar ook echt dezelfde hoogte gebruikt */
.navbar{
  height: 96px;              /* was 88 */
  padding-top: 12px;  
}

/* 3) Logo niet groter dan de header (jouw logo stond op 150px) */
.logo img{
  height: 56px !important;   /* premium size, past netjes */
  width: auto !important;
}

/* 4) Header uiterlijk: strak forest green i.p.v. grijs/glas
   (kan je later weer translucent maken, maar dit voelt direct premium) */
.site-header{
  background: rgba(0,71,67,.96) !important;  /* forest green */
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important; /* die “streep” wordt nu bewust/clean */
}

/* Links wit + duidelijk op forest */
.nav-center a{
  color: rgba(255,255,255,.86) !important;
}
.nav-center a::after{
  background: rgba(177,224,229,.95) !important;
}

/* CTA iets netter op dark header */
.nav-right .btn-primary{
  background: rgba(145,198,162,.95) !important;
  color: rgba(0,71,67,.98) !important;
}

/* 5) Mobile CSS target fix:
   jij verbergt nu .nav-links, maar in je HTML heet het .nav-center */
@media (max-width: 900px){
  .nav-center{ display: none !important; }
  .nav-cta{ display: none !important; } /* desktop kennismaken weg op mobile */
}

/* 6) Footer overflow fix:
   deze twee regels veroorzaken vaak witte zijkanten/overflow door 100vw */
.site-footer{
  width: 100% !important;
  margin-left: 0 !important;
}

/* 7) Extra safety: geen horizontale overflow door transforms/blobs */
html, body{
  overflow-x: clip;
}
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}


/* =========================================================
   NEXA NAVBAR – Floating pill + logo buiten de pill
   (plak ONDERAAN base.css)
========================================================= */

:root{
  --forest: #004743;
  --mint:   #91C6A2;
  --ice:    #B1E0E5;
  --blue:   #125271;

  --pill-bg: rgba(0, 71, 67, .62);
  --pill-stroke: rgba(255,255,255,.16);
  --pill-shadow: 0 22px 60px rgba(0,0,0,.18);
}

/* header: transparant, geen “balk” look */
.site-header{
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* navbar layout */
.navbar{
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center; /* pill in het midden */
  position: relative;
}

/* body offset (match navbar) */
body{ padding-top: 88px; }

/* LOGO: buiten pill links-boven en lekker groot */
.logo--floating{
  position: absolute;
  left: 0;
  top: 50%;
  height: 180px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  z-index: 5;
}

.logo--floating img{
  height: 190px; /* groot zoals jij wil */
  width: auto;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.10));
}

/* Center pill */
.nav-pill{
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 10px 12px;
  border-radius: 999px;

   background: #004743;        /* MAT forest green */
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 
    0 18px 40px rgba(0,0,0,.18);  /* zachter, geen glow */

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  max-width: min(760px, 100%);
}

/* links in pill */
.nav-pill .nav-center{
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0 8px;
}

.nav-pill .nav-center a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 10px;
  border-radius: 999px;
  position: relative;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.nav-pill .nav-center a:hover{
  background: rgba(255,255,255,.10);
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* active state (werkt met jouw bestaande .active class of later JS) */
.nav-pill .nav-center a.active{
  background: rgba(177,224,229,.16);
  border: 1px solid rgba(177,224,229,.22);
  color: #fff;
}

/* CTA in pill (rechts) */
.pill-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none;

  color: #004743;
  font-weight: 800;
  font-size: 13px;

    background: #91C6A2;        /* mint uit brand */
  color: #004743;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}

.pill-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.45);
}

/* Burger: rechts (outside pill) */
.burger{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
}

/* Desktop: burger weg, pill aan */
@media (min-width: 901px){
  .burger{ display: none !important; }
  .mobile-menu, .mobile-backdrop{ display: none !important; }
}

/* Mobile: pill weg, logo kleiner, burger aan */
@media (max-width: 900px){
  .nav-pill{ display: none; }

  .logo--floating img{
    height: 180px;
  }

  .burger{ display: grid !important; }
}



/* ALWAYS: pagina moet kunnen scrollen */
html, body{
  height: auto;
  overflow-y: auto;
}

/* Alleen als menu open is: scroll lock */
body.menu-open{
  overflow: hidden;
}



/* FORCE LOGO GROOTTE – floating navbar logo */
.logo.logo--floating img{
  height: 100px !important;   /* desktop grootte */
  width: auto;
}

/* Tablet / mobiel */
@media (max-width: 900px){
  .logo.logo--floating img{
    height: 130px !important;
  }
}

.form-consent{
  display: flex;
  align-items: center;   /* verticaal netjes */
  gap: 10px;             /* ruimte tussen checkbox en tekst */
  margin-top: 16px;

  font-size: 13px;
  color: rgba(15,25,22,.70);
}

.form-consent input[type="checkbox"]{
  margin: 0;             /* haalt rare offsets weg */
  flex-shrink: 0;        /* checkbox blijft netjes */
}






/* socials: altijd even groot + netjes */
.footer-social{
  display:flex;
  gap: 12px;
  align-items:center;
}

.social-btn{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.social-btn svg{
  width: 22px;
  height: 22px;
  fill: rgba(255,255,255,.92);
  display:block;
}

.social-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(145,198,162,.35);
}

.social-btn:active{
  transform: translateY(0);
}

/* verwijder oude png styling als je die nog hebt */
.social-btn img{ display:none; }






.footer-right{
  display: grid;
  gap: 12px;
  align-content: start;
}
.footer-line{
  margin: 10px 0 6px;
}


.footer-meta{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #fff; /* 👈 dit is de sleutel */
}

.footer-meta p{
  margin: 0;
}

.footer-meta p + p{
  margin-top: 4px;
  opacity: .85;
}


.footer-meta p:last-child{
  opacity: .7;
  font-size: 12px;
}

.site-footer .footer-meta,
.site-footer .footer-meta p{
  color: #ffffff !important;
  opacity: 1 !important;
}


/* Navbar links echt wit */
.site-header .nav a,
.site-header .nav-link,
.site-header nav a{
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Hover / active ook wit houden */
.site-header .nav a:hover,
.site-header .nav a:focus,
.site-header .nav a.is-active{
  color: #ffffff !important;
}


/* Alleen Kennismaken tekst forest green */
.site-header .pill-cta{
  color: #004743 !important; /* forest green */
}



.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;

  transform: translateY(0);
  transition: transform .28s ease;
  will-change: transform;
}

.site-header.is-hidden{
  transform: translateY(-110%);
}


.logo--floating.is-hidden{
  transform: translateY(-110%);
  transition: transform .28s ease;
}


.site-footer{
  position: relative; /* moet */
}

/* GoDaddy seal: echt rechtsonder van de footer */
.footer-seal{
  position: absolute;
  right: 0;
  bottom: 0;

  margin: 0;
  padding: 0;

  transform: translate(-24px, -18px); /* beetje ruimte van rand */
  z-index: 999;
}

/* grootte fix */
.footer-seal img,
.footer-seal iframe{
  display: block;
  max-width: 140px;
  height: auto;
}



@font-face{
  font-family: "NexaFont";
  src: url("fonts/NexaFont-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "NexaFont";
  src: url("fonts/NexaFont-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "NexaFont";
  src: url("fonts/NexaFont-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body{ font-family: "NexaFont", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }