@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
  @import url('https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap');

  body {
  font-family: 'Open Sans', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  }

  h1 {
  font-size: 34px;
  }

  h2 {
  font-size: 32px;
  }

  h3 {
  font-size: 26px;
  }

  h4 {
  font-size: 21px;
  }

  h5 {
  font-size: 18px;
  }

  h6 {
  font-size: 16px;
  }

  body {
  font-size: 15px;
  }

  body,
  .product-usps li,
  .stock-message {
  color: #fafafa;
  }

  h1, h2, h3, h4, h5, h6 {
  color: #fafafa !important;
  }

  a,
  .woocommerce ul.products li.product .price,
  .woocommerce .price {
  color: #ff4d00 !important;
  }

  a:hover,
  .woocommerce ul.products li.product .price,
  .woocommerce .price,
  .product-usps li i,
  .counter {
  color: #ff4d00 !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  [type="submit"],
  .nf-form-content input[type=submit]
  {
  background: #ff4d00 !important;
  color: #fff !important;
  }

  .btn:hover,
  .wpcf7-submit:hover,
  .woocommerce span.onsale:hover,
  .woocommerce a.button:hover,
  .woocommerce .button:hover,
  [type="submit"]:hover,
  .nf-form-content input[type=submit]:hover
  {
  background: #ff4d00 !important;
  color: #fff !important;
  }

  div.social-media ul li a {
  background: #ff4d00 !important;
  color: #fff !important;
  }

  div.social-media ul li a i {
  color: #fff !important;
  }

  div.social-media ul li a:hover {
  background: #ff4d00 !important;
  color: #fff !important;
  }
  footer div.social-media ul li a {
  background: #ff4d00 !important;
  }

  div.phone a.phone, div.email a.email {
  background: #ff4d00 !important;
  color: #fff !important;
  }

  div.phone a.phone, div.email a.email i {
  color: #fff !important;
  }

  div.phone a.phone:hover, div.email a.email:hover {
  background: #ff4d00 !important;
  color: #fff !important;
  }

  header button.navbar-toggle {
  color: #ff4d00;
  border-color: #ff4d00;
  }

  .woocommerce-info,
  .woocommerce-message {
  border-top-color: #ff4d00 !important;
  }

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: #ff4d00 !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  .modal__container,
  .footer-cta-box,
  .rimg,
  [type="submit"] {
  -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  border-radius: 5px !important;
  }

  .img-responsive {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }



  header div.header {
  background-color: rgba(0, 0, 0, .5) !important;
  }
  header .sticky_menu_small div.header {
  background-color: rgb(0, 0, 0) !important;
  }

  @media only screen and (max-width : 992px) {
  header nav.navbar-default {
  background: none !important;
  }
  }





  @media only screen and (min-width : 992px) {
  header > div.wrapper {
  min-height: 375px;
  }
  header > div.wrapper.above {
  min-height: 525px;
  }

  header div.header div.holder {
  height: 275px;
  }
  }





  nav.navbar-default, div.navbar-collapse {
  background-color: #ff4d00; !important;
  }

  @media only screen and (min-width : 992px) {
  
  div.navbar-collapse {
  background: none !important;
  }

  header nav.navbar-default {
  background-color: rgba(255, 77, 0, .5) !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(255, 77, 0, .5) !important;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  }

  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:hover,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:focus,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:active {
  color: #ff4d00 !important;
  }
  }


  section.featured div.wrapper {
  margin-top: 60px;
  }





  header div.header {
  text-align: center;
  }

  header div.navbar-collapse ul.navbar-nav li a, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  border-bottom: 1px solid #ff4d00;
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse ul.navbar-nav li a, header nav.navbar-default div.navbar-collapse ul.navbar-nav li ul.dropdown-menu li.active > a {
  color: #ff4d00 !important;
  }
  }


  header div.header div.contact i {
  color: #ff4d00;
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse {
  text-align: right;
  }
  }

  section.featured div.item p,
  section.news div.item p {
  color: #fafafa !important;
  }

  section.featured div.item,
  section.news div.item {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }

  section.partners {
  background: #ff4d00 !important;
  }

  section.partners img {
  border-radius: 0 !important;
  }

  footer,
  .footer-cta.center:after,
  .author {
  background: #ff4d00 !important;
  }

  footer div.column > h4 {
  border-bottom: 1px solid #ff4d00;
  }

  footer div.socket,
  .footer-sticky {
  background: #ff4d00 !important;
  }


  section.treatments div.items div.item img {
  border-radius: 100% !important;
  }

  .img-circle {
  border-radius: 100% !important;
  }

  section.treatments div.button-wrap {
  background: #9c7694;
  margin-top: 30px;
  }

  section.treatments div.item a {
  color: #fafafa !important;
  }

  section.prices table tr td a {
  color: #fafafa !important;
  }

  aside div.block.treatments ul li a,
  .woocommerce .widget_product_categories ul li a,
  .woocommerce .widget_product_categories ul li span {
  color: #fafafa !important;
  }

  aside div.block.treatments ul li:hover,
  .woocommerce .widget_product_categories ul li:hover {
  background: #ff4d00;
  }

  /* Barlow + Barlow Condensed worden nu via een <link> in Script head geladen.
   Een @import werkt hier niet: het thema zet eigen CSS-regels boven dit veld
   en een @import na een CSS-regel wordt door de browser genegeerd. */
/* ============================================================
   GERKICKS — design tokens
   ============================================================ */
:root {
  --gk-orange: #ff4d00;
  --gk-orange-soft: rgba(255, 77, 0, 0.35);
  --gk-black: #000000;
  --gk-panel: #0d0d0d;
  --gk-white: #ffffff;
  --gk-text: rgba(255, 255, 255, 0.65);
  --gk-muted: rgba(255, 255, 255, 0.55);
  --gk-line: rgba(255, 255, 255, 0.12);
  --gk-head: 'Barlow Condensed', sans-serif;
  --gk-body: 'Barlow', sans-serif;
  --gk-pad: clamp(20px, 4vw, 80px);
  --e-global-color-accent: #ff4d00;
  --e-global-color-primary: #ffffff;
  --e-global-color-secondary: #0d0d0d;
  --e-global-color-text: rgba(255,255,255,0.65);
}

/* ============================================================
   Basis
   ============================================================ */
body {
  background: #000000;
  color: var(--gk-white);
  font-family: var(--gk-body);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--gk-head);
  color: var(--gk-white);
}

.gk-section {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  color: var(--gk-white);
  font-family: var(--gk-body);
  box-sizing: border-box;
}
.gk-section *,
.gk-section *::before,
.gk-section *::after { box-sizing: border-box; }
.gk-section p { color: var(--gk-white); font-size: 16px; line-height: 1.7; margin: 0 0 18px; } /* 25-08-2026: gelijk aan het ontwerp (was 17px in 65% wit) */
.gk-section p:last-child { margin-bottom: 0; }

.gk-eyebrow {
  font-family: var(--gk-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gk-orange);
  margin: 0 0 22px;
  display: block;
}
.gk-eyebrow--white { color: var(--gk-white); }
.gk-eyebrow--muted { color: var(--gk-muted); }

/* ---------- knop ---------- */
.gk-btn {
  display: inline-block;
  background: var(--gk-orange);
  color: #fff !important;
  font-family: var(--gk-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 16px 30px;
  border: 0;
  border-radius: 0;
  transform: skewX(-12deg);
  transition: background .25s ease, transform .25s ease;
}
.gk-btn > span { display: inline-block; transform: skewX(12deg); }
.gk-btn:hover { background: #ff6a26; transform: skewX(-12deg) translateY(-2px); }
.gk-btn--ghost {
  background: transparent;
  border: 1px solid var(--gk-orange);
  color: var(--gk-orange) !important;
}
.gk-btn--ghost:hover { background: rgba(255,77,0,.12); }
.gk-btn--dark { background: #000; }
.gk-btn--dark:hover { background: #171717; }

/* ============================================================
   1. HERO
   ============================================================ */
.gk-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 180px var(--gk-pad) 120px;
  overflow: hidden;
  background: #000;
}
.gk-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.gk-hero__video iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.77vh;
  transform: translate(-50%, -50%);
  border: 0;
}
.gk-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(110% 90% at -5% -5%, rgba(255,77,0,.38) 0%, rgba(255,50,0,.15) 30%, rgba(0,0,0,0) 62%),
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 45%, rgba(0,0,0,.45) 100%),
    linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 55%);
}
.gk-hero__inner { position: relative; z-index: 2; max-width: 58%; }
.gk-hero h1 {
  font-family: var(--gk-head);
  font-weight: 900;
  font-size: clamp(52px, 8vw, 120px);
  line-height: .9;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin: 0 0 26px;
}
.gk-hero h1 span { display: block; }
.gk-hero h1 .gk-accent { color: var(--gk-orange); }
.gk-hero p { max-width: 640px; }
.gk-hero .gk-btn { margin-top: 26px; }

/* ============================================================
   2. MERKEN — marquee
   ============================================================ */
.gk-brands {
  padding: 90px 0 100px;
  background: linear-gradient(90deg, rgba(255,77,0,.10) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(255,77,0,.06) 100%), #000;
  overflow: hidden;
}
.gk-brands .gk-eyebrow { text-align: center; margin-bottom: 46px; }
.gk-marquee { overflow: hidden; margin-bottom: 16px; }
.gk-marquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: gk-scroll 46s linear infinite;
}
.gk-marquee--rev .gk-marquee__track { animation-direction: reverse; }
.gk-marquee--slow .gk-marquee__track { animation-duration: 62s; }
.gk-marquee:hover .gk-marquee__track { animation-play-state: paused; }
@keyframes gk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gk-brand {
  flex: 0 0 auto;
  width: 148px;
  height: 84px;
  background: #f7f7f7;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gk-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #111;
  overflow: hidden;
  text-align: center;
  padding: 0 10px;
}
.gk-brand img { max-width: 74%; max-height: 60%; object-fit: contain; }

/* ============================================================
   3. CIJFERS — horizontaal scrollende sectie
   ============================================================ */
.gk-stats { position: relative; background: #000; }
.gk-stats__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.gk-stats__head {
  position: absolute;
  top: 48px; left: var(--gk-pad); right: var(--gk-pad);
  display: flex; align-items: center; justify-content: space-between;
  z-index: 3;
}
.gk-stats__head .gk-eyebrow { margin: 0; }
.gk-stats__bar { width: 180px; height: 2px; background: rgba(255,255,255,.18); position: relative; }
.gk-stats__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gk-orange); display: block; }
.gk-stats__track {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-left: var(--gk-pad);
  will-change: transform;
}
.gk-stat {
  flex: 0 0 clamp(240px, 24vw, 356px);
  min-height: 310px;
  padding: 54px 46px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(160deg, rgba(255,77,0,.10) 0%, rgba(0,0,0,0) 60%);
}
.gk-stat:nth-child(even) { background: linear-gradient(160deg, rgba(255,255,255,.03) 0%, rgba(0,0,0,0) 60%); }
.gk-section .gk-stat__num {
  font-family: var(--gk-head);
  font-weight: 900;
  font-size: clamp(64px, 6.4vw, 104px);
  line-height: .85;
  letter-spacing: -2px;
  margin: 0;
}
.gk-section .gk-stat:nth-child(odd) .gk-stat__num { color: var(--gk-orange); }
.gk-stat__plus { color: rgba(255,255,255,.28); font-size: 20px; line-height: 1; margin: 10px 0 18px; display: block; }
.gk-section .gk-stat__label {
  font-family: var(--gk-head);
  font-weight: 700; font-size: 13px; letter-spacing: 3px;
  text-transform: uppercase; color: #fff; margin: 0;
}
.gk-stat--cta {
  flex: 0 0 clamp(520px, 48vw, 900px);
  background: var(--gk-orange);
  border-right: 0;
  justify-content: center;
  padding: 54px 60px;
}
.gk-stat--cta .gk-eyebrow { color: rgba(0,0,0,.45); }
.gk-stat--cta h3 {
  font-family: var(--gk-head);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.05;
  color: #000;
  margin: 0 0 30px;
}
.gk-stat--cta .gk-btn { background: #000; align-self: flex-start; }

/* ============================================================
   4. BORN TO PLAY DIFFERENT
   ============================================================ */
.gk-about {
  position: relative;
  padding: 140px var(--gk-pad) 160px;
  background: linear-gradient(135deg, rgba(255,77,0,.14) 0%, rgba(255,77,0,.04) 28%, rgba(0,0,0,0) 55%), #000;
}
.gk-about__grid {
  display: grid;
  grid-template-columns: minmax(280px, 34%) minmax(280px, 40%);
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
}
.gk-about h2 {
  font-family: var(--gk-head);
  font-weight: 900;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: .92;
  letter-spacing: -.5px;
  text-transform: uppercase;
  margin: 0;
}
.gk-about h2 .gk-word {
  display: block;
  color: rgba(255,255,255,.16);
  transition: color .5s ease;
}
.gk-about h2 .gk-word.is-on { color: #fff; }
.gk-about h2 .gk-word.is-on.gk-word--accent { color: var(--gk-orange); }
.gk-about__figure {
  position: relative;
  margin-top: 70px;
  margin-left: auto;
  width: min(38%, 520px);
  aspect-ratio: 4 / 3;
}
.gk-about__figure .gk-btn { position: absolute; left: 24px; bottom: 24px; }

/* ============================================================
   Groot achtergrondwoord (Services / De Beweging)
   ============================================================ */
.gk-bigword {
  position: absolute;
  top: 40px;
  left: 0;
  white-space: nowrap;
  font-family: var(--gk-head);
  font-weight: 900;
  font-size: clamp(70px, 9vw, 150px);
  line-height: 1;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.07);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* ============================================================
   5. SERVICES — accordeon
   ============================================================ */
.gk-services {
  position: relative;
  padding: 150px var(--gk-pad) 160px;
  background: linear-gradient(90deg, rgba(255,77,0,.10) 0%, rgba(0,0,0,0) 40%), #000;
  overflow: hidden;
}
.gk-services__intro,
.gk-movement__intro {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin-left: auto;
  text-align: right;
  margin-bottom: 70px;
}
.gk-acc { position: relative; z-index: 1; border-top: 1px solid var(--gk-line); }
.gk-acc__item { border-bottom: 1px solid var(--gk-line); }
.gk-acc__btn {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 34px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--gk-head);
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  transition: color .3s ease;
}
.gk-acc__btn:hover { color: rgba(255,255,255,.75); }
.gk-acc__item.is-open .gk-acc__btn { color: var(--gk-orange); }
.gk-acc__sign { font-size: .55em; font-weight: 700; }
.gk-acc__panel { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.gk-acc__panel-inner { max-width: 620px; margin: 0 auto; padding: 0 20px 40px; text-align: center; }

/* ============================================================
   6. DE BEWEGING — galerij
   ============================================================ */
.gk-movement { position: relative; padding: 150px var(--gk-pad) 160px; background: #000; overflow: hidden; }
.gk-gallery {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.gk-gallery__item { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.gk-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.gk-gallery__item:hover img { transform: scale(1.05); }
.gk-gallery__next {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-decoration: none;
}
.gk-gallery__next i {
  width: 72px; height: 72px;
  border: 1px solid var(--gk-orange); color: var(--gk-orange);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 26px;
  transform: skewX(-12deg);
  transition: background .25s ease, color .25s ease;
}
.gk-gallery__next:hover i { background: var(--gk-orange); color: #fff; }
.gk-gallery__next span {
  font-family: var(--gk-head); font-weight: 700; font-size: 13px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gk-muted);
}

/* ============================================================
   7. QUOTES
   ============================================================ */
.gk-quotes { padding: 130px var(--gk-pad) 140px; background: linear-gradient(120deg, rgba(255,77,0,.10) 0%, rgba(0,0,0,0) 45%), #000; }
.gk-quotes__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.gk-quotes__mark {
  font-family: var(--gk-head); font-weight: 900; font-size: 120px; line-height: .6;
  color: var(--gk-orange-soft); display: block; margin-bottom: 26px;
}
.gk-section .gk-quotes__grid blockquote {
  margin: 0; padding: 0; border: 0;
  font-family: var(--gk-head); font-weight: 900;
  font-size: clamp(26px, 2.8vw, 42px); line-height: 1.12;
  text-transform: uppercase; color: #fff;
}
.gk-quotes__by { margin-top: 34px; padding-left: 18px; border-left: 2px solid var(--gk-orange); }
.gk-quotes__by strong, .gk-quotes__by span {
  display: block; font-family: var(--gk-head); font-weight: 700; font-size: 13px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gk-orange);
}
.gk-quotes__by span { opacity: .8; margin-top: 6px; }
.gk-quote-card {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
  padding: 34px 38px; margin-bottom: 22px; text-align: center;
}
.gk-quote-card:last-child { margin-bottom: 0; }
.gk-quote-card p { font-size: 16px; margin-bottom: 18px; }
.gk-quote-card cite {
  font-style: normal; font-family: var(--gk-head); font-weight: 700; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gk-orange);
}

/* ============================================================
   8. LET'S MOVE TOGETHER
   ============================================================ */
.gk-cta {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  padding: 120px var(--gk-pad); overflow: hidden; background: #000;
}
.gk-cta__bg { position: absolute; inset: 0; z-index: 0; }
.gk-cta__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gk-cta__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.25) 100%);
}
.gk-cta__inner { position: relative; z-index: 1; max-width: 640px; }
.gk-cta h2 {
  font-family: var(--gk-head); font-weight: 900;
  font-size: clamp(48px, 7vw, 104px); line-height: .9; letter-spacing: -1px;
  text-transform: uppercase; margin: 0 0 26px;
}
.gk-cta h2 .gk-accent { color: var(--gk-orange); }
.gk-cta .gk-btn { margin-top: 30px; }

/* ============================================================
   Placeholder-beeld (tijdelijk, tot de definitieve foto's er zijn)
   ============================================================ */
.gk-ph {
  position: relative; display: flex; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, rgba(255,255,255,0) 12px 24px),
    linear-gradient(160deg, #1a1210 0%, #0a0a0a 100%);
  border: 1px solid rgba(255,255,255,.07);
  align-items: center; justify-content: center;
}
.gk-ph::after {
  content: attr(data-label);
  font-family: var(--gk-head); font-weight: 700; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,.28); padding: 0 16px; text-align: center;
}

.gk-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.gk-reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .gk-hero__inner { max-width: 100%; }
  .gk-about__grid { grid-template-columns: 1fr; }
  .gk-about__figure { width: 100%; margin-top: 40px; }
  .gk-quotes__grid { grid-template-columns: 1fr; }
  .gk-services__intro, .gk-movement__intro { text-align: left; margin-left: 0; }
  .gk-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
  .gk-hero { min-height: 88vh; padding-top: 130px; padding-bottom: 80px; }
  .gk-stats__sticky { position: static; height: auto; padding: 90px 0; }
  .gk-stats__head { position: static; margin: 0 var(--gk-pad) 34px; }
  .gk-stats__bar { display: none; }
  .gk-stats__track { flex-direction: column; transform: none !important; padding-right: var(--gk-pad); }
  .gk-stat { flex: 1 1 auto; min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .gk-stat--cta { flex: 1 1 auto; }
  .gk-gallery { grid-template-columns: 1fr; }
  .gk-bigword { font-size: 58px; }
}

/* ============================================================
   Integratie met het Salonsite-thema
   Elk Gerkicks-blok heeft een Uniek ID dat begint met "gk-blk-".
   Daarmee halen we het blok uit het 48-koloms grid, zodat de
   secties full-bleed worden zoals in het ontwerp.
   ============================================================ */
main section[class*="gk-blk-"] { padding: 0 !important; margin: 0 !important; background: none !important; overflow: visible; }
main section[class*="gk-blk-"] .container { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
main section[class*="gk-blk-"] .row { margin: 0 !important; display: block !important; }
main section[class*="gk-blk-"] [class*="col-"] { width: 100% !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; float: none !important; }
main section[class*="gk-blk-"] h2:empty { display: none; }
main { background: transparent; }

/* ---------- header: transparant over de hero ---------- */
header .wrapper.sticky_header { background: transparent; transition: background .3s ease; box-shadow: none !important; }
header .wrapper.sticky_header.is-stuck,
header .wrapper.sticky_header.fixed,
header .wrapper.sticky_header.sticky { background: rgba(0, 0, 0, .92); }
header .header__content { display: none; }
header .navigation a, header nav a, header .menu a {
  font-family: var(--gk-head); font-weight: 700; font-size: 15px;
  text-transform: uppercase; color: rgba(255, 255, 255, .6);
  letter-spacing: .2px; transition: color .2s ease;
}
header .navigation a:hover, header nav a:hover, header .menu a:hover,
header .current-menu-item > a { color: #fff; }

/* ---------- footer ---------- */
footer { background: #050505; border-top: 1px solid rgba(255,255,255,.08); }
footer h4 { font-family: var(--gk-head); font-weight: 700; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #fff; }
footer, footer p, footer a, footer td { color: var(--gk-text); font-family: var(--gk-body); }
footer a:hover { color: var(--gk-orange); }

/* ---------- zijbalk uit ---------- */
.sidebar, aside.sidebar { display: none !important; }

/* ---------- correcties na eerste test op de frontend ---------- */
/* Het "Uniek ID" van een blok komt in dit thema als CLASS op de section terecht. */
main section[class*="gk-blk-"] > .container { text-align: left !important; }
main section[class*="gk-blk-"] p:empty { display: none !important; }
.gk-section > p:empty { display: none !important; }

/* header overlapt de hero, zoals in het ontwerp */
header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
}
header .header.full-width { padding: 18px 0 !important; background: transparent !important; }
header .header.full-width .container { max-width: none; padding-left: var(--gk-pad); padding-right: var(--gk-pad); }
header .logo img, header .col-sm-10 img { max-height: 74px; width: auto; }
body.admin-bar header { top: 32px; }

/* ============================================================
   Header-layout (logo links, menu rechts, CTA-knop als laatste item)
   ============================================================ */
header .header.full-width .row.no-gutter {
  display: flex; align-items: center; margin: 0 !important;
}
header .header.full-width .col-sm-10,
header .header.full-width .col-sm-38 {
  float: none !important; width: auto !important; max-width: none !important;
}
header .header.full-width .col-sm-10 { flex: 0 0 auto; }
header .header.full-width .col-sm-38 { flex: 1 1 auto; }
header .navbar, header .navbar-default { float: none !important; margin: 0 !important; border: 0 !important; background: none !important; min-height: 0 !important; }
header .navbar ul.nav, header .navbar ul.navbar-nav, header nav ul {
  display: flex !important; align-items: center; justify-content: flex-end;
  flex-wrap: nowrap; float: none !important; margin: 0 !important; padding: 0 !important;
}
header .navbar ul.nav > li { float: none !important; }
header .navbar ul.nav > li > a { padding: 8px 12px !important; font-size: 14px; white-space: nowrap; }

/* laatste menu-item = "Werk samen" knop */
header .navbar ul.nav > li:last-child > a {
  position: relative; z-index: 0;
  color: #fff !important; padding: 13px 26px !important;
  margin-left: 22px; letter-spacing: 2px;
}
header .navbar ul.nav > li:last-child > a::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--gk-orange); transform: skewX(-12deg);
  transition: background .25s ease;
}
header .navbar ul.nav > li:last-child > a:hover::before { background: #ff6a26; }

/* submenu */
header .navbar ul.nav ul {
  background: rgba(10,10,10,.96) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
header .navbar ul.nav ul > li > a { color: rgba(255,255,255,.7) !important; }
header .navbar ul.nav ul > li > a:hover { color: #fff !important; background: rgba(255,77,0,.15) !important; }

/* ============================================================
   Hero-correcties
   ============================================================ */
.gk-hero__inner { max-width: min(70%, 1150px); }
.gk-hero__video iframe {
  width: 132vw; height: 74.25vw;
  min-height: 132%; min-width: 235vh;
}
.gk-hero__overlay {
  background:
    radial-gradient(110% 90% at -5% -5%, rgba(255,77,0,.34) 0%, rgba(255,50,0,.14) 30%, rgba(0,0,0,0) 62%),
    linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 45%, rgba(0,0,0,.58) 100%),
    linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 55%);
}

/* ============================================================
   Header-correcties ronde 2
   ============================================================ */
header .header.full-width .container {
  width: 100% !important;
  max-width: none !important;
  padding-left: var(--gk-pad) !important;
  padding-right: var(--gk-pad) !important;
}
header .header.full-width .row.no-gutter { width: 100%; }
header .navbar ul.nav { justify-content: center !important; width: 100%; }
header .navbar ul.nav > li:last-child { margin-left: auto; }
header .navbar ul.nav > li > a { font-size: 13.5px !important; letter-spacing: .3px; }

/* dropdown alleen bij hover tonen */
header .navbar ul.nav ul { display: none; }
header .navbar ul.nav > li:hover > ul,
header .navbar ul.nav > li.open > ul { display: block; }

/* hero-titel iets kleiner zodat "LIVING WITH NO" op één regel past */
.gk-hero h1 { font-size: clamp(44px, 6vw, 120px); }
.gk-hero__inner { max-width: min(74%, 1200px); }

/* overlay iets lichter zodat de video zichtbaar blijft */
.gk-hero__overlay {
  background:
    radial-gradient(110% 90% at -5% -5%, rgba(255,77,0,.34) 0%, rgba(255,50,0,.14) 30%, rgba(0,0,0,0) 62%),
    linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.70) 45%, rgba(0,0,0,.40) 100%),
    linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 55%);
}

/* ============================================================
   Header-correcties ronde 3
   ============================================================ */
header .wrapper,
header .wrapper.shadow,
header .wrapper.above_shadow {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
header .header.full-width { padding: 10px 0 !important; }
header .logo img, header .col-sm-10 img { max-height: 64px !important; width: auto !important; }
/* leesbaarheid van het menu over de video */
header::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 220px;
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none; z-index: -1;
}
header { isolation: isolate; }

/* dropdown definitief alleen bij hover */
header .navbar ul.nav ul,
header nav ul ul { display: none !important; }
header .navbar ul.nav > li:hover > ul,
header .navbar ul.nav > li.open > ul,
header nav ul > li:hover > ul { display: block !important; }

/* hero: iets donkerder, dichter bij het ontwerp */
.gk-hero__overlay {
  background:
    radial-gradient(110% 90% at -5% -5%, rgba(255,77,0,.32) 0%, rgba(255,50,0,.13) 30%, rgba(0,0,0,0) 62%),
    linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.80) 45%, rgba(0,0,0,.52) 100%),
    linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,0) 60%);
}

/* ============================================================
   Header-correcties ronde 4
   ============================================================ */
/* het thema legt een half-transparante balk over de header; die weg */
header .wrapper::before,
header .wrapper::after { display: none !important; content: none !important; }
header *, header { box-shadow: none !important; }
header .header.full-width .container,
header .header.full-width .row.no-gutter,
header .header.full-width .col-sm-10,
header .header.full-width .col-sm-38,
header .header.full-width .holder,
header .header.full-width .col-sm-10 .wrapper,
header .header.full-width .col-sm-38 .wrapper {
  height: auto !important;
  min-height: 0 !important;
}

/* ============================================================
   Correcties ronde 5
   ============================================================ */
/* label van de cijfers-sectie onder het sticky menu */
.gk-stats__head { top: 118px; }

/* oranje motivatie-paneel breder, tekst niet meer afgekapt */
.gk-stat--cta { flex: 0 0 clamp(560px, 62vw, 1100px); }
.gk-stat--cta h3 { font-size: clamp(26px, 2.3vw, 40px); }

/* placeholder in de eind-CTA uit het midden halen */
.gk-cta__bg .gk-ph { align-items: flex-end; justify-content: flex-end; }
.gk-cta__bg .gk-ph::after { padding: 0 28px 24px; }

/* Born to play different: compacter, foto rechts uitgelijnd */
.gk-about { padding-bottom: 120px; }
.gk-about__figure { margin-top: -40px; }

/* footer van het thema: partnersbalk en oranje CTA uit */
footer, .footer { background: #050505 !important; }
footer .container { max-width: none !important; padding-left: var(--gk-pad) !important; padding-right: var(--gk-pad) !important; }

/* ============================================================
   Footer — Gerkicks
   ============================================================ */
footer { padding: 70px 0 0 !important; }
footer .row { display: flex; flex-wrap: wrap; align-items: center; }
.gk-foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.gk-foot-logo { max-height: 62px; width: auto; }
.gk-foot-tagline {
  font-family: var(--gk-head); font-weight: 700; font-size: 13px;
  letter-spacing: 3px; text-transform: uppercase; color: #fff;
}
.gk-foot-social { display: flex; gap: 12px; }
.gk-foot-social a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  color: var(--gk-orange) !important; font-size: 16px;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.gk-foot-social a:hover { background: var(--gk-orange); border-color: var(--gk-orange); color: #fff !important; }
.gk-foot-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: flex-end; }
.gk-foot-nav a {
  font-family: var(--gk-head); font-weight: 700; font-size: 13px;
  letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6) !important;
}
.gk-foot-nav a:hover { color: #fff !important; }
footer .socket, footer .footer__socket, footer .copyright {
  margin-top: 60px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 14px;
}
@media (max-width: 782px) {
  .gk-foot-nav { justify-content: flex-start; margin-top: 34px; }
}

/* ---------- footer: opmaak van de twee Gerkicks-blokken ---------- */
footer .column h4:empty { display: none !important; }
footer > .container,
footer .socket > .container {
  width: 100% !important; max-width: none !important;
  padding-left: var(--gk-pad) !important; padding-right: var(--gk-pad) !important;
}
footer .column { margin-bottom: 0 !important; }
footer .socket { margin-top: 60px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.08); background: #050505; }
footer .socket, footer .socket span, footer .socket a { font-size: 14px; color: var(--gk-muted); }

/* ============================================================
   Mobiel: header terug naar het standaardgedrag van het thema,
   zodat het mobiele menu van Salonsite blijft werken.
   ============================================================ */
@media (max-width: 991px) {
  header .header.full-width .row.no-gutter { display: block !important; }
  header .header.full-width .col-sm-10,
  header .header.full-width .col-sm-38 { width: auto !important; }
  header .navbar ul.nav,
  header .navbar ul.navbar-nav,
  header nav ul { display: block !important; }
  header .navbar ul.nav > li:last-child { margin-left: 0; }
  header .navbar ul.nav > li:last-child > a { margin-left: 0; padding: 12px 18px !important; }
  header .navbar ul.nav > li:last-child > a::before { transform: none; }
  header::before { height: 140px; }
}
@media (max-width: 782px) {
  .gk-hero__inner { max-width: 100%; }
  .gk-quotes__mark { font-size: 80px; }
  .gk-about__figure { margin-top: 30px; }
  footer .row { display: block; }
}

/* tussenmaten: menu compacter zodat de CTA-knop niet buiten beeld valt */
@media (min-width: 992px) and (max-width: 1320px) {
  header .navbar ul.nav > li > a { padding: 8px 8px !important; font-size: 12px !important; }
  header .navbar ul.nav > li:last-child > a { margin-left: 12px; padding: 11px 16px !important; letter-spacing: 1px; }
  header .logo img, header .col-sm-10 img { max-height: 48px !important; }
}

/* ============================================================
   Menu: witte tekst, beter leesbaar over de hero-video
   ============================================================ */
header .navigation a,
header nav a,
header .menu a,
header .navbar ul.nav > li > a {
  color: #ffffff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
header .navbar ul.nav > li > a:hover,
header .navbar ul.nav > li.current-menu-item > a,
header .navbar ul.nav > li.current-page-ancestor > a { color: var(--gk-orange) !important; }
header .navbar ul.nav > li:last-child > a,
header .navbar ul.nav > li:last-child > a:hover { color: #ffffff !important; }
header .navbar ul.nav ul > li > a { color: #ffffff !important; text-shadow: none; }
header .navbar ul.nav ul > li > a:hover { color: var(--gk-orange) !important; }

/* ============================================================
   HERBRUIKBARE BOUWSTENEN
   Deze componenten werken op elke pagina. Zet een "Tekst"-blok
   neer, geef het een Uniek ID dat begint met gk-blk- en plak de
   HTML in het tabblad "Tekst" (niet "Visueel").
   ============================================================ */

/* ---------- Pagina-hero (subpagina's) ---------- */
.gk-pagehero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 200px var(--gk-pad) 90px;
  overflow: hidden;
  background: #000;
}
.gk-pagehero__bg { position: absolute; inset: 0; z-index: 0; }
.gk-pagehero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gk-pagehero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,77,0,.22) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.75) 100%);
}
.gk-pagehero__inner { position: relative; z-index: 1; max-width: 1100px; }
.gk-pagehero h1 {
  font-family: var(--gk-head);
  font-weight: 900;
  font-size: clamp(38px, 5.4vw, 86px);
  line-height: .95;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin: 0;
}
.gk-pagehero h1 .gk-accent { color: var(--gk-orange); }
.gk-pagehero p { margin: 22px auto 0; max-width: 720px; }
.gk-pagehero .gk-btn { margin-top: 28px; }
.gk-pagehero--plain { min-height: 56vh; background: #000; }
.gk-pagehero--plain .gk-pagehero__bg { display: none; }

/* ---------- Sectie-kop met groot achtergrondwoord ---------- */
.gk-block {
  position: relative;
  padding: 130px var(--gk-pad) 140px;
  background: #000;
  overflow: hidden;
}
.gk-block--tint { background: linear-gradient(120deg, rgba(255,77,0,.10) 0%, rgba(0,0,0,0) 45%), #000; }
.gk-block__title {
  position: relative; z-index: 1;
  font-family: var(--gk-head); font-weight: 900;
  font-size: clamp(34px, 4.6vw, 72px);
  line-height: .95; letter-spacing: -1px; text-transform: uppercase;
  text-align: center; margin: 0 0 60px;
}
.gk-block__title .gk-accent { color: var(--gk-orange); }
.gk-block__intro { position: relative; z-index: 1; max-width: 720px; margin: -30px auto 60px; text-align: center; }

/* ---------- Kaartenraster (bijv. "Vier krachtige thema's") ---------- */
.gk-cards {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}
.gk-cards--3 { grid-template-columns: repeat(3, 1fr); }
.gk-card {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  padding: 40px 38px;
}
.gk-card h3 {
  font-family: var(--gk-head); font-weight: 900;
  font-size: clamp(22px, 2vw, 32px); line-height: 1; letter-spacing: -.5px;
  text-transform: uppercase; margin: 0 0 18px;
}
.gk-card h3 span { display: block; color: var(--gk-orange); }

/* ---------- Stappen (bijv. "Van aanvraag tot podium") ---------- */
.gk-steps-wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center;
}
.gk-step {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  padding: 26px 30px; margin-bottom: 16px;
}
.gk-step:last-of-type { margin-bottom: 0; }
.gk-step__num {
  display: block; font-family: var(--gk-head); font-weight: 900;
  font-size: 26px; line-height: 1; color: var(--gk-orange); margin-bottom: 8px;
}
.gk-step h4 {
  font-family: var(--gk-head); font-weight: 900; font-size: clamp(20px, 1.8vw, 28px);
  text-transform: uppercase; letter-spacing: -.5px; margin: 0 0 10px;
}
.gk-steps__media { position: relative; aspect-ratio: 4 / 5; }
.gk-steps-wrap .gk-btn { margin-top: 26px; }

/* ---------- Pakketten / prijskaarten ---------- */
.gk-pricing {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch;
}
.gk-price {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  padding: 44px 36px 40px;
  display: flex; flex-direction: column; text-align: center;
}
.gk-price--featured {
  background: linear-gradient(180deg, rgba(255,77,0,.14) 0%, rgba(255,77,0,.04) 100%);
  border-color: rgba(255,77,0,.35);
}
.gk-price h3 {
  font-family: var(--gk-head); font-weight: 900;
  font-size: clamp(24px, 2.2vw, 34px); line-height: 1;
  text-transform: uppercase; letter-spacing: -.5px; margin: 0 0 18px;
}
.gk-price h3 span { display: block; color: var(--gk-orange); }
.gk-price__intro { font-style: italic; margin-bottom: 26px; }
.gk-price ul { list-style: none; margin: 0 0 30px; padding: 0; text-align: left; }
.gk-price li {
  position: relative; padding: 12px 0 12px 30px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: var(--gk-text); font-size: 16px; line-height: 1.5;
}
.gk-price li:last-child { border-bottom: 0; }
.gk-price li::before {
  content: '\2713'; position: absolute; left: 0; top: 12px;
  color: var(--gk-orange); font-weight: 700;
}
.gk-price .gk-btn { margin-top: auto; align-self: center; }

/* ---------- Quote-slider ---------- */
.gk-testi { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.gk-testi__viewport { overflow: hidden; flex: 1 1 auto; }
.gk-testi__track { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.gk-testi__slide { flex: 0 0 100%; text-align: center; padding: 20px 40px; }
.gk-testi__slide p {
  font-family: var(--gk-head); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 32px); line-height: 1.25;
  color: #fff !important; margin: 0 0 26px;
}
.gk-testi__who { display: flex; align-items: center; justify-content: center; gap: 14px; }
.gk-testi__ph {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  display: block; flex: 0 0 auto;
}
.gk-testi__who strong,
.gk-testi__who em {
  display: block; font-style: normal;
  font-family: var(--gk-head); font-weight: 700; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase; text-align: left;
}
.gk-testi__who strong { color: #fff; }
.gk-testi__who em { color: var(--gk-orange); margin-top: 4px; }
.gk-testi__nav {
  flex: 0 0 auto; width: 44px; height: 44px;
  background: none; border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.6); font-size: 22px; line-height: 1; cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.gk-testi__nav:hover { border-color: var(--gk-orange); color: var(--gk-orange); }

/* ---------- Coming soon ---------- */
.gk-soon {
  min-height: 78vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 200px var(--gk-pad) 140px;
  background: radial-gradient(90% 70% at 50% 0%, rgba(255,77,0,.16) 0%, rgba(0,0,0,0) 60%), #000;
}
.gk-soon h1 {
  font-family: var(--gk-head); font-weight: 900;
  font-size: clamp(46px, 8vw, 130px); line-height: .9;
  letter-spacing: -2px; text-transform: uppercase; margin: 0 0 22px;
}
.gk-soon h1 .gk-accent { color: var(--gk-orange); }
.gk-soon p { max-width: 560px; margin: 0 auto; }
.gk-soon .gk-btn { margin-top: 34px; }

/* ---------- Responsive voor de nieuwe bouwstenen ---------- */
@media (max-width: 1024px) {
  .gk-cards, .gk-cards--3, .gk-pricing { grid-template-columns: 1fr; }
  .gk-steps-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
  .gk-pagehero { min-height: 52vh; padding-top: 150px; padding-bottom: 70px; }
  .gk-block { padding: 90px var(--gk-pad) 100px; }
  .gk-testi__slide { padding: 20px 6px; }
}

/* ============================================================
   Laatste correcties subpagina's
   ============================================================ */
/* onderste balk (socket) donker in plaats van oranje */
footer .socket,
.socket { background: #050505 !important; }
.socket, .socket span, .socket a, .socket p { color: var(--gk-muted) !important; }
.socket a:hover { color: var(--gk-orange) !important; }

/* placeholder-label niet over de titel heen */
.gk-pagehero__bg .gk-ph { align-items: flex-end; justify-content: center; }
.gk-pagehero__bg .gk-ph::after { padding: 0 20px 22px; }

/* quote-slider: iets compacter blok */
.gk-block .gk-testi { min-height: 220px; }

/* socket krijgt van het thema de accentkleur; hier hoger overschreven */
body footer .socket.socket { background: #050505 !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
body footer .socket.socket, 
body footer .socket.socket span,
body footer .socket.socket p,
body footer .socket.socket a { color: var(--gk-muted) !important; }
body footer .socket.socket a:hover { color: var(--gk-orange) !important; }

/* ============================================================
   EXTRA BOUWSTENEN (ronde 2)
   ============================================================ */

/* ---------- Twee kolommen: kop links, tekst rechts ---------- */
.gk-split {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px); align-items: start;
}
.gk-split--center { align-items: center; }
.gk-split--reverse .gk-split__media { order: -1; }
.gk-split h2 {
  font-family: var(--gk-head); font-weight: 900;
  font-size: clamp(34px, 4.6vw, 72px); line-height: .95;
  letter-spacing: -1px; text-transform: uppercase; margin: 0 0 26px;
}
.gk-split h2 .gk-accent { color: var(--gk-orange); }
.gk-split__media { position: relative; aspect-ratio: 3 / 4; }
.gk-split__media--wide { aspect-ratio: 4 / 3; }
.gk-split .gk-btn { margin-top: 26px; }
.gk-split--right { text-align: right; }
.gk-split--right .gk-btn { }

/* ---------- Vinkjes- en kruisjeslijst ---------- */
.gk-list { list-style: none; margin: 26px 0 0; padding: 0; }
.gk-list li {
  position: relative; padding: 14px 0 14px 34px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--gk-text); font-size: 16px; line-height: 1.5;
}
.gk-list li::before {
  position: absolute; left: 0; top: 13px;
  font-weight: 700; font-size: 15px;
}
.gk-list--check li::before { content: '\2713'; color: var(--gk-orange); }
.gk-list--cross li::before { content: '\2715'; color: rgba(255,255,255,.45); }
.gk-list--boxed li {
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px; padding: 16px 18px 16px 44px;
}
.gk-list--boxed li::before { left: 18px; top: 16px; }
.gk-list--right { text-align: left; }

/* ---------- Oranje gloed als sectie-achtergrond ---------- */
.gk-block--glow {
  background:
    radial-gradient(60% 70% at 30% 55%, rgba(255,77,0,.42) 0%, rgba(255,77,0,.10) 45%, rgba(0,0,0,0) 75%),
    #000;
}

/* ---------- Gecentreerde eind-CTA ---------- */
.gk-cta--center { justify-content: center; text-align: center; }
.gk-cta--center .gk-cta__inner { max-width: 1000px; }
.gk-cta--center .gk-cta__bg::after {
  background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.8) 100%);
}
.gk-cta--center .gk-cta__inner p { margin-left: auto; margin-right: auto; max-width: 720px; }

/* ---------- Tijdlijn met uitklappende panelen ---------- */
.gk-timeline {
  position: relative; z-index: 1;
  display: flex; gap: 12px; height: clamp(380px, 52vh, 560px);
}
.gk-tl {
  position: relative; flex: 1 1 0; min-width: 0;
  overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  transition: flex-grow .55s cubic-bezier(.4,0,.2,1);
  background: #0d0d0d;
}
.gk-tl.is-open { flex-grow: 5; cursor: default; }
.gk-tl__img { position: absolute; inset: 0; }
.gk-tl__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gk-tl__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.85) 75%);
}
.gk-tl__label {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--gk-head); font-weight: 700; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase; color: #fff;
  white-space: nowrap; transition: opacity .3s ease;
}
.gk-tl.is-open .gk-tl__label { opacity: 0; }
.gk-tl__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 32px 34px; opacity: 0; transform: translateY(14px);
  transition: opacity .45s ease .15s, transform .45s ease .15s;
  pointer-events: none;
}
.gk-tl.is-open .gk-tl__body { opacity: 1; transform: none; }
.gk-tl__body h3 {
  font-family: var(--gk-head); font-weight: 900;
  font-size: clamp(20px, 2vw, 30px); line-height: 1;
  text-transform: uppercase; letter-spacing: -.5px; margin: 0 0 10px;
}
.gk-tl__body p { max-width: 460px; margin: 0; }

/* ---------- Volledig oranje prijskaart ---------- */
.gk-price--solid {
  background: var(--gk-orange);
  border-color: var(--gk-orange);
  box-shadow: 0 24px 70px rgba(255,77,0,.28);
}
.gk-price--solid h3, .gk-price--solid h3 span { color: #000; }
.gk-price--solid .gk-price__intro,
.gk-price--solid li { color: rgba(0,0,0,.78); }
.gk-price--solid li { border-bottom-color: rgba(0,0,0,.18); }
.gk-price--solid li::before { color: #000; }
.gk-price--solid .gk-btn { background: #000; color: #fff !important; }
.gk-price__badge {
  display: block; font-family: var(--gk-head); font-weight: 700;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gk-muted); margin-bottom: 14px;
}
.gk-price--solid .gk-price__badge { color: rgba(0,0,0,.55); }

/* ---------- Contactblok ---------- */
.gk-contact { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(30px, 5vw, 70px); }
.gk-contact h2 {
  font-family: var(--gk-head); font-weight: 900;
  font-size: clamp(28px, 3.2vw, 46px); line-height: 1;
  text-transform: uppercase; letter-spacing: -.5px; margin: 0 0 8px;
}
.gk-contact h2 .gk-accent { color: var(--gk-orange); }
.gk-contact__aside h4 {
  font-family: var(--gk-head); font-weight: 700; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gk-orange);
  margin: 0 0 12px;
}
.gk-contact__aside a {
  display: block; font-family: var(--gk-head); font-weight: 700;
  font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
  color: #fff !important; margin-bottom: 8px;
}
.gk-contact__aside a:hover { color: var(--gk-orange) !important; }
.gk-contact__aside .gk-contact__group { margin-bottom: 40px; }

/* Ninja Forms in Gerkicks-stijl */
.gk-contact .nf-form-cont input[type=text],
.gk-contact .nf-form-cont input[type=email],
.gk-contact .nf-form-cont textarea,
.gk-contact input[type=text], .gk-contact input[type=email], .gk-contact textarea {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  font-family: var(--gk-body) !important;
}
.gk-contact .nf-field-label label,
.gk-contact label {
  font-family: var(--gk-head) !important; font-weight: 700 !important;
  font-size: 12px !important; letter-spacing: 3px !important;
  text-transform: uppercase !important; color: var(--gk-muted) !important;
}
.gk-contact input[type=button], .gk-contact input[type=submit], .gk-contact .nf-form-cont input[type=button] {
  background: var(--gk-orange) !important; color: #fff !important;
  border: 0 !important; border-radius: 0 !important;
  font-family: var(--gk-head) !important; font-weight: 700 !important;
  font-size: 13px !important; letter-spacing: 3px !important;
  text-transform: uppercase !important; padding: 16px 30px !important;
}

/* Contactformulier - extra veldtypen en afwerking */
.gk-contact .gk-formslot { aspect-ratio: auto; }

.gk-contact .nf-form-cont input[type=tel],
.gk-contact .nf-form-cont input[type=url],
.gk-contact .nf-form-cont input[type=number],
.gk-contact .nf-form-cont select,
.gk-contact input[type=tel],
.gk-contact input[type=url],
.gk-contact input[type=number],
.gk-contact select {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  font-family: var(--gk-body) !important;
}
.gk-contact .nf-form-cont input:not([type=button]),
.gk-contact .nf-form-cont textarea { height: auto !important; }
.gk-contact .nf-form-cont textarea { min-height: 150px !important; }
.gk-contact .nf-form-cont .nf-field-element { margin-bottom: 14px !important; }
.gk-contact .nf-form-cont input::placeholder,
.gk-contact .nf-form-cont textarea::placeholder {
  color: rgba(255,255,255,.45) !important; opacity: 1;
}
.gk-contact .nf-form-cont input:focus,
.gk-contact .nf-form-cont textarea:focus {
  border-color: var(--gk-orange) !important;
  box-shadow: 0 0 0 1px var(--gk-orange) !important;
  outline: none !important;
}
.gk-contact .nf-form-cont input[type=button]:hover,
.gk-contact .nf-form-cont input[type=submit]:hover {
  background: #fff !important; color: #000 !important; cursor: pointer;
}
.gk-contact .nf-form-cont .nf-error-msg {
  color: var(--gk-orange) !important;
  font-family: var(--gk-body) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.gk-contact .nf-form-cont .nf-error .nf-element {
  border-color: var(--gk-orange) !important;
}
.gk-contact .nf-error.field-wrap .nf-field-element::after {
  background: var(--gk-orange) !important;
  color: #000 !important;
  height: 44px !important;
  width: 44px !important;
  line-height: 44px !important;
  font-size: 16px !important;
  top: 5px !important;
  right: 5px !important;
  bottom: auto !important;
}
.gk-contact .nf-form-cont .nf-response-msg,
.gk-contact .nf-form-cont .nf-response-msg p { color: #fff !important; }

@media (max-width: 1024px) {
  .gk-split, .gk-contact { grid-template-columns: 1fr; }
  .gk-split--reverse .gk-split__media { order: 0; }
  .gk-split--right { text-align: left; }
  .gk-timeline { flex-direction: column; height: auto; }
  .gk-tl { flex: none; height: 210px; }
  .gk-tl.is-open { height: 300px; }
  .gk-tl__label { writing-mode: horizontal-tb; transform: none; left: 30px; bottom: 24px; }
}

/* ---------- Volledig oranje kaart (bijv. "Grenzen verleggen") ---------- */
.gk-card--solid {
  background: var(--gk-orange);
  border-color: var(--gk-orange);
  box-shadow: 0 24px 70px rgba(255,77,0,.25);
}
.gk-card--solid h3, .gk-card--solid h3 span { color: #000; }
.gk-section .gk-card--solid p { color: rgba(0,0,0,.78); }

/* ---------- Plek voor de online agenda / boekingsmodule ---------- */
.gk-agenda {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 10;
}
.gk-agenda iframe { width: 100%; height: 100%; border: 0; display: block; }

/* rechts uitgelijnde tekstkolom */
.gk-split--right h2 { text-align: right; }
.gk-split--right .gk-list li { text-align: right; padding-left: 0; padding-right: 34px; }
.gk-split--right .gk-list li::before { left: auto; right: 0; }

/* ---------- Fijnafstemming subpagina's ---------- */
/* gecentreerde eind-CTA: koppen wat rustiger, zoals in het ontwerp */
.gk-cta--center h2 { font-size: clamp(32px, 4.4vw, 74px); }

/* bredere tekstkolom waar de kop anders in vieren breekt */
.gk-blk-oplevert .gk-split { grid-template-columns: 0.45fr 1.55fr; }
.gk-blk-waarom .gk-split { grid-template-columns: 1.55fr 0.45fr; }
.gk-blk-oplevert .gk-split h2,
.gk-blk-waarom .gk-split h2 { font-size: clamp(30px, 3.8vw, 62px); }

/* plek voor het contactformulier */
.gk-formslot { position: relative; margin-top: 28px; aspect-ratio: 3 / 2; max-width: 620px; }

/* ============================================================
   Menukleur — het thema stuurt de linkkleur aan via het ID
   #primary_navigation, dus die moeten we op ID-niveau overschrijven.
   ============================================================ */
header ul#primary_navigation li a,
header ul#primary_navigation li a:link,
header ul#primary_navigation li a:visited,
header #navbarCollapse ul li a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
header ul#primary_navigation > li > a:hover,
header ul#primary_navigation > li.current-menu-item > a,
header ul#primary_navigation > li.current-page-ancestor > a,
header ul#primary_navigation > li.current-menu-parent > a {
  color: var(--gk-orange) !important;
  -webkit-text-fill-color: var(--gk-orange) !important;
}
/* de "Werk samen"-knop blijft wit op oranje */
header ul#primary_navigation > li:last-child > a,
header ul#primary_navigation > li:last-child > a:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* submenu */
header ul#primary_navigation ul li a { color: rgba(255,255,255,.85) !important; -webkit-text-fill-color: rgba(255,255,255,.85) !important; }
header ul#primary_navigation ul li a:hover { color: var(--gk-orange) !important; -webkit-text-fill-color: var(--gk-orange) !important; }

/* ============================================================
   MOBIEL MENU — beeldvullend, in Gerkicks-stijl
   Deze regels grijpen alleen aan als het menu daadwerkelijk
   geopend is (#navbarCollapse krijgt dan de class "in").
   ============================================================ */
header .navbar-toggle,
header .navbar-toggle:hover,
header .navbar-toggle:focus {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 26px !important;
  padding: 8px 10px !important;
}
header .navbar-toggle i { color: #ffffff !important; }

body:has(#navbarCollapse:is(.in,.collapsing)) { overflow: hidden; }
body:has(#navbarCollapse:is(.in,.collapsing)) header { position: fixed !important; top: 0 !important; }
body:has(#navbarCollapse:is(.in,.collapsing)) header .col-sm-10,
header .col-sm-10 { position: relative; z-index: 30; }

body.mm-fullsize #navbarCollapse:is(.in,.collapsing) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  max-height: none !important;
  height: 100% !important;
  padding: 120px 24px 60px !important;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255,77,0,.28) 0%, rgba(0,0,0,0) 60%),
    #000 !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) .menu-primaire-navigatie-container { width: 100%; }
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation {
  display: block !important; width: 100%;
  text-align: center; margin: 0 !important; padding: 0 !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation li {
  display: block !important; float: none !important; position: static !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation > li { margin: 0 0 4px !important; }
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation > li > a {
  display: block !important;
  font-family: var(--gk-head) !important;
  font-weight: 900 !important;
  font-size: clamp(26px, 7vw, 40px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.5px !important;
  text-transform: uppercase !important;
  padding: 9px 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation > li > a:hover,
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation > li.current-menu-item > a {
  color: var(--gk-orange) !important;
  -webkit-text-fill-color: var(--gk-orange) !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation ul,
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation ul[id^="sm-"] {
  position: static !important; display: block !important;
  width: auto !important; min-width: 0 !important;
  left: auto !important; right: auto !important; top: auto !important;
  margin: 0 0 10px !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  transform: none !important; opacity: 1 !important; visibility: visible !important;
  float: none !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation ul li a {
  display: block !important;
  font-family: var(--gk-head) !important; font-weight: 700 !important;
  font-size: 14px !important; letter-spacing: 3px !important;
  text-transform: uppercase !important; text-align: center !important;
  color: rgba(255,255,255,.55) !important;
  -webkit-text-fill-color: rgba(255,255,255,.55) !important;
  padding: 7px 0 !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation > li:last-child { margin-top: 26px !important; }
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation > li:last-child > a {
  position: relative; z-index: 0;
  display: inline-block !important;
  font-size: 14px !important; font-weight: 700 !important;
  letter-spacing: 3px !important; padding: 16px 34px !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation > li:last-child > a::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--gk-orange); transform: skewX(-12deg);
}

/* logo blijft boven het beeldvullende menu staan */
header .header.full-width .col-sm-10 { position: relative; z-index: 30; }
header .navbar-header { position: relative; z-index: 31; }


/* ============================================================
   Mobiel menu - geen flits tijdens open/dicht animatie
   ============================================================ */
body.mm-fullsize #navbarCollapse.collapsing {
  transition: opacity .2s ease !important;
  height: 100% !important;
  overflow-y: auto !important;
}

/* ============================================================
   Mobiel - logo groter
   ============================================================ */
@media (max-width: 991px) {
  header .header.full-width { padding: 8px 0 !important; }
  header .logo img, header .col-sm-10 img { max-height: 96px !important; max-width: 80% !important; width: auto !important; }
}
@media (max-width: 575px) {
  header .logo img, header .col-sm-10 img { max-height: 88px !important; max-width: 80% !important; }
}

/* ============================================================
   Foto's - vervangen de .gk-ph placeholders
   ============================================================ */
.gk-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border: 0; }
.gk-img--top { object-position: center 18%; }
.gk-img--face { object-position: center 28%; }
.gk-img--bottom { object-position: center 78%; }


/* ============================================================
   Mobiel menu - fijnafstelling (kolom, geen randen, socials onderaan)
   ============================================================ */
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) {
  flex-direction: column !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation > li > a {
  font-size: clamp(22px, 6.2vw, 38px) !important;
  border: 0 !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation li,
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation li a,
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation ul li a {
  border: 0 !important;
  box-shadow: none !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) .social-media {
  position: static !important;
  width: 100% !important;
  margin: 34px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  float: none !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) .social-media ul {
  display: flex !important;
  justify-content: center !important;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) .social-media ul li {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) .social-media ul li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  transition: background .2s ease, border-color .2s ease;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) .social-media ul li a:hover {
  background: var(--gk-orange) !important;
  border-color: var(--gk-orange) !important;
}
body.mm-fullsize #navbarCollapse:is(.in,.collapsing) .social-media ul li a i { color: #ffffff !important; }


/* ============================================================
   Merkenbalk met logo's + portret met draaiende badge (aug 2026)
   ============================================================ */

/* Marquee naadloos laten lopen: gap vervangen door margin, anders
   ontstaat er een sprong van een halve gap bij elke cyclus. */
.gk-marquee__track { gap: 0; }
.gk-brand { margin-right: 16px; height: 98px; }
.gk-brand img { max-width: 74%; max-height: 76%; width: auto; height: auto; object-fit: contain; }

/* Born to play different — staand portret */
.gk-about__figure {
  position: relative;
  width: min(38%, 660px);
  aspect-ratio: 2 / 3;
  margin-top: -40px;
  overflow: visible;
}
.gk-about__figure .gk-img { border-radius: 10px; object-position: center top; }
.gk-about__vignette {
  position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 35%, transparent 60%);
}
.gk-about__edge {
  position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(#ff4d00 0%, transparent 80%);
  border-radius: 10px 0 0 10px; pointer-events: none;
}

/* Draaiende badge rechtsboven op het portret */
.gk-badge-wrap { position: absolute; top: -18px; right: -18px; width: 130px; height: 130px; z-index: 10; }
.gk-badge-ring { position: absolute; inset: 0; transform-origin: center center; animation: gkBadgeSpin 14s linear infinite; }
.gk-badge-ring svg { width: 100%; height: 100%; }
.gk-badge-ring text { font-family: var(--gk-head), sans-serif; font-size: 13px; letter-spacing: 2.2px; }
.gk-badge-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
@keyframes gkBadgeSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gk-badge-ring { animation: none; } }

@media (max-width: 1024px) {
  .gk-about__figure { width: 100%; max-width: 460px; aspect-ratio: 3 / 4; margin: 40px auto 0; }
  .gk-badge-wrap { width: 96px; height: 96px; top: -12px; right: -12px; }
}
@media (max-width: 782px) {
  .gk-about__figure { margin-top: 30px; }
  .gk-badge-wrap { width: 84px; height: 84px; top: -10px; right: -10px; }
}


/* ============================================================
   Correcties mobiel (aug 2026)
   ============================================================ */

/* De draaiende badge is een vierkant element; tijdens het draaien werd zijn
   bounding box breder en smaller, waardoor de pagina op mobiel steeds een
   paar pixels breder/smaller werd. Clippen op de cirkel houdt de breedte
   stabiel en is visueel identiek. */
.gk-badge-wrap { overflow: hidden; border-radius: 50%; }

/* Op smalle schermen is de uitsnede 3:4; met 'center top' viel het gezicht
   buiten beeld. */
@media (max-width: 1024px) {
  .gk-about__figure .gk-img { object-position: center 25%; }
}

/* Mobiel menu: submenu's stonden altijd opengeklapt. Nu dicht tot de
   bezoeker op het pijltje tikt (zie het script in Script footer). */
@media (max-width: 991px) {
  body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation ul,
  body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation ul[id^="sm-"] {
    display: none !important;
  }
  body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation li.gk-sub-open > ul,
  body.mm-fullsize #navbarCollapse:is(.in,.collapsing) ul#primary_navigation li.gk-sub-open > ul[id^="sm-"] {
    display: block !important;
  }
  #navbarCollapse .sub-arrow { transition: transform .25s ease; }
  #navbarCollapse li.gk-sub-open > a .sub-arrow { transform: rotate(180deg); }
}

/* Mobiel menu: het pijltje kreeg van het thema z-index: -1 onder 769px,
   waardoor het achter de link lag. Een tik landde daardoor altijd op de
   <a> (navigeren) in plaats van op het pijltje (uitklappen). Hier zetten
   we het pijltje weer naar voren en vergroten we het tikvlak naar 44px. */
@media only screen and (max-width: 768px) {
  header nav.navbar-default ul.navbar-nav span.caret { z-index: 2; }
  header nav.navbar-default ul.navbar-nav span.caret::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}


/* ===========================================================
   Correcties n.a.v. feedback Gerkicks - 24-08-2026
   =========================================================== */

/* Merklogo's: hoveren vergroot het logo en zet ALLE rijen stil,
   zoals in het ontwerp (stond alleen per rij ingesteld). */
.gk-marquee { padding: 10px 0; margin-bottom: 6px; }
.gk-brands:hover .gk-marquee__track { animation-play-state: paused; }
.gk-brand { transition: transform .3s cubic-bezier(.22,.68,0,1.4), box-shadow .3s; }
.gk-brand:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 28px rgba(0,0,0,.5), 0 0 0 1.5px rgba(255,77,0,.5);
  position: relative;
  z-index: 2;
}

/* Grote quote op home: de <p> binnen de blockquote pakte de standaard
   tekststijl van .gk-section (17px) in plaats van de quote-stijl. */
.gk-quotes__grid blockquote p {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}

/* Oranje waardekaart: de hele kop moet zwart zijn.
   "Grenzen" bleef wit omdat alleen de <span> een kleur kreeg. */
.gk-card--solid h3,
.gk-card--solid h3 span { color: var(--gk-black) !important; }

/* Tekstkolom verticaal centreren naast het beeld (zoals in het ontwerp). */
.gk-split { align-items: center; }

/* Uitsnede voor liggende/hoge foto's waar het onderwerp onderin zit
   (o.a. "Op het podium" in de tijdlijn - toonde eerst het plafond). */
.gk-img--podium { object-position: 80% 90%; }


/* ============================================================
   Correcties n.a.v. feedback Gerkicks - 25-08-2026 (ronde 2)
   ============================================================ */

/* Quote op home: in het ontwerp staat deze in Barlow 800 op 48px
   (niet Barlow Condensed 900 op 40px) en zijn beide kolommen even
   breed. Daardoor oogde de quote een stuk kleiner dan in het ontwerp. */
@media (min-width: 1025px) {
  .gk-quotes__grid { grid-template-columns: 1fr 1fr; }
}
.gk-section .gk-quotes__grid blockquote,
.gk-section .gk-quotes__grid blockquote p {
  font-family: var(--gk-body);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: normal;
}


/* ============================================================
   Correcties n.a.v. feedback Gerkicks - 25-08-2026 (ronde 3)
   ============================================================ */

/* Hero: in het ontwerp is de titel 120px en is de tekstkolom 720px breed.
   Die kolom stond hier op 640px, waardoor de titel verkleind moest worden
   om "LIVING WITH NO" op een regel te houden. */
@media (min-width: 1025px) {
  .gk-hero p { max-width: 720px; }
  .gk-hero h1 { font-size: clamp(44px, 9vw, 120px); }
}

/* "Born to play different" stond op 5.2vw (76px); het ontwerp schaalt
   vloeiend van ~65px naar ~68px op desktop. */
.gk-about h2 { font-size: clamp(38px, calc(41px + 1.7vw), 76px); }


/* ============================================================
   Correcties n.a.v. feedback Gerkicks - 25-08-2026 (ronde 4)
   ============================================================ */

/* "Services" en "De Beweging." staan in het ontwerp als gewone witte
   kop van 96px in de tekstkolom, met de introtekst ernaast. Hier waren
   het reusachtige, bijna onzichtbare achtergrondwoorden. */
@media (min-width: 1025px) {
  .gk-services,
  .gk-movement {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
  }
  .gk-services .gk-bigword,
  .gk-movement .gk-bigword {
    position: static;
    transform: none !important;
    color: var(--gk-white);
    font-size: clamp(40px, 6.6vw, 96px);
    line-height: .9;
    letter-spacing: -1px;
    pointer-events: auto;
    margin: 0;
  }
  .gk-services > p:empty,
  .gk-movement > p:empty { display: none; }
  .gk-services__intro,
  .gk-movement__intro { margin-bottom: 0; max-width: 500px; text-align: left; }
  .gk-services .gk-acc,
  .gk-movement .gk-gallery { flex: 0 0 100%; margin-top: 60px; }
}

/* Mobiel: zelfde kop, alleen kleiner en boven de introtekst. */
@media (max-width: 1024px) {
  .gk-services .gk-bigword,
  .gk-movement .gk-bigword {
    position: static;
    transform: none !important;
    display: block;
    white-space: normal;
    color: var(--gk-white);
    font-size: clamp(34px, 8vw, 60px);
    line-height: .95;
    letter-spacing: -1px;
    pointer-events: auto;
    margin: 0 0 24px;
  }
}

/* Sectiekoppen op de subpagina's: het ontwerp gebruikt 96px, hier stond 72px. */
.gk-block__title { font-size: clamp(40px, 6.6vw, 96px); line-height: .9; }

/* =========================================================
   FAQ - veelgestelde vragen (contact) - 27-08-2026
   ========================================================= */
.gk-faq__list { position: relative; z-index: 1; }
.gk-faq__item { margin-bottom: 15px; }
.gk-faq__item:last-child { margin-bottom: 0; }
.gk-faq__q {
  display: flex; align-items: center; gap: 10px;
  list-style: none; cursor: pointer; padding: 10px 10px 10px 0;
  font-family: var(--gk-head); font-weight: 800;
  font-size: clamp(24px, 3.3vw, 48px);
  line-height: 1; text-transform: uppercase;
  color: var(--gk-white); transition: color .2s ease;
}
.gk-faq__q::-webkit-details-marker { display: none; }
.gk-faq__q::before {
  content: "+"; flex: 0 0 auto;
  font-family: var(--gk-body); font-weight: 400; line-height: 1;
  font-size: clamp(13px, .32em, 17px);
}
.gk-faq__item[open] > .gk-faq__q::before { content: "\2013"; }
.gk-faq__q:hover, .gk-faq__item[open] > .gk-faq__q { color: var(--gk-orange); }
.gk-faq__a { padding: 4px 0 16px 20px; animation: gkFaqIn .25s ease; }
@keyframes gkFaqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .gk-faq__q { padding: 8px 0; gap: 8px; }
  .gk-faq__a { padding: 4px 0 14px 18px; }
}

/* Reactietijd-blok in de contact-aside */
.gk-contact__aside p { color: var(--gk-text); font-size: 15px; line-height: 1.7; margin: 0; }

/* ---------------------------------------------------------
   27-08-2026 - Feedback Dennis
   --------------------------------------------------------- */

/* 1. Ghost-knop was slecht leesbaar op hover (oranje tekst op oranje waas).
      Nu net als in het ontwerp: transparant met oranje gloed. */
.gk-btn--ghost:hover { background: transparent; border-color: var(--gk-orange); box-shadow: 0 10px 36px rgba(255,77,0,.45); }

/* 2. "Born to play different": tekst naast de foto i.p.v. erboven (desktop). */
@media (min-width: 1025px) {
  .gk-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(38%, 520px);
    gap: clamp(24px, 4vw, 62px);
    align-items: center;
  }
  .gk-about__figure { width: 100%; margin-top: 0; margin-left: 0; }
}

/* 3. Solid knop (o.a. "Werk met Gerkicks") kreeg bij hover oranje tekst
      door de globale a:hover-regel; tekst blijft nu wit. */
a.gk-btn:not(.gk-btn--ghost):hover,
a.gk-btn:not(.gk-btn--ghost):focus,
a.gk-btn:not(.gk-btn--ghost):hover > span,
a.gk-btn:not(.gk-btn--ghost):focus > span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
a.gk-btn--ghost:hover,
a.gk-btn--ghost:focus,
a.gk-btn--ghost:hover > span,
a.gk-btn--ghost:focus > span {
  color: var(--gk-orange) !important;
  -webkit-text-fill-color: var(--gk-orange) !important;
}