:root{
      --bg:#07080b;
      --panel: #111214;
      --panel-2:#0b0d12;
      --text:#eef2ff;
      --muted: rgba(238,242,255,.72);
      --muted-2: rgba(238,242,255,.55);
      --line: rgba(238,242,255,.10);
      --line-2: rgba(238,242,255,.16);
      --accent:#c9a227;
      --accent-2:#f2d27b;
      --shadow: 0 18px 50px rgba(0,0,0,.55);
      --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
      --radius: 22px;
      --radius-sm: 16px;
      --max: 1160px;
      --header-h: 114px;
      --ease: cubic-bezier(.2,.85,.2,1);

      --font-display: "Playfair Display", ui-serif, Georgia, serif;
      --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: var(--font-sans);
      background: radial-gradient(900px 500px at 10% 0%, rgba(201,162,39,.15), transparent 60%),
                  radial-gradient(900px 500px at 100% 10%, rgba(242,210,123,.10), transparent 55%),
                  var(--bg);
      color:var(--text);
      line-height:1.55;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}

    .container{width: min(100% - 36px, var(--max)); margin:0 auto}

    /* Header */
    header{
      position: sticky;
      top:0;
      z-index: 999;
      height: var(--header-h);
      backdrop-filter: blur(14px);
      background: rgba(7,8,11,.64);
      border-bottom: 1px solid var(--line);
    }

    .nav{
      height: 100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 180px;
      margin-left: 50px;
    }

.logo {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 50px;
}

.logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}


    nav ul{
      list-style:none;
      padding:0;
      margin:0;
      display:none;
      align-items:center;
      gap: 8px;
    }

    .navlink{
      position:relative;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid transparent;
      color: rgba(238,242,255,.85);
      font-size: 15px;
      letter-spacing:.02em;
      transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
      user-select:none;
    }

    .navlink:hover{
      background: rgba(255,255,255,.05);
      border-color: var(--line);
      transform: translateY(-1px);
      color: rgba(238,242,255,.95);
    }

    .navlink.active{
      background: linear-gradient(180deg, rgba(201,162,39,.18), rgba(201,162,39,.06));
      border-color: rgba(201,162,39,.35);
      color: rgba(242,210,123,.96);
      box-shadow: 0 10px 24px rgba(0,0,0,.25);
    }

    .navlink.active::after{
      content:"";
      position:absolute;
      left: 12px;
      right: 12px;
      bottom: 6px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(242,210,123,.0), rgba(242,210,123,.9), rgba(242,210,123,.0));
      opacity: .8;
    }

    .nav-actions{display:flex; align-items:center; gap:10px}

    .btn{
      border: 1px solid rgba(201,162,39,.34);
      background: linear-gradient(180deg, rgba(201,162,39,.22), rgba(201,162,39,.08));
      color: rgba(242,210,123,.96);
      padding: 10px 12px;
      border-radius: 16px;
      font-size: 15px;
      letter-spacing:.02em;
      display:inline-flex;
      align-items:center;
      gap:10px;
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
      transition: transform .2s var(--ease), filter .2s var(--ease), border-color .2s var(--ease);
      user-select:none;
    }
    .btn:hover{transform: translateY(-1px); filter: brightness(1.07); border-color: rgba(201,162,39,.55)}

    .btn-primary{width:100%}
    .btn-ghost{
      width:100%;
      border-color: var(--line);
      background: rgba(255,255,255,.04);
      color: rgba(238,242,255,.92);
    }

    /* Reviews Google CTA button – match other buttons */
    #reviews .btn-ghost{
      width: auto;
      padding: 10px 14px;
      border-radius: 16px;
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
      border: 1px solid rgba(201,162,39,.34);
      background: linear-gradient(180deg, rgba(201,162,39,.22), rgba(201,162,39,.08));
      color: rgba(242,210,123,.96);
    }

    .hamburger{
      width: 44px;
      height: 44px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
    }

    .hamburger:hover{transform: translateY(-1px); border-color: var(--line-2)}

    .hamburger .bars{width: 18px; height: 12px; position:relative}
    .hamburger .bars span{
      position:absolute;
      left:0;
      right:0;
      height:2px;
      border-radius:999px;
      background: rgba(238,242,255,.88);
      transition: transform .25s var(--ease), top .25s var(--ease), opacity .2s var(--ease);
    }
    .hamburger .bars span:nth-child(1){top:0}
    .hamburger .bars span:nth-child(2){top:5px; opacity:.8}
    .hamburger .bars span:nth-child(3){top:10px; opacity:.65}

    .hamburger.is-open .bars span:nth-child(1){top:5px; transform: rotate(45deg)}
    .hamburger.is-open .bars span:nth-child(2){opacity:0}
    .hamburger.is-open .bars span:nth-child(3){top:5px; transform: rotate(-45deg); opacity:.9}

    .mobile-drawer{
      position: fixed;
      inset: var(--header-h) 0 auto 0;
      background: rgba(7,8,11,1);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--line);
      transform: translateY(-8px);
      opacity: 0;
      pointer-events:none;
      transition: opacity .22s var(--ease), transform .22s var(--ease);
    }

    .mobile-drawer.open{opacity:1; transform: translateY(0); pointer-events:auto}
    .mobile-drawer .container{padding: 14px 0 18px}

    .mobile-links{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }

    .mobile-links a{
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      font-size: 13px;
      color: rgba(238,242,255,.90);
    }

    /* Sections */
    section{scroll-margin-top: calc(var(--header-h) + 16px)}

/* Section background rhythm */
#why{background: var(--bg)}
#about{background: var(--panel)}
#services{background: var(--bg)}
#reviews{background: var(--panel)}
#faq{background: var(--bg)}
#gallery{background: var(--panel)}
#contact{background: var(--bg)}

    .section{padding: 70px 0}

    .section-head{
      display:flex;
      flex-direction:column;
      gap: 10px;
      margin-bottom: 22px;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      color: rgba(242,210,123,.9);
      letter-spacing:.18em;
      text-transform:uppercase;
      font-size: 14px;
    }

    .kicker .dot{
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: rgba(242,210,123,.9);
      box-shadow: 0 0 0 6px rgba(201,162,39,.12);
    }

    h1,h2,h3{margin:0}
    h1{
      font-family: var(--font-display);
      letter-spacing: .01em;
      font-weight: 700;
      font-size: clamp(30px, 6vw, 54px);
      line-height: 1.05;
      text-align:center;
    }
    h2{
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing:.01em;
      font-size: clamp(26px, 4.8vw, 38px);
      line-height: 1.12;
    }
    h3{
      font-weight: 650;
      letter-spacing:.01em;
      font-size: 16px;
    }

    p{margin:0; color: var(--muted)}

    .pill{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      color: rgba(238,242,255,.86);
      font-size: 13px;
      width: fit-content;
    }

    /* Hero */
    .hero{
      min-height: 100svh;
      padding: 0;
      position: relative;
      display:flex;
      align-items:flex-start;
    }

  .hero-bg{
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(7,8,11,0.45),
      rgba(7,8,11,0.85)
    ),
    url("images/hero2.webp");

  background-size: cover;
  background-position: center;
}

    .hero::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height: 120px;
      background: linear-gradient(180deg, transparent, var(--bg));
      pointer-events:none;
    }

    .hero-inner{
      position:relative;
      width:100vw;
      max-width:none;
      margin:0;
      display:grid;
      gap: 20px;
      padding-top: calc(var(--header-h) + 50px);
      padding-bottom: 42px;
      text-align:center;
    }

    .hero .kicker{
      width:100%;
      justify-content:center;
      margin: 0 auto 6px;
      text-align:center;
    }

    .hero-cta{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap: 30px;
      margin-top: 18px;
    }

    /* Why choose us */
    #why .section-head{align-items:center; text-align:center}
    #why .kicker{justify-content:center}

    .grid-2x2{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 16px;
    }

    .card{
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }

    .card::before{
      content:"";
      position:absolute;
      inset: -80px -80px auto auto;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle at 30% 30%, rgba(242,210,123,.18), transparent 62%);
      transform: rotate(18deg);
      pointer-events:none;
    }

    .card-top{display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; margin-bottom: 10px}

    .icon-badge{
      width: 44px;
      height: 44px;
      border-radius: 16px;
      border: 1px solid rgba(201,162,39,.30);
      background: linear-gradient(180deg, rgba(201,162,39,.22), rgba(201,162,39,.06));
      display:grid;
      place-items:center;
      flex: 0 0 auto;
    }

    .icon-badge svg{opacity:.95}
    .card p{font-size: 15px; color: rgba(238,242,255,.72)}

    /* About */
    #about .section-head{align-items:center; text-align:center}
    #about .kicker{justify-content:center}

    .about-layout{
      display:grid;
      gap: 16px;
      margin-top: 22px;
    }

    .about-left{
      display:flex;
      align-items:flex-start;
    }

    .about-box{
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
      border-radius: var(--radius);
      padding: 20px;
      box-shadow: var(--shadow-soft);
    }

    .about-box p{
      color: rgba(238,242,255,.75);
      font-size: 15px;
      line-height: 1.65;
    }

    .about-right{display:flex}

.about-photo{
  width: 100%;
  height: 550px;
  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      rgba(7,8,11,.35),
      rgba(7,8,11,.65)
    ),
    url("images/about2.webp");

  background-size: cover;
  background-position: center 15%;
  background-repeat: no-repeat;
}

    @media (min-width: 880px){
      .about-layout{grid-template-columns: 1fr 1fr; align-items:center}
    }

    /* Services */
    #services .section-head{align-items:center; text-align:center}
    #services .kicker{justify-content:center; text-align:center}

    .tabs{display:flex; gap: 8px; flex-wrap: wrap; margin: 14px 80px 14px}

    .tab{
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      color: rgba(238,242,255,.82);
      padding: 10px 12px;
      border-radius: 999px;
      font-size: 15px;
      cursor:pointer;
      user-select:none;
      transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
    }

    .tab:hover{transform: translateY(-1px); border-color: var(--line-2)}

    .tab.active{
      border-color: rgba(201,162,39,.45);
      background: linear-gradient(180deg, rgba(201,162,39,.22), rgba(201,162,39,.06));
      color: rgba(242,210,123,.95);
    }

    .services-table{
      margin-left:80px;
      margin-right:80px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow-soft);
    }

    table{width:100%; border-collapse:collapse}
    th, td{padding: 14px 14px; text-align:left; vertical-align:top}
    th{
      font-size: 12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color: rgba(238,242,255,.60);
      background: rgba(0,0,0,.18);
      border-bottom: 1px solid var(--line);
    }
    tr + tr td{border-top: 1px solid var(--line)}
    td .svc{display:flex; flex-direction:column; gap: 4px}
    td .svc strong{font-size: 17px; color: rgba(238,242,255,.92)}
    td .svc span{font-size: 15px; color: rgba(238,242,255,.62)}
    td.price{white-space:nowrap; font-weight: 700; color: rgba(242,210,123,.92)}

    .services-foot{margin-top: 30px; display:flex; flex-direction:column; gap: 10px; align-items:center}

    /* Barbers */
    #barbers .section-head{align-items:center; text-align:center}
    #barbers .kicker{justify-content:center}

    .barbers{display:grid; gap: 14px; grid-template-columns: 1fr}

    .barber-card{
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow-soft);
      max-width: 360px;
      margin: 0 auto;
    }

.barber-photo {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

    .barber-photo.adil{
  background-image: url("images/adil.webp");
  background-position: center 20%;
}

.barber-photo.marco{
  background-image: url("images/marco.webp");
  background-position: center 20%;
}

    .barber-body{padding: 16px}
    .barber-body h3{font-size: 18px}
    .barber-body p{font-size: 15px; margin-top: 6px; color: rgba(238,242,255,.70)}

    /* Reviews */
    #reviews .section-head{align-items:center; text-align:center}
    #reviews .kicker{justify-content:center}

    .rating-row{display:flex; align-items:center; justify-content:center; gap: 12px; margin: 10px 0 18px; flex-wrap: wrap}

    .stars{display:inline-flex; gap:4px}
    .star{width: 14px; height:14px; opacity:.95}

    .carousel{
      margin-left:80px;
      margin-right:80px;

      position:relative;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      overflow:hidden;
    }

    .carousel-head{display:flex; justify-content:space-between; align-items:center; padding: 12px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.14)}
    .carousel-controls{display:flex; gap: 8px}

    .iconbtn{
      width: 44px;
      height: 44px;
      border-radius: 16px;
      border: 1px solid rgba(201,162,39,.34);
      background: linear-gradient(180deg, rgba(201,162,39,.22), rgba(201,162,39,.08));
      color: rgba(242,210,123,.96);
      display:grid;
      place-items:center;
      cursor:pointer;
      box-shadow: 0 14px 34px rgba(0,0,0,.35);
      transition: transform .2s var(--ease), filter .2s var(--ease), border-color .2s var(--ease);
    }

    .iconbtn:hover{
      transform: translateY(-1px);
      filter: brightness(1.07);
      border-color: rgba(201,162,39,.55);
    }

    .iconbtn:hover{transform: translateY(-1px); border-color: var(--line-2)}
    .carousel-viewport{overflow:hidden}

    .track{display:flex; transition: transform .55s var(--ease); will-change: transform}

    .review{flex: 0 0 100%; padding: 16px; border-right: 1px solid var(--line)}
    .review:last-child{border-right:none}

    .review .quote{font-size: 15px; color: rgba(238,242,255,.74); margin-bottom: 10px; min-height: 70px}

    .review .meta{display:flex; justify-content:space-between; align-items:center; gap: 10px}
    .review .name{font-size: 13px; color: rgba(238,242,255,.92); font-weight: 650}

    /* CTA image break */
    .cta-break{position:relative; overflow:hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line)}

    .cta-bg{
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(7,8,11,.40), rgba(7,8,11,.85)),
        url("images/background.webp");
      background-size:cover;
      background-position:center;
    }

    .cta-inner{position:relative; padding: 64px 0; text-align:center}

/* CTA kicker tweak */
.cta-break .kicker{margin-top:-10px; justify-content:center; text-align:center; width:100%;}

.cta-break h2,
.cta-break p{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* Center CTA button */
.cta-break .btn-primary{
  display:inline-flex;
  justify-content:center;
  margin: 0 auto;
  width: fit-content;
}

    .cta-card{
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border-radius: var(--radius);
      padding: 22px;
      box-shadow: var(--shadow);
      max-width: 720px;
    }

    .cta-card h2{font-size: clamp(26px, 5.5vw, 40px)}
    .cta-card p{margin-top: 8px; color: rgba(238,242,255,.75)}

    /* FAQ */
#faq .section-head{align-items:center; text-align:center}
#faq .kicker{justify-content:center; text-align:center}
    .faq{
      margin-left:80px;
      margin-right:80px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow-soft);
    }

    .faq-item + .faq-item{border-top: 1px solid var(--line)}

    .faq-q{
      width:100%;
      padding: 16px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 12px;
      background: transparent;
      border:0;
      color: rgba(238,242,255,.92);
      cursor:pointer;
      font: inherit;
      text-align:left;
    }

    .faq-q span{font-weight: 650}

    .chev{
      width: 34px;
      height: 34px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      display:grid;
      place-items:center;
      flex: 0 0 auto;
      transition: transform .25s var(--ease), border-color .2s var(--ease);
    }

    .faq-item.open .chev{transform: rotate(180deg); border-color: rgba(201,162,39,.35)}

    .faq-a{max-height: 0; overflow:hidden; transition: max-height .35s var(--ease)}
    .faq-a .inner{padding: 0 16px 16px; color: rgba(238,242,255,.70); font-size: 15px}

    /* Gallery */
#gallery .section-head{align-items:center; text-align:center}
#gallery .kicker{justify-content:center}
    .gallery{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}

   .gimg{
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow:hidden;
  position:relative;
}



#gallery .gimg:nth-child(1){
  background-image: url("images/cutting.webp");
}

#gallery .gimg:nth-child(2){
  background-image: url("images/scissors.webp");
}

#gallery .gimg:nth-child(3){
  background-image: url("images/products.webp");
}





    

    .gimg span{position:absolute; left: 12px; bottom: 12px; font-size: 12px; color: rgba(238,242,255,.62); letter-spacing:.08em; text-transform:uppercase; z-index:1}

    /* Contact */
#contact .section-head{align-items:center; text-align:center}
#contact .kicker{justify-content:center; text-align:center; width:100%}
    .contact{display:grid; gap: 14px}

    .contact-card{
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      overflow:hidden;
    }

    .contact-left{padding: 18px}

    .contact-title{display:flex; flex-direction:column; gap: 4px; margin-bottom: 12px}
    .contact-title strong{font-family: var(--font-display); font-size: 21px}
    .contact-title small{color: rgba(238,242,255,.65); letter-spacing:.12em; text-transform:uppercase; font-size: 14px}

    .info{display:grid; gap: 10px; font-size: 17px; color: rgba(238,242,255,.76)}
    .info-row{display:flex; gap: 10px; align-items:flex-start}
    .info-row svg{opacity:.85; flex: 0 0 auto; margin-top: 2px}

    .socials{display:flex; gap: 10px; margin-top: 12px}

    .social{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      font-size: 13px;
      color: rgba(238,242,255,.85);
    }

    .map{
      border-top: 1px solid var(--line);
      background: rgba(0,0,0,.18);
      aspect-ratio: 16/10;
      display:grid;
      place-items:center;
      color: rgba(238,242,255,.60);
      font-size: 12px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .map{
  padding-left: 90px;
  box-sizing: border-box;
}

.map iframe{
  width: 100%;
  height: 100%;
}

    /* Footer */
    footer{padding: 26px 0 40px; border-top: 1px solid var(--line); background: rgba(0,0,0,.12)}

    .foot{display:flex; justify-content:space-between; align-items:center; gap: 16px; flex-wrap: wrap}
    .foot .line{color: rgba(238,242,255,.62); font-size: 13px}

    header .btn {
  font-size: 15px;
}

footer {
  padding: 32px 0;
  border-top: 1px solid var(--line);
}

footer .foot {
  display: flex;
  justify-content: center;
}

footer .line {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(238,242,255,0.6);
  max-width: 520px;
}

.star {
  color: #D4AF37; /* klasyczne złoto */
}

.stars {
  color: #D4AF37; /* klasyczne złoto */
}


    /* Desktop enhancements */
    @media (min-width: 880px){
      nav ul{display:flex}
      .hamburger{display:none}
      .mobile-drawer{display:none}

      /* Hero buttons: keep your last requested behavior */
      .hero-cta{transform: translateX(-20px);}
      .hero-cta{flex-direction:row; justify-content:center; gap:30px;}
      .hero-cta .btn-ghost{margin-left:30px;}
      .btn-primary, .btn-ghost{width:auto}

      .grid-2x2{grid-template-columns: 1fr 1fr}
      .barbers{
  grid-template-columns: minmax(0, 420px) minmax(0, 420px);
  justify-content: center;
  gap: 12px;
}
      .review{flex-basis: 25%}

      
      .gimg{min-height: 160px}
      .gimg.tall{grid-row: span 2}
      .gimg.wide{grid-column: span 2}

      .contact{grid-template-columns: 1fr 1fr}
      .contact-card{display:grid; grid-template-columns: .95fr 1.05fr}
      .map{border-top:0; border-left: 1px solid var(--line); aspect-ratio: auto; min-height: 320px}
    }

    .gallery{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.gimg{
  aspect-ratio: 4 / 3; /* albo 3 / 2 jeśli chcesz bardziej filmowo */
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  position:relative;
}

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

    /* =========================
   FLOATING BUTTONS LOGIC
   ========================= */

/* Call button – domyślnie UKRYTY (desktop + tablet) */
.call-button-mobile {
  display: none;
}



/* Call button – widoczny TYLKO na mobile */
@media (max-width: 879px) {
  .call-button-mobile {
    display: block;
  }
}



@media (max-width: 879px) {
  .hero-bg{
    background:
      linear-gradient(
        180deg,
        rgba(7,8,11,0.55),
        rgba(7,8,11,0.9)
      ),
      url("images/mobile.webp");

    background-size: 110%;
    background-position: center top;
    background-repeat: no-repeat;
  }
}


@media (max-width: 879px){
  .btn-primary,
  .btn-ghost{
    width: fit-content;
  }
}

@media (max-width: 879px){
  .hero-inner{
    transform: translateY(-50px);
  }
}

@media (max-width: 879px){

  .card-top{
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .card p{
    text-align: center;
  }

}

@media (max-width: 879px){
  .about-box{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .about-box p{
    max-width: 320px;
    margin: 0 auto 14px;
  }
}

/* SERVICES tabs – mobile: 1 linia + poziomy scroll */
@media (max-width: 879px){
  .tabs{
    margin: 14px 0 14px;         /* usuwa te 80px po bokach */
    justify-content: center; /* start, bo i tak przewijasz w bok */
    flex-wrap: nowrap;           /* klucz: bez łamania */
    overflow-x: auto;            /* klucz: scroll w poziomie */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 0 12px;             /* “oddech” przy krawędzi */
  }

  .tabs .tab{
    flex: 0 0 auto;              /* nie ściska się do zera */
    white-space: nowrap;         /* tekst w środku też bez łamania */
    padding: 9px 10px;           /* trochę ciaśniej na mobile */
    font-size: 14px;
  }

  /* opcjonalnie: schowaj pasek scrolla (estetyka) */
  .tabs::-webkit-scrollbar{ height: 0; }
}

/* CONTACT – mobile center layout */
@media (max-width: 879px){

  /* cała lewa kolumna */
  .contact-left{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* tytuł */
  .contact-title{
    align-items: center;
    text-align: center;
  }

  /* info (phone / location / hours) */
  .info{
    align-items: center;
    text-align: center;
  }

  .info-row{
    justify-content: center;
    text-align: center;
  }

  .info-row svg{
    margin-top: 0;
  }

  /* socials */
  .socials{
    justify-content: center;
  }

}

/* CONTACT – center map on mobile */
@media (max-width: 879px){

  .map{
    padding-left: 0;              /* KLUCZ */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }

  .map iframe{
    width: 100%;
    max-width: 100%;
  }

}

/* ===============================
   MOBILE FIX – FULL WIDTH CARDS
   =============================== */
@media (max-width: 879px) {

  /* SERVICES */
  .tabs{
    margin-left: 0;
    margin-right: 0;
  }

  .services-table{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

  /* REVIEWS */
  .carousel{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

  #reviews .btn-ghost{
    margin-left: 0;
    margin-right: 0;
  }

  /* FAQ */
  .faq{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

}

#reviews .btn-ghost{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== HEADER LAYOUT FIX (no magic margins) ===== */

header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Left: logo */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  flex: 0 0 auto;
}

/* Center: menu area */
header nav{
  flex: 1;
  display:flex;
  justify-content:center;
}

/* The menu list */
header nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Right: CTA + hamburger */
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}


/* ===== BREAKPOINT: tablet gets hamburger ===== */

/* default: mobile -> hamburger */
header nav ul{ display:none; }
.hamburger{ display:grid; }

/* desktop: show full menu */
@media (min-width: 1100px){
  header nav ul{ display:flex; }
  .hamburger{ display:none; }
}

@media (max-width: 879px) {
  .nav{
    padding-left: 14px; /* ile chcesz od krawędzi */
  }

  .brand{
    margin: 0;
  }

  .logo{
    margin: 0;
  }
}