/*
Theme Name: Keller Keukens Emmen by IDuMM
Theme URI: https://www.idummdesign.nl/
Author: IDuMM Design / OpenAI
Description: Maatwerk one-page WordPress theme voor Keller Keukens Emmen, gebaseerd op het aangeleverde Lovable ontwerp.
Version: 3.0.0
Text Domain: keller-idumm
*/
:root{
  --ink:#22211f;--ink-soft:#312f2c;--paper:#f8f6f1;--cream:#f0ece4;--sand:#ded3c4;
  --accent:#b78f65;--muted:#716d66;--white:#fff;--line:rgba(34,33,31,.14);
  --max:1320px;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --header:78px;--ease:cubic-bezier(.2,.72,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
.image-card,.project img,.showroom-images figure{border-radius:28px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
.wrap{width:min(calc(100% - 80px),var(--max));margin-inline:auto}
.section{padding:118px 0}
.section.alt{background:var(--cream)}
.eyebrow{margin:0 0 18px;text-transform:uppercase;letter-spacing:.19em;font-size:.69rem;font-weight:750;color:#8b7763}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.032em;line-height:1.01;text-wrap:balance}
h1{font-size:clamp(3.55rem,6.45vw,7.1rem);max-width:1040px}
h2{font-size:clamp(2.65rem,4.35vw,5rem);max-width:980px}
h3{font-size:clamp(1.45rem,1.8vw,1.92rem)}
p{margin:1em 0}
.lead{max-width:760px;font-size:clamp(1.03rem,1.3vw,1.25rem);line-height:1.62;color:#57534e}
.skip-link{position:fixed;left:18px;top:-80px;z-index:9999;background:#fff;color:#111;padding:12px 16px;box-shadow:0 4px 20px rgba(0,0,0,.18)}
.skip-link:focus{top:18px}

.site-header{position:fixed;z-index:1000;inset:0 0 auto;height:var(--header);background:rgba(248,246,241,.91);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-bottom:1px solid rgba(32,32,29,.08);transition:background .25s,box-shadow .25s}
.site-header.scrolled{background:rgba(248,246,241,.98);box-shadow:0 10px 35px rgba(29,26,22,.06)}
.header-inner{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:baseline;gap:9px;white-space:nowrap;font-family:var(--serif);font-size:1.19rem;line-height:1}
.brand strong{font-weight:500}
.brand small{font-family:var(--sans);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;align-items:center;gap:23px;font-size:.77rem;font-weight:680}
.nav a{position:relative;padding:29px 0 26px}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:20px;height:1px;background:var(--ink);transition:right .25s var(--ease)}
.nav a:hover:after,.nav a.active:after{right:0}
.header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;background:var(--ink);border:1px solid var(--ink);color:#fff;font-size:.75rem;font-weight:760;white-space:nowrap;transition:transform .2s var(--ease),background .2s,color .2s}
.header-cta:hover{transform:translateY(-1px)}
.menu-btn{display:none;width:44px;height:44px;padding:11px;background:transparent;border:0;cursor:pointer}
.menu-btn span{display:block;width:24px;height:1px;background:currentColor;margin:6px auto;transition:transform .25s,opacity .25s}
.menu-btn.active span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn.active span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;padding:178px 0 82px;color:#fff;background:#655d54 url('assets/images/hero-kitchen.jpg') center 48%/cover no-repeat}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,16,.72) 0%,rgba(20,18,16,.44) 42%,rgba(20,18,16,.08) 78%),linear-gradient(0deg,rgba(11,10,9,.5) 0%,transparent 48%)}
.hero-content{position:relative;z-index:1}
.hero .eyebrow{color:#fff;margin-bottom:14px}
.hero h1{max-width:1010px;text-shadow:0 2px 24px rgba(0,0,0,.08)}
.hero .lead{max-width:690px;margin-top:25px;color:rgba(255,255,255,.92)}
.buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:35px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:1px solid var(--ink);background:transparent;font-size:.81rem;font-weight:760;letter-spacing:.012em;cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.dark{background:var(--ink);color:#fff}
.btn.light{border-color:rgba(255,255,255,.74);color:#fff;background:rgba(255,255,255,.04)}
.hero .btn.dark{background:#fff;border-color:#fff;color:var(--ink)}
.hero .btn.light:hover{background:#fff;border-color:#fff;color:var(--ink)}

.intro-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:92px;align-items:center}
.logo-panel{min-height:490px;display:grid;place-items:center;padding:56px;background:#211f1f;overflow:hidden}
.logo-panel img{width:min(84%,480px);height:auto}
.intro-copy h2{max-width:770px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:48px}
.service{padding-top:19px;border-top:1px solid var(--line)}
.service h3{font-size:1.4rem}
.service p{font-size:.9rem;line-height:1.66;color:var(--muted)}
.contact-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:.83rem;color:var(--muted)}
.contact-mini b{color:var(--ink);font-weight:720}
.contact-mini a{text-decoration:underline;text-underline-offset:3px}

.features{background:var(--ink);color:#fff}
.features .eyebrow{color:#bba891}
.feature-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:112px;align-items:start}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:0;padding:0;list-style:none}
.feature-list li{position:relative;padding:17px 0 17px 23px;border-bottom:1px solid rgba(255,255,255,.14);font-size:.93rem}
.feature-list li:before{content:"✦";position:absolute;left:0;color:#d4b18d}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:52px}
.image-card{position:relative;min-height:525px;overflow:hidden;background:#ddd;border-radius:28px}
.image-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .75s var(--ease)}
.image-card:after{content:"";position:absolute;inset:34% 0 0;background:linear-gradient(transparent,rgba(12,11,10,.82))}
.image-card:hover img{transform:scale(1.035)}
.image-card .cap{position:absolute;z-index:2;left:25px;right:25px;bottom:25px;color:#fff}
.image-card .cap .eyebrow{margin-bottom:7px;color:rgba(255,255,255,.78)}
.image-card .cap h3{font-size:2rem}
.image-card .cap p{margin:.65em 0 0;font-size:.86rem;line-height:1.54;color:rgba(255,255,255,.84)}
.swipe-hint{display:none;margin-top:18px;font-size:.76rem;color:var(--muted)}

.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:50px}
.project{background:#fff;overflow:hidden}
.project img{width:100%;aspect-ratio:1.22/1;object-fit:cover;transition:transform .55s var(--ease);border-radius:28px}
.project:hover img{transform:scale(1.025)}
.project>div{padding:21px 22px 24px}
.project h3{font-size:1.56rem}
.project p{margin:5px 0 0;color:var(--muted);font-size:.83rem}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:57px}
.step{padding-top:20px;border-top:1px solid var(--line)}
.num{margin-bottom:34px;font-family:var(--serif);font-size:3.15rem;line-height:1;color:#a78969}
.step h3{font-size:1.5rem}
.step p{font-size:.89rem;line-height:1.62;color:var(--muted)}

.showroom{display:grid;grid-template-columns:.88fr 1.12fr;gap:15px;align-items:stretch}
.showroom-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:66px 62px;background:var(--sand)}
.showroom-copy h2{font-size:clamp(2.65rem,3.9vw,4.55rem)}
.showroom-copy p{max-width:610px}
.showroom-meta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:18px 0 4px;padding:24px 0 28px;border-top:1px solid rgba(32,32,29,.16)}
.showroom-meta p{margin:0;font-size:.89rem}
.showroom-images{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:15px}
.showroom-images figure{position:relative;min-height:302px;margin:0;overflow:hidden;border-radius:28px}
.showroom-images img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.showroom-images figcaption{position:absolute;left:16px;bottom:16px;padding:9px 12px;background:rgba(249,247,243,.93);font-size:.64rem;font-weight:760;letter-spacing:.07em;text-transform:uppercase}

.business-band{padding:96px 0;background:var(--accent);color:#221f1b}
.business-band .eyebrow{color:#594a3c}
.business-band h2{max-width:none}
.business-band .lead{max-width:850px;color:#312b26}

.reviews-head{display:flex;justify-content:space-between;gap:30px;align-items:end}
.reviews-head .lead{max-width:370px;margin:0}
.reviews-wrap{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:46px;padding-bottom:14px;scrollbar-width:none}
.reviews-wrap::-webkit-scrollbar{display:none}
.review{flex:0 0 365px;min-height:296px;display:flex;flex-direction:column;padding:31px 29px 29px;background:#fff;border:1px solid rgba(32,32,29,.08);scroll-snap-align:start}
.stars{margin-bottom:18px;font-size:.86rem;letter-spacing:.18em}
.review p{margin:0 0 28px;font-family:var(--serif);font-size:1.3rem;line-height:1.36}
.review b{margin-top:auto;font-size:.82rem}
.review span{font-size:.77rem;color:var(--muted)}

#prijzen{background:var(--ink);color:#fff}
#prijzen .eyebrow{color:#bba891}
#prijzen .lead,#prijzen .price-note{color:rgba(255,255,255,.7)}
#prijzen .price-table{border-top-color:rgba(255,255,255,.2)}
#prijzen .price-row{border-bottom-color:rgba(255,255,255,.2)}
.price-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:start}
.price-copy .lead{max-width:510px}
.price-table{border-top:1px solid var(--line)}
.price-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;padding:25px 0;border-bottom:1px solid var(--line);font-size:.99rem}
.price-row b{font-family:var(--serif);font-size:1.56rem;font-weight:400;white-space:nowrap}
.price-note{margin-top:18px;font-size:.77rem;color:var(--muted)}

.faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:100px;align-items:start}
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;gap:20px;padding:23px 0;background:none;border:0;text-align:left;font:650 .95rem var(--sans);cursor:pointer}
.faq-q .plus{font-size:1.4rem;font-weight:300;line-height:1;transition:transform .25s}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq-a>div{overflow:hidden;color:var(--muted);font-size:.9rem}
.faq-a p{margin:0 0 23px}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .plus{transform:rotate(45deg)}

.contact-section{padding-bottom:0;background:var(--ink);color:#fff}
.contact-section .eyebrow{color:#bba891}
.contact-section .lead{color:rgba(255,255,255,.7)}
.contact-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:102px;align-items:start}
.contact-meta{display:grid;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}
.contact-meta div{display:grid;grid-template-columns:105px 1fr;gap:15px;font-size:.86rem}
.contact-meta b{font-weight:720;color:#fff}
.contact-meta span,.contact-meta a{color:rgba(255,255,255,.68)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 17px;padding:35px;background:#2d2b29;border:1px solid rgba(255,255,255,.08)}
.form label{display:grid;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%;min-height:50px;padding:13px 14px;border:1px solid rgba(255,255,255,.18);border-radius:0;outline:0;background:#242220;color:#fff;text-transform:none;letter-spacing:normal;transition:border-color .2s,background .2s}
.form textarea{min-height:142px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.35)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:rgba(255,255,255,.55);background:#282624}
.form .btn{grid-column:1/-1;justify-self:start;border-color:#fff;background:#fff;color:var(--ink)}
.notice{grid-column:2;margin:0 0 18px;padding:14px 16px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);font-size:.86rem}
.notice.error{border-color:rgba(255,164,164,.36);background:rgba(140,40,40,.18)}
.brands{margin-top:93px;overflow:hidden;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);white-space:nowrap}
.brands-track{display:inline-block;padding:24px 0;font-family:var(--serif);font-size:1.35rem;color:rgba(255,255,255,.57);animation:brandloop 28s linear infinite}
@keyframes brandloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}

footer{background:var(--ink);color:#fff}
.footer-inner{min-height:108px;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:.74rem;color:rgba(255,255,255,.54)}
.footer-inner strong{font-family:var(--serif);font-size:1.05rem;font-weight:400;color:#fff}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.brands-track{animation:none}.image-card img,.project img{transition:none}}

@media(max-width:1180px){
  .wrap{width:min(calc(100% - 54px),var(--max))}
  .nav{gap:15px;font-size:.72rem}
  .brand small{display:none}
  .intro-grid,.feature-grid{gap:62px}
  .showroom-copy{padding:52px 44px}
  .contact-grid{gap:64px}
}
@media(max-width:980px){
  :root{--header:70px}.wrap{width:min(calc(100% - 42px),var(--max))}.section{padding:90px 0}
  .header-cta{display:inline-flex;margin-left:auto;min-height:40px;padding:0 14px;font-size:.7rem}
  .menu-btn{display:block;position:relative;z-index:1002}
  .nav{position:fixed;z-index:1001;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:90px 34px 42px;background:var(--paper);transform:translateX(100%);transition:transform .35s var(--ease);font-size:clamp(1.45rem,4vw,2.1rem)}
  .nav.open{transform:none}.nav a{width:100%;padding:9px 0;font-family:var(--serif);font-weight:400}.nav a:after{display:none}
  .hero{min-height:860px;padding:155px 0 70px;background-position:58% 50%}
  .intro-grid,.feature-grid,.price-layout,.faq-layout,.contact-grid{grid-template-columns:1fr;gap:52px}
  .logo-panel{min-height:390px}
  .features .feature-grid{gap:42px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .projects{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .showroom{grid-template-columns:1fr}
  .showroom-images figure{min-height:340px}
  .notice{grid-column:1}
}
@media(max-width:680px){
  .wrap{width:calc(100% - 34px)}.section{padding:76px 0}
  h1{font-size:clamp(3.1rem,14vw,4.7rem)}h2{font-size:clamp(2.35rem,11vw,3.7rem)}
  .brand{font-size:1.02rem}
  .hero{min-height:740px;padding:132px 0 54px;background-position:62% center}
  .hero:before{background:linear-gradient(90deg,rgba(20,18,16,.7),rgba(20,18,16,.28)),linear-gradient(0deg,rgba(11,10,9,.62),transparent 55%)}
  .hero .lead{font-size:1rem;max-width:92%}.buttons{margin-top:28px}.btn{min-height:49px;padding:0 19px}
  .intro-grid{gap:44px}.logo-panel{min-height:300px;padding:34px}.services,.contact-mini{grid-template-columns:1fr;gap:11px}.service{padding-top:15px}.contact-mini{gap:15px}
  .feature-list{grid-template-columns:1fr}
  .cards,.projects{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-17px;padding-right:17px;scrollbar-width:none}.cards::-webkit-scrollbar,.projects::-webkit-scrollbar{display:none}
  .image-card{flex:0 0 84%;min-height:500px;scroll-snap-align:start}.project{flex:0 0 84%;scroll-snap-align:start}.swipe-hint{display:block}
  .steps{grid-template-columns:1fr 1fr;gap:30px 18px}.num{margin-bottom:20px;font-size:2.55rem}
  .showroom{width:100%}.showroom-copy{padding:46px 28px}.showroom-meta{grid-template-columns:1fr;gap:16px}.showroom-images{grid-template-columns:1fr;grid-template-rows:none}.showroom-images figure{min-height:360px}
  .business-band{padding:76px 0}
  .reviews-head{display:block}.reviews-head .lead{margin-top:20px}.review{flex-basis:84%;min-height:280px}
  .price-layout,.faq-layout{gap:42px}.price-row{grid-template-columns:1fr;gap:5px;padding:20px 0}.price-row b{font-size:1.45rem}
  .contact-grid{gap:45px}.contact-meta div{grid-template-columns:1fr;gap:1px}.form{grid-template-columns:1fr;padding:24px 20px}.form .full,.form .btn{grid-column:1}
  .brands{margin-top:70px}.brands-track{font-size:1.16rem}
  .footer-inner{min-height:142px;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
}
@media(max-width:420px){.header-cta{min-height:36px;padding:0 10px;font-size:.64rem}.wrap{width:calc(100% - 28px)}.image-card,.project,.review{flex-basis:90%}.steps{grid-template-columns:1fr}.hero .buttons{display:grid;grid-template-columns:1fr}.hero .btn{width:100%}}