{"id":2552,"date":"2024-07-05T09:49:30","date_gmt":"2024-07-05T09:49:30","guid":{"rendered":"https:\/\/beyondhijabs.nl\/?page_id=2552"},"modified":"2026-10-27T19:01:16","modified_gmt":"2026-10-27T19:01:16","slug":"homepage","status":"publish","type":"page","link":"https:\/\/co-office.nu\/en\/","title":{"rendered":"Co-Office | Where Opportunities Connect"},"content":{"rendered":"<div data-data-eoa-type=\"data-frgx\" data-data-eoa-id=\"2552\" class=\"data-eoa data-eoa-2552\" data-data-eoa-post-type=\"page\">\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-3e46145a layoutID-full e-flex layoutID e-parent\" data-id=\"3e46145a\" data-dynamic_type=\"container\">\n\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-29065e41 layoutID-full e-flex layoutID e-child\" data-id=\"29065e41\" data-dynamic_type=\"container\">\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-57cfbe08 data-eoa-data-hxm__width-initial data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"57cfbe08\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t\n<h1 class=\"h1-m splitwor l3\">A premium office setting with a boutique hotel feel<\/h1>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-1adec31f layoutID-full e-flex layoutID e-child\" data-id=\"1adec31f\" data-dynamic_type=\"container\">\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-6f13d9c5 data-eoa-data-hxm__width-initial data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"6f13d9c5\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t  <p class=\"splitter md\">Step into an office where every space inspires. Where hospitality and personal attention are paramount.<\/p>\n  \n  \t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-51e1035d data-eoa-data-hxm__width-initial data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"51e1035d\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t\n\n<a href=\"https:\/\/tour.co-office.nl\/\" class=\"buttn-icon-link w-inline-block fading\" target=\"_blank\" rel=\"noopener noreferrer\">\n\n\n<div class=\"buttn-icon-content__mask\">\n<span data-button-anim-target=\"\" class=\"buttn-icon-content__text dark\">Book a tour<\/span>\n<\/div>\n<div data-icon-size=\"normal\" class=\"buttn-icon-icon accent\">\n<div data-button-anim-target=\"\" class=\"buttn-icon-icon__bg\"><\/div>\n<div class=\"buttn-icon-icon__wrap color--white\">\n<div class=\"buttn-icon-icon__list\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100%\" viewbox=\"0 0 10 8\" fill=\"none\" data-button-anim-target=\"\" class=\"buttn-icon-icon__arrow light\"><path d=\"M4.45231 0.385986H6.02531L9.30131 3.99999L6.02531 7.61399H4.45231L7.40331 4.58499H0.695312V3.42799H7.41631L4.45231 0.385986Z\" fill=\"currentColor\"><\/path><\/svg>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100%\" viewbox=\"0 0 10 8\" fill=\"none\" data-button-anim-target=\"\" class=\"buttn-icon-icon__arrow light\"><path d=\"M4.45231 0.385986H6.02531L9.30131 3.99999L6.02531 7.61399H4.45231L7.40331 4.58499H0.695312V3.42799H7.41631L4.45231 0.385986Z\" fill=\"currentColor\"><\/path><\/svg>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100%\" viewbox=\"0 0 10 8\" fill=\"none\" data-button-anim-target=\"\" class=\"buttn-icon-icon__arrow light\"><path d=\"M4.45231 0.385986H6.02531L9.30131 3.99999L6.02531 7.61399H4.45231L7.40331 4.58499H0.695312V3.42799H7.41631L4.45231 0.385986Z\" fill=\"currentColor\"><\/path><\/svg>\n<\/div>\n<\/div>\n<\/div>\n<\/a>\n\n\n\n     \n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-588fd84e layoutID-full e-flex layoutID e-parent\" data-id=\"588fd84e\" data-dynamic_type=\"container\">\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-236a7a02 data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"236a7a02\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t<style>\n\n.nav-links {\n  display: flex;\n  gap: 2rem;\n}\n\n.slider {\n  position: relative;\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  user-select: none;\n  padding: 0;\n  margin: 0;\n}\n\n.slide-track {\n  position: relative;\n  width: max-content;\n  height: auto;\n  display: flex;\n  align-items: flex-start;\n  padding: 0;\n  margin: 0;\n  will-change: transform;\n}\n\n.slide {\n  flex-shrink: 0;\n  width: 550px;\n  height: auto;\n  margin: 0 20px;\n  position: relative;\n  overflow: visible;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  padding: 0;\n  color: inherit;\n  text-decoration: none;\n}\n\n.slide-image {\n  width: 100%;\n  height: 600px;\n  overflow: hidden;\n  flex: none;\n  cursor: pointer;\n}\n\n.slide-image img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  will-change: transform;\n  transform: scale(1);\n  user-select: none;\n  display: block;\n  cursor: pointer;\n  pointer-events: none;\n}\n\n.slide-overlay {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  pointer-events: none;\n  z-index: 10;\n  transition: opacity 0.3s ease;\n  opacity: 1;\n  padding: 0;\n  margin: 0;\n}\n\n.slide:hover .slide-overlay {\n  opacity: 1;\n}\n\n.project-title {\n  font-weight: 300;\n  font-size: 3rem;\n  font-family: \"minion-3\";\n  line-height: 1;\n  letter-spacing: -0.04em;\n  margin: 1.5rem 0 0;\n  padding: 0;\n}\n\n.project-features {\n  display: flex;\n  gap: 0.6rem;\n  margin: 1rem 0 0;\n  padding: 0;\n  list-style: none;\n  font-size: 0.8rem;\n  text-transform: none;\n  font-weight: 400;\n  font-family: \"Poppins\";\n  flex-wrap: wrap;\n}\n\n.project-features li {\n  background-color: #d7e5cc;\n  color: #1e4c3b;\n  padding: 0.35rem 0.65rem;\n  border-radius: 4px;\n  white-space: nowrap;\n  margin: 0;\n}\n\n.project-features li::before {\n  content: none;\n}\n\n.project-arrow {\n  display: none;\n}\n\n.slider-mobile-nav {\n  display: none;\n}\n\n@media screen and (max-width: 999px) {\n\n  .slider {\n    width: 100%;\n    height: auto;\n    overflow: hidden;\n    touch-action: pan-y;\n    overscroll-behavior-x: contain;\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  .slider-mobile-nav {\n    position: relative;\n    z-index: 20;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    gap: 0.5rem;\n    width: 100%;\n    margin: 0 0 1rem;\n    padding: 0 20px;\n    box-sizing: border-box;\n  }\n\n  .slider-mobile-nav__button {\n    width: 40px;\n    height: 40px;\n    flex: 0 0 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 1px solid currentColor;\n    border-radius: 999px;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    touch-action: manipulation;\n  }\n\n  .slider-mobile-nav__button svg {\n    width: 19px;\n    height: 19px;\n    display: block;\n    transform-origin: 50% 50%;\n  }\n\n  \/*\n   * De aangeleverde SVG wijst standaard schuin naar rechtsonder.\n   * Daarom roteren we hem voor echte horizontale carousel-navigatie.\n   *\/\n  .slider-mobile-nav__button--prev svg {\n    transform: rotate(135deg);\n  }\n\n  .slider-mobile-nav__button--next svg {\n    transform: rotate(-45deg);\n  }\n\n  .slide-track {\n    height: auto;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 0 0 0 20px;\n    box-sizing: border-box;\n  }\n\n  \/*\n   * Bijna de volledige viewport voor \u00e9\u00e9n locatie.\n   * Rechts blijft bewust een stukje van de volgende kaart zichtbaar.\n   *\/\n  .slide {\n    width: calc(100vw - 56px);\n    max-width: none;\n    height: auto;\n    margin: 0;\n  }\n\n  .slide-image {\n    width: 100%;\n    height: auto;\n    aspect-ratio: 4 \/ 5;\n  }\n\n  .project-title {\n    width: 100%;\n    font-size: 2rem;\n    line-height: 1;\n    margin-top: 1rem;\n  }\n\n  .project-features {\n    width: 100%;\n    margin-top: 0.75rem;\n    gap: 0.4rem;\n    font-size: 0.75rem;\n  }\n\n}\n<\/style>\n\n\n<div class=\"slider\">\n  <div class=\"slider-mobile-nav\" aria-label=\"Slider navigation\">\n    <button class=\"slider-mobile-nav__button slider-mobile-nav__button--prev\" type=\"button\" aria-label=\"Vorige locatie\">\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" width=\"100%\" class=\"btn-tribes-arrow__arrow-svg\">\n        <polyline points=\"18 8 18 18 8 18\" fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"><\/polyline>\n        <line x1=\"18\" y1=\"18\" x2=\"5\" y2=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"><\/line>\n      <\/svg>\n    <\/button>\n\n    <button class=\"slider-mobile-nav__button slider-mobile-nav__button--next\" type=\"button\" aria-label=\"Volgende locatie\">\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" width=\"100%\" class=\"btn-tribes-arrow__arrow-svg\">\n        <polyline points=\"18 8 18 18 8 18\" fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"><\/polyline>\n        <line x1=\"18\" y1=\"18\" x2=\"5\" y2=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"><\/line>\n      <\/svg>\n    <\/button>\n  <\/div>\n\n  \n  <div class=\"slide-track\">\n    <a class=\"slide\" href=\"\/en\/locations\/adammium\/\">\n      <div class=\"slide-image\">\n        <img decoding=\"async\" src=\"https:\/\/co.brandium.dev\/wp-content\/uploads\/2025\/07\/adammium-slide.jpg\" alt=\"Adammium\" draggable=\"false\">\n      <\/div>\n      <div class=\"slide-overlay\">\n        <p class=\"project-title\">Adammium<\/p>\n        <ul class=\"project-features\">\n          <li>Near A10<\/li>\n          <li>2 min from metro<\/li>\n          <li>Sky lounge<\/li>\n        <\/ul>\n        <div class=\"project-arrow\" aria-hidden=\"true\">\n          <svg viewbox=\"0 0 24 24\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg>\n        <\/div>\n      <\/div>\n    <\/a>\n\n    <a class=\"slide\" href=\"\/en\/locations\/valley\/\">\n      <div class=\"slide-image\">\n        <img decoding=\"async\" src=\"\/media\/2026\/01\/Valley__Co-Office-location.webp\" alt=\"Valley\" draggable=\"false\">\n      <\/div>\n      <div class=\"slide-overlay\">\n        <p class=\"project-title\">Valley<\/p>\n        <ul class=\"project-features\">\n          <li>Hartje Zuidas<\/li>\n          <li>Groene terrassen<\/li>\n          <li>BREEAM Excellent<\/li>\n        <\/ul>\n        <div class=\"project-arrow\" aria-hidden=\"true\">\n          <svg viewbox=\"0 0 24 24\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg>\n        <\/div>\n      <\/div>\n    <\/a>\n\n    <a class=\"slide\" href=\"\/en\/locations\/bruggebouw\/\">\n      <div class=\"slide-image\">\n        <img decoding=\"async\" src=\"https:\/\/co.brandium.dev\/wp-content\/uploads\/2025\/07\/bruggebouw-slide.jpg\" alt=\"Bruggebouw\" draggable=\"false\">\n      <\/div>\n      <div class=\"slide-overlay\">\n        <p class=\"project-title\">Bruggebouw<\/p>\n        <ul class=\"project-features\">\n          <li>Near A10<\/li>\n          <li>Skylounge<\/li>\n          <li>Public transport near<\/li>\n        <\/ul>\n        <div class=\"project-arrow\" aria-hidden=\"true\">\n          <svg viewbox=\"0 0 24 24\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg>\n        <\/div>\n      <\/div>\n    <\/a>\n\n    <a class=\"slide\" href=\"\/en\/locations\/thepulse\/\">\n      <div class=\"slide-image\">\n        <img decoding=\"async\" src=\"https:\/\/co.brandium.dev\/wp-content\/uploads\/2025\/07\/thepulse-slide.jpg\" alt=\"The Pulse\" draggable=\"false\">\n      <\/div>\n      <div class=\"slide-overlay\">\n        <p class=\"project-title\">The Pulse<\/p>\n        <ul class=\"project-features\">\n          <li>Panoramic view<\/li>\n          <li>20e\u201322e verdieping<\/li>\n          <li>Dakterras<\/li>\n        <\/ul>\n        <div class=\"project-arrow\" aria-hidden=\"true\">\n          <svg viewbox=\"0 0 24 24\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg>\n        <\/div>\n      <\/div>\n    <\/a>\n\n    <a class=\"slide\" href=\"\/en\/locations\/zuidas\/\">\n      <div class=\"slide-image\">\n        <img decoding=\"async\" src=\"https:\/\/co.brandium.dev\/wp-content\/uploads\/2025\/07\/Zuidas-slide.jpg\" alt=\"Zuidas\" draggable=\"false\">\n      <\/div>\n      <div class=\"slide-overlay\">\n        <p class=\"project-title\">Zuidas<\/p>\n        <ul class=\"project-features\">\n          <li>3 min van station RAI<\/li>\n          <li>Back Stage koffiebar<\/li>\n          <li>24\/7 access<\/li>\n        <\/ul>\n        <div class=\"project-arrow\" aria-hidden=\"true\">\n          <svg viewbox=\"0 0 24 24\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg>\n        <\/div>\n      <\/div>\n    <\/a>\n\n    <a class=\"slide\" href=\"\/en\/locations\/herengracht\/\">\n      <div class=\"slide-image\">\n        <img decoding=\"async\" src=\"https:\/\/co.brandium.dev\/wp-content\/uploads\/2025\/07\/herengracht-slide.jpg\" alt=\"Herengracht\" draggable=\"false\">\n      <\/div>\n      <div class=\"slide-overlay\">\n        <p class=\"project-title\">Herengracht<\/p>\n        <ul class=\"project-features\">\n          <li>Rijksmonument<\/li>\n          <li>UNESCO grachtengordel<\/li>\n          <li>Dakterras<\/li>\n        <\/ul>\n        <div class=\"project-arrow\" aria-hidden=\"true\">\n          <svg viewbox=\"0 0 24 24\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg>\n        <\/div>\n      <\/div>\n    <\/a>\n\n    <a class=\"slide\" href=\"\/en\/locations\/keynes\/\">\n      <div class=\"slide-image\">\n        <img decoding=\"async\" src=\"https:\/\/co.brandium.dev\/wp-content\/uploads\/2025\/07\/keynes-slide.jpg\" alt=\"Keynes Building\" draggable=\"false\">\n      <\/div>\n      <div class=\"slide-overlay\">\n        <p class=\"project-title\">Keynes Building<\/p>\n        <ul class=\"project-features\">\n          <li>Rieker Business Park<\/li>\n          <li>Parkeren onder pand<\/li>\n          <li>Free meetingrooms<\/li>\n        <\/ul>\n        <div class=\"project-arrow\" aria-hidden=\"true\">\n          <svg viewbox=\"0 0 24 24\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg>\n        <\/div>\n      <\/div>\n    <\/a>\n  <\/div>\n<\/div>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/gsap.min.js\"><\/script>\n\n<script type=\"module\">\n\n\/\/ De HTML is de bron van de slides, inclusief de vertaalbare hrefs.\n\/\/ Voor de infinite slider worden deze originele HTML-dynamicen gekloond.\nconst slideTemplates = Array.from(\n  document.querySelectorAll(\".slider .slide-track > a.slide\"),\n  slide => slide.cloneNode(true)\n);\n\nconst config = {\n  SCROLL_SPEED: 1.75,\n  LERP_FACTOR: 0.04,\n  MOBILE_LERP_FACTOR: 0.18,\n  MAX_VELOCITY: 300,\n  TOUCH_MOMENTUM: 180,\n  MAX_TOUCH_MOMENTUM: 700,\n};\n\n\nconst totalSlideCount = slideTemplates.length;\n\n\nconst state = {\n  currentX: 0,\n  targetX: 0,\n  slideWidth: 590,\n  slides: [],\n  isDragging: false,\n  startX: 0,\n  startY: 0,\n  lastX: 0,\n  lastMouseX: 0,\n  lastTouchX: 0,\n  lastTouchTime: 0,\n  touchVelocity: 0,\n  touchAxis: null,\n  lastScrollTime: Date.now(),\n  isMoving: false,\n  velocity: 0,\n  lastCurrentX: 0,\n  dragDistance: 0,\n  hasActuallyDragged: false,\n  isMobile: false,\n};\n\n\nfunction checkMobile() {\n\n  state.isMobile =\n    window.innerWidth < 1000;\n\n}\n\n\nfunction createSlideElement(index) {\n  return slideTemplates[index % totalSlideCount].cloneNode(true);\n}\n\n\nfunction initializeSlides() {\n\n  const track =\n    document.querySelector(\n      \".slide-track\"\n    );\n\n\n  if (!track || !totalSlideCount) {\n    return;\n  }\n\n\n  track.innerHTML =\n    \"\";\n\n\n  state.slides =\n    [];\n\n\n  checkMobile();\n\n\n  \/*\n   * Mobile CSS:\n   * slide width = 100vw - 56px\n   * gap = 12px\n   * stride = 100vw - 44px\n   *\/\n  state.slideWidth =\n    state.isMobile\n      ? window.innerWidth - 44\n      : 590;\n\n\n  const copies =\n    6;\n\n\n  const totalSlides =\n    totalSlideCount *\n    copies;\n\n\n  for (\n    let i = 0;\n    i < totalSlides;\n    i++\n  ) {\n\n    const slide =\n      createSlideElement(i);\n\n\n    track.appendChild(\n      slide\n    );\n\n\n    state.slides.push(\n      slide\n    );\n\n  }\n\n\n  const startOffset =\n    -(\n      totalSlideCount *\n      state.slideWidth *\n      2\n    );\n\n\n  state.currentX =\n    startOffset;\n\n  state.targetX =\n    startOffset;\n\n\n  updateSlidePositions();\n\n}\n\n\nfunction updateSlidePositions() {\n\n  const track =\n    document.querySelector(\n      \".slide-track\"\n    );\n\n\n  if (!track) {\n    return;\n  }\n\n\n  const sequenceWidth =\n    state.slideWidth *\n    totalSlideCount;\n\n\n  if (\n    state.currentX >\n    -sequenceWidth * 1\n  ) {\n\n    state.currentX -=\n      sequenceWidth;\n\n\n    state.targetX -=\n      sequenceWidth;\n\n  }\n\n  else if (\n    state.currentX <\n    -sequenceWidth * 4\n  ) {\n\n    state.currentX +=\n      sequenceWidth;\n\n\n    state.targetX +=\n      sequenceWidth;\n\n  }\n\n\n  track.style.transform =\n    `translate3d(${state.currentX}px, 0, 0)`;\n\n}\n\n\nfunction updateParallax() {\n\n  const viewportCenter =\n    window.innerWidth \/ 2;\n\n\n  state.slides.forEach(\n    (slide) => {\n\n      const img =\n        slide.querySelector(\n          \"img\"\n        );\n\n\n      if (!img) {\n        return;\n      }\n\n\n      const slideRect =\n        slide.getBoundingClientRect();\n\n\n      if (\n        slideRect.right < -500 ||\n        slideRect.left >\n        window.innerWidth + 500\n      ) {\n\n        return;\n\n      }\n\n\n      const slideCenter =\n        slideRect.left +\n        slideRect.width \/ 2;\n\n\n      const distanceFromCenter =\n        slideCenter -\n        viewportCenter;\n\n\n      const parallaxOffset =\n        distanceFromCenter *\n        -0.1;\n\n\n      img.style.transform =\n        `translateX(${parallaxOffset}px) scale(1.3)`;\n\n    }\n  );\n\n}\n\n\nfunction updateMovingState() {\n\n  state.velocity =\n    Math.abs(\n      state.currentX -\n      state.lastCurrentX\n    );\n\n\n  state.lastCurrentX =\n    state.currentX;\n\n\n  const isSlowEnough =\n    state.velocity <\n    0.1;\n\n\n  const hasBeenStillLongEnough =\n    Date.now() -\n    state.lastScrollTime >\n    200;\n\n\n  state.isMoving =\n    state.hasActuallyDragged ||\n    !isSlowEnough ||\n    !hasBeenStillLongEnough;\n\n\n  document.documentElement.style.setProperty(\n    \"--slider-moving\",\n    state.isMoving\n      ? \"1\"\n      : \"0\"\n  );\n\n}\n\n\nfunction animate() {\n\n  if (\n    state.isMobile &&\n    state.isDragging &&\n    state.touchAxis === \"x\"\n  ) {\n\n    state.currentX =\n      state.targetX;\n\n  }\n\n  else {\n\n    const lerpFactor =\n      state.isMobile\n        ? config.MOBILE_LERP_FACTOR\n        : config.LERP_FACTOR;\n\n    state.currentX +=\n      (\n        state.targetX -\n        state.currentX\n      ) *\n      lerpFactor;\n\n  }\n\n\n  updateMovingState();\n\n  updateSlidePositions();\n\n  updateParallax();\n\n\n  requestAnimationFrame(\n    animate\n  );\n\n}\n\n\nfunction handleWheel(e) {\n\n  if (\n    Math.abs(e.deltaX) >\n    Math.abs(e.deltaY)\n  ) {\n\n    return;\n\n  }\n\n\n  e.preventDefault();\n\n\n  state.lastScrollTime =\n    Date.now();\n\n\n  const scrollDelta =\n    e.deltaY *\n    config.SCROLL_SPEED;\n\n\n  state.targetX -=\n    Math.max(\n      Math.min(\n        scrollDelta,\n        config.MAX_VELOCITY\n      ),\n      -config.MAX_VELOCITY\n    );\n\n}\n\n\nfunction handleTouchStart(e) {\n\n  if (!e.touches.length) {\n    return;\n  }\n\n\n  const touch =\n    e.touches[0];\n\n\n  state.isDragging =\n    true;\n\n  state.startX =\n    touch.clientX;\n\n  state.startY =\n    touch.clientY;\n\n  state.lastTouchX =\n    touch.clientX;\n\n  state.lastTouchTime =\n    performance.now();\n\n  state.touchVelocity =\n    0;\n\n  state.touchAxis =\n    null;\n\n  state.lastX =\n    state.targetX;\n\n  state.dragDistance =\n    0;\n\n  state.hasActuallyDragged =\n    false;\n\n  state.lastScrollTime =\n    Date.now();\n\n}\n\n\nfunction handleTouchMove(e) {\n\n  if (\n    !state.isDragging ||\n    !e.touches.length\n  ) {\n    return;\n  }\n\n\n  const touch =\n    e.touches[0];\n\n\n  const rawDeltaX =\n    touch.clientX -\n    state.startX;\n\n  const rawDeltaY =\n    touch.clientY -\n    state.startY;\n\n\n  if (!state.touchAxis) {\n\n    if (\n      Math.abs(rawDeltaX) < 6 &&\n      Math.abs(rawDeltaY) < 6\n    ) {\n      return;\n    }\n\n\n    state.touchAxis =\n      Math.abs(rawDeltaX) >\n      Math.abs(rawDeltaY)\n        ? \"x\"\n        : \"y\";\n\n  }\n\n\n  if (state.touchAxis === \"y\") {\n    return;\n  }\n\n\n  e.preventDefault();\n\n\n  const now =\n    performance.now();\n\n  const elapsed =\n    Math.max(\n      now - state.lastTouchTime,\n      1\n    );\n\n  const frameDeltaX =\n    touch.clientX -\n    state.lastTouchX;\n\n\n  state.touchVelocity =\n    frameDeltaX \/\n    elapsed;\n\n\n  state.targetX =\n    state.lastX +\n    rawDeltaX;\n\n  state.currentX =\n    state.targetX;\n\n\n  state.dragDistance =\n    Math.abs(\n      rawDeltaX\n    );\n\n\n  if (\n    state.dragDistance >\n    6\n  ) {\n\n    state.hasActuallyDragged =\n      true;\n\n  }\n\n\n  state.lastTouchX =\n    touch.clientX;\n\n  state.lastTouchTime =\n    now;\n\n  state.lastScrollTime =\n    Date.now();\n\n\n  updateSlidePositions();\n\n}\n\n\nfunction handleTouchEnd() {\n\n  if (\n    state.touchAxis === \"x\" &&\n    state.hasActuallyDragged\n  ) {\n\n    const momentum =\n      Math.max(\n        Math.min(\n          state.touchVelocity *\n          config.TOUCH_MOMENTUM,\n          config.MAX_TOUCH_MOMENTUM\n        ),\n        -config.MAX_TOUCH_MOMENTUM\n      );\n\n\n    \/*\n     * Eerst momentum meenemen, daarna naar de dichtstbijzijnde\n     * locatie snappen. Daardoor voelt mobile veel strakker.\n     *\/\n    const projectedX =\n      state.targetX +\n      momentum;\n\n\n    state.targetX =\n      Math.round(\n        projectedX \/\n        state.slideWidth\n      ) *\n      state.slideWidth;\n\n  }\n\n\n  state.isDragging =\n    false;\n\n  state.touchAxis =\n    null;\n\n  state.touchVelocity =\n    0;\n\n  state.lastScrollTime =\n    Date.now();\n\n\n  setTimeout(\n    () => {\n\n      state.hasActuallyDragged =\n        false;\n\n      state.dragDistance =\n        0;\n\n    },\n    220\n  );\n\n}\n\n\nfunction handleMouseDown(e) {\n\n  e.preventDefault();\n\n\n  state.isDragging =\n    true;\n\n\n  state.startX =\n    e.clientX;\n\n\n  state.lastMouseX =\n    e.clientX;\n\n\n  state.lastX =\n    state.targetX;\n\n\n  state.dragDistance =\n    0;\n\n\n  state.hasActuallyDragged =\n    false;\n\n\n  state.lastScrollTime =\n    Date.now();\n\n}\n\n\nfunction handleMouseMove(e) {\n\n  if (!state.isDragging) {\n    return;\n  }\n\n\n  e.preventDefault();\n\n\n  const deltaX =\n    (\n      e.clientX -\n      state.lastMouseX\n    ) *\n    2;\n\n\n  state.targetX +=\n    deltaX;\n\n\n  state.lastMouseX =\n    e.clientX;\n\n\n  state.dragDistance +=\n    Math.abs(\n      deltaX\n    );\n\n\n  if (\n    state.dragDistance >\n    5\n  ) {\n\n    state.hasActuallyDragged =\n      true;\n\n  }\n\n\n  state.lastScrollTime =\n    Date.now();\n\n}\n\n\nfunction handleMouseUp() {\n\n  state.isDragging =\n    false;\n\n\n  setTimeout(\n    () => {\n\n      state.hasActuallyDragged =\n        false;\n\n      state.dragDistance =\n        0;\n\n    },\n    100\n  );\n\n}\n\n\nfunction navigateSlides(direction) {\n\n  state.lastScrollTime =\n    Date.now();\n\n\n  const snappedX =\n    Math.round(\n      state.targetX \/\n      state.slideWidth\n    ) *\n    state.slideWidth;\n\n\n  state.targetX =\n    snappedX +\n    state.slideWidth *\n    direction;\n\n}\n\n\nfunction handleResize() {\n\n  initializeSlides();\n\n}\n\n\nfunction initializeEventListeners() {\n\n  const slider =\n    document.querySelector(\n      \".slider\"\n    );\n\n\n  if (!slider) {\n    return;\n  }\n\n\n  \/\/ Alleen een echte sleepbeweging mag een linkklik blokkeren.\n  \/\/ Gewone klikken volgen de native href, ook bij ctrl\/cmd-click.\n  slider.addEventListener(\n    \"click\",\n    (e) => {\n      const clickedSlide = e.target.closest(\"a.slide\");\n      if (!clickedSlide) return;\n\n      if (state.hasActuallyDragged || state.dragDistance >= 6) {\n        e.preventDefault();\n      }\n    },\n    false\n  );\n\n\n  slider.addEventListener(\n    \"wheel\",\n    handleWheel,\n    {\n      passive: false\n    }\n  );\n\n\n  slider.addEventListener(\n    \"touchstart\",\n    handleTouchStart,\n    {\n      passive: true\n    }\n  );\n\n\n  slider.addEventListener(\n    \"touchmove\",\n    handleTouchMove,\n    {\n      passive: false\n    }\n  );\n\n\n  slider.addEventListener(\n    \"touchend\",\n    handleTouchEnd\n  );\n\n\n  slider.addEventListener(\n    \"touchcancel\",\n    handleTouchEnd\n  );\n\n\n  const previousButton =\n    slider.querySelector(\n      \".slider-mobile-nav__button--prev\"\n    );\n\n  const nextButton =\n    slider.querySelector(\n      \".slider-mobile-nav__button--next\"\n    );\n\n\n  previousButton?.addEventListener(\n    \"click\",\n    (e) => {\n\n      e.preventDefault();\n      e.stopPropagation();\n\n      navigateSlides(1);\n\n    }\n  );\n\n\n  nextButton?.addEventListener(\n    \"click\",\n    (e) => {\n\n      e.preventDefault();\n      e.stopPropagation();\n\n      navigateSlides(-1);\n\n    }\n  );\n\n\n  slider.addEventListener(\n    \"mousedown\",\n    handleMouseDown\n  );\n\n\n  slider.addEventListener(\n    \"mouseleave\",\n    handleMouseUp\n  );\n\n\n  slider.addEventListener(\n    \"dragstart\",\n    (e) => {\n\n      e.preventDefault();\n\n    }\n  );\n\n\n  document.addEventListener(\n    \"mousemove\",\n    handleMouseMove\n  );\n\n\n  document.addEventListener(\n    \"mouseup\",\n    handleMouseUp\n  );\n\n\n  window.addEventListener(\n    \"resize\",\n    handleResize\n  );\n\n}\n\n\nfunction initializeSlider() {\n\n  initializeSlides();\n\n  initializeEventListeners();\n\n  animate();\n\n}\n\n\nif (\n  document.readyState ===\n  \"loading\"\n) {\n\n  document.addEventListener(\n    \"DOMContentLoaded\",\n    initializeSlider\n  );\n\n}\n\nelse {\n\n  initializeSlider();\n\n}\n\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-2181145b layoutID-full e-flex layoutID e-parent\" data-id=\"2181145b\" data-dynamic_type=\"container\">\n\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-29175b25 layoutID-full e-flex layoutID e-child\" data-id=\"29175b25\" data-dynamic_type=\"container\">\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-54327b1c data-eoa-data-hxm__width-initial data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"54327b1c\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t\r\n<h1 class=\"s-xxl splitword l3\">Your perfect workplace arranged in a few clicks<\/h1>\r\n\r\n\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-2df15770 layoutID-full e-flex layoutID e-parent\" data-id=\"2df15770\" data-dynamic_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-72090379 data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"72090379\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t\r\n\r\n<style>\r\n.cooffice-splitfeature {\r\n  --cooffice-split-text: #131313;\r\n  --cooffice-split-muted: #131313b3;\r\n\r\n  width: 100%;\r\n  position: relative;\r\n}\r\n\r\n.cooffice-splitfeature__sticky {\r\n  width: 100%;\r\n  height: 100vh;\r\n  min-height: 100vh;\r\n\r\n  position: relative;\r\n\r\n  overflow: hidden;\r\n}\r\n\r\n.cooffice-splitfeature__container {\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  display: flex;\r\n  align-items: stretch;\r\n\r\n  position: relative;\r\n}\r\n\r\n.cooffice-splitfeature__media-col,\r\n.cooffice-splitfeature__content-col {\r\n  width: 50%;\r\n  height: 100%;\r\n\r\n  flex: 0 0 50%;\r\n\r\n  position: relative;\r\n}\r\n\r\n.cooffice-splitfeature__media-col {\r\n  overflow: hidden;\r\n}\r\n\r\n.cooffice-splitfeature__media-collection,\r\n.cooffice-splitfeature__media-list {\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  position: relative;\r\n}\r\n\r\n.cooffice-splitfeature__media-item {\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  position: absolute;\r\n  inset: 0;\r\n\r\n  overflow: hidden;\r\n\r\n  -webkit-clip-path: inset(50%);\r\n  clip-path: inset(50%);\r\n}\r\n\r\n.cooffice-splitfeature__media-item:first-child {\r\n  -webkit-clip-path: inset(0%);\r\n  clip-path: inset(0%);\r\n}\r\n\r\n.cooffice-splitfeature__image {\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  display: block;\r\n\r\n  object-fit: cover;\r\n  object-position: center center;\r\n}\r\n\r\n.cooffice-splitfeature__progress {\r\n  width: calc(100% - 4rem);\r\n  height: 2px;\r\n\r\n  position: absolute;\r\n\r\n  left: 2rem;\r\n  bottom: 2rem;\r\n\r\n  z-index: 10;\r\n\r\n  overflow: hidden;\r\n\r\n  background: rgba(255, 255, 255, 0.35);\r\n}\r\n\r\n.cooffice-splitfeature__progress-bar {\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  background: #fff;\r\n\r\n  transform: scaleX(0);\r\n  transform-origin: left center;\r\n}\r\n\r\n.cooffice-splitfeature__content-col {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  padding: clamp(3rem, 5vw, 7rem);\r\n\r\n  background: #fff;\r\n}\r\n\r\n.cooffice-splitfeature__content-collection {\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  position: relative;\r\n}\r\n\r\n.cooffice-splitfeature__content-list {\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  position: relative;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n}\r\n\r\n.cooffice-splitfeature__content-item {\r\n  width: 100%;\r\n  max-width: 650px;\r\n\r\n  position: absolute;\r\n\r\n  left: 0;\r\n\r\n  visibility: hidden;\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  align-items: flex-start;\r\n}\r\n\r\n.cooffice-splitfeature__content-item:first-child {\r\n  visibility: visible;\r\n}\r\n\r\n.cooffice-splitfeature__number {\r\n  width: 2.4rem;\r\n  height: 2.4rem;\r\n\r\n  margin-bottom: 2rem;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  border-radius: 100%;\r\n\r\n  background: #131313;\r\n  color: #fff;\r\n\r\n  font-family: var(--fontuse, Arial, sans-serif);\r\n\r\n  font-size: 0.85rem;\r\n  font-weight: 400;\r\n\r\n  line-height: 1;\r\n}\r\n\r\n.cooffice-splitfeature__heading {\r\n  margin: 0 0 2rem 0;\r\n\r\n  color: var(--cooffice-split-text);\r\n\r\n  font-family: \"minion-3\", serif;\r\n\r\n  font-size: clamp(4rem, 5vw, 6.5rem);\r\n  font-weight: 400;\r\n\r\n  letter-spacing: -0.04em;\r\n\r\n  line-height: 0.92;\r\n}\r\n\r\n.cooffice-splitfeature__description {\r\n  width: 100%;\r\n  max-width: 520px;\r\n\r\n  margin: 0;\r\n\r\n  color: var(--cooffice-split-muted);\r\n\r\n  font-family: var(--fontuse, Arial, sans-serif);\r\n\r\n  font-size: var(--font-large, 1.2rem);\r\n  font-weight: 400;\r\n\r\n  line-height: 1.45;\r\n}\r\n\r\n@media screen and (max-width: 991px) {\r\n\r\n  .cooffice-splitfeature__sticky {\r\n    height: auto;\r\n    min-height: 100svh;\r\n\r\n    overflow: visible;\r\n  }\r\n\r\n  .cooffice-splitfeature__container {\r\n    height: auto;\r\n    min-height: 100svh;\r\n\r\n    flex-direction: column;\r\n  }\r\n\r\n  .cooffice-splitfeature__media-col,\r\n  .cooffice-splitfeature__content-col {\r\n    width: 100%;\r\n\r\n    flex: none;\r\n  }\r\n\r\n  .cooffice-splitfeature__media-col {\r\n    height: 55svh;\r\n    min-height: 420px;\r\n  }\r\n\r\n  .cooffice-splitfeature__content-col {\r\n    height: auto;\r\n    min-height: 420px;\r\n\r\n    padding: 3rem 1.5rem;\r\n  }\r\n\r\n  .cooffice-splitfeature__content-collection,\r\n  .cooffice-splitfeature__content-list {\r\n    min-height: 360px;\r\n  }\r\n\r\n  .cooffice-splitfeature__content-item {\r\n    max-width: none;\r\n  }\r\n\r\n  .cooffice-splitfeature__heading {\r\n    font-size: clamp(3.5rem, 10vw, 6rem);\r\n  }\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n\r\n  .cooffice-splitfeature__media-col {\r\n    height: 50svh;\r\n    min-height: 340px;\r\n  }\r\n\r\n  .cooffice-splitfeature__content-col {\r\n    min-height: 380px;\r\n\r\n    padding: 2.5rem 1rem 3rem;\r\n  }\r\n\r\n  .cooffice-splitfeature__content-collection,\r\n  .cooffice-splitfeature__content-list {\r\n    min-height: 320px;\r\n  }\r\n\r\n  .cooffice-splitfeature__number {\r\n    width: 2rem;\r\n    height: 2rem;\r\n\r\n    margin-bottom: 1.5rem;\r\n\r\n    font-size: 0.75rem;\r\n  }\r\n\r\n  .cooffice-splitfeature__heading {\r\n    margin-bottom: 1.5rem;\r\n\r\n    font-size: clamp(3rem, 13vw, 4.5rem);\r\n  }\r\n\r\n  .cooffice-splitfeature__description {\r\n    font-size: 1rem;\r\n\r\n    line-height: 1.45;\r\n  }\r\n\r\n  .cooffice-splitfeature__progress {\r\n    width: calc(100% - 2rem);\r\n\r\n    left: 1rem;\r\n    bottom: 1rem;\r\n  }\r\n}\r\n<\/style>\r\n\r\n\r\n<section\r\n  class=\"cooffice-splitfeature\"\r\n  data-cooffice-splitfeature\r\n>\r\n\r\n  <div class=\"cooffice-splitfeature__sticky\">\r\n\r\n    <div class=\"cooffice-splitfeature__container\">\r\n\r\n      <div class=\"cooffice-splitfeature__media-col\">\r\n\r\n        <div class=\"cooffice-splitfeature__media-collection\">\r\n\r\n          <div class=\"cooffice-splitfeature__media-list\">\r\n\r\n            <div\r\n              class=\"cooffice-splitfeature__media-item\"\r\n              data-cooffice-splitfeature-visual\r\n>\r\n              <img decoding=\"async\"\r\n                src=\"\/media\/2025\/02\/contact-opnemendata78743344.webp\"\r\n                loading=\"lazy\"\r\n                alt=\"Private office\"\r\n                class=\"cooffice-splitfeature__image\"\r\n              >\r\n            <\/div>\r\n\r\n            <div\r\n              class=\"cooffice-splitfeature__media-item\"\r\n              data-cooffice-splitfeature-visual\r\n>\r\n              <img decoding=\"async\"\r\n                src=\"\/media\/2024\/07\/rondleidingdata787433.jpg\"\r\n                loading=\"lazy\"\r\n                alt=\"Meeting space\"\r\n                class=\"cooffice-splitfeature__image\"\r\n              >\r\n            <\/div>\r\n\r\n            <div\r\n              class=\"cooffice-splitfeature__media-item\"\r\n              data-cooffice-splitfeature-visual\r\n>\r\n              <img decoding=\"async\"\r\n                src=\"\/media\/2024\/07\/startendata1787433.jpg\"\r\n                loading=\"lazy\"\r\n                alt=\"Co-working\"\r\n                class=\"cooffice-splitfeature__image\"\r\n              >\r\n            <\/div>\r\n\r\n            <div\r\n              class=\"cooffice-splitfeature__media-item\"\r\n              data-cooffice-splitfeature-visual\r\n>\r\n              <img decoding=\"async\"\r\n                src=\"\/media\/2025\/02\/connectiesdata787433644.webp\"\r\n                loading=\"lazy\"\r\n                alt=\"Virtual office\"\r\n                class=\"cooffice-splitfeature__image\"\r\n              >\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"cooffice-splitfeature__progress\">\r\n          <div\r\n            class=\"cooffice-splitfeature__progress-bar\"\r\n            data-cooffice-splitfeature-progress\r\n><\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"cooffice-splitfeature__content-col\">\r\n\r\n        <div class=\"cooffice-splitfeature__content-collection\">\r\n\r\n          <div class=\"cooffice-splitfeature__content-list\">\r\n\r\n            <article\r\n              class=\"cooffice-splitfeature__content-item\"\r\n              data-cooffice-splitfeature-item\r\n>\r\n\r\n              <span\r\n                class=\"cooffice-splitfeature__number\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                01\r\n              <\/span>\r\n\r\n              <h2\r\n                class=\"cooffice-splitfeature__heading\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                Private office\r\n              <\/h2>\r\n\r\n              <p\r\n                class=\"cooffice-splitfeature__description\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                Find a private office that perfectly suits your team and the way you work. Co-Office helps you find the right office space in a location that fits your business, complete with everything you need to get started right away.\r\n              <\/p>\r\n\r\n            <\/article>\r\n\r\n\r\n            <article\r\n              class=\"cooffice-splitfeature__content-item\"\r\n              data-cooffice-splitfeature-item\r\n>\r\n\r\n              <span\r\n                class=\"cooffice-splitfeature__number\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                02\r\n              <\/span>\r\n\r\n              <h2\r\n                class=\"cooffice-splitfeature__heading\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                Meeting space\r\n              <\/h2>\r\n\r\n              <p\r\n                class=\"cooffice-splitfeature__description\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                Easily book a professional meeting room at one of our locations. Perfect for meetings, presentations or workshops, with everything you need for a productive session and real-time availability to help you find the right space.\r\n              <\/p>\r\n\r\n            <\/article>\r\n\r\n\r\n            <article\r\n              class=\"cooffice-splitfeature__content-item\"\r\n              data-cooffice-splitfeature-item\r\n>\r\n\r\n              <span\r\n                class=\"cooffice-splitfeature__number\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                03\r\n              <\/span>\r\n\r\n              <h2\r\n                class=\"cooffice-splitfeature__heading\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                Co-working\r\n              <\/h2>\r\n\r\n              <p\r\n                class=\"cooffice-splitfeature__description\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                Enjoy the freedom to work your way at HGT, Brug, Keynes or ADM. Our vibrant coworking spaces offer the perfect balance of focus, flexibility and connection, bringing ambitious professionals and teams together in a place where great ideas take shape.\r\n              <\/p>\r\n\r\n            <\/article>\r\n\r\n\r\n            <article\r\n              class=\"cooffice-splitfeature__content-item\"\r\n              data-cooffice-splitfeature-item\r\n>\r\n\r\n              <span\r\n                class=\"cooffice-splitfeature__number\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                04\r\n              <\/span>\r\n\r\n              <h2\r\n                class=\"cooffice-splitfeature__heading\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                Virtual office\r\n              <\/h2>\r\n\r\n              <p\r\n                class=\"cooffice-splitfeature__description\"\r\n                data-cooffice-splitfeature-text\r\n>\r\n                Give your business a professional address without the need for a physical office. Our virtual office solutions offer the flexibility to work from anywhere, with convenient mail handling, a range of business address options and a simple setup to get started right away.\r\n              <\/p>\r\n\r\n            <\/article>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n  if (\r\n    typeof gsap === \"undefined\" ||\r\n    typeof ScrollTrigger === \"undefined\"\r\n  ) {\r\n    return;\r\n  }\r\n\r\n  gsap.registerPlugin(ScrollTrigger);\r\n\r\n\r\n  function initCoofficeSplitFeatures(root = document) {\r\n\r\n    const sections = Array.from(\r\n      root.querySelectorAll(\"[data-cooffice-splitfeature]\")\r\n    );\r\n\r\n    if (!sections.length) return;\r\n\r\n\r\n    sections.forEach((section) => {\r\n\r\n      if (\r\n        section.dataset.coofficeSplitfeatureInitialized === \"true\"\r\n      ) {\r\n        return;\r\n      }\r\n\r\n      section.dataset.coofficeSplitfeatureInitialized = \"true\";\r\n\r\n\r\n      const visuals = Array.from(\r\n        section.querySelectorAll(\r\n          \"[data-cooffice-splitfeature-visual]\"\r\n        )\r\n      );\r\n\r\n      const items = Array.from(\r\n        section.querySelectorAll(\r\n          \"[data-cooffice-splitfeature-item]\"\r\n        )\r\n      );\r\n\r\n      const progressBar = section.querySelector(\r\n        \"[data-cooffice-splitfeature-progress]\"\r\n      );\r\n\r\n\r\n      const count = Math.min(\r\n        visuals.length,\r\n        items.length\r\n      );\r\n\r\n      if (!count) return;\r\n\r\n\r\n      const reduceMotion = window.matchMedia(\r\n        \"(prefers-reduced-motion: reduce)\"\r\n      ).matches;\r\n\r\n\r\n      const DURATION = reduceMotion ? 0.01 : 0.8;\r\n\r\n      const EASE = \"power4.inOut\";\r\n\r\n      const READING_BAND = 0.9;\r\n\r\n\r\n      const getTexts = (dynamic) => {\r\n        return Array.from(\r\n          dynamic.querySelectorAll(\r\n            \"[data-cooffice-splitfeature-text]\"\r\n          )\r\n        );\r\n      };\r\n\r\n\r\n      visuals.forEach((visual, index) => {\r\n\r\n        gsap.set(visual, {\r\n          clipPath:\r\n            index === 0\r\n              ? \"inset(0%)\"\r\n              : \"inset(50%)\"\r\n        });\r\n\r\n      });\r\n\r\n\r\n      items.forEach((item, index) => {\r\n\r\n        gsap.set(item, {\r\n          autoAlpha: index === 0 ? 1 : 0\r\n        });\r\n\r\n\r\n        if (index !== 0) {\r\n\r\n          gsap.set(\r\n            getTexts(item),\r\n            {\r\n              autoAlpha: 0,\r\n              y: 30\r\n            }\r\n          );\r\n\r\n        }\r\n\r\n      });\r\n\r\n\r\n      let currentIndex = 0;\r\n\r\n\r\n      function animateOut(item) {\r\n\r\n        const texts = getTexts(item);\r\n\r\n        gsap.killTweensOf(texts);\r\n        gsap.killTweensOf(item);\r\n\r\n\r\n        gsap.to(texts, {\r\n\r\n          autoAlpha: 0,\r\n\r\n          y: -30,\r\n\r\n          duration:\r\n            reduceMotion\r\n              ? 0.01\r\n              : 0.4,\r\n\r\n          ease: \"power4.out\",\r\n\r\n          stagger: 0.03,\r\n\r\n          overwrite: true,\r\n\r\n          onComplete: () => {\r\n\r\n            gsap.set(item, {\r\n              autoAlpha: 0\r\n            });\r\n\r\n          }\r\n\r\n        });\r\n\r\n      }\r\n\r\n\r\n      function animateIn(item) {\r\n\r\n        const texts = getTexts(item);\r\n\r\n\r\n        gsap.killTweensOf(texts);\r\n        gsap.killTweensOf(item);\r\n\r\n\r\n        gsap.set(item, {\r\n          autoAlpha: 1\r\n        });\r\n\r\n\r\n        gsap.fromTo(\r\n\r\n          texts,\r\n\r\n          {\r\n            autoAlpha: 0,\r\n            y: 30\r\n          },\r\n\r\n          {\r\n            autoAlpha: 1,\r\n\r\n            y: 0,\r\n\r\n            duration: DURATION,\r\n\r\n            ease: \"power4.out\",\r\n\r\n            stagger:\r\n              reduceMotion\r\n                ? 0\r\n                : 0.08,\r\n\r\n            overwrite: true\r\n          }\r\n\r\n        );\r\n\r\n      }\r\n\r\n\r\n      function transition(fromIndex, toIndex) {\r\n\r\n        if (fromIndex === toIndex) return;\r\n\r\n\r\n        const timeline = gsap.timeline({\r\n\r\n          defaults: {\r\n            overwrite: true\r\n          }\r\n\r\n        });\r\n\r\n\r\n        if (fromIndex < toIndex) {\r\n\r\n          timeline.to(\r\n\r\n            visuals[toIndex],\r\n\r\n            {\r\n              clipPath: \"inset(0%)\",\r\n\r\n              duration: DURATION,\r\n\r\n              ease: EASE\r\n            },\r\n\r\n            0\r\n\r\n          );\r\n\r\n        } else {\r\n\r\n          timeline.to(\r\n\r\n            visuals[fromIndex],\r\n\r\n            {\r\n              clipPath: \"inset(50%)\",\r\n\r\n              duration: DURATION,\r\n\r\n              ease: EASE\r\n            },\r\n\r\n            0\r\n\r\n          );\r\n\r\n        }\r\n\r\n\r\n        animateOut(\r\n          items[fromIndex]\r\n        );\r\n\r\n        animateIn(\r\n          items[toIndex]\r\n        );\r\n\r\n      }\r\n\r\n\r\n      const steps = Math.max(\r\n        1,\r\n        count - 1\r\n      );\r\n\r\n\r\n      ScrollTrigger.create({\r\n\r\n        trigger: section,\r\n\r\n        start: \"top top\",\r\n\r\n        end: () => {\r\n          return `+=${steps * 100}%`;\r\n        },\r\n\r\n        pin: section.querySelector(\r\n          \".cooffice-splitfeature__sticky\"\r\n        ),\r\n\r\n        scrub: true,\r\n\r\n        anticipatePin: 1,\r\n\r\n        invalidateOnRefresh: true,\r\n\r\n\r\n        onUpdate(self) {\r\n\r\n          const normalizedProgress =\r\n\r\n            Math.min(\r\n              self.progress,\r\n              READING_BAND\r\n            ) \/ READING_BAND;\r\n\r\n\r\n          let index = Math.floor(\r\n\r\n            normalizedProgress * steps\r\n\r\n            + 0.000001\r\n\r\n          );\r\n\r\n\r\n          index = Math.max(\r\n\r\n            0,\r\n\r\n            Math.min(\r\n              steps,\r\n              index\r\n            )\r\n\r\n          );\r\n\r\n\r\n          if (progressBar) {\r\n\r\n            gsap.set(\r\n              progressBar,\r\n              {\r\n                scaleX:\r\n                  normalizedProgress,\r\n\r\n                transformOrigin:\r\n                  \"left center\"\r\n              }\r\n            );\r\n\r\n          }\r\n\r\n\r\n          if (index !== currentIndex) {\r\n\r\n            transition(\r\n              currentIndex,\r\n              index\r\n            );\r\n\r\n            currentIndex = index;\r\n\r\n          }\r\n\r\n        }\r\n\r\n      });\r\n\r\n    });\r\n\r\n\r\n    ScrollTrigger.refresh();\r\n\r\n  }\r\n\r\n\r\n  function startCoofficeSplitFeatures() {\r\n\r\n    initCoofficeSplitFeatures();\r\n\r\n  }\r\n\r\n\r\n  if (\r\n    document.readyState === \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      startCoofficeSplitFeatures\r\n    );\r\n\r\n  } else {\r\n\r\n    startCoofficeSplitFeatures();\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-13d0a273 layoutID-full e-flex layoutID e-parent\" data-id=\"13d0a273\" data-dynamic_type=\"container\">\n\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-197dc8b5 layoutID-full e-flex layoutID e-child\" data-id=\"197dc8b5\" data-dynamic_type=\"container\">\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-6820b902 data-eoa-data-hxm__width-initial data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"6820b902\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t\r\n<h1 class=\"s-xxl splitword l3\">What inspiring entrepreneurs say<\/h1>\r\n\r\n\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-2cadb03c layoutID-full e-flex layoutID e-parent\" data-id=\"2cadb03c\" data-dynamic_type=\"container\">\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-32f12f85 data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"32f12f85\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t<style>\n.section-resource {\n    display: flex;\n    flex-flow: column;\n    justify-content: center;\n    align-items: center;\n    min-height: 100vh;\n}\n\n.marquee-advanced {\n    width: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.marquee-advanced__scroll,\n.marquee-advanced__collection {\n    display: flex;\n    position: relative;\n    will-change: transform;\n}\n\n.marquee-advanced__scroll {\n    width: 100%;\n}\n\n.marquee-advanced__collection {\n    flex-shrink: 0;\n}\n\n.marquee-advanced__item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    font-size: max(4em, 8vw);\n}\n\n.marquee__advanced__p {\n    white-space: nowrap;\n    margin: 0 0 0 .25em;\n    font-size: 1rem;\n    letter-spacing: -.06em;\n    color: var(--secondary);\n}\n\n.marquee__advanced__arrow-svg {\n    color: #ff4c24;\n    width: 1em;\n    margin-right: .25em;\n    position: relative;\n}\n\n.marquee-advanced__item-width {\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    align-items: flex-start;\n    width: 32rem;\n    height: 20rem;\n    margin: 1vw 2rem;\n    padding: 3rem;\n    background-color: #f4f2ed;\n    border-radius: 2vh;\n}\n\n.review-item {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-width: 0;\n    height: 100%;\n}\n\n.review-text {\n    margin: 0;\n    font-size: 1.1rem;\n    line-height: 1.4rem;\n    letter-spacing: .01em;\n    color: var(--seqdark);\n    overflow-wrap: break-word;\n}\n\n.reviewer-name {\n    font-family: 'PPNeueMontreal-Medium';\n    font-size: 1.1rem;\n    font-weight: 400;\n    letter-spacing: -.02em;\n    color: var(--seqdark);\n    margin-top: auto;\n    padding-top: 1.5rem;\n}\n\n.reviewer-title {\n    font-size: 1rem;\n    line-height: 1.35;\n    color: var(--seqdark);\n    opacity: .5;\n}\n\n.marquee__advanced__arrow-svg,\n[data-marquee-direction=\"right\"][data-marquee-status=\"inverted\"] .marquee__advanced__arrow-svg {\n    transition: .5s cubic-bezier(.625, .05, 0, 1);\n    transform: rotate(-180deg);\n}\n\n[data-marquee-status=\"inverted\"] .marquee__advanced__arrow-svg,\n[data-marquee-direction=\"right\"][data-marquee-status=\"normal\"] .marquee__advanced__arrow-svg {\n    transform: rotate(-359.999deg);\n}\n\n@media screen and (max-width: 990px) {\n    .marquee-advanced__item-width {\n        width: 22rem;\n        height: 21rem;\n        margin: 1vw 1.25rem;\n        padding: 1.7rem;\n    }\n\n    .review-text {\n        font-size: 1rem;\n        line-height: 1.4;\n    }\n}\n\n@media screen and (max-width: 600px) {\n    .marquee-advanced__item-width {\n        box-sizing: border-box;\n        width: min(84vw, 340px);\n        height: 26rem;\n        margin: .5rem .6rem;\n        padding: 1.5rem;\n        border-radius: 14px;\n    }\n\n    .review-text {\n        font-size: .98rem;\n        line-height: 1.4;\n    }\n\n    .reviewer-name {\n        font-size: 1rem;\n        padding-top: 1rem;\n    }\n\n    .reviewer-title {\n        font-size: .9rem;\n    }\n}\n\n@media screen and (max-width: 360px) {\n    .marquee-advanced__item-width {\n        width: 88vw;\n        height: 29rem;\n        padding: 1.25rem;\n    }\n}\n<\/style>\n\n<section class=\"section-resource-extra\">\n<div data-marquee-duplicate=\"2\" data-marquee-scroll-direction-target=\"\" data-marquee-direction=\"right\" data-marquee-status=\"normal\" data-marquee-speed=\"22\" data-marquee-scroll-speed=\"40\" class=\"marquee-advanced\">\n<div data-marquee-scroll-target=\"\" class=\"marquee-advanced__scroll\" style=\"margin-left: -10%; width: 120%;\">\n<div data-marquee-collection-target=\"\" class=\"marquee-advanced__collection\">\n\n\n\n\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"We chose Co-Office because of its prime location and modern furnished offices with all the conveniences. In addition, Co-Office provides excellent service and regularly organizes events with other tenants. This makes it the ideal home base for us!\"<\/p> <div class=\"reviewer-name\">Daan Zandbergen<\/div>\n  <div class=\"reviewer-title\">Partner - Transition Corporate Finance<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"An inspiring environment where you can work nicely in freedom. Good service and very friendly and helpful crew. They think about everything and nothing is too crazy!\"<\/p>  <div class=\"reviewer-name\">Dennis Nuijens<\/div>\n  <div class=\"reviewer-title\">Director - Cqure Consulting<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"Co-Office is excellent, always clean and tidy, with great views. The staff is friendly and solves problems quickly. A nice extra: free fruit for a healthy workday boost!\"<\/p> <div class=\"reviewer-name\">Isabella Roos<\/div>\n  <div class=\"reviewer-title\">Lawyer - Law Office Roos<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"The combination of reliability and creativity at Co-Office makes renting an office space a very pleasant experience. The support is fantastic.\"<\/p> <div class=\"reviewer-name\">Nick Brandts<\/div>\n  <div class=\"reviewer-title\">Director - Flowlined<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"Co-Office is perfect for Altix. Beautiful offices, nice and customer-oriented guests who drive it and flexibility to grow as a growth company without having to change locations every time.\"<\/p> <div class=\"reviewer-name\">Tom Boersma<\/div>\n  <div class=\"reviewer-title\">Co-founder - Altix<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"For two years now, my manufacturing company has been located in the Bridge Building at Co-Office. The spaces are well equipped, which helps us work efficiently for our future. The contact with other companies and Co-Office is pleasant, so everyone enjoys coming to the office.\"<\/p>  <div class=\"reviewer-name\">Marijke Castelijns<\/div>\n  <div class=\"reviewer-title\">Owner - The Production Team<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"We chose Co-Office because of its prime location and modern furnished offices with all the conveniences. In addition, Co-Office provides excellent service and regularly organizes events with other tenants. This makes it the ideal home base for us!\"<\/p> <div class=\"reviewer-name\">Daan Zandbergen<\/div>\n  <div class=\"reviewer-title\">Partner - Transition Corporate Finance<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"An inspiring environment where you can work nicely in freedom. Good service and very friendly and helpful crew. They think about everything and nothing is too crazy!\"<\/p>  <div class=\"reviewer-name\">Dennis Nuijens<\/div>\n  <div class=\"reviewer-title\">Director - Cqure Consulting<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"Co-Office is excellent, always clean and tidy, with great views. The staff is friendly and solves problems quickly. A nice extra: free fruit for a healthy workday boost!\"<\/p> <div class=\"reviewer-name\">Isabella Roos<\/div>\n  <div class=\"reviewer-title\">Lawyer - Law Office Roos<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"The combination of reliability and creativity at Co-Office makes renting an office space a very pleasant experience. The support is fantastic.\"<\/p> <div class=\"reviewer-name\">Nick Brandts<\/div>\n  <div class=\"reviewer-title\">Director - Flowlined<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"Co-Office is perfect for Altix. Beautiful offices, nice and customer-oriented guests who drive it and flexibility to grow as a growth company without having to change locations every time.\"<\/p> <div class=\"reviewer-name\">Tom Boersma<\/div>\n  <div class=\"reviewer-title\">Co-founder - Altix<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"For two years now, my manufacturing company has been located in the Bridge Building at Co-Office. The spaces are well equipped, which helps us work efficiently for our future. The contact with other companies and Co-Office is pleasant, so everyone enjoys coming to the office.\"<\/p>  <div class=\"reviewer-name\">Marijke Castelijns<\/div>\n  <div class=\"reviewer-title\">Owner - The Production Team<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"We chose Co-Office because of its prime location and modern furnished offices with all the conveniences. In addition, Co-Office provides excellent service and regularly organizes events with other tenants. This makes it the ideal home base for us!\"<\/p> <div class=\"reviewer-name\">Daan Zandbergen<\/div>\n  <div class=\"reviewer-title\">Partner - Transition Corporate Finance<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"An inspiring environment where you can work nicely in freedom. Good service and very friendly and helpful crew. They think about everything and nothing is too crazy!\"<\/p>  <div class=\"reviewer-name\">Dennis Nuijens<\/div>\n  <div class=\"reviewer-title\">Director - Cqure Consulting<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"Co-Office is excellent, always clean and tidy, with great views. The staff is friendly and solves problems quickly. A nice extra: free fruit for a healthy workday boost!\"<\/p> <div class=\"reviewer-name\">Isabella Roos<\/div>\n  <div class=\"reviewer-title\">Lawyer - Law Office Roos<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"The combination of reliability and creativity at Co-Office makes renting an office space a very pleasant experience. The support is fantastic.\"<\/p> <div class=\"reviewer-name\">Nick Brandts<\/div>\n  <div class=\"reviewer-title\">Director - Flowlined<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"Co-Office is perfect for Altix. Beautiful offices, nice and customer-oriented guests who drive it and flexibility to grow as a growth company without having to change locations every time.\"<\/p> <div class=\"reviewer-name\">Tom Boersma<\/div>\n  <div class=\"reviewer-title\">Co-founder - Altix<\/div>\n<\/div>\n<\/div>\n<div class=\"marquee-advanced__item-width\">\n<div class=\"review-item\">\n\n  <p class=\"review-text\">\"For two years now, my manufacturing company has been located in the Bridge Building at Co-Office. The spaces are well equipped, which helps us work efficiently for our future. The contact with other companies and Co-Office is pleasant, so everyone enjoys coming to the office.\"<\/p>  <div class=\"reviewer-name\">Marijke Castelijns<\/div>\n  <div class=\"reviewer-title\">Owner - The Production Team<\/div>\n<\/div>\n<\/div>\n\n\n\n\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n\n<script>\nfunction initMarqueeScrollDirection() {\ndocument.querySelectorAll('[data-marquee-scroll-direction-target]').forEach((marquee) => {\n\nconst marqueeContent = marquee.querySelector('[data-marquee-collection-target]');\nconst marqueeScroll = marquee.querySelector('[data-marquee-scroll-target]');\nif (!marqueeContent || !marqueeScroll) return;\n\nconst { marqueeSpeed: speed, marqueeDirection: direction, marqueeDuplicate: duplicate, marqueeScrollSpeed: scrollSpeed } = marquee.dataset;\n\nconst marqueeSpeedAttr = parseFloat(speed);\nconst marqueeDirectionAttr = direction === 'right' ? 1 : -1; \nconst duplicateAmount = parseInt(duplicate || 0);\nconst scrollSpeedAttr = parseFloat(scrollSpeed);\nconst speedMultiplier = window.innerWidth < 479 ? 0.25 : window.innerWidth < 991 ? 0.5 : 1;\n\nlet marqueeSpeed = marqueeSpeedAttr * (marqueeContent.offsetWidth \/ window.innerWidth) * speedMultiplier;\n\nmarqueeScroll.style.marginLeft = `${scrollSpeedAttr * -1}%`;\nmarqueeScroll.style.width = `${(scrollSpeedAttr * 2) + 100}%`;\n\nif (duplicateAmount > 0) {\nconst fragment = document.createDocumentFragment();\nfor (let i = 0; i < duplicateAmount; i++) {\nfragment.appendChild(marqueeContent.cloneNode(true));\n}\nmarqueeScroll.appendChild(fragment);\n}\n\nconst marqueeItems = marquee.querySelectorAll('[data-marquee-collection-target]');\nconst animation = gsap.to(marqueeItems, {\nxPercent: -100, \nrepeat: -1,\nduration: marqueeSpeed,\nease: 'linear'\n}).totalProgress(0.1);\n\ngsap.set(marqueeItems, { xPercent: marqueeDirectionAttr === 1 ? 100 : -100 });\nanimation.timeScale(marqueeDirectionAttr); \nanimation.play(); \n\nmarquee.setAttribute('data-marquee-status', 'normal');\n\nScrollTrigger.create({\ntrigger: marquee,\nstart: 'top bottom',\nend: 'bottom top',\nonUpdate: (self) => {\nconst isInverted = self.direction === 1; \nconst currentDirection = isInverted ? -marqueeDirectionAttr : marqueeDirectionAttr;\n\nanimation.timeScale(currentDirection);\nmarquee.setAttribute('data-marquee-status', isInverted ? 'normal' : 'inverted');\n}\n});\n\nconst tl = gsap.timeline({\nscrollTrigger: {\ntrigger: marquee,\nstart: '0% 100%',\nend: '100% 0%',\nscrub: 0\n}\n});\n\nconst scrollStart = marqueeDirectionAttr === -1 ? scrollSpeedAttr : -scrollSpeedAttr;\nconst scrollEnd = -scrollStart;\n\ntl.fromTo(marqueeScroll, { x: `${scrollStart}vw` }, { x: `${scrollEnd}vw`, ease: 'none' });\n});\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\ninitMarqueeScrollDirection();\n});\n<\/script>\n<script src=\"\/attributes\/js\/swiper.js\"><\/script>\n<script type=\"text\/javascript\" src=\"\/attributes\/js\/app.js\" id=\"scripts-js\"><\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-35aa7875 layoutID-full e-flex layoutID e-parent\" data-id=\"35aa7875\" data-dynamic_type=\"container\">\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-3faae24 data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"3faae24\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t<style>\n    img.outer-cooffice-profile{\n        width:70px;\n        height:auto;\n        border-radius:50px;\n    }\n     img.inner-cooffice-profile{\n        width:100px;\n        border-radius:50px;\n        border:7px solid #ffffff;\n                height:auto;\n                z-index: 9;\n                margin: -10px\n\n    }\n  .section-team {\n    display: flex\n;\n    width: auto;\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    align-items: center;\n}\n\n\n\n<\/style>\n<div class=\"section-team\">\n<img decoding=\"async\" src=\"\/assets\/profile-8.png\" class=\"outer-cooffice-profile growco\">\n<img decoding=\"async\" src=\"\/assets\/profile-7.png\" class=\"inner-cooffice-profile growco\">\n<img decoding=\"async\" src=\"\/media\/2024\/11\/michielv2.jpg\" class=\"inner-cooffice-profile growco\">\n<img decoding=\"async\" src=\"\/media\/2025\/02\/francescav2.jpg\" class=\"outer-cooffice-profile growco\">\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-6453781e data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"6453781e\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t\r\n<h1 class=\"h1-s splitter l5 dark\">Cup of coffee?<\/h1>\r\n\r\n\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-6d051748 data-eoa-data-hxm__width-initial data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"6d051748\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t\r\n<p class=\"s-m  l3 dark center\">Want to know if Co-Office has a suitable space available for your business? <br>Schedule a tour and discover the possibilities!<\/p>\r\n\r\n\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-5de3bee0 data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"5de3bee0\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t<a href=\"https:\/\/tour.co-office.nl\/\" class=\"buttn-icon-link w-inline-block fadin\" aria-label=\"Book a tour\" target=\"_blank\" rel=\"noopener\">\n  <div class=\"buttn-icon-content__mask\">\n    <span\n      data-button-anim-target=\"\"\n      class=\"buttn-icon-content__text dark\"\n    >\n      Book a tour\n    <\/span>\n  <\/div>\n\n  <div data-icon-size=\"normal\" class=\"buttn-icon-icon accent\">\n    <div\n      data-button-anim-target=\"\"\n      class=\"buttn-icon-icon__bg\"\n    ><\/div>\n\n    <div class=\"buttn-icon-icon__wrap color--white\">\n      <div class=\"buttn-icon-icon__list\">\n\n        <svg\n          xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n          width=\"100%\"\n          viewbox=\"0 0 10 8\"\n          fill=\"none\"\n          data-button-anim-target=\"\"\n          class=\"buttn-icon-icon__arrow\"\n        >\n          <path\n            d=\"M4.45231 0.385986H6.02531L9.30131 3.99999L6.02531 7.61399H4.45231L7.40331 4.58499H0.695312V3.42799H7.41631L4.45231 0.385986Z\"\n            fill=\"currentColor\"\n          ><\/path>\n        <\/svg>\n\n        <svg\n          xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n          width=\"100%\"\n          viewbox=\"0 0 10 8\"\n          fill=\"none\"\n          data-button-anim-target=\"\"\n          class=\"buttn-icon-icon__arrow\"\n        >\n          <path\n            d=\"M4.45231 0.385986H6.02531L9.30131 3.99999L6.02531 7.61399H4.45231L7.40331 4.58499H0.695312V3.42799H7.41631L4.45231 0.385986Z\"\n            fill=\"currentColor\"\n          ><\/path>\n        <\/svg>\n\n        <svg\n          xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n          width=\"100%\"\n          viewbox=\"0 0 10 8\"\n          fill=\"none\"\n          data-button-anim-target=\"\"\n          class=\"buttn-icon-icon__arrow\"\n        >\n          <path\n            d=\"M4.45231 0.385986H6.02531L9.30131 3.99999L6.02531 7.61399H4.45231L7.40331 4.58499H0.695312V3.42799H7.41631L4.45231 0.385986Z\"\n            fill=\"currentColor\"\n          ><\/path>\n        <\/svg>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/a>\n\n<style>\n  .yrX2N {\n    background-color: #fff;\n    max-width: 90% !important;\n  }\n<\/style>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-69db6d25 e-flex layoutID-boxed layoutID e-parent\" data-id=\"69db6d25\" data-dynamic_type=\"container\">\n\t\t\t\t\t<div class=\"layoutID-inner\">\n\t\t\t\t<div class=\"data-eoa-dynamic data-eoa-dynamic-27b0f897 data-eoa-data-hxm data-eoa-data-hxm-html\" data-id=\"27b0f897\" data-dynamic_type=\"data-hxm\" data-data-hxm_type=\"html.default\">\n\t\t\t\t<div class=\"data-eoa-data-hxm-container\">\n\t\t\t<script>\r\n    gsap.registerPlugin(ScrollTrigger, SplitText);\r\n\r\n    function createGlitchfadeAnimation(dynamic) {\r\n        if (dynamic.dataset.animated) return;\r\n        dynamic.dataset.animated = \"true\";\r\n\r\n        var mySplitText = new SplitText(dynamic, {type:\"chars, words\"}),\r\n            tl = gsap.timeline({\r\n                scrollTrigger: {\r\n                    trigger: dynamic,\r\n                    start: \"top 80%\", \r\n                    toggleActions: \"play none none reverse\",\r\n                },\r\n                defaults: {duration: 1.2, ease: \"power4.out\", delay: 0.1}\r\n            }),\r\n            numChars = mySplitText.chars.length;\r\n\r\n        var maxStartTime = 0.688 - 0.13;\r\n\r\n        for (var i = 0; i < numChars; i++) {\r\n            var randomStartTime = Math.random() * maxStartTime;\r\n            tl.from(mySplitText.chars[i], {opacity: 0}, randomStartTime);\r\n        }\r\n    }\r\n\r\n    function triggerGlitchfade(dynamics) {\r\n        dynamics.forEach(dynamic => {\r\n            gsap.set(dynamic, {visibility: \"visible\"});\r\n            createGlitchfadeAnimation(dynamic);\r\n        });\r\n    }\r\n\r\n    function createMainTitleAnimation(dynamic) {\r\n        if (dynamic.dataset.animated) return;\r\n        dynamic.dataset.animated = \"true\";\r\n\r\n        var tl = gsap.timeline();\r\n\r\n        var text = new SplitText(dynamic, { types: \"lines\", linesClass: \"lineChild\" });\r\n        var mask = new SplitText(dynamic, { types: \"lines\", linesClass: \"lineParent\" });\r\n\r\n        gsap.set(dynamic, { display: \"block\" });\r\n\r\n        ScrollTrigger.create({\r\n            animation: tl,\r\n            trigger: dynamic,\r\n            start: \"top 85%\", \r\n            end: \"bottom center\", \r\n            toggleActions: \"play none none reverse\"\r\n        });\r\n\r\n        tl.fromTo(text.lines, { y: 100 }, { y: 0, duration: 1.15, stagger: 0.1, ease:\"power4.inOut\" }, \"+=0\");\r\n    }\r\n\r\n    function triggerMainTitle(dynamics) {\r\n        dynamics.forEach(dynamic => {\r\n            createMainTitleAnimation(dynamic);\r\n        });\r\n    }\r\n\r\n    document.addEventListener('DOMContentLoaded', (event) => {\r\n        triggerGlitchfade(document.querySelectorAll('.glitchfade'));\r\n        triggerMainTitle(document.querySelectorAll('.maintitle'));\r\n    });\r\n\r\n\r\n    setTimeout(() => {\r\n        const newText = document.createElement('div');\r\n        newText.classList.add('text', 'glitchfade');\r\n        document.body.appendChild(newText);\r\n        triggerGlitchfade([newText]);\r\n    }, 2000);\r\n\r\n    setTimeout(() => {\r\n        const newTitle = document.createElement('div');\r\n        newTitle.classList.add('maintitle', 'hide');\r\n        document.body.appendChild(newTitle);\r\n        triggerMainTitle([newTitle]);\r\n    }, 4000);\r\n<\/script>\r\n\r\n\r\n\r\n\r\n\r\n   \r\n      <script src=\"https:\/\/d3e54v103j8qbb.cloudfront.net\/js\/jquery-3.5.1.min.dc5e7f18c8.js?site=66e5ec33a18f2697a1f774e5\" type=\"text\/javascript\" integrity=\"sha256-9\/aliU8dGd2tb6OSsuzixeV4y\/faTqgFtohetphbbj0=\" crossorigin=\"anonymous\"><\/script><script src=\"https:\/\/cdn.prod.website-files.com\/66e5ec33a18f2697a1f774e5\/js\/webflow.41ee80978.js\" type=\"text\/javascript\"><\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Een stijlvolle kantoorruimte met de luxe van een hotel Stap binnen in een kantoor waar elke ruimte inspireert. Waar gastvrijheid en persoonlijke aandacht voorop staan. Plan een rondleiding Adammium Direct aan A10 2 min van metro Sky lounge Valley Hartje Zuidas Groene terrassen BREEAM Excellent Bruggebouw Boven de A10 Skylounge OV voor de deur The [&hellip;]<\/p>","protected":false},"author":1,"featured_media":3794,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2552","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/co-office.nu\/en\/wp-json\/wp\/v2\/pages\/2552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/co-office.nu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/co-office.nu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/co-office.nu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/co-office.nu\/en\/wp-json\/wp\/v2\/comments?post=2552"}],"version-history":[{"count":36,"href":"https:\/\/co-office.nu\/en\/wp-json\/wp\/v2\/pages\/2552\/revisions"}],"predecessor-version":[{"id":14686,"href":"https:\/\/co-office.nu\/en\/wp-json\/wp\/v2\/pages\/2552\/revisions\/14686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/co-office.nu\/en\/wp-json\/wp\/v2\/media\/3794"}],"wp:attachment":[{"href":"https:\/\/co-office.nu\/en\/wp-json\/wp\/v2\/media?parent=2552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}