/*
Theme Name: Webdesign DMC
Theme URI: https://webdesigndmc.be
Author: Dirk Coremans
Author URI: https://webdesigndmc.be
Description: Eigen thema voor Webdesign DMC — urban/hazard stijl in rood, zwart en wit, met een custom post type voor klantenprojecten en standaard WordPress-berichten voor nieuws.
Version: 1.0
Text Domain: webdesigndmc
*/

:root{
  --ink:#0b0b0b; --ink-2:#161616; --paper:#f2efe6; --wall:#e8e4d8;
  --yellow:#e0261a; --yellow-dark:#a8160f; --white:#f7f5ee;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Archivo',sans-serif; -webkit-font-smoothing:antialiased;}
a{color:inherit;}
img{max-width:100%; display:block;}
.mono{font-family:'Space Mono',monospace;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
.eyebrow{font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 20px; display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;}
h2.section-title{font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(28px,3.8vw,46px); margin:0 0 12px; letter-spacing:-.005em; line-height:1;}

/* topbar + page header */
.pagehead{background:var(--ink); color:var(--white); position:relative; overflow:hidden;}
.hero-noise{position:absolute; inset:0; opacity:.05; background-image:radial-gradient(circle, #fff 1px, transparent 1px); background-size:6px 6px; pointer-events:none;}
.topbar{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:26px 0;}
.brand-text{font-family:'Anton',sans-serif; font-size:19px; letter-spacing:.02em; line-height:1; text-decoration:none; color:var(--white);}
.brand-logo{display:flex; align-items:center;}
.brand-logo img{height:52px; width:auto; display:block;}
nav.topnav{display:flex; gap:26px; font-family:'Space Mono',monospace; font-size:12px; text-transform:uppercase;}
nav.topnav ul{list-style:none; display:flex; gap:26px; margin:0; padding:0;}
nav.topnav li{position:relative;}
nav.topnav a{color:var(--white); opacity:.7; text-decoration:none;}
nav.topnav a:hover, nav.topnav .current-menu-item a{opacity:1; color:var(--yellow);}
nav.topnav li.menu-item-has-children > a::after{content:"▾"; display:inline-block; margin-left:5px; font-size:9px;}
nav.topnav .sub-menu{
	list-style:none; display:none; flex-direction:column; gap:0;
	position:absolute; top:100%; left:0; margin:0; padding:8px 0;
	background:var(--ink); border:1px solid rgba(247,245,238,.15); min-width:230px; z-index:40;
}
nav.topnav li:hover > .sub-menu, nav.topnav li:focus-within > .sub-menu{display:flex;}
nav.topnav .sub-menu a{display:block; padding:10px 18px; font-size:11px; white-space:nowrap;}
nav.topnav .sub-menu a:hover{background:rgba(247,245,238,.06);}

.mobile-nav ul{list-style:none; margin:0; padding:0;}
.mobile-nav li.menu-item-has-children > a{position:relative;}
.mobile-nav li.menu-item-has-children > a::after{content:"▾"; display:inline-block; margin-left:8px; font-size:15px; transition:transform .2s ease;}
.mobile-nav li.menu-item-has-children.mobile-submenu-open > a::after{transform:rotate(180deg);}
.mobile-nav .sub-menu{display:none; padding-left:18px;}
.mobile-nav li.menu-item-has-children.mobile-submenu-open > .sub-menu{display:block;}
.mobile-nav .sub-menu a{font-size:16px; opacity:.75; padding:12px 0;}
.topbar{position:relative; z-index:20;}
.hamburger{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:none; border:none; cursor:pointer; width:44px; height:44px; padding:0; z-index:20;}
.hamburger span{display:block; width:24px; height:2px; background:var(--white); transition:transform .25s ease, opacity .25s ease;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{display:none; flex-direction:column; background:var(--ink) !important; position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:999999 !important; padding:100px 32px 40px; justify-content:flex-start; margin:0 !important; transform:none !important; opacity:1 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch;}
.mobile-nav a{color:var(--white); text-decoration:none; font-family:'Space Mono',monospace; font-size:22px; text-transform:uppercase; padding:16px 0; border-bottom:1px solid rgba(247,245,238,.15); display:block;}
.mobile-nav.open{display:flex !important;}
.hamburger{position:relative; z-index:1000000;}
@media (max-width:900px){nav.topnav{display:none;} .hamburger{display:flex;}}
.pagehead-body{position:relative; z-index:2; padding:56px 0 64px;}
h1.pagetitle{font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(38px,6vw,68px); line-height:.96; margin:0 0 18px; letter-spacing:-.005em; max-width:820px;}
h1.pagetitle .hl{color:var(--yellow);}
.pagehead-sub{font-size:16px; line-height:1.6; color:#cfcbbd; max-width:520px; margin:0;}

/* hero (homepage) */
.hero{background:var(--ink); color:var(--white); position:relative; overflow:hidden;}
.hero-body{position:relative; z-index:2; padding:70px 0 0; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;}
h1.display{font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(42px,7.4vw,96px); line-height:.94; margin:0 0 28px; letter-spacing:-.005em; max-width:920px;}
h1.display .hl{color:var(--yellow);}
.hero-sub{font-size:17px; line-height:1.6; color:#cfcbbd; max-width:480px; margin:0 0 38px;}
.cta-row{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}

.hero-video-frame{
  position:relative; border:3px solid var(--white); box-shadow:8px 8px 0 var(--yellow);
  transform:rotate(2deg); overflow:hidden; aspect-ratio:4/5; background:var(--ink);
}
.hero-video-frame video{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
.hero-video-tag{
  position:absolute; top:14px; left:-30px; background:var(--yellow); color:var(--white);
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 34px; transform:rotate(-6deg); box-shadow:0 2px 0 rgba(0,0,0,.3);
}
@media (max-width:860px){
  .hero-body{grid-template-columns:1fr; padding-top:40px;}
  .hero-video-frame{max-width:280px; margin:0 auto; aspect-ratio:1;}
}

/* hazard strip */
.hazard{background:repeating-linear-gradient(-45deg, var(--yellow), var(--yellow) 22px, var(--ink) 22px, var(--ink) 44px); background-size:62px 62px; height:14px; position:relative; z-index:2; animation:hazardDrift 14s linear infinite; margin-top:56px;}
@keyframes hazardDrift{from{background-position:0 0;} to{background-position:124px 0;}}
@media (prefers-reduced-motion: reduce){.hazard{animation:none;}}
.marquee-wrap{background:repeating-linear-gradient(-45deg, var(--yellow), var(--yellow) 22px, var(--ink) 22px, var(--ink) 44px); background-size:62px 62px; padding:14px 0; overflow:hidden; position:relative; z-index:2; margin-top:56px; animation:hazardDrift 14s linear infinite;}
@media (prefers-reduced-motion: reduce){.marquee-wrap{animation:none;}}
.marquee-track{display:flex; width:max-content; animation:scrollx 26s linear infinite;}
.marquee-track span{font-family:'Space Mono',monospace; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--white); padding:6px 20px; margin-right:14px; white-space:nowrap;}
@keyframes scrollx{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none;}}

/* reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none;}}
.stagger-4 > *:nth-child(1){transition-delay:.05s;} .stagger-4 > *:nth-child(2){transition-delay:.14s;} .stagger-4 > *:nth-child(3){transition-delay:.23s;} .stagger-4 > *:nth-child(4){transition-delay:.32s;}
.stagger-3 > *:nth-child(1){transition-delay:.05s;} .stagger-3 > *:nth-child(2){transition-delay:.14s;} .stagger-3 > *:nth-child(3){transition-delay:.23s;}

/* diamond signs (diensten) */
.sign-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:36px; position:relative;}
.sign-grid::before{content:""; position:absolute; inset:-40px -20px; z-index:-1; pointer-events:none; background-image:repeating-linear-gradient(-45deg, rgba(11,11,11,.05), rgba(11,11,11,.05) 2px, transparent 2px, transparent 26px); opacity:.6;}
.sign{display:flex; flex-direction:column; align-items:center; text-align:center;}
.sign-diamond{--tilt:0deg; position:relative; width:96px; height:96px; background:var(--white); border:3px solid var(--ink); color:var(--ink); transform:rotate(calc(45deg + var(--tilt))); display:flex; align-items:center; justify-content:center; margin-bottom:30px; box-shadow:4px 4px 0 var(--ink), 8px 8px 0 var(--yellow), 13px 13px 0 rgba(11,11,11,.13); transition:transform .35s cubic-bezier(.2,.8,.2,1.3), background .3s ease, color .3s ease, box-shadow .35s ease;}
/* dubbele binnenrand — geeft het bord diepte i.p.v. een vlak icoon */
.sign-diamond::before{content:""; position:absolute; inset:6px; border:1.5px solid rgba(11,11,11,.22); pointer-events:none; transition:border-color .3s ease;}
/* vier boutjes in de hoeken, zoals op een echt verkeersbord */
.sign-diamond::after{content:""; position:absolute; inset:12px; pointer-events:none;
  background-image:radial-gradient(circle, rgba(11,11,11,.4) 1.7px, transparent 1.9px);
  background-repeat:no-repeat; background-size:6px 6px;
  background-position:left top, right top, left bottom, right bottom; transition:opacity .3s ease;}
.sign:nth-child(1) .sign-diamond{--tilt:-4deg;} .sign:nth-child(2) .sign-diamond{--tilt:3deg;} .sign:nth-child(3) .sign-diamond{--tilt:-3deg;} .sign:nth-child(4) .sign-diamond{--tilt:4deg;}
.sign-diamond svg{position:relative; z-index:1; transform:rotate(calc(-45deg - var(--tilt))); width:44px; height:44px; transition:transform .35s cubic-bezier(.2,.8,.2,1.3);}
.sign-diamond svg .ico-accent{stroke:var(--yellow);}
.sign-diamond svg .ico-dot{fill:currentColor; stroke:none;}
.sign-diamond svg .ico-dot-accent{fill:var(--yellow); stroke:none;}
.sign:hover .sign-diamond{transform:rotate(0deg) translateY(-8px) scale(1.08); background:var(--ink); color:var(--white); box-shadow:0 3px 0 var(--ink), 0 7px 0 var(--yellow), 0 26px 34px rgba(11,11,11,.32);}
.sign:hover .sign-diamond::before{border-color:rgba(224,38,26,.55);}
.sign:hover .sign-diamond::after{opacity:.35;}
.sign:hover .sign-diamond svg{transform:rotate(0deg);}
.sign-name{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:16px; margin-bottom:8px; letter-spacing:.01em;}
.sign-desc{font-size:13px; line-height:1.55; color:#4a4739;}
.sign-stamp{font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--yellow-dark); opacity:0; transform:translateY(-6px); transition:all .25s ease; margin-top:8px;}
.sign:hover .sign-stamp{opacity:1; transform:translateY(0);}
@media (max-width:900px){.sign-grid{grid-template-columns:1fr 1fr; row-gap:44px;}}
@media (max-width:560px){.sign-grid{grid-template-columns:1fr; max-width:280px; margin:0 auto; row-gap:40px;}}

/* stickers (portfolio / projecten) */
.sticker-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;}
.sticker{background:var(--white); border:3px solid var(--ink); border-radius:50%; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px; position:relative; text-decoration:none; color:var(--ink); transform:rotate(var(--r,-4deg)); transition:transform .25s ease, box-shadow .25s ease; box-shadow:4px 4px 0 rgba(11,11,11,.9);}
.sticker:nth-child(2){--r:3deg;} .sticker:nth-child(3){--r:-2deg;} .sticker:nth-child(4){--r:4deg;}
.sticker:hover{transform:rotate(0deg) scale(1.04); box-shadow:6px 6px 0 var(--yellow);}
.sticker-num{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em; color:#605d4f; margin-bottom:6px;}
.sticker-client{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:16px; line-height:1.05; margin-bottom:8px;}
.sticker-loc{font-family:'Space Mono',monospace; font-size:9.5px; text-transform:uppercase; color:#605d4f; margin-bottom:10px;}
.sticker-result{font-family:'Space Mono',monospace; font-size:10px; font-weight:700; color:var(--white); background:var(--yellow); padding:4px 8px; display:inline-block; transform:rotate(-3deg);}
@media (max-width:860px){.sticker-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.sticker-grid{grid-template-columns:1fr; max-width:280px; margin:0 auto;}}

/* phases */
.phases-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(247,245,238,.15);}
.phase{background:var(--ink); padding:8px 26px 8px 0;}
.phase-num{font-family:'Anton',sans-serif; font-size:40px; color:var(--yellow); display:block; margin-bottom:12px; line-height:1;}
.phase-title{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:17px; margin-bottom:8px; letter-spacing:.01em;}
.phase-desc{font-size:13px; line-height:1.55; color:#cfcbbd;}
@media (max-width:900px){.phases-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
@media (max-width:560px){
	.phases-grid{grid-template-columns:1fr; row-gap:0; gap:0; background:none;}
	.phase{padding:22px 0; border-bottom:1px solid rgba(247,245,238,.15);}
	.phase:last-child{border-bottom:none;}
}

/* quotes */
.quotes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.quote-sticker{background:var(--white); border:3px solid var(--ink); padding:28px 24px; position:relative; transform:rotate(var(--r,-1.5deg)); box-shadow:5px 5px 0 var(--yellow); transition:transform .2s ease;}
.quote-sticker:nth-child(2){--r:1.2deg;} .quote-sticker:nth-child(3){--r:-1deg;}
.quote-sticker:hover{transform:rotate(0deg);}
.quote-mark{font-family:'Anton',sans-serif; font-size:44px; color:var(--yellow-dark); line-height:.6; display:block; margin-bottom:10px;}
.quote-stars{color:var(--yellow-dark); font-size:12px; letter-spacing:2px; margin-bottom:12px; display:block;}
.quote-text{font-family:'Archivo',sans-serif; font-weight:600; font-size:15px; line-height:1.45; margin-bottom:18px;}
.quote-author{font-family:'Space Mono',monospace; font-size:11px; color:#5c5847; text-transform:uppercase;}
.quote-author b{color:var(--ink); font-family:'Archivo',sans-serif; text-transform:none; display:block; font-size:13.5px; margin-bottom:2px;}
@media (max-width:920px){.quotes-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.quotes-grid{grid-template-columns:1fr;}}

/* faq */
.faq-list{border-top:2px solid var(--ink);}
.faq-item{border-bottom:2px solid var(--ink); padding:20px 0; cursor:pointer;}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:'Anton',sans-serif; text-transform:uppercase; font-size:15.5px;}
.faq-q .plus{font-family:'Space Mono',monospace; font-size:19px; color:var(--yellow-dark); transition:transform .2s ease; flex-shrink:0;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:220px;}
.faq-a p{font-size:14px; line-height:1.6; color:#3a3728; margin:14px 0 0; max-width:640px;}

/* news / blog cards */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:#dcd4bd;}
.news-card{background:var(--wall); padding:30px 26px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; min-height:220px;}
.news-date{font-family:'Space Mono',monospace; font-size:10.5px; color:#605d4f; text-transform:uppercase; margin-bottom:14px;}
.news-title{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:18px; line-height:1.15; margin-bottom:10px;}
.news-excerpt{font-size:13px; line-height:1.55; color:#4a4739; flex:1;}
.news-more{font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; color:var(--yellow-dark); margin-top:14px;}
@media (max-width:860px){.news-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.news-grid{grid-template-columns:1fr;}}

.single-content{max-width:760px;}
.single-content p, .single-content li, .single-content .wp-block-paragraph{
  font-family:'Archivo',sans-serif !important; font-size:15.5px; line-height:1.75; color:#2a2820; margin:0 0 20px;
}
.single-content h1, .single-content h2, .single-content h3, .single-content h4,
.single-content .wp-block-heading{
  font-family:'Anton',sans-serif !important; text-transform:uppercase; letter-spacing:.005em;
  color:var(--ink) !important; line-height:1.15; margin:36px 0 16px;
}
.single-content h2{font-size:26px;}
.single-content h3{font-size:20px;}
.single-content strong, .single-content b{font-family:'Archivo',sans-serif !important; font-weight:700 !important;}
.single-content img{margin:24px 0 !important; border:3px solid var(--ink) !important; max-width:100% !important; height:auto !important; display:block !important;}
.single-content a{color:var(--yellow-dark); text-decoration:underline;}
.single-content ul{list-style:none; padding:0; margin:0 0 20px;}
.single-content ul li{position:relative; padding-left:26px; margin-bottom:10px;}
.single-content ul li::before{content:"→"; position:absolute; left:0; color:var(--yellow-dark); font-weight:700;}
.single-content ol{padding-left:22px; margin:0 0 20px;}
.single-content blockquote{border-left:3px solid var(--yellow); padding-left:20px; margin:24px 0; font-family:'Anton',sans-serif; text-transform:uppercase; font-size:18px; letter-spacing:.005em;}

/* project single detail */
.project-detail-grid{display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start;}
.project-facts{background:var(--white); border:3px solid var(--ink); padding:26px;}
.project-facts dt{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#4a4739; font-weight:700; margin-top:16px;}
.project-facts dt:first-child{margin-top:0;}
.project-facts dd{margin:4px 0 0; font-family:'Anton',sans-serif; font-size:17px; text-transform:uppercase; color:var(--ink);}
@media (max-width:820px){.project-detail-grid{grid-template-columns:1fr;}}

/* generic section paddings */
.section{padding:100px 0;}
.section-alt{background:var(--wall);}
.section-dark{background:var(--ink); color:var(--white);}
.section-dark .eyebrow{color:var(--yellow);}
.section p.lead{font-family:'Space Mono',monospace; font-size:12.5px; color:#5c5847; max-width:420px; text-transform:uppercase; letter-spacing:.02em; margin:0 0 50px;}
.section-dark p.lead{color:#b7b39f;}
.head-row{display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:24px; margin-bottom:56px;}

/* buttons */
.btn-punch{font-family:'Space Mono',monospace; font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; background:var(--yellow); color:var(--white); border:none; padding:15px 26px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; box-shadow:5px 5px 0 rgba(11,11,11,.2); transition:transform .15s ease, box-shadow .15s ease; cursor:pointer;}
.btn-punch:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(11,11,11,.25);}
.section-dark .btn-punch{box-shadow:5px 5px 0 rgba(247,245,238,.15);}
.btn-ghost{font-family:'Space Mono',monospace; font-size:12.5px; color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(11,11,11,.3); padding-bottom:2px; text-transform:uppercase;}
.section-dark .btn-ghost{color:var(--white); border-bottom-color:rgba(247,245,238,.4);}

/* footer */
.footer{background:var(--ink); color:var(--white);}
.footer-hazard{background:repeating-linear-gradient(-45deg, var(--yellow), var(--yellow) 18px, var(--ink) 18px, var(--ink) 36px); background-size:50px 50px; height:14px; animation:hazardDrift 12s linear infinite;}
@media (prefers-reduced-motion: reduce){.footer-hazard{animation:none;}}
.footer-cta{padding:80px 0 56px;}
.footer-cta h2{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(30px,5vw,58px); line-height:.98; max-width:640px; margin:0 0 28px;}
.footer-cta h2 .hl{color:var(--yellow);}
.footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(247,245,238,.15);}
.footer-col{font-size:13px;}
.footer-col .h{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--yellow); text-transform:uppercase; margin-bottom:12px; display:block;}
.footer-col a{display:block; color:#cfcbbd; text-decoration:none; padding:6px 0; margin-bottom:4px; min-height:24px;}
.footer-col a:hover{color:var(--white);}
.footer-bottom{padding:20px 0; font-family:'Space Mono',monospace; font-size:10.5px; color:#a19d8a; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* photo placeholder / real photo — duotone treatment */
.photo-frame{
  position:relative; border:3px solid var(--ink); background:var(--wall); overflow:hidden;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
  aspect-ratio:4/3; color:#605d4f; text-align:center; padding:24px;
}
.photo-frame.portrait{aspect-ratio:3/4;}
.photo-frame.wide{aspect-ratio:16/9;}
.photo-frame svg{width:34px; height:34px; opacity:.5;}
.photo-frame .photo-label{font-family:'Space Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; max-width:220px; line-height:1.5;}
.photo-frame.has-photo{background:var(--ink);}
.photo-frame.has-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.12) brightness(.97);
}
.photo-frame.has-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 3px rgba(224,38,26,.35), inset 0 0 40px 10px rgba(11,11,11,.35);
}

/* service detail rows (diensten page) */
.service-detail{border-top:2px solid var(--ink); padding:36px 0; display:grid; grid-template-columns:70px 1fr; gap:28px; align-items:start;}
.service-detail-icon{width:56px; height:56px; border:2px solid var(--ink); background:var(--white); display:flex; align-items:center; justify-content:center; color:var(--ink);}
.service-detail-icon svg{width:28px; height:28px;}
.service-detail-title{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:19px; margin-bottom:14px;}
.service-list{list-style:none; padding:0; margin:0;}
.service-list li{position:relative; padding-left:24px; margin-bottom:9px; font-size:13.5px; color:#4a4739;}
.service-list li::before{content:"→"; position:absolute; left:0; color:var(--yellow-dark); font-weight:700;}
@media (max-width:600px){.service-detail{grid-template-columns:1fr;} .service-detail-icon{margin-bottom:6px;}}

/* pagination */
.wd-pagination{display:flex; gap:12px; margin-top:50px; font-family:'Space Mono',monospace; font-size:12px; text-transform:uppercase;}
.wd-pagination a, .wd-pagination span{border:2px solid var(--ink); padding:8px 14px; text-decoration:none; color:var(--ink);}
.wd-pagination .current{background:var(--ink); color:var(--white);}

/* ---------- positioneringsclaim (hero + footer) ---------- */
.hero-claim{
  display:inline-block; font-family:'Space Mono',monospace; font-size:11.5px; line-height:1.7;
  letter-spacing:.04em; text-transform:uppercase; color:var(--white);
  background:rgba(247,245,238,.07); border-left:3px solid var(--yellow);
  padding:10px 16px; margin:0 0 26px;
}
.claim-bar{
  display:inline-block; font-family:'Space Mono',monospace; font-size:11.5px; line-height:1.7;
  letter-spacing:.04em; text-transform:uppercase; color:#cfcbbd;
  border-left:3px solid var(--yellow); padding:8px 16px; margin:0 0 24px; max-width:620px;
}
.cta-note{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#8f8b7c; margin:18px 0 0;}
@media (max-width:560px){.hero-claim{font-size:10.5px; padding:9px 13px;}}

/* ---------- projectkaarten met screenshot ---------- */
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.project-grid--two{grid-template-columns:repeat(2,1fr); gap:38px;}
.project-card{
  display:block; text-decoration:none; color:var(--ink); background:var(--white);
  border:3px solid var(--ink); box-shadow:6px 6px 0 rgba(11,11,11,.9);
  transition:transform .25s ease, box-shadow .25s ease;
}
.project-card:hover{transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--yellow);}
.project-shot{position:relative; border-bottom:4px solid var(--ink); background:var(--ink);}
.shot-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--ink);
  border-bottom:3px solid rgba(247,245,238,.28);
}
.shot-dot{width:10px; height:10px; border-radius:50%; background:rgba(247,245,238,.3); display:block; flex-shrink:0;}
.shot-dot:first-child{background:var(--yellow);}
.shot-bar em{
  font-family:'Space Mono',monospace; font-style:normal; font-size:10.5px; letter-spacing:.06em;
  color:#cfcbbd; margin-left:6px; background:rgba(247,245,238,.09); border:1px solid rgba(247,245,238,.16);
  border-radius:3px; padding:4px 10px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shot-img{position:relative; aspect-ratio:16/11; border-top:1px solid rgba(11,11,11,.9); overflow:hidden; background:var(--wall); display:flex; align-items:center; justify-content:center;}
.shot-img img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.project-card:hover .shot-img img{transform:scale(1.04);}
.shot-empty{font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#605d4f; padding:20px; text-align:center;}
.project-stamp{
  position:absolute; right:14px; bottom:-20px; z-index:2;
  width:56px; height:56px; border-radius:50%; background:var(--white); border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; transform:rotate(-8deg);
  font-family:'Space Mono',monospace; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  box-shadow:3px 3px 0 rgba(11,11,11,.85); transition:transform .25s ease;
}
.project-card:hover .project-stamp{transform:rotate(0deg);}
.project-live{
  position:absolute; top:44px; left:-10px; z-index:2; background:var(--yellow); color:var(--white);
  font-family:'Space Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 14px; transform:rotate(-4deg); box-shadow:0 2px 0 rgba(0,0,0,.3);
}
.project-meta{padding:26px 24px 24px;}
.project-client{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:21px; line-height:1.05; margin-bottom:8px; padding-right:56px;}
.project-loc{font-family:'Space Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#605d4f; margin-bottom:14px;}
.project-result{font-family:'Space Mono',monospace; font-size:10.5px; font-weight:700; color:var(--white); background:var(--yellow); padding:5px 10px; display:inline-block; transform:rotate(-1.5deg);}
.project-card--empty{padding:40px 24px;}
.project-card--empty .project-stamp{position:static; margin-bottom:16px;}
@media (max-width:900px){.project-grid, .project-grid--two{grid-template-columns:1fr 1fr; gap:26px;}}
@media (max-width:620px){.project-grid, .project-grid--two{grid-template-columns:1fr; max-width:420px; margin:0 auto;}}

/* ============================================================
   MICRO-ANIMATIES & GORILLA
   Alles hieronder wordt uitgeschakeld bij prefers-reduced-motion.
   ============================================================ */

/* --- scrollvoortgang bovenaan (rood streepje) --- */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--yellow); z-index:999998; pointer-events:none; will-change:transform;}

/* --- knop: lichtveeg + pijl die meeschuift --- */
.btn-punch{position:relative; overflow:hidden;}
.btn-punch::before{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg); transition:left .55s cubic-bezier(.2,.7,.2,1);}
.btn-punch:hover::before{left:130%;}
.btn-punch span.arw{display:inline-block; transition:transform .25s cubic-bezier(.2,.8,.2,1.4);}
.btn-punch:hover span.arw{transform:translateX(5px);}

/* --- ghost-knop: streep veegt van links naar rechts --- */
.btn-ghost{position:relative; border-bottom-color:transparent !important; padding-bottom:3px;}
.btn-ghost::before{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:rgba(11,11,11,.28);}
.btn-ghost::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--yellow); transform:scaleX(0); transform-origin:0 50%; transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.btn-ghost:hover::after{transform:scaleX(1);}
.section-dark .btn-ghost::before, .footer .btn-ghost::before{background:rgba(247,245,238,.35);}

/* --- navigatie: onderstreping veegt in --- */
nav.topnav > ul > li > a{position:relative; padding-bottom:3px;}
nav.topnav > ul > li > a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--yellow); transform:scaleX(0); transform-origin:0 50%; transition:transform .25s cubic-bezier(.2,.7,.2,1);}
nav.topnav > ul > li > a:hover::after, nav.topnav > ul > li.current-menu-item > a::after{transform:scaleX(1);}

/* --- eyebrow: streepje groeit uit bij binnenkomst --- */
.eyebrow::before{transition:width .6s cubic-bezier(.2,.7,.2,1) .1s;}
.reveal .eyebrow::before, .eyebrow.reveal::before{width:0;}
.reveal.is-visible .eyebrow::before, .eyebrow.reveal.is-visible::before{width:22px;}

/* --- marquee pauzeert als je erover gaat (leesbaar) --- */
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{transition:background .25s ease, color .25s ease;}
.marquee-wrap:hover .marquee-track span:hover{background:var(--yellow); color:var(--white);}

/* --- hero-videoframe zweeft heel traag --- */
.hero-video-frame{animation:heroFloat 7s ease-in-out infinite;}
@keyframes heroFloat{0%,100%{transform:rotate(2deg) translateY(0);} 50%{transform:rotate(2.6deg) translateY(-9px);}}

/* --- projectkaart: browserbolletje pulseert, stempel wipt --- */
.shot-dot:first-child{animation:dotPulse 2.6s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
.project-card:hover .project-stamp{transform:rotate(6deg) scale(1.08);}
.project-card .project-result{transition:transform .25s ease;}
.project-card:hover .project-result{transform:rotate(1.5deg) translateX(3px);}

/* --- quotes: sterren poppen één voor één --- */
.quote-sticker.is-visible .quote-stars{animation:starPop .5s cubic-bezier(.2,.8,.2,1.6) both .15s;}
@keyframes starPop{from{transform:scale(.6); opacity:0;} to{transform:scale(1); opacity:1;}}

/* --- fasenummers: rode veeg loopt eronder door --- */
.phase{position:relative;}
.phase::after{content:""; position:absolute; left:0; top:0; width:3px; height:100%; background:var(--yellow); transform:scaleY(0); transform-origin:50% 0; transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.phase.is-visible::after{transform:scaleY(1);}
.phase{padding-left:18px;}
@media (max-width:560px){.phase{padding-left:16px;}}

/* --- dienstenbord: heel subtiel wiegen tot je erover gaat --- */
.sign-diamond{animation:signSway 6s ease-in-out infinite;}
.sign:nth-child(2) .sign-diamond{animation-delay:-1.5s;}
.sign:nth-child(3) .sign-diamond{animation-delay:-3s;}
.sign:nth-child(4) .sign-diamond{animation-delay:-4.5s;}
@keyframes signSway{0%,100%{transform:rotate(calc(45deg + var(--tilt)));} 50%{transform:rotate(calc(45deg + var(--tilt) + 2deg)) translateY(-3px);}}
.sign:hover .sign-diamond{animation:none;}

/* --- gorilla-watermerk in de donkere sectie (parallax via JS) --- */
.gorilla-watermark{
  position:absolute; right:-4%; top:50%; width:min(560px,58vw); pointer-events:none; z-index:0;
  opacity:.05; will-change:transform; transform:translateY(-50%);
}
.gorilla-watermark img{width:100%; height:auto; display:block;}
.section-dark .wrap{position:relative; z-index:1;}
.has-watermark{position:relative; overflow:hidden;}
@media (max-width:700px){.gorilla-watermark{width:78vw; right:-22%; opacity:.045;}}

/* --- gorilla die tijdens het scrollen tevoorschijn piept --- */
.gorilla-peek{
  position:fixed; right:22px; bottom:22px; z-index:9998;
  display:flex; align-items:center; gap:12px;
  transform:translateY(150%); opacity:0;
  transition:transform .6s cubic-bezier(.2,.9,.25,1.15), opacity .4s ease;
}
.gorilla-peek.is-in{transform:translateY(0); opacity:1;}
.gorilla-peek-inner{
  position:relative; display:flex; align-items:center; gap:12px; text-decoration:none;
}
.gorilla-bubble{
  background:var(--white); color:var(--ink); border:3px solid var(--ink);
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:10px 14px; box-shadow:4px 4px 0 var(--yellow); max-width:200px; line-height:1.4;
  transform:rotate(-1.5deg); transition:transform .25s ease;
}
.gorilla-peek-inner:hover .gorilla-bubble{transform:rotate(0deg) translateX(-3px);}
.gorilla-face{
  position:relative; width:74px; height:74px; border-radius:50%;
  background:var(--white); border:3px solid var(--ink); flex-shrink:0;
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  box-shadow:4px 4px 0 var(--yellow), 0 10px 24px rgba(11,11,11,.28);
  animation:peekBob 3.2s ease-in-out infinite;
}
.gorilla-face img{width:82%; height:auto; display:block; transform:translateY(6%); transition:transform .3s cubic-bezier(.2,.8,.2,1.5);}
.gorilla-peek-inner:hover .gorilla-face img{transform:translateY(0) scale(1.06);}
@keyframes peekBob{0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-6px) rotate(2deg);}}
.gorilla-peek-close{
  position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%;
  background:var(--ink); color:var(--white); border:2px solid var(--white); cursor:pointer;
  font-size:13px; line-height:1; padding:0; display:flex; align-items:center; justify-content:center;
}
@media (max-width:720px){
  .gorilla-bubble{display:none;}
  .gorilla-peek{right:16px; bottom:16px;}
  .gorilla-face{width:60px; height:60px;}
}

/* --- alles rustig zetten bij voorkeur voor minder beweging --- */
@media (prefers-reduced-motion: reduce){
  .hero-video-frame, .sign-diamond, .shot-dot:first-child, .gorilla-face{animation:none !important;}
  .quote-sticker.is-visible .quote-stars{animation:none !important;}
  .gorilla-peek{transition:none;}
  .btn-punch::before{display:none;}
}

/* ---------- vaste menubalk die meescrolt ---------- */
.sticky-bar{
  position:fixed; top:0; left:0; right:0; z-index:9997;
  background:rgba(11,11,11,.96); backdrop-filter:saturate(140%) blur(6px);
  border-bottom:2px solid var(--yellow); color:var(--white);
  transform:translateY(-105%); transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.sticky-bar.is-in{transform:translateY(0);}
.sticky-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 32px;}
.sticky-brand{font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.02em; text-decoration:none; color:var(--white); white-space:nowrap;}
.sticky-bar nav.topnav{flex:1; justify-content:center;}
.sticky-bar nav.topnav ul{justify-content:center; flex-wrap:wrap;}
.btn-punch--sm{padding:10px 16px; font-size:11.5px; box-shadow:3px 3px 0 rgba(247,245,238,.18); white-space:nowrap;}
.sticky-bar .hamburger{display:none;}
@media (max-width:900px){
  .sticky-inner{padding:10px 20px; gap:12px;}
  .sticky-bar .hamburger{display:flex;}
  .sticky-bar .btn-punch--sm{padding:9px 12px; font-size:10.5px;}
}
@media (max-width:420px){.sticky-bar .btn-punch--sm{display:none;}}
/* de scrollbalk komt boven op de vaste menubalk te liggen */
.scroll-progress{z-index:9999;}
@media (prefers-reduced-motion: reduce){.sticky-bar{transition:none;}}

.section{position:relative;}
.section > .wrap{position:relative; z-index:1;}

/* ---------- gestaffelde reveal voor overzichtspagina's (portfolio & nieuws) ---------- */
.stagger-grid > *:nth-child(1){transition-delay:.04s;}
.stagger-grid > *:nth-child(2){transition-delay:.11s;}
.stagger-grid > *:nth-child(3){transition-delay:.18s;}
.stagger-grid > *:nth-child(4){transition-delay:.25s;}
.stagger-grid > *:nth-child(5){transition-delay:.32s;}
.stagger-grid > *:nth-child(6){transition-delay:.39s;}
.stagger-grid > *:nth-child(7){transition-delay:.10s;}
.stagger-grid > *:nth-child(8){transition-delay:.17s;}
.stagger-grid > *:nth-child(9){transition-delay:.24s;}
.stagger-grid > *:nth-child(n+10){transition-delay:.12s;}

/* ---------- nieuwskaarten: subtiele beweging, zelfde taal als de projectkaarten ---------- */
.news-card{position:relative; overflow:hidden; transition:background .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);}
.news-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--yellow);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.news-card:hover::before{transform:scaleX(1);}
.news-card:hover{background:var(--white); transform:translateY(-4px);}
.news-card .photo-frame{overflow:hidden;}
.news-card .photo-frame img{transition:transform .55s cubic-bezier(.2,.7,.2,1);}
.news-card:hover .photo-frame img{transform:scale(1.06);}
.news-card .news-title{transition:color .25s ease;}
.news-card:hover .news-title{color:var(--yellow-dark);}
.news-more .arw{display:inline-block; transition:transform .25s cubic-bezier(.2,.8,.2,1.4);}
.news-card:hover .news-more .arw{transform:translateX(5px);}

/* ---------- paginanavigatie ---------- */
.wd-pagination a{transition:background .2s ease, color .2s ease, transform .2s ease;}
.wd-pagination a:hover{background:var(--yellow); border-color:var(--yellow); color:var(--white); transform:translateY(-2px);}

@media (prefers-reduced-motion: reduce){
  .news-card, .news-card::before, .news-card .photo-frame img, .wd-pagination a{transition:none !important;}
}

/* ---------- meescrollende gorilla (geanimeerde WebP, transparant) ---------- */
.gorilla-scroll{
  position:fixed; left:18px; bottom:0; width:152px; z-index:9990;
  pointer-events:none; transform:translateY(115%); opacity:0;
  transition:transform .7s cubic-bezier(.2,.8,.25,1), opacity .45s ease;
}
.gorilla-scroll.is-in{transform:translateY(0); opacity:1;}
.gorilla-scroll img{width:100%; height:auto; display:block; filter:drop-shadow(0 12px 18px rgba(11,11,11,.22));}
@media (max-width:1024px){.gorilla-scroll{width:112px; left:8px;}}
@media (max-width:760px){.gorilla-scroll{display:none;}}
@media (prefers-reduced-motion: reduce){.gorilla-scroll{display:none;}}

/* ---------- 'Waarom Webdesign DMC?' — tussenstuk na de hero ---------- */
.section-why{padding:88px 0 78px;}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:46px;}
.why-card{
  position:relative; background:var(--white); border:3px solid var(--ink); padding:34px 28px 30px;
  box-shadow:6px 6px 0 rgba(11,11,11,.9); transition:transform .25s ease, box-shadow .25s ease;
}
.why-card:hover{transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--yellow);}
.why-card::before{
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 34px 34px 0; border-color:transparent var(--yellow) transparent transparent;
}
.why-num{
  display:block; font-family:'Anton',sans-serif; font-size:40px; line-height:1; color:transparent;
  -webkit-text-stroke:1.5px var(--ink); margin-bottom:16px;
}
.why-title{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:22px; line-height:1.1; margin:0 0 12px;}
.why-text{font-size:15px; line-height:1.65; color:var(--ink-2); margin:0;}
@media (max-width:900px){.why-grid{grid-template-columns:1fr; gap:20px;} .section-why{padding:64px 0 56px;}}

/* ---------- mascotte: ademen + stofdeeltjes ---------- */
.gorilla-scroll.is-in img{animation:mascotBreathe 5.5s ease-in-out infinite;}
@keyframes mascotBreathe{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-5px) rotate(-.8deg);}}
.gorilla-dust{position:absolute; inset:0; pointer-events:none; overflow:visible;}
.gorilla-dust i{
  position:absolute; bottom:14%; width:5px; height:5px; border-radius:50%;
  background:rgba(11,11,11,.16); opacity:0;
}
.gorilla-scroll.is-in .gorilla-dust i{animation:dustRise 5s ease-out infinite;}
.gorilla-dust i:nth-child(1){left:12%; animation-delay:0s;}
.gorilla-dust i:nth-child(2){left:38%; width:4px; height:4px; animation-delay:1.3s;}
.gorilla-dust i:nth-child(3){left:64%; width:6px; height:6px; animation-delay:2.4s;}
.gorilla-dust i:nth-child(4){left:82%; width:3px; height:3px; animation-delay:3.6s;}
@keyframes dustRise{
  0%{transform:translate(0,0) scale(.6); opacity:0;}
  15%{opacity:.7;}
  100%{transform:translate(14px,-70px) scale(1); opacity:0;}
}
@media (prefers-reduced-motion: reduce){.gorilla-dust{display:none;}}

/* ---------- gorilla die één keer komt kijken (Higgsfield-clip) ----------
   Hij staat bewust deels búiten het scherm: links een stuk voorbij de rand,
   onderaan onder de vouw. Zo snijdt de vensterrand hem af in plaats van een
   rechthoekig kader, en komt alle beweging uit de clip zelf. Het element
   schuift niet: het faadt alleen in. */
.gorilla-look{
  position:fixed; left:-62px; bottom:-46px; width:250px; z-index:9991;
  pointer-events:none; opacity:0; transition:opacity .35s ease;
}
.gorilla-look.is-in{opacity:1;}
.gorilla-look img{width:100%; height:auto; display:block;
  /* lichte gloed: de gorilla is donker en de footer ook, anders valt hij weg */
  filter:drop-shadow(0 0 14px rgba(247,245,238,.30)) drop-shadow(0 0 3px rgba(247,245,238,.45));}
@media (max-width:1100px){.gorilla-look{width:190px; left:-52px; bottom:-36px;}}
@media (max-width:760px){.gorilla-look{display:none;}}
@media (prefers-reduced-motion: reduce){.gorilla-look{display:none;}}

/* ---------- portfolio op zwart: kaarten en titels aanpassen ---------- */
.section-dark .section-title, .section-dark h2, .section-dark h3{color:var(--white);}
.section-dark .project-card{box-shadow:6px 6px 0 rgba(247,245,238,.22);}
.section-dark .project-card:hover{box-shadow:11px 11px 0 var(--yellow);}
.section-dark .project-shot{border-bottom-color:rgba(11,11,11,.9);}
.section-dark .shot-bar{border-bottom-color:rgba(247,245,238,.35);}
.section-dark .project-stamp{box-shadow:3px 3px 0 rgba(247,245,238,.35);}
.section-dark p.lead{color:#cfcbbd;}

/* ---------- nieuwsfoto's: zwart-wit, kleur bij hover ---------- */
.news-card .photo-frame img{filter:grayscale(1) contrast(1.04); transition:filter .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);}
.news-card:hover .photo-frame img{filter:grayscale(0) contrast(1);}
@media (prefers-reduced-motion: reduce){.news-card .photo-frame img{transition:none;}}