/* Proxima Nova is geen gratis Google Font. Zodra je de bestanden hebt
   (Adobe Fonts-licentie of eigen .woff2), voeg je hier @font-face toe:

   @font-face{
     font-family:'Proxima Nova';
     src:url('proxima-nova-regular.woff2') format('woff2');
     font-weight:400;
   }
   @font-face{
     font-family:'Proxima Nova';
     src:url('proxima-nova-extrabold.woff2') format('woff2');
     font-weight:800;
   }

   Tot die tijd valt de site terug op Arial, zoals in het lookbook als
   alternatief is aangegeven. */

:root{
  --orange:#FF4E00;
  --black:#0A0A0A;
  --panel:#141414;
  --line:#2A2A2A;
  --gray:#8A8A8A;
  --white:#FFFFFF;
  --max:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--white);
  font-family:'proxima-nova','Proxima Nova', Arial, Helvetica, sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'proxima-nova','Proxima Nova', Arial, Helvetica, sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.02em;
  line-height:1.05;
}

h1{font-size:clamp(2.6rem, 6vw, 5rem);}
h2{font-size:clamp(1.9rem, 4vw, 2.8rem);}
h3{font-size:1.25rem;}

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

img{max-width:100%; display:block;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* Crosshair signature — used as a section marker, echoes the logo's reticle */
.tick{
  display:inline-block;
  width:22px; height:3px;
  background:var(--orange);
}

.crosshair-mark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--orange);
  font-family:'proxima-nova','Proxima Nova', Arial, Helvetica, sans-serif; font-weight:800;
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  margin-bottom:14px;
}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  max-width:var(--max); margin:0 auto;
}
.nav img{height:34px;}
.nav-links{display:flex; gap:32px; align-items:center;}
.nav-links a{
  font-family:'proxima-nova','Proxima Nova', Arial, Helvetica, sans-serif; font-weight:800;
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--white);
  transition:color .15s;
}
.nav-links a:hover, .nav-links a.active{color:var(--orange);}
.nav-cta{
  background:var(--orange);
  color:var(--black) !important;
  padding:10px 20px;
  font-family:'proxima-nova','Proxima Nova', Arial, Helvetica, sans-serif; font-weight:800;
  font-weight:700;
}
.nav-toggle{display:none; background:none; border:none; color:var(--white); font-size:1.6rem; cursor:pointer;}

@media (max-width:860px){
  .nav-links{
    position:fixed; top:66px; left:0; right:0;
    background:var(--black);
    border-top:1px solid var(--line);
    flex-direction:column;
    gap:0;
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  .nav-links.open{max-height:400px;}
  .nav-links a{padding:16px 24px; width:100%; border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
}

/* Buttons */
.btn{
  display:inline-block;
  font-family:'proxima-nova','Proxima Nova', Arial, Helvetica, sans-serif; font-weight:800;
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:14px 28px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.btn-primary{background:var(--orange); color:var(--black);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{border-color:var(--orange); color:var(--orange);}
.btn-ghost:hover{background:var(--orange); color:var(--black);}

/* Hero */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:flex-end;
  padding:0 0 80px;
  overflow:hidden; background:#0A0A0A;
}
.hero-bg{position:absolute; left:0; right:0; top:-12%; bottom:-12%; background-position:center; background-size:cover; background-repeat:no-repeat; will-change:transform; z-index:0;}
.hero::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(10,10,10,.05) 0%, rgba(10,10,10,.1) 45%, rgba(10,10,10,.55) 80%, rgba(10,10,10,.92) 100%);}
.hero-inner{position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:0 24px; width:100%;}
.hero h1{margin-bottom:20px; text-shadow:0 4px 24px rgba(0,0,0,0.6);}
.hero .lead{max-width:560px; color:#EDEDED; margin-bottom:32px; font-size:1.05rem; text-shadow:0 2px 12px rgba(0,0,0,0.7);}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

/* Sections */
section{padding:90px 0;}
.section-alt{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head p{color:var(--gray); margin-top:14px;}

/* Stat row */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-top:56px; border-top:1px solid var(--line); padding-top:32px;
}
.stat b{
  display:block; font-family:'proxima-nova','Proxima Nova', Arial, Helvetica, sans-serif; font-weight:700;
  font-size:2.6rem; color:var(--orange);
}
.stat span{color:var(--gray); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em;}

/* Grid cards */
.grid{display:grid; gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:28px;
  transition:border-color .15s;
}
.card:hover{border-color:var(--orange);}
.card .tick{margin-bottom:18px;}
.card h3{margin-bottom:10px;}
.card p{color:var(--gray); font-size:0.95rem;}

/* Portfolio tiles */
.tile{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:#1c1c1c center/cover no-repeat;
}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform .3s;}
.tile:hover img{transform:scale(1.06);}
.tile-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
}
.tile-label b{font-family:'proxima-nova','Proxima Nova', Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:1rem;}
.tile-label span{display:block; color:var(--orange); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; margin-top:2px;}

.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.filter-btn{
  font-family:'proxima-nova','Proxima Nova', Arial, Helvetica, sans-serif; font-weight:700; text-transform:uppercase; font-size:0.85rem;
  letter-spacing:0.05em; padding:9px 18px; border:1px solid var(--line); background:transparent; color:var(--gray);
  cursor:pointer;
}
.filter-btn.active, .filter-btn:hover{border-color:var(--orange); color:var(--orange);}

/* Team */
.member{background:var(--panel); border:1px solid var(--line);}
.member .photo{aspect-ratio:1/1; background:#1c1c1c center/cover no-repeat;}
.member .info{padding:18px;}
.member .info span{color:var(--orange); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em;}

/* Quote / testimonial */
.quote{border-left:3px solid var(--orange); padding-left:20px; font-size:1.05rem; color:#D8D8D8;}
.quote cite{display:block; margin-top:14px; font-style:normal; color:var(--gray); font-size:0.85rem;}

/* CTA band */
.cta-band{
  background:var(--orange); color:var(--black);
  padding:64px 0; text-align:left;
}
.cta-band h2{color:var(--black);}
.cta-band-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band .btn-ghost{border-color:var(--black); color:var(--black);}
.cta-band .btn-ghost:hover{background:var(--black); color:var(--white);}

/* Form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid .full{grid-column:1/-1;}
@media (max-width:700px){.form-grid{grid-template-columns:1fr;}}
label{
  display:block; font-family:'proxima-nova','Proxima Nova', Arial, Helvetica, sans-serif; font-weight:600; text-transform:uppercase;
  font-size:0.8rem; letter-spacing:0.06em; color:var(--gray); margin-bottom:8px;
}
input, select, textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--white);
  padding:13px 14px; font-family:'proxima-nova','Proxima Nova', Arial, Helvetica, sans-serif; font-size:0.95rem;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--orange); border-color:var(--orange);}
textarea{min-height:130px; resize:vertical;}

.contact-grid{display:grid; grid-template-columns:1.3fr 0.8fr; gap:48px; align-items:start;}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr;}}

/* Offerte wizard */
.wizard-progress{display:flex; gap:8px; margin-bottom:48px;}
.wizard-progress .step-dot{
  flex:1; height:4px; background:var(--line);
}
.wizard-progress .step-dot.done{background:var(--orange);}
.wizard-progress .step-dot.current{background:var(--orange); opacity:0.5;}

.step-panel{display:none;}
.step-panel.active{display:block;}

.step-label{
  color:var(--gray); font-family:'proxima-nova','Proxima Nova',Arial,sans-serif; font-weight:700;
  text-transform:uppercase; font-size:0.8rem; letter-spacing:0.08em; margin-bottom:10px;
}

.option-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:8px;}
@media (max-width:700px){.option-cards{grid-template-columns:repeat(2,1fr);}}
.option-card{
  background:var(--panel); border:1px solid var(--line); padding:22px 18px;
  cursor:pointer; text-align:left; transition:border-color .15s;
}
.option-card:hover{border-color:var(--orange);}
.option-card.selected{border-color:var(--orange); background:rgba(255,78,0,0.08);}
.option-card h4{
  font-family:'proxima-nova','Proxima Nova',Arial,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:0.95rem; letter-spacing:0.02em;
}
.option-card p{color:var(--gray); font-size:0.85rem; margin-top:6px;}

.wizard-actions{display:flex; justify-content:space-between; margin-top:40px;}
.summary-list{list-style:none;}
.summary-list li{
  display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line);
}
.summary-list li span:first-child{color:var(--gray);}

/* Client logo wall */
.client-wall{
  display:flex; flex-wrap:wrap; gap:32px 44px; justify-content:center; align-items:center;
}
.client-chip{
  height:72px;
  display:flex; align-items:center; justify-content:center;
}
.client-chip img{width:auto; height:100%; max-width:200px; object-fit:contain;}

/* Footer */
footer{border-top:1px solid var(--line); padding:56px 0 32px; background:var(--panel);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px;}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{font-size:0.85rem; letter-spacing:0.08em; margin-bottom:16px; color:var(--gray);}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a:hover{color:var(--orange);}
.footer-bottom{
  border-top:1px solid var(--line); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  color:var(--gray); font-size:0.82rem;
}
.social{display:flex; gap:16px;}

/* Utility */
.mt-lg{margin-top:56px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}


/* Galerij: foto's behouden hun eigen verhouding */
.gallery{column-count:3; column-gap:16px;}
.gallery .tile{aspect-ratio:auto; display:block; break-inside:avoid; margin-bottom:16px; background:none;}
.gallery .tile img{width:100%; height:auto; display:block; object-fit:initial;}
@media (max-width:900px){.gallery{column-count:2;}}
@media (max-width:520px){.gallery{column-count:1;}}
/* Vaste liggende tegel (3:2) voor fotostroken */
.tile.land{aspect-ratio:3/2;}


/* Dienst: foto en kaart zijn één klikbaar blok */
.service-link{display:block; color:inherit;}
.service-link .tile{margin-bottom:0;}
.service-link .card{border-top:none; height:auto;}
.service-link .more{display:inline-block; margin-top:14px; color:var(--orange); font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;}
.service-link:hover .card{border-color:var(--orange);}
.service-link:hover .more{text-decoration:underline;}

/* Casekaarten op het portfolio */
.case-card{position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:#1c1c1c; border:1px solid var(--line);}
.case-card img{width:100%; height:100%; object-fit:cover; transition:transform .3s;}
.case-card:hover img{transform:scale(1.06);}
.case-card .case-info{position:absolute; left:0; right:0; bottom:0; padding:20px; background:linear-gradient(180deg, transparent, rgba(10,10,10,.92));}
.case-card .case-info b{display:block; font-size:1.15rem; text-transform:uppercase;}
.case-card .case-info span{display:block; margin-top:4px; color:var(--orange); font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;}
.case-card.soon{display:flex; align-items:flex-end; opacity:.55;}
.case-card.soon .case-info{position:static; background:none; width:100%;}
.case-card.soon .case-info span{color:var(--gray);}

/* Lightbox */
.lightbox{position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.94); display:none; align-items:center; justify-content:center; padding:24px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain;}
.lightbox button{position:absolute; background:none; border:none; color:#fff; font-size:2.2rem; cursor:pointer; padding:12px 18px; line-height:1;}
.lightbox .lb-close{top:12px; right:12px;}
.lightbox .lb-prev{left:8px; top:50%; transform:translateY(-50%);}
.lightbox .lb-next{right:8px; top:50%; transform:translateY(-50%);}
.gallery a.tile{cursor:zoom-in;}


/* Portfolio per dienst */
.pf-section.hidden,.pf-all-only.hidden{display:none;}
.pf-only{display:none;}
.pf-only.show{display:block;}
.empty-note{border:1px dashed var(--line); padding:40px 24px; text-align:center;}
.empty-note p{color:var(--gray); margin-bottom:20px;}

.more-link{display:inline-block; margin-top:14px; color:var(--orange); font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;}
.more-link:hover{text-decoration:underline;}

.check-row{display:flex !important; align-items:center; gap:10px; margin-top:12px; font-size:0.85rem; text-transform:none !important; letter-spacing:0 !important; cursor:pointer;}
.check-row input{width:18px !important; height:18px; margin:0; flex:none; accent-color:var(--orange);}


/* Dienst-tegels: groot en opvallend */
.dtile{position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:#1c1c1c; border:1px solid var(--line); transition:transform .25s, border-color .25s;}
.dtile img{width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.dtile::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,.88) 100%); pointer-events:none;}
.dtile-info{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px;}
.dtile-info b{display:block; font-size:1.9rem; line-height:1.05; text-transform:uppercase; letter-spacing:0.02em;}
.dtile-info span{display:inline-block; margin-top:10px; padding:6px 12px; background:var(--orange); color:#0A0A0A; font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; transition:transform .25s;}
.dtile:hover{transform:translateY(-4px); border-color:var(--orange);}
.dtile:hover img{transform:scale(1.08);}
.dtile:hover .dtile-info span{transform:translateX(6px);}
.dtile.solid{background:var(--orange);}
.dtile.solid::after{display:none;}
.dtile.solid .dtile-info b{color:#0A0A0A;}
.dtile.solid .dtile-info span{background:#0A0A0A; color:var(--orange);}
.dtile-mark{position:absolute; right:20px; top:6px; font-size:7rem; font-weight:700; line-height:1; color:rgba(10,10,10,.18);}

/* Casekaarten op dienstpagina's */
.case-grid .case-card{aspect-ratio:4/3;}
.case-grid .case-card.soon{opacity:1; background:#141414;}
.case-grid .case-card.soon .case-info b{font-size:1.4rem;}
.case-grid .case-card .case-info b{font-size:1.4rem;}
.dienst-nav a.filter-btn{display:inline-block;}

/* Over ons */
.hero-sm{min-height:70vh;}
.stat-band{padding:0; background:var(--orange); color:var(--black);}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-top:40px; padding-bottom:40px;}
.stat b{display:block; font-size:clamp(1.8rem,3.4vw,2.8rem); text-transform:uppercase; line-height:1; margin-bottom:8px;}
.stat span{font-size:.95rem; font-weight:600;}
.about-split{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;}
.about-split.reverse{grid-template-columns:1fr 1.1fr;}
.about-split.reverse .about-photo{order:2;}
.about-photo img{width:100%; height:auto; display:block; border:1px solid var(--line);}
.about-text h2{margin:12px 0 20px;}
.about-text p{color:#d6d6d6; margin-bottom:16px; max-width:480px;}
.photo-strip{display:grid; grid-template-columns:repeat(4,1fr); padding:0; gap:0;}
.photo-strip img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block;}
@media(max-width:800px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  .about-split,.about-split.reverse{grid-template-columns:1fr; gap:28px;}
  .about-split.reverse .about-photo{order:0;}
  .photo-strip{grid-template-columns:1fr 1fr;}
}
.stat-band .stat b,.stat-band .stat span{color:#0A0A0A !important; opacity:1;}

.svc-panel{display:flex; align-items:flex-end; aspect-ratio:3/2; background:var(--orange); color:var(--black); padding:28px; border:1px solid var(--line); text-decoration:none;}
.svc-panel span{font-size:clamp(2.4rem,6vw,4.5rem); font-weight:800; text-transform:uppercase; line-height:1;}

.usp-stats{grid-template-columns:repeat(4,1fr); border-top:none; padding-top:0; margin-top:0;}
@media(max-width:900px){.usp-stats{grid-template-columns:1fr 1fr; gap:24px;}}
@media(max-width:520px){.usp-stats{grid-template-columns:1fr;} .hero h1{word-break:normal; overflow-wrap:anywhere;}}
@media(max-width:700px){
  section{padding-top:44px; padding-bottom:44px;}
  .hero,.hero-sm{padding-top:0; padding-bottom:56px;}
  .stat-band{padding:0;}
  .photo-strip{padding:0;}
  .about-split{gap:22px;}
}

/* Iconen */
.social{display:flex; gap:10px; align-items:center;}
.social a{display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--white); transition:all .2s;}
.social a svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.social a svg .dot{fill:currentColor; stroke:none;}
.social a svg .fill{fill:currentColor; stroke:none;}
.social a:hover{background:var(--orange); border-color:var(--orange); color:var(--black); transform:translateY(-2px);}
.card-icon{display:flex; align-items:center; gap:10px;}
.card-icon svg{width:22px; height:22px; fill:none; stroke:var(--orange); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.card-icon svg .dot{fill:var(--orange); stroke:none;}
.card-icon svg .fill{fill:var(--orange); stroke:none;}

.contact-card{position:relative; transition:border-color .2s, transform .2s;}
.contact-card a::after{content:''; position:absolute; inset:0;}
.contact-card:hover{border-color:var(--orange); transform:translateY(-2px);}

/* case hero */
.case-hero{position:relative; min-height:520px; display:flex; align-items:flex-end; overflow:hidden; background:#0A0A0A; padding:0 0 48px;}
.case-hero .hero-bg{background-position:center;}
.case-hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.8) 28%,rgba(10,10,10,.25) 62%,rgba(10,10,10,.35) 100%),linear-gradient(90deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,0) 65%);}
.case-hero .wrap{position:relative; z-index:2; width:100%;}
.case-hero h1{text-shadow:0 4px 24px rgba(0,0,0,0.8); margin-top:16px;}
.case-hero .tagline{color:var(--orange); font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-top:14px; font-size:1.05rem; text-shadow:0 2px 12px rgba(0,0,0,0.9);}
.case-hero .crosshair-mark{text-shadow:0 2px 10px rgba(0,0,0,0.9);}
.case-text{padding-top:48px; padding-bottom:16px;}
.case-text p{max-width:760px; font-size:1.1rem; line-height:1.65; color:#EDEDED; margin-bottom:18px;}
@media(max-width:700px){.case-hero{min-height:400px;}}

@media(min-width:901px){.dtiles .dtile:last-child:nth-child(3n+1){grid-column:1/-1; aspect-ratio:auto; min-height:220px;}}