:root{
  --orange:#ff6b35;
  --orange-dark:#e2551f;
  --ink:#0f0f0f;
  --ink-2:#1c1c1c;
  --grey:#5c5c5c;
  --line:#e6e6e6;
  --bg-soft:#f7f6f4;
  --eco:#4caf50;
  --std:#f0b429;
  --sport:#e63946;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:'Open Sans',system-ui,sans-serif;color:#242424;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif;line-height:1.15;color:var(--ink)}
a{color:inherit}
.container{max-width:1140px;margin:0 auto;padding:0 22px}
section{padding:88px 0}
.section-label{text-align:center;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:12px}
.section-title{font-size:clamp(30px,4.4vw,46px);font-weight:800;text-align:center;margin-bottom:16px}
.section-intro{max-width:660px;margin:0 auto 52px;text-align:center;color:var(--grey);font-size:17px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;background:var(--orange);color:#fff;padding:15px 34px;border-radius:6px;text-decoration:none;font-weight:700;font-family:'Montserrat',sans-serif;font-size:16px;border:none;cursor:pointer;transition:.2s;box-shadow:0 4px 14px rgba(255,107,53,.3)}
.btn:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,107,53,.4)}
.btn-lg{padding:18px 46px;font-size:18px}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,.85);color:#fff;box-shadow:none}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-sm{padding:11px 24px;font-size:15px}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:200;background:rgba(15,15,15,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-wrap{max-width:1140px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:'Montserrat',sans-serif;font-weight:800;font-size:19px;color:#fff;text-decoration:none;letter-spacing:-.3px;white-space:nowrap}
.logo span{color:var(--orange)}
.logo small{display:block;font-size:10px;font-weight:600;letter-spacing:2.2px;color:#9a9a9a;text-transform:uppercase}
nav{display:flex;align-items:center;gap:26px}
nav a{color:#e8e8e8;text-decoration:none;font-weight:600;font-size:14.5px;transition:color .2s}
nav a:hover{color:var(--orange)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:90px 22px;background:#000}
.hero::before{content:"";position:absolute;inset:0;background:url('/img/couple-vineyard.jpg') center/cover no-repeat;opacity:.62}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.85) 100%)}
.hero-inner{position:relative;z-index:2;max-width:900px}
.hero-badge{display:inline-block;background:rgba(255,107,53,.16);border:1px solid rgba(255,107,53,.55);color:#ffb995;padding:7px 18px;border-radius:100px;font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:24px}
.hero h1{font-size:clamp(38px,7vw,72px);font-weight:900;color:#fff;letter-spacing:-1.5px;text-shadow:0 3px 22px rgba(0,0,0,.6)}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p.lead{font-size:clamp(17px,2.3vw,22px);margin:22px auto 34px;max-width:640px;color:#f0f0f0;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-trust{margin-top:38px;display:flex;gap:10px 30px;justify-content:center;flex-wrap:wrap;font-size:14px;font-weight:600;color:#dcdcdc}
.hero-trust span::before{content:"✓";color:var(--orange);font-weight:800;margin-right:7px}

/* ---------- FACT BAR ---------- */
.factbar{background:var(--ink);color:#fff;padding:0}
.factbar-grid{display:grid;grid-template-columns:repeat(5,1fr);text-align:center}
.fact{padding:30px 14px;border-right:1px solid rgba(255,255,255,.09)}
.fact:last-child{border-right:0}
.fact b{display:block;font-family:'Montserrat',sans-serif;font-size:23px;font-weight:800;color:var(--orange);margin-bottom:3px}
.fact span{font-size:13px;color:#b8b8b8;letter-spacing:.4px}

/* ---------- SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split img{border-radius:12px;box-shadow:0 22px 50px rgba(0,0,0,.18);width:100%;height:470px;object-fit:cover}
.split h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;margin-bottom:18px}
.split p{color:var(--grey);margin-bottom:16px;font-size:16.5px}

/* ---------- BIKE SPECS ---------- */
.bike{background:var(--bg-soft)}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:26px}
.spec{background:#fff;padding:16px 18px}
.spec b{display:block;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--grey);font-weight:700;margin-bottom:3px}
.spec span{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;color:var(--ink)}
.onebike{margin-top:26px;background:var(--ink);color:#fff;padding:22px 26px;border-radius:10px;border-left:5px solid var(--orange)}
.onebike b{font-family:'Montserrat',sans-serif;display:block;margin-bottom:6px;font-size:17px}
.onebike p{color:#c9c9c9;font-size:15px;margin:0}

/* ---------- MODES ---------- */
.modes{background:#fff}
.modes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.mode{border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.25s;background:#fff;display:flex;flex-direction:column}
.mode:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.1)}
.mode-top{padding:26px 26px 20px;color:#fff}
.mode.eco .mode-top{background:linear-gradient(135deg,#4caf50,#3d8b40)}
.mode.std .mode-top{background:linear-gradient(135deg,#f0b429,#d69610)}
.mode.sport .mode-top{background:linear-gradient(135deg,#e63946,#b8202c)}
.mode-top h3{color:#fff;font-size:25px;font-weight:800;margin-bottom:4px}
.mode-top p{font-size:14.5px;opacity:.95;font-weight:600}
.mode-body{padding:24px 26px 28px;flex:1}
.mode-body ul{list-style:none}
.mode-body li{padding-left:24px;position:relative;margin-bottom:10px;font-size:15px;color:#3d3d3d}
.mode-body li::before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--orange)}
.mode-note{margin-top:34px;background:var(--ink);color:#fff;border-radius:12px;padding:32px 30px;text-align:center}
.mode-note b{font-family:'Montserrat',sans-serif;font-size:19px;display:block;margin-bottom:8px}
.mode-note p{color:#c2c2c2;font-size:15.5px;max-width:640px;margin:0 auto}

/* ---------- ROUTES ---------- */
.routes{background:var(--bg-soft)}
.routes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.route{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.07);transition:.25s;display:flex;flex-direction:column}
.route:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(0,0,0,.12)}
.route-img{width:100%;height:210px;object-fit:cover}
.route-body{padding:26px 28px 30px;flex:1}
.pill{display:inline-block;padding:5px 14px;border-radius:100px;font-size:11.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#fff;margin-bottom:13px}
.pill.eco{background:var(--eco)}
.pill.std{background:var(--std);color:#4a3600}
.pill.hard{background:var(--sport)}
.pill.expert{background:#7a1420}
.route h3{font-size:22px;font-weight:800;margin-bottom:10px}
.route p{color:var(--grey);font-size:15.5px;margin-bottom:12px}
.route .meta{font-size:13.5px;color:#8a8a8a;border-top:1px solid var(--line);padding-top:12px}
.route .meta b{color:var(--ink)}

/* ---------- INCLUDED / PRICE ---------- */
.price{background:#fff}
.price-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start}
.price-card{background:var(--ink);color:#fff;border-radius:14px;padding:42px 38px;text-align:center;box-shadow:0 22px 50px rgba(0,0,0,.22)}
.price-amount{font-family:'Montserrat',sans-serif;font-size:66px;font-weight:900;color:var(--orange);line-height:1}
.price-per{font-size:15px;color:#b0b0b0;margin-bottom:6px}
.price-sub{font-size:14px;color:#8f8f8f;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)}
.price-card .btn{width:100%;margin-bottom:14px}
.price-foot{font-size:13.5px;color:#9a9a9a}
.incl-title{font-family:'Montserrat',sans-serif;font-size:21px;font-weight:800;margin-bottom:18px}
.incl{list-style:none}
.incl li{position:relative;padding-left:32px;margin-bottom:13px;font-size:16px}
.incl li::before{content:"✓";position:absolute;left:0;top:-1px;width:21px;height:21px;background:var(--eco);color:#fff;border-radius:50%;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.incl-note{margin-top:22px;padding:16px 20px;background:var(--bg-soft);border-left:4px solid var(--orange);border-radius:6px;font-size:14.5px;color:var(--grey)}

/* ---------- GOOD TO KNOW ---------- */
.know{background:var(--bg-soft)}
.know-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.know-card{background:#fff;border-radius:12px;padding:28px 26px;border-top:4px solid var(--orange);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.know-card h3{font-size:18px;font-weight:800;margin-bottom:14px}
.know-card ul{list-style:none}
.know-card li{font-size:15px;color:var(--grey);margin-bottom:9px;padding-left:18px;position:relative}
.know-card li::before{content:"•";position:absolute;left:0;color:var(--orange);font-weight:800}
.know-card li b{color:var(--ink)}

/* ---------- STEPS ---------- */
.steps{background:#fff}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 30px}
.step{display:flex;gap:18px}
.step-n{flex:0 0 46px;height:46px;background:var(--orange);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:19px}
.step h3{font-size:18px;font-weight:800;margin-bottom:6px}
.step p{font-size:15px;color:var(--grey)}

/* ---------- BANNER ---------- */
.banner{position:relative;min-height:440px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:80px 22px;background:#000}
.banner::before{content:"";position:absolute;inset:0;background:url('/img/couple-vineyard.jpg') center 42%/cover no-repeat;opacity:.58}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.75))}
.banner-inner{position:relative;z-index:2;max-width:760px}
.banner h2{color:#fff;font-size:clamp(28px,4.4vw,44px);font-weight:900;margin-bottom:16px;text-shadow:0 3px 18px rgba(0,0,0,.6)}
.banner p{font-size:18px;color:#e8e8e8;margin-bottom:30px}

/* ---------- FAQ ---------- */
.faq{background:#fff}
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden;background:#fff}
.faq-q{width:100%;text-align:left;background:#fff;border:0;padding:20px 24px;font-family:'Open Sans',sans-serif;font-size:16.5px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:background .2s}
.faq-q:hover{background:var(--bg-soft)}
.faq-q .tog{flex:0 0 auto;font-size:24px;color:var(--orange);font-weight:400;line-height:1;transition:transform .25s}
.faq-item.open .faq-q .tog{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--grey);font-size:15.5px}
.faq-item.open .faq-a{max-height:420px}
.faq-a div{padding:0 24px 22px}

/* ---------- REVIEWS ---------- */
.reviews{background:var(--bg-soft);text-align:center}
.review-empty{max-width:660px;margin:0 auto;background:#fff;border:2px dashed var(--line);border-radius:14px;padding:44px 36px}
.review-empty .stars{font-size:26px;color:#d8d8d8;letter-spacing:4px;margin-bottom:16px}
.review-empty h3{font-size:23px;font-weight:800;margin-bottom:12px}
.review-empty p{color:var(--grey);font-size:16px;margin-bottom:24px}

/* Echte klanten, echte foto's. De foto staat boven het citaat omdat een
   gezicht sneller vertrouwen wint dan een sterretje. */
/* Schuifbaar spoor. Het vegen zelf doet de browser met scroll-snap, dus
   het werkt ook als het script niet laadt: dan staan de kaarten er nog
   steeds, gewoon naast elkaar met een scrollbalk. */
.rev-slider{position:relative}
.rev-track{display:flex;gap:26px;text-align:left;overflow-x:auto;
           scroll-snap-type:x mandatory;scroll-behavior:smooth;
           -webkit-overflow-scrolling:touch;scrollbar-width:none;
           padding:4px 2px 6px}
.rev-track::-webkit-scrollbar{display:none}
.rev-track:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:16px}
.rev-track>.rev{flex:0 0 calc((100% - 52px)/3);scroll-snap-align:start}
.rev{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
     display:flex;flex-direction:column;margin:0}
.rev img{width:100%;height:230px;object-fit:cover;display:block}
.rev blockquote{padding:22px 24px 6px;margin:0;flex:1}
.rev-stars{color:#f0b429;font-size:17px;letter-spacing:2px;margin-bottom:12px}
.rev blockquote p{font-size:15.5px;line-height:1.62;color:#3a3a3a;font-style:italic}
.rev figcaption{padding:14px 24px 22px;font-weight:700;font-size:15px}
.rev-src{font-weight:400;font-size:12.5px;color:#9a9a9a;font-style:normal;margin-top:3px}

/* Het gevoelblok: tweede beeld aan de andere kant, anders kijkt de pagina
   twee keer dezelfde kant op. */
.feel .split{margin-bottom:58px}
.feel .split:last-child{margin-bottom:0}
.feel .split p{font-size:17px;line-height:1.72}
.feel .split .btn{margin-top:10px}
.rev-split .split-img{order:2}

@media (max-width:900px){
  .rev-track{max-width:520px;margin:0 auto}
  .rev-track>.rev{flex:0 0 100%}
  /* Kaart en bolletjes moeten samen in één telefoonscherm passen, ook op
     een iPhone SE. Anders staat de aanwijzing dat er meer is onder de
     vouw en veegt niemand door. De foto levert die hoogte in, niet de
     tekst — die is het hele punt. */
  .rev img{height:190px}
  .rev blockquote{padding:18px 20px 4px}
  .rev figcaption{padding:12px 20px 18px}
  .rev-split .split-img{order:-1}
  .feel .split{margin-bottom:44px}
}

/* ---------- BOOKING ---------- */
.book{background:var(--ink);color:#fff}
.book .section-title{color:#fff}
.book .section-intro{color:#b4b4b4}
.book-wrap{max-width:680px;margin:0 auto;background:#191919;border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:38px 36px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#a8a8a8;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;background:#0f0f0f;border:1px solid #333;border-radius:7px;color:#fff;font-family:'Open Sans',sans-serif;font-size:15.5px;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange)}
.field textarea{resize:vertical;min-height:88px}
.book .btn{width:100%;margin-top:8px}
.book-alt{text-align:center;margin-top:26px;color:#9d9d9d;font-size:15px}
.book-alt a{color:var(--orange);font-weight:700}
.wa-alt{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10);
        display:flex;flex-direction:column;align-items:center;gap:12px}
.wa-alt span{font-size:14.5px;color:#8e8e8e}
.wa-btn{display:inline-flex;align-items:center;gap:10px;background:#25d366;color:#fff!important;
        text-decoration:none;padding:13px 24px;border-radius:8px;
        font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;
        transition:.2s;box-shadow:0 6px 20px rgba(37,211,102,.22)}
.wa-btn:hover{background:#1eb855;transform:translateY(-2px)}
.wa-btn svg{flex:none}
/* primaire boekknop bovenaan het boekingsblok */
.wa-lead{margin-bottom:30px}
.wa-cta{display:flex;align-items:center;justify-content:center;gap:12px;
        background:#25d366;color:#fff!important;text-decoration:none;
        padding:19px 24px;border-radius:10px;
        font-family:'Montserrat',sans-serif;font-weight:800;font-size:18px;
        letter-spacing:.2px;transition:.2s;box-shadow:0 8px 26px rgba(37,211,102,.26)}
.wa-cta:hover{background:#1eb855;transform:translateY(-2px)}
.wa-cta svg{flex:none}
.wa-note{text-align:center;margin:11px 0 0;font-size:14.5px;color:#9d9d9d}
.wa-or{position:relative;text-align:center;margin-top:26px}
.wa-or:before{content:"";position:absolute;left:0;right:0;top:50%;
              height:1px;background:rgba(255,255,255,.10)}
.wa-or span{position:relative;background:#191919;padding:0 16px;
            font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:#7d7d7d}
.hp{position:absolute;left:-9999px}

/* ---------- FOOTER ---------- */
footer{background:#080808;color:#9a9a9a;padding:56px 0 30px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
.foot h4{color:#fff;font-size:15px;font-weight:800;margin-bottom:14px;letter-spacing:.4px}
.foot p{margin-bottom:9px}
.foot a{color:#9a9a9a;text-decoration:none;display:block;margin-bottom:9px;transition:color .2s}
.foot a:hover{color:var(--orange)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;text-align:center;font-size:13px;color:#6a6a6a}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .factbar-grid{grid-template-columns:repeat(2,1fr)}
  .fact{border-bottom:1px solid rgba(255,255,255,.09)}
  .fact:nth-child(2n){border-right:0}
  /* Alleen laten doorlopen als het aantal feiten oneven is; bij vier
     stond de laatste anders in zijn eentje op een volle regel. */
  .fact:last-child{border-right:0;border-bottom:0}
  .fact:last-child:nth-child(odd){grid-column:1/-1}
  .fact:nth-last-child(2):nth-child(odd){border-bottom:0}
  .split{grid-template-columns:1fr;gap:34px}
  .split.rev .split-img{order:-1}
  .split img{height:320px}
  .modes-grid,.routes-grid,.know-grid,.steps-grid{grid-template-columns:1fr}
  .price-wrap{grid-template-columns:1fr;gap:38px}
  .price-card{order:-1}
  .foot-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:768px){
  /* Hero-tekst leesbaar houden op telefoon: de foto is daar veel dichter
     op het oog en de grijze looptekst viel weg tegen de wijngaard. */
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.52) 40%,rgba(0,0,0,.9) 100%)}
  .hero p.lead{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.6)}
  .hero-trust{color:#f0f0f0;text-shadow:0 1px 10px rgba(0,0,0,.8)}
  section{padding:60px 0}
  .nav-toggle{display:flex}
  nav{position:absolute;top:100%;left:0;right:0;background:rgba(15,15,15,.99);flex-direction:column;align-items:stretch;gap:0;padding:8px 0 16px;border-bottom:1px solid rgba(255,255,255,.1);display:none}
  nav.open{display:flex}
  nav a{padding:14px 24px;border-bottom:1px solid rgba(255,255,255,.06)}
  nav .btn{margin:14px 24px 0;text-align:center}
  .hero{min-height:82vh}
  .spec-grid{grid-template-columns:1fr}
  .book-wrap{padding:28px 22px}
  .frow{grid-template-columns:1fr;gap:0}
}

/* ---------- LANGUAGE SWITCHER ---------- */
.lang{display:flex;gap:4px;align-items:center;margin-left:4px}
.lang a{display:inline-block;padding:5px 10px;border-radius:5px;font-size:13px;font-weight:700;
        letter-spacing:.5px;color:#9a9a9a;text-decoration:none;border:1px solid transparent;transition:.2s}
.lang a:hover{color:#fff;border-color:rgba(255,255,255,.25)}
.lang a.on{color:#fff;background:rgba(255,107,53,.18);border-color:rgba(255,107,53,.55)}
/* Op de telefoon staat de taalkeuze NAAST de hamburger, niet erin.
   Wie de site liever in het Catalaans of Spaans leest hoeft daar geen
   menu voor te openen — dat kost bezoekers die niet weten dat het bestaat. */
@media (max-width:768px){
  .nav-wrap{gap:6px;padding:11px 14px;flex-wrap:nowrap}
  .logo{font-size:16px;min-width:0;flex-shrink:1}
  .logo small{font-size:9px;letter-spacing:1.6px}
  .lang{gap:2px;margin:0;flex-shrink:0}
  .lang a{padding:6px 7px;font-size:11.5px;letter-spacing:.3px;border:1px solid rgba(255,255,255,.16)}
  .nav-toggle{flex-shrink:0;padding:8px 0 8px 4px}
}
@media (max-width:360px){
  .logo{font-size:14.5px}
  .lang a{padding:6px 5px;font-size:11px}
}

/* ── prijskaarten: 1 uur en 2 uur ─────────────────────────────── */
.price-cards{display:grid;gap:20px}
.price-card.alt{background:#171717;border:1px solid rgba(255,107,53,.34);position:relative;padding-top:46px}
.price-tag{position:absolute;top:16px;left:50%;transform:translateX(-50%);
           background:var(--orange);color:#fff;font-family:'Montserrat',sans-serif;
           font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
           padding:5px 14px;border-radius:20px;white-space:nowrap}
.btn-alt{background:transparent!important;border:2px solid var(--orange)!important;color:var(--orange)!important}
.btn-alt:hover{background:var(--orange)!important;color:#fff!important}

/* ══════════════════════════════════════════════════════════════
   LANDINGSPAGINA v7 — kort houden, één doel: een bericht sturen
   ══════════════════════════════════════════════════════════════ */

/* Er is geen menu meer op de landingspagina. Alleen logo, WhatsApp en taal:
   elke extra link is een uitgang, en we willen maar één uitgang. */
.hdr-wa{display:inline-flex;align-items:center;gap:8px;background:#25d366;
        box-shadow:0 4px 14px rgba(37,211,102,.28);padding:9px 16px;font-size:14px;
        margin-left:auto;white-space:nowrap}
.hdr-wa:hover{background:#1eb855}
.hdr-wa svg{flex:none}
.nav-wrap .lang{margin-left:14px}

.btn-wa{background:#25d366;box-shadow:0 8px 26px rgba(37,211,102,.28);
        display:inline-flex;align-items:center;gap:11px}
.btn-wa:hover{background:#1eb855}
.btn-wa svg{flex:none}

/* Het hele aanbod in drie kaartjes. Wie meer wil weten klikt door. */
.kort{background:#fff}
.kort-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.kort-card{background:var(--bg-soft);border-radius:12px;padding:30px 28px;
           border-top:4px solid var(--orange)}
.kort-card h3{font-size:19px;font-weight:800;margin-bottom:12px}
.kort-card p{color:var(--grey);font-size:16px;line-height:1.68}
.kort-meer{text-align:center;margin-top:34px;color:var(--grey);font-size:16px}
.kort-meer a{color:var(--orange);font-weight:700;text-decoration:none;white-space:nowrap}
.kort-meer a:hover{text-decoration:underline}

.field-wide{grid-column:span 1}
.form-klein{margin-top:14px;text-align:center;font-size:13.5px;color:#8e8e8e}
.book-alt{margin-top:20px}
.wa-foot{display:inline-block;color:#25d366!important;font-weight:700}

/* ---------- INFOPAGINA ---------- */
.info-top{background:var(--ink);color:#fff;padding:52px 0 46px}
.info-top h1{font-family:'Montserrat',sans-serif;font-size:clamp(30px,4.6vw,44px);
             font-weight:900;letter-spacing:-1px;margin:14px 0 16px;color:#fff}
.info-top .section-intro{color:#b4b4b4;max-width:640px;margin-bottom:0}
.terug{color:var(--orange);text-decoration:none;font-weight:700;font-size:15px}
.terug:hover{text-decoration:underline}
.incl-wrap{margin-top:44px;background:#fff;border-radius:12px;padding:32px 30px;
           box-shadow:0 4px 16px rgba(0,0,0,.06)}

@media (max-width:900px){
  .kort-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .hdr-wa{padding:8px 12px;font-size:13px;gap:6px}
  .nav-wrap .lang{margin-left:8px}
  .frow{grid-template-columns:1fr;gap:0}
  .info-top{padding:40px 0 36px}
}
@media (max-width:400px){
  .hdr-wa span{display:none}
  .hdr-wa{padding:8px 10px}
}

/* ---------- OVERTUIGEN + PRAKTISCH (v8) ---------- */
.pitch{background:var(--bg-soft);padding-bottom:0}
.pitch-tekst{max-width:720px;margin:0 auto;text-align:center}
.pitch-tekst p{font-size:18px;line-height:1.72;color:#3c3c3c;margin-bottom:20px}
.pitch-tekst p:last-child{font-weight:700;color:var(--ink);font-size:19px;margin-bottom:0}

.kort{background:var(--bg-soft)}

/* De zes dingen die iemand tegenhouden voordat hij appt. Geen lap tekst:
   label links, antwoord rechts, klaar. */
.prakt{background:#fff;padding-top:64px}
.prakt-lijst{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.prakt-rij{display:grid;grid-template-columns:190px 1fr;gap:22px;padding:20px 0;
           border-bottom:1px solid var(--line);align-items:start}
.prakt-rij b{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:800}
.prakt-rij span{color:var(--grey);font-size:16px;line-height:1.65}

/* ---------- HOE KOM IK ER (infopagina) ---------- */
.komen{background:#fff}
.komen-lijst{max-width:560px;margin:0 auto;display:grid;gap:1px;background:var(--line);
             border:1px solid var(--line);border-radius:10px;overflow:hidden}
.komen-rij{background:#fff;display:flex;justify-content:space-between;align-items:center;
           padding:16px 22px}
.komen-rij b{font-family:'Montserrat',sans-serif;font-size:17px}
.komen-rij span{color:var(--grey);font-size:15.5px}
.komen-noot{max-width:560px;margin:22px auto 0;text-align:center;font-size:14.5px;
            color:var(--grey)}

@media (max-width:768px){
  .pitch-tekst p{font-size:17px}
  .prakt{padding-top:52px}
  .prakt-rij{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .komen-rij{padding:14px 18px}
}

/* ---------- BEELDBAND + GEEN AUTO (v9) ---------- */
/* Twee echte foto's op de landingspagina. Iemand die overweegt te komen
   moet zien waar hij rijdt, niet alleen lezen dat het mooi is. */
.beeld{background:var(--bg-soft);padding-top:56px;padding-bottom:56px}
.beeld-titel{margin-bottom:30px}
/* Een schuifbare strook in plaats van twee vaste foto's: zo zie je waar
   je nu eigenlijk rijdt zonder dat de pagina er meters langer van wordt.
   Op de telefoon staat de volgende foto half in beeld — dat is de enige
   uitnodiging die iemand nodig heeft om te vegen. */
.foto-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
            scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
            scrollbar-width:none;padding-bottom:4px}
.foto-track::-webkit-scrollbar{display:none}
.foto-track:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:14px}
.foto{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start;margin:0;position:relative}
.foto img{width:100%;height:300px;object-fit:cover;display:block;border-radius:12px}
.foto figcaption{position:absolute;left:12px;bottom:12px;color:#fff;font-weight:700;
                 font-size:14px;letter-spacing:.2px;text-shadow:0 1px 10px rgba(0,0,0,.85)}
.foto::after{content:"";position:absolute;inset:auto 0 0 0;height:44%;border-radius:0 0 12px 12px;
             background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));pointer-events:none}
.foto-dots{display:flex;justify-content:center;gap:9px;margin-top:22px;padding:8px 0}
@media(max-width:768px){
  .beeld{padding-top:44px;padding-bottom:44px}
  .foto{flex:0 0 82%}
  .foto img{height:250px}
}
/* Het antwoord op "wij hebben geen auto" — de vraag waarop een stel in
   Barcelona anders gewoon wegklikt. */
.geen-auto{max-width:560px;margin:26px auto 0;background:var(--bg-soft);
           border:1px solid var(--line);border-radius:10px;padding:20px 22px}
.geen-auto b{display:block;font-family:'Montserrat',sans-serif;font-size:17px;
             margin-bottom:8px;color:var(--ink)}
.geen-auto p{margin:0;color:var(--grey);font-size:15.5px;line-height:1.62}

/* ---------- MOBIEL: LAATSTE PUNTJES (v11) ---------- */
@media (max-width:768px){
  /* De vier punten onder de titel wikkelden als 1-1-2. Twee kolommen
     leest rustiger en houdt de knoppen erboven vrij. */
  .hero-trust{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;
              justify-items:start;max-width:330px;margin-left:auto;margin-right:auto}
  .hero-trust span{display:flex;align-items:flex-start;line-height:1.35;text-align:left}
  .hero-trust span::before{flex:none}

  /* Tikdoelen: een duim is breder dan 33 pixels. */
  .lang a{padding:9px 10px;font-size:12.5px}
  .terug{display:inline-block;padding:8px 0;font-size:16px}
  .foot a{padding:5px 0;margin-bottom:4px}
  .kort-meer a{display:inline-block;padding:6px 0}
}

/* ---------- REVIEWSCHUIVER (v12) ---------- */
/* Bolletjes zijn de enige aanwijzing dat er meer te zien is, dus ze
   moeten groot genoeg zijn om te raken en zichtbaar genoeg om op te
   vallen. Het gekleurde bolletje is 26px breed zodat je in één oogopslag
   ziet waar je bent. */
.rev-dots{display:flex;justify-content:center;gap:9px;margin-top:24px}
.rev-dot{width:10px;height:10px;padding:0;border:0;border-radius:99px;cursor:pointer;
         background:#cfcac5;transition:width .25s,background .25s}
.rev-dot.on{width:26px;background:var(--orange)}
.rev-dot:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.rev-nav{position:absolute;top:calc(50% - 44px);transform:translateY(-50%);z-index:3;
         width:44px;height:44px;border-radius:99px;border:1px solid var(--line);
         background:rgba(255,255,255,.94);color:var(--ink);cursor:pointer;
         display:flex;align-items:center;justify-content:center;
         box-shadow:0 6px 18px rgba(0,0,0,.13);transition:background .2s,opacity .2s}
.rev-nav:hover{background:#fff}
.rev-nav:disabled{opacity:.32;cursor:default}
.rev-nav:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.rev-prev{left:-14px}
.rev-next{right:-14px}

@media (max-width:900px){
  /* Op een telefoon veeg je; pijlen zouden alleen maar over de foto
     liggen. De bolletjes blijven, want die vertellen dat er meer is. */
  .rev-nav{display:none}
  .rev-dots{margin-top:20px}
  .rev-dot{width:11px;height:11px}
  .rev-dot.on{width:28px}
  /* Groter raakvlak zonder de bolletjes zelf groter te maken. */
  .rev-dots{padding:10px 0}
  .rev-dot{position:relative}
  .rev-dot::after{content:"";position:absolute;inset:-12px -7px}
}
@media (max-width:400px){
  .rev img{height:172px}
  .rev blockquote p{font-size:15px;line-height:1.58}
}

/* ---------- KOP OP SMALLE TELEFOONS (v13) ---------- */
/* De grotere taalknoppen duwden de WhatsApp-knop over het logo heen: het
   logo kromp mee, maar de letters niet, dus stond "SURRON TOURS" onder
   de knop. Onder de 430px laten we het woord WhatsApp weg — het groene
   icoon is duidelijk genoeg — en past alles weer naast elkaar. */
@media (max-width:430px){
  .hdr-wa{font-size:0;gap:0;padding:10px 12px}
  .hdr-wa svg{margin:0}
  .logo{flex-shrink:0}
}
/* De beeldband: staande foto's mogen niet de halve pagina vullen. */
.beeld-grid img{object-position:center 55%}

/* ---------- RIT-VIDEO (v15) ---------- */
/* Staand beeld, want het is met een telefoon geschoten en zo kijkt
   iedereen er ook naar. Op een breed scherm binden we hem in, anders
   vult één video de halve pagina. */
/* Op een laptop vulde een staande video van 9:16 bijna het hele scherm.
   De hoogte is daarom gebonden aan het venster; de breedte volgt. */
.rit{margin:0 auto 34px;max-width:min(400px,38vh)}
.rit-doos{position:relative;border-radius:16px;overflow:hidden;background:#0d0d0d;
          box-shadow:0 14px 40px rgba(0,0,0,.18)}
.rit-doos video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.rit figcaption{text-align:center;margin-top:14px;font-size:15px;color:var(--grey)}
/* Geluidsknop rechtsonder. Mag automatisch afspelen niet, dan neemt de
   browser het over met zijn eigen balk en verbergt het script deze knop. */
.rit-geluid{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:99px;
            border:1px solid rgba(255,255,255,.28);background:rgba(12,12,12,.62);color:#fff;
            display:flex;align-items:center;justify-content:center;cursor:pointer;
            backdrop-filter:blur(6px);transition:background .2s}
.rit-geluid:hover{background:rgba(12,12,12,.85)}
.rit-geluid:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.rit-geluid.aan{background:var(--orange);border-color:var(--orange)}
.rit-geluid.aan .rit-streep{display:none}
@media(max-width:768px){
  .rit{max-width:none;margin-bottom:28px}
  .rit-doos{border-radius:14px}
}

/* ---------- GERUSTSTELLING BIJ HET FORMULIER (v17) ---------- */
/* De vraag "moeten we dan met een grote groep rijden?" komt precies hier
   op, bij het invullen van het aantal. Dus staat het antwoord ernaast. */
.veld-hint{display:block;font-family:'Open Sans',system-ui,sans-serif;font-weight:400;
           font-size:12.5px;letter-spacing:0;text-transform:none;color:#9a9a9a;margin-top:3px}

/* ---------- NIEUWE BLOKKEN (v18) ---------- */
/* "Hoe kom ik er?" staat nu vlak onder de titel in plaats van diep op de
   infopagina. Voor iemand in Barcelona zonder auto is dat de vraag die
   over doorlezen beslist. */
.afstand{background:#fff}
.afstand .komen-lijst{margin-top:8px}
.afstand-talen{margin-top:12px;font-weight:600;color:#3c3c3c}
.cta-noot{margin-top:16px;font-size:14.5px;color:#e2e2e2;text-shadow:0 1px 10px rgba(0,0,0,.8)}
/* De vergelijking met karten en het niveau-antwoord lezen als de pitch:
   smalle kolom, iets grotere letter, geen kaders eromheen. */
.kart{background:var(--bg-soft)}
.kart .pitch-tekst p:last-child{font-weight:700;color:var(--ink)}
.niveau{background:#fff}
.winter{background:var(--bg-soft)}
.winter .pitch-tekst p:last-child{font-weight:400;color:#3c3c3c;font-size:18px}