/* diensten.html */
/* ── PAGE HERO ─────────────────────────────────────────── */
    .diensten-hero {
      padding-top: calc(80px + clamp(var(--space-16), 8vw, var(--space-32)));
      padding-bottom: clamp(var(--space-12), 6vw, var(--space-20));
      background: var(--color-surface-subtle);
      position: relative;
      overflow: hidden;
    }

    .diensten-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -10%;
      width: 55vw;
      height: 55vw;
      max-width: 700px;
      max-height: 700px;
      background: radial-gradient(circle, rgba(77,182,172,0.18) 0%, transparent 70%);
      pointer-events: none;
    }

    .diensten-hero::after {
      content: '';
      position: absolute;
      bottom: -120px;
      left: 5%;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(77,182,172,0.10) 0%, transparent 70%);
      pointer-events: none;
    }

    .diensten-hero__label {
      display: inline-block;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #4DB6AC;
      background: rgba(77,182,172,0.1);
      border-radius: 100px;
      padding: 5px 14px;
      margin-bottom: 20px;
    }

    .diensten-hero__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(var(--space-12), 6vw, var(--space-24));
      align-items: center;
    }

    .diensten-hero__content {
      max-width: 60ch;
    }

    /* Hero visual — right side */
    .diensten-hero__visual {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .diensten-hero__card {
      background: var(--color-surface);
      border-radius: var(--radius-2xl);
      padding: var(--space-5) var(--space-6);
      border: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      gap: var(--space-4);
      box-shadow: var(--shadow-md);
      transition: transform var(--duration-fast) var(--ease-out);
    }

    .diensten-hero__card:hover { transform: translateX(4px); }

    .diensten-hero__card--featured {
      border-color: var(--teal-200);
      background: linear-gradient(135deg, var(--color-surface) 0%, var(--teal-50) 100%);
    }

    .diensten-hero__card-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-xl);
      background: var(--teal-50);
      border: 1px solid var(--teal-100);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .diensten-hero__card--featured .diensten-hero__card-icon {
      background: var(--teal-100);
    }

    .diensten-hero__card-content { flex: 1; }

    .diensten-hero__card-title {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      color: var(--color-text-primary);
      margin-bottom: 2px;
    }

    .diensten-hero__card-sub {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      font-weight: var(--weight-light);
    }

    .diensten-hero__card-badge {
      font-size: 10px;
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--teal-700);
      background: var(--teal-100);
      border-radius: var(--radius-full);
      padding: 3px 8px;
    }

    @media (max-width: 840px) {
      .diensten-hero__inner { grid-template-columns: 1fr; }
      .diensten-hero__visual { display: none; }
    }

    .diensten-hero__title {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
      font-weight: var(--weight-medium);
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
      margin-bottom: var(--space-6);
    }

    .diensten-hero__title em {
      font-style: italic;
      background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 40%, #c8f5f2 47%, #f0fffe 50%, #c8f5f2 53%, var(--color-primary) 60%, var(--color-primary) 100%);
      background-size: 300% 100%;
      background-position: 100% 0%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: vsn-glow-sweep 10s ease-in-out infinite;
      padding-inline: 0.08em;
    }

    .diensten-hero__intro {
      font-size: var(--text-md);
      font-weight: var(--weight-light);
      line-height: var(--leading-relaxed);
      color: var(--color-text-secondary);
      max-width: 50ch;
    }

    /* ── SERVICE DETAIL CARDS ─────────────────────────────── */
    .service-detail {
      padding-block: clamp(var(--space-10), 5vw, var(--space-20));
    }

    .service-detail:nth-child(even) {
      background: var(--color-surface);
    }

    .service-detail__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(var(--space-12), 6vw, var(--space-24));
      align-items: center;
    }

    .service-detail:nth-child(even) .service-detail__inner {
      direction: rtl;
    }

    .service-detail:nth-child(even) .service-detail__text,
    .service-detail:nth-child(even) .service-detail__visual {
      direction: ltr;
    }

    .service-detail__tag {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: var(--space-5);
    }

    .service-detail__tag::before {
      content: '';
      width: 20px;
      height: 1.5px;
      background: var(--color-primary);
    }

    .service-detail__title {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
      font-weight: var(--weight-medium);
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
      color: var(--color-text-primary);
      margin-bottom: var(--space-5);
    }

    .service-detail__body {
      font-size: var(--text-md);
      font-weight: var(--weight-light);
      line-height: var(--leading-relaxed);
      color: var(--color-text-secondary);
      margin-bottom: var(--space-8);
    }

    .service-detail__includes {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      margin-bottom: var(--space-8);
    }

    .service-detail__include {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--color-text-secondary);
    }

    .service-detail__include::before {
      content: '';
      width: 18px;
      height: 18px;
      border-radius: var(--radius-full);
      background: var(--teal-100);
      border: 1.5px solid var(--teal-300);
      flex-shrink: 0;
      margin-top: 1px;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='%2327857f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
    }

    .service-detail__price-row {
      display: flex;
      align-items: center;
      gap: var(--space-8);
      padding: var(--space-5) var(--space-6);
      background: var(--teal-50);
      border-radius: var(--radius-xl);
      border: 1px solid var(--teal-100);
      margin-bottom: var(--space-6);
    }

    .service-detail__price {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-3xl);
      font-weight: var(--weight-medium);
      color: var(--color-text-primary);
      line-height: 1;
    }

    .service-detail__price-label {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      font-weight: var(--weight-light);
      margin-top: 3px;
    }

    .service-detail__price-divider {
      width: 1px;
      height: 36px;
      background: var(--teal-200);
    }

    /* Visual panel */
    .service-detail__visual {
      position: relative;
      aspect-ratio: 4/5;
      border-radius: var(--radius-3xl);
      overflow: hidden;
      background: var(--teal-50);
    }

    .service-detail__visual-bg {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .service-detail__visual-icon {
      width: 160px;
      height: 160px;
      border-radius: var(--radius-full);
      background: var(--teal-100);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Data viz card for InBody */
    .inbody-card {
      position: absolute;
      inset: var(--space-8);
      background: var(--color-surface);
      border-radius: var(--radius-2xl);
      padding: var(--space-8);
      box-shadow: var(--shadow-xl);
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
    }

    .inbody-card__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .inbody-card__label {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    .inbody-bars {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .inbody-bar__label {
      display: flex;
      justify-content: space-between;
      font-size: var(--text-xs);
      color: var(--color-text-secondary);
      margin-bottom: var(--space-1);
    }

    .inbody-bar__track {
      height: 8px;
      background: var(--neutral-100);
      border-radius: var(--radius-full);
      overflow: hidden;
    }

    .inbody-bar__fill {
      height: 100%;
      border-radius: var(--radius-full);
      background: var(--color-primary);
      transition: width 1s var(--ease-out);
    }

    .inbody-bar__fill--muscle { background: var(--teal-400); width: 72%; }
    .inbody-bar__fill--fat    { background: var(--teal-300); width: 40%; }
    .inbody-bar__fill--water  { background: var(--teal-200); width: 85%; }

    /* ── VOEDINGSADVIES — navy override ──────────────────── */
    #voedingsadvies {
      background: var(--brand-dark);
      padding-top: clamp(var(--space-10), 5vw, var(--space-16));
    }
    #voedingsadvies .service-detail__tag { color: #FF8A80; }
    #voedingsadvies .service-detail__tag::before { background: #FF8A80; }
    #coaching .service-detail__tag { color: var(--brand-cta); }
    #coaching .service-detail__tag::before { background: var(--brand-cta); }
    #voedingsadvies .service-detail__title { color: var(--neutral-0); }
    #voedingsadvies .service-detail__body { color: var(--neutral-400); }
    #voedingsadvies .service-detail__include { color: var(--neutral-400); }
    #voedingsadvies .service-detail__include::before {
      background-color: rgba(77,182,172,0.15);
      border-color: var(--teal-600);
    }
    #voedingsadvies .service-detail__price-row {
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.1);
    }
    #voedingsadvies .service-detail__price { color: var(--neutral-0); }
    #voedingsadvies .service-detail__price-label { color: var(--neutral-500); }
    #voedingsadvies .service-detail__price-divider { background: rgba(255,255,255,0.15); }
    #voedingsadvies .service-detail__visual > div:first-child {
      background: rgba(255,255,255,0.05) !important;
    }

    /* ── PRICING OVERVIEW ─────────────────────────────────── */
    .pricing {
      background: #264653;
      padding-block: clamp(var(--space-12), 6vw, var(--space-24));
    }

    .pricing__header {
      text-align: center;
      margin-bottom: var(--space-16);
    }

    .pricing__title {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
      font-weight: var(--weight-medium);
      color: var(--neutral-0);
      letter-spacing: var(--tracking-tight);
      line-height: var(--leading-tight);
    }

    .pricing__sub {
      font-size: var(--text-md);
      font-weight: var(--weight-light);
      color: var(--neutral-400);
      margin-top: var(--space-4);
      max-width: 44ch;
      margin-inline: auto;
    }

    .pricing__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
    }

    .pricing-card {
      background: var(--neutral-800);
      border: 1px solid var(--neutral-700);
      border-radius: var(--radius-2xl);
      padding: var(--space-8);
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
      transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal);
    }

    .pricing-card--featured {
      background: var(--neutral-900);
      border-color: var(--teal-600);
      box-shadow: 0 0 0 1px var(--teal-600), var(--shadow-2xl);
      position: relative;
    }

    .pricing-card--featured::before {
      content: 'Populair';
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--color-primary);
      color: var(--neutral-0);
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wider);
      text-transform: uppercase;
      padding: var(--space-1) var(--space-4);
      border-radius: var(--radius-full);
    }

    .pricing-card__name {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--neutral-400);
    }

    .pricing-card__price {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
      font-weight: var(--weight-medium);
      color: var(--neutral-0);
      line-height: 1;
    }

    .pricing-card__price-note {
      font-size: var(--text-xs);
      color: var(--neutral-500);
      margin-top: var(--space-1);
      font-weight: var(--weight-light);
    }

    .pricing-card__desc {
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--neutral-400);
      line-height: var(--leading-relaxed);
    }

    .pricing-card__items {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      flex: 1;
    }

    .pricing-card__item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--neutral-300);
    }

    .pricing-card__item::before {
      content: '';
      width: 16px;
      height: 16px;
      border-radius: var(--radius-full);
      background: var(--teal-900);
      border: 1px solid var(--teal-700);
      flex-shrink: 0;
      margin-top: 1px;
      background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4l2 2L6.5 2' stroke='%234db6ac' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
    }

    .pricing-card .btn {
      margin-top: auto;
    }

    /* ── FAQSTRIP ─────────────────────────────────────────── */
    .faq {
      background: var(--color-surface-subtle);
    }

    .faq__grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: clamp(var(--space-12), 6vw, var(--space-24));
    }

    .faq__list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .faq__item {
      border-bottom: 1px solid var(--color-border);
      overflow: hidden;
    }

    .faq__question {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      padding-block: var(--space-6);
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-base);
      font-weight: var(--weight-medium);
      color: var(--color-text-primary);
      transition: color var(--duration-fast);
    }

    .faq__question:hover {
      color: var(--color-primary);
    }

    .faq__icon {
      width: 24px;
      height: 24px;
      border-radius: var(--radius-full);
      border: 1.5px solid var(--color-border-strong);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform var(--duration-normal) var(--ease-out), border-color var(--duration-fast);
    }

    .faq__item.open .faq__icon {
      transform: rotate(45deg);
      border-color: var(--color-primary);
    }

    .faq__answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--duration-slow) var(--ease-out), padding var(--duration-normal);
    }

    .faq__item.open .faq__answer {
      max-height: 400px;
    }

    .faq__answer-inner {
      padding-bottom: var(--space-6);
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--color-text-secondary);
      line-height: var(--leading-relaxed);
    }

    @media (max-width: 900px) {
      .service-detail__inner {
        grid-template-columns: 1fr;
      }

      .service-detail:nth-child(even) .service-detail__inner {
        direction: ltr;
      }

      .pricing__grid {
        grid-template-columns: 1fr;
      }

      .faq__grid {
        grid-template-columns: 1fr;
      }
    }