@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f6f8;--dark:#101317;--card:#fff;--text:#171a1f;--muted:#68707a;--accent:#d7ff1f;--line:#e3e6ea}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}.container{width:min(1120px,92%);margin:auto}
.site-header{position:sticky;top:0;z-index:10;background:rgba(16,19,23,.96);color:white}.nav{min-height:76px;display:flex;align-items:center;gap:30px}.logo{display:flex;align-items:center;margin-right:auto;background:#fff;border-radius:6px;padding:5px 10px;text-decoration:none}.logo img{display:block;width:190px;height:46px;object-fit:contain}.nav-links{display:flex;gap:26px}.nav a{color:white;text-decoration:none}.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:14px 22px;font-weight:700;text-decoration:none;cursor:pointer}.btn-small{padding:10px 16px}.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.35)}.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:28px}
.hero{background:var(--dark);color:white;padding:90px 0 70px}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}.eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--accent);margin:0 0 16px}.hero h1{font-size:clamp(48px,7vw,78px);line-height:.98;margin:0 0 24px;letter-spacing:-3px}.hero h1 span{color:var(--accent)}.hero-text{font-size:19px;color:#c8cdd2;max-width:650px}.hero-actions{display:flex;gap:12px;margin:30px 0}.trust{display:flex;gap:28px;margin-top:38px}.trust div{display:flex;flex-direction:column}.trust strong{font-size:15px}.trust span{font-size:12px;color:#9ba2aa}.hero-card{background:#1a1f25;border:1px solid #30363d;border-radius:18px;padding:18px;box-shadow:0 28px 80px rgba(0,0,0,.35)}.van-placeholder{height:330px;border-radius:12px;background:linear-gradient(145deg,#24292f,#0b0d10);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#aeb5bc;text-align:center;position:relative;overflow:hidden}.van-placeholder:after{content:"";position:absolute;width:140%;height:2px;background:var(--accent);transform:rotate(-9deg);bottom:70px}.road-mark{font-size:72px;font-weight:800;font-style:italic;letter-spacing:-6px;color:rgba(255,255,255,.05);position:absolute;transform:rotate(-9deg)}.van-placeholder span{font-weight:800;letter-spacing:2px}.van-placeholder small{margin-top:8px}.route{display:flex;align-items:center;gap:12px;padding:18px 4px 4px;font-size:13px}.route div{height:2px;background:#5d6670;flex:1}
.section{padding:90px 0}.section h2{font-size:clamp(34px,5vw,52px);line-height:1.05;letter-spacing:-1.8px;margin:0 0 16px}.section-intro{max-width:680px;color:var(--muted);font-size:18px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}.card{background:var(--card);padding:28px;border:1px solid var(--line);border-radius:14px}.icon{font-size:28px}.card h3{margin:18px 0 8px}.card p{color:var(--muted);margin:0}.dark{background:var(--dark);color:white}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px}.dark p{color:#b9c0c7}.text-link{color:var(--accent);font-weight:700;text-decoration:none}.quote-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.contact-box{margin-top:30px;background:white;border:1px solid var(--line);padding:22px;border-radius:12px}.contact-box p{color:var(--muted);margin:4px 0}.contact-box a{color:var(--text);font-weight:700}.form{background:white;border:1px solid var(--line);padding:28px;border-radius:14px}.form label{display:block;font-size:13px;font-weight:700;margin-bottom:16px}.form input,.form select,.form textarea{display:block;width:100%;margin-top:7px;border:1px solid #d6dbe0;border-radius:7px;padding:12px;font:inherit;background:#fff}.form textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-note{font-size:11px;color:var(--muted)}.contact-section{background:#fff}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.contact-details{display:flex;flex-direction:column}.contact-details a{padding:18px 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:700}.contact-details span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}footer{background:#0b0d10;color:#b9c0c7;padding:45px 0 20px}.footer-grid{display:flex;justify-content:space-between;gap:30px}.footer-grid strong{color:white}.footer-grid p{margin:5px 0}.footer-grid a{color:white;text-decoration:none;margin-left:22px}.legal{border-top:1px solid #292d32;margin-top:35px;padding-top:18px;font-size:11px;color:#727a83}
@media(max-width:800px){.nav-links,.nav>.btn{display:none}.menu-toggle{display:block}.nav.open .nav-links{display:flex;position:absolute;top:76px;left:0;right:0;background:#101317;flex-direction:column;padding:20px 4%;gap:16px}.hero{padding-top:60px}.hero-grid,.two-col,.quote-grid,.contact-grid{grid-template-columns:1fr;gap:35px}.cards{grid-template-columns:1fr 1fr}.trust{gap:15px}.hero-card{display:none}}
@media(max-width:520px){.cards,.form-row{grid-template-columns:1fr}.section{padding:65px 0}.hero h1{font-size:50px}.trust{display:grid;grid-template-columns:1fr 1fr}.footer-grid{display:block}.footer-grid a{margin:0 20px 0 0}}

.hero h1{font-style:italic;text-transform:uppercase}
.card{transition:transform .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);border-color:#aeb5bc}
.btn{color:#101317;text-transform:uppercase;letter-spacing:.4px}
.btn-outline{color:#fff}

.van-photo{height:410px;border-radius:12px;overflow:hidden;position:relative;background:#0b0d10}
.van-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.photo-badge{position:absolute;left:18px;bottom:18px;background:rgba(10,12,15,.90);padding:12px 15px;border-left:4px solid var(--accent);font-weight:800;font-size:13px;letter-spacing:.6px}
.photo-badge span{display:block;font-size:9px;color:#aeb5bc;letter-spacing:1.3px;margin-top:2px}
@media(max-width:800px){.hero-card{display:block}.van-photo{height:300px}}

/* V4 readability + logo update */
.logo img{
  width:260px !important;
  height:58px !important;
}
.nav{
  min-height:82px;
}

/* Improve readability of services section */
#diensten .section-intro{
  color:#4f5964;
  font-weight:500;
}
#diensten .card{
  background:#ffffff;
  border:1px solid #d5dbe1;
  box-shadow:0 8px 24px rgba(16,19,23,.06);
}
#diensten .card h3{
  color:#11151a;
  font-size:20px;
}
#diensten .card p{
  color:#46505a;
  font-size:16px;
  line-height:1.65;
}
#diensten .icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#11151a;
}
@media(max-width:800px){
  .logo img{
    width:220px !important;
    height:52px !important;
  }
}

/* V5 - force high contrast in the services section */
#diensten,
#diensten .container,
#diensten .cards,
#diensten .card {
  color:#111111 !important;
}

#diensten .section-intro,
#diensten .card p,
#diensten p {
  color:#2f343a !important;
  opacity:1 !important;
  -webkit-text-fill-color:#2f343a !important;
  text-shadow:none !important;
  font-weight:500 !important;
}

#diensten .card h3,
#diensten h2,
#diensten h3 {
  color:#111111 !important;
  opacity:1 !important;
  -webkit-text-fill-color:#111111 !important;
  text-shadow:none !important;
}

#diensten .eyebrow {
  color:#9f7f00 !important;
  -webkit-text-fill-color:#9f7f00 !important;
  opacity:1 !important;
  font-weight:800 !important;
}

#diensten .card {
  background:#ffffff !important;
  border:1px solid #c7cdd3 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
}

/* Slightly stronger global body text contrast */
body {
  color:#171a1f !important;
}

/* V6 - final white-background readability pass */

/* The small DIENSTEN label: dark, readable, with a yellow accent line */
#diensten .eyebrow {
  color:#171a1f !important;
  -webkit-text-fill-color:#171a1f !important;
  opacity:1 !important;
  font-weight:800 !important;
  letter-spacing:.18em;
  display:flex;
  align-items:center;
  gap:10px;
}
#diensten .eyebrow::before {
  content:"";
  display:inline-block;
  width:28px;
  height:3px;
  background:#e6c900;
  border-radius:2px;
  flex:0 0 auto;
}

/* High contrast for all text inside the white services section */
#diensten h2,
#diensten h3 {
  color:#15191f !important;
  -webkit-text-fill-color:#15191f !important;
  opacity:1 !important;
}
#diensten p,
#diensten .section-intro,
#diensten .card p {
  color:#3c4650 !important;
  -webkit-text-fill-color:#3c4650 !important;
  opacity:1 !important;
}

/* Catch other light text on white/light sections without changing dark sections */
section:not(.dark):not(.hero) p,
.section-light p {
  opacity:1;
}

/* V7 - header logo refinement + stronger intro contrast */

/* Remove the oversized white logo panel and make the actual logo prominent */
.logo{
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
}
.logo img{
  width:300px !important;
  height:72px !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:left center !important;
  background:transparent !important;
  display:block !important;
}

/* Keep the navigation/header balanced */
.nav{
  min-height:88px !important;
  align-items:center !important;
}

/* Improve readability of the intro copy below 'Transport zonder gedoe.' */
#diensten .section-intro{
  color:#39434d !important;
  -webkit-text-fill-color:#39434d !important;
  opacity:1 !important;
  font-weight:500 !important;
}

@media(max-width:800px){
  .logo img{
    width:225px !important;
    height:58px !important;
  }
  .nav{
    min-height:76px !important;
  }
}

/* V8 - clean white Rooneij Transport logo on dark header */
.logo{
  background:transparent !important;
}
.logo img{
  width:300px !important;
  height:72px !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:none !important;
  opacity:1 !important;
}
@media(max-width:800px){
  .logo img{
    width:225px !important;
    height:58px !important;
  }
}

/* V9 - mobile logo visibility fix */
.site-header,
.nav,
.nav.open .nav-links{
  background:#101317 !important;
}

.logo{
  flex:0 0 auto !important;
  min-width:190px !important;
  height:64px !important;
  position:relative !important;
  z-index:20 !important;
}

.logo img{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:260px !important;
  height:64px !important;
  max-width:100% !important;
  filter:none !important;
}

@media(max-width:800px){
  .nav{
    min-height:72px !important;
    gap:12px !important;
  }
  .logo{
    min-width:0 !important;
    width:190px !important;
    height:54px !important;
    margin-right:auto !important;
  }
  .logo img{
    width:190px !important;
    height:54px !important;
    max-width:190px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
  .menu-toggle{
    display:block !important;
    flex:0 0 auto !important;
  }
}

@media(max-width:420px){
  .logo{
    width:165px !important;
  }
  .logo img{
    width:165px !important;
    max-width:165px !important;
  }
}

/* V10 - Android mobile scaling fix */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img, svg, video{
  max-width:100%;
  height:auto;
}

.container{
  width:min(1120px, 92%) !important;
  max-width:1120px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:800px){
  body{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  .container{
    width:92% !important;
    max-width:none !important;
  }

  .hero{
    padding:48px 0 44px !important;
  }

  .hero-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:28px !important;
  }

  .hero h1{
    font-size:clamp(42px, 12vw, 58px) !important;
    line-height:.96 !important;
    letter-spacing:-2px !important;
    max-width:100% !important;
    overflow-wrap:break-word !important;
  }

  .hero-text{
    font-size:17px !important;
    max-width:100% !important;
  }

  .hero-actions{
    flex-wrap:wrap !important;
  }

  .btn{
    max-width:100% !important;
  }

  .hero-card{
    width:100% !important;
    max-width:100% !important;
    padding:14px !important;
  }

  .van-photo{
    width:100% !important;
    height:auto !important;
    aspect-ratio:4 / 3;
  }

  .van-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .trust{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .trust div{
    min-width:0 !important;
  }

  .cards{
    grid-template-columns:1fr !important;
  }

  .two-col,
  .quote-grid,
  .contact-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:480px){
  .container{
    width:90% !important;
  }

  .hero h1{
    font-size:clamp(38px, 11.5vw, 50px) !important;
  }

  .trust{
    grid-template-columns:1fr !important;
  }

  .nav{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .logo{
    width:150px !important;
  }

  .logo img{
    width:150px !important;
    max-width:150px !important;
  }
}

/* V11 - Android scaling + white-edge/photo-card fix */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img, svg, video{
  max-width:100%;
}

@media(max-width:800px){
  body{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  .container{
    width:92% !important;
    max-width:none !important;
  }

  .hero-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:28px !important;
  }

  .hero h1{
    font-size:clamp(42px,12vw,58px) !important;
    line-height:.96 !important;
    letter-spacing:-2px !important;
    max-width:100% !important;
  }

  .hero-card{
    width:100% !important;
    max-width:100% !important;
  }
}

/* Remove the visible white edge around the van image */
.van-photo{
  background:#171c22 !important;
  border:0 !important;
  outline:0 !important;
  overflow:hidden !important;
}

.van-photo img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1.035);
  border:0 !important;
  outline:0 !important;
}

.hero-card{
  overflow:hidden !important;
}

@media(max-width:480px){
  .container{
    width:90% !important;
  }

  .hero h1{
    font-size:clamp(38px,11.5vw,50px) !important;
  }

  .van-photo img{
    transform:scale(1.06);
  }
}