/* ---------------------------------------------------------------------------
   Aanpassingen bovenop het thema.
   Staat los van theme/ zodat een nieuwe thema-export deze wijzigingen niet
   overschrijft. Wordt als laatste ingeladen, dus wint van de themastijlen.
   --------------------------------------------------------------------------- */

/* Menu: geen pijltjes achter de items met een submenu. Het thema zet daar een
   caret-svg neer die er op desktop rommelig uitziet.
   De selector mikt op de svg die direct in de menulink staat, niet op de icoontjes
   rechtsboven (account, telefoon) die wel moeten blijven. */
.header--navigation-list .header--menu-link > svg,
.header--menu-item.has-children > header-menu > a > svg,
.header--navigation-list a.header--menu-link svg {
  display: none !important;
}

/* De ruimte die het pijltje innam mag weg, anders blijft er een gat staan. */
.header--navigation-list .header--menu-link {
  gap: 0 !important;
}

/* De drie dienstenkaarten op de homepage (desktop).
   Hoeken blijven zoals het thema ze had; alleen de verhouding is aangepast.
   De sectie rekte zichzelf op tot de volledige schermhoogte, waardoor de
   kaarten extreem hoge rechthoeken werden. Dit haalt die oprekking eraf en
   geeft de media een 4:5-verhouding, dus compacter en dichter bij vierkant.
   `html` voor de id-selector geeft net genoeg gewicht om te winnen van de
   sectie-eigen stijlen, die ook !important gebruiken. */
@media (min-width: 990px) {
  html #shopify-section-dienstverlening_pc_studiehub_TYCUEc,
  html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-pc-section {
    min-height: 0 !important;
    height: auto !important;
  }

  html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-pc-item {
    height: auto !important;
  }

  html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-pc-image {
    aspect-ratio: 4 / 5 !important;
    flex: none !important;
  }
}

/* --------------------------------------------------------------- bedankt --
   De bedankpagina's kwamen uit het thema als een kale tekstregel. Dit maakt er
   een volwaardige pagina van die past bij de rest van de site.
   -------------------------------------------------------------------------- */

.bedankt--wrapper {
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  background: var(--body_background, #232323);
}

.bedankt--kaart {
  max-width: 620px;
  width: 100%;
  text-align: center;
}

.bedankt--vink {
  width: 68px;
  height: 68px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: #0f945d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bedankt--vink svg {
  width: 32px;
  height: 32px;
  stroke: #ffffff;
  stroke-width: 3;
  fill: none;
}

.bedankt--titel {
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: #ffffff;
}

.bedankt--tekst {
  font-size: 17px;
  line-height: 1.7;
  color: #b6bbc2;
  margin: 0 auto 32px;
  max-width: 480px;
}

.bedankt--referentie {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #9aa0a8;
  margin-bottom: 32px;
}

.bedankt--knoppen {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.bedankt--knop {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.bedankt--knop:hover {
  opacity: 0.85;
}

.bedankt--knop-primair {
  background: #0f945d;
  color: #ffffff;
}

.bedankt--knop-secundair {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.bedankt--klein {
  margin: 28px 0 0;
  font-size: 14px;
  color: #9aa0a8;
}

.bedankt--klein a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

/* Op mobiel de knoppen naast elkaar houden, zoals in de rest van de huisstijl. */
@media (max-width: 480px) {
  .bedankt--knoppen {
    flex-wrap: nowrap;
  }

  .bedankt--knop {
    flex: 1;
    padding: 15px 12px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------ ripple-fix --
   Het thema voegt bij een klik op de CTA-knoppen een .button-ripple span toe
   ter grootte van de knop, maar de bijbehorende CSS ontbreekt volledig. Een
   ongestileerde span van die maat rekt de knop 600ms op: de "knop wordt
   supergroot"-glitch. Dit is de CSS die erbij had moeten zitten.
   -------------------------------------------------------------------------- */
a.button:has(.button-ripple),
button:has(.button-ripple),
.cta-button,
.desktop-cta-button {
  position: relative;
  overflow: hidden;
}

.button-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: sh-ripple 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes sh-ripple {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* -------------------------------------------------------------- icon-flash --
   De header rendert eerst de originele iconenset (zoeken/account/winkelwagen)
   en verruilt die pas ná DOMContentLoaded voor de eigen iconenrij. Die
   fractie van een seconde zie je de verkeerde iconen staan. De originele set
   dient alleen als donor voor het winkelwagen-element en hoeft dus nooit
   zichtbaar te zijn; verplaatsen uit een verborgen ouder werkt gewoon.
   -------------------------------------------------------------------------- */
.header-icons-original {
  display: none !important;
}

/* ------------------------------------------------- kaartteksten homepage --
   De koppen op de drie dienstenkaarten waren op desktop nauwelijks groter dan
   de lopende tekst. */
@media (min-width: 990px) {
  html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay {
    padding: 28px !important;
  }

  html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay h2,
  html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay h3,
  html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay [class*="heading"] {
    font-size: clamp(24px, 1.9vw, 30px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }

  html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay p,
  html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay [class*="description"] {
    font-size: 16px !important;
  }
}

/* ------------------------------------------------------------ designbrief --
   Wijzigingen uit de designbrief van 3 augustus.
   -------------------------------------------------------------------------- */

/* Reviews: teamfoto met zware donkere laag, dezelfde behandeling als de
   contact/FAQ-sectie en over ons. De randen lopen dicht naar het omliggende
   donkergrijs, zodat de foto zacht uit het donker opkomt. */
.section-google-reviews .google-reviews-modern {
  background:
    linear-gradient(180deg,
      rgba(35, 35, 35, 1) 0%,
      rgba(35, 35, 35, 0.93) 110px,
      rgba(35, 35, 35, 0.95) calc(100% - 110px),
      rgba(35, 35, 35, 1) 100%),
    url("/assets/media/img/Hurkshot_3aeee360-0e69-415e-b000-371dabef7a31.jpg") center / cover no-repeat !important;
}

/* De reviewkaarten zelf volledig ondoorzichtig, donkere kaartstijl. */
.section-google-reviews .review-card {
  background: #1c1c1c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.section-google-reviews .review-card *,
.section-google-reviews .rating-number,
.section-google-reviews .rating-subtitle,
.section-google-reviews .reviews-header {
  color: #ffffff !important;
}

.section-google-reviews .review-card p,
.section-google-reviews .review-date,
.section-google-reviews .rating-subtitle {
  color: #b6bbc2 !important;
}

/* Tekstverzorging en knoppen die nooit mogen afbreken. */
body {
  text-wrap: pretty;
}

.button,
.missie--knop,
.bedankt--knop,
.trainingen--knop {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ------------------------------------------------------------- garantie -- */

.garantie--wrapper {
  padding: clamp(48px, 7vw, 88px) 0;
  background: #232323;
}

.garantie--container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.garantie--blok {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: 56px;
  border: 1px solid rgba(15, 148, 93, 0.45);
  border-radius: 30px;
  background: linear-gradient(120deg, rgba(15, 148, 93, 0.10), rgba(15, 148, 93, 0) 60%);
}

.garantie--kop {
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0 0 16px;
}

.garantie--kop-accent {
  color: #0f945d;
}

.garantie--body {
  font-size: 16px;
  line-height: 1.7;
  color: #b6bbc2;
  margin: 0;
  max-width: 46ch;
}

.garantie--punten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.garantie--punten li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.5;
  color: #ffffff;
}

/* Groene cirkel met het vinkje als SVG erin: altijd exact gecentreerd,
   zonder handmatig gepixel met losse randjes. */
.garantie--punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #0f945d;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5 9.5 L8 12.5 L13.2 6.5" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
}

.garantie--punten li::after {
  content: none;
}

@media (max-width: 1000px) {
  .garantie--blok {
    grid-template-columns: 1fr;
    padding: 36px 28px;
  }
}

/* ===========================================================================
   Porsche-geïnspireerde verfijning (augustus 2026).
   Zes losse blokken; een blok verwijderen draait dat ene onderdeel terug.
   ========================================================================== */

/* -- 1. haarlijn + lucht -----------------------------------------------------
   Twee donkere secties na elkaar krijgen een dunne scheidingslijn met extra
   witruimte. De klasse `sectie-lijn` komt uit de build. */
.sectie-lijn {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: clamp(20px, 3vw, 44px);
}

/* Bij secties met een fotoachtergrond geen haarlijn en geen extra padding:
   de randen lopen daar al zacht over in de buursecties, en een scherpe lijn
   bovenop die overgang vloekt. Gewone donkere secties (zoals op over ons)
   houden hun lijn gewoon. */
.sectie-lijn.section-contact-form,
.sectie-lijn.section-google-reviews,
.sectie-lijn.section-bijles-tarieven {
  border-top: none;
  padding-top: 0;
}

/* De teamkaarten van de statistieken hangen over de sectie eronder heen; een
   haarlijn op die volgende sectie loopt dan dwars door de kaarten. Daar dus
   geen lijn. */
.section-statistieken + .shopify-section.sectie-lijn {
  border-top: none;
}

/* -- videopopup: kruisje netjes binnen de hoek van het venster -------------- */
html .pb-video-modal__close {
  top: 14px !important;
  right: 14px !important;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Tarieven: op desktop de foto op ware breedte, nooit ingezoomd (dat maakte
   hem korrelig). Valt de sectie hoger uit dan de foto, dan vullen de randen
   donker aan; de randzwemen hierboven maskeren dat. */
@media (min-width: 990px) {
  html .section-bijles-tarieven .section-wrapper {
    background-size: 100% auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #232323 !important;
  }
}

/* Tarieven: de foto blijft licht, maar de boven- en onderrand smelten met een
   subtiele donkere zweem in de omliggende secties. */
.section-bijles-tarieven .section-wrapper {
  position: relative;
}

.section-bijles-tarieven .section-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(35, 35, 35, 0.6) 0, rgba(35, 35, 35, 0) 110px),
    linear-gradient(0deg, rgba(35, 35, 35, 0.6) 0, rgba(35, 35, 35, 0) 110px);
}

.section-bijles-tarieven .section-wrapper > * {
  position: relative;
  z-index: 1;
}

/* -- 2. eyebrow-labels -------------------------------------------------------
   Klein groen kapitaallabel boven sectiekoppen. */
.sh-eyebrow {
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0f945d;
  margin: 0 0 14px;
}

/* Het bestaande teamlabel ("Ons team") in dezelfde stijl. */
.tsp__kicker {
  color: #0f945d !important;
  letter-spacing: 0.22em !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* -- 3. pijl-links -----------------------------------------------------------
   Secundaire acties als tekstlink met groene pijl in plaats van een tweede
   knop; de primaire knop ernaast krijgt zo meer gewicht. */
.missie--knop-secundair,
.bedankt--knop-secundair {
  background: transparent;
  border: none;
  padding-left: 6px;
  padding-right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.missie--knop-secundair::after,
.bedankt--knop-secundair::after {
  content: "";
  width: 19px;
  height: 13px;
  flex: none;
  background: #0f945d;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 14"><path d="M0 7 H21 M15 1 l7 6 -7 6" stroke="black" stroke-width="2.2" fill="none"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 14"><path d="M0 7 H21 M15 1 l7 6 -7 6" stroke="black" stroke-width="2.2" fill="none"/></svg>') no-repeat center / contain;
  transition: transform 0.2s ease;
}

.missie--knop-secundair:hover,
.bedankt--knop-secundair:hover {
  opacity: 1;
}

.missie--knop-secundair:hover::after,
.bedankt--knop-secundair:hover::after {
  transform: translateX(5px);
}

/* -- 4. statistieken ---------------------------------------------------------
   Grote dunne cijfers met verticale haarlijnen; de krabbel-onderstreping weg. */
.tsp__underline {
  display: none !important;
}

.tsp__statValue {
  font-weight: 700 !important;
  font-size: clamp(48px, 4.6vw, 68px) !important;
  letter-spacing: -0.03em !important;
}

.tsp__statUnit {
  font-weight: 700 !important;
}

.tsp__statLabel {
  font-weight: 400 !important;
  color: #9aa0a8 !important;
}

/* -- 5. hover-zoom op kaarten ------------------------------------------------
   Beeld zoomt heel licht in bij hover; de kaart zelf blijft stil. */
.dienstverlening-pc-image {
  overflow: hidden;
}

.dienstverlening-pc-image img,
.dienstverlening-pc-image video,
.article--card img,
.blog--card img {
  transition: transform 0.45s ease;
}

.dienstverlening-pc-item:hover .dienstverlening-pc-image img,
.dienstverlening-pc-item:hover .dienstverlening-pc-image video,
.article--card:hover img,
.blog--card:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .dienstverlening-pc-image img,
  .dienstverlening-pc-image video,
  .article--card img,
  .blog--card img {
    transition: none;
  }

  .dienstverlening-pc-item:hover .dienstverlening-pc-image img,
  .dienstverlening-pc-item:hover .dienstverlening-pc-image video,
  .article--card:hover img,
  .blog--card:hover img {
    transform: none;
  }
}

/* -- 6. swipe-rail op mobiel -------------------------------------------------
   Trainingskaarten horizontaal scrollbaar met snap, in plaats van gestapeld. */
@media (max-width: 767px) {
  .trainingen--grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 4px 20px 18px;
    scrollbar-width: none;
  }

  .trainingen--grid::-webkit-scrollbar {
    display: none;
  }

  .trainingen--kaart {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
}

/* ===========================================================================
   Feedbackronde live site (15 augustus).
   ========================================================================== */

/* -- actieblok "Niet over? Geld terug!" --------------------------------------
   Zelfde taal als het garantieblok (donker, groene rand, zacht groen verloop),
   zodat de actie opvalt zonder uit de huisstijl te stappen. De klasse
   `sectie-actie` komt uit de build (rich-text met "Geld terug!" erin). */
.sectie-actie .section-wrapper {
  background: #232323 !important;
}

.sectie-actie .richtext--content {
  max-width: 880px !important;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 64px) !important;
  border: 1px solid rgba(15, 148, 93, 0.45);
  border-radius: 30px;
  background: linear-gradient(120deg, rgba(15, 148, 93, 0.10), rgba(15, 148, 93, 0) 60%);
}

.sectie-actie .richtext--content::before {
  content: "actie \00B7 geldig tot 1 oktober";
  display: block;
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0f945d;
  margin-bottom: 14px;
}

.sectie-actie .richtext--heading {
  font-size: clamp(30px, 4.4vw, 50px) !important;
  letter-spacing: -0.03em;
  color: #ffffff !important;
  margin-bottom: 12px;
}

.sectie-actie .richtext--description,
.sectie-actie .richtext--description p {
  font-size: 16px;
  line-height: 1.7;
  color: #b6bbc2 !important;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.sectie-actie .richtext--description strong {
  color: #ffffff;
}

/* -- trainingskaarten: nog niet boekbaar ------------------------------------ */
.trainingen--kaart-wacht {
  cursor: default;
}

.trainingen--kaart-wacht:hover {
  border-color: rgba(255, 255, 255, 0.1);
  transform: none;
}

.trainingen--knop-wacht {
  background: transparent !important;
  color: #9aa0a8 !important;
  border: 1px dashed rgba(255, 255, 255, 0.28);
}

/* -- sticky CTA-balk (mobiel) ------------------------------------------------
   Verschijnt na het eerste scherm; knoppen naast elkaar, veilig boven de
   iPhone-balk via safe-area-inset. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(28, 28, 28, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(110%);
  transition: transform 0.3s ease;
}

.sticky-cta--zichtbaar {
  transform: translateY(0);
}

.sticky-cta--knop {
  flex: 1;
  text-align: center;
  padding: 14px 10px;
  border-radius: 999px;
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sticky-cta--primair {
  background: #0f945d;
  color: #ffffff;
}

.sticky-cta--secundair {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

@media (max-width: 767px) {
  .sticky-cta {
    display: flex;
  }
}

/* -- statistieken op mobiel --------------------------------------------------
   Geen metershoge stapel meer: drie dunne cijfers naast elkaar, zoals op
   desktop, alleen compacter. */
@media (max-width: 767px) {
  .tsp__stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    align-items: start;
  }

  .tsp__stat {
    padding-left: 0;
    text-align: left !important;
  }

  .tsp__statValue {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .tsp__statLabel {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

/* ===========================================================================
   Feedbackronde 2 (15 augustus).
   ========================================================================== */

/* -- teamkop en fasenummers vetter, tarieventitels minder vet -------------- */
.tsp__heading {
  font-family: var(--heading_font_family, Poppins), sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

.missie--fase-nummer {
  font-weight: 800;
}

.product--title {
  font-weight: 600 !important;
}

/* -- FAQ: lucht onder de laatste antwoordregel ------------------------------ */
.faq-item.is-open .faq-answer {
  padding-bottom: 32px !important;
}

/* -- contactformulier: breed genoeg om niet de hoogte in te schieten -------- */
@media (min-width: 990px) {
  /* De sectie zet zijn eigen breedte met !important; deze selector is
     specifieker en wint daardoor alsnog. */
  html [class*="section-contact_form"] .modern-contact-container,
  html .modern-contact-container {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Losstaand formulier (zonder locaties/FAQ ernaast) nog compacter. */
  html [class*="section-contact_form"] .modern-contact-container:has(.contact-grid.one-column),
  html .modern-contact-container:has(.contact-grid.one-column) {
    max-width: 820px !important;
  }
}

/* Losstaand formulier: de buitenrand weg, anders zit er een kader om een
   kader. De binnenkaart is het formulier zelf. */
.modern-contact-container:has(.contact-grid.one-column) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-top: 0 !important;
}

/* -- inschrijfformulier ------------------------------------------------------ */
.inschrijf--wrapper {
  padding: clamp(48px, 7vw, 88px) 20px;
  background: #232323;
}

.inschrijf--container {
  max-width: 720px;
  margin: 0 auto;
}

.inschrijf--kop {
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 12px;
}

.inschrijf--intro {
  font-size: 16px;
  line-height: 1.7;
  color: #b6bbc2;
  margin: 0 0 32px;
  max-width: 52ch;
}

.inschrijf--formulier {
  background: #ffffff;
  border-radius: 18px;
  padding: clamp(22px, 3.5vw, 36px);
  display: grid;
  gap: 16px;
}

.inschrijf--rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .inschrijf--rij {
    grid-template-columns: 1fr;
  }
}

.inschrijf--veld {
  display: grid;
  gap: 6px;
}

.inschrijf--veld span {
  font-size: 13px;
  font-weight: 600;
  color: #232323;
}

.inschrijf--veld input,
.inschrijf--veld select,
.inschrijf--veld textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fafafa;
  color: #232323;
  font-size: 15px;
  font-family: inherit;
}

.inschrijf--veld input:focus,
.inschrijf--veld select:focus,
.inschrijf--veld textarea:focus {
  outline: none;
  border-color: #0f945d;
  box-shadow: 0 0 0 3px rgba(15, 148, 93, 0.15);
}

.inschrijf--knop {
  background: #0f945d;
  color: #ffffff;
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 24px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.inschrijf--knop:hover {
  background: #0c7c4e;
}

.inschrijf--klein {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6c727c;
  text-align: center;
}

.inschrijf--klein a {
  color: #0f945d;
  font-weight: 600;
  text-decoration: none;
}

/* -- inschrijfformulier: kopjes en vinkgroepen ------------------------------ */
.inschrijf--kopje {
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #232323;
  margin: 14px 0 0;
  padding-bottom: 6px;
  border-bottom: 2px solid #0f945d;
  width: fit-content;
}

.inschrijf--vinkgroep {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  margin: 0;
}

.inschrijf--vinkgroep legend {
  font-size: 13px;
  font-weight: 600;
  color: #232323;
  padding: 0 6px;
}

.inschrijf--vinkgroep label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #4a4f57;
}

.inschrijf--vinkgroep input,
.inschrijf--akkoord input {
  width: 17px;
  height: 17px;
  accent-color: #0f945d;
}

.inschrijf--akkoord {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #4a4f57;
}

.inschrijf--akkoord a {
  color: #0f945d;
  font-weight: 600;
}

.inschrijf--rij-straat {
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 640px) {
  .inschrijf--rij-straat {
    grid-template-columns: 1fr;
  }
}

/* -- beleidspagina's --------------------------------------------------------- */
.beleid--wrapper {
  background: #fafbfa;
  padding: clamp(48px, 7vw, 96px) 20px;
}

.beleid--document {
  max-width: 720px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e6e9e6;
  border-radius: 18px;
  padding: clamp(28px, 5vw, 56px);
}

.beleid--titel {
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.5vw, 44px);
  letter-spacing: -0.03em;
  color: #232323;
  margin: 0 0 6px;
}

.beleid--datum {
  font-size: 13px;
  color: #6c727c;
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6e9e6;
}

.beleid--inhoud {
  font-size: 15.5px;
  line-height: 1.75;
  color: #4a4f57;
}

.beleid--inhoud h2 {
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-weight: 700;
  font-size: 19px !important;
  letter-spacing: -0.01em;
  color: #232323 !important;
  margin: 30px 0 10px;
}

.beleid--inhoud p {
  margin: 0 0 14px;
  color: #4a4f57 !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
}

.beleid--inhoud ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.beleid--inhoud li {
  margin-bottom: 8px;
  color: #4a4f57 !important;
  font-size: 15.5px !important;
}

.beleid--inhoud a,
.beleid--inhoud a:visited,
.beleid--inhoud a:active {
  color: #0f945d !important;
  font-weight: 600;
  text-decoration: none;
}

.beleid--inhoud strong {
  color: #232323;
}

/* Visueel verborgen, wel leesbaar voor zoekmachines en schermlezers. */
.sr-alleen {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* -- blogartikelen in de huisstijl -------------------------------------------
   De rte-tekststijl van het thema pakt eigen fonts en kleuren; hier wordt hij
   gelijkgetrokken met de rest van de site. */
.main-article--body h1,
.main-article--body h2,
.main-article--body h3 {
  font-family: var(--heading_font_family, Poppins), sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
}

.main-article--body h1,
.main-article--body h2 {
  font-size: clamp(30px, 4.4vw, 46px) !important;
  margin: 0 0 22px !important;
}

.main-article--body h3 {
  font-size: 22px !important;
  margin: 28px 0 10px !important;
}

.main-article--body p {
  font-family: var(--body_font_family, 'Instrument Sans'), sans-serif !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #b6bbc2 !important;
  max-width: 66ch;
  margin: 0 0 16px !important;
}

.main-article--body a {
  color: #0f945d !important;
  font-weight: 600;
  text-decoration: none;
}

.main-article--body a:hover {
  text-decoration: underline;
}

/* -- artikelpagina: meta-kolom rechts (alleen desktop) ---------------------- */
@media (min-width: 990px) {
  .section-main-article .container-sm {
    max-width: 1120px !important;
  }

  .main-article--content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 56px;
    align-items: start;
  }

  /* Lege kop met social-share-lijst; duwt anders de tekst omlaag. */
  .main-article--content > .main-article--content-header {
    display: none;
  }

  .main-article--content > .main-article--body {
    grid-column: 1;
    grid-row: 1;
  }

  .artikel--meta {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    /* optisch gelijk met de bovenkant van de artikelkop (de tekstkolom
       heeft 56px eigen padding) */
    padding-top: 60px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 28px;
    display: grid;
    gap: 20px;
  }
}

@media (max-width: 989px) {
  .artikel--meta {
    display: none;
  }
}

.artikel--meta-label {
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0f945d;
  margin: 0 0 4px;
}

.artikel--meta-waarde {
  font-size: 15px;
  color: #ffffff;
  margin: 0;
}

.artikel--meta-knop {
  display: inline-block;
  margin-top: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #0f945d;
  color: #ffffff;
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

.artikel--meta-knop:hover {
  background: #0c7c4e;
}

/* -- artikelpagina: video en tekst dichter op elkaar, play-knop ------------- */
.section-video-solooo,
.section-video-solo {
  --bottom_spacing: 18px !important;
}

.section-main-article {
  --top_spacing: 14px !important;
}

.main-article--body {
  padding-top: 8px !important;
}

@media (min-width: 990px) {
  .artikel--meta {
    padding-top: 12px !important;
  }
}

/* "Bekijk de video" met een play-knop erboven. */
.video-overlay-center .video-heading-below {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.video-overlay-center .video-heading-below::before {
  content: "";
  width: 56px;
  height: 56px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><circle cx="28" cy="28" r="26" fill="rgba(255,255,255,0.14)" stroke="white" stroke-width="2"/><path d="M23 18 L39 28 L23 38 Z" fill="white"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

/* ===========================================================================
   Feedbackronde 3.
   ========================================================================== */

/* -- statistieken: nooit mid-woord afbreken, mobiel gecentreerd ------------- */
.tsp__statLabel {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  max-width: none !important;
}

@media (max-width: 767px) {
  .tsp__stats {
    gap: 10px !important;
  }

  .tsp__stat {
    text-align: center !important;
  }

  .tsp__statTop {
    justify-content: center !important;
  }

  .tsp__statLabel {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* -- koppen overal consequent vet ------------------------------------------- */
.section--heading,
.section--heading strong,
.section--heading b,
.section--heading span {
  font-family: var(--heading_font_family, Poppins), sans-serif !important;
  font-weight: 700 !important;
}

h1.heading-font,
h2.heading-font,
h3.heading-font,
.dienstverlening-overlay__heading,
.dienstverlening-content-overlay h2,
.dienstverlening-content-overlay h3 {
  font-weight: 700 !important;
}

.dienstverlening-button,
.dienstverlening-button span {
  font-family: var(--heading_font_family, Poppins), sans-serif !important;
  font-weight: 600 !important;
}

/* -- garantie: vinkjes strak gecentreerd ------------------------------------ */
.garantie--punten li::before {
  top: 2px;
}

.garantie--punten li::after {
  left: 5px;
  top: 7px;
  width: 8px;
  height: 4px;
}

/* -- trainingskaarten: niets afkappen ---------------------------------------- */
.trainingen--grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}

.trainingen--kaart {
  overflow: visible;
}

.trainingen--vak {
  white-space: normal;
  overflow-wrap: normal;
}

.trainingen--badge {
  white-space: nowrap;
}

/* -- hero dienstpagina's: rustiger rechterkolom -----------------------------
   De foto-achtergrond zelf staat in video-pc.liquid (ID-regel, wint van
   alles); hier alleen de opmaak van de rechterkolom. */

/* Meer lucht tussen de hero en de sectie erna ("onze aanpak") — alleen op
   desktop; op mobiel werd de afstand juist te groot. */
@media (min-width: 990px) {
  .section-video-pc .section-spacing {
    padding-bottom: calc(var(--bottom_spacing, 30px) + 48px) !important;
  }
}

/* Mobiel: de agenda (trainingen) dichter op de hero. */
@media (max-width: 989px) {
  .trainingen--wrapper {
    padding-top: 28px !important;
  }
}

/* Sterren overal in huisstijlgroen; lege sterren blijven gedimd. */
.section-video-pc .gr-stars,
.section-google-reviews .stars,
.section-google-reviews .review-stars,
.section-google-reviews .star-full,
.section-google-reviews .star-half {
  color: #0f945d !important;
}

.section-video-pc .gr-stars .star-empty,
.section-google-reviews .star-empty {
  color: rgba(255, 255, 255, 0.15) !important;
}

/* Blogartikelen: het eerste woord van de kop in het groen (build zet de span). */
.artikel-groen {
  color: #0f945d;
}

/* Statistieken mobiel: de "+" achter 2000 telde mee in de breedte, waardoor
   het getal een fractie uit het midden stond. De unit hangt nu rechts van het
   getal zonder ruimte in te nemen. */
@media (max-width: 989px) {
  .tsp__statTop {
    position: relative;
  }

  .tsp__statUnit {
    position: absolute;
    left: 100%;
    bottom: 0.2em;
  }
}

/* -- transparante header boven de hero-foto ---------------------------------
   Alleen op pagina's met de video-pc-hero (de dienst- en locatiepagina's):
   de header zweeft over de foto, de hero schuift eronder door en krijgt
   extra ruimte bovenin zodat de inhoud vrij blijft van het menu. Op alle
   schermformaten. */
body:has(#MainContent .section-video-pc) .shopify-section.section-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

body:has(#MainContent .section-video-pc) .shopify-section.section-header .header {
  background: transparent !important;
}

body:has(#MainContent .section-video-pc) .section-video-pc .section-spacing {
  padding-top: calc(var(--top_spacing, 40px) + 72px) !important;
}

@media (min-width: 990px) {
  body:has(#MainContent .section-video-pc) .section-video-pc .section-spacing {
    padding-top: calc(var(--top_spacing, 40px) + 92px) !important;
  }
}

/* Beoordelingsblok en mini-kaartjes: geen losse dozen maar rustige regels. */
.section-video-pc .pb-rating-block,
.section-video-pc .pb-features-block,
.section-video-pc .promotional-bar--reviews-summary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.section-video-pc .promotional-bar--reviews-summary {
  border-bottom: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.section-video-pc .trust-item {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 4px 16px !important;
}

.section-video-pc .trust-item:first-child {
  border-left: none !important;
  padding-left: 0 !important;
}

/* De gloed onder de CTA-knop weg; strak groen is genoeg. */
.section-video-pc .cta-button,
.section-video-pc .desktop-cta-button {
  box-shadow: none !important;
}

/* -- contact/FAQ-sectie: donker met foto i.p.v. hard wit --------------------
   De sectie forceert zelf wit met een ID-regel; deze is specifieker. De
   witte kaarten (locaties, formulier, FAQ-items) blijven licht, alleen het
   vlak eromheen wordt donker met een subtiele lesfoto. */
html [id^="shopify-section-contact_form"] .section-wrapper,
html .section-contact-form .section-wrapper {
  background:
    linear-gradient(180deg, rgba(35, 35, 35, 0.93) 0%, rgba(35, 35, 35, 0.97) 100%),
    url("https://cdn.shopify.com/s/files/1/0595/4709/1100/files/PXL_20250326_200107356.RAW-01.COVER.jpg?width=2000") center / cover no-repeat !important;
}

/* De grote witte omdoos wordt doorzichtig; de kaarten erin blijven wit. */
html [id^="shopify-section-contact_form"] .modern-contact-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* De FAQ-kaart krijgt dezelfde witte kaartstijl als locaties en formulier. */
html [id^="shopify-section-contact_form"] .faq-container {
  background: #ffffff !important;
  border: 1px solid #f0f0f0 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Alle kaarten in deze sectie volledig ondoorzichtig wit. Het thema geeft het
   formulier een gradient die naar bijna-transparant loopt; op de donkere
   sectie loopt de kaart dan naar donker. Hier hard dichtzetten. */
html [id^="shopify-section-contact_form"] .contact-form-container,
html [id^="shopify-section-contact_form"] .locations-container {
  background: #ffffff !important;
  border: 1px solid #f0f0f0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

html [id^="shopify-section-contact_form"] .faq-container {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

/* -- missie-cta: rustige afsluiting zonder knoppen -------------------------- */
.missie--cta-regel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 26px 0 0;
}

.missie--cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-family: var(--heading_font_family, Poppins), sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.missie--cta-link::after {
  content: "";
  width: 19px;
  height: 13px;
  background: #0f945d;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 14"><path d="M0 7 H21 M15 1 l7 6 -7 6" stroke="black" stroke-width="2.2" fill="none"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 14"><path d="M0 7 H21 M15 1 l7 6 -7 6" stroke="black" stroke-width="2.2" fill="none"/></svg>') no-repeat center / contain;
  transition: transform 0.2s ease;
}

.missie--cta-link:hover::after {
  transform: translateX(5px);
}

.missie--cta-of {
  color: #9aa0a8;
  font-size: 14px;
}

.missie--cta-of a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

/* -- mobiele homepage: kaarten mogen nooit tot 0 hoogte klappen ------------- */
@media (max-width: 989px) {
  .section-dienstverlening-studiehub .multiboxes--image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 14px;
  }

  .section-dienstverlening-studiehub .multiboxes--image .media {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    padding: 0 !important;
  }

  .section-dienstverlening-studiehub .multiboxes--image video,
  .section-dienstverlening-studiehub .multiboxes--image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* -- minder lucht tussen laatste sectie en footer --------------------------- */
main .shopify-section:last-of-type {
  --bottom_spacing: 28px;
}

main .shopify-section:last-of-type .garantie--wrapper,
main .shopify-section:last-of-type .trainingen--wrapper,
main .shopify-section:last-of-type .inschrijf--wrapper,
main .shopify-section:last-of-type .lokaal--wrapper {
  padding-bottom: 36px;
}