/* =====================================================================
   Koffiefiets · kleurenschema: olijfgroen, rood en wit
   Tekst volgt logisch: donkergroen op licht, wit op olijf/rood/donker.
   ===================================================================== */
:root{
  /* wit */
  --white:#ffffff;
  /* olijfgroen */
  --olive-50:#f4f5e9;    /* lichte vlakken */
  --olive-100:#e4e7cc;   /* randen, zachte tekst op donker */
  --olive-300:#c3c78f;   /* homepage-vlak */
  --olive:#6b7a3a;       /* hoofdkleur banners */
  --olive-700:#55622b;
  --green-900:#2c3612;   /* titels, donkere tekst, footer */
  --ink:#353c26;         /* lopende tekst */
  --muted:#5d644d;       /* rustige tekst */
  --line:#e2e5cc;
  /* rood */
  --red-50:#fbeae5;
  --red:#c8553d;         /* knoppen en accenten */
  --red-700:#a8412c;
  --red-900:#8f2a1c;

  --radius:18px;
  --shadow:0 10px 30px rgba(44,54,18,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--white);color:var(--ink);line-height:1.6;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;line-height:1.15;font-weight:700;color:var(--green-900)}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
section{padding:96px 0}

/* Knoppen */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.5rem;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;transition:.2s;cursor:pointer;font-size:1rem;font-family:inherit}
.btn-primary{background:var(--red);color:var(--white)}
.btn-primary:hover{background:var(--red-700)}
.btn-ghost{border-color:var(--green-900);color:var(--green-900)}
.btn-ghost:hover{background:rgba(44,54,18,.08)}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:44px;width:auto}
.nav ul{display:flex;gap:1.8rem;list-style:none;align-items:center}
.nav ul a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--green-900)}
.nav ul a:not(.btn):hover,.nav ul a.active{color:var(--red)}
.nav ul a.btn{color:var(--white);padding:.6rem 1.1rem;font-size:.9rem}
.menu-toggle{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--green-900)}

/* Homepage-hero: links olijfvlak met tekst, rechts foto */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;padding:72px 0 80px;overflow:hidden;background:var(--olive-300);color:var(--green-900)}
.hero-media{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-blue{background:var(--olive-300)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-right:calc(50% + 24px)}
.hero h1{font-size:clamp(2.4rem,4.4vw,3.8rem);margin:.6rem 0 1rem;color:var(--green-900)}
.hero p{font-size:1.15rem;margin-bottom:2rem}
.hero .eyebrow{color:var(--green-900);opacity:.8}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.badges{display:grid;grid-template-columns:repeat(2,max-content);gap:1.5rem 3rem;justify-content:center;justify-items:center;text-align:center;margin-top:3rem;font-size:.95rem}
.badges strong{display:block;font-family:Fraunces,serif;font-size:1.8rem;color:var(--green-900)}

/* 2+1-banner: rood met wit */
.promo{background:var(--red);color:var(--white);padding:28px 0}
.promo .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.promo h2{font-size:1.6rem;color:var(--white)}
.promo .btn{background:var(--white);color:var(--red)}
.promo .btn:hover{background:var(--red-50)}

/* Sectiekoppen */
.head{max-width:640px;margin-bottom:3rem}
.head h2{font-size:clamp(2rem,4vw,3rem);margin:.4rem 0 .8rem}
.head p{color:var(--muted);font-size:1.08rem}

/* Fietskaarten */
.bikes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bike{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s}
.bike:hover{transform:translateY(-4px)}
.bike-img{aspect-ratio:4/3;background:var(--olive-50);overflow:hidden;display:block}
.bike-img img{width:100%;height:100%;object-fit:cover}
.bike-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.bike h3{font-size:1.5rem;margin-bottom:.4rem}
.bike p{color:var(--muted);flex:1;margin-bottom:1.2rem}
.bike a.more{font-weight:600;text-decoration:none;color:var(--green-900)}
.bike a.more:hover{color:var(--red)}

/* Lichte olijfvlakken */
.detail{background:var(--olive-50)}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover;width:100%}
.checks{list-style:none;margin:1.4rem 0 2rem}
.checks li{padding:.45rem 0 .45rem 2rem;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.8rem;width:18px;height:18px;border-radius:50%;background:var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat}
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.size{background:var(--white);border-radius:14px;padding:18px 20px;border:1px solid var(--line)}
.size h4{font-size:1.15rem;margin-bottom:.2rem}
.size small{color:var(--muted);display:block;line-height:1.5}

/* Over ons-blok */
.story .split{grid-template-columns:1fr 1.05fr}
.story p{color:var(--muted);margin-bottom:1rem}
.story h2{font-size:clamp(2rem,4vw,2.8rem);margin:.4rem 0 1.2rem}
.signature{font-family:Fraunces,serif;font-size:1.3rem;color:var(--green-900);margin-top:1.4rem}
.story.detail{background:var(--olive-50)}

/* Espressobonen-blok: wit met donkergroene tekst */
.beans{background:var(--white);color:var(--ink)}
.beans .split img{aspect-ratio:1/1}
.beans h2{font-size:clamp(2rem,4vw,2.8rem);margin:.4rem 0 1rem}
.beans p{color:var(--muted);margin-bottom:2rem;max-width:44ch}
.beans .eyebrow{color:var(--red)}
/* op Over ons (wit verhaal-blok erboven) krijgt de bonen-sectie een licht olijfvlak */
.story:not(.detail) + .beans{background:var(--olive-50)}

/* Veelgestelde vragen / praktische zaken */
.faq{max-width:820px}
details{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:600;font-size:1.05rem;color:var(--green-900);display:flex;justify-content:space-between;align-items:center;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;color:var(--red);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details .answer{padding:0 24px 22px;color:var(--muted)}
details .answer ul{margin:.4rem 0 0 1.2rem}
details .answer li{margin:.35rem 0}
details .answer ul ul{margin:.3rem 0 .3rem 1.1rem}
details .answer strong{color:var(--green-900)}
.note{margin-top:1.5rem;padding:16px 20px;border-radius:12px;background:var(--red-50);border-left:4px solid var(--red);font-size:.95rem;color:var(--red-900)}
.note a{color:var(--red-900);font-weight:600}
.table-wrap{overflow-x:auto}
table.dims{border-collapse:collapse;margin-top:.6rem;min-width:360px;width:100%;max-width:520px}
.dims th,.dims td{padding:.5rem .8rem;text-align:right;border-bottom:1px solid var(--line)}
.dims th:first-child,.dims td:first-child{text-align:left;font-weight:600;color:var(--green-900)}
.dims thead th{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--olive)}
.prak-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
ol.numbered{margin:0 0 0 1.3rem}
ol.numbered li{padding:.3rem 0}

/* Offerte */
.quote{background:var(--olive-50)}
.quote-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
.contact-card{background:var(--green-900);color:var(--olive-100);border-radius:var(--radius);padding:32px}
.contact-card h3{color:var(--white);font-size:1.5rem;margin-bottom:1rem}
.contact-card p{margin-bottom:.9rem}
.contact-card a{color:var(--white);font-weight:600;text-decoration:none}
.contact-card a:hover{color:var(--olive-300)}
.contact-card .label{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem;color:var(--green-900)}
input,select,textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.98rem;background:var(--white);color:var(--ink);margin-bottom:16px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--red);border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip input{display:none}
.chip span{display:inline-block;padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:.9rem;background:var(--white);color:var(--green-900);transition:.15s}
.chip input:checked+span{background:var(--olive);color:var(--white);border-color:var(--olive)}
.form-hint{font-size:.85rem;color:var(--muted);margin-top:.8rem}

/* Banners bovenaan de subpagina's: olijfgroen met witte tekst */
.page-hero{position:relative;color:var(--white);padding:140px 0 72px;background-size:cover;background-position:center;background-color:var(--olive)}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,54,18,.20) 0%,rgba(44,54,18,.82) 100%)}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(2.4rem,5.5vw,4rem);margin:.5rem 0 .8rem;max-width:16ch;color:var(--white)}
.page-hero p{max-width:54ch;font-size:1.12rem;opacity:.95}
.page-hero .eyebrow{color:var(--olive-100)}
.page-hero .crumbs,.page-hero .crumbs a{color:var(--white);opacity:.85}
.page-hero.plain,.page-hero.red{background:var(--olive);padding:120px 0 64px}
.page-hero.plain::before,.page-hero.red::before{display:none}
.crumbs{font-size:.85rem;margin-bottom:.6rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* Fietspagina's */
.quote-line{font-family:Fraunces,serif;font-style:italic;font-size:1.35rem;color:var(--olive-700);margin:1.2rem 0 0}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:var(--olive-50)}
.related{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.related a{display:block;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s}
.related a:hover{transform:translateY(-3px)}
.related img{aspect-ratio:4/3;object-fit:cover;width:100%}
.related span{display:block;padding:12px 14px;font-weight:600;font-family:Fraunces,serif;color:var(--green-900)}
.detail-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow)}
.detail-card h3{font-size:1.4rem;margin-bottom:.4rem}
.detail-card + .detail-card{margin-top:20px}
.prak-grid .detail-card + .detail-card{margin-top:0}
.detail-card .checks{margin:.8rem 0 0}

/* Actiebanner onderaan elke pagina: rood met witte tekst */
.cta-band{background:var(--red);color:var(--white);text-align:center;padding:72px 0}
.cta-band h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.8rem;color:var(--white)}
.cta-band p{max-width:56ch;margin:0 auto 1.8rem;opacity:.95}
.cta-band .btn{background:var(--white);color:var(--red)}
.cta-band .btn:hover{background:var(--red-50)}

/* Footer: donkergroen */
footer{background:var(--green-900);color:var(--olive-100);padding:56px 0 32px;font-size:.95rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
footer h4{color:var(--white);font-size:1.1rem;margin-bottom:.8rem}
footer ul{list-style:none}
footer li{margin-bottom:.4rem}
footer a{text-decoration:none}
footer a:hover{color:var(--white)}
.legal{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;opacity:.85}

/* Responsive */
@media (max-width:960px){
  .bikes{grid-template-columns:repeat(2,1fr)}
  .split,.story .split,.quote-grid{grid-template-columns:1fr;gap:36px}
  .foot{grid-template-columns:1fr 1fr}
  .related{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  section{padding:64px 0}
  .menu-toggle{display:block}
  .nav ul{display:none;position:absolute;top:72px;left:0;right:0;background:var(--white);flex-direction:column;padding:20px;gap:1rem;border-bottom:1px solid var(--line)}
  .nav ul.open{display:flex}
  .bikes,.sizes,.row,.prak-grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .related,.gallery{grid-template-columns:repeat(2,1fr)}
  .page-hero{padding:110px 0 56px}
  .hero{flex-direction:column;align-items:stretch;padding:0;min-height:0}
  .hero-media{position:relative;inset:auto;display:block;height:42vh}
  .hero-media .hero-blue{display:none}
  .hero .wrap{padding:36px 20px 48px}
}

/* =====================================================================
   Offertepagina
   ===================================================================== */
.quote-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
#offerForm{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow)}
.step{border:0;padding:0 0 32px;margin:0 0 32px;border-bottom:1px solid var(--line)}
.step:last-of-type{border-bottom:0;margin-bottom:12px}
.step legend{font-family:Fraunces,serif;font-size:1.5rem;font-weight:700;color:var(--green-900);display:flex;align-items:center;gap:.7rem;margin-bottom:.4rem}
.step .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--olive);color:var(--white);font-family:Inter,sans-serif;font-size:1rem}
.step-hint{color:var(--muted);margin:0 0 1.2rem;font-size:.97rem}
.opt{font-weight:400;color:var(--muted)}
.row.three{grid-template-columns:2fr 1fr 1.3fr}

/* fietskeuze */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pick{border:2px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white);transition:border-color .15s, box-shadow .15s}
.pick.on{border-color:var(--olive);box-shadow:0 6px 18px rgba(107,122,58,.18)}
.pick-head{position:relative;display:block;cursor:pointer;margin:0}
.pick-head input{position:absolute;opacity:0;pointer-events:none}
.pick-head img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pick-name{display:block;padding:10px 14px;font-family:Fraunces,serif;font-weight:700;font-size:1.1rem;color:var(--green-900)}
.pick-check{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);border:2px solid var(--white);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pick.on .pick-check{background:var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/15px no-repeat}
.pick-head input:focus-visible ~ .pick-name{outline:2px solid var(--red);outline-offset:2px}
.pick-opts{display:none;padding:4px 14px 14px;background:var(--olive-50);border-top:1px solid var(--line)}
.pick.on .pick-opts{display:block}
.opt-label{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--olive-700);margin:10px 0 6px}
.time-row{display:flex;gap:8px}
.time-row label{display:flex;align-items:center;gap:6px;font-weight:500;font-size:.85rem;color:var(--muted);margin:0;flex:1}
.time-row input{margin:0;padding:.45rem .5rem;font-size:.9rem}
.opt-none{font-size:.85rem;color:var(--muted);margin:10px 0 0}
.tick{display:flex;align-items:center;gap:8px;font-weight:500;font-size:.92rem;color:var(--ink);margin:4px 0;cursor:pointer}
.tick input{width:18px;height:18px;margin:0;accent-color:var(--olive)}
.tick.inline{display:inline-flex;margin-right:18px}
.pakket-note{display:none;margin-top:16px;padding:12px 16px;border-radius:12px;background:var(--red-50);color:var(--red-900);font-size:.95rem}
.pakket-note.show{display:block}

/* foutmeldingen */
.err{display:none;color:var(--red-900);font-size:.9rem;font-weight:600;margin-top:10px}
.err.show{display:block}
.err.big{margin:0 0 14px}
input.invalid{border-color:var(--red);outline:2px solid var(--red-50)}
.btn-big{padding:1rem 1.8rem;font-size:1.05rem}

/* zijbalk */
.quote-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.summary{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.summary h3{font-size:1.25rem;margin-bottom:.6rem}
.summary ul{list-style:none;margin:0 0 1rem}
.summary li{padding:.45rem 0;border-bottom:1px dashed var(--line);color:var(--green-900)}
.summary li span{display:block;font-size:.85rem;color:var(--muted)}
.summary li.empty{color:var(--muted);font-style:italic}
.sum-link{font-weight:600;color:var(--red);text-decoration:none;font-size:.92rem}

@media (max-width:1000px){
  .quote-layout{grid-template-columns:1fr}
  .quote-side{position:static}
  .picks{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  #offerForm{padding:22px}
  .picks{grid-template-columns:1fr}
  .row.three{grid-template-columns:1fr}
}
.picks{grid-template-columns:repeat(2,1fr)}
.pick-head img{aspect-ratio:16/9}
.time-row input{min-width:0;width:100%}
@media (max-width:560px){.picks{grid-template-columns:1fr}}
.picks{align-items:start}
.time-row{flex-wrap:wrap}
.time-row label{flex:1 1 130px}

/* Offerte: spam-val, foutmelding en feestelijk bedankje */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send-error{display:none;margin:0 0 16px;padding:14px 18px;border-radius:12px;background:var(--red-50);border-left:4px solid var(--red);color:var(--red-900);font-size:.95rem}
.send-error.show{display:block}
.send-error a{color:var(--red-900);font-weight:600}
button[disabled]{opacity:.7;cursor:wait}
.thanks{display:none;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:56px 40px;box-shadow:var(--shadow);text-align:center;position:relative;overflow:hidden}
.thanks.show{display:block;animation:thanksIn .6s cubic-bezier(.2,.8,.2,1.2)}
@keyframes thanksIn{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:none}}
.thanks-flag{display:flex;width:84px;height:56px;margin:0 auto 18px;border-radius:6px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.15);animation:wave 1.6s ease-in-out infinite;transform-origin:left center}
.thanks-flag span{flex:1}.thanks-flag span:nth-child(1){background:#009246}.thanks-flag span:nth-child(2){background:#fff}.thanks-flag span:nth-child(3){background:#ce2b37}
@keyframes wave{0%,100%{transform:rotate(-4deg) skewY(0)}50%{transform:rotate(4deg) skewY(-3deg)}}
.thanks-top{font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-size:.9rem}
.thanks h2{font-size:clamp(2.2rem,5vw,3.4rem);margin:.3rem 0 1rem}
.thanks p{color:var(--muted);max-width:52ch;margin:0 auto .8rem}
.thanks .thanks-lead{font-size:1.15rem;color:var(--ink)}
.thanks-lead strong{color:var(--green-900)}
.thanks-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:10000}
.thanks{scroll-margin-top:100px}

/* Homepage: Bici Caffè */
.bici{background:var(--olive-50)}
.bici .split{grid-template-columns:1.1fr 1fr}
.bici .split > img{aspect-ratio:4/3}
.bici h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:.4rem 0 1rem}
.bici p{color:var(--muted);margin-bottom:1rem;max-width:48ch}
.bici .bici-adres{color:var(--ink)}
.bici .bici-adres strong{color:var(--green-900)}
.bici .bici-logo{width:230px;height:auto;margin:.9rem 0 .2rem;box-shadow:none;border-radius:0;aspect-ratio:auto}
.bici .btn{margin-top:.6rem}
.bici-story .split{grid-template-columns:1fr 1fr}
.bici-story .split > img{aspect-ratio:1/1}
.bici-story p{max-width:56ch}
/* Over ons: na het lichte Bici-blok de bonen weer wit */
.bici + .beans{background:var(--white)}
/* Homepage-hero: meer lucht en strak uitgelijnde kerncijfers */
.hero{padding:96px 0 104px}
@media (max-width:1240px){.hero .wrap{padding-left:40px}}
.badges{
  display:grid;grid-template-columns:1fr 1fr;gap:22px 36px;
  justify-content:start;justify-items:start;text-align:left;
  max-width:460px;margin-top:44px;padding-top:26px;
  border-top:1px solid rgba(44,54,18,.25);font-size:.92rem;line-height:1.35
}
.badges > div{padding-left:14px;border-left:3px solid var(--red)}
.badges strong{font-size:1.65rem;line-height:1.1;margin-bottom:2px}
@media (max-width:760px){.hero .wrap{padding:40px 24px 52px}.badges{gap:18px 24px}}
/* Bici-blokken: foto in een kader dat altijd even hoog is als de tekst (ook in Safari) */
.bici .split{align-items:stretch;grid-template-columns:1fr 1fr}
.bici .split > div:not(.bici-photo){align-self:center;padding:8px 0}
.bici-photo{position:relative;min-height:440px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.bici-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;aspect-ratio:auto}
@media (max-width:960px){.bici-photo{min-height:0;aspect-ratio:4/3}}
.bici .split > .bici-photo{align-self:stretch}
@media (max-width:960px){
  .bici .split{grid-template-columns:1fr}
  .bici .split > .bici-photo{min-height:0;aspect-ratio:4/3;align-self:auto}
}

/* =====================================================================
   BICI-STIJL · zelfde huisstijl als bicicaffe.nl
   crème papier, rosso mattone, olijf, donker espressobruin,
   Cormorant Garamond + Inter, ronde knoppen, rustige vlakken
   ===================================================================== */
:root{
  --bg:#f4efe7; --bg-alt:#e8e0d4; --surface:#fbf8f3;
  --b-ink:#24170f; --b-ink-soft:#5c4a40; --b-muted:#7b645b;
  --b-line:rgba(36,23,15,.14);
  --accent:#9b3d27; --accent-dark:#7f2f1d; --b-green:#4f5d3a;
  --serif:"Cormorant Garamond",Georgia,serif;
  /* bestaande variabelen omzetten naar Bici-tinten */
  --ink:var(--b-ink-soft); --muted:var(--b-muted); --line:var(--b-line);
  --green-900:var(--b-ink); --olive:var(--b-green); --olive-700:var(--b-green);
  --olive-50:var(--bg-alt); --olive-100:#e8e0d4; --olive-300:var(--bg-alt);
  --red:var(--accent); --red-700:var(--accent-dark); --red-900:var(--accent-dark); --red-50:#f1e2da;
  --radius:14px; --shadow:0 10px 30px rgba(36,23,15,.08);
}
body{background:var(--bg);color:var(--b-ink);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.step legend,.pick-name,.related span,.signature,.quote-line,.badges strong{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
h1,h2,h3,h4{color:var(--b-ink);line-height:1.1}
.eyebrow{font-size:.78rem;letter-spacing:.18em;color:var(--accent)}
section{padding:88px 0}

/* knoppen */
.btn{border-width:1px;font-size:.95rem;padding:14px 22px;line-height:1}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#fbf8f3}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{border-color:var(--b-line);color:var(--b-ink);background:transparent}
.btn-ghost:hover{background:var(--bg-alt)}

/* header: crème met blur, zoals Bici */
header{background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:1px solid var(--b-line)}
.nav{height:76px}
.logo img{height:52px}
.nav ul{gap:4px}
.nav ul a:not(.btn){padding:8px 12px;border-radius:999px;color:var(--b-ink-soft);font-size:.92rem}
.nav ul a:not(.btn):hover{background:var(--bg-alt);color:var(--b-ink)}
.nav ul a.active{color:var(--b-ink);font-weight:600}
.nav ul a.btn{margin-left:8px;padding:10px 16px;font-size:.88rem;color:#fbf8f3}
.menu-toggle{color:var(--b-ink);border:1px solid var(--b-line);border-radius:999px;width:40px;height:40px;font-size:1.1rem}
@media (max-width:760px){
  .nav ul{background:var(--bg);top:76px;gap:0;padding:8px 16px 16px;align-items:stretch}
  .nav ul a:not(.btn){display:block;padding:12px;border-radius:10px}
  .nav ul a.btn{margin:8px 0 0;justify-content:center}
}

/* homepage-hero: grote foto, donker verloop onderaan, crème tekst */
.hero{background:#1b120c;color:#fbf8f3;min-height:min(90vh,780px);padding:0;align-items:flex-end}
.hero-media{display:block;gap:0}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(27,18,12,.88) 8%,rgba(27,18,12,.40) 55%,rgba(27,18,12,.12))}
.hero .wrap{padding:140px 20px 72px !important}
.hero h1{color:#fbf8f3;font-size:clamp(2.8rem,6vw,4.8rem);max-width:13ch;margin:.2rem 0 1rem}
.hero p{color:rgba(251,248,243,.88);max-width:52ch}
.hero .eyebrow{color:#f0c9a8;opacity:1}
.hero .btn-ghost{color:#fbf8f3;border-color:rgba(251,248,243,.5)}
.hero .btn-ghost:hover{background:rgba(251,248,243,.12)}
.badges{border-top:1px solid rgba(251,248,243,.25);max-width:560px;grid-template-columns:repeat(4,auto);gap:18px 34px;color:rgba(251,248,243,.8)}
.badges > div{border-left:0;padding-left:0}
.badges strong{color:#fbf8f3;font-size:2rem}
@media (max-width:760px){
  .hero{min-height:0;display:flex}
  .hero-media{position:absolute;inset:0;height:auto}
  .hero .wrap{padding:180px 20px 48px !important}
  .badges{grid-template-columns:1fr 1fr}
}

/* promo (2+1): rustige info-band als op Bici */
.promo{background:var(--bg);color:var(--b-ink);padding:40px 0 0}
.promo .wrap > *{position:relative}
.promo .wrap{background:var(--surface);border:1px solid var(--b-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px;max-width:1120px}
.promo h2{color:var(--b-ink);font-size:1.9rem;margin-bottom:.2rem}
.promo p{color:var(--b-ink-soft);margin:0}
.promo .btn{background:var(--accent);color:#fbf8f3}
.promo .btn:hover{background:var(--accent-dark)}
@media (max-width:1160px){.promo .wrap{margin:0 20px;width:auto}}

/* vlakken: afwisselend crème en zand */
.detail,.story.detail,.bici,.quote,.story:not(.detail) + .beans{background:var(--bg-alt)}
.beans,.bici + .beans{background:var(--bg)}
.head h2,.story h2,.beans h2,.bici h2{font-size:clamp(2.2rem,4vw,3rem)}
.head p,.story p,.beans p,.bici p{color:var(--b-ink-soft)}
.signature{font-style:italic;font-size:1.6rem;color:var(--accent)}

/* kaarten */
.bike,.detail-card,.size,.summary,form,#offerForm,.thanks,.related a,details{background:var(--surface);border:1px solid var(--b-line);border-radius:var(--radius);box-shadow:var(--shadow)}
.bike h3{font-size:1.75rem}
.bike a.more{color:var(--accent)}
.bike a.more:hover{color:var(--accent-dark)}
.detail-card h3{font-size:1.6rem}
.checks li::before{background-color:var(--b-green)}
.related span{font-size:1.25rem;color:var(--b-ink)}
.gallery img{border-radius:10px}
summary{color:var(--b-ink);font-family:var(--serif);font-size:1.35rem;font-weight:600}
summary::after{color:var(--accent);font-family:Inter,sans-serif}
.note{background:var(--bg-alt);border-left:3px solid var(--accent);color:var(--b-ink-soft)}
.note a{color:var(--accent)}
.quote-line{border-left:3px solid var(--accent);padding-left:20px;color:var(--b-ink);font-size:1.7rem;line-height:1.3}
.dims thead th{color:var(--b-muted)}

/* subpagina-banners: zand vlak met donkere tekst (zoals Bici) */
.page-hero.plain,.page-hero.red,.page-hero.yellow{background:var(--bg-alt) !important;color:var(--b-ink);padding:84px 0 48px;border-bottom:1px solid var(--b-line)}
.page-hero.plain h1,.page-hero.red h1{color:var(--b-ink)}
.page-hero.plain p,.page-hero.red p{color:var(--b-ink-soft);opacity:1}
.page-hero.plain .eyebrow,.page-hero.red .eyebrow{color:var(--accent)}
.page-hero.plain .crumbs,.page-hero.plain .crumbs a,.page-hero.red .crumbs,.page-hero.red .crumbs a{color:var(--b-muted);opacity:1}
/* fietspagina's: foto met donker verloop, zoals de Bici-hero */
.page-hero:not(.plain):not(.red){padding:200px 0 64px;background-color:#1b120c}
.page-hero:not(.plain):not(.red)::before{background:linear-gradient(to top,rgba(27,18,12,.88) 8%,rgba(27,18,12,.35) 60%,rgba(27,18,12,.12))}
.page-hero:not(.plain):not(.red) .eyebrow{color:#f0c9a8}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.4rem)}

/* actieband onderaan: espressobruin met crème */
.cta-band{background:var(--bg);color:var(--b-ink);padding:88px 0}
.cta-band .wrap{background:#2c1f16;color:#efe7db;border-radius:var(--radius);padding:64px 32px;max-width:1120px}
.cta-band h2{color:#fbf8f3;font-size:clamp(2.2rem,4vw,3rem)}
.cta-band p{color:rgba(239,231,219,.85)}
.cta-band .btn{background:var(--accent);color:#fbf8f3}
.cta-band .btn:hover{background:#b44a31}
@media (max-width:1160px){.cta-band .wrap{margin:0 20px;width:auto}}

/* footer: donker espressobruin */
footer{background:#24170f;color:#e8e0d4;padding:64px 0 32px}
.foot{grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer h4{font-family:Inter,sans-serif;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,224,212,.6);font-weight:600;margin-bottom:12px}
.foot > div:first-child h4{font-family:var(--serif);font-size:2rem;letter-spacing:0;text-transform:none;color:#efe7db;font-weight:700;margin-bottom:6px}
.foot > div:first-child p{opacity:.75;max-width:32ch}
footer a:hover{color:#fff;text-decoration:underline}
.legal{border-top:1px solid rgba(232,224,212,.15);color:rgba(232,224,212,.6);font-size:.82rem;opacity:1}

/* formulier */
label{color:var(--b-ink)}
input,select,textarea{background:var(--surface);border-color:var(--b-line)}
input:focus,select:focus,textarea:focus{outline-color:var(--accent)}
.chip span{background:var(--surface);color:var(--b-ink)}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);color:#fbf8f3}
.step legend{font-size:1.9rem;color:var(--b-ink)}
.step .num{background:var(--accent)}
.pick{background:var(--surface)}
.pick.on{border-color:var(--accent);box-shadow:0 6px 18px rgba(155,61,39,.16)}
.pick.on .pick-check{background-color:var(--accent)}
.pick-name{font-size:1.35rem}
.pick-opts{background:var(--bg-alt)}
.opt-label{color:var(--b-green)}
.tick input{accent-color:var(--accent)}
.contact-card{background:#2c1f16;color:#e8e0d4}
.contact-card a:hover{color:#f0c9a8}
.sum-link{color:var(--accent)}
.thanks-top{color:var(--accent)}
.thanks-lead strong{color:var(--b-ink)}
.hero::after{background:linear-gradient(to top,rgba(27,18,12,.88) 8%,rgba(27,18,12,.40) 55%,rgba(27,18,12,.15)),linear-gradient(to right,rgba(27,18,12,.45),rgba(27,18,12,0) 60%)}
@media (max-width:960px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.foot{grid-template-columns:1fr}}

/* =====================================================================
   ITALIAANS DORPJE · luifel, lichtjes in de piazza, tegeltjes,
   boogramen, gepleisterde muren en Italiaanse handschrift-accenten
   ===================================================================== */
:root{
  --bg-alt:#ecdcc3;              /* warm okergeel pleisterwerk */
  --ochre:#c8913f;
  --script:"Italianno","Snell Roundhand","Brush Script MT",cursive;
}
/* gepleisterde muur: heel zachte korrel */
body,section,.promo,.cta-band{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero,.page-hero:not(.plain):not(.red){background-image:none}

/* Italiaans woordje in handschrift boven elke kop */
.eyebrow i{display:block;font-family:var(--script);font-style:normal;font-size:2.3rem;line-height:.9;letter-spacing:0;text-transform:none;font-weight:400;color:var(--b-green);margin-bottom:.15rem}
.hero .eyebrow i,.page-hero:not(.plain):not(.red) .eyebrow i{color:#f6dcb3;font-size:2.8rem}
.page-hero.plain .eyebrow i,.page-hero.red .eyebrow i{font-size:2.8rem}

/* luifel (tendone) onder het menu, zoals boven een winkeltje op het plein */
header{position:sticky}
header::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--accent) 0 28px,#f7efe2 28px 56px);
  -webkit-mask:radial-gradient(circle at 14px 2px,#000 13.5px,transparent 14px) 0 0/28px 16px repeat-x,linear-gradient(#000,#000) 0 0/100% 2px no-repeat;
          mask:radial-gradient(circle at 14px 2px,#000 13.5px,transparent 14px) 0 0/28px 16px repeat-x,linear-gradient(#000,#000) 0 0/100% 2px no-repeat;
  filter:drop-shadow(0 3px 3px rgba(36,23,15,.18))}

/* lichtjes boven de piazza */
.luci{position:absolute;left:0;right:0;top:22px;height:70px;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='70'%3E%3Cpath d='M0 6 Q130 62 260 6' fill='none' stroke='%23231710' stroke-width='1.6'/%3E%3Cg fill='%23ffd88a'%3E%3Ccircle cx='33' cy='26' r='4.2'/%3E%3Ccircle cx='80' cy='41' r='4.2'/%3E%3Ccircle cx='130' cy='46' r='4.2'/%3E%3Ccircle cx='180' cy='41' r='4.2'/%3E%3Ccircle cx='227' cy='26' r='4.2'/%3E%3C/g%3E%3C/svg%3E") 0 0/260px 70px repeat-x;
  filter:drop-shadow(0 0 5px rgba(255,200,110,.95)) drop-shadow(0 0 12px rgba(255,190,90,.55));
  animation:luci 3.2s ease-in-out infinite alternate}
@keyframes luci{from{opacity:.82}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.luci{animation:none}}
.hero .luci{top:30px}
.cta-band .wrap{position:relative;overflow:hidden;padding-top:104px}
.cta-band .luci{top:0}

/* proost in de actieband */
.toast{display:block;font-family:var(--script);font-size:3.2rem;line-height:1;color:#f6dcb3;margin-bottom:.2rem}

/* boogramen: foto's met een ronde bovenkant zoals de ramen in een dorpje */
.story .split img,.bici-story .split > img,.beans .split img{border-radius:999px 999px var(--radius) var(--radius)/38% 38% var(--radius) var(--radius)}
.bici-photo{border-radius:999px 999px var(--radius) var(--radius)/34% 34% var(--radius) var(--radius)}
.story .split img,.beans .split img,.bici-photo,.bici-story .split > img{outline:1px solid rgba(155,61,39,.25);outline-offset:8px}

/* klein olijftakje onder de sectiekoppen */
.head h2::after{content:"";display:block;width:84px;height:22px;margin-top:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 22'%3E%3Cpath d='M2 11 H82' stroke='%234f5d3a' stroke-width='1.3'/%3E%3Cg fill='%234f5d3a'%3E%3Cellipse cx='18' cy='6.5' rx='6' ry='2.4' transform='rotate(-25 18 6.5)'/%3E%3Cellipse cx='30' cy='15.5' rx='6' ry='2.4' transform='rotate(25 30 15.5)'/%3E%3Cellipse cx='54' cy='6.5' rx='6' ry='2.4' transform='rotate(25 54 6.5)'/%3E%3Cellipse cx='66' cy='15.5' rx='6' ry='2.4' transform='rotate(-25 66 15.5)'/%3E%3C/g%3E%3Ccircle cx='42' cy='11' r='3.6' fill='%239b3d27'/%3E%3C/svg%3E") left center/contain no-repeat}

/* een rij handbeschilderde tegeltjes boven de footer */
footer{position:relative;padding-top:92px}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:44px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='44' height='44' fill='%23f4ead8'/%3E%3Crect x='.5' y='.5' width='43' height='43' fill='none' stroke='%23c9b38f' stroke-width='1'/%3E%3Cg fill='%239b3d27'%3E%3Cpath d='M22 6 C26 14 30 18 38 22 C30 26 26 30 22 38 C18 30 14 26 6 22 C14 18 18 14 22 6Z' opacity='.9'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='4.5' fill='%23c8913f'/%3E%3Cg fill='%234f5d3a'%3E%3Ccircle cx='0' cy='0' r='6'/%3E%3Ccircle cx='44' cy='0' r='6'/%3E%3Ccircle cx='0' cy='44' r='6'/%3E%3Ccircle cx='44' cy='44' r='6'/%3E%3C/g%3E%3C/svg%3E") 0 0/44px 44px repeat-x;
  border-bottom:3px solid var(--ochre)}
.legal i{font-family:var(--script);font-style:normal;font-size:1.5rem;color:#f6dcb3;vertical-align:-3px}

/* de 2+1-kaart als een uithangbord met gouden randje */
.promo .wrap{border:1px solid rgba(200,145,63,.55);outline:1px solid rgba(200,145,63,.35);outline-offset:-7px}

@media (max-width:760px){
  header::after{height:12px;-webkit-mask-size:22px 12px,100% 2px;mask-size:22px 12px,100% 2px;background:repeating-linear-gradient(90deg,var(--accent) 0 22px,#f7efe2 22px 44px)}
  .luci{transform:scale(.8);transform-origin:top left;width:125%}
  .eyebrow i{font-size:2rem}
}

/* =====================================================================
   FOTO'S · fotomuur, fotostroken en vergroot-venster
   ===================================================================== */
.festa{background:var(--bg)}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:12px;grid-auto-flow:dense}
.mosaic .m,.strip .m{display:block;overflow:hidden;border-radius:12px;box-shadow:var(--shadow);background:var(--bg-alt);position:relative}
.mosaic img,.strip img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mosaic .m:hover img,.strip .m:hover img,.gallery img:hover{transform:scale(1.04)}
.mosaic .m0{grid-column:span 2;grid-row:span 2}
.mosaic .m1,.mosaic .m3,.mosaic .m7{grid-row:span 2}
.mosaic .m4{grid-column:span 2;grid-row:span 2}
.mosaic .m9{grid-column:span 2}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.strip .m{aspect-ratio:4/5}
.gallery img{cursor:zoom-in;transition:transform .5s ease}
.gallery{overflow:visible}
.mosaic .m,.strip .m{cursor:zoom-in}
@media (max-width:760px){
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:140px;gap:8px}
  .mosaic .m0,.mosaic .m4{grid-column:span 2}
  .strip{grid-template-columns:1fr 1fr;gap:8px}
}
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(27,18,12,.92);display:flex;align-items:center;justify-content:center;padding:4vh 4vw;opacity:0;pointer-events:none;transition:opacity .25s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox button{position:absolute;background:rgba(251,248,243,.12);color:#fbf8f3;border:1px solid rgba(251,248,243,.3);width:48px;height:48px;border-radius:999px;font-size:1.4rem;cursor:pointer}
.lightbox .lb-close{top:18px;right:18px}
.lightbox .lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:18px;top:50%;transform:translateY(-50%)}

/* Offerte: submenu bij een optionele extra (bijv. Diverse snacks) */
.opt-extras .sub{display:none;margin:2px 0 6px 26px;padding-left:12px;border-left:2px solid var(--line)}
.opt-extras .sub.show{display:block}
.opt-extras .sub .tick{font-size:.88rem}

/* ===== Italiaanse cementtegels (foto IMG_2328) ===== */
/* 1. Tegelvloer rond het 'Facciamo festa!'-blok */
.cta-band{background:#3a2a1f url("images/tile-110.jpg") 0 0/110px 110px;padding:110px 0;box-shadow:inset 0 18px 30px -18px rgba(0,0,0,.45),inset 0 -18px 30px -18px rgba(0,0,0,.45)}
.cta-band .wrap{box-shadow:0 24px 60px rgba(27,18,12,.55)}
/* 2. Echte tegelrij boven de footer */
footer::before{height:64px;background:#4a3528 url("images/tile-64.jpg") 0 0/64px 64px repeat-x;border-bottom:3px solid var(--ochre)}
footer{padding-top:112px}
/* 3. Vage tegelvloer achter de kop van subpagina's */
.page-hero.plain,.page-hero.red,.page-hero.yellow{background:linear-gradient(rgba(236,220,195,.84),rgba(236,220,195,.84)),url("images/tile-200.jpg") 0 0/200px 200px !important}

/* ===== Combinatievoordeel: Duetto / Trio / Gran Festa ===== */
.staffel-sec{padding:72px 0 64px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tier{position:relative;background:var(--surface);border:1px solid rgba(200,145,63,.5);outline:1px solid rgba(200,145,63,.3);outline-offset:-7px;border-radius:var(--radius);padding:30px 28px 26px;box-shadow:var(--shadow);text-align:center}
.tier-n{display:block;font-family:var(--script);font-size:2.9rem;line-height:1;color:var(--accent)}
.tier-pct{display:block;font-family:var(--serif);font-weight:700;font-size:3.4rem;line-height:1;color:var(--b-ink);margin:.35rem 0 .2rem}
.tier-what{display:block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--b-green);margin-bottom:.8rem}
.tier p{color:var(--b-ink-soft);font-size:.95rem;margin:0}
.tier.top{background:#2c1f16;border-color:rgba(200,145,63,.7)}
.tier.top .tier-n{color:#f6dcb3}.tier.top .tier-pct{color:#fbf8f3}.tier.top .tier-what{color:#d9b36b}.tier.top p{color:rgba(239,231,219,.85)}
.tier-note{margin:20px 0 0;text-align:center;font-size:.9rem;color:var(--b-muted)}
.tier-note a{color:var(--accent);font-weight:600;text-decoration:none;margin-left:4px}
@media (max-width:760px){.tiers{grid-template-columns:1fr}.tier{padding:24px}}
/* offerte: live melding */
.tier-live{display:none;margin-top:16px;padding:14px 18px;border-radius:12px;background:var(--bg-alt);border-left:3px solid var(--ochre);color:var(--b-ink-soft);font-size:.95rem}
.tier-live.show{display:block}
.tier-live.won{background:#f6ead3;border-left-color:var(--accent);color:var(--b-ink)}
.tier-live strong{color:var(--accent)}
.tier-live span{display:block;margin-top:2px}
.sum-tier{display:none;margin:-4px 0 14px;padding:10px 12px;border-radius:10px;background:#f6ead3;color:var(--accent);font-weight:600;font-size:.9rem}

/* fotomuur: korte filmpjes */
.mosaic .mv{position:relative;overflow:hidden;border-radius:12px;box-shadow:var(--shadow);background:#1b120c}
.mosaic .mv video{width:100%;height:100%;object-fit:cover;display:block}
.mosaic .m10,.mosaic .m13{grid-row:span 2}
.mosaic .m11,.mosaic .m12{grid-row:span 2}
@media (prefers-reduced-motion:reduce){.mosaic .mv video{display:none}.mosaic .mv{background:#1b120c url("images/nv-frites.jpg") center/cover}}

/* Over ons: Toscane 2018 */
.tosc{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;margin:0;background:var(--surface);border:1px solid rgba(200,145,63,.5);outline:1px solid rgba(200,145,63,.3);outline-offset:-8px;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.tosc-img{display:block;border-radius:10px;overflow:hidden;cursor:zoom-in}
.tosc-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.tosc figcaption{padding:10px 22px 10px 0}
.tosc figcaption p{color:var(--b-ink-soft);font-size:1.05rem;margin:0}
@media (max-width:760px){.tosc{grid-template-columns:1fr;gap:16px}.tosc figcaption{padding:0 8px 8px}}

.tosc{grid-template-columns:1.7fr 1fr}
.tosc-pair{display:grid;grid-template-columns:1.35fr 1fr;gap:10px}
.tosc-pair .tosc-img img{aspect-ratio:auto;height:100%;min-height:300px}
@media (max-width:760px){.tosc-pair{grid-template-columns:1fr 1fr}.tosc-pair .tosc-img img{min-height:180px}}

.strip.strip-3{grid-template-columns:repeat(3,1fr)}
.strip.strip-3 .m{aspect-ratio:4/3}
@media (max-width:760px){.strip.strip-3{grid-template-columns:1fr 1fr 1fr;gap:6px}}
@media (max-width:760px){.tosc{grid-template-columns:1fr;gap:18px}.tosc figcaption{padding:4px 8px 8px}}
/* Wisselende hero-foto's op de homepage */
.hero-media img{opacity:0;transition:opacity 1.6s ease}
.hero-media img.on{opacity:1}
.hero-media img{object-position:var(--pos,center)}
@media (max-width:760px){.hero-media img{object-position:center}}