/* styles.css (Enterprise finished transition + EU reach new map overlay) */
:root{
  --tw:#2fabdc;
  --bg:#f7fbfe;
  --bg2:#ffffff;
  --text:#0b1520;
  --muted:rgba(11,21,32,.70);
  --border: rgba(12,24,38,.08);

  --shadow: 0 22px 80px rgba(13,38,60,.08);
  --shadow2: 0 10px 26px rgba(13,38,60,.06);

  --radius: 24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background:
    linear-gradient(transparent 31px, rgba(12,24,38,.03) 32px),
    linear-gradient(90deg, transparent 31px, rgba(12,24,38,.03) 32px),
    radial-gradient(1200px 800px at 65% 10%, rgba(47,171,220,.14), transparent 55%),
    radial-gradient(900px 700px at 18% 85%, rgba(47,171,220,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-size: 32px 32px, 32px 32px, auto, auto, auto;

  color: var(--text);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1120px, calc(100% - 40px)); margin-inline:auto}

/* progress */
.progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:80; background: rgba(47,171,220,.10)}
.progress__bar{height:100%; width:0%; background: linear-gradient(90deg, var(--tw), rgba(47,171,220,.30))}

/* header/nav */
.header{
  position:fixed; top:0; left:0; right:0;
  z-index:70;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  border-bottom: 1px solid transparent;
}
.header.isSolid{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-color: var(--border);
  box-shadow: var(--shadow2);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.nav__logo{width:150px}
.nav__menu{display:flex; align-items:center; gap:10px}
.nav__link{
  font-weight:800;
  font-size:14px;
  padding:10px 12px;
  border-radius:999px;
  color: rgba(11,21,32,.82);
  transition: background .18s ease, transform .18s ease;
}
.nav__link:hover{background: rgba(47,171,220,.10); transform: translateY(-1px)}
.nav__link--cta{
  background: rgba(47,171,220,.16);
  border: 1px solid rgba(47,171,220,.22);
}
.nav__link--cta:hover{background: rgba(47,171,220,.22)}

.nav__toggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.nav__toggle span{
  display:block; width:18px; height:2px;
  background: rgba(11,21,32,.88);
  margin:4px auto; border-radius:999px;
}

/* hero */
.hero{
  position:relative;
  min-height: 100svh;
  display:grid;
  place-items:center;
  padding-top:86px;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{position:absolute; inset:0; overflow:hidden; z-index:0}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: saturate(1.05) contrast(1.02) brightness(1.05);
  transform: scale(1.02);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 720px at 50% 18%, rgba(255,255,255,.64), rgba(255,255,255,.18) 58%, rgba(255,255,255,0) 82%),
    linear-gradient(180deg,
      rgba(47,171,220,.22) 0%,
      rgba(255,255,255,.72) 56%,
      rgba(247,251,254,1) 100%);
}
.hero__shape{
  position:absolute;
  width:520px; height:520px;
  border-radius:999px;
  filter: blur(40px);
  opacity:.40;
}
.hero__shape--a{
  left:-160px; top:12%;
  background: radial-gradient(circle at 30% 30%, rgba(47,171,220,.40), transparent 62%);
}
.hero__shape--b{
  right:-200px; top:40%;
  background: radial-gradient(circle at 30% 30%, rgba(47,171,220,.26), transparent 62%);
}

.hero__content{position:relative; z-index:1; padding: 44px 0 150px;}
.hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius:999px;
  border: 1px solid rgba(47,171,220,.20);
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow2);
  font-weight: 900;
  font-size: 13px;
  color: rgba(11,21,32,.85);
}
.dot{width:8px; height:8px; border-radius:999px; background: var(--tw); box-shadow: 0 0 0 6px rgba(47,171,220,.14)}

.hero__title{
  margin: 18px 0 0;
  font-size: clamp(36px, 4.2vw, 66px);
  line-height:1.02;
  letter-spacing:-0.05em;
  color: rgba(11,21,32,.98);
}
.accent{color: var(--tw); text-shadow: 0 18px 60px rgba(47,171,220,.18)}
.hero__lead{
  margin: 16px 0 0;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height:1.65;
  color: rgba(11,21,32,.72);
  max-width: 66ch;
}

.hero__actions{display:flex; gap:12px; margin-top: 22px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
  border:1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn--primary{
  background: var(--tw);
  color: #06212d;
  box-shadow: 0 18px 50px rgba(47,171,220,.18);
}
.btn--primary:hover{transform: translateY(-1px); box-shadow: 0 24px 70px rgba(47,171,220,.22)}
.btn--secondary{
  background: rgba(255,255,255,.96);
  border-color: rgba(12,24,38,.10);
  box-shadow: var(--shadow2);
  color: rgba(11,21,32,.86);
}
.btn--secondary:hover{transform: translateY(-1px); background: rgba(255,255,255,1)}
.btn--wide{width:100%}

.hero__trust{display:flex; gap:10px; flex-wrap:wrap; margin-top: 22px}
.trustPill{
  padding: 9px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(12,24,38,.07);
  box-shadow: var(--shadow2);
  font-size:12px;
  font-weight:900;
  color: rgba(11,21,32,.70);
}

.heroTransition{
  position:absolute; left:0; right:0; bottom:0;
  height: 130px;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(900px 90px at 50% 0%, rgba(47,171,220,.18), rgba(47,171,220,0) 72%),
    linear-gradient(180deg, rgba(247,251,254,0), rgba(247,251,254,1));
}

/* sections */
.section{padding: clamp(56px, 6.5vw, 98px) 0}
.section--soft{
  background: linear-gradient(180deg, rgba(47,171,220,.08), rgba(255,255,255,1));
  border-top: 1px solid rgba(12,24,38,.05);
  border-bottom: 1px solid rgba(12,24,38,.05);
}
.section--gradient{
  background:
    radial-gradient(900px 650px at 20% 30%, rgba(47,171,220,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(247,251,254,1));
  border-top: 1px solid rgba(12,24,38,.05);
  border-bottom: 1px solid rgba(12,24,38,.05);
}
.section__head{max-width: 80ch; margin-bottom: 26px}
.h2{font-size: clamp(26px, 2.4vw, 38px); line-height:1.12; letter-spacing:-.03em; margin:0 0 10px}
.h3{font-size: 18px; line-height:1.25; margin: 16px 0 8px}
.p{margin:0; line-height:1.75}
.p--muted{color: var(--muted)}

.grid{display:grid; gap: 18px}
.grid--2{grid-template-columns: repeat(2, minmax(0, 1fr))}
.grid--center{align-items:center}

/* cards */
.featureCard{
  border-radius: var(--radius);
  border: 1px solid rgba(12,24,38,.07);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 70px rgba(13,38,60,.06);
  padding: 24px;
}
.proCard{position: relative; overflow: hidden; padding: 26px;}
.proCard__top{display:flex; align-items:center; gap: 10px; margin-bottom: 10px;}
.proIcon{
  width: 36px; height: 36px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(47,171,220,.10);
  border: 1px solid rgba(47,171,220,.18);
  color: rgba(11,21,32,.85);
}
.proIcon--accent{background: rgba(47,171,220,.14); border-color: rgba(47,171,220,.24);}
.proBadge{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  color: rgba(11,21,32,.65);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(12,24,38,.06);
}
.proBadge--accent{background: rgba(47,171,220,.10); border-color: rgba(47,171,220,.20); color: rgba(11,21,32,.70);}
.proCard__media{
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 210px;
  height: 150px;
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(12,24,38,.06);
  box-shadow: 0 18px 60px rgba(13,38,60,.08);
  transform: rotate(-2.5deg);
  background: rgba(255,255,255,.9);
}
.proCard__media img{width:100%; height:100%; object-fit: cover; filter: saturate(1.06) contrast(1.03);}
.proCard .p{max-width: 46ch; padding-right: 170px;}
.proCard--accent{border-color: rgba(47,171,220,.18); background: linear-gradient(180deg, rgba(47,171,220,.08), rgba(255,255,255,.96));}

/* marquee */
/* =========================
   Brand portfolio marquee
   ========================= */

.marquee{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(12,24,38,.08);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
}

/* Subtle TW Europe blue glow behind content */
.marquee::before{
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(
      circle at 30% 50%,
      rgba(46,164,224,.14),
      transparent 60%
    ),
    radial-gradient(
      circle at 70% 50%,
      rgba(46,164,224,.10),
      transparent 65%
    );
  filter: blur(42px);
  z-index: 0;
  pointer-events: none;
}

/* Scrolling track */
.marquee__track{
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  padding: 20px;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 78s linear infinite;
}

/* One full row of logos (original + cloned row) */
.marquee__row{
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Scroll animation */
@keyframes marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Individual logo tile */
.logoTile{
  display: grid;
  place-items: center;
  width: 160px;
  height: 84px;
  border-radius: 22px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(12,24,38,.06);
  box-shadow: 0 10px 28px rgba(13,38,60,.06);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Logo image */
.logoTile img{
  max-height: 54px;
  max-width: 128px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .98;
  filter: saturate(1.05) contrast(1.02);
}

/* Subtle lift on hover (desktop only) */
@media (hover:hover){
  .logoTile:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 50px rgba(13,38,60,.10);
  }
}

/* Full-width marquee breakout */
.marquee{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* === EU REACH — COMPLETE CSS (MAP OVERLAY LOCKED TO IMAGE) === */
/* Assumptions:
   - #mapStack wraps the <img id="euMap"> and <svg id="overlay">
   - JS positions #overlay to the exact contain-box
   - Image uses object-fit: contain; object-position: 50% 50%
*/

.section--reach .layout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 980px){
  .section--reach .layout{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* LEFT */
.section--reach .copy{
  padding: 10px 6px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}
@media (max-width: 980px){
  .section--reach .copy{
    justify-content: flex-start;
    padding: 6px 2px;
  }
}

.section--reach .kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(11,21,32,.55);
  font-weight: 850;
  margin: 0 0 10px;
}
.section--reach .kdot{
  width: 9px; height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--tw));
  box-shadow: 0 0 0 7px rgba(47,171,220,.16);
  flex: 0 0 auto;
}

.section--reach .reachH{
  margin: 0 0 10px;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: rgba(11,21,32,.96);
}

.section--reach .lede{
  margin: 0 0 16px;
  max-width: 62ch;
  color: rgba(11,21,32,.70);
  line-height: 1.55;
  font-size: 15.5px;
}

/* BULLET CARDS */
.section--reach .bullets{
  margin: 8px 0 16px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.section--reach .bullet{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(12,24,38,.08);
  box-shadow: 0 10px 24px rgba(13,38,60,.05);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.section--reach .bullet:hover{
  transform: translateY(-1px);
  border-color: rgba(47,171,220,.22);
  background: rgba(255,255,255,.92);
}
.section--reach .bicon{
  width: 10px; height: 10px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(47,171,220,.95);
  box-shadow: 0 0 0 7px rgba(47,171,220,.14);
  flex:0 0 auto;
}

/* CTA */
.section--reach .cta{
  margin-top: 2px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Optional: keep your existing button styles; only enhance primary */
.section--reach .btnPrimary{
  color: #062033;
  border-color: rgba(47,171,220,.30);
  background: linear-gradient(135deg, rgba(47,171,220,.95), rgba(111,200,240,.78));
  box-shadow: 0 18px 50px rgba(47,171,220,.18);
}

/* RIGHT (MAP CARD) */
.section--reach aside.mapCard{
  display:flex;
  min-height: 100%;
}

.section--reach .mapCard{
  width:100%;
  border-radius: 26px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(12,24,38,.10);
  box-shadow: var(--shadow);
  overflow:hidden;

  display:flex;
  flex-direction: column;

  /* keep it visually balanced */
  min-height: 360px;
}

@media (max-width: 980px){
  .section--reach .mapCard{
    border-radius: 22px;
    min-height: 360px;
  }
}

.section--reach .mapHead{ display:none; }

/* Frame fills card */
.section--reach .mapFrame{
  padding: 0;
  flex: 1;
  min-height: 0;
  display:flex;
  align-items: stretch;
  justify-content: stretch;
}

/* STACK: fixed ratio to match your map coordinates */
.section--reach #mapStack.mapStack,
.section--reach .mapStack#mapStack,
.section--reach .mapStack{
  position: relative;               /* JS also enforces if static */
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;

  /* If you want fixed ratio: JS sets --ar from natural image */
  aspect-ratio: var(--ar, 16 / 10);
}

/* Map image MUST be contain + centered for JS math */
.section--reach #euMap.mapImg,
.section--reach .mapImg#euMap,
.section--reach .mapImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;

  object-fit: contain;
  object-position: 50% 50%;

  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* SVG overlay: JS sets exact left/top/width/height to the contain-box */
.section--reach #overlay.overlay,
.section--reach .overlay#overlay,
.section--reach .overlay{
  position:absolute;   /* JS overwrites position/geometry */
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}

/* SVG styling */
.section--reach .laneGlow{
  fill:none;
  stroke: rgba(47,171,220,.20);
  stroke-width: 7.2;
  stroke-linecap: round;
  opacity: .9;
}

.section--reach .lane{
  fill:none;
  stroke: rgba(47,171,220,.78);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 10 10;
  opacity: .95;
  filter: drop-shadow(0 10px 18px rgba(47,171,220,.12));
  animation: dash 6.2s linear infinite;
}

@keyframes dash{
  from{ stroke-dashoffset: 0; }
  to{ stroke-dashoffset: -170; }
}

.section--reach .nodeDot{
  fill: rgba(47,171,220,.92);
  stroke: rgba(255,255,255,.92);
  stroke-width: 2;
  filter: drop-shadow(0 10px 18px rgba(47,171,220,.16));
}

/* Small safety: if parent has padding somewhere, ensure map stays edge-to-edge */
.section--reach .mapCard,
.section--reach .mapFrame,
.section--reach .mapStack{
  box-sizing: border-box;
}

/* =========================
   CONTACT — META + NOTE + FORM + CTA MEDIA (TW LOGO TRAPEZOID CUT)
   ========================= */

/* contact meta card */
.contactMeta{
  margin-top: 20px;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(12,24,38,.08);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
}

/* a bit more breathing space between rows */
.contactMeta__row{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(12,24,38,.06);
}
.contactMeta__row:last-child{
  border-bottom:none;
  padding-bottom: 6px;
}

.contactMeta__label{
  font-weight: 850;
  font-size: 12px;
  color: rgba(11,21,32,.52);
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height: 1.25;
  flex: 0 0 auto;
}

.contactMeta__value{
  font-weight: 800;
  color: rgba(11,21,32,.82);
  text-align: right;
  line-height: 1.35;
  max-width: 68%;
  word-break: break-word;
}
.contactMeta__value a{
  color: inherit;
  text-decoration: none;
}
.contactMeta__value a:hover{
  color: var(--tw);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* mobile: stack label/value for breathing room */
@media (max-width: 560px){
  .contactMeta{ padding: 16px; }
  .contactMeta__row{
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
  }
  .contactMeta__value{
    text-align: left;
    max-width: 100%;
  }
}

/* note */
.note{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(47,171,220,.18);
  background: linear-gradient(180deg, rgba(47,171,220,.10), rgba(47,171,220,.06));
}

/* slightly stronger hierarchy */
.note__title{
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: rgba(11,21,32,.72);
  line-height: 1.2;
}
.note__text{
  margin-top: 6px;
  color: rgba(11,21,32,.70);
  line-height: 1.5;
  font-size: 13.5px;
}

/* form card */
.form{
  border-radius: var(--radius);
  border: 1px solid rgba(12,24,38,.08);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
  padding: 22px;
  overflow: hidden;
}
@media (max-width: 560px){
  .form{ padding: 18px; }
}

/* OPTIONAL: contact page split layout */
.contactSplit{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 980px){
  .contactSplit{ grid-template-columns: 1fr; gap: 16px; }
}

/* OPTIONAL media card (image next to contact section) */
.contactMedia{
  border-radius: var(--radius);
  border: 1px solid rgba(12,24,38,.08);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  overflow: hidden;
  min-height: 320px;
}
.contactMedia img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
}

/* =========================
   CONTACT CTA (SPLIT)
   ========================= */

#contact-cta{
  padding: clamp(44px, 6vw, 72px) 0;
}

#contact-cta .ctaSplit{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: center;
}

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

#contact-cta .ctaSplit__actions{
  margin-top: 24px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

#contact-cta .ctaNote{
  margin-top: 12px;
  font-size: 13px;
}
/* =========================
   CONTACT CTA — tilted media frame (matches proCard__media style)
   ========================= */

#contact-cta .ctaSplit__media{
  display:flex;
  justify-content:flex-end; /* blijft rechts */
  align-items:center;
}

/* the tilted square-ish frame */
#contact-cta .ctaSplit__frame{
  width: 320px;
  height: 260px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(12,24,38,.06);
  box-shadow: 0 18px 60px rgba(13,38,60,.08);
  background: rgba(255,255,255,.90);

  transform: rotate(-2.5deg);
  transform-origin: center;

  /* subtle “blue glow” like other sections */
  background:
    radial-gradient(520px 360px at 60% 30%, rgba(47,171,220,.18), rgba(47,171,220,0) 62%),
    rgba(255,255,255,.92);
}

/* image fills frame */
#contact-cta .ctaSplit__frame img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
}

/* responsive */
@media (max-width: 900px){
  #contact-cta .ctaSplit__media{
    justify-content:flex-start;
  }
  #contact-cta .ctaSplit__frame{
    width: 100%;
    max-width: 420px;
    height: 260px;
    transform: rotate(-2deg);
  }
}

@media (max-width: 520px){
  #contact-cta .ctaSplit__frame{
    height: 220px;
    transform: none; /* op mobiel vaak netter recht */
  }
}

/* =========================
   CONTACT CTA — media card (EXACT like Own Brands)
   ========================= */

#contact-cta .ctaSplit__media{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

/* This is the SAME visual language as .ownBrands__media */
#contact-cta .ctaSplit__mediaCard{
  width: 320px;
  height: 260px;
  padding: 18px;

  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(12,24,38,.08);

  background:
    radial-gradient(520px 360px at 60% 30%, rgba(47,171,220,.26), rgba(47,171,220,0) 62%),
    linear-gradient(180deg, rgba(47,171,220,.10), rgba(255,255,255,.94));

  box-shadow: 0 22px 70px rgba(13,38,60,.10);

  transform: rotate(-3deg);
  transform-origin: center;
}

/* Image inside — clean, rounded, NOT tilted */
#contact-cta .ctaSplit__mediaCard img{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 22px;
  filter: saturate(1.05) contrast(1.03);
}

/* responsive */
@media (max-width: 900px){
  #contact-cta .ctaSplit__media{
    justify-content:flex-start;
  }
  #contact-cta .ctaSplit__mediaCard{
    width: 100%;
    max-width: 420px;
    height: 260px;
    transform: rotate(-2deg);
  }
}

@media (max-width: 520px){
  #contact-cta .ctaSplit__mediaCard{
    height: 220px;
    transform: none; /* mobiel = rust */
  }
}

/* Move contact media slightly left for visual balance */
#contact-cta .ctaSplit__media{
  justify-content: flex-start; /* i.p.v. flex-end */
  padding-left: 24px;          /* subtiele offset */
}


/* =========================
   FORM GRID (rest of your file)
   ========================= */

.formGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px){
  .formGrid{ grid-template-columns: 1fr; }
}

.form__row{
  display:grid;
  gap: 8px;
}
.form__row--full{ grid-column: 1 / -1; }

.form__label{
  font-weight: 850;
  font-size: 12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(11,21,32,.60);
  line-height: 1.2;
}

.form__input{
  border-radius: 14px;
  border: 1px solid rgba(12,24,38,.12);
  background: rgba(247,251,254,1);
  padding: 12px 12px;
  color: rgba(11,21,32,.92);
  outline:none;
  line-height: 1.35;
  font-size: 14px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.form__input::placeholder{
  color: rgba(11,21,32,.42);
}
.form__input:focus{
  border-color: rgba(47,171,220,.60);
  box-shadow: 0 0 0 6px rgba(47,171,220,.14);
  background: rgba(255,255,255,1);
}
.form__input--area{
  resize: vertical;
  min-height: 150px;
}

/* select caret */
.form__select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(11,21,32,.65) 50%),
    linear-gradient(135deg, rgba(11,21,32,.65) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

/* helper + fineprint */
.form__help{
  font-size: 12px;
  color: rgba(11,21,32,.55);
  line-height: 1.4;
}
.form__fineprint{
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(11,21,32,.52);
  line-height: 1.45;
}

/* checkbox row */
.checkRow{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 13px;
  color: rgba(11,21,32,.72);
  line-height: 1.45;
}
.checkRow input{
  margin-top: 3px;
}

/* errors */
.form__error{
  color: #b42318;
  font-weight: 750;
  font-size: 13px;
  min-height: 18px;
  line-height: 1.3;
}


/* footer */
.footer{
  padding: 34px 0;
  border-top: 1px solid rgba(12,24,38,.06);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(47,171,220,.10), transparent 60%),
    linear-gradient(180deg, rgba(247,251,254,1), rgba(255,255,255,1));
}


.footer__inner{display:flex; align-items:flex-start; justify-content:space-between; gap: 18px; flex-wrap:wrap}
.footer__brand{max-width: 46ch}
.footer__brand img{height: 100px; width:auto; margin-bottom: 10px}
.footer__brand p{margin:0; color: rgba(11,21,32,.58)}
.footer__links{display:flex; gap: 14px; flex-wrap:wrap; font-weight: 900; font-size: 13px; color: rgba(11,21,32,.58)}
.footer__links a:hover{color: var(--tw)}
.footer__legal{display:flex; gap: 10px; flex-wrap:wrap; font-size: 12px; color: rgba(11,21,32,.52)}
.footer__legal a:hover{color: rgba(11,21,32,.78)}
.sep{opacity:.6}

/* responsive */
@media (max-width: 920px){
  .grid--2{grid-template-columns: 1fr}
  .nav__toggle{display:block}
  .nav__menu{
    position: fixed;
    top: 78px;
    right: 18px;
    left: 18px;
    display:grid;
    gap: 8px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(12,24,38,.08);
    box-shadow: var(--shadow);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav__menu.isOpen{opacity: 1; transform: translateY(0); pointer-events: auto}
  .formGrid{grid-template-columns: 1fr}

  .hero__content{padding-bottom: 120px}
  .heroTransition{height: 110px}

  .proCard{ padding: 22px; }
  .proCard__media{
    position: static;
    width: 100%;
    height: 180px;
    margin-top: 14px;
    transform: none;
    border-radius: 18px;
  }
  .proCard .p{ padding-right: 0; max-width: none; }

  .marquee__track{padding: 16px; gap: 12px; animation-duration: 42s;}
  .logoTile{width: 132px; height: 72px; border-radius: 20px;}
  .logoTile img{max-height: 46px; max-width: 112px;}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .marquee__track{animation:none}
  .btn, .nav__link{transition:none}
  .logoTile:hover{transform:none; box-shadow: 0 10px 28px rgba(13,38,60,.06)}
}

/* =========================================================
   LOGISTICS (NEW REPLACED SECTION) — scoped to #logistics
   ========================================================= */
#logistics{
  position: relative;
  min-height: auto;
  display: block;
  padding: clamp(56px, 6.5vw, 98px) 0;
  overflow: visible;
  isolation: auto;
}

/* ✅ FIX: make logistics the same width as the rest (.container) */
#logistics.hero{
  width:min(1120px, calc(100% - 40px));
  margin-inline:auto;
}

#logistics.hero{
  border-radius: calc(var(--radius) + 10px);
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 28px);
  background:
    radial-gradient(900px 650px at 22% 30%, rgba(47,171,220,.16), transparent 60%),
    radial-gradient(900px 520px at 80% 70%, rgba(47,171,220,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(247,251,254,1));
  border: 1px solid rgba(12,24,38,.08);
  box-shadow: var(--shadow);
}

#logistics .hero__bg{
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(800px 500px at 15% 30%, rgba(47,171,220,.18), rgba(47,171,220,0) 60%),
    radial-gradient(700px 520px at 78% 15%, rgba(47,171,220,.14), rgba(47,171,220,0) 58%),
    radial-gradient(600px 480px at 90% 75%, rgba(47,171,220,.10), rgba(47,171,220,0) 60%);
  pointer-events:none;
}

#logistics .hero__grid{
  position: relative;
  display:grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(18px, 2.2vw, 28px);
  align-items: start;
}
@media (max-width: 980px){
  #logistics .hero__grid{ grid-template-columns: 1fr; }
}

#logistics .kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(12,24,38,.10);
  box-shadow: var(--shadow2);
  color: rgba(11,21,32,.78);
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 13px;
}
#logistics .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, rgba(111,200,240,.85) 35%, var(--tw) 90%);
  box-shadow: 0 0 0 6px rgba(47,171,220,.14);
}

#logistics h1{
  margin: 18px 0 12px;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: rgba(11,21,32,.98);
}
#logistics .sub{
  margin: 0 0 18px;
  color: rgba(11,21,32,.70);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 62ch;
}

#logistics .pillrow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 18px;
}
#logistics .pill{
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(12,24,38,.08);
  box-shadow: var(--shadow2);
  display:flex;
  gap: 10px;
  align-items: baseline;
}
#logistics .pill__label{
  color: rgba(11,21,32,.55);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
}
#logistics .pill__value{
  font-weight: 900;
  font-size: 14px;
  color: rgba(11,21,32,.88);
}

#logistics .micro{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
#logistics .micro__item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(12,24,38,.08);
  box-shadow: var(--shadow2);
}
#logistics .micro__icon{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(47,171,220,.10);
  border: 1px solid rgba(47,171,220,.18);
  color: rgba(11,21,32,.82);
}
#logistics .muted{ color: rgba(11,21,32,.62); }
#logistics .tiny{ font-size: 12.5px; line-height: 1.45; }

#loglogistics .panel,
#logistics .panel{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(12,24,38,.08);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}
#logistics .panel__top{
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(12,24,38,.08);
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#logistics .brand{display:flex;align-items:center;gap:12px;}
#logistics .brand__logo{width:64px;height:44px;display:grid;place-items:center;}
#logistics .brand__logo img{width:100%;height:100%;object-fit:contain;}
#logistics .brand__name{font-weight:900;}
#logistics .brand__tag{font-size:12px;color:rgba(11,21,32,.55);margin-top:2px;}

#logistics .toggle{
  display:flex;
  border-radius: 999px;
  border: 1px solid rgba(12,24,38,.10);
  background: rgba(255,255,255,.92);
  overflow:hidden;
}
#logistics .toggle__btn{
  border:0;
  background: transparent;
  padding: 10px 12px;
  font-weight: 900;
  color: rgba(11,21,32,.60);
  cursor:pointer;
}
#logistics .toggle__btn.is-active{
  background: rgba(47,171,220,.12);
  color: rgba(11,21,32,.92);
}
#logistics .panel__content{ padding: 14px 18px 18px; }

#logistics .label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,21,32,.55);
  font-weight: 900;
  margin-bottom: 10px;
}
#logistics .bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,21,32,.86);
  line-height: 1.55;
}
#logistics .bullets li{ margin: 6px 0; }

#logistics .valueBlock{ display:none; }
#logistics .valueBlock.is-active{ display:block; }

#logistics .stats{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 460px){
  #logistics .stats{ grid-template-columns: 1fr; }
}
#logistics .stat{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(12,24,38,.08);
  box-shadow: var(--shadow2);
}
#logistics .stat__num{font-weight:900;font-size:22px;letter-spacing:-0.02em;}
#logistics .stat__txt{margin-top:3px;font-size:12px;color:rgba(11,21,32,.60);font-weight:900;}

#logistics .laneCard{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(12,24,38,.08);
  box-shadow: var(--shadow2);
}
#logistics .laneCard__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
#logistics .chip{
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(47,171,220,.10);
  border: 1px solid rgba(47,171,220,.18);
  color: rgba(11,21,32,.80);
}
#logistics .steps{
  margin: 10px 0 12px;
  padding-left: 0;
  list-style: none;
  display:grid;
  gap: 8px;
}
#logistics .steps li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: rgba(11,21,32,.86);
  line-height: 1.45;
}
#logistics .stepN{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(47,171,220,.12);
  border: 1px solid rgba(47,171,220,.22);
  font-weight: 900;
}
#logistics .btn--full{width:100%;border-radius:16px;padding:12px 14px;}

/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:90;}
.modal.is-open{display:block;}
.modal__backdrop{position:absolute;inset:0;background: rgba(7, 11, 20, 0.44);backdrop-filter: blur(6px);}
.modal__card{
  position: relative;
  width: min(720px, calc(100% - 26px));
  margin: 56px auto;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 24px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.25);
  overflow:hidden;
}
.modal__head{
  padding: 16px 18px;
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid rgba(12,24,38,.10);
}
.modal__kicker{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,21,32,.55);
  font-weight: 900;
  margin-bottom: 6px;
}
.modal__head h2{margin:0;font-size:22px;letter-spacing:-0.02em;}
.iconBtn{
  width: 40px;height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(12,24,38,.10);
  background: rgba(255,255,255,0.70);
  cursor:pointer;
  font-weight: 900;
}

/* modal form only */
#quoteModal .form{border:0;background:transparent;box-shadow:none;padding:16px 18px 18px;}
#quoteModal .form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
@media (max-width: 640px){ #quoteModal .form__row{grid-template-columns:1fr;} }
#quoteModal label{display:grid;gap:6px;font-weight:900;color:rgba(11,21,32,.88);}
#quoteModal input,#quoteModal textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(12,24,38,.10);
  background: rgba(247,251,254,1);
  font:inherit;
  outline:none;
}
#quoteModal input:focus,#quoteModal textarea:focus{
  border-color: rgba(47,171,220,.55);
  box-shadow: 0 0 0 6px rgba(47,171,220,.14);
}
#quoteModal .form__full{margin-bottom:12px;}
#quoteModal .form__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}



/* =========================
   OWN BRANDS — PRO (with logo tiles + rounded photos)
   Scoped to #own-brands
   ========================= */

#own-brands{
  position: relative;
}

/* Layout */
#own-brands .ownGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: stretch;
}

/* LEFT main card */
#own-brands .ownMain{
  padding: 28px;
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(900px 520px at 20% 25%, rgba(47,171,220,.12), transparent 62%),
    rgba(255,255,255,.94);
  box-shadow: var(--shadow);
}

#own-brands .ownMain__top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}

#own-brands .ownMain__lede{
  margin-top: 10px;
  max-width: 70ch;
}

/* Points */
#own-brands .ownPoints{
  margin-top: 16px;
  display:grid;
  gap: 10px;
}

#own-brands .ownPoint{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(12,24,38,.08);
  box-shadow: 0 10px 24px rgba(13,38,60,.05);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

#own-brands .ownPoint:hover{
  transform: translateY(-1px);
  border-color: rgba(47,171,220,.22);
  background: rgba(255,255,255,.92);
}

#own-brands .ownPoint__dot{
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(47,171,220,.95);
  box-shadow: 0 0 0 7px rgba(47,171,220,.14);
  flex: 0 0 auto;
}

#own-brands .ownPoint strong{
  font-weight: 900;
  color: rgba(11,21,32,.92);
}

#own-brands .ownPoint .p{
  margin-top: 2px;
  line-height: 1.45;
}

/* Actions */
#own-brands .ownActions{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* RIGHT cards grid */
#own-brands .ownCards{
  display:grid;
  gap: 18px;
}

/* Brand card */
#own-brands .ownCard{
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: calc(var(--radius) + 4px);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 70px rgba(13,38,60,.06);
}

#own-brands .ownCard__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

/* Blue logo tile (with logo image inside) */
#own-brands .ownLogo{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(47,171,220,.12);
  border: 1px solid rgba(47,171,220,.22);
  box-shadow: 0 10px 24px rgba(13,38,60,.05);
  overflow: hidden;

  display:grid;
  place-items:center;
}

#own-brands .ownLogo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
  border-radius: 12px;
  filter: saturate(1.02) contrast(1.02);
}

/* Tag */
#own-brands .ownTag{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(11,21,32,.60);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(12,24,38,.06);
}

/* Text spacing */
#own-brands .ownCard__title{
  margin: 8px 0 6px;
}

#own-brands .ownCard__text{
  max-width: 46ch;
  padding-right: 170px; /* space for media */
}

/* Media: rounded corners guaranteed */
#own-brands .ownCard__media{
  position: absolute;
  right: -16px;
  bottom: -20px;
  width: 210px;
  height: 150px;

  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(12,24,38,.06);
  box-shadow: 0 18px 60px rgba(13,38,60,.08);

  transform: rotate(-2.5deg);
  background: rgba(255,255,255,.92);
}

/* IMPORTANT: rounded photo corners */
#own-brands .ownCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* cover geeft “photo look”; wil je product vrijstaand -> contain */
  border-radius: 26px;            /* dubbel: zeker afgerond */
  padding: 0;                     /* geen padding zodat hoeken mooi zijn */
  filter: saturate(1.05) contrast(1.03);
}

/* Optional: if you prefer product packshots centered (swap) */
/*
#own-brands .ownCard__media img{
  object-fit: contain;
  background: rgba(255,255,255,.96);
  padding: 12px;
}
*/

/* Responsive */
@media (max-width: 980px){
  #own-brands .ownGrid{
    grid-template-columns: 1fr;
  }

  #own-brands .ownCards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #own-brands .ownCard__text{
    padding-right: 0;
    max-width: none;
  }

  #own-brands .ownCard__media{
    position: static;
    width: 100%;
    height: 180px;
    margin-top: 14px;
    transform: none;
    border-radius: 18px;
  }

  #own-brands .ownCard__media img{
    border-radius: 18px;
  }
}

@media (max-width: 520px){
  #own-brands .ownCards{
    grid-template-columns: 1fr;
  }
}