/*! HTML5 Boilerplate v9.0.0-RC1 | MIT License | https://html5boilerplate.com/ */html{font-size:1em;line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.hidden,[hidden]{display:none!important}.visually-hidden{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.visually-hidden.focusable:active,.visually-hidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.invisible{visibility:hidden}.clearfix::after,.clearfix::before{content:"";display:table}.clearfix::after{clear:both}@media print{*,::after,::before{background:#fff!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]::after{content:" (" attr(href) ")"}abbr[title]::after{content:" (" attr(title) ")"}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999;page-break-inside:avoid}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}img{max-width:100%}.button--type-default{background:#fc0;border-radius:30px;color:#fff;font-weight:helvetica_neue_bold,helvetica,arial,sans-serif;padding:15px 30px}@media screen and (max-width:560px){.button--type-default{display:inline-block;margin-bottom:30px}}body{margin:0}body::after{inset:auto 0 0;background-color:#fc0;content:"";display:block;height:10px;position:fixed;width:100%}.page{padding-left:30px;padding-right:30px}.page__content{margin:0 auto;max-width:1490px}.page__content h1{margin-top:30px}@media screen and (min-width:768px){.page__content h1{margin-top:unset}}.page__content__left{position:relative}@media screen and (min-width:1024px){.page__content__top{height:210px}}@media screen and (min-width:1440px){.page__content__top{height:300px}}.page__content__top .h-orb-primary{animation:1s forwards ease topOrb}.page__content__top .h-orb-primary::after{inset:auto 0 0;position:absolute}@media screen and (max-width:560px){.page__content__top__lang{position:absolute;inset:30px 30px auto auto}}@media screen and (min-width:768px){.page__content__top__lang{position:relative;inset:unset}}@media screen and (min-width:1024px){.page__content__top__lang{position:absolute;inset:30px 30px auto auto}}@media screen and (min-width:1440px){.page__content__top__lang{position:relative;inset:unset}}.page__content__top__lang a{margin-left:30px;max-height:20px;text-decoration:none}.page__content__about .page__content__left{overflow:hidden}.page__content__about .h-orb-primary{animation:1s forwards ease bottomOrb}.page__mobile-orb .h-orb-primary{animation:1s forwards ease bottomOrb}@keyframes topOrb{0%{transform:translate(0,-100%) scale(.1,.1)}100%{transform:translate(0,0) scale(1,1)}}@keyframes bottomOrb{0%{transform:translate(0,50%) scale(.1,.1)}100%{transform:translate(0,0) scale(1,1)}}@font-face{font-family:ppmonument;src:url(../fonts/ppmonument_gbl/ppmonument_gbl_extblk.woff2) format("woff2"),url(../fonts/ppmonument_gbl/ppmonument_gbl_extblk.woff) format("woff");font-style:normal;font-display:swap}@font-face{font-family:helvetica_neue;src:url(../fonts/helvetica_gbl/helvetica_gbl_light.woff2) format("woff2"),url(../fonts/helvetica_gbl/helvetica_gbl_light.woff) format("woff");font-style:normal;font-display:swap}@font-face{font-family:helvetica_neue_bold;src:url(../fonts/helvetica_gbl/helvetica_gbl_bold.woff2) format("woff2"),url(../fonts/helvetica_gbl/helvetica_gbl_bold.woff) format("woff");font-style:normal;font-display:swap}@font-face{font-family:helvetica_neue_heavy;src:url(../fonts/helvetica_gbl/helvetica_gbl_heavy.woff) format("woff2"),url(../fonts/helvetica_gbl/helvetica_gbl_heavy.woff) format("woff");font-style:normal;font-display:swap}html{font-family:helvetica_neue,helvetica,arial,sans-serif;line-height:1.7}a{display:inline-block;position:relative;text-decoration:underline;text-underline-offset:6px}h1{font-size:34px;line-height:.9;margin-bottom:15px}@media screen and (min-width:1024px){h1{font-size:40px}}@media screen and (min-width:1440px){h1{font-size:70px}}p{margin:0 0 30px}strong{font-family:helvetica_neue_bold,helvetica,arial,sans-serif}.h-bgcolor-primary{background-color:#fc0}.h-bgcolor-secondary{background-color:#c5c0b0}.h-bgcolor-dark{background-color:#2f2c2a}.h-bgcolor-light{background-color:#fff}.h-color-primary{color:#fc0}.h-color-secondary{color:#c5c0b0}.h-color-dark{color:#2f2c2a}.h-color-light{color:#fff}.h-display-flex-column{display:flex;flex-direction:column}.h-display-flex-row{display:flex;flex-direction:row}@media screen and (min-width:768px){.h-display-flex-mobile-large-row{display:flex;flex-direction:row}}@media screen and (min-width:1024px){.h-display-flex-tablet-row{display:flex;flex-direction:row}}.h-font-family-base{font-family:helvetica_neue,helvetica,arial,sans-serif}.h-font-family-base-heavy{font-family:helvetica_neue_heavy,helvetica,arial,sans-serif}.h-font-family-title{font-family:ppmonument,helvetica,arial,sans-serif}.h-font-size-default{font-size:17px}.h-gap-default{gap:30px}@media screen and (min-width:768px){.h-gap-default{gap:60px}}@media screen and (min-width:1024px){.h-gap-default{gap:100px}}.h-height-vh-100{height:100vh}.h-justify-content-end{justify-content:flex-end}.h-justify-content-sb{justify-content:space-between}.h-justify-content-start{justify-content:flex-start}@media screen and (max-width:1024px){.h-justify-content-mobile-large-start{justify-content:flex-start}}@media screen and (min-width:1440px){.h-justify-content-desktop-end{justify-content:flex-end}}@media screen and (min-width:1440px){.h-justify-content-desktop-start{justify-content:flex-start}}.h-margin-0{margin:0}@media screen and (min-width:1440px){.h-margin-desktop-0{margin-bottom:0}}.h-margin-bottom-default{margin-bottom:30px}@media screen and (max-width:768px){.h-margin-bottom-default{margin-bottom:60px}}@media screen and (max-width:1024px){.h-margin-bottom-default{margin-bottom:80px}}.h-margin-top-default{margin-top:40px}@media screen and (min-width:768px){.h-margin-top-default{margin-top:60px}}@media screen and (min-width:1024px){.h-margin-top-default{margin-top:80px}}@media screen and (min-width:1440px){.h-margin-top-default{margin-top:150px}}.h-orb-primary::after{aspect-ratio:1;background:#fc0;border-radius:50%;content:'';display:block}.h-orb-secondary::after{aspect-ratio:1;background:#c5c0b0;border-radius:50%;content:'';display:block}.h-orb-dark::after{aspect-ratio:1;background:#2f2c2a;border-radius:50%;content:'';display:block}.h-orb-light::after{aspect-ratio:1;background:#fff;border-radius:50%;content:'';display:block}.h-overflow-y-hidden{overflow-y:hidden}.h-padding-top-default{padding-top:40px}@media screen and (min-width:1024px){.h-padding-top-default{padding-top:80px}}@media screen and (max-width:560px){.h-padding-top-mobile-90{padding-top:90px}}.h-text-align-center{text-align:center}.h-text-transform-uppercase{text-transform:uppercase}.h-vertical-align-center{flex-direction:column;justify-content:center}.h-visibility-hidden-mobile-large{display:none}@media screen and (min-width:1024px){.h-visibility-hidden-mobile-large{display:block}}@media screen and (min-width:1024px){.h-visibility-hidden-tablet{display:none}}@media screen and (min-width:1440px){.h-visibility-visible-tablet{display:block}}.h-cut-y{height:100px;overflow:hidden}@media screen and (min-width:768px){.h-cut-y{height:200px}}.h-width-33{width:33%}.h-width-50{width:50%}@media screen and (min-width:768px){.h-width-33-mobile-large{width:33%}}@media screen and (min-width:768px){.h-width-50-mobile-large{width:50%}}@media screen and (min-width:1024px){.h-width-33-tablet{width:33%}}@media screen and (min-width:1024px){.h-width-50-tablet{width:50%}}@media screen and (min-width:1024px){.h-width-100-tablet{width:100%}}
/* === Basisinstellingen === */
html {
  font-size: 1em;
  line-height: 1.6;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #2f2c2a;
  color: #fff;
  font-family: helvetica_neue, helvetica, arial, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

/* === Typografie === */
h1, h2, h3 {
  font-family: helvetica_neue_bold, helvetica, arial, sans-serif;
  line-height: 1.1;
  margin-bottom: 20px;
}

h1 {
  font-size: clamp(2rem, 4vw, 4.2rem);
  color: #fc0;
}

h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: #cdc7b9;
}

p {
  margin: 0 0 20px;
  font-size: 1rem;
  line-height: 1.7;
}

strong {
  font-family: helvetica_neue_bold, helvetica, arial, sans-serif;
}

/* === CTA Brochure Button === */
.h-button {
  display: inline-block;
  background-color: #fc0;
  color: #2f2c2a;
  font-family: helvetica_neue_bold, helvetica, arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 34px;
  border-radius: 8px;
  transition: all 0.3s ease;
  letter-spacing: 0.6px;
  margin-top: 30px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.h-button:hover {
  background-color: #ffda33;
  transform: translateY(-3px);
}

/* === Paginastructuur === */
.page {
  padding: 0 30px;
}

.page__content {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
}

/* === Section standaard spacing === */
section {
  margin: 80px 0;
  padding: 40px 0;
}

@media (max-width: 768px) {
  section {
    margin: 60px 0;
    padding: 30px 0;
  }
}

/* === About blok === */
.page__content__about {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  margin: 100px 0;
}

.page__content__about .page__content__left,
.page__content__about .page__content__right {
  flex: 1 1 48%;
}

.page__content__about p {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .page__content__about {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .page__content__about .page__content__left,
  .page__content__about .page__content__right {
    width: 100%;
  }
}

/* === Cirkelvormige afbeelding (ORB) === */
.image-orb {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #1e1e1e;
  border: 6px solid #f0c401;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.6s ease;
}

.image-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.image-orb:hover img {
  transform: scale(1.06);
}

@keyframes floatOrb {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 768px) {
  .image-orb {
    width: 280px;
    height: 280px;
  }
}

/* === Onderste blokken (tekst + beeld combinaties) === */
.page__content__bottom,
.page__content__bottom--reverse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
  padding: 60px 20px;
  margin: 90px 0;
  background-color: #1e1e1e;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.page__content__bottom--reverse {
  flex-direction: row-reverse;
}

.bottom__text {
  flex: 1 1 50%;
  max-width: 600px;
}

.bottom__text h2 {
  color: #cdc7b9;
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.bottom__text p {
  margin-bottom: 14px;
  line-height: 1.7;
}

.bottom__image {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
}

.bottom__image img {
  width: 100%;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s ease;
}

.bottom__image img:hover {
  transform: scale(1.03);
}

/* === Responsiviteit === */
@media (max-width: 768px) {
  .page__content__bottom,
  .page__content__bottom--reverse {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 40px 16px;
  }

  .bottom__text,
  .bottom__image {
    max-width: 100%;
  }
}
/* === Afbeelding met geel kader centreren op mobiel === */
@media (max-width: 768px) {
  .image-orb {
    margin: 0 auto;              /* horizontaal centreren */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* optioneel: iets kleinere schaal voor mobiel */
  .image-orb {
    width: 260px;
    height: 260px;
  }

  /* zorg dat afbeelding zelf niet uitlijnt of overstroomt */
  .image-orb img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .image-orb {
    width: 200px;
    height: 200px;
  }
}
/* === Fix: te veel witruimte tussen Celtiplast en Protection, alleen mobiel === */
@media (max-width: 768px) {
  /* Verklein de marge van paragrafen en titels op mobiel */
  .page__content__about p {
    margin-bottom: 8px !important;
  }

  /* Verminder extra ruimte boven de volgende sectie */
  .page__content__about + .page__content__about {
    margin-top: 15px !important;
  }

  /* Verklein line-height om tekstblokken dichter te brengen */
  .page__content__about p,
  .page__content__about h2 {
    line-height: 1.4 !important;
  }

  /* Zorg dat titels niet extra naar beneden duwen */
  .page__content__about h2 {
    margin-top: 5px !important;
  }
}