/*
Theme Name: RAP Engineering Website
Theme URI: https://rapengineering.nl
Author: RAP Engineering
Description: WordPress one-page thema voor RAP Engineering BIM Modelleur.
Version: 1.0
Text Domain: rap-engineering-website
*/

*{box-sizing:border-box}
:root{
  --blue:#0066c9;
  --blue-light:#0094ee;
  --dark:#07111f;
  --text:#172033;
  --muted:#5e6b7c;
  --line:#d7e7f8;
  --white:#fff;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:#f6fbff;
}
a{text-decoration:none;color:inherit}

.hero{
  min-height:760px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.90) 48%,rgba(231,245,255,.88)),
    linear-gradient(135deg,transparent 0 48%,rgba(0,102,201,.10) 48% 49%,transparent 49%),
    linear-gradient(45deg,transparent 0 55%,rgba(0,102,201,.08) 55% 56%,transparent 56%);
}

.nav{
  max-width:1280px;
  margin:0 auto;
  padding:22px 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  position:relative;
  z-index:2;
}
.logo img{
  height:115px;
  width:auto;
  display:block;
}
.menu{
  display:flex;
  gap:26px;
  align-items:center;
  font-size:.9rem;
  font-weight:800;
  text-transform:uppercase;
}
.menu a{
  border-bottom:3px solid transparent;
  padding:7px 0;
}
.menu a:hover,.menu .active{
  color:var(--blue);
  border-bottom-color:var(--blue);
}
.hero-content{
  max-width:1280px;
  margin:0 auto;
  padding:135px 34px 120px;
  position:relative;
  z-index:2;
}
.hero-content h1{
  margin:0;
  font-size:clamp(3rem,6vw,5.8rem);
  line-height:.95;
  letter-spacing:-2px;
  text-transform:uppercase;
  color:#050505;
}
.hero-content h1 span{
  color:var(--blue);
}
.line{
  width:95px;
  height:4px;
  background:var(--blue);
  margin:25px 0;
}
.hero-content p{
  max-width:560px;
  font-size:1.3rem;
  line-height:1.5;
}
.buttons{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:32px;
}
.button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:15px 24px;
  border-radius:7px;
  color:white;
  background:linear-gradient(135deg,var(--blue-light),var(--blue));
  font-weight:800;
  box-shadow:0 12px 28px rgba(0,102,201,.22);
}
.button.outline{
  background:white;
  color:var(--blue);
  border:1px solid var(--blue);
  box-shadow:none;
}
.button.small{
  padding:11px 17px;
  text-transform:none;
  border:0!important;
}

.section{
  max-width:1280px;
  margin:0 auto;
  padding:80px 34px;
  text-align:center;
  position:relative;
}

.label{
  color:var(--blue);
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:2px;
  margin:0 0 8px;
}
h2{
  font-size:clamp(2.1rem,4vw,3.5rem);
  line-height:1.1;
  margin:0 0 40px;
}
h2 span{color:var(--blue)}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  text-align:left;
}
.card{
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 14px 35px rgba(30,89,142,.13);
  padding-bottom:28px;
}
.card-img{
  height:215px;
  background:
    linear-gradient(135deg,rgba(0,102,201,.08),rgba(255,255,255,.35)),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(0,102,201,.14) 28px 29px),
    repeating-linear-gradient(90deg,transparent 0 37px,rgba(0,102,201,.12) 38px 39px);
}

.icon{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  margin:-34px 0 18px 26px;
  border-radius:50%;
  color:white;
  background:linear-gradient(135deg,var(--blue-light),var(--blue));
  border:6px solid white;
  font-size:1.6rem;
}
.card h3,.card p,.card a{
  margin-left:26px;
  margin-right:26px;
}
.card h3{
  font-size:1.6rem;
  margin-top:0;
  margin-bottom:8px;
}
.card p{
  color:var(--muted);
  line-height:1.55;
}
.card a{
  color:var(--blue);
  font-weight:800;
}

.why{
  padding-top:35px;
}
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  text-align:left;
}
.why-item{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:18px;
  align-items:start;
}
.round{
  width:64px;
  height:64px;
  border:2px solid var(--blue);
  color:var(--blue);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:1.8rem;
}
.why-item h3{
  margin:0 0 5px;
}
.why-item p{
  margin:0;
  color:var(--muted);
}

.projects{
  background:white;
  max-width:none;
}
.project-list{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.project-list span{
  padding:22px;
  border-radius:14px;
  background:#eef7ff;
  border:1px solid var(--line);
  font-weight:800;
  color:var(--blue);
}

.contact{
  background:
    linear-gradient(110deg,rgba(0,42,87,.98),rgba(0,102,201,.88)),
    repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,255,255,.10) 36px 37px),
    repeating-linear-gradient(90deg,transparent 0 45px,rgba(255,255,255,.08) 46px 47px);
  color:white;
  padding:75px 34px;
}
.contact div{
  max-width:1280px;
  margin:0 auto;
}
.contact h2{
  margin-bottom:14px;
}
.contact p{
  font-size:1.15rem;
  color:#e9f5ff;
}
.contact a{
  display:block;
  margin:12px 0;
  color:white;
  font-weight:800;
}
.mail-button{
  display:inline-flex!important;
  width:auto;
  background:linear-gradient(135deg,var(--blue-light),var(--blue));
  padding:14px 26px;
  border-radius:7px;
  margin-top:18px!important;
}

footer{
  text-align:center;
  background:#041428;
  color:#b9d7f5;
  padding:24px;
}

@media(max-width:950px){
  .hero{min-height:auto}
  .nav{
    flex-direction:column;
    align-items:flex-start;
  }
  .logo img{height:82px}
  .menu{
    flex-wrap:wrap;
    gap:14px;
  }
  .hero-content{
    padding-top:70px;
    padding-bottom:80px;
  }
  .cards,.why-grid,.project-list{
    grid-template-columns:1fr;
  }
}