/* ---------------------------------------------------------------------------
   Homepage concept sections.

   Layout copied from the approved concept
   (gustafit-homepage-concept.robin-aerts.chatgpt.site), but expressed in the
   site's own units so it behaves like everything else here:

   - All sizes in `em`. The Osmo scaling system sets `body { font-size:
     var(--size-font) }` where --size-font is a clamped vw value, so every `em`
     scales with the viewport. `rem`, `px` and `clamp()` do NOT, which is why
     this file uses none of them.
   - Section width and horizontal padding come from `--size-container` and
     `--container-padding`, the same variables `.container` uses.
   - Accordion timing matches the existing FAQ: 0.6s cubic-bezier(.625,.05,0,1).

   Everything is prefixed `cx-` so it cannot collide with the Webflow classes.
   Reference: 1em = 16px at the 1440px ideal width.
   --------------------------------------------------------------------------- */

.cx-section {
  --cx-dark: #122223;
  --cx-green: #073127;
  --cx-gold: #f0a202;
  --cx-light: #fbfefa;
  --cx-gray: #e3e1de;
  background: var(--cx-dark);
  color: var(--cx-light);
  position: relative;
  z-index: 2;
}

.cx-section.cx-light {
  background: var(--cx-light);
  color: var(--cx-dark);
}

/* Same box the rest of the site uses, so content lines up across sections. */
.cx-inner {
  width: 100%;
  max-width: var(--size-container);
  margin-left: auto;
  margin-right: auto;
  padding: 7em var(--container-padding);
}

/* --- typography ---------------------------------------------------------- */

.cx-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5625em;
  font-family: Inter, sans-serif;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 1.375em;
}

.cx-h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 4.5em;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
  color: inherit;
}

.cx-h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2.6em;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 0.35em;
  color: inherit;
}

.cx-accent { color: var(--cx-gold); }

.cx-lead {
  font-family: Inter, sans-serif;
  font-size: 0.95em;
  line-height: 1.75;
  opacity: 0.7;
  margin: 1.125em 0 0;
  max-width: 46em;
}

.cx-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3em;
  margin-bottom: 2.625em;
}

.cx-section-head > p {
  font-family: Inter, sans-serif;
  font-size: 0.95em;
  line-height: 1.75;
  opacity: 0.64;
  max-width: 22em;
  margin: 0;
}

.cx-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625em;
  font-family: Inter, sans-serif;
  font-size: 0.875em;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.35em;
  margin-top: 1.625em;
  transition: gap 0.2s ease;
}

.cx-text-link:hover { gap: 1em; }
.cx-actions { margin-top: 1.625em; }

/* --- hero add-ons -------------------------------------------------------- */

.cx-image-location {
  position: absolute;
  top: 1.375em;
  left: 1.375em;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5625em 0.9375em;
  border-radius: 2em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(21, 32, 33, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.2;
}

.cx-quick-facts {
  width: 100%;
  max-width: var(--size-container);
  margin: 0 auto;
  padding: 1.625em var(--container-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875em 1.625em;
  border-bottom: 1px solid rgba(239, 238, 236, 0.14);
  font-family: Inter, sans-serif;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(251, 254, 250, 0.78);
}

.cx-quick-facts > span { display: flex; align-items: center; gap: 0.625em; }
.cx-fact-mark { color: var(--cx-gold); display: inline-flex; }
.cx-fact-mark svg { width: 0.875em; height: 0.875em; }

/* --- benefit cards (01) -------------------------------------------------- */

/* stretch, not start: cards in a row must share one height even when their
   titles wrap to a different number of lines. */
.cx-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 1.25em;
}

/* The card is the grid item; its summary has to fill it so the bottom row of
   links ("Waarom dit werkt") lines up across the cards. */
.cx-benefit-grid.cx-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cx-benefit-grid.cx-grid-4 { grid-template-columns: repeat(4, 1fr); }

.cx-benefit {
  display: flex;
  flex-direction: column;
}

.cx-benefit-top {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cx-benefit-top .cx-disclosure-link { margin-top: auto; padding-top: 1.4375em; }

.cx-benefit {
  background: rgba(239, 238, 236, 0.06);
  border: 1px solid rgba(239, 238, 236, 0.08);
  border-radius: 0.75em;
  transition: background 0.3s ease;
}

.cx-benefit[data-accordion-status="active"],
.cx-benefit:hover { background: rgba(239, 238, 236, 0.1); }

.cx-benefit-top {
  cursor: pointer;
  padding: 1.6875em 1.75em 1.3125em;
  position: relative;
  cursor: pointer;
  list-style: none;
}

.cx-benefit-icon { display: block; margin-bottom: 1.5625em; }
.cx-benefit-icon svg { width: 1.375em; height: 1.375em; }

.cx-benefit-number {
  position: absolute;
  top: 1.875em;
  right: 1.75em;
  font-family: Inter, sans-serif;
  font-size: 0.75em;
  line-height: 1.2;
  opacity: 0.6;
}

.cx-benefit h3 {
  font-family: Inter, sans-serif;
  font-size: 1.12em;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.3;
  margin: 0 0 0.55em;
  color: var(--cx-light);
}

.cx-benefit-teaser {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 0.875em;
  line-height: 1.6;
  opacity: 0.6;
}

.cx-disclosure-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.4375em;
  font-family: Inter, sans-serif;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cx-gold);
}

.cx-disclosure-link svg {
  width: 0.875em;
  height: 0.875em;
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.cx-benefit[data-accordion-status="active"] .cx-disclosure-link svg { transform: rotate(45deg); }

.cx-detail-body { padding: 0 1.75em; }
.cx-detail-inner { padding-bottom: 1.5em; }

.cx-detail-body p {
  font-family: Inter, sans-serif;
  font-size: 0.9em;
  line-height: 1.75;
  opacity: 0.6;
  margin: 0;
}

.cx-detail-body p + p { margin-top: 0.9em; }

/* --- disclosure rows ----------------------------------------------------- */

.cx-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4em;
  align-items: start;
}

.cx-split-copy .cx-lead { max-width: 30em; }
.cx-stack { display: block; }

.cx-disclosure { border-bottom: 1px solid rgba(251, 254, 250, 0.16); }
.cx-light .cx-disclosure { border-bottom-color: rgba(18, 34, 35, 0.14); }
.cx-disclosure:first-child { border-top: 1px solid rgba(251, 254, 250, 0.16); }
.cx-light .cx-disclosure:first-child { border-top-color: rgba(18, 34, 35, 0.14); }

.cx-disclosure-top {
  display: flex;
  align-items: center;
  gap: 1.125em;
  padding: 1.5em 0;
  cursor: pointer;
  list-style: none;
  font-family: Inter, sans-serif;
  font-size: 0.95em;
  font-weight: 650;
  line-height: 1.5;
}


.cx-row-num {
  font-size: 0.78em;
  font-weight: 500;
  opacity: 0.46;
  flex: none;
}

.cx-row-title { flex: 1; }

.cx-plus {
  flex: none;
  width: 1.85em;
  height: 1.85em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(251, 254, 250, 0.12);
  color: inherit;
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1), background 0.3s ease;
}

.cx-plus svg { width: 0.9em; height: 0.9em; }
.cx-light .cx-plus { background: var(--cx-gray); }

.cx-disclosure[data-accordion-status="active"] .cx-plus {
  transform: rotate(45deg);
  background: var(--cx-gold);
  color: var(--cx-dark);
}

.cx-disclosure-inner { padding-bottom: 1.5em; }

.cx-disclosure-content p {
  font-family: Inter, sans-serif;
  font-size: 0.95em;
  line-height: 1.75;
  opacity: 0.64;
  margin: 0;
  max-width: 52em;
}

.cx-disclosure-content p + p { margin-top: 0.875em; }

/* Exactly the FAQ accordion's mechanism: the row is always in the DOM, only
   clipped to 0fr, and accordion.js flips data-accordion-status. That animates
   cleanly in both directions, which a native <details> cannot do. */
.cx-disclosure-content,
.cx-detail-body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Three levels, same as the FAQ block: the grid row, a zero-min-height wrap,
   and only then the padded content. Padding on the direct child would keep the
   row at its own min-content height (24px) instead of collapsing to 0. */
.cx-disclosure-wrap {
  min-height: 0;
  overflow: hidden;
}

[data-accordion-status="active"] > .cx-disclosure-content,
[data-accordion-status="active"] > .cx-detail-body {
  grid-template-rows: 1fr;
}

/* --- tabs (02) ----------------------------------------------------------- */

.cx-tablist {
  display: inline-flex;
  gap: 0.25em;
  padding: 0.25em;
  border-radius: 0.65em;
  background: rgba(239, 238, 236, 0.08);
  margin-bottom: 2.125em;
}

.cx-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(251, 254, 250, 0.6);
  font-family: Inter, sans-serif;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.7em 1.15em;
  border-radius: 0.45em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: background 0.3s ease, color 0.3s ease;
}

.cx-tab span { font-size: 0.8em; opacity: 0.6; }
.cx-tab:hover { color: var(--cx-light); }
.cx-tab[aria-selected="true"] { background: var(--cx-light); color: var(--cx-dark); }

.cx-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5em;
  align-items: start;
}

.cx-panel[hidden] { display: none; }

/* --- prices -------------------------------------------------------------- */

.cx-price-list { margin: 1.75em 0 0; }

.cx-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25em;
  padding: 0.9375em 0;
  border-bottom: 1px solid rgba(18, 34, 35, 0.14);
  font-family: Inter, sans-serif;
  font-size: 1.05em;
  line-height: 1.4;
}

.cx-price-row:first-child { border-top: 1px solid rgba(18, 34, 35, 0.14); }
.cx-price-row strong { font-size: 1.25em; font-weight: 600; white-space: nowrap; }

.cx-price-note {
  font-family: Inter, sans-serif;
  font-size: 0.875em;
  line-height: 1.6;
  margin: 1.375em 0 0;
  opacity: 0.65;
  max-width: 34em;
}

/* --- gallery ------------------------------------------------------------- */

.cx-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25em; }
.cx-gallery-item { margin: 0; border-radius: 0.9em; overflow: hidden; }

.cx-gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  display: block;
}

.cx-training-photo { position: relative; border-radius: 0.9em; overflow: hidden; }

.cx-training-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.cx-photo-note,
.cx-photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.625em;
  padding: 1em 1.25em;
  background: linear-gradient(transparent, rgba(18, 34, 35, 0.88));
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cx-photo-note svg { margin-left: auto; width: 0.875em; height: 0.875em; }

.cx-chips { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1.125em; }

.cx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  padding: 0.5em 0.7em;
  border-radius: 1.5em;
  border: 1px solid rgba(239, 238, 236, 0.2);
  font-family: Inter, sans-serif;
  font-size: 0.75em;
  line-height: 1.4;
  opacity: 0.78;
}

.cx-chip svg { width: 0.875em; height: 0.875em; }
.cx-training-copy .cx-stack { margin-top: 1.625em; }

.cx-group-links { display: flex; flex-wrap: wrap; gap: 0.625em; }

.cx-group-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.625em 0.875em;
  border-radius: 0.5em;
  border: 1px solid rgba(239, 238, 236, 0.2);
  font-family: Inter, sans-serif;
  font-size: 0.8em;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.cx-group-links a svg { width: 0.875em; height: 0.875em; }
.cx-group-links a:hover { border-color: var(--cx-gold); transform: translateY(-2px); }

/* --- about --------------------------------------------------------------- */

.cx-about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4em; align-items: start; }
.cx-coach-photo { position: relative; border-radius: 0.9em; overflow: hidden; }

.cx-coach-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.cx-signoff { display: flex; align-items: center; gap: 0.875em; margin-top: 1.875em; }
.cx-signoff img { width: 3em; height: 3em; border-radius: 50%; object-fit: cover; }

.cx-signoff strong {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.4;
}

.cx-signoff span { font-family: Inter, sans-serif; font-size: 0.75em; line-height: 1.4; opacity: 0.6; }

/* --- location (05) ------------------------------------------------------- */

.cx-location { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; align-items: start; }
.cx-location-facts { display: flex; flex-wrap: wrap; gap: 1.375em; margin-top: 1.375em; }

.cx-location-facts span {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: Inter, sans-serif;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1.4;
}

.cx-location-facts svg { width: 0.875em; height: 0.875em; }
.cx-location-copy .cx-stack { margin-top: 1.625em; }
.cx-location-photo { position: relative; border-radius: 0.9em; overflow: hidden; }

.cx-location-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.cx-location-tag {
  position: absolute;
  left: 1.375em;
  right: 1.375em;
  bottom: 1.375em;
  display: flex;
  align-items: center;
  gap: 0.875em;
  padding: 1.25em 1.375em;
  border-radius: 0.6em;
  background: var(--cx-light);
  color: var(--cx-dark);
  font-family: Inter, sans-serif;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.4;
}

.cx-location-tag > span { display: flex; flex-direction: column; }
.cx-location-tag small { font-size: 0.82em; font-weight: 400; opacity: 0.6; margin-top: 0.2em; }
.cx-location-tag > svg { width: 0.95em; height: 0.95em; flex: none; }
.cx-location-tag > svg:last-child { margin-left: auto; }

/* --- story cards (04) ---------------------------------------------------- */

.cx-story-slider { padding-bottom: 1.25em; }

.cx-story-card {
  position: relative;
  display: block;
  border-radius: 1em;
  overflow: hidden;
  background: var(--cx-green);
  text-decoration: none;
}

.cx-story-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.cx-story-card:hover img { transform: scale(1.04); }

.cx-story-card::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(7, 20, 18, 0.85));
  pointer-events: none;
}

.cx-story-top,
.cx-story-bottom {
  position: absolute;
  left: 1.25em;
  right: 1.25em;
  z-index: 2;
  display: flex;
  align-items: center;
  color: #fff;
}

.cx-story-top {
  top: 1.25em;
  gap: 0.5em;
  font-family: Inter, sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
}

.cx-story-top svg { width: 0.9em; height: 0.9em; }
.cx-story-bottom { bottom: 1.125em; justify-content: space-between; gap: 0.75em; }

.cx-story-bottom strong {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2.2em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cx-play {
  flex: none;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: var(--cx-gold);
  color: var(--cx-dark);
  display: grid;
  place-items: center;
  transition: transform 0.3s ease;
}

.cx-play svg { width: 1.1em; height: 1.1em; }
.cx-story-card:hover .cx-play { transform: scale(1.1); }

/* --- collapsible written reviews ----------------------------------------- */

.cx-review-body {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cx-review-body.is-open {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

.cx-review-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.625em 0 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: Inter, sans-serif;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.4;
  color: #12291f;
  opacity: 0.65;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: opacity 0.3s ease;
}

.cx-review-toggle:hover { opacity: 1; }
.cx-review-toggle span { font-size: 1.15em; line-height: 1; }

/* --- hero image needs a positioning context for the location badge -------- */
.cx-hero-image { position: relative; display: block; }

/* --- FAQ polish (existing accordion-css block) --------------------------- */

.accordion-css__item .accordion-css__item-icon-svg {
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

/* The FAQ question was 1.2em against 0.95em for every other accordion on the
   page, which made the block read as heavier than it is. Same size and tighter
   rows brings it in line with the disclosures above it. */
.accordion-css__item-h3 { font-size: 0.98em; line-height: 1.45; }
.accordion-css__item-top { padding: 0.9em 0.9em 0.9em 1.2em; }
.accordion-css__item-p { font-size: 0.95em; line-height: 1.7; }

.accordion-css__item .accordion-css__item-top { transition: opacity 0.3s ease; }
.accordion-css__item .accordion-css__item-top:hover { opacity: 0.75; }

/* --- responsive ---------------------------------------------------------- */
/* The em sizes already scale with the viewport, so these only change layout
   and dial back the display headings, matching what the rest of the site does
   at these breakpoints. */

@media screen and (max-width: 991px) {
  .cx-inner { padding: 5em var(--container-padding); }
  .cx-h2 { font-size: 3.4em; }
  .cx-h3 { font-size: 2.2em; }
  .cx-section-head { flex-direction: column; align-items: flex-start; gap: 1.25em; }
  .cx-section-head > p { max-width: none; }
  .cx-benefit-grid, .cx-benefit-grid.cx-grid-4 { grid-template-columns: 1fr 1fr; }
  .cx-gallery { grid-template-columns: 1fr 1fr; }
  .cx-split,
  .cx-panel,
  .cx-about,
  .cx-location { grid-template-columns: 1fr; gap: 2.4em; }
  .cx-about .cx-coach-photo { max-width: 30em; }
}

@media screen and (max-width: 767px) {
  .cx-inner { padding: 4em var(--container-padding); }
  .cx-h2 { font-size: 2.7em; }
  .cx-h3 { font-size: 2em; }
  .cx-quick-facts { justify-content: flex-start; gap: 0.75em 1.4em; }
  .cx-benefit-grid, .cx-benefit-grid.cx-grid-2, .cx-benefit-grid.cx-grid-4 { grid-template-columns: 1fr; }
  .cx-benefit-top { padding: 1.4em 1.25em 1.1em; }
  .cx-benefit-number { top: 1.5em; right: 1.25em; }
  .cx-detail-body { padding: 0 1.25em; }
  .cx-tablist { display: flex; width: 100%; }
  .cx-tab { flex: 1; justify-content: center; padding: 0.75em 0.6em; }
  .cx-disclosure-top { padding: 1.25em 0; gap: 0.75em; }
  .cx-location-tag { left: 0.875em; right: 0.875em; bottom: 0.875em; padding: 1em 1.125em; }
  .cx-story-bottom strong { font-size: 1.9em; }
  .cx-image-location { top: 0.875em; left: 0.875em; }
}

@media screen and (max-width: 479px) {
  .cx-h2 { font-size: 2.5em; }
  .cx-quick-facts { font-size: 0.86em; }
  .cx-disclosure-top { font-size: 0.98em; }
}

@media (prefers-reduced-motion: reduce) {
  .accordion-css__item .accordion-css__item-icon-svg,
  .cx-plus,
  .cx-story-card img,
  .cx-disclosure-content,
  .cx-detail-body { transition: none; }
}

/* --- touch targets ------------------------------------------------------- */
/* Inline links and toggles are only as tall as their text, which leaves a
   ~14px tap area. Padding brings them to the 44px minimum without changing
   how they look; negative margins keep the surrounding layout identical. */

@media (hover: none), screen and (max-width: 991px) {
  .cx-text-link {
    padding: 0.9em 0;
    margin-top: 1em;
    margin-bottom: -0.9em;
  }

  .cx-review-toggle {
    padding-top: 0.9em;
    padding-bottom: 0.9em;
    margin-bottom: -0.6em;
  }

  .cx-tab { padding-top: 1em; padding-bottom: 1em; }
  .cx-group-links a { padding: 0.9em 1em; }
  .cx-story-top { font-size: 0.78em; }
  .cx-eyebrow { font-size: 0.8em; }
  .cx-photo-note,
  .cx-photo-caption { font-size: 0.78em; }
  .cx-disclosure-link { font-size: 0.82em; }
  .cx-chip { font-size: 0.82em; padding: 0.6em 0.85em; }
}

/* --- short USP cards (title plus one line, no accordion) ------------------ */

.cx-usp-card {
  background: rgba(239, 238, 236, 0.06);
  border: 1px solid rgba(239, 238, 236, 0.08);
  border-radius: 0.75em;
  padding: 1.6875em 1.75em;
  align-self: stretch;
}

/* Link cards carry the same box as a plain USP card, plus a "Bekijk" row. */
a.cx-usp-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s var(--cx-ease, cubic-bezier(0.625, 0.05, 0, 1)), background-color 0.3s;
}

a.cx-usp-card:hover { border-color: var(--cx-gold); }

.cx-usp-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: auto;
  padding-top: 1em;
  font-family: Inter, sans-serif;
  font-size: 0.8125em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cx-gold);
}

.cx-usp-more svg { width: 0.9em; height: 0.9em; }

.cx-usp-card--photo { padding-top: 0; overflow: hidden; }

.cx-usp-card--photo img {
  width: calc(100% + 3.5em);
  margin: 0 -1.75em 1.375em;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;
}

.cx-light .cx-usp-card {
  background: rgba(18, 34, 35, 0.04);
  border-color: rgba(18, 34, 35, 0.1);
}

.cx-usp-card h3 {
  font-family: Inter, sans-serif;
  font-size: 1.05em;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 0.5em;
  color: inherit;
}

.cx-usp-card p {
  font-family: Inter, sans-serif;
  font-size: 0.875em;
  line-height: 1.65;
  opacity: 0.62;
  margin: 0;
}

/* --- bullet list inside an accordion body -------------------------------- */

.cx-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Inter, sans-serif;
  font-size: 0.95em;
  line-height: 1.75;
  opacity: 0.64;
}

.cx-list li {
  position: relative;
  padding-left: 1.15em;
  margin-bottom: 0.35em;
}

.cx-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background: var(--cx-gold);
}