:root{
  --bg:#0b0b0b;
  --bg2:#151515;
  --gold:#c9a35b;
  --cream:#f4efe7;
  --text:#f7f7f7;
  --muted:#bdb8ae;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fff;color:#171717;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(92%,var(--max));margin:auto}
header{
  position:sticky;top:0;z-index:30;
  background:rgba(11,11,11,.96);
  border-bottom:1px solid rgba(201,163,91,.25);
}
.navbar{display:flex;align-items:center;justify-content:space-between;min-height:76px}
.brand{display:flex;flex-direction:column}
.brand strong{color:var(--gold);font-family:Georgia,serif;font-size:56px;letter-spacing:.18em}
.brand span{color:#fff;font-size:9px;letter-spacing:.2em}
nav{display:flex;gap:24px;align-items:center}
nav a{color:#fff;font-size:14px}
nav a:hover{color:var(--gold)}
.nav-cta{border:1px solid var(--gold);padding:10px 16px}
.menu{display:none;background:none;border:0;color:#fff;font-size:26px}
.hero{
  min-height:78vh;display:flex;align-items:center;color:#fff;
  background:
  linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.28)),
  url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1800&q=85') center/cover;
}
.hero-inner{padding:90px 0;max-width:760px}
.kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.25em;font-size:12px;font-weight:700}
h1,h2,h3{font-family:Georgia,serif;line-height:1.1}
h1{font-size:clamp(52px,8vw,104px);font-weight:500;margin:20px 0}
.hero p{font-size:19px;color:#ececec;max-width:680px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-block;padding:14px 22px;text-transform:uppercase;letter-spacing:.11em;font-size:12px;font-weight:700}
.btn-gold{background:var(--gold);color:#111}
.btn-outline{border:1px solid #fff;color:#fff}
section{padding:96px 0}
.section-title{max-width:760px;margin-bottom:42px}
.section-title h2{font-size:clamp(38px,5vw,64px);margin:10px 0}
.section-title p{color:#666}
.services{background:var(--cream)}
.grid4{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  min-height:430px;position:relative;overflow:hidden;color:#fff;border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:flex-end;
}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.94) 88%);z-index:1}
.card-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:.45s}
.card:hover .card-bg{transform:scale(1.05)}
.card-content{position:relative;z-index:2;padding:28px;min-height:205px;display:flex;flex-direction:column;justify-content:flex-end}
.card h3{font-size:30px;margin:0 0 10px}
.card p{font-size:14px;color:#f2f2f2;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.card .more{color:var(--gold);font-weight:700;font-size:13px}
.band{background:var(--bg);color:#fff}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feature{border-top:2px solid var(--gold);padding-top:18px}
.feature h3{font-size:26px;margin:6px 0}
.feature p{color:var(--muted)}
.quote{background:var(--gold);color:#111}
.quote-wrap{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.quote h2{font-size:clamp(38px,5vw,58px);margin:0}
.quote .btn{background:#111;color:#fff}
footer{background:#060606;color:#aaa;padding:44px 0}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}
.footer-grid h4{color:#fff;margin-top:0}
.footer-grid a{display:block;margin:7px 0}
.page-hero{
  min-height:48vh;display:flex;align-items:end;color:#fff;padding:100px 0 70px;
  background-size:cover;background-position:center;position:relative
}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.25))}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{font-size:clamp(48px,7vw,82px);margin-bottom:12px}
.content-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px}
.list{padding-left:20px}
.notice{border-left:4px solid var(--gold);background:#f7f3ec;padding:22px;margin-top:28px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form label{font-size:13px;font-weight:700}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;padding:13px;margin-top:7px;border:1px solid #ccc;font:inherit
}
.full{grid-column:1/-1}
@media(max-width:950px){
  nav{display:none;position:absolute;top:76px;left:0;right:0;background:#111;flex-direction:column;padding:22px}
  nav.open{display:flex}
  .menu{display:block}
  .grid4{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .content-grid,.quote-wrap,.footer-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .grid4,.contact-form{grid-template-columns:1fr}
  .hero{min-height:72vh}
  section{padding:72px 0}
}


/* ALDEVO — subtiele animaties */
html { scroll-behavior: smooth; }

body {
  opacity: 0;
  animation: pageFadeIn .7s ease-out forwards;
}

@keyframes pageFadeIn {
  to { opacity: 1; }
}

.logo, .brand, header h1, .hero h1 {
  animation: logoReveal .9s cubic-bezier(.2,.7,.2,1) both;
}

.hero p, .hero .subtitle, .hero .btn, .hero a.button {
  animation: heroReveal .9s ease-out .18s both;
}

@keyframes logoReveal {
  from { opacity: 0; transform: translateY(-14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.card, .service-card, .tile {
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s ease,
              border-color .35s ease;
  will-change: transform;
}

.card:hover, .service-card:hover, .tile:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}

.card::before, .service-card::before, .tile::before {
  transition: transform .6s ease, filter .6s ease;
}

.card:hover::before, .service-card:hover::before, .tile:hover::before {
  transform: scale(1.045);
  filter: brightness(1.06);
}

.btn, .button, button, input[type="submit"] {
  transition: transform .2s ease,
              box-shadow .25s ease,
              background-color .25s ease,
              color .25s ease,
              border-color .25s ease;
}

.btn:hover, .button:hover, button:hover, input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(198,151,67,.22);
}

.btn:active, .button:active, button:active, input[type="submit"]:active {
  transform: translateY(0);
}

nav a { position: relative; }

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transition: right .25s ease;
}

nav a:hover::after { right: 0; }

input, textarea, select {
  transition: border-color .25s ease,
              box-shadow .25s ease,
              background-color .25s ease;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #c69743;
  box-shadow: 0 0 0 3px rgba(198,151,67,.14);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease,
              transform .7s cubic-bezier(.2,.7,.2,1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ALDEVO eigen logo linksboven */
.site-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 0;
  margin-right: 24px;
}

.site-logo img {
  display: block;
  width: clamp(220px, 24vw, 360px);
  height: auto;
  max-height: 120px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 5px 14px rgba(0,0,0,.24));
  transition: transform .3s ease, filter .3s ease;
}

.site-logo:hover img {
  transform: scale(1.025);
  filter: drop-shadow(0 8px 18px rgba(198,151,67,.22));
}

header,
.header-inner,
.navbar,
nav {
  align-items: center;
}

@media (max-width: 760px) {
  .site-logo {
    margin-right: 12px;
  }

  .site-logo img {
    width: 200px;
    max-height: 90px;
  }
}