/* JLP Geluidstechniek — responsive static website */
:root{--bg:#101214;--panel:#171a1d;--text:#f3f1ec;--muted:#a6a8a8;--accent:#5c1135;--line:rgba(255,255,255,.14);--font:'DM Sans',sans-serif;--display:'Manrope',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 64px));margin:0 auto}.topline{height:3px;background:var(--accent)}.site-header{height:88px;position:absolute;z-index:10;top:3px;left:0;width:100%;border-bottom:1px solid rgba(255,255,255,.16)}.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}.brand-logo{display:block;width:62px;height:62px;object-fit:contain}.footer-logo{width:66px;height:66px}.main-nav{display:flex;align-items:center;gap:36px;font-size:12px;font-weight:600;color:#e2e2dd}.main-nav>a:not(.nav-cta){transition:color .2s}.main-nav>a:not(.nav-cta):hover{color:var(--accent)}.nav-cta{border:1px solid rgba(255,255,255,.5);padding:13px 17px;transition:background .2s,color .2s}.nav-cta span{color:var(--accent);margin-left:16px}.nav-cta:hover{background:var(--accent);color:#fff}.nav-cta:hover span{color:#fff}.menu-toggle{display:none}
.hero{min-height:760px;height:min(900px,100vh);position:relative;display:flex;align-items:center;overflow:hidden;background:#202225}.hero-image{position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1501386761578-eac5c94b800a?auto=format&fit=crop&w=2200&q=85');background-size:cover;background-position:center 43%;transform:scale(1.02)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,14,.91) 0%,rgba(10,12,14,.72) 43%,rgba(10,12,14,.2) 100%),linear-gradient(0deg,rgba(10,12,14,.68),transparent 48%)}.hero-content{position:relative;z-index:1;padding-top:86px}.eyebrow,.section-kicker{font-size:10px;letter-spacing:2.1px;font-weight:700;color:#d1d3ce;display:flex;align-items:center;gap:11px}.pulse{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 5px rgba(215,255,69,.12)}h1,h2,h3,p{margin-top:0}h1{font:700 clamp(58px,8.5vw,112px)/.99 var(--display);letter-spacing:-6px;margin:31px 0 26px;max-width:800px}h1 em,h2 em,.big-statement span,.statement-quote em{font-style:normal;color:var(--accent)}.hero-intro{font-size:16px;line-height:1.8;color:#d0d1ce;max-width:470px;margin-bottom:32px}.hero-actions{display:flex;align-items:center;gap:30px}.button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:0 20px;font-size:12px;font-weight:700;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--accent);color:#fff}.button-primary span{font-size:17px}.text-link{font-size:12px;font-weight:600;color:#e3e3df}.text-link span{color:var(--accent);margin-left:12px;font-size:16px}.hero-bottom{position:absolute;top:570px;left:0;right:0;display:flex;align-items:center;justify-content:space-between}.hero-note{display:flex;gap:14px;align-items:center;font-size:10px;line-height:1.65;color:#b7b9b5}.note-line{width:32px;height:1px;background:var(--accent)}.hero-index{font-size:10px;color:#a5a6a3;letter-spacing:1px}.hero-index span{color:var(--accent);font-size:14px}.hero-vertical{position:absolute;right:25px;bottom:45px;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px;color:rgba(255,255,255,.6)}
.section-pad{padding:118px 0}.intro{background:#f1f0e9;color:#17191a}.intro-grid{display:grid;grid-template-columns:190px 170px minmax(0,1fr);gap:30px;align-items:start}.about-photo-wrap{width:170px;padding-top:3px}.about-photo-frame{width:148px;height:148px;padding:5px;border:1px solid var(--accent);border-radius:50%;position:relative;margin:0 auto 18px;background:#e3e0d7}.about-photo-frame:after{content:"";position:absolute;inset:4px;border:1px solid rgba(92,17,53,.35);border-radius:50%;pointer-events:none}.about-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center 28%;border-radius:50%;filter:saturate(.82)}.about-photo-caption{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}.about-photo-caption strong{font:700 14px var(--display);letter-spacing:-.2px;color:#17191a}.about-photo-caption>span:last-child{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:#777970}.about-photo-line{width:24px;height:2px;background:var(--accent);margin-bottom:5px}.about-grid .intro-lower{display:block}.about-grid .intro-lower p{margin-bottom:20px}.intro .section-kicker,.services .section-kicker,.process .section-kicker{color:#6b6e68}.section-kicker>span:first-child{font-size:10px;color:#85877f}.kicker-line{display:inline-block;width:28px;height:1px;background:currentColor;opacity:.5}.big-statement{font:700 clamp(31px,4.4vw,56px)/1.16 var(--display);letter-spacing:-2px;margin:0 0 34px}.intro-lower{display:grid;grid-template-columns:minmax(220px,470px) auto;gap:35px;align-items:end}.intro-lower p{font-size:13px;line-height:1.9;color:#60635f;margin:0}.arrow-link{font-size:10px;font-weight:700;white-space:nowrap;padding-bottom:5px;border-bottom:1px solid #b7b9b1}.arrow-link span{margin-left:13px}
.services{background:#101214}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:48px}.section-heading h2,.process-heading h2,.contact h2{font:700 clamp(38px,5.5vw,65px)/1.08 var(--display);letter-spacing:-3px;margin:25px 0 0}.section-heading>p{max-width:320px;color:#a6a8a5;font-size:13px;line-height:1.85;margin:0 0 5px}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.service-card{height:370px;position:relative;overflow:hidden;background:#262a2c}.service-feature{height:370px;grid-row:span 1}.service-photo,.service-overlay{position:absolute;inset:0}.service-photo{background-size:cover;background-position:center;transition:transform .6s}.service-card:hover .service-photo{transform:scale(1.045)}.photo-sound{background-image:url('https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?auto=format&fit=crop&w=1200&q=80')}.photo-light{background-image:url('https://images.unsplash.com/photo-1506157786151-b8491531f063?auto=format&fit=crop&w=1200&q=80')}.photo-live{background-image:url('https://images.unsplash.com/photo-1507874457470-272b3c8d8ee2?auto=format&fit=crop&w=1200&q=80')}.photo-gear{background-image:url('https://images.unsplash.com/photo-1478737270239-2f02b77fc618?auto=format&fit=crop&w=1200&q=80')}.service-overlay{background:linear-gradient(0deg,rgba(8,10,11,.94) 0%,rgba(8,10,11,.4) 43%,rgba(8,10,11,.08) 100%)}.service-number{position:absolute;top:25px;left:26px;font-size:9px;letter-spacing:1.8px;color:#e0e0d8}.service-content{position:absolute;bottom:0;left:0;right:0;padding:28px}.service-content h3{font:700 28px var(--display);letter-spacing:-1px;margin:0 0 9px}.service-content p{font-size:12px;line-height:1.75;color:#c0c1bd;max-width:360px;margin:0;padding-right:48px}.service-content>a{position:absolute;right:27px;bottom:29px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:50%;font-size:18px;transition:background .2s,color .2s}.service-content>a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.statement{position:relative;min-height:570px;display:flex;align-items:center;overflow:hidden}.statement-image{position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=2000&q=85');background-position:center 55%;background-size:cover;filter:saturate(.7)}.statement-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,11,13,.91),rgba(9,11,13,.55) 70%,rgba(9,11,13,.25))}.statement-content{position:relative;padding:95px 0}.light{color:#d6d7d1}.statement-quote{font:700 clamp(39px,6vw,76px)/1.12 var(--display);letter-spacing:-3px;margin:38px 0 46px}.statement-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.25);padding-top:22px;max-width:720px;font-size:11px;color:#c5c6c2}.big-plus{font-size:27px;color:var(--accent)}
.process{background:#efeee7;color:#151817}.process-grid{display:grid;grid-template-columns: .8fr 1.2fr;gap:100px}.process-heading h2{margin-bottom:23px}.process-heading>p{font-size:13px;line-height:1.9;color:#666963;max-width:300px;margin-top:0}.steps{border-top:1px solid #c9cbc2}.step{display:grid;grid-template-columns:40px 1fr 24px;gap:20px;padding:27px 0;border-bottom:1px solid #c9cbc2;align-items:start}.step-no{font-size:10px;color:#888b82;padding-top:5px}.step h3{font:700 20px var(--display);letter-spacing:-.5px;margin:0 0 8px}.step p{font-size:12px;line-height:1.8;color:#676a64;max-width:420px;margin:0}.step-arrow{color:#6c6f67;font-size:18px;transition:transform .2s}.step:hover .step-arrow{transform:translate(3px,-3px);color:var(--accent)}
.contact{background:#151719;position:relative;overflow:hidden}.contact:after{content:"JLP";position:absolute;right:-15px;bottom:-125px;font:800 340px/.8 var(--display);letter-spacing:-30px;color:rgba(255,255,255,.025);pointer-events:none}.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:100px;position:relative;z-index:1}.contact h2{font-size:clamp(44px,6vw,76px);margin:28px 0 22px}.contact-copy>p{max-width:390px;font-size:13px;line-height:1.9;color:#a8aaa6;margin-bottom:28px}.contact-details{padding-top:20px}.contact-detail{padding:0 0 22px;margin-bottom:23px;border-bottom:1px solid var(--line)}.detail-label{display:block;color:#92958f;font-size:9px;letter-spacing:1.8px;margin-bottom:13px}.contact-detail>a{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:600}.contact-detail>a span{font-size:16px;color:var(--accent)}.contact-detail p{font-size:13px;line-height:1.8;color:#d0d1cb;margin:0}.social-links{display:flex;gap:23px;padding-top:5px}.social-links a{font-size:10px;color:#bfc1bc}.social-links a:hover{color:var(--accent)}
.site-footer{background:#0b0d0e;padding:30px 0 18px}.footer-main{display:flex;align-items:center;justify-content:space-between;padding-bottom:27px;border-bottom:1px solid rgba(255,255,255,.12)}.footer-brand .brand-logo{width:66px;height:66px}.footer-main>p{margin:0;font-size:11px;color:#858883}.back-top{font-size:8px;letter-spacing:1.4px;color:#aeb0aa}.footer-bottom{display:flex;justify-content:space-between;padding-top:17px;font-size:9px;color:#777a75}
@media(min-width:1400px){.hero{height:900px}.hero-bottom{top:610px}}
@media(max-width:900px){.container{width:min(100% - 44px,720px)}.main-nav{gap:20px}.nav-cta{padding:12px}.intro-grid{grid-template-columns:130px 140px minmax(0,1fr);gap:18px}.about-photo-wrap{width:140px}.about-photo-frame{width:126px;height:126px}.intro-lower{grid-template-columns:1fr;gap:22px}.process-grid,.contact-grid{gap:45px}.service-card{height:340px}.service-feature{height:390px}}
@media(max-width:650px){.container{width:calc(100% - 40px)}.site-header{height:75px}.brand-mark{font-size:28px}.brand-sub{font-size:8px;letter-spacing:1.4px}.menu-toggle{display:flex;width:42px;height:42px;border:1px solid rgba(255,255,255,.3);background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:6px}.menu-toggle span{height:1px;width:17px;background:#fff}.main-nav{display:none;position:absolute;left:0;right:0;top:74px;background:#111416;padding:22px 20px 25px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line)}.main-nav.open{display:flex}.main-nav>a:not(.nav-cta){padding:15px 0;border-bottom:1px solid var(--line)}.nav-cta{margin-top:17px;text-align:center}.hero{height:760px;min-height:690px;max-height:100svh}.hero-image{background-position:58% center}.hero-shade{background:linear-gradient(90deg,rgba(10,12,14,.88),rgba(10,12,14,.45)),linear-gradient(0deg,rgba(10,12,14,.75),transparent 60%)}.hero-content{padding-top:55px}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:clamp(55px,15vw,82px);letter-spacing:-4px;margin:28px 0 22px}.hero-intro{font-size:14px;line-height:1.75;max-width:390px}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.button{min-height:50px}.hero-bottom{top:auto;bottom:-125px}.hero-vertical{right:12px;bottom:20px;font-size:7px}.section-pad{padding:78px 0}.intro-grid{display:block}.intro .section-kicker{margin-bottom:26px}.about-photo-wrap{width:150px;margin:0 0 28px;display:flex;align-items:center;gap:16px}.about-photo-frame{width:112px;height:112px;flex:0 0 112px;margin:0}.about-photo-caption{align-items:flex-start;text-align:left;gap:5px}.about-photo-caption strong{font-size:13px}.about-photo-caption>span:last-child{font-size:8px;letter-spacing:1.3px}.about-photo-line{margin-bottom:3px}.about-grid .big-statement{font-size:clamp(34px,9vw,48px)}.big-statement{font-size:35px;letter-spacing:-1.5px;margin-bottom:25px}.intro-lower{gap:20px}.intro-lower p{font-size:12px}.arrow-link{white-space:normal;line-height:1.7;width:max-content;max-width:100%}.section-heading{display:block;margin-bottom:32px}.section-heading h2,.process-heading h2{font-size:43px;letter-spacing:-2px}.section-heading>p{margin-top:22px;font-size:12px}.service-grid{grid-template-columns:1fr;gap:12px}.service-card,.service-feature{height:340px}.service-content{padding:23px}.service-content h3{font-size:25px}.service-content p{font-size:11px;max-width:300px}.statement{min-height:480px}.statement-content{padding:75px 0}.statement-quote{font-size:clamp(38px,10vw,58px);letter-spacing:-2px;margin:32px 0 40px}.statement-foot{font-size:10px}.process-grid,.contact-grid{grid-template-columns:1fr;gap:38px}.process-heading>p{font-size:12px}.step{grid-template-columns:27px 1fr 20px;gap:13px;padding:23px 0}.step h3{font-size:18px}.step p{font-size:11px}.contact h2{font-size:54px;letter-spacing:-2.5px}.contact-details{padding-top:0}.contact-detail>a{font-size:15px}.social-links{gap:17px}.footer-main{align-items:flex-start;gap:16px;flex-wrap:wrap}.footer-main>p{display:none}.back-top{margin-left:auto;padding-top:8px}.footer-bottom{gap:10px;flex-wrap:wrap;font-size:8px}.contact:after{font-size:240px;bottom:-80px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-legal>span{font-size:8px;letter-spacing:1.5px;color:#858883;margin-right:8px}
.footer-legal a{font-size:11px;color:#c5c6c1;transition:color .2s}
.footer-legal a:hover{color:var(--text)}
@media(max-width:650px){.footer-legal{gap:12px 18px}.footer-legal>span{width:100%}.footer-main{gap:14px}.footer-main>p{display:none}}


/* About portrait: larger on desktop, balanced with the adjacent copy, responsive on smaller screens */
.about-grid{align-items:stretch}
.about-photo-wrap{width:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;gap:20px;padding-top:0}
.about-photo-frame{width:210px;height:210px;flex:0 0 auto;margin:0}
.about-photo-caption{width:100%;gap:6px}
.about-photo-caption strong{font-size:18px;letter-spacing:-.35px}
.about-photo-caption>span:last-child{font-size:10px;letter-spacing:2px}
.about-photo-line{width:34px;margin-bottom:4px}
.social-links{display:flex;flex-wrap:wrap;gap:9px 18px}
.social-links a{font-size:11px}
@media(max-width:1100px){.intro-grid{grid-template-columns:150px 190px minmax(0,1fr);gap:22px}.about-photo-wrap{width:190px}.about-photo-frame{width:170px;height:170px}.about-photo-caption strong{font-size:16px}}
@media(max-width:900px){.intro-grid{grid-template-columns:120px 160px minmax(0,1fr);gap:16px}.about-photo-wrap{width:160px}.about-photo-frame{width:145px;height:145px}.about-photo-wrap{gap:15px}.about-photo-caption strong{font-size:14px}.about-photo-caption>span:last-child{font-size:9px;letter-spacing:1.4px}}
@media(max-width:650px){.intro-grid{display:block}.about-photo-wrap{width:auto;max-width:100%;margin:0 0 28px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:18px;padding:0}.about-photo-frame{width:clamp(104px,29vw,132px);height:clamp(104px,29vw,132px);flex:0 0 clamp(104px,29vw,132px);margin:0}.about-photo-caption{width:auto;align-items:flex-start;text-align:left;gap:6px}.about-photo-caption strong{font-size:clamp(15px,4.5vw,19px)}.about-photo-caption>span:last-child{font-size:9px;letter-spacing:1.5px}.about-photo-line{width:28px;margin-bottom:3px}.social-links{gap:12px 16px}.social-links a{font-size:11px}}

/* Definitieve correctie Over mij: aparte inhoudsrij voorkomt overlap op desktop en mobiel */
.intro-grid.about-grid{
  grid-template-columns: 150px minmax(0,1fr);
  gap: clamp(24px,4vw,54px);
  align-items: stretch;
}
.about-main{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(190px,240px) minmax(0,1fr);
  gap:clamp(24px,3vw,42px);
  align-items:center;
}
.about-photo-wrap{
  width:100%;
  min-width:0;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:0;
  margin:0;
}
.about-photo-frame{width:clamp(170px,17vw,210px);height:clamp(170px,17vw,210px);margin:0;flex:0 0 auto}
.about-photo-caption{width:100%;align-items:center;text-align:center}
.intro-copy{min-width:0}
.about-grid .big-statement{font-size:clamp(34px,4.3vw,56px);line-height:1.15;letter-spacing:-2px;margin-bottom:30px}
.about-grid .intro-lower{display:block}
.about-grid .intro-lower p{max-width:690px;margin-bottom:20px}
.about-grid .arrow-link{display:inline-block;white-space:normal}
.photo-sound{background-image:url('live-geluidstechniek.jpg');background-position:center 56%}
@media(max-width:1000px){
  .intro-grid.about-grid{grid-template-columns:120px minmax(0,1fr);gap:24px}
  .about-main{grid-template-columns:minmax(150px,190px) minmax(0,1fr);gap:24px}
  .about-photo-frame{width:clamp(145px,18vw,175px);height:clamp(145px,18vw,175px)}
  .about-grid .big-statement{font-size:clamp(30px,3.8vw,42px);letter-spacing:-1.5px}
}
@media(max-width:700px){
  .intro-grid.about-grid{display:block}
  .intro .section-kicker{margin-bottom:24px}
  .about-main{grid-template-columns:minmax(0,1fr);gap:25px}
  .about-photo-wrap{flex-direction:row;justify-content:flex-start;align-items:center;gap:18px}
  .about-photo-frame{width:clamp(112px,31vw,145px);height:clamp(112px,31vw,145px);flex:0 0 clamp(112px,31vw,145px)}
  .about-photo-caption{width:auto;align-items:flex-start;text-align:left}
  .about-photo-caption strong{font-size:clamp(16px,4.5vw,20px)}
  .about-grid .big-statement{font-size:clamp(32px,8vw,46px);line-height:1.13;letter-spacing:-1.4px;margin-bottom:20px}
  .about-grid .big-statement br{display:none}
  .about-grid .intro-lower p{font-size:13px;line-height:1.8}
  .about-grid .arrow-link{font-size:10px}
}

/* Over JLP-label bovenaan uitlijnen */
.intro-grid.about-grid > .section-kicker {
  align-self: start;
  padding-top: 0;
  margin-top: 0;
}