:root{
  --ink:#0f0f12;--ink-soft:#17171b;--paper:#ffffff;--paper-2:#f6f6f4;
  --text:#141418;--muted:#6b6b74;--line:#e8e8e6;--line-d:rgba(255,255,255,.10);
  --accent:#ff5b22;--accent-d:#e6491a;
  --c-tribe:#ff5b22;--c-events:#2aa8ff;--c-products:#2e9e57;--c-people:#6500d4;--c-digital:#2e9e57;
  --container:1180px;--radius:18px;
  --card:#ffffff;--text-soft:#43434c;
}
:root[data-theme="dark"]{
  --paper:#0f0f13;--paper-2:#17171b;--card:#191920;
  --text:#f1f1f4;--text-soft:#c2c2cc;--muted:#9a9aa6;--line:#2a2a31;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Outfit,system-ui,-apple-system,Arial,sans-serif;background:var(--paper);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.03em;line-height:1.08}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:104px 0}
.center{text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;padding:14px 28px;border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s,color .2s,border-color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(255,91,34,.24)}
.btn-accent:hover{background:var(--accent-d);box-shadow:0 12px 28px rgba(255,91,34,.32)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#000}
.btn-light{background:#fff;color:var(--ink)}
.btn-outline{border-color:var(--line);color:var(--text);background:transparent}.btn-outline:hover{border-color:var(--text)}
.btn-outline-w{border-color:rgba(255,255,255,.35);color:#fff}.btn-outline-w:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--text)}
.link-arrow .a{transition:transform .2s}.link-arrow:hover .a{transform:translateX(4px)}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}

/* HEADER (behouden, verfijnd) */
.header{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:1px solid var(--line-d)}
.nav{max-width:var(--container);margin:0 auto;padding:15px 24px;display:flex;align-items:center;gap:22px}
.nav .logo img{height:26px}
.nav .links{list-style:none;display:flex;gap:28px;margin-left:20px}
.nav .links a{font-weight:500;font-size:15px;color:#c7c7cf;position:relative;padding:5px 0}
.nav .links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .25s}
.nav .links a:hover{color:#fff}.nav .links a:hover::after{width:100%}
/* Navigatie: eigen kleur per onderdeel (hover + actieve pagina) */
.nav .links li:nth-child(1) a::after{background:var(--c-tribe)}
.nav .links li:nth-child(2) a::after{background:var(--c-digital)}
.nav .links li:nth-child(3) a::after{background:var(--c-events)}
.nav .links li:nth-child(4) a::after{background:var(--c-people)}
.nav .links a.active::after{width:100%}
.nav .cta{margin-left:auto;padding:10px 20px;font-size:14px}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:4px}
.burger span{width:24px;height:2.5px;background:#fff;border-radius:2px}

/* HERO (donker) */
.hero{background:var(--ink);color:#fff;text-align:center;padding:118px 0 128px;position:relative;overflow:hidden}
.hero .halo{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero .halo .g{position:absolute;width:54%;height:64%;border-radius:50%;filter:blur(64px);will-change:opacity,transform;animation:glowPulse 19s cubic-bezier(.45,0,.55,1) infinite}
.hero .halo .g1{top:-10%;left:-8%;background:radial-gradient(circle at center,rgba(255,91,34,.55),transparent 66%);animation-delay:0s}
.hero .halo .g2{top:-12%;right:-8%;background:radial-gradient(circle at center,rgba(42,168,255,.46),transparent 66%);animation-delay:4.75s}
.hero .halo .g3{bottom:-14%;left:-3%;background:radial-gradient(circle at center,rgba(46,158,87,.46),transparent 66%);animation-delay:9.5s}
.hero .halo .g4{bottom:-14%;right:-3%;background:radial-gradient(circle at center,rgba(101,0,212,.55),transparent 66%);animation-delay:14.25s}
@keyframes glowPulse{0%,100%{opacity:.44;transform:translateY(6%) scale(.96)}50%{opacity:.7;transform:translateY(-6%) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.hero .halo .g{animation:none;opacity:.5}}
@keyframes heroGlow{0%,100%{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.page-hero{position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(46% 62% at 18% 16%, color-mix(in srgb, var(--acc, var(--c-tribe)) 22%, transparent), transparent 62%),
    radial-gradient(50% 66% at 82% 94%, color-mix(in srgb, var(--acc, var(--c-tribe)) 20%, transparent), transparent 66%);
  animation:heroGlow 20s ease-in-out infinite}
.page-hero .container{position:relative;z-index:1}
.hero .inner{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 24px}
.hero .eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#8f8f99;margin-bottom:22px}
.hero h1{font-size:clamp(40px,6.4vw,74px);font-weight:700;letter-spacing:-.04em}
.hero p{max-width:600px;margin:24px auto 0;font-size:18.5px;color:#c9c9d2;font-weight:300}
.hero .actions{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* section intro */
.intro{max-width:640px;margin:0 auto 60px;text-align:center}
.kicker{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px}
.intro h2{font-size:clamp(30px,4vw,44px)}
.intro p{margin-top:14px;color:var(--muted);font-size:17.5px;font-weight:300}

/* CONCEPTEN */
.concepts{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.concept{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s}
.concept:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(20,20,24,.10);border-color:#dcdcda}
.concept .visual{aspect-ratio:16/9;background:var(--ink);display:flex;align-items:center;justify-content:center;position:relative;border-top:4px solid var(--acc)}
.concept .visual svg{width:96px;height:96px;position:relative;z-index:2}
.concept .visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,var(--acc),transparent 62%);opacity:.16}
.concept .body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.concept h3{font-size:23px}
.concept p{color:var(--muted);font-size:15.5px;margin:9px 0 18px;font-weight:300;flex:1}
.c-tribe{--acc:var(--c-tribe)}.c-events{--acc:var(--c-events)}.c-products{--acc:var(--c-products)}.c-people{--acc:var(--c-people)}
.c-tribe .link-arrow{color:var(--c-tribe)}.c-events .link-arrow{color:var(--c-events)}
.c-products .link-arrow{color:var(--c-products)}.c-people .link-arrow{color:var(--c-people)}

/* TEAM */
.team-sec{background:var(--paper-2)}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto}
.member{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;text-align:center;transition:transform .28s,box-shadow .28s}
.member:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(20,20,24,.09)}
.member .photo{width:132px;height:132px;border-radius:50%;margin:0 auto 18px;overflow:hidden;background:var(--ink);display:flex;align-items:flex-end;justify-content:center}
.member .photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.member h3{font-size:20px}
.member .role{color:var(--muted);font-size:14.5px;margin-top:4px}

/* CTA band (donker) */
.cta-band{background:var(--ink);color:#fff;text-align:center}
.cta-band h2{font-size:clamp(30px,4.2vw,46px);max-width:680px;margin:0 auto}
.cta-band p{max-width:520px;margin:16px auto 0;color:#c9c9d2;font-size:17.5px;font-weight:300}
.cta-band .actions{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* PAGE HERO (subpaginas) */
.page-hero{background:var(--ink);color:#fff;padding:96px 0 88px;text-align:center}
.page-hero .eyebrow{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc,#8f8f99);font-weight:600;margin-bottom:16px}
.page-hero h1{font-size:clamp(34px,5vw,58px)}
.page-hero p{max-width:600px;margin:18px auto 0;color:#c9c9d2;font-size:18px;font-weight:300}

/* generieke content */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:clamp(26px,3.4vw,36px);margin:0 0 14px}
.prose p{color:#43434c;font-size:17.5px;margin-bottom:18px;font-weight:300}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:10px}
.feature{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:24px}
.feature h4{font-size:17px;margin-bottom:6px}
.feature p{color:var(--muted);font-size:15px;font-weight:300}

/* PRODUCTKAARTEN */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .28s,box-shadow .28s,border-color .28s}
.product:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(20,20,24,.10);border-color:#dcdcda}
.product .visual{aspect-ratio:4/3;background:var(--ink);display:flex;align-items:center;justify-content:center}
.product .visual svg{width:72px;height:72px;opacity:.9}
.product .body{padding:22px;display:flex;flex-direction:column;flex:1}
.product h3{font-size:19px}
.product p{color:var(--muted);font-size:14.5px;margin:8px 0 16px;font-weight:300;flex:1}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 40px 22px 0;font-family:inherit;font-size:18px;font-weight:600;color:var(--text);position:relative}
.faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--muted);transition:transform .25s}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 0 22px;color:var(--muted);font-size:16px;font-weight:300}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:start}
.contact-info h2{font-size:clamp(26px,3.4vw,38px)}
.contact-info p{color:var(--muted);margin-top:12px;font-size:17px;font-weight:300}
.contact-lines{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.contact-lines div span{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact-lines div a,.contact-lines div strong{font-weight:600;font-size:17px;color:var(--text)}
.form{background:var(--paper-2);border:1px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:12px}
.form .row{display:flex;gap:12px}
.form label{font-size:12.5px;font-weight:600;color:var(--text)}
.form input,.form select,.form textarea{width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;font:inherit;font-size:15px;color:var(--text);outline:none;transition:border-color .2s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent)}
.form ::placeholder{color:#a4a4ac}.form select:invalid{color:#a4a4ac}
.form .ok{display:none;background:#eafaef;color:#1c7a42;border:1px solid #bfe8cd;font-weight:600;font-size:14px;padding:12px;border-radius:12px;text-align:center}

/* FOOTER */
.footer{background:var(--ink);color:#fff;padding:56px 0 30px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:32px;border-bottom:1px solid var(--line-d)}
.footer .brand img{height:18px;margin-bottom:12px}
.footer .brand p{color:#9a9aa4;font-size:14.5px;font-weight:300;max-width:280px}
.footer h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#8a8a94;margin-bottom:14px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer ul a{color:#cfcfd6;font-size:14.5px}.footer ul a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:22px;color:#8a8a94;font-size:13px}

/* RESPONSIVE */
@media(max-width:900px){
  .nav .links,.nav .cta{display:none}
  .burger{display:flex}
  .section{padding:72px 0}
  .concepts{grid-template-columns:1fr}
  .team{grid-template-columns:1fr;max-width:420px}
  .product-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .section{padding:56px 0}
  .form .row{flex-direction:column}
  .footer-top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ============ v3 TOEVOEGINGEN ============ */
:root{--green:#2e9e57;--green-d:#268a4b;--blue:#2aa8ff;--blue-d:#1f8fe0;--purple:#6500d4;--purple-d:#5300ad}

/* offerteknop: zachte bewegende vierkleuren-gradient */
.btn-quote{color:#fff;border:0;
  background:linear-gradient(100deg,#ff5b22,#2e9e57 34%,#6500d4 66%,#2aa8ff);
  background-size:280% 100%;background-position:0% 0;
  box-shadow:0 8px 22px rgba(0,0,0,.22);animation:quoteFlow 9s ease-in-out infinite}
.btn-quote:hover{filter:brightness(1.06);box-shadow:0 12px 28px rgba(0,0,0,.3)}
@keyframes quoteFlow{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* concept-accent knoppen */
.btn-green{background:var(--green);color:#fff;box-shadow:0 8px 22px rgba(46,158,87,.25)}
.btn-green:hover{background:var(--green-d);box-shadow:0 12px 28px rgba(46,158,87,.34)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(42,168,255,.25)}
.btn-blue:hover{background:var(--blue-d)}
.btn-purple{background:var(--purple);color:#fff;box-shadow:0 8px 22px rgba(101,0,212,.28)}
.btn-purple:hover{background:var(--purple-d)}

/* team met 2 personen */
.team.team-2{grid-template-columns:repeat(2,1fr);max-width:640px}
.member .links-row{margin-top:12px;display:flex;gap:12px;justify-content:center}
.member .links-row a{font-size:13px;font-weight:600;color:var(--muted)}
.member .links-row a:hover{color:var(--text)}

/* ---------- WEBSHOP (Tribe Boxes) ---------- */
.shop-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.shop-bar .back{color:var(--muted);font-size:14.5px;font-weight:600}
.shop-bar .crumb{color:var(--muted);font-size:14px}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.cat-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);cursor:pointer;display:flex;flex-direction:column;transition:transform .28s,box-shadow .28s,border-color .28s;text-align:left}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(20,20,24,.1);border-color:#dcdcda}
.cat-card .visual{aspect-ratio:4/3;background:linear-gradient(140deg,#17171d,#0f0f13);display:flex;align-items:center;justify-content:center;border-top:4px solid var(--acc,var(--c-tribe))}
.cat-card .visual span{color:#4a4a55;font-size:13px;font-weight:600;letter-spacing:.04em}
.cat-card .body{padding:20px}
.cat-card h3{font-size:19px}
.cat-card p{color:var(--muted);font-size:14px;margin-top:6px;font-weight:300}

.tb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tb-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;transition:transform .28s,box-shadow .28s,border-color .28s}
.tb-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(20,20,24,.1);border-color:#dcdcda}
.ph-visual{aspect-ratio:4/3;background:linear-gradient(140deg,#17171d,#0f0f13);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#41414c}
.ph-visual svg{width:40px;height:40px;opacity:.5}
.ph-visual small{font-size:11.5px;letter-spacing:.05em}
.tb-card .body{padding:20px;display:flex;flex-direction:column;flex:1}
.tb-card h3{font-size:18px}
.tb-card .desc{color:var(--muted);font-size:14px;margin:7px 0 12px;font-weight:300;flex:1}
.tb-card .price{font-weight:700;font-size:15px;margin-bottom:14px}
.tb-card .price span{color:var(--muted);font-weight:400;font-size:13px}

/* Tribe Box detail */
.tb-detail{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.tb-detail .big-visual{aspect-ratio:1;border-radius:22px;background:linear-gradient(140deg,#17171d,#0f0f13);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#41414c;position:sticky;top:96px}
.tb-detail .big-visual svg{width:70px;height:70px;opacity:.5}
.tb-detail h1{font-size:clamp(30px,4vw,44px)}
.tb-detail .lead{color:#43434c;font-size:18px;font-weight:300;margin:12px 0 20px}
.tb-detail .price-lg{font-size:24px;font-weight:700;margin:18px 0}
.tb-detail h3{font-size:17px;margin:22px 0 10px}
.tb-detail ul.dots{list-style:none;display:flex;flex-direction:column;gap:8px}
.tb-detail ul.dots li{padding-left:22px;position:relative;color:#43434c;font-size:15px}
.tb-detail ul.dots li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--c-tribe)}
.tb-detail .buy-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ---------- EVENTS banners ---------- */
.event-list{display:flex;flex-direction:column;gap:26px}
.event-banner{position:relative;overflow:hidden;border-radius:24px;min-height:320px;display:flex;align-items:flex-end;color:#fff;padding:38px;border:1px solid var(--line)}
.event-banner .bg{position:absolute;inset:0;z-index:0}
.event-banner .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,13,.86),rgba(10,10,13,.35))}
.event-banner .txt{position:relative;z-index:1;max-width:560px}
.event-banner .tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);font-weight:600;margin-bottom:10px}
.event-banner h2{font-size:clamp(30px,4.6vw,50px);margin-bottom:10px}
.event-banner p{color:rgba(255,255,255,.9);font-size:16.5px;font-weight:300;margin-bottom:20px;max-width:440px}
.ev-tvt .bg{background:radial-gradient(60% 120% at 20% 20%,#7a2338,#1a1216),linear-gradient(120deg,#3a1420,#0e0e12)}
.ev-pulse .bg{background:radial-gradient(60% 120% at 80% 10%,#123a5c,#0e1116),linear-gradient(120deg,#0f2a44,#0e0e12)}

/* praktisch blok op eventdetail */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.info-row{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:18px}
.info-row span{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.info-row strong{font-size:16px;font-weight:600}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.gallery .ph{aspect-ratio:4/3;border-radius:14px;background:linear-gradient(140deg,#ececeb,#f6f6f4);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#b3b3b8;font-size:12px}

/* ---------- inschrijfformulier ---------- */
.form .form-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#43434c;font-weight:400}
.form .form-check input{width:auto;margin-top:3px;accent-color:var(--purple)}
.form input[type=file]{padding:10px;background:var(--card);font-size:13.5px}
.signup-open{display:none}
.signup-open.show{display:block;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .cat-grid{grid-template-columns:1fr 1fr}
  .tb-grid{grid-template-columns:1fr 1fr}
  .tb-detail{grid-template-columns:1fr;gap:28px}
  .tb-detail .big-visual{position:relative;top:0;aspect-ratio:16/10}
  .team.team-2{grid-template-columns:1fr;max-width:420px}
  .info-grid,.gallery{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .cat-grid,.tb-grid{grid-template-columns:1fr}
  .event-banner{padding:26px;min-height:260px}
}

/* productdetail-layout (gedeeld) */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.pd .visual{aspect-ratio:1;background:var(--ink);border-radius:22px;display:flex;align-items:center;justify-content:center}
.pd .visual svg{width:120px;height:120px}
.specs{list-style:none;margin:22px 0 28px}
.specs li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.specs li span{color:var(--muted)}.specs li strong{font-weight:600}
.back{display:inline-flex;gap:7px;color:var(--muted);font-size:14.5px;margin-bottom:8px}
@media(max-width:900px){.pd{grid-template-columns:1fr;gap:28px}.pd .visual{order:-1;aspect-ratio:16/10}}

/* productfoto's in kaarten en detailpagina's */
.product .visual{overflow:hidden}
.product .visual img{width:100%;height:100%;object-fit:cover}
.pd .visual{overflow:hidden}
.pd .visual img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   HERWERKING 15/09/2026
   cursor als blauw puntje, zwarte beeldvlakken, sparkle en animatie,
   verspringende concepten, events zonder countdown, digital als showcase
   ============================================================ */

/* cursor: gewoon een blauw puntje (enkel desktop met muis) */
.has-cursor-dot,.has-cursor-dot *{cursor:none !important}
.cursor-dot{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--c-events);box-shadow:0 0 0 3px rgba(42,168,255,.16),0 0 14px rgba(42,168,255,.55);pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:width .18s,height .18s,opacity .25s}
body.cursor-hot .cursor-dot{width:20px;height:20px}
body.cursor-down .cursor-dot{width:8px;height:8px}
.theme-toggle{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:14px;flex:none;transition:background .2s}
.theme-toggle:hover{background:rgba(255,255,255,.18)}
.hero-cursor-glow{position:absolute;width:380px;height:380px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.05) 45%,transparent 66%);opacity:0;transition:opacity .35s;z-index:0}
@media(pointer:coarse){.cursor-dot{display:none}.has-cursor-dot,.has-cursor-dot *{cursor:auto !important}}

/* zwart beeldvlak: hier komt later een foto. Het labeltje rechtsonder helpt om ze te benoemen. */
.ph-black{background:#000;position:relative;overflow:hidden;display:block}
.ph-black .lbl{position:absolute;right:12px;bottom:10px;font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.32);font-weight:600;z-index:3;pointer-events:none}

/* leesbaarheid in donker thema */
.prose p,.tb-detail .lead,.tb-detail ul.dots li,.form .form-check{color:var(--text-soft)}
:root[data-theme="dark"] .concept:hover,:root[data-theme="dark"] .product:hover,:root[data-theme="dark"] .member:hover,
:root[data-theme="dark"] .cat-card:hover,:root[data-theme="dark"] .tb-card:hover{border-color:#3a3a44}
:root[data-theme="dark"] .form .ok{background:rgba(46,158,87,.16);color:#7fe0a2;border-color:rgba(46,158,87,.4)}

/* sparkle: zachte twinkelende puntjes in de donkere koppen */
.sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.aurora .sparkles{z-index:1}
.sparkles .sp{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;opacity:0;animation:twinkle var(--d,4s) ease-in-out var(--dl,0s) infinite}
.sparkles .sp.c1{background:var(--c-tribe)}.sparkles .sp.c2{background:var(--c-events)}.sparkles .sp.c3{background:var(--c-products)}.sparkles .sp.c4{background:var(--c-people)}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) translateY(0)}50%{opacity:.85;transform:scale(1) translateY(-16px)}}

/* reveal-varianten: van links, van rechts, schalen */
.reveal.fx-l{transform:translate(-36px,16px)}
.reveal.fx-r{transform:translate(36px,16px)}
.reveal.fx-up{transform:translateY(44px)}
.reveal.fx-scale{transform:scale(.94) translateY(12px)}
.reveal.fx-l.in,.reveal.fx-r.in,.reveal.fx-up.in,.reveal.fx-scale.in{transform:none}

/* titels krijgen een gekleurd streepje dat aangroeit */
.intro h2{position:relative;display:inline-block}
.intro h2::after{content:"";display:block;height:3px;width:0;margin:14px auto 0;border-radius:2px;background:linear-gradient(90deg,#ff5b22,#2e9e57,#2aa8ff,#6500d4);transition:width .9s cubic-bezier(.2,.8,.2,1) .25s}
.intro.in h2::after{width:72px}

/* knoppen: lichte glans bij hover */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .55s ease}
.btn:hover::after{left:130%}

/* HOME: vier concepten, verspringend (twee hoger, twee lager) met beeldvlak */
.concepts.stagger{grid-template-columns:1fr 1fr;gap:30px 34px;align-items:start}
.concepts.stagger .concept:nth-child(2n){margin-top:96px}
.concept .visual.ph-black{aspect-ratio:4/3;border-top:0;background:#000}
.concept .visual .ico{position:absolute;left:22px;bottom:22px;width:64px;height:64px;border-radius:18px;background:var(--acc);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(0,0,0,.35);animation:floatY 5s ease-in-out infinite;z-index:2;transition:transform .3s}
.concept .visual .ico svg{width:34px;height:34px}
.concept:hover .visual .ico{transform:translateY(-4px) scale(1.06)}
.concept .visual .line{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--acc);z-index:2;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.concept:hover .visual .line{width:100%}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.concept .body .kicker{color:var(--acc);margin-bottom:8px}
@media(max-width:900px){.concepts.stagger{grid-template-columns:1fr;gap:22px}.concepts.stagger .concept:nth-child(2n){margin-top:0}}

/* lopende tekstband */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;background:var(--paper)}
.marquee .track{display:inline-flex;animation:marquee 30s linear infinite}
.marquee span{display:inline-flex;align-items:center;gap:22px;padding:0 22px;font-size:14.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.marquee span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc,var(--c-events))}
.marquee:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* EVENTS: aurora-blok "wordt nog aangekondigd" */
.aurora{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:28px;padding:84px 32px;text-align:center;isolation:isolate}
.aurora::before,.aurora::after{content:"";position:absolute;inset:-35%;z-index:0;pointer-events:none;background:conic-gradient(from 0deg at 50% 50%,rgba(42,168,255,0),rgba(42,168,255,.38),rgba(101,0,212,.38),rgba(255,91,34,.26),rgba(46,158,87,.3),rgba(42,168,255,0));filter:blur(70px);animation:auroraSpin 26s linear infinite}
.aurora::after{animation-direction:reverse;animation-duration:40s;opacity:.6}
.aurora>*{position:relative;z-index:2}
.aurora .kicker{color:rgba(255,255,255,.7)}
.aurora h2{font-size:clamp(34px,5.4vw,66px);letter-spacing:-.04em;line-height:1.02;max-width:820px;margin:0 auto}
.aurora p{color:#c9c9d2;max-width:560px;margin:18px auto 0;font-size:18px;font-weight:300}
.aurora .actions{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@keyframes auroraSpin{to{transform:rotate(360deg)}}
.shimmer{background:linear-gradient(100deg,#fff 20%,var(--c-events) 40%,#c4ec3d 50%,var(--c-events) 60%,#fff 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4.5s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.soon-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 16px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(255,255,255,.06);margin-bottom:24px}
.soon-pill i{width:9px;height:9px;border-radius:50%;background:var(--c-events);animation:pulseDot 1.8s ease-out infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(42,168,255,.65)}100%{box-shadow:0 0 0 14px rgba(42,168,255,0)}}

/* EVENTS: banners met zwart beeldvlak en lichte 3D-kanteling */
.event-banner .bg.ph-black{background:#000}
.event-banner .bg.ph-black .lbl{bottom:14px;right:16px;z-index:1}
.event-banner .bg{transition:transform .35s ease}
.tilt{transform-style:preserve-3d;transition:transform .35s ease;will-change:transform}
.event-banner .txt .btn{margin-top:4px}
.event-banner .glowline{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--c-events),#c4ec3d,var(--c-events));background-size:200% 100%;animation:quoteFlow 6s linear infinite;z-index:2}
.feature-grid.three{grid-template-columns:repeat(3,1fr)}
.feature .fi{width:46px;height:46px;border-radius:13px;background:color-mix(in srgb,var(--acc,var(--c-events)) 16%,transparent);color:var(--acc,var(--c-events));display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feature .fi svg{width:22px;height:22px}
.ev-hero-img{border-radius:26px;overflow:hidden;aspect-ratio:21/9;margin:0 auto 48px}
.gallery .ph-black{aspect-ratio:4/3;border-radius:14px}
@media(max-width:900px){.feature-grid.three{grid-template-columns:1fr}.ev-hero-img{aspect-ratio:16/10}}

/* DIGITAL: showcase in plaats van catalogus */
.ledgrid{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(46,158,87,.7) 1.1px,transparent 1.8px);background-size:22px 22px;opacity:.28;-webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent);animation:ledDrift 14s linear infinite}
@keyframes ledDrift{to{background-position:22px 22px}}
.story{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:64px 0}
.story.flip .media{order:2}
.story .media{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/3;background:#000}
.story .media img{width:100%;height:114%;object-fit:cover;transform:translateY(var(--py,0));will-change:transform}
.story .media .glow{position:absolute;inset:-20%;background:radial-gradient(40% 40% at 50% 50%,color-mix(in srgb,var(--acc,var(--c-products)) 50%,transparent),transparent 70%);filter:blur(34px);opacity:.55;pointer-events:none;animation:glowPulse 14s ease-in-out infinite;z-index:1;mix-blend-mode:screen}
.story .media .num{position:absolute;left:18px;top:16px;z-index:2;font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.7);font-weight:700;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:999px}
.story .txt .kicker{color:var(--acc,var(--c-products))}
.story h2{font-size:clamp(28px,3.6vw,44px)}
.story p{color:var(--text-soft);font-size:17px;font-weight:300;margin-top:14px}
.story .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.story .tags .tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--muted);font-weight:500;background:var(--paper-2);letter-spacing:0;text-transform:none}
.story .txt .link-arrow{margin-top:22px;color:var(--acc,var(--c-products))}
.story+.story{border-top:1px solid var(--line)}
.wip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wip{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;transition:transform .3s}
.wip:hover{transform:translateY(-6px)}
.wip .cap{position:absolute;left:18px;bottom:16px;right:18px;color:#fff;font-weight:600;font-size:15.5px;z-index:2}
.wip .cap small{display:block;color:rgba(255,255,255,.6);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.wip .pulse{position:absolute;top:16px;left:18px;width:10px;height:10px;border-radius:50%;background:var(--c-products);animation:pulseDot 1.8s ease-out infinite;z-index:2}
@media(max-width:900px){.story{grid-template-columns:1fr;gap:26px;padding:40px 0}.story.flip .media{order:0}.wip-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.wip-grid{grid-template-columns:1fr}}

/* WEBSHOP: chips, wereld-label, telling per categorie */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.chip{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--muted);background:var(--paper-2);font-weight:500}
.wereld-tag{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--c-tribe);margin-bottom:6px}
.tb-card .ph-black{aspect-ratio:4/3}
.tb-card .ph-black .lbl{font-size:10px}
.tb-detail .big-visual.ph-black{background:#000}
.tb-detail .two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.tb-detail .quote{font-size:19px;font-weight:500;color:var(--text);margin:6px 0 16px;letter-spacing:-.01em}
.cat-card{position:relative}
.cat-card .count{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.62);color:#fff;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;z-index:2}
@media(max-width:700px){.tb-detail .two-col{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .sparkles .sp,.marquee .track,.aurora::before,.aurora::after,.shimmer,.soon-pill i,.wip .pulse,.concept .visual .ico,.ledgrid,.story .media .glow,.event-banner .glowline{animation:none}
  .sparkles .sp{opacity:.4}.shimmer{color:#fff;background:none}
}

/* ============================================================
   FEEDBACK 16/09/2026
   ============================================================ */
/* geen witte schijn bij hover: geen muisgloed in de hero, geen glans op knoppen */
.hero-cursor-glow{display:none}
.btn::after{display:none}
/* concepten: zuiver zwart beeldvlak zonder kleurwaas (hier komen de foto's) */
.concept .visual.ph-black::before{display:none}
/* bolletjes op subpagina's in de kleur van die pagina */
.page-hero .sparkles .sp{background:var(--acc,#fff)}
/* categoriekaarten op dezelfde hoogte */
.cat-grid{align-items:stretch}
.cat-card{height:100%}
.cat-card .body{min-height:126px}

/* webshop: keuze per moment */
.moment-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:-22px auto 46px;max-width:920px}
.moment-bar a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:14px;font-weight:600;color:var(--text);background:var(--card);transition:transform .2s,border-color .2s,background .2s}
.moment-bar a:hover,.moment-bar a.on{border-color:var(--c-tribe);background:color-mix(in srgb,var(--c-tribe) 10%,var(--card));transform:translateY(-2px)}
.moment-bar a i{width:8px;height:8px;border-radius:50%;background:var(--c-tribe)}

/* werelden binnen Tribe Boxen */
.wereld-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:60px 0 22px;padding-top:28px;border-top:1px solid var(--line)}
.wereld-head.first{margin-top:0;padding-top:0;border-top:0}
.wereld-head h3{font-size:clamp(24px,3vw,32px)}
.wereld-head span{color:var(--muted);font-size:15px;font-weight:300}
.wereld-head .n{margin-left:auto;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* afwisselende kaartformaten */
.tb-grid.editorial{grid-auto-flow:dense}
.tb-card.wide{grid-column:span 2;flex-direction:row}
.tb-card.wide>.ph-black,.tb-card.wide>.ph-visual{width:52%;flex:none;aspect-ratio:auto;min-height:340px}
.tb-card.wide .body{padding:26px}
.tb-card.wide h3{font-size:24px}

/* varianten: dezelfde box, ander moment */
.variants{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 4px}
.variant{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#000}
.variant small{position:absolute;left:8px;top:6px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.variant b{position:absolute;left:8px;bottom:6px;right:6px;font-size:11.5px;font-weight:600;color:#fff;line-height:1.2}
.varlead{font-size:12.5px;color:var(--muted);margin:0 0 12px}
.variants.big{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0 6px}
.variants.big .variant{aspect-ratio:4/3;border-radius:14px}
.variants.big .variant b{font-size:14px;left:12px;bottom:10px;right:10px}
.variants.big .variant span{position:absolute;left:12px;right:10px;bottom:36px;font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.3}

/* pop-up: aftellen naar het volgende moment */
.popup{position:fixed;right:22px;bottom:22px;z-index:80;width:min(360px,calc(100vw - 32px));background:var(--ink);color:#fff;border-radius:20px;padding:20px 20px 18px;box-shadow:0 24px 60px rgba(0,0,0,.35);transform:translateY(24px);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s;border:1px solid rgba(255,255,255,.1);overflow:hidden}
.popup.show{transform:none;opacity:1}
.popup::before{content:"";position:absolute;inset:-40%;background:radial-gradient(40% 40% at 20% 20%,rgba(255,91,34,.45),transparent 70%);pointer-events:none;animation:glowPulse 10s ease-in-out infinite}
.popup>*{position:relative}
.popup .x{position:absolute;top:8px;right:12px;background:none;border:0;color:#9a9aa6;font-size:22px;cursor:pointer;line-height:1;padding:4px}
.popup .days{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--c-tribe)}
.popup .days small{font-size:14px;font-weight:600;color:#c9c9d2;margin-left:8px;letter-spacing:0}
.popup p{color:#c9c9d2;font-size:14.5px;margin:8px 0 14px;font-weight:300}
.popup .btn{padding:11px 18px;font-size:14px}
@media(max-width:900px){.tb-card.wide{flex-direction:column}.tb-card.wide>.ph-black,.tb-card.wide>.ph-visual{width:100%;aspect-ratio:4/3;min-height:0}}
@media(max-width:560px){.tb-card.wide{grid-column:span 1}.popup{right:16px;bottom:16px}}

/* DIGITAL: bundels kiezen, producten aanklikken */
.bundles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 18px}
.bundle{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:11px 18px;font:inherit;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer;transition:transform .2s,border-color .2s,background .2s,color .2s}
.bundle:hover{transform:translateY(-2px);border-color:var(--c-products)}
.bundle.on{background:var(--c-products);border-color:var(--c-products);color:#fff}
.bundle-desc{text-align:center;color:var(--muted);font-size:16px;font-weight:300;max-width:640px;margin:0 auto 36px;min-height:1.6em}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dtile{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);cursor:pointer;transition:transform .3s,box-shadow .3s,border-color .3s,opacity .4s}
.dtile:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(20,20,24,.1)}
.dtile.on{border-color:var(--c-products);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-products) 30%,transparent)}
.dtile.dim{opacity:.32;transform:scale(.97)}
.dtile:focus-visible{outline:3px solid var(--c-products);outline-offset:2px}
.dtile .img{aspect-ratio:4/3;background:#000;overflow:hidden;position:relative}
.dtile .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.dtile:hover .img img{transform:scale(1.05)}
.dtile .img .badge{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:5px 9px;border-radius:999px;z-index:2}
.dtile .b{padding:16px 18px 18px}
.dtile h3{font-size:18px}
.dtile p{color:var(--muted);font-size:14px;margin-top:5px;font-weight:300}
.dtile .more{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--c-products)}
.dpanel{max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.2,.8,.2,1)}
.dpanel.open{max-height:1600px}
.dpanel .inner{margin-top:22px;border:1px solid var(--line);border-radius:24px;background:var(--card);display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;opacity:0;transform:translateY(12px);transition:opacity .5s .1s,transform .5s .1s;position:relative}
.dpanel.open .inner{opacity:1;transform:none}
.dpanel .pimg{background:#000;min-height:340px;position:relative}
.dpanel .pimg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.dpanel .ptxt{padding:30px}
.dpanel .ptxt .kicker{color:var(--c-products)}
.dpanel h2{font-size:clamp(24px,3vw,34px)}
.dpanel .ptxt p{color:var(--text-soft);font-size:16px;font-weight:300;margin-top:12px}
.dpanel .ptxt .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.dpanel .ptxt .tags span{border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12.5px;color:var(--muted);background:var(--paper-2)}
.dpanel h4{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.combo{display:flex;flex-wrap:wrap;gap:8px}
.combo button{border:1px solid var(--line);background:var(--paper-2);border-radius:999px;padding:7px 13px;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .2s,transform .2s}
.combo button:hover{border-color:var(--c-products);transform:translateY(-2px)}
.think{margin-top:18px;border-left:3px solid var(--c-products);padding:10px 14px;background:color-mix(in srgb,var(--c-products) 8%,transparent);border-radius:0 12px 12px 0;font-size:14.5px;color:var(--text-soft)}
.think b{color:var(--text);display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.dpanel .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.dpanel .close{position:absolute;top:12px;right:14px;z-index:3;background:rgba(0,0,0,.5);color:#fff;border:0;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;line-height:1}
@media(max-width:900px){.dgrid{grid-template-columns:1fr 1fr}.dpanel .inner{grid-template-columns:1fr}.dpanel .pimg{min-height:220px}}
@media(max-width:560px){.dgrid{grid-template-columns:1fr}}

/* ============================================================
   FEEDBACK 16/09/2026, ronde 2
   ============================================================ */
/* elk beeld genummerd, ook bestaande foto's */
.imgnum{position:absolute;right:10px;bottom:8px;z-index:3;font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.85);background:rgba(0,0,0,.55);padding:5px 8px;border-radius:999px;pointer-events:none}
.member .photo{position:relative}
.member .photo .imgnum{left:50%;right:auto;transform:translateX(-50%)}
.pd .visual{position:relative}
/* categoriekaarten: vast beeldvlak, tekst op dezelfde hoogte */
.cat-card .visual.ph-black{aspect-ratio:4/3;border-top:0}
.cat-card .body{min-height:118px}
/* pop-ups stapelen rechtsonder, elk in de kleur van zijn thema */
.popups{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:12px;align-items:flex-end;pointer-events:none}
.popups .popup{position:static;pointer-events:auto}
.popup{--pc:var(--c-tribe)}
.popup::before{background:radial-gradient(40% 40% at 20% 20%,color-mix(in srgb,var(--pc) 55%,transparent),transparent 70%)}
.popup .days{color:var(--pc)}
.popup .btn-accent{background:var(--pc);box-shadow:0 8px 22px color-mix(in srgb,var(--pc) 35%,transparent)}
.popup .btn-accent:hover{background:color-mix(in srgb,var(--pc) 85%,#000)}
.popup h4{font-size:19px;letter-spacing:-.02em;margin-right:26px}
.popup form{display:flex;gap:8px;margin-top:12px}
.popup input{flex:1;min-width:0;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;padding:10px 14px;font:inherit;font-size:14px;outline:none}
.popup input::placeholder{color:#8f8f99}
.popup input:focus{border-color:var(--pc)}
.popup .ok{display:none;color:#7fe0a2;font-weight:600;font-size:14px;margin-top:10px}
@media(max-width:560px){.popups{right:16px;bottom:16px;left:16px;align-items:stretch}.popups .popup{width:auto}
  /* keuze per moment op een smal scherm: één rij die horizontaal scrolt */
  .moment-bar{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:4px 4px 10px;margin-bottom:34px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .moment-bar::-webkit-scrollbar{display:none}
  .moment-bar a{flex:none}}
/* meer variatie in de boxkaarten */
.tb-card.wide.flip{flex-direction:row-reverse}
.tb-card.tall>.ph-black,.tb-card.tall>.ph-visual{aspect-ratio:3/4}
.tb-card.tall .variants{grid-template-columns:repeat(2,1fr)}
.tb-card.tall .variant{aspect-ratio:16/10}
.tb-card .quote{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin:4px 0 8px}
.tb-card.dark{background:var(--ink);color:#fff;border-color:rgba(255,255,255,.08)}
.tb-card.dark .desc,.tb-card.dark .varlead{color:#c9c9d2}
.tb-card.dark .quote{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:4px 0 10px}
.tb-card.dark .price{color:#fff}
.tb-card.dark .btn-dark{background:#fff;color:var(--ink)}
.tb-card.dark .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#c9c9d2}
.tb-card.dark>.ph-black{border-bottom:1px solid rgba(255,255,255,.08)}
@media(max-width:900px){.tb-card.wide.flip{flex-direction:column}}
/* DIGITAL: inspiratiemuur */
.inspire{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:16px;grid-auto-flow:dense}
.icard{position:relative;grid-row:span 2;border-radius:22px;overflow:hidden;background:#000;color:#fff;cursor:pointer;display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.icard.w2{grid-column:span 2}
.icard.h3{grid-row:span 3}
.icard:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,0,0,.28)}
.icard:focus-visible{outline:3px solid var(--c-products);outline-offset:3px}
.icard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.icard:hover img{transform:scale(1.06)}
.icard .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.8));z-index:1}
.icard .txt{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.icard .k{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.14);margin-bottom:10px}
.icard.idee .k{background:var(--c-products)}
.icard h3{font-size:22px;letter-spacing:-.02em;line-height:1.1}
.icard.w2 h3,.icard.h3 h3{font-size:26px}
.icard p{color:rgba(255,255,255,.78);font-size:14px;font-weight:300;margin-top:6px}
.icard .imgnum{top:12px;right:12px;bottom:auto}
@media(max-width:900px){.inspire{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.icard.h3{grid-row:span 2}}
@media(max-width:560px){.inspire{grid-template-columns:1fr;grid-auto-rows:140px}.icard.w2{grid-column:span 1}}
/* DIGITAL: detailvenster */
.dmodal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px}
.dmodal.open{display:flex}
.dmodal .bg{position:absolute;inset:0;background:rgba(10,10,13,.7);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.dmodal.open .bg{opacity:1}
.dmodal .box{position:relative;width:min(980px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--card);color:var(--text);border-radius:26px;display:grid;grid-template-columns:1.05fr 1fr;transform:translateY(24px);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s;box-shadow:0 40px 90px rgba(0,0,0,.4)}
.dmodal.open .box{transform:none;opacity:1}
.dmodal .media{position:relative;background:#000;min-height:360px}
.dmodal .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dmodal .txt{padding:32px}
.dmodal .txt .kicker{color:var(--c-products)}
.dmodal h2{font-size:clamp(24px,3vw,34px)}
.dmodal .txt>p{color:var(--text-soft);font-size:16px;font-weight:300;margin-top:12px}
.dmodal h4{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.needs{display:flex;flex-wrap:wrap;gap:8px}
.needs a{border:1px solid var(--line);background:var(--paper-2);border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:600;color:var(--text);transition:border-color .2s,transform .2s}
.needs a:hover{border-color:var(--c-products);transform:translateY(-2px)}
.tips{list-style:none;display:flex;flex-direction:column;gap:8px}
.tips li{border-left:3px solid var(--c-products);padding:9px 14px;background:color-mix(in srgb,var(--c-products) 8%,transparent);border-radius:0 12px 12px 0;font-size:14.5px;color:var(--text-soft)}
.dmodal .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.dmodal .close{position:absolute;top:12px;right:14px;z-index:3;background:rgba(0,0,0,.55);color:#fff;border:0;width:36px;height:36px;border-radius:50%;font-size:22px;cursor:pointer;line-height:1}
body.modal-open{overflow:hidden}
@media(max-width:900px){.dmodal .box{grid-template-columns:1fr}.dmodal .media{min-height:220px}}

/* ============================================================
   FEEDBACK 17/09/2026: rustiger en warmer
   ============================================================ */
/* bewegende bolletjes op de homepage weg; het licht achter de pop-up weg */
.hero .sparkles{display:none}
.popup::before{display:none}
/* warme koffie-knop */
.btn-coffee{background:var(--c-tribe);color:#fff;box-shadow:0 8px 22px rgba(255,91,34,.28);gap:9px}
.btn-coffee:hover{background:var(--accent-d)}
.btn-coffee svg{width:17px;height:17px;flex:none}
/* warme achtergrond en welkom op Tribe Boxen */
.warm{background:#fbf6f0}
:root[data-theme="dark"] .warm{background:#1a1613}
.welcome{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:60px 0 10px}
.welcome h2{font-size:clamp(28px,3.6vw,42px)}
.welcome p{color:var(--text-soft);font-size:17.5px;font-weight:300;margin-top:12px}
.welcome .side{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px 28px}
.welcome .side b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-tribe);margin-bottom:8px}
.welcome .side p{font-size:15px;margin:0 0 16px}
@media(max-width:900px){.welcome{grid-template-columns:1fr;gap:20px;padding-top:40px}}
/* koffie-pop-up */
.popup.coffee{--pc:var(--c-tribe)}
.popup .cup{width:38px;height:38px;border-radius:12px;background:rgba(255,91,34,.16);color:var(--c-tribe);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.popup .cup svg{width:20px;height:20px}
/* DIGITAL: rustig overzicht */
.dcalm{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.dcard{display:grid;grid-template-columns:44% 1fr;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card);transition:transform .3s,box-shadow .3s,border-color .3s;color:var(--text)}
.dcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(20,20,24,.09);border-color:#dcdcda}
.dcard .img{position:relative;background:#000;min-height:210px}
.dcard .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dcard .b{padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
.dcard .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--c-products);margin-bottom:8px}
.dcard h3{font-size:22px;letter-spacing:-.02em}
.dcard p{color:var(--muted);font-size:14.5px;font-weight:300;margin:8px 0 14px}
.dcard .link-arrow{color:var(--c-products)}
@media(max-width:900px){.dcalm{grid-template-columns:1fr}}
@media(max-width:560px){.dcard{grid-template-columns:1fr}.dcard .img{aspect-ratio:4/3;min-height:0}}
/* productpagina: heb je hier al aan gedacht? */
.also-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.also{display:block;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);color:var(--text);transition:transform .3s,box-shadow .3s}
.also:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(20,20,24,.09)}
.also .img{position:relative;aspect-ratio:4/3;background:#000;overflow:hidden}
.also .img img{width:100%;height:100%;object-fit:cover}
.also .b{padding:18px 20px 20px}
.also h4{font-size:17px}
.also p{color:var(--muted);font-size:14px;font-weight:300;margin-top:6px}
.also .why{display:block;margin-top:10px;font-size:13px;color:var(--c-products);font-weight:600}
@media(max-width:900px){.also-grid{grid-template-columns:1fr}}
/* EVENTS: zachtere overgang naar "wordt nog aangekondigd" */
.ev-intro{max-width:640px;margin:0 auto 44px;text-align:center}
.ev-intro h2{font-size:clamp(28px,3.8vw,42px)}
.ev-intro p{color:var(--text-soft);font-size:17.5px;font-weight:300;margin-top:12px}
/* CONTACT: koffie en kaart */
.coffee-band{background:#fbf6f0;border:1px solid #f0e6da;border-radius:26px;padding:40px 36px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
:root[data-theme="dark"] .coffee-band{background:#1a1613;border-color:#2a241f}
.coffee-band h2{font-size:clamp(26px,3.4vw,38px)}
.coffee-band p{color:var(--text-soft);font-size:16.5px;font-weight:300;margin-top:10px}
.coffee-band .cupbig{width:72px;height:72px;border-radius:22px;background:rgba(255,91,34,.16);color:var(--c-tribe);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.coffee-band .cupbig svg{width:36px;height:36px}
.coffee-band .acts{display:flex;flex-direction:column;gap:10px}
.map{border-radius:22px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--paper-2)}
.map iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:900px){.coffee-band{grid-template-columns:1fr;padding:30px 24px}}

/* 17/09/2026: bolletjes overal uit */
.sparkles{display:none !important}

/* ============================================================
   22/09/2026: aftelpagina's, quotes en Tribe Branding
   ============================================================ */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* AFTELPAGINA (Digital groen, Events blauw): altijd zwart, ook in het lichte thema */
.launch{--lc:#2e9e57;--lg:#d3ff33;position:relative;min-height:calc(100vh - 57px);min-height:calc(100svh - 57px);background:#030304;color:#fff;overflow:hidden;display:flex;align-items:center;isolation:isolate}
.launch-bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.launch::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(3,3,4,.78),rgba(3,3,4,0) 72%)}
.launch-inner{position:relative;z-index:1;width:100%;max-width:1040px;margin:0 auto;padding:72px 24px 84px;text-align:center}
.launch-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid color-mix(in srgb,var(--lc) 60%,transparent);background:color-mix(in srgb,var(--lc) 16%,transparent);color:#fff;border-radius:999px;padding:9px 16px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.launch-pill i{width:9px;height:9px;border-radius:50%;background:var(--lg);box-shadow:0 0 12px var(--lg);animation:launchPulse 1.8s ease-out infinite}
@keyframes launchPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lg) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.launch h1{font-size:clamp(40px,7.4vw,98px);font-weight:800;letter-spacing:-.045em;line-height:.98;margin:26px auto 0;max-width:15ch;text-wrap:balance}
.launch h1 em{font-style:normal;color:var(--lg);text-shadow:0 0 30px color-mix(in srgb,var(--lg) 50%,transparent)}
.launch .lede{max-width:580px;margin:22px auto 0;color:#c9c9d2;font-size:clamp(16px,1.6vw,19px);font-weight:300;text-wrap:balance}
.cd{--gap:clamp(14px,3vw,40px);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);max-width:900px;margin:46px auto 0;padding:clamp(18px,3vw,34px) clamp(16px,3vw,40px) clamp(14px,2.4vw,24px);background:rgba(0,0,0,.66);border:1px solid color-mix(in srgb,var(--lc) 45%,transparent);border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 30px 80px rgba(0,0,0,.55),0 0 70px color-mix(in srgb,var(--lc) 18%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cd-g{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.cd-g canvas{width:100%;aspect-ratio:11/7;display:block}
.cd-g span{font-size:clamp(10.5px,1.1vw,12.5px);letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.6)}
.cd-g:nth-child(-n+3)::after{content:"";position:absolute;right:calc(var(--gap) / -2 - 3px);top:calc(50% - 22px);width:6px;height:6px;border-radius:50%;background:var(--lg);box-shadow:0 16px 0 var(--lg),0 0 10px var(--lg);transition:opacity .35s}
.launch.tick .cd-g::after{opacity:.25}
.cd-date{margin-top:18px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--lg)}
.launch-done{display:none;margin-top:18px;font-size:20px;font-weight:600}
.launch.done .launch-done{display:block}
.launch-form{max-width:500px;margin:34px auto 0}
.launch-form .row{display:flex;gap:10px}
.launch-form input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:14px 20px;font:inherit;font-size:15px}
.launch-form input::placeholder{color:rgba(255,255,255,.5)}
.launch-form input:focus-visible{outline:2px solid var(--lg);outline-offset:2px}
.launch-form .btn{background:var(--lc);color:#fff;white-space:nowrap}
.launch-form .btn:hover{background:color-mix(in srgb,var(--lc) 82%,#000)}
.launch-form .ok{display:none;color:var(--lg);font-weight:600;font-size:15px;padding:12px}
.launch-form.sent .row{display:none}
.launch-links{display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:15px}
.launch-links a{color:#d9d9e0;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px;transition:color .2s,border-color .2s}
.launch-links a:hover{color:#fff;border-color:var(--lg)}
@media(max-width:560px){
  .cd{grid-template-columns:1fr 1fr;row-gap:22px}
  .cd-g::after{display:none}
  .launch-form .row{flex-direction:column}
  .launch-inner{padding:52px 16px 64px}
}
@media(prefers-reduced-motion:reduce){.launch-pill i{animation:none}.cd-g::after{transition:none}}

/* concepten op de homepage: label "binnenkort" */
.concept .visual .soon-tag{position:absolute;left:16px;top:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.72);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 12px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.concept .visual .soon-tag i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}

/* QUOTES: warme merkzinnen doorheen de site */
.qband{--qc:var(--c-tribe);padding:clamp(64px,9vw,112px) 0;text-align:center;background:#fbf6f0}
:root[data-theme="dark"] .qband{background:#1a1613}
.qband blockquote{max-width:880px;margin:0 auto;font-size:clamp(26px,3.7vw,46px);font-weight:300;letter-spacing:-.03em;line-height:1.16;color:var(--text);text-wrap:balance}
.qband blockquote::before{content:"\201C";display:block;font-size:clamp(72px,9vw,120px);line-height:.72;font-weight:800;color:var(--qc);margin-bottom:4px}
.qband blockquote em{font-style:normal;font-weight:600;color:var(--qc)}
.qband cite{display:block;margin-top:24px;font-style:normal;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.qband.dark{background:var(--ink)}
.qband.dark blockquote{color:#fff}
.qband.dark cite{color:rgba(255,255,255,.5)}
.qline{max-width:560px;margin:30px auto 0;padding:4px 0 4px 20px;border-left:3px solid var(--qc,var(--c-people));font-size:clamp(19px,2vw,23px);font-weight:300;line-height:1.35;letter-spacing:-.015em;color:var(--text);text-align:left}

/* TRIBE BRANDING: eigen layout, over het gevoel */
.tbr{--o:#ff5b22;--cream:#fbf6f0}
:root[data-theme="dark"] .tbr{--cream:#1a1613}
.tbr-hero{background:#0b0b0d;color:#fff;position:relative;overflow:hidden;padding:clamp(48px,7vw,100px) 0 clamp(64px,9vw,120px)}
.tbr-hero::before{content:"";position:absolute;width:980px;height:980px;left:-340px;bottom:-600px;border-radius:50%;background:radial-gradient(circle,rgba(255,91,34,.36),rgba(255,91,34,0) 64%);pointer-events:none}
.tbr-hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
.tbr-back{display:inline-flex;gap:7px;color:#b9b9c2;font-size:14px;margin-bottom:26px}
.tbr-back:hover{color:#fff}
.tbr-eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--o);margin-bottom:18px}
.tbr-hero h1{font-size:clamp(40px,6.2vw,84px);font-weight:800;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.tbr-hero h1 em{font-style:normal;color:var(--o)}
.tbr-hero p{margin-top:22px;max-width:520px;color:#c9c9d2;font-size:clamp(16.5px,1.5vw,19px);font-weight:300}
.tbr-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.tbr-hero-art{position:relative;min-height:460px}
.tbr-polaroid{position:absolute;right:4%;top:0;width:min(78%,340px);margin:0;background:#fff;padding:14px 14px 50px;border-radius:4px;box-shadow:0 30px 70px rgba(0,0,0,.55);transform:rotate(4deg)}
.tbr-polaroid .ph-black{aspect-ratio:4/5;border-radius:2px}
.tbr-polaroid figcaption{position:absolute;left:0;right:0;bottom:15px;text-align:center;color:#3a3a40;font-size:14px;font-weight:500}
.tbr-note{position:absolute;left:-2%;top:50%;width:min(64%,260px);background:#fbf6f0;color:#2a2622;padding:24px 22px 20px;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.45);transform:rotate(-5deg);font-size:17px;line-height:1.42}
.tbr-note::before{content:"";position:absolute;top:-10px;left:50%;width:78px;height:22px;margin-left:-39px;background:rgba(255,91,34,.8);transform:rotate(2deg);border-radius:2px}
.tbr-note small{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a7f73;font-weight:600}
.tbr-kicker{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--o);margin-bottom:18px}
.tbr-feel{background:var(--cream);padding:clamp(70px,9vw,120px) 0}
.tbr-feel .tbr-kicker{margin-bottom:26px}
.feel-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,4vw,60px);align-items:center;padding:clamp(20px,3vw,34px) 0;border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.feel-row:last-child{border-bottom:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.feel-row h2{font-size:clamp(54px,10vw,132px);font-weight:800;letter-spacing:-.055em;line-height:.9;color:var(--text)}
.feel-row h2 i{font-style:normal;color:var(--o)}
.feel-row p{font-size:clamp(18px,2vw,24px);font-weight:300;line-height:1.4;color:var(--text-soft);max-width:32ch}
.tbr-four{padding:clamp(70px,9vw,120px) 0;background:var(--paper)}
.tbr-head{max-width:660px;margin-bottom:clamp(40px,6vw,70px)}
.tbr-head h2{font-size:clamp(30px,4vw,48px);text-wrap:balance}
.tbr-head p{color:var(--text-soft);font-size:17.5px;font-weight:300;margin-top:12px}
.tbr-item{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,72px);align-items:center;margin-bottom:clamp(56px,8vw,100px)}
.tbr-item:last-child{margin-bottom:0}
.tbr-item.flip .tbr-media{order:2}
.tbr-media{display:block;position:relative;aspect-ratio:5/4;border-radius:28px;overflow:hidden;background:#000;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.tbr-media:hover{transform:scale(1.015)}
.tbr-media img{width:100%;height:100%;object-fit:cover}
.tbr-item h3{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--o);font-weight:700}
.tbr-item blockquote{font-size:clamp(28px,3.4vw,44px);font-weight:300;letter-spacing:-.03em;line-height:1.1;margin:12px 0 18px;color:var(--text);text-wrap:balance}
.tbr-item blockquote::before{content:"\201C";color:var(--o);font-weight:700}
.tbr-item blockquote::after{content:"\201D";color:var(--o);font-weight:700}
.tbr-item p{color:var(--text-soft);font-size:16.5px;font-weight:300}
.tbr-item p.soft{margin-top:10px;color:var(--muted)}
.tbr-item .chips{margin:18px 0 20px}
.tbr-item .link-arrow{color:var(--o)}
.tbr-steps{background:var(--cream);padding:clamp(70px,9vw,120px) 0}
.tbr-steps ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s;position:relative}
.tbr-steps ol::before{content:"";position:absolute;left:0;right:0;top:23px;height:2px;background:linear-gradient(90deg,var(--o),rgba(255,91,34,.12))}
.tbr-steps li{position:relative;counter-increment:s}
.tbr-steps li::before{content:counter(s);position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--o);color:#fff;font-weight:700;font-size:18px;margin-bottom:18px;box-shadow:0 0 0 6px var(--cream)}
.tbr-steps h3{font-size:22px}
.tbr-steps li p{color:var(--text-soft);font-weight:300;font-size:15.5px;margin-top:6px}
@media(max-width:900px){
  .tbr-hero-in{grid-template-columns:1fr}
  .tbr-hero-art{min-height:420px;max-width:420px;width:100%;margin:10px auto 0}
  .tbr-item{grid-template-columns:1fr}
  .tbr-item.flip .tbr-media{order:0}
  .tbr-steps ol{grid-template-columns:1fr 1fr;row-gap:36px}
  .tbr-steps ol::before{display:none}
}
@media(max-width:760px){.feel-row{grid-template-columns:1fr;gap:8px}}
@media(max-width:520px){.tbr-steps ol{grid-template-columns:1fr}.tbr-hero-art{min-height:380px}}
.qband.plain{background:var(--paper)}
.team-sec + .qband,.qband + .cta-band{margin-top:0}
.tbr-polaroid .ph-black .lbl{top:12px;bottom:auto}
.prose p.qline,p.qline{max-width:560px;margin:30px auto 0;font-size:clamp(19px,2vw,23px);font-weight:300;line-height:1.35;color:var(--text)}
.welcome{padding-bottom:64px}
/* geen zijwaarts wiebelen op gsm door invliegende kaarten */
html,body{overflow-x:clip}

/* 22/09/2026 feedback: aftelpagina's soberder, gewone teller bij Events, rustpunten tussen de werelden */
.launch h1{max-width:16ch}
.launch .cd{margin-top:40px}
.cd.plain{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.cd.plain .cd-num{display:block;font-size:clamp(46px,8.4vw,112px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 34px color-mix(in srgb,var(--lg) 30%,transparent)}
.cd.plain .cd-num.bump{animation:cdBump .45s cubic-bezier(.2,.8,.2,1)}
@keyframes cdBump{0%{opacity:.3;transform:translateY(10px)}100%{opacity:1;transform:none}}
.cd.plain .cd-g:nth-child(-n+3)::after{box-shadow:0 16px 0 var(--lg)}
@media(prefers-reduced-motion:reduce){.cd.plain .cd-num.bump{animation:none}}

.tb-interlude{max-width:780px;margin:clamp(64px,8vw,104px) auto;text-align:center}
.tb-interlude blockquote{font-size:clamp(26px,3.4vw,40px);font-weight:300;letter-spacing:-.03em;line-height:1.16;color:var(--text);text-wrap:balance}
.tb-interlude blockquote::before{content:"\201C";display:block;font-size:clamp(60px,7vw,90px);line-height:.72;font-weight:800;color:var(--c-tribe);margin-bottom:4px}
.tb-interlude blockquote em{font-style:normal;font-weight:600;color:var(--c-tribe)}
.tb-interlude.nudge{display:flex;align-items:center;gap:22px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px 28px}
.tb-interlude.nudge .cup{flex:none;width:56px;height:56px;border-radius:18px;background:rgba(255,91,34,.14);color:var(--c-tribe);display:flex;align-items:center;justify-content:center}
.tb-interlude.nudge .cup svg{width:28px;height:28px}
.tb-interlude.nudge .t{flex:1}
.tb-interlude.nudge b{display:block;font-size:19px;letter-spacing:-.01em}
.tb-interlude.nudge p{color:var(--text-soft);font-size:15.5px;font-weight:300;margin-top:4px}
.tb-interlude.nudge .btn{flex:none}
.tb-interlude + .wereld-head{border-top:0;padding-top:0;margin-top:0}
@media(max-width:640px){.tb-interlude.nudge{flex-direction:column;text-align:center;padding:26px 22px}}

/* ============ 24/09/2026: feedback ============ */
/* momenten in twee groepen: Feestdagen en Door het jaar */
.moment-groups{max-width:960px;margin:-8px auto 46px;display:flex;flex-direction:column;gap:16px}
.moment-group{display:flex;flex-direction:column;align-items:center;gap:9px}
.mg-label{flex:none;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.moment-groups .moment-bar{margin:0;justify-content:center}
@media(max-width:820px){.moment-group{align-items:stretch}.mg-label{padding-left:2px}}

/* aftelpagina's: koptekst rustiger, de teller is de blikvanger */
.launch h1{font-size:clamp(23px,3.2vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1.16;max-width:24ch;color:#e7e7ec;margin-top:0}
.launch h1 em{font-weight:600;text-shadow:0 0 22px color-mix(in srgb,var(--lg) 40%,transparent)}
.launch .cd{margin-top:32px}

/* koffieknop in de navigatie: groen met een zachte gradient */
.nav .btn-coffee.cta{background:linear-gradient(100deg,#1b7f43,#2e9e57 45%,#3fb268);background-size:190% 100%;box-shadow:0 8px 22px rgba(46,158,87,.3);animation:coffeeFlow 9s ease-in-out infinite}
.nav .btn-coffee.cta:hover{filter:brightness(1.07);box-shadow:0 12px 28px rgba(46,158,87,.38)}
@keyframes coffeeFlow{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){.nav .btn-coffee.cta{animation:none}}

/* Tribe People: beeldvlakken */
.people-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.people-gallery .ph-black{aspect-ratio:3/4;border-radius:18px}
@media(max-width:900px){.people-gallery{grid-template-columns:1fr 1fr}}

/* 26/09/2026: foto's in de beeldvlakken */
.ph-black.has-foto .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ph-black.has-foto .lbl{color:rgba(255,255,255,.85);background:rgba(0,0,0,.5);padding:5px 8px;border-radius:99px;font-size:10px}
.concept .visual.has-foto::before{z-index:1;opacity:.12}
.concept .visual.has-foto::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.45));pointer-events:none}
.concept .visual.has-foto .ico,.concept .visual.has-foto .soon-tag,.concept .visual.has-foto .line{z-index:3}
.variant[style*="background-image"]{background-size:cover;background-position:center}
.variant[style*="background-image"]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.65))}
.variant small,.variant b,.variant span{z-index:1}
.variant[style*="background-image"] small{color:rgba(255,255,255,.8)}

/* 26/09/2026 feedback: grotere concept-logo's, rustige momentbalk, klikbare momenten */
.concept .visual .ico{width:88px;height:88px;border-radius:24px;left:24px;bottom:24px}
.concept .visual .ico svg{width:48px;height:48px}
.concept .visual.has-foto .ph-img{object-position:center 60%}
.moment-bar{gap:8px;max-width:1000px}
.moment-bar a{padding:7px 14px;font-size:13.5px}
.moment-bar a i{display:none}
.moment-bar .mg-label{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:0 4px}
.moment-bar .mg-sep{width:1px;height:24px;background:var(--line);margin:0 10px;align-self:center}
.variant[data-img]{cursor:pointer;transition:transform .2s,box-shadow .2s}
.variant[data-img]:hover{transform:translateY(-2px)}
.variant[data-img].on{box-shadow:0 0 0 2px var(--c-tribe)}
.variant[data-img]:focus-visible{outline:2px solid var(--c-tribe);outline-offset:2px}
.ph-visual img,.big-visual img{transition:opacity .16s}
.people-gallery .ph-img{object-position:center 45%}

/* 27/09/2026: Tribe Box-cover met witte achtergrond volledig tonen */
.c-tribe .visual.has-foto .ph-img{object-position:center 40%}
.c-tribe .visual.has-foto::after{background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.25))}
.c-products .visual.has-foto .ph-img{object-position:60% 35%}

/* 27/09/2026: Tribe Branding kort en beeldend */
.tbr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tbr-card{display:block;color:var(--text)}
.tbr-pic{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#000}
.tbr-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tbr-card:hover .tbr-pic img{transform:scale(1.04)}
.tbr-card h3{font-size:21px;margin-top:14px}
.tbr-card p{color:var(--muted);font-size:15px;font-weight:300;margin-top:4px}
@media(max-width:900px){.tbr-grid{grid-template-columns:1fr 1fr}}
.tbr-polaroid .ph-img{object-position:center 40%}

/* ============ 27/09/2026: laatste review ============ */
/* rustiger kaarten, meer lucht */
.tb-grid{gap:30px}
.tb-card .body{padding:22px 22px 24px}
.tb-card .desc{margin-bottom:14px}
.wereld-head{margin-top:96px}
.tb-interlude{margin:clamp(80px,10vw,128px) auto}
.tb-interlude.small{margin:clamp(56px,7vw,88px) auto}
.tb-interlude.small blockquote{font-size:clamp(22px,2.6vw,30px)}
.tb-interlude.small blockquote::before{font-size:clamp(48px,5vw,64px)}
.tb-card .ph-visual,.tb-card .ph-black{overflow:hidden}
/* wisselen tussen categorieen */
.cat-switch{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 54px}
.cat-switch a{border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-size:14.5px;font-weight:600;color:var(--text);background:var(--card);transition:border-color .2s,background .2s,transform .2s}
.cat-switch a:hover{transform:translateY(-2px);border-color:var(--c-tribe)}
.cat-switch a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Little Things: meteen beginnen */
body[data-view="cat2"] .page-hero p,body[data-view="cat2"] .warm:not(.section){display:none}
body[data-view="cat2"] .page-hero{padding:72px 0 64px}
/* Tribe Branding */
.tbr-group{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 18px}
.tbr-grid + .tbr-group{margin-top:56px}
.tbr-more{padding:clamp(70px,9vw,120px) 0;background:var(--cream)}
.tbr-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tbr-more-card{position:relative;display:block;aspect-ratio:16/9;border-radius:26px;overflow:hidden;background:#000;color:#fff}
.tbr-more-card img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .3s}
.tbr-more-card:hover img{transform:scale(1.05);opacity:.7}
.tbr-more-card span{position:absolute;left:0;right:0;bottom:0;padding:26px 28px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));font-size:15.5px;font-weight:300}
.tbr-more-card b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em}
.tbr-more-card i{font-style:normal;display:inline-block;margin-left:6px;transition:transform .2s}
.tbr-more-card:hover i{transform:translateX(5px)}
@media(max-width:760px){.tbr-more-grid{grid-template-columns:1fr}}
.tbr-polaroid{animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(4deg)}50%{transform:rotate(2.2deg) translateY(-6px)}}
/* animatie: woorden en foto's */
.hero h1.words .w{display:inline-block;opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 70ms + 100ms)}
.hero h1.words.go .w{opacity:1;transform:none}
img.zoomable{transform:scale(1.09);transition:transform 1.3s cubic-bezier(.2,.8,.2,1),opacity .16s}
img.zoomable.zoom-in{transform:scale(1)}
.tb-card:hover img.zoomable.zoom-in,.concept:hover img.zoomable.zoom-in,.cat-card:hover img.zoomable.zoom-in{transform:scale(1.04)}
.qband blockquote em,.tb-interlude blockquote em{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size 1.1s cubic-bezier(.2,.8,.2,1) .3s}
.reveal.in blockquote em,.qband .reveal.in em,.tb-interlude.in blockquote em{background-size:100% 2px}
@media(prefers-reduced-motion:reduce){.tbr-polaroid{animation:none}img.zoomable{transform:none;transition:none}}
/* koffieknop: duidelijke groene gradient met glans */
.nav .btn-coffee.cta{position:relative;overflow:hidden;background:linear-gradient(110deg,#146c3a 0%,#2e9e57 38%,#5cc97a 62%,#2e9e57 82%,#146c3a 100%);background-size:260% 100%;animation:coffeeFlow 7s ease-in-out infinite;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.nav .btn-coffee.cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:coffeeShine 5.5s ease-in-out infinite}
@keyframes coffeeShine{0%,70%{left:-60%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.nav .btn-coffee.cta,.nav .btn-coffee.cta::after{animation:none}}

.tb-grid.cols-2{grid-template-columns:1fr 1fr;max-width:900px;margin-left:auto;margin-right:auto}
@media(max-width:600px){.tb-grid.cols-2{grid-template-columns:1fr}}
.big-visual,.concept .visual,.cat-card .visual{overflow:hidden}
.tb-detail .big-visual img{border-radius:0 !important}
.tb-detail .big-visual{border-radius:22px}

/* 27/09/2026: Tribe Branding in categorieen */
.tbr-cats{padding:clamp(70px,9vw,110px) 0 10px;background:var(--paper)}
.tbr-catnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.tbr-catnav a{border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-weight:600;font-size:14.5px;color:var(--text);transition:all .2s}
.tbr-catnav a:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.tbr-cat{padding:clamp(70px,9vw,120px) 0;background:var(--paper);scroll-margin-top:70px}
.tbr-cat.alt{background:var(--cream)}
.tbr-cat-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,72px);align-items:start}
.tbr-cat-in.flip .tbr-cat-txt{order:2}
.tbr-cat-txt{position:sticky;top:110px}
.tbr-cat-txt h2{font-size:clamp(40px,5.4vw,72px);font-weight:800;letter-spacing:-.045em;line-height:.95}
.tbr-cat-txt p{color:var(--text-soft);font-size:17.5px;font-weight:300;margin-top:14px;max-width:38ch}
.tbr-side-q{margin-top:30px;padding-left:18px;border-left:3px solid var(--c-tribe);font-size:clamp(20px,2vw,25px);font-weight:300;line-height:1.3;letter-spacing:-.015em;color:var(--text);max-width:24ch}
.tbr-side-q em{font-style:normal;font-weight:600;color:var(--c-tribe)}
.tbr-cat-txt .link-arrow{margin-top:24px;color:var(--c-tribe)}
.tbr-grid.two{grid-template-columns:1fr 1fr}
.tbr-box{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.tbr-box-pic{position:relative;aspect-ratio:5/4;border-radius:28px;overflow:hidden;background:#000}
.tbr-box-pic img{width:100%;height:100%;object-fit:cover}
.tbr-box .tbr-cat-txt{position:static}
@media(max-width:900px){.tbr-cat-in,.tbr-box{grid-template-columns:1fr}.tbr-cat-in.flip .tbr-cat-txt{order:0}.tbr-cat-txt{position:static}}
.welcome:not(:has(.side)){grid-template-columns:1fr;max-width:780px}

/* 30/09/2026: waarom Tribe */
.tribe-woord{background:var(--paper)}
.tw-in{max-width:720px;margin:0 auto;text-align:center}
.tw-in h2{font-size:clamp(30px,4vw,48px);text-wrap:balance}
.tw-in h2 em{font-style:normal;color:var(--c-tribe)}
.tw-in p{color:var(--text-soft);font-size:17.5px;font-weight:300;margin-top:16px}