@font-face{font-family:'Bebas Neue';src:url('../fonts/BebasNeue-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --navy:#0D1B2A;
  --navy2:#061426;
  --orange:#FF7A00;
  --blue:#005A8D;
  --white:#fff;
  --gray:#8E949A;
  --light:#f5f7fa;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Montserrat,Arial,sans-serif;
  color:var(--navy);
  background:#fff;
}

h1,h2,h3,.brand-font{
  font-family:'Bebas Neue',Impact,'Arial Black',sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
}

a{
  text-decoration:none;
  color:inherit;
}

.container{
  width:min(1180px,92%);
  margin:auto;
}

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(90deg,#071629,#0b2036);
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}

.header-inner{
  height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo img{
  max-height:82px;
  width:auto;
}

.nav-menu{
  display:flex;
  gap:28px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
  color:#fff;
  font-size:13px;
  text-transform:uppercase;
}

.nav-menu a:hover,
.current-menu-item>a{
  color:var(--orange);
}

/* BUTTONS */
.btn,
.wp-block-button__link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:15px 24px;
  border-radius:4px;
  background:var(--orange);
  color:#fff!important;
  font-weight:800;
  text-transform:uppercase;
  font-size:13px;
  border:1px solid var(--orange);
}

.btn.secondary{
  background:transparent;
  border-color:rgba(255,255,255,.55);
}

.menu-toggle{
  display:none;
  background:none;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  padding:10px;
}

/* HERO */
.hero{
    min-height:650px;
    color:#fff;
    display:flex;
    align-items:center;
    background-size:cover;
    background-position:center;
    position:relative;
}

.hero:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(6,20,38,.96) 0%,
        rgba(6,20,38,.72) 42%,
        rgba(6,20,38,.15) 100%
    );
}

.hero .container{
    position:relative;
    padding-top:30px;
}

.eyebrow{
    color:var(--orange);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.hero h1,
.dockside-hero-title{
    font-family:'Bebas Neue',Impact,'Arial Black',sans-serif;
    font-size:clamp(56px,8vw,120px);
    line-height:.92;
    margin:18px 0;
    letter-spacing:.035em;
    text-transform:uppercase;
}

.hero h1 span,
.dockside-hero-title span{
    color:#1689df;
}

.hero p{
    max-width:560px;
    line-height:1.8;
    color:#e6eef7;
}

.actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:28px;
    margin-bottom:50px;
}
/* FEATURE STRIP */
.feature-strip{
  background:#061b30;
  color:#fff;
  padding:18px 0;
}

.features{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:22px;
  align-items:center;
}

.feature{
  display:flex;
  gap:14px;
  align-items:center;
  text-transform:uppercase;
  font-size:14px;
}

.icon{
  color:var(--orange);
  font-size:32px;
}

/* SECTIONS */
.section{
  padding:82px 0;
}

/* Extra ruimte boven Onze Diensten */
.feature-strip + .section{
  padding-top:60px;
}

.section.dark{
  background:#061426;
  color:#fff;
}

.section-title{
  max-width:760px;
}

.section-title h2{
  font-size:clamp(34px,4vw,54px);
  line-height:1.05;
  margin:10px 0 30px;
}

/* SERVICES */
.services{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}

.card{
  background:#071b30;
  color:#fff;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(13,27,42,.16);
}

.card img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}

.card-body{
  padding:22px;
}

.card h3{
  font-size:22px;
  margin:0 0 12px;
}

.card p{
  color:#d9e2ec;
  line-height:1.6;
  font-size:14px;
}

.more{
  color:var(--orange);
  font-weight:900;
  text-transform:uppercase;
  font-size:13px;
}

/* SPLIT */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}

.split img{
  width:100%;
  border-radius:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

/* STATS */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  background:#061b30;
  color:#fff;
  padding:36px;
  border-radius:8px;
  margin-top:30px;
  text-align:center;
}

.stat strong{
  font-size:38px;
  display:block;
}

/* CTA */
.cta{
  background-size:cover;
  background-position:center;
  color:#fff;
  text-align:center;
  position:relative;
  padding:100px 0;
}

.cta:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(6,20,38,.30);
}

/* MOBIEL */
@media screen and (max-width:768px){

  .header-inner{
    height:76px;
  }

  .logo img{
    max-height:68px;
  }

  .nav-menu{
    display:none;
  }

  .menu-toggle{
    display:block;
  }

  .hero{
    min-height:560px;
  }

  .hero h1,
  .dockside-hero-title{
    font-size:clamp(48px,15vw,72px);
  }

  .features{
    grid-template-columns:1fr;
    gap:22px;
  }

  .feature{
    justify-content:flex-start;
  }

  .feature-strip + .section{
    padding-top:70px;
  }

  .services{
    grid-template-columns:1fr;
  }

  .split{
    grid-template-columns:1fr;
  }

  .stats{
    grid-template-columns:1fr 1fr;
  }
}

.contact-hero:before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(6,20,38,.75);
}.cta .container,.contact-hero .container{position:relative}.cta h2{font-size:56px;margin:12px 0 30px}.contact-hero{background-size:cover;background-position:center;color:#fff;position:relative;padding:90px 0}.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px}.form{display:grid;gap:14px}.form input,.form textarea{width:100%;padding:15px;background:#071b30;border:1px solid rgba(255,255,255,.25);color:#fff}.site-footer{
    background:linear-gradient(180deg,#0b2a45,#061426);
    color:#dce8f2;
    padding:35px 0 15px;
}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}.footer-grid img{max-width:220px}.small{font-size:13px;color:#aab7c4}.page-hero{
  padding:45px 0 !important;
  background:linear-gradient(120deg,#0b2a45,#123a5c) !important;
  color:#fff;
}.content-area{padding:70px 0}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.post-card{background:#fff;border:1px solid #e6ebf1;border-radius:6px;overflow:hidden}.post-card img{width:100%;height:210px;object-fit:cover}.post-card .card-body{color:var(--navy)}@media(max-width:900px){.menu-toggle{display:block}.nav-menu{display:none;position:absolute;left:0;right:0;top:82px;background:#061426;flex-direction:column;align-items:flex-start;padding:24px}.nav-menu.open{display:flex}.services,.features,.stats,.project-grid,.footer-grid,.split,.contact-grid{grid-template-columns:1fr}.hero{min-height:600px}.card img{height:230px}.cta h2{font-size:38px}}
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
}

.service-card {
  background: #061b2f !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12) !important;
}

.service-card img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
}

.service-content {
  padding: 28px !important;
  background: #061b2f !important;
  color: #ffffff !important;
  min-height: 245px !important;
}

.service-content h3 {
  color: #ffffff !important;
  font-size: 28px !important;
  margin-bottom: 18px !important;
}

.service-content p {
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

.service-content a {
  color: #ff7a00 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

@media (max-width: 1100px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 650px) {
  .services-grid {
    grid-template-columns: 1fr !important;
  }
}
.features {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
    align-items: center !important;
}

.feature {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

@media (max-width: 900px) {
  .features {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .features {
    grid-template-columns: 1fr !important;
  }
}
.certifications-section {
    background: #f5f7fa;
}

.certifications-card {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 40px;
    align-items: center;
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

.certifications-card img {
    width: 100%;
    border-radius: 6px;
}

.certifications-content h3 {
    margin-bottom: 20px;
}

.certifications-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.certifications-content li {
    margin-bottom: 12px;
    font-size: 17px;
}

@media (max-width: 900px) {
    .certifications-card {
        grid-template-columns: 1fr;
    }
}
.language-switcher {
  margin-left: 18px;
  display: flex;
  align-items: center;
}

.language-switcher select {
  background: #ffffff;
  color: #061426;
  border: none;
  border-radius: 4px;
  padding: 8px 10px;
  font-weight: 700;
}
.quote-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:stretch;
}

.quote-info{
  background:
    linear-gradient(rgba(6,20,38,.70), rgba(6,20,38,.70)),
    url('../images/offerte-bg.jpg');
  background-size:cover;
  background-position:center;
  border-radius:10px;
  min-height:680px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
	
  position:relative;
}

.quote-info-content{
    padding:220px 45px 45px 45px;
    color:#fff;

}

.quote-info h2{
  font-size:46px;
  line-height:1;
  margin:10px 0 20px;
}

.quote-info p{
  line-height:1.6;
}

.quote-points{
  margin-top:30px;
  display:grid;
  gap:12px;
  font-weight:700;
  color:#ff7a00;
}

.quote-form-card{
  background:#061426;
  padding:35px;
  border-radius:8px;
}

@media(max-width:900px){
  .quote-layout{
    grid-template-columns:1fr;
  }

  .quote-info{
    min-height:460px;
  }

  .quote-info h2{
    font-size:36px;
  }
}
.quote-logo{
    width:320px;
    max-width:80%;
    height:auto;

    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);

    z-index:10;
}
@media screen and (max-width:768px){

  .feature-strip .features{
    display:block !important;
    width:100% !important;
  }

  .feature-strip .feature{
    display:grid !important;
    grid-template-columns:50px 1fr !important;
    width:360px !important;
    max-width:90vw !important;
    margin:0 auto 28px auto !important;
    align-items:center !important;
    text-align:left !important;
  }

  .feature-strip .icon{
    display:block !important;
    width:50px !important;
    min-width:50px !important;
    text-align:left !important;
    color:#FF7A00 !important;
    font-size:32px !important;
    line-height:1 !important;
  }

  .feature-strip .text,
  .feature-strip .feature-text{
    display:block !important;
    text-align:left !important;
    white-space:nowrap !important;
  }

}
@media screen and (max-width:768px){

  .section{
    padding-top:35px !important;
    padding-bottom:45px !important;
  }

}
@media (max-width:768px){

  .hero{
    min-height:300px !important;
    height:auto !important;
    padding:35px 0 !important;
    align-items:flex-start !important;
  }

  .hero h1,
  .dockside-hero-title{
    font-size:48px !important;
    line-height:0.95 !important;
    margin:12px 0 !important;
  }

  .hero p{
    display:none !important;
  }

  .hero .actions{
    margin-top:20px !important;
  }

}

@media (max-width:768px){

  .footer-brand img{
      width:130px !important;
      max-width:130px !important;
      height:auto !important;
  }

}
.feature-strip .icon{
    color:#FF7A00 !important;
    font-size:32px !important;
}
.project-lightbox{
    display:block;
    overflow:hidden;
}

.project-lightbox img{
    width:100%;
    display:block;
    cursor:zoom-in;
    transition:.3s;
}

.project-lightbox:hover img{
    transform:scale(1.03);
}
.project-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:16px 0;
}

.project-meta span{
    background:#f1f5f9;
    color:#0D1B2A;
    font-size:12px;
    font-weight:700;
    padding:6px 9px;
    border-radius:999px;
}
/* DIENSTEN / PROJECTEN - 3 KOLOMMEN LAYOUT */
.project-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:30px !important;
  align-items:stretch !important;
}

.project-grid .post-card,
.project-grid .project-showcase{
  width:100% !important;
}

/* Tablet */
@media screen and (max-width:1024px){
  .project-grid{
    grid-template-columns:repeat(2, 1fr) !important;
  }
}

/* Mobiel */
@media screen and (max-width:768px){
  .project-grid{
    grid-template-columns:1fr !important;
  }
}
/* DIENSTENPAGINA - FORCEER 3 KOLOMMEN */
.services-grid,
.service-grid,
.cards-grid,
.project-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:30px !important;
  align-items:stretch !important;
}

.services-grid .service-card,
.service-grid .service-card,
.cards-grid .service-card,
.project-grid .post-card{
  width:100% !important;
}

/* Tablet */
@media screen and (max-width:1024px){
  .services-grid,
  .service-grid,
  .cards-grid,
  .project-grid{
    grid-template-columns:repeat(2, 1fr) !important;
  }
}

/* Mobiel */
@media screen and (max-width:768px){
  .services-grid,
  .service-grid,
  .cards-grid,
  .project-grid{
    grid-template-columns:1fr !important;
  }
}
/* ===========================
   PREMIUM 404 PAGE
=========================== */

.dockside-404-hero{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(rgba(6,20,38,.72), rgba(6,20,38,.82)),
    url('../images/hero.jpg') center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}

.dockside-404-hero:after{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-120px;
  width:420px;
  height:420px;
  border:2px solid rgba(255,122,0,.35);
  border-radius:50%;
}

.dockside-404-content{
  position:relative;
  z-index:2;
  max-width:850px;
}

.dockside-404-label{
  font-family:'Bebas Neue',Impact,'Arial Black',sans-serif;
  font-size:150px;
  line-height:.8;
  color:#FF7A00;
  letter-spacing:.06em;
  margin-bottom:25px;
}

.dockside-404-content h1{
  font-size:58px;
  margin:0 0 20px;
  color:#fff;
}

.dockside-404-content p{
  font-size:21px;
  line-height:1.7;
  max-width:760px;
  color:rgba(255,255,255,.9);
}

.dockside-404-actions{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:38px;
}

.dockside-404-section{
  background:#fff;
}

.dockside-404-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.dockside-404-card{
  display:block;
  background:#f5f7fa;
  border-radius:16px;
  padding:34px;
  min-height:220px;
  color:#0D1B2A;
  border:1px solid rgba(13,27,42,.08);
  transition:.25s ease;
}

.dockside-404-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 35px rgba(13,27,42,.14);
}

.dockside-404-card span{
  display:block;
  font-size:34px;
  margin-bottom:18px;
}

.dockside-404-card h3{
  margin:0 0 12px;
  font-size:28px;
  color:#0D1B2A;
}

.dockside-404-card p{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:#555;
}

.dockside-404-contact{
  margin-top:70px;
  text-align:center;
  background:#0D1B2A;
  color:#fff;
  border-radius:18px;
  padding:45px 25px;
}

.dockside-404-contact h2{
  margin:0 0 12px;
  color:#fff;
}

.dockside-404-contact p{
  margin:0;
  font-size:19px;
}

.dockside-404-contact a{
  color:#FF7A00;
  font-weight:700;
}

@media(max-width:900px){
  .dockside-404-grid{
    grid-template-columns:1fr 1fr;
  }

  .dockside-404-label{
    font-size:110px;
  }

  .dockside-404-content h1{
    font-size:42px;
  }
}

@media(max-width:600px){
  .dockside-404-hero{
    min-height:520px;
    text-align:center;
  }

  .dockside-404-actions{
    flex-direction:column;
  }

  .dockside-404-actions .btn{
    width:100%;
  }

  .dockside-404-grid{
    grid-template-columns:1fr;
  }

  .dockside-404-label{
    font-size:86px;
  }

  .dockside-404-content h1{
    font-size:34px;
  }

  .dockside-404-content p{
    font-size:18px;
  }
}
/* 404 FINETUNE */

.dockside-404-subtitle{
  font-family:'Bebas Neue',Impact,'Arial Black',sans-serif;
  font-size:42px;
  color:#fff;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.dockside-404-hero:before{
  content:"⚓";
  position:absolute;
  right:10%;
  top:26%;
  font-size:190px;
  color:rgba(255,255,255,.06);
  z-index:1;
}

.dockside-404-label{
  font-size:180px;
  text-shadow:0 12px 35px rgba(0,0,0,.35);
}

.dockside-404-content h1{
  font-size:64px;
}

.dockside-404-content p{
  font-size:22px;
}

.dockside-404-actions .btn{
  padding:18px 34px;
  font-size:16px;
}

.dockside-404-card{
  position:relative;
  overflow:hidden;
}

.dockside-404-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:5px;
  height:100%;
  background:#FF7A00;
}

@media(max-width:600px){
  .dockside-404-label{
    font-size:105px;
  }

  .dockside-404-subtitle{
    font-size:30px;
  }

  .dockside-404-content h1{
    font-size:36px;
  }
}
.hero-video-section{
  position:relative;
  overflow:hidden;
  background-image:url('../img/hero.jpg');
  background-size:cover;
  background-position:center;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero-video-overlay{
  position:absolute;
  inset:0;
  background:rgba(6,20,38,.55);
  z-index:1;
}

.hero-video-section .container{
  position:relative;
  z-index:2;
}