@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --black:#050505;
  --white:#fff;
  --grey:#f2f2f0;
  --line:#d9d9d5;
  --muted:#70706c;
  --max:1240px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter,Arial,sans-serif; color:var(--black); background:var(--white); }
a { color:inherit; text-decoration:none; }
.site-header { height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); z-index:10; }
.brand img { width:178px; height:auto; display:block; object-fit:contain; object-position:top; }
.nav { display:flex; gap:30px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.button { display:inline-flex; align-items:center; justify-content:center; background:var(--black); color:#fff; padding:17px 25px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border:2px solid var(--black); transition:.2s; }
.button:hover { background:#fff; color:#000; }
.button-small { padding:12px 16px; font-size:11px; }
/* PROJECT M. haar / sport switch */
.header-actions { display:flex; align-items:center; gap:14px; }
.brand-switch { display:flex; align-items:center; border:1px solid var(--black); padding:3px; background:#fff; }
.brand-switch a { min-width:58px; padding:9px 11px; text-align:center; font-size:10px; line-height:1; font-weight:900; letter-spacing:.1em; }
.brand-switch a.active { background:var(--black); color:var(--white); }
@media(max-width:900px){
  .header-actions { gap:8px; }
  .brand-switch a { min-width:50px; padding:9px 8px; font-size:9px; }
  .header-book { display:none; }
}

.hero { min-height:700px; display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; background:var(--grey); }
.hero-copy { padding:90px 7vw 80px; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:0 0 18px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(56px,7vw,105px); line-height:.9; letter-spacing:-.07em; margin-bottom:28px; font-weight:900; }
h1 span,h2 span { color:#777; }
.hero-text { max-width:570px; font-size:18px; line-height:1.55; color:#444; }
.project-slogan { margin:24px 0 0; padding-left:16px; border-left:4px solid #111; font-size:clamp(18px,2vw,24px); font-weight:800; line-height:1.3; letter-spacing:-.025em; }
.hero-actions { display:flex; gap:22px; align-items:center; margin-top:22px; }
.text-link { font-size:12px; font-weight:800; letter-spacing:.07em; }
.hero-mark { background:#000; color:#fff; display:flex; flex-direction:column; justify-content:center; padding:7vw; }
.mark-project { border:3px solid #fff; border-bottom:0; padding:24px 28px 18px; font-size:clamp(40px,5vw,78px); line-height:.9; font-weight:900; letter-spacing:-.07em; }
.mark-sport { border:3px solid #fff; padding:14px 28px 20px; font-size:clamp(25px,3vw,46px); font-weight:800; letter-spacing:-.04em; }
.section { max-width:var(--max); margin:0 auto; padding:120px 34px; }
.intro { text-align:center; max-width:900px; }
h2 { font-size:clamp(45px,6vw,82px); line-height:.95; letter-spacing:-.06em; font-weight:900; margin-bottom:24px; }
.lead { font-size:18px; line-height:1.6; color:#555; max-width:700px; }
.intro .lead { margin:0 auto; }
.section-heading { margin-bottom:55px; }
.training-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #111; }
.training-card { min-height:390px; padding:30px; border-right:1px solid #111; display:flex; flex-direction:column; }
.training-card:last-child { border-right:0; }
.number { font-size:11px; font-weight:800; margin-bottom:auto; }
.training-card h3 { font-size:40px; line-height:.98; letter-spacing:-.05em; }
.training-card p { color:#555; line-height:1.6; max-width:310px; }
.training-card a,.price-card a { font-size:11px; font-weight:800; letter-spacing:.1em; margin-top:auto; }
.pricing { background:#f2f2f0; max-width:none; padding-left:max(34px,calc((100vw - var(--max))/2 + 34px)); padding-right:max(34px,calc((100vw - var(--max))/2 + 34px)); }
.price-grid { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid #111; border-bottom:1px solid #111; }
.price-card { padding:28px 20px 32px; min-height:260px; border-right:1px solid #111; display:flex; flex-direction:column; position:relative; }
.price-card:last-child { border-right:0; }
.price-label { font-size:10px; font-weight:800; letter-spacing:.1em; }
.price { font-size:38px; font-weight:900; letter-spacing:-.06em; margin:25px 0 12px; }
.price span { font-size:12px; letter-spacing:0; margin-left:5px; font-weight:700; }
.price-card p:not(.price-label) { font-size:13px; line-height:1.5; color:#555; }
.price-card.featured { background:#000; color:#fff; }
.price-card.featured p:not(.price-label) { color:#bbb; }
.price-card.featured a { color:#fff; }
.tag { position:absolute; top:0; right:0; background:#fff; color:#000; font-size:9px; padding:7px 9px; font-weight:900; }
.schedule { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }
.schedule-panel { min-height:430px; background:#f2f2f0; padding:24px; }
.schedule-placeholder { height:100%; min-height:380px; border:1px dashed #aaa; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; }
.schedule-placeholder span { font-size:11px; font-weight:900; letter-spacing:.14em; }
.schedule-placeholder strong { font-size:34px; letter-spacing:-.04em; margin:12px 0; }
.schedule-placeholder p { color:#666; max-width:360px; line-height:1.5; }
.booking { max-width:none; background:#000; color:#fff; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding-left:max(34px,calc((100vw - var(--max))/2 + 34px)); padding-right:max(34px,calc((100vw - var(--max))/2 + 34px)); }
.booking .lead { color:#bbb; }
.booking-box { background:#fff; color:#000; padding:45px; min-height:350px; display:flex; flex-direction:column; justify-content:center; }
.booking-logo { font-size:42px; font-weight:900; letter-spacing:-.07em; }
.booking-box p { font-size:10px; letter-spacing:.15em; font-weight:800; }
.button-light { background:#000; color:#fff; border-color:#000; width:max-content; margin-top:18px; }
.booking-box small { margin-top:22px; color:#777; line-height:1.5; max-width:430px; }
.location { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.location-card { background:#f2f2f0; min-height:350px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.big-m { font-size:170px; font-weight:900; letter-spacing:-.1em; line-height:.7; }
.location-card p { margin-top:35px; font-size:11px; font-weight:800; letter-spacing:.1em; line-height:1.5; }
.footer { background:#000; color:#fff; padding:70px 34px 30px; }
.footer-brand { font-size:44px; font-weight:900; letter-spacing:-.07em; }
.footer-brand span { font-size:22px; letter-spacing:-.03em; }
.footer-links { display:flex; gap:25px; margin:60px 0; font-size:12px; font-weight:700; text-transform:uppercase; }
.footer-bottom { border-top:1px solid #333; padding-top:20px; display:flex; justify-content:space-between; color:#999; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }

@media(max-width:900px){
  .site-header { height:72px; padding:0 18px; }
  .brand img { width:145px; }
  .nav { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding:70px 24px; }
  .hero-mark { min-height:320px; padding:45px 24px; }
  .training-grid,.price-grid { grid-template-columns:1fr; }
  .training-card,.price-card { border-right:0; border-bottom:1px solid #111; min-height:290px; }
  .training-card:last-child,.price-card:last-child { border-bottom:0; }
  .section { padding:80px 24px; }
  .pricing,.booking { padding-left:24px; padding-right:24px; }
  .schedule,.booking,.location { grid-template-columns:1fr; gap:40px; }
  .schedule-panel { min-height:330px; }
  .booking-box { padding:30px; }
  h1 { font-size:58px; }
  h2 { font-size:52px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .footer { padding:55px 24px 25px; }
  .footer-links { flex-wrap:wrap; margin:45px 0; }
}


.mobile-book { display:none; }

@media(max-width:900px){
  .mobile-book {
    display:flex;
    position:fixed;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:20;
    height:54px;
    align-items:center;
    justify-content:center;
    background:#000;
    color:#fff;
    border:2px solid #fff;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
    font-size:12px;
    font-weight:900;
    letter-spacing:.1em;
  }
  body { padding-bottom:82px; }
}

/* Live Trainin lesrooster */
.trainin-panel { min-height:430px; background:#f3f4f6; padding:18px; overflow:hidden; }
.trainin-widget-wrap { width:100%; min-height:390px; }
trainin-widget { display:block; width:100%; min-height:390px; }
.trainin-panel noscript p { padding:20px; font-size:13px; line-height:1.5; }
@media(max-width:900px){
  .trainin-panel { padding:10px; min-height:420px; }
  .trainin-widget-wrap, trainin-widget { min-height:400px; }
}

section[id]{scroll-margin-top:90px}.training-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.training-card{padding:24px}.training-card h3{font-size:32px}.week-section{padding-bottom:30px}.week-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.week-day{background:#f2f2f0;padding:24px}.week-day h3{font-size:22px}.slot{padding:16px 0;border-top:1px solid #ccc;display:flex;flex-direction:column;gap:8px;line-height:1.4}.slot span{font-size:14px;color:#555}.schedule-note{margin-top:24px;line-height:1.6;color:#555}a:focus-visible{outline:3px solid #00abe7;outline-offset:4px}@media(max-width:1100px){.training-grid,.week-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.training-grid,.week-grid{grid-template-columns:1fr}.booking-logo{font-size:34px}.button-light{width:100%}}

/* PROJECT M. rust & overzicht */
.section{padding-top:76px;padding-bottom:76px}.section-heading{margin-bottom:32px}.hero-text{max-width:520px;line-height:1.65}.intro.section{text-align:left}.training-grid,.price-grid{gap:18px}.training-card p{line-height:1.6}.week-section{background:#f8f8f8}.week-details{margin-top:24px}.week-details summary{cursor:pointer;font-weight:800;border:1px solid #d9d9d9;border-radius:12px;padding:19px 22px;background:white;list-style-position:inside}.week-details[open] summary{margin-bottom:22px}.booking-simple{background:#101010;color:white}.booking-simple-inner{display:flex;align-items:center;justify-content:space-between;gap:32px}.booking-simple-inner p{max-width:510px}.booking-simple-inner h2{font-size:clamp(30px,4vw,52px);line-height:1.1}.booking-simple-inner .button{white-space:nowrap}.schedule-copy h2{font-size:clamp(32px,4vw,56px)}
@media(max-width:760px){.section{padding-top:55px;padding-bottom:55px}.booking-simple-inner{flex-direction:column;align-items:flex-start}.booking-simple-inner .button{white-space:normal}.hero-text{max-width:100%}.week-details summary{padding:16px}}

/* PROJECT M. sport: rustig, compact merkverhaal */
.intro .brand-story{max-width:690px;margin:24px 0 0;}
.intro .brand-story p{font-size:clamp(16px,1.6vw,19px);line-height:1.75;color:#444;margin:0 0 16px;}
.intro .brand-story .brand-story-closing{font-weight:800;color:#151515;margin-top:26px;margin-bottom:0;}
@media(max-width:760px){.intro .brand-story{margin-top:18px}.intro .brand-story p{line-height:1.65}.intro .brand-story .brand-story-closing{margin-top:20px}}


/* PROJECT M. sport — rustiger en minder schreeuwerig */
.hero{min-height:560px;background:#fff;}
.hero-copy{padding:64px 7vw 60px;}
.hero .eyebrow{font-size:10px;letter-spacing:.16em;color:#5f5f5f;margin-bottom:14px;}
.hero h1{font-size:clamp(42px,5.4vw,74px);line-height:1.02;letter-spacing:-.05em;margin-bottom:18px;max-width:640px;}
.hero h1 span{color:#7b7b7b;}
.hero-text{max-width:560px;font-size:17px;line-height:1.7;color:#555;margin-bottom:0;}
.project-slogan{margin-top:18px;padding-left:14px;border-left:2px solid #b9b9b9;font-size:16px;font-weight:700;line-height:1.6;color:#4a4a4a;letter-spacing:0;}
.hero-actions{margin-top:26px;gap:18px;}
.hero-mark{background:#f4f4f2;padding:5vw;align-items:center;justify-content:center;}
.mark-project{font-size:clamp(30px,4.2vw,56px);padding:18px 24px 14px;border-width:2px;max-width:460px;width:100%;background:#111;}
.mark-sport{font-size:clamp(20px,2.4vw,32px);padding:10px 24px 16px;border-width:2px;max-width:460px;width:100%;background:#111;}
.section{padding-top:64px;padding-bottom:64px;}
.intro.section{max-width:860px;}
h2{font-size:clamp(34px,4.6vw,58px);line-height:1.03;letter-spacing:-.045em;}
.intro .brand-story p{font-size:16px;line-height:1.75;color:#505050;}
.training-card h3{font-size:28px;line-height:1.05;}
.training-card p,.price-card p:not(.price-label),.schedule-note,.schedule-copy p,.location p{font-size:15px;line-height:1.65;}
.price{font-size:32px;}
.button, .button-small{padding:14px 18px;}
.booking-simple-inner h2{font-size:clamp(28px,3.6vw,44px);}
.week-day h3{font-size:20px;}
@media(max-width:900px){
  .hero{min-height:auto;}
  .hero-copy{padding:48px 24px 40px;}
  .hero h1{font-size:44px;}
  .hero-mark{min-height:240px;padding:28px 24px;}
  .mark-project{font-size:34px;}
  .mark-sport{font-size:24px;}
  h2{font-size:40px;}
  .project-slogan{font-size:15px;}
}



/* PROJECT M. SPORT | zwart-wit, afgeronde vormgeving | eenduidige eindlaag */
:root{--black:#080808;--white:#fff;--grey:#111;--line:#343434;--muted:#c6c6c6}
html{color-scheme:dark}
body{background:#080808;color:#fff}
.site-header{background:rgba(8,8,8,.97);color:#fff;border-bottom:1px solid #343434}
.nav a,.text-link{color:#fff}
.brand-switch{background:#111;border:1px solid #777;border-radius:999px;padding:4px;overflow:hidden}
.brand-switch a{color:#fff;border-radius:999px;padding:10px 14px}
.brand-switch a.active{background:#fff;color:#080808}
.button,.button-small,.button-light,.mobile-book,.header-book{background:#fff;color:#080808;border:2px solid #fff;border-radius:999px;padding:14px 23px;text-align:center;box-shadow:none}
.button-small,.header-book{padding:11px 18px}
.button:hover,.button:focus-visible{background:transparent;color:#fff}
.hero,.hero-copy,.week-section,.section,.intro,.location{background:#080808;color:#fff}
.hero .eyebrow{color:#ccc}
.hero h1 span,h1 span,h2 span{color:#aaa}
.hero-text,.project-slogan,.lead,.intro .brand-story p,.training-card p,.price-card p:not(.price-label),.schedule-note,.schedule-copy p,.location p,.slot span,.week-day p,.schedule-placeholder p{color:#d0d0d0}
.intro .brand-story .brand-story-closing{color:#fff}
.project-slogan{border-left-color:#aaa}
.hero-mark{background:#111;color:#fff}
.mark-project,.mark-sport{background:#080808;border-color:#fff;color:#fff}
.training-grid,.price-grid{border:0;gap:18px}
.training-card,.price-card{background:#111;color:#fff;border:1px solid #343434;border-radius:18px}
.training-card:last-child,.price-card:last-child{border-right:1px solid #343434}
.pricing{background:#111;color:#fff}
.price-card,.price-card.featured{background:#171717;color:#fff}
.price-card.featured p:not(.price-label){color:#ddd}
.tag{background:#fff;color:#080808}
.week-day,.location-card,.schedule-panel,.trainin-panel,.booking-box{background:#191919;color:#fff;border-radius:18px}
.slot,.week-details summary{border-color:#444}
.week-details summary{background:#191919;color:#fff;border-radius:18px}
.booking,.booking-simple,.footer{background:#111;color:#fff}
.booking .lead{color:#ddd}
.booking-box small,.footer-bottom{color:#bbb}
.footer-bottom{border-top-color:#444}
.mobile-book{background:#fff;color:#080808}
a:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:900px){.site-header{background:rgba(8,8,8,.98)}.training-card,.price-card{border-bottom-color:#343434}}
@media(max-width:600px){.hero-actions{flex-wrap:wrap}.brand-switch a{padding:10px 12px}}

/* PROJECT M. — aanpassingen 28 oktober 2026: vijf trainingskaarten en zes roosterdagen */
.training-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.training-card .training-coming-soon {
  display:block; margin-top:auto; font-size:11px; font-weight:800; letter-spacing:.1em; color:#bdbdbd;
}
.training-card-open-gym { border-color:#797979; }
.week-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.week-day { min-width:0; }
.slot-open-gym b { color:#fff; }
@media(max-width:1100px) {
  .training-grid,.week-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .training-grid,.week-grid { grid-template-columns:1fr; }
}

/* PROJECT M. SPORT | logo zonder afbeeldingsachtergrond */
.site-header .brand{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;text-decoration:none;min-width:160px;color:#fff;line-height:1.02}
.site-header .brand-text{font-size:22px;letter-spacing:-.055em;font-weight:900;color:#fff}
.site-header .brand-sub{font-size:13px;letter-spacing:.04em;color:#c9c9c9;margin-top:3px}
/* Compact, standaard ingeklapt actueel rooster */
#rooster.schedule{display:block}
#rooster .schedule-copy{max-width:760px;margin-bottom:26px}
#rooster .live-schedule{max-width:1000px;border:1px solid #424242;background:#151515;border-radius:18px;overflow:hidden}
#rooster .live-schedule>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:22px 26px;background:#1c1c1c;color:#fff;font-size:14px;font-weight:800;letter-spacing:.06em;list-style:none}
#rooster .live-schedule>summary::-webkit-details-marker{display:none}
#rooster .live-schedule>summary:after{content:'+';font-size:29px;font-weight:400;line-height:1}
#rooster .live-schedule[open]>summary:after{content:'−'}
#rooster .schedule-hint{margin:18px 22px;color:#ddd}
#rooster .live-schedule .trainin-panel{margin:0 16px 16px;padding:8px;background:#191919;max-width:none}
#rooster .live-schedule .trainin-widget-wrap{width:100%}
@media(max-width:650px){.site-header .brand{min-width:100px}.site-header .brand-text{font-size:17px}.site-header .brand-sub{font-size:11px}#rooster .live-schedule>summary{padding:18px;font-size:12px}#rooster .live-schedule .trainin-panel{margin:0 7px 8px;padding:0}}

/* 2026-10-29: trainer, kenmerken, proefles */
.trainer-block{max-width:820px;margin:42px 0 0;padding:26px 28px;background:#191919;border:1px solid #2c2c2c;border-radius:18px}
.trainer-block .eyebrow{margin-bottom:8px;color:#aaa}
.trainer-block h3{font-size:clamp(24px,3vw,32px);letter-spacing:-.04em;margin:0 0 10px;color:#fff}
.trainer-block p:not(.eyebrow){margin:0;line-height:1.65;color:#d0d0d0}
.facts{list-style:none;padding:0;margin:22px 0 0;max-width:820px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.facts li{border:1px solid #2c2c2c;border-radius:16px;padding:18px 18px 20px;display:flex;flex-direction:column;gap:4px;background:#111}
.facts b{font-size:20px;letter-spacing:-.03em;color:#fff}
.facts span{font-size:13px;color:#bdbdbd}
.price-note{margin-top:24px;color:#d0d0d0;line-height:1.6}
.price-note a,.location p a{text-decoration:underline;text-underline-offset:3px}
.booking-simple .proefles{margin-top:48px;padding-top:48px;border-top:1px solid #2c2c2c}
.button.button-outline{background:transparent;color:#fff;border:2px solid #fff}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.facts{grid-template-columns:1fr}.trainer-block{padding:22px}}


/* 2026-10-31: waarom PROJECT M., goodybag, zes prijskaarten */
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.why-card{background:#111;border:1px solid #343434;border-radius:18px;padding:26px 24px}
.why-card h3{font-size:22px;letter-spacing:-.03em;margin:0 0 10px;color:#fff}
.why-card p{margin:0;font-size:15px;line-height:1.65;color:#d0d0d0}
.price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.goodybag{display:flex;align-items:center;gap:26px;margin:0 0 28px;padding:24px 28px;background:#fff;color:#080808;border-radius:18px}
.goodybag-badge{flex:0 0 auto;width:104px;height:104px;border-radius:50%;background:#080808;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.goodybag-badge b{font-size:40px;font-weight:900;letter-spacing:-.05em}
.goodybag-badge span{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.goodybag .eyebrow{color:#555;margin-bottom:6px}
.goodybag h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.04em;margin:0 0 8px}
.goodybag-copy p:not(.eyebrow){margin:0;font-size:15px;line-height:1.6;color:#333;max-width:720px}
.booking-simple-inner p a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.price-grid{grid-template-columns:1fr}.goodybag{flex-direction:column;align-items:flex-start;padding:22px}.goodybag-badge{width:84px;height:84px}.goodybag-badge b{font-size:32px}}