/*
 * site.css — copied verbatim from index.html.
 *
 * Do not edit. The concept's CSS is what makes the site match the approved
 * design; a change here is a bug unless BRIEF.md lists it under home_changes.
 */

:root{
    --ink:#101812;
    --surface:#17211a;
    --surface-2:#1e2a21;
    --line:rgba(240,238,230,.12);
    --sage:#6f8168;
    --sage-light:#8ea184;
    --sage-deep:#59694f;
    --cream:#f2f0e8;
    --muted:rgba(242,240,232,.72);
    --star:#e6b552;
    --radius:30px 30px 30px 6px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Manrope',sans-serif;
    background:var(--ink);
    color:var(--cream);
    line-height:1.7;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,.serif{font-family:'Playfair Display',serif;font-weight:600;line-height:1.15;letter-spacing:.01em}
  .wrap{width:min(1160px,92%);margin:0 auto}

  /* ---------- actie strip ---------- */
  .actiebar{
    background:var(--sage);
    color:#fff;
    text-align:center;
    padding:.6rem 1rem;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.04em;
  }
  .actiebar strong{text-transform:uppercase;letter-spacing:.12em}
  .actiebar span{font-weight:500;opacity:.85}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:transparent;
    transition:background .3s ease;
  }
  header.scrolled,header.menu-open{
    background:rgba(23,33,26,.92);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:.9rem 0;gap:1rem;
  }
  .logo img{height:53px;width:auto}
  .nav-links{
    display:none;
    list-style:none;gap:1.9rem;align-items:center;
  }
  .nav-links a{
    font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
    color:var(--cream);opacity:.85;transition:opacity .2s,color .2s;
  }
  .nav-links a:hover{opacity:1;color:var(--sage-light)}
  .btn{
    display:inline-block;
    padding:.85rem 1.9rem;
    border-radius:var(--radius);
    font-weight:800;font-size:.85rem;
    text-transform:uppercase;letter-spacing:.12em;
    transition:background .2s,color .2s,border-color .2s,transform .2s;
    border:1px solid transparent;
    text-align:center;
  }
  .btn-primary{background:var(--sage);color:#fff}
  .btn-primary:hover{background:var(--sage-light);transform:translateY(-2px)}
  .btn-ghost{border-color:rgba(242,240,232,.5);color:var(--cream)}
  .btn-ghost:hover{border-color:var(--cream);background:rgba(242,240,232,.08);transform:translateY(-2px)}
  .nav-cta{display:none}
  .burger{
    display:flex;flex-direction:column;gap:5px;
    background:none;border:0;cursor:pointer;padding:.4rem;
  }
  .burger span{width:26px;height:2px;background:var(--cream);transition:.3s}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{
    display:none;flex-direction:column;gap:.2rem;
    padding:1rem 4% 1.6rem;
    border-top:1px solid var(--line);
    background:rgba(16,24,18,.97);
  }
  .mobile-menu.open{display:flex}
  .mobile-menu a{
    padding:.8rem 0;font-weight:700;text-transform:uppercase;
    letter-spacing:.12em;font-size:.85rem;border-bottom:1px solid var(--line);
  }
  .mobile-menu .btn{margin-top:1rem;border-bottom:0}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:88vh;
    /* De hero schuift achter de transparante header (header is ±82px hoog) */
    margin-top:-82px;
    display:flex;align-items:center;
    isolation:isolate;
    overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background:url('img-172c963ddcfc.png') center/cover no-repeat;
  }
  .hero::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(100deg,rgba(16,24,18,.94) 0%,rgba(16,24,18,.78) 45%,rgba(16,24,18,.35) 100%);
  }
  .hero-inner{padding:5.5rem 0 4.5rem;max-width:640px}
  .kicker{
    display:inline-block;
    font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.22em;
    color:var(--sage-light);
    margin-bottom:1.1rem;
  }
  .hero h1{
    font-size:clamp(2.9rem,8vw,5.2rem);
    text-transform:uppercase;
    margin-bottom:1.2rem;
  }
  .hero p{color:var(--muted);font-size:1.18rem;max-width:34rem;margin-bottom:2rem}
  .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.4rem}
  .rating{
    display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;
    font-size:.9rem;color:var(--muted);
  }
  .rating .score{font-weight:800;color:var(--cream);font-size:1rem}
  .stars{color:var(--star);letter-spacing:.15em;font-size:1rem}
  .rating a{text-decoration:underline;text-underline-offset:3px}
  .rating a:hover{color:var(--cream)}
  .hero-actie{
    margin-top:2.6rem;
    display:inline-block;
    background:rgba(111,129,104,.18);
    border:1px solid rgba(142,161,132,.45);
    border-radius:18px 18px 18px 4px;
    padding:1rem 1.4rem;
    max-width:34rem;
  }
  .hero-actie strong{
    display:block;font-size:.75rem;text-transform:uppercase;
    letter-spacing:.18em;color:var(--sage-light);margin-bottom:.25rem;
  }
  .hero-actie .prijs{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--cream)}
  .hero-actie small{display:block;color:var(--muted);font-size:.78rem;margin-top:.2rem}

  /* ---------- secties ---------- */
  section{padding:5rem 0}
  .sec-head{text-align:center;max-width:46rem;margin:0 auto 3.2rem}
  .sec-head h2{font-size:clamp(1.9rem,4.5vw,2.8rem);text-transform:uppercase;margin:.4rem 0 1rem}
  .sec-head p{color:var(--muted);font-size:1.12rem}

  /* over ons */
  .over{background:var(--surface)}
  .over-grid{display:grid;gap:2.5rem;align-items:center}
  .over-img{
    border-radius:26px 26px 26px 6px;overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.45);
  }
  .over-img img{width:100%;height:100%;object-fit:cover}
  .over-copy .kicker{margin-bottom:.6rem}
  .over-copy h2{font-size:clamp(1.9rem,4.5vw,2.6rem);text-transform:uppercase;margin-bottom:1.1rem}
  .over-copy p{color:var(--muted);margin-bottom:1.4rem;font-size:1.12rem}
  .over-usps{
    list-style:none;display:grid;gap:.65rem;margin-bottom:1.8rem;
  }
  .over-usps li{
    display:flex;gap:.7rem;align-items:baseline;color:var(--cream);font-weight:600;font-size:1rem;
  }
  .over-usps li::before{content:"✓";color:var(--sage-light);font-weight:800}
  .over-actions{display:flex;flex-wrap:wrap;gap:.9rem}

  /* aanbod */
  .aanbod-item{
    display:grid;gap:1.6rem;
    padding:2.6rem 0;
    border-top:1px solid var(--line);
    align-items:center;
  }
  .aanbod-item:first-of-type{border-top:0;padding-top:0}
  .aanbod-img{
    border-radius:24px 24px 24px 6px;overflow:hidden;
    box-shadow:0 24px 48px rgba(0,0,0,.4);
  }
  .aanbod-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s}
  .aanbod-item:hover .aanbod-img img{transform:scale(1.04)}
  .aanbod-copy h3{font-size:clamp(1.5rem,3.5vw,2rem);text-transform:uppercase;margin-bottom:.9rem}
  .aanbod-copy .num{
    font-size:.75rem;font-weight:800;letter-spacing:.2em;color:var(--sage-light);
    text-transform:uppercase;display:block;margin-bottom:.5rem;
  }
  .aanbod-copy p{color:var(--muted);margin-bottom:1rem;font-size:1.12rem}
  .textlink{
    font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;
    color:var(--sage-light);border-bottom:1px solid var(--sage-light);
    padding-bottom:.2rem;transition:color .2s,border-color .2s;
  }
  .textlink:hover{color:var(--cream);border-color:var(--cream)}

  /* pilates sectie */
  .pilates{background:var(--surface)}
  .pilates-grid{display:grid;gap:1.2rem;margin-bottom:2.2rem}
  .pilates-card{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:24px 24px 24px 6px;
    overflow:hidden;
    display:flex;flex-direction:column;
    transition:transform .25s,border-color .25s;
  }
  .pilates-card:hover{transform:translateY(-4px);border-color:rgba(142,161,132,.6)}
  .pilates-card .ph{
    aspect-ratio:16/9;
    display:flex;align-items:center;justify-content:center;
    background:repeating-linear-gradient(45deg,#1a241c,#1a241c 14px,#1e2a21 14px,#1e2a21 28px);
    border-bottom:1px solid var(--line);
    color:var(--muted);font-size:.75rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.18em;
  }
  .pilates-body{padding:1.8rem 1.7rem;display:flex;flex-direction:column;gap:.8rem;flex-grow:1}
  .pilates-body h3{font-size:1.4rem;text-transform:uppercase}
  .pilates-body p{color:var(--muted);font-size:1.05rem;flex-grow:1}
  .pilates-body .btn{align-self:flex-start}
  .pilates-more{text-align:center}

  /* prijsvergelijking */
  .vergelijk{margin-top:3.2rem}
  .vergelijk h3{
    text-align:center;font-size:clamp(1.4rem,3vw,1.8rem);
    text-transform:uppercase;margin-bottom:1.6rem;
  }
  .vergelijk-grid{display:grid;gap:1.2rem}
  .vergelijk-col{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:22px 22px 22px 6px;
    padding:1.8rem 1.7rem;
  }
  .vergelijk-col h4{
    font-family:'Manrope',sans-serif;font-size:.8rem;font-weight:800;
    text-transform:uppercase;letter-spacing:.18em;color:var(--sage-light);
    margin-bottom:1.1rem;
  }
  .vergelijk-col ul{list-style:none}
  .vergelijk-col li{
    display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
    padding:.7rem 0;border-bottom:1px solid var(--line);
    font-size:1rem;
  }
  .vergelijk-col li:last-child{border-bottom:0}
  .vergelijk-col .prijs{font-weight:800;color:var(--sage-light);white-space:nowrap}

  /* actie band */
  .actie{
    position:relative;isolation:isolate;overflow:hidden;
    color:#fff;
    text-align:center;
  }
  .actie::before{
    content:"";position:absolute;inset:-20px;z-index:-2;
    background:url('img-172c963ddcfc.png') center/cover no-repeat;
    filter:blur(8px);
    transform:scale(1.05);
  }
  .actie::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:rgba(16,24,18,.55);
  }
  .actie .kicker{color:var(--sage-light)}
  .actie h2{font-size:clamp(2rem,5vw,3rem);text-transform:uppercase;margin:.4rem 0 .8rem;color:#fff}
  .actie p{max-width:32rem;margin:0 auto 1.6rem;font-weight:600;font-size:1.15rem;color:#fff}
  .actie small{display:block;margin-top:1.2rem;font-size:.85rem;opacity:.9;font-weight:600;color:#fff}
  .actie .btn-dark{background:var(--sage);color:#fff}
  .actie .btn-dark:hover{background:var(--sage-light);transform:translateY(-2px)}

  /* tarieven / lidmaatschap */
  .lid{background:var(--surface)}
  .lid-grid{display:grid;gap:1.2rem}
  .lid-card{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:22px 22px 22px 6px;
    padding:2rem 1.7rem;
    display:flex;flex-direction:column;gap:.8rem;
    transition:transform .25s,border-color .25s;
  }
  .lid-card:hover{transform:translateY(-4px);border-color:rgba(142,161,132,.6)}
  .lid-card h3{font-size:1.4rem;text-transform:uppercase}
  .lid-card p{color:var(--muted);font-size:1.05rem;flex-grow:1}
  .lid-card .btn{align-self:flex-start}

  /* eind-cta */
  .cta{
    position:relative;isolation:isolate;overflow:hidden;
    text-align:center;padding:6.5rem 0;
  }
  .cta::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background:url('img-16291f1bc445.png') center/cover no-repeat;
  }
  .cta::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:rgba(16,24,18,.82);
  }
  .cta h2{font-size:clamp(2rem,5.5vw,3.2rem);text-transform:uppercase;margin-bottom:1rem}
  .cta p{color:var(--muted);max-width:32rem;margin:0 auto 2rem;font-size:1.12rem}
  .cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.9rem}

  /* footer */
  footer{border-top:1px solid var(--line);padding:3.2rem 0 2rem;background:#0c120e}
  .foot-grid{display:grid;gap:2rem;margin-bottom:2.4rem}
  .foot-logo img{height:48px;margin-bottom:1rem}
  .foot-logo p{color:var(--muted);font-size:.9rem;max-width:22rem}
  footer h4{
    font-family:'Manrope',sans-serif;font-size:.78rem;font-weight:800;
    text-transform:uppercase;letter-spacing:.18em;color:var(--sage-light);margin-bottom:1rem;
  }
  .foot-links{list-style:none;display:grid;gap:.55rem}
  .foot-links a{color:var(--muted);font-size:.92rem;transition:color .2s}
  .foot-links a:hover{color:var(--cream)}
  .foot-bottom{
    border-top:1px solid var(--line);
    padding-top:1.4rem;text-align:center;
    color:rgba(242,240,232,.45);font-size:.8rem;
  }

  /* credit bar at the bottom of the footer: copyright left, Merknu credit right */
  footer{padding-bottom:0}
  .credit-bar{background:#080c09;border-top:1px solid var(--line);color:rgba(242,240,232,.45);font-size:.8rem}
  .credit-bar .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.35rem 1.5rem;padding:1rem 0}
  .credit-bar a{color:var(--sage-light);transition:color .2s}
  .credit-bar a:hover{color:var(--cream)}
  .credit-bar .privacy{margin-left:.5rem;text-decoration:underline;text-underline-offset:3px}
  @media (max-width:600px){
    .credit-bar .wrap{flex-direction:column;text-align:center}
  }

  /* social media */
  .socials{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
  .socials a{
    display:inline-flex;align-items:center;gap:.55rem;
    padding:.6rem 1.1rem;border-radius:999px;
    border:1px solid rgba(242,240,232,.3);
    background:rgba(242,240,232,.06);
    color:var(--cream);font-size:.78rem;font-weight:800;
    text-transform:uppercase;letter-spacing:.08em;
    transition:background .2s,border-color .2s,transform .2s;
  }
  .socials a:hover{background:var(--sage);border-color:var(--sage);color:#fff;transform:translateY(-2px)}
  .socials svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}

  /* footer contact */
  .foot-contact address{font-style:normal;color:var(--muted);font-size:.95rem;line-height:1.7}
  .foot-contact address a{color:var(--sage-light);text-decoration:underline;text-underline-offset:3px}
  .foot-contact address a:hover{color:var(--cream)}
  .contact-lines{display:grid;gap:.55rem;margin:1.1rem 0 1.6rem}
  .contact-lines a{
    display:inline-flex;align-items:center;gap:.6rem;
    color:var(--cream);font-weight:700;font-size:.98rem;
    transition:color .2s;
  }
  .contact-lines a:hover{color:var(--sage-light)}
  .contact-lines svg{width:16px;height:16px;fill:var(--sage-light);flex-shrink:0}
  .uren{width:100%;max-width:15rem;border-collapse:collapse;font-size:.92rem;color:var(--muted)}
  .uren td{padding:.18rem 0}
  .uren td:last-child{text-align:right;color:var(--cream);font-variant-numeric:tabular-nums}

  /* reveal animatie */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
  }

  /* ---------- desktop ---------- */
  @media (min-width:820px){
    .nav-links{display:flex}
    .nav-cta{display:inline-block}
    .burger{display:none}
    .over-grid{grid-template-columns:1.05fr 1fr;gap:3.5rem}
    .aanbod-item{grid-template-columns:1fr 1fr;gap:3.5rem;padding:3.4rem 0}
    .aanbod-item:nth-child(even) .aanbod-img{order:2}
    .lid-grid{grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto}
    .pilates-grid{grid-template-columns:repeat(2,1fr)}
    .vergelijk-grid{grid-template-columns:repeat(2,1fr)}
    .foot-grid{grid-template-columns:1.3fr .8fr 1fr 1.3fr}
  }