/* =========================================
   WERKWIJZE PAGE
========================================= */

.page-werkwijze {
  background: #ffffff;
}


/* =========================================
   HEADER
========================================= */

.page-werkwijze .werkwijze-header {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 200;

  width: 100%;

  background: transparent;

  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}


.page-werkwijze .werkwijze-header.scrolled {
  background: rgba(255, 255, 255, 0.97);

  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}


.page-werkwijze .werkwijze-header .main-nav-left a {
  color: #000000;
}


.page-werkwijze .werkwijze-header .button-nav {
  color: #000000;

  border-color: #000000;
}


/*
  Zelfde logopositie als de finaal
  gecorrigeerde aanbodpagina.
*/

.page-werkwijze .werkwijze-header .logo {
  margin-top: -22px;
}


.page-werkwijze .werkwijze-header .logo img {
  transform: none;

  margin: 0;
}


/* =========================================
   HERO
========================================= */

.werkwijze-hero {
  position: relative;

  width: 100%;

  height: min(83vh, 760px);

  min-height: 620px;

  overflow: hidden;

  background: #efefed;
}


.werkwijze-hero-image {
  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;
}


/* =========================================
   INTRO
========================================= */

.werkwijze-intro {
  width: 100%;

  padding: 28px 30px 42px;

  background: #ffffff;
}


.werkwijze-intro-inner {
  width: min(1050px, 100%);

  margin: 0 auto;

  text-align: center;
}


.werkwijze-intro h1 {
  margin: 0 0 48px;

  font-family: "Altrincham", sans-serif;

  font-size: clamp(50px, 5vw, 76px);

  font-weight: 700;

  line-height: 1;
}


.werkwijze-intro p {
  margin: 0 auto 43px;

  color: #8a8a8a;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.55;

  letter-spacing: 0.11em;
}


.werkwijze-intro p:last-child {
  margin-bottom: 0;
}


/* =========================================
   STEPS
========================================= */

.steps-section {
  width: 100%;

  padding: 0 7vw 30px;

  background: #ffffff;
}


.steps-inner {
  width: min(1440px, 100%);

  min-height: 610px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr);

  align-items: center;

  gap: clamp(70px, 8vw, 135px);
}


/* =========================================
   STEP IMAGE
========================================= */

.step-image-wrap {
  width: 100%;

  overflow: hidden;
}


.step-image {
  display: block;

  width: 100%;

  aspect-ratio: 1 / 1.05;

  object-fit: cover;

  object-position: center center;
}


/* =========================================
   STEP CONTENT
========================================= */

.step-content {
  width: 100%;
}


.step-nav {
  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 56px;
}


.step-nav-button {
  width: 38px;

  height: 38px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1.5px solid #111111;

  border-radius: 50%;

  background: transparent;

  color: #111111;

  font-family: "Montserrat", sans-serif;

  font-size: 20px;

  font-weight: 400;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}


.step-nav-button.active {
  border-color: #9fb6d1;

  background: #9fb6d1;

  color: #ffffff;
}


.step-panel {
  display: none;
}


.step-panel.active {
  display: block;
}


.step-panel h2 {
  margin: 0 0 34px;

  font-family: "Altrincham", sans-serif;

  font-size: clamp(32px, 2.8vw, 44px);

  font-weight: 700;

  line-height: 1.1;
}


.step-panel p {
  max-width: 720px;

  margin: 0 0 34px;

  color: #555555;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  line-height: 1.55;
}


.step-list {
  margin: -18px 0 40px;

  padding: 0;

  list-style: none;

  color: #555555;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  line-height: 1.6;
}


.step-list li::before {
  content: "o ";

  color: #555555;
}


.step-cta {
  display: inline-block;

  padding-bottom: 8px;

  border-bottom: 2px solid #9fb6d1;

  color: #000000;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 0.32em;

  text-transform: uppercase;
}


/* =========================================
   PROS INTRO
========================================= */

.pros-intro {
  width: 100%;

  padding: 40px 30px 37px;

  background: #9fb6d1;

  color: #ffffff;
}


.pros-intro-inner {
  width: min(1100px, 100%);

  margin: 0 auto;

  text-align: center;
}


.pros-intro h2 {
  margin: 0 0 45px;

  font-family: "Altrincham", sans-serif;

  font-size: clamp(36px, 3vw, 48px);

  font-weight: 700;
}


.pros-intro p {
  margin: 0 0 33px;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  line-height: 1.55;

  letter-spacing: 0.02em;
}


.pros-intro p:last-child {
  margin-bottom: 0;
}


/* =========================================
   PROS CONTENT
========================================= */

.pros-section {
  position: relative;

  width: 100%;

  padding: 82px 8vw 30px;

  overflow: hidden;

  background: #ffffff;
}


.pros-inner {
  position: relative;

  z-index: 2;

  width: min(1260px, 100%);

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: clamp(120px, 13vw, 215px);
}


.pros-column {
  display: flex;

  flex-direction: column;

  gap: 58px;
}


.pro-item {
  position: relative;

  max-width: 440px;
}


.pro-item h3 {
  position: relative;

  margin: 0 0 32px;

  padding-left: 24px;

  font-family: "Altrincham", sans-serif;

  font-size: 20px;

  font-weight: 700;

  line-height: 1.25;
}


.pro-item h3::before {
  content: "";

  position: absolute;

  top: 9px;

  left: 0;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #9fb6d1;
}


.pro-item p {
  margin: 0;

  padding-left: 24px;

  color: #555555;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  line-height: 1.55;
}


/* =========================================
   PROS SHAPES
========================================= */

.pros-circle {
  position: absolute;

  z-index: 1;

  width: 690px;

  height: 690px;

  box-sizing: border-box;

  border-radius: 50%;

  pointer-events: none;
}


/* LINKS = GEVULDE LICHTBLAUWE BOL */

.pros-circle-left {
  top: 80px;

  left: 5%;

  background: rgba(159, 182, 209, 0.22);

  border: 0;
}


/* RECHTS = LICHTBLAUWE RING */

.pros-circle-right {
  top: 80px;

  right: 5%;

  background: transparent;

  border: 105px solid rgba(159, 182, 209, 0.22);
}


/* =========================================
   PROS CTA
========================================= */

.pros-cta {
  position: relative;

  z-index: 3;

  margin-top: 74px;

  text-align: center;
}


.pros-cta a {
  display: inline-block;

  padding-bottom: 8px;

  border-bottom: 2px solid #9fb6d1;

  color: #000000;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 0.32em;

  text-transform: uppercase;
}


/* =========================================
   FOOTER IMAGE
========================================= */

.werkwijze-footer-image {
  width: 100%;

  height: clamp(360px, 34vw, 520px);

  margin-top: 45px;

  background-image:
    url("/assets/images/werkwijze-footer-image.png");

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  background-attachment: fixed;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {


  /* HEADER */

  .page-werkwijze .werkwijze-header {
    position: relative;

    height: 88px;

    background: #ffffff;
  }


  .page-werkwijze .werkwijze-header.scrolled {
    box-shadow: none;
  }


  .page-werkwijze .werkwijze-header .logo {
    margin-top: 0;
  }


  /* HERO */

  .werkwijze-hero {
    height: 440px;

    min-height: 0;
  }


  /* INTRO */

  .werkwijze-intro {
    padding: 43px 25px 42px;
  }


  .werkwijze-intro h1 {
    margin-bottom: 30px;

    font-size: 43px;
  }


  .werkwijze-intro p {
    margin-bottom: 28px;

    font-size: 13px;

    line-height: 1.6;

    letter-spacing: 0.04em;
  }


  .werkwijze-intro p br {
    display: none;
  }


  /* STEPS */

  .steps-section {
    padding: 0 25px 65px;
  }


  .steps-inner {
    min-height: 0;

    display: block;
  }


  .step-image-wrap {
    margin-bottom: 42px;
  }


  .step-image {
    aspect-ratio: 1 / 1;
  }


  .step-nav {
    gap: 13px;

    margin-bottom: 32px;
  }


  .step-nav-button {
    width: 34px;

    height: 34px;

    font-size: 16px;
  }


  .step-panel h2 {
    margin-bottom: 24px;

    font-size: 29px;
  }


  .step-panel p {
    margin-bottom: 28px;

    font-size: 13px;

    line-height: 1.6;
  }


  .step-list {
    margin-top: -12px;

    margin-bottom: 30px;

    font-size: 13px;

    line-height: 1.6;
  }


  .step-cta {
    font-size: 11px;

    letter-spacing: 0.25em;
  }


  /* PROS INTRO */

  .pros-intro {
    padding: 42px 25px 44px;
  }


  .pros-intro h2 {
    margin-bottom: 28px;

    font-size: 29px;
  }


  .pros-intro p {
    margin-bottom: 24px;

    font-size: 13px;

    line-height: 1.6;
  }


  /* PROS */

  .pros-section {
    padding: 58px 28px 70px;
  }


  .pros-inner {
    display: block;
  }


  .pros-column {
    gap: 38px;
  }


  .pros-column + .pros-column {
    margin-top: 38px;
  }


  .pro-item {
    max-width: none;
  }


  .pro-item h3 {
    margin-bottom: 18px;

    padding-left: 20px;

    font-size: 18px;
  }


  .pro-item h3::before {
    top: 7px;

    width: 7px;

    height: 7px;
  }


  .pro-item p {
    padding-left: 20px;

    font-size: 13px;

    line-height: 1.6;
  }


  /* PRO SHAPES */

  .pros-circle {
    width: 470px;

    height: 470px;
  }


  .pros-circle-left {
    top: 110px;

    left: -215px;

    background: rgba(159, 182, 209, 0.22);

    border: 0;
  }


  .pros-circle-right {
    top: 720px;

    right: -235px;

    background: transparent;

    border: 80px solid rgba(159, 182, 209, 0.22);
  }


  .pros-cta {
    margin-top: 60px;
  }


  .pros-cta a {
    font-size: 11px;

    letter-spacing: 0.25em;
  }


  /* FOOTER IMAGE */

  .werkwijze-footer-image {
    height: 260px;

    margin-top: 0;

    background-attachment: scroll;

    background-position: center center;
  }

}