/* RKNE — shared demo styles (single source) */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",Arial,sans-serif;color:#16191d;background:#f7f5f0;line-height:1.65;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1180px,90%);margin:0 auto}

/* Fixed desktop chrome */
.topbar{
  position:fixed;top:0;left:0;width:100%;height:34px;z-index:10001;
  display:flex;align-items:center;background:#111;color:#ddd;font-size:11px;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center}
.demo-nav{
  position:fixed;top:34px;left:0;width:100%;z-index:10000;
  background:rgba(247,245,240,.96);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border-bottom:1px solid #ddd;
}
.demo-nav .wrap{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.demo-page{padding-top:112px}
.logo{font:800 24px Manrope,sans-serif;letter-spacing:-.05em;white-space:nowrap}
.links{display:flex;align-items:center;justify-content:center;gap:27px;font-size:14px;font-weight:700}
.links a{transition:opacity .2s}.links a:hover{opacity:.65}
.demo-btn{display:inline-flex;align-items:center;justify-content:center;background:#17191c;color:#fff;padding:12px 17px;border-radius:8px;font-weight:700;border:1px solid transparent;cursor:pointer}
.hamb{
  display:none;align-items:center;justify-content:center;width:46px;height:46px;min-width:46px;
  padding:0;margin:0;border:1px solid rgba(255,255,255,.13);border-radius:13px;
  background:rgba(0,0,0,.05);color:currentColor;cursor:pointer;font-size:0;line-height:0;position:relative;
}
.hamb::before{content:"";width:22px;height:2px;border-radius:3px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
.menu-panel{
  display:none;position:fixed;inset:0;width:100%;height:100dvh;overflow-y:auto;
  padding:100px 8% 45px;background:#111;color:#fff;z-index:11000;
}
.menu-panel.open{display:block}
.menu-panel .hamb{
  display:flex;position:absolute;top:18px;right:24px;color:#fff;
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)
}
.menu-panel .hamb::before,.menu-panel .hamb::after{
  content:"";position:absolute;width:22px;height:2px;border-radius:3px;background:#fff;box-shadow:none
}
.menu-panel .hamb::before{transform:rotate(45deg)}
.menu-panel .hamb::after{transform:rotate(-45deg)}
.menu-panel a{display:block;font:700 38px/1.15 Manrope,sans-serif;margin:20px 0}

/* Hero */
.hero-demo{min-height:650px;display:grid;align-items:stretch;background-size:cover;background-position:center}
.hero-demo .overlay{width:100%;min-height:650px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(5,7,9,.82),rgba(5,7,9,.25))}
.hero-demo h1{max-width:800px;margin:15px 0;color:#fff;font:800 clamp(48px,7vw,88px)/.98 Manrope,sans-serif;letter-spacing:-.055em}
.hero-demo p{max-width:590px;color:#dce0e5;font-size:18px}
.eyebrow{font-size:11px;letter-spacing:.17em;font-weight:800;color:#777}
.light{color:#d5d8dc}.demo-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/* Sections */
.section{padding:100px 0}.section h2{margin:8px 0 20px;font:800 clamp(34px,5vw,56px)/1.05 Manrope,sans-serif;letter-spacing:-.045em}
.muted{color:#6f7680}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #e4e1da;padding:28px;border-radius:14px}.card h3{font:800 21px Manrope,sans-serif;margin:10px 0}.card p{color:#737982;font-size:14px}
.photo{min-height:460px;background-size:cover;background-position:center;border-radius:18px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ddd}.stat{padding:30px;background:#fff}.stat strong{display:block;font:800 36px Manrope,sans-serif}.stat span{color:#737982;font-size:13px}
.quote{font:600 26px/1.35 Manrope,sans-serif}.cta{background:#17191c;color:#fff;border-radius:20px;padding:60px}
.cta h2{margin-top:0}.footer-demo{padding:35px 0;border-top:1px solid #ddd;color:#747b84;font-size:13px;display:flex;justify-content:space-between;gap:15px}

/* Mobile */
@media(max-width:800px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .topbar{display:none}
  .demo-page{padding-top:58px}
  .demo-nav{top:0;height:58px}
  .demo-nav .wrap{width:calc(100% - 24px);height:58px;min-height:58px;gap:12px}
  .demo-nav .logo{font-size:20px}.demo-nav .links,.demo-nav>.wrap>.demo-btn{display:none}
  .demo-nav .hamb{display:flex;margin-left:auto;background:rgba(255,255,255,.055);color:inherit}
  .menu-panel{padding:86px 24px 35px}
  .menu-panel a{font-size:30px;line-height:1.15;margin:14px 0;padding:8px 0}
  .hero-demo,.hero-demo .overlay{min-height:calc(100svh - 58px)}
  .hero-demo .overlay{padding:58px 0 45px}
  .hero-demo h1{font-size:clamp(36px,10.5vw,50px);line-height:.98;max-width:100%;overflow-wrap:normal}
  .hero-demo p{font-size:15px;line-height:1.55;max-width:100%}
  .demo-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:20px}
  .demo-actions .demo-btn{width:100%;text-align:center;padding:11px 14px;font-size:13px}
  .section{padding:52px 0}.section h2{font-size:clamp(30px,8.5vw,42px);line-height:1.08}
  .grid2,.cards{grid-template-columns:1fr;gap:18px}.photo{min-height:260px}.card{padding:20px}.cards{gap:12px}
  .stats{grid-template-columns:1fr 1fr}.stat{min-width:0;padding:18px 13px}.stat strong{font-size:28px}
  .cta{padding:30px 21px;border-radius:16px}
  .footer-demo{padding:25px 0;font-size:11px;flex-direction:column;gap:6px}

  /* Six-photo barber gallery: no stretching, no duplicate overrides. */
  .demo-barbershop #work{padding-top:48px;padding-bottom:48px}
  .demo-barbershop #work .wrap{width:calc(100% - 36px)}
  .demo-barbershop #work h2{font-size:30px;margin-bottom:16px}
  .demo-barbershop .gallery{
    display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:150px 105px 105px 110px;
    gap:8px;margin-top:20px!important;
  }
  .demo-barbershop .gallery div{
    width:100%;height:100%;min-height:0;border-radius:11px;
    background-size:cover;background-position:center;background-repeat:no-repeat;
    overflow:hidden;
  }
  .demo-barbershop .gallery .g1{grid-column:1/3;grid-row:1;background-position:center 45%}
  .demo-barbershop .gallery .g2{grid-column:1;grid-row:2}
  .demo-barbershop .gallery .g3{grid-column:2;grid-row:2}
  .demo-barbershop .gallery .g4{grid-column:1;grid-row:3}
  .demo-barbershop .gallery .g5{grid-column:2;grid-row:3}
  .demo-barbershop .gallery .g6{grid-column:1/3;grid-row:4}
}
@media(max-width:430px){
  .demo-page{padding-top:56px}.demo-nav,.demo-nav .wrap{height:56px;min-height:56px}
  .demo-nav .hamb{width:44px;height:44px;min-width:44px}
  .hero-demo,.hero-demo .overlay{min-height:calc(100svh - 56px)}
  .hero-demo .overlay{padding:52px 0 42px}.hero-demo h1{font-size:37px}
  .section{padding:47px 0}
  .demo-barbershop .gallery{grid-template-rows:135px 105px 105px 108px;gap:7px}
  .demo-barbershop #work h2{font-size:28px}
}

/* Demo-specific theme polish */
.demo-barbershop{--demo-accent:#d6a35b}
.demo-barbershop .demo-nav{background:rgba(16,16,16,.96);border-color:#2b2b2b;color:#fff}
.demo-barbershop .section{background:#101010;color:#eee}
.demo-barbershop .barber-card{background:#181818;border-color:#292929}
.demo-barbershop .muted{color:#aaa}.demo-barbershop .eyebrow{color:#c9a56b}
.demo-barbershop .demo-btn{background:#c9a56b;color:#111}.demo-barbershop .gold{color:#c9a56b}
.demo-barbershop .gallery{display:grid;grid-template-columns:1.3fr .7fr .7fr;grid-template-rows:220px 220px 170px;gap:10px}
.demo-barbershop .gallery div{background-size:cover;background-position:center;border-radius:10px}
.demo-barbershop .g1{grid-row:1/3;background-image:url("https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=1000&q=85")}
.demo-barbershop .g2{background-image:url("https://images.unsplash.com/photo-1599351431202-1e0f0137899a?auto=format&fit=crop&w=800&q=85")}
.demo-barbershop .g3{background-image:url("https://images.unsplash.com/photo-1622286342621-4bd786c2447c?auto=format&fit=crop&w=800&q=85")}
.demo-barbershop .g4{background-image:url("https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?auto=format&fit=crop&w=800&q=85")}
.demo-barbershop .g5{background-image:url("https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=800&q=85")}
.demo-barbershop .g6{grid-column:1/4;background-image:url("g6.jpg");background-position:center}

.demo-restaurant{--demo-accent:#c48a52}
.demo-restaurant .demo-nav{background:rgba(245,240,232,.97)}
.demo-restaurant .demo-btn{background:#6c4b35}
.demo-portfolio .demo-nav{background:rgba(242,244,247,.97)}
.demo-bedrijf .demo-nav{background:rgba(247,245,240,.97)}
@media(max-width:800px){
  .demo-barbershop .gallery{grid-template-rows:150px 105px 105px 110px}
  .demo-barbershop .gallery .g6{grid-column:1/3}
}


/* FINAL DEMO NAVIGATION */
.demo-nav .wrap{position:relative}
.demo-back{
  display:inline-flex;align-items:center;gap:9px;
  min-width:92px;
  color:inherit;font-size:13px;font-weight:800;
  padding:9px 12px;border:1px solid currentColor;border-color:rgba(128,128,128,.28);
  border-radius:10px;background:rgba(255,255,255,.035);
  transition:.2s;
}
.demo-back span{font-size:18px;line-height:1}
.demo-back b{font-size:12px;white-space:nowrap}
.demo-back:hover{transform:translateX(-2px);border-color:rgba(77,163,255,.55);color:inherit}
.demo-nav .links{flex:1}
.menu-back{
  display:block!important;
  margin:0 0 25px!important;
  padding:12px 14px!important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  font:700 15px/1.2 "DM Sans",Arial,sans-serif!important;
  color:#dce5ee!important;
}
.menu-back span{margin-right:7px;color:#4da3ff}
.demo-page.demo-barbershop .demo-actions .demo-btn[style*="transparent"]{
  color:#fff!important;
}
@media(max-width:800px){
  .demo-nav .wrap{width:calc(100% - 24px)!important}
  .demo-back{display:none!important}
  .demo-nav .logo{margin-right:auto}
  .demo-nav .hamb{display:flex!important;margin-left:auto!important}
  .menu-panel{padding:82px 20px 35px!important}
  .menu-panel .hamb{top:14px!important;right:18px!important}
  .menu-panel a:not(.menu-back){font-size:26px!important;margin:9px 0!important;padding:11px 0!important}
}


/* FINAL MOBILE PORTFOLIO PHOTO FIX */
@media(max-width:800px){
  .demo-portfolio .hero-demo .grid2{grid-template-columns:1fr!important;gap:28px!important}
  .demo-portfolio .profile{width:min(100%,320px)!important;height:360px!important;max-width:320px!important;justify-self:center!important;margin:0 auto!important;background-position:center 20%!important}
}
@media(max-width:430px){
  .demo-portfolio .profile{width:100%!important;max-width:290px!important;height:340px!important}
}