:root{
      /* Calm, classic palette */
      --bg:#F6F3EE;          /* warm off-white */
      --panel:#FFFFFF;
      --ink:#111214;         /* near-black */
      --muted:#5B5F66;
      --bg-alt: #EFEDE8;
      --line:#E3DDD3;        /* warm border */
      --shadow: 0 14px 40px rgba(17,18,20,.08);
      --gold:#B08D57;        /* muted gold */
      --gold-2:#D8BF8A;
      --focus: 0 0 0 3px rgba(176,141,87,.25);

      --radius: 18px;
      --radius-sm: 12px;

      --max: 1160px;
      --pad: 18px;

      --serif: "Playfair Display", serif;
      --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--ink);
      background: radial-gradient(1200px 800px at 20% -10%, rgba(176,141,87,.10), transparent 60%),
                  radial-gradient(1000px 700px at 85% 10%, rgba(17,18,20,.06), transparent 55%),
                  var(--bg);
      line-height:1.55;
    }

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

    .container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

    .skip{
      position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
    }
    .skip:focus{
      left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
      background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
      outline:none;
      z-index:9999;
    }

    /* -----------------------------
       Global UI
    ----------------------------- */
    .kicker{
      font-size:12px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:rgba(17,18,20,.70);
    }
    h1, h2, h3{ margin:0 0 10px; }
    h1, h2{
      font-family:var(--serif);
      letter-spacing:-.02em;
    }
    h1{ font-size: clamp(32px, 5vw, 52px); line-height:1.08; }
    h2{ font-size: clamp(24px, 3.2vw, 38px); line-height:1.15; }
    h3{ font-size: 16px; letter-spacing:.02em; }
    p{ margin:0 0 12px; color:rgba(17,18,20,.78); }

    .section{
      padding-top: 56px;
      padding-bottom: 5px;
    }
    .section--tight{ padding: 42px 0; }
    .section-header{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-bottom: 22px;
      align-items:center;
      text-align:center;
    }
    .section-header p{ max-width: 100ch; margin-left:auto; margin-right:auto; }
    .section-header p{ max-width: 100ch; }

    .card{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow: var(--shadow);
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border-radius:999px;
      padding: 12px 16px;
      border:1px solid var(--line);
      background: transparent;
      color:var(--ink);
      cursor:pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      user-select:none;
    }
    .btn:focus{ outline:none; box-shadow: var(--focus); }
    .btn:hover{ transform: translateY(-1px); background: rgba(176,141,87,.08); border-color: rgba(176,141,87,.35); }

    .btn--primary{
      background: linear-gradient(180deg, rgba(176,141,87,.16), rgba(176,141,87,.08));
      border-color: rgba(176,141,87,.45);
    }
    .btn--primary:hover{ background: linear-gradient(180deg, rgba(176,141,87,.22), rgba(176,141,87,.10)); }

    .btn--dark{
      background: var(--ink);
      color:#fff;
      border-color: rgba(17,18,20,.15);
    }
    .btn--dark:hover{ background: #0D0E10; border-color: rgba(176,141,87,.40); }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.70);
      color: rgba(17,18,20,.85);
      font-size:13px;
    }

    .grid{ display:grid; gap:14px; }

    .divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(17,18,20,.18), transparent);
      margin: 12px 0;
    }

    .icon{
      width:18px;
      height:18px;
      flex:0 0 18px;
      color: rgba(17,18,20,.85);
    }

    .muted{ color: rgba(17,18,20,.70); }

    /* -----------------------------
       HEADER
    ----------------------------- */
    /* SECTION START: HEADER */
    header{
      position: sticky;
      top:0;
      z-index: 1000;
      backdrop-filter: blur(10px);
      background: rgba(246,243,238,.70);
      border-bottom: 1px solid rgba(227,221,211,.70);
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 14px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 220px;
    }

    .logo{
      width:42px;
      height:42px;
      border-radius:12px;
      border:1px solid rgba(176,141,87,.45);
      background:
        radial-gradient(14px 14px at 30% 30%, rgba(216,191,138,.55), transparent 60%),
        linear-gradient(180deg, rgba(17,18,20,.95), rgba(17,18,20,.86));
      display:grid;
      place-items:center;
      box-shadow: 0 10px 26px rgba(17,18,20,.18);
    }
    .logo span{
      font-family:var(--serif);
      font-weight:700;
      letter-spacing:.04em;
      color: rgba(216,191,138,.92);
      font-size: 14px;
      transform: translateY(-.5px);
    }

    .brand-text strong{
      display:block;
      font-weight:600;
      letter-spacing:.01em;
      font-size: 14px;
      line-height:1.1;
    }
    .brand-text small{
      display:block;
      font-size: 12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color: rgba(17,18,20,.62);
      margin-top:2px;
    }

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

    .hamburger{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.70);
      cursor:pointer;
      transition: background .15s ease, transform .15s ease, border-color .15s ease;
    }

    /* === Hamburger ↔ Close toggle === */
.hamburger.is-open .bars span:nth-child(1){
  transform: rotate(45deg);
  top:5px;
}

.hamburger.is-open .bars span:nth-child(2){
  opacity:0;
}

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

.hamburger .bars span{
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}

    .hamburger:hover{ transform: translateY(-1px); background: rgba(176,141,87,.08); border-color: rgba(176,141,87,.35); }
    .hamburger:focus{ outline:none; box-shadow: var(--focus); }

    .hamburger .bars{ width:18px; height:12px; position:relative; }
    .hamburger .bars span{
      position:absolute; left:0; right:0;
      height:2px;
      border-radius:2px;
      background: rgba(17,18,20,.85);
    }
    .hamburger .bars span:nth-child(1){ top:0; }
    .hamburger .bars span:nth-child(2){ top:5px; opacity:.9; }
    .hamburger .bars span:nth-child(3){ top:10px; }

    /* Mobile drawer */
    .drawer{
      position: fixed;
      inset: 0;
      background: #eeebe7;
      display:none;
      align-items:stretch;
      justify-content:flex-end;
      z-index: 1200;
    }
    .drawer[aria-hidden="false"]{ display:flex; }

 .drawer-panel{
  width: min(84vw, 340px);
  min-height: 100vh;
  border-radius: 24px 0 0 0;
  background: var(--panel);
  border-left:1px solid var(--line);
  box-shadow: 0 18px 70px rgba(17,18,20,.25);

  /* 👇 TO JEST KLUCZ */
  padding-top: 30px;   /* im większe, tym niżej menu */
  padding-inline: 10px;
  padding-bottom: 10px;

  display:flex;
  flex-direction:column;
  gap: 12px;
}
    .drawer-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

 
    

    .mobile-nav{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding: 8px 0 0;
    }

    .m-item{
      border:1px solid var(--line);
      border-radius: var(--radius-sm);
      overflow:hidden;
      background: #EFEDE8;
    }

    .m-trigger{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 12px 12px;
      background: transparent;
      border:0;
      cursor:pointer;
      text-align:left;
    }
    .m-trigger strong{ font-weight:600; font-size:14px; letter-spacing:.01em; }
    .m-trigger .chev{ width:18px; height:18px; transition: transform .18s ease; }
    .m-item[aria-expanded="true"] .m-trigger .chev{ transform: rotate(180deg); }

    .m-sub{
      display:none;
      padding: 0 12px 12px;
      gap:8px;
      flex-direction:column;
    }
    .m-item[aria-expanded="true"] .m-sub{ display:flex; }

    .m-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 10px 12px;
      border:1px solid rgba(227,221,211,.90);
      border-radius: 12px;
      background: #FFFFFF;
      cursor:pointer;
    }
    .m-link:hover{ background: rgba(176,141,87,.10); border-color: rgba(176,141,87,.35); }

    /* Desktop styles */
    @media (min-width: 980px){
      .hamburger{ display:none; }
      .nav-center{ display:flex; align-items:center; justify-content:center; flex:1; }
      .nav-center ul{ list-style:none; margin:0; padding:0; display:flex; gap:10px; align-items:center; }

      .navlink{
        position:relative;
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding: 10px 12px;
        border-radius: 999px;
        border:1px solid transparent;
        color: rgba(17,18,20,.82);
        font-weight:500;
        letter-spacing:.01em;
      }
      .navlink:hover{ background: rgba(176,141,87,.08); border-color: rgba(176,141,87,.25); }
      .navlink:focus{ outline:none; box-shadow: var(--focus); }

      .has-drop{ position:relative; }
      .drop{
        position:absolute;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        top: 44px;
        width: 280px;
        padding: 10px;
        background: rgba(255,255,255,.92);
        border:1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow);
        opacity:0;
        visibility:hidden;
        transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
      }

      /* Slightly wider dropdown for Services so the right descriptions never wrap */
      .drop[aria-label="Services submenu"]{ width: 320px; }
        padding: 10px;
        background: rgba(255,255,255,.92);
        border:1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow);
        opacity:0;
        visibility:hidden;
        transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
      }
      .has-drop:hover .drop,
      .has-drop:focus-within .drop{
        opacity:1;
        visibility:visible;
        transform: translateX(-50%) translateY(0);
      }

      .drop a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding: 10px 12px;
        border-radius: 12px;
        border:1px solid transparent;
        color: rgba(17,18,20,.86);
        font-weight:500;
      }
      .drop a:hover{ background: rgba(176,141,87,.10); border-color: rgba(176,141,87,.25); }
      .drop small{
        color: rgba(17,18,20,.60);
        font-weight:400;
        white-space:nowrap;          /* keep descriptions in one line */
        text-align:right;            /* align to the right column */
        min-width: 120px;            /* consistent right-column width */
      }
    }
    /* SECTION END: HEADER */

    /* -----------------------------
       HERO (Home)
    ----------------------------- */
    /* SECTION START: HOME */
    #home{ padding-top: 28px; }

    .hero{
      display:grid;
      gap:16px;
    }

    .hero-media{
      border-radius: calc(var(--radius) + 2px);
      border:1px solid var(--line);
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(17,18,20,.10), rgba(17,18,20,.02)),
        radial-gradient(600px 280px at 30% 35%, rgba(176,141,87,.22), transparent 60%),
        url("../images/hero.webp") center / cover no-repeat;
  min-height: 260px;
      min-height: 260px;
      position:relative;
    }

    .hero-media .ph{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      padding: 22px;
      text-align:center;
      color: rgba(17,18,20,.62);
    }
    .hero-media .ph strong{ font-family:var(--serif); font-size:18px; color: rgba(17,18,20,.78); }
    .hero-media .ph span{ font-size:13px; }

    .hero-copy{
      padding: 18px;
    }

    .hero-copy .lead{
      font-size: 15px;
      max-width: 60ch;
    }

    .hero-actions{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

    @media (min-width: 980px){
      .hero{
        grid-template-columns: 1.1fr .9fr;
        align-items:stretch;
        gap: 18px;
      }
      .hero-copy{ padding: 26px; }
      .hero-media{ min-height: 440px; }
    }

    /* Home blocks */
    .home-grid-3{
      display:grid;
      gap:14px;
      margin-top: 18px;
    }
    @media (min-width: 860px){
      .home-grid-3{ grid-template-columns: repeat(3, 1fr); }
    }

    .linkblock{
      padding: 16px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: rgba(255,255,255,.75);
      box-shadow: 0 12px 34px rgba(17,18,20,.06);
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .linkblock .top{ display:flex; align-items:center; gap:10px; }
    .linkblock .svgwrap{
      width:40px; height:40px;
      border-radius: 14px;
      border:1px solid rgba(176,141,87,.35);
      background: rgba(176,141,87,.10);
      display:grid; place-items:center;
    }
    .linkblock h3{ font-family:var(--serif); font-weight:600; font-size:18px; margin:0; }
    .linkblock p{ margin:0; }

    .usp{
      display:grid;
      gap:12px;
      margin-top: 14px;
    }
    @media (min-width: 860px){
      .usp{ grid-template-columns: repeat(3, 1fr); }
    }
    .usp .item{
      padding: 16px;
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: rgba(255,255,255,.72);
    }
    .usp .item strong{ display:block; font-size: 14px; letter-spacing:.02em; }
    .usp .item span{ display:block; margin-top:6px; color: rgba(17,18,20,.75); }

    .standards{
      display:grid;
      gap:14px;
      margin-top: 14px;
    }
    @media (min-width: 860px){
      .standards{ grid-template-columns: repeat(4, 1fr); }
    }
    .std{
      padding: 16px;
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: rgba(255,255,255,.80);
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .std .ic{
      width:44px; height:44px;
      border-radius: 16px;
      border:1px solid rgba(176,141,87,.35);
      background: rgba(176,141,87,.10);
      display:grid;
      place-items:center;
    }
    .std h3{ margin:0; font-family:var(--serif); font-size:18px; }

    .rating{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:10px;
      padding: 14px 16px;
      border-radius: 999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.72);
      width: fit-content;
    }
    .stars{ display:inline-flex; gap:4px; }
    .star{ width:16px; height:16px; }

    .cta-banner{
      border-radius: calc(var(--radius) + 2px);
      border:1px solid rgba(227,221,211,.92);
      overflow:hidden;
      position:relative;
      min-height: 220px;
      background:
        linear-gradient(90deg, rgba(17,18,20,.72), rgba(17,18,20,.40)),
        radial-gradient(700px 340px at 70% 40%, rgba(176,141,87,.35), transparent 60%),
        url("../images/cta.webp") center / cover no-repeat;
    }
    .cta-banner .inner{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      gap: 12px;
      padding: 22px;
      color: rgba(255,255,255,.92);
    }
    .cta-banner h3{ font-family: var(--serif); font-size: 26px; margin:0; }
    .cta-banner p{ color: rgba(255,255,255,.80); max-width: 60ch; }
    .cta-banner .btn{ border-color: rgba(216,191,138,.55); }

    .contact-teaser{
      display:grid;
      gap: 14px;
      align-items:stretch;
    }
    @media (min-width: 860px){
      .contact-teaser{ grid-template-columns: 1fr 1fr; }
    }
    .ct-box{ padding: 16px; }

    /* SECTION END: HOME */

    /* -----------------------------
       ABOUT US
    ----------------------------- */
    /* SECTION START: ABOUT US */
    .split{
      display:grid;
      gap:14px;
      align-items:stretch;
    }
    @media (min-width: 980px){
      .split{ grid-template-columns: 1.1fr .9fr; }
    }

    .story{
      padding: 18px;
    }

    .photo-ph{
      border-radius: calc(var(--radius) + 2px);
      border:1px solid var(--line);
      background:
        radial-gradient(600px 280px at 30% 30%, rgba(176,141,87,.22), transparent 60%),
        linear-gradient(180deg, rgba(17,18,20,.10), rgba(17,18,20,.02)),
        #fff;
      min-height: 260px;
      display:grid;
      place-items:center;
      padding: 18px;
      text-align:center;
      color: rgba(17,18,20,.62);
    }

    .about-grid{
      display:grid;
      gap:14px;
      margin-top: 14px;
    }
    @media (min-width: 860px){
      .about-grid{ grid-template-columns: repeat(2, 1fr); }
    }

    .about-box{ padding: 16px; }
    .about-box h3{ font-family:var(--serif); font-size:20px; margin:0 0 6px; }

    .gallery4{
      display:grid;
      gap: 12px;
      margin-top: 14px;
    }
    @media (min-width: 860px){
      .gallery4{ grid-template-columns: repeat(2, 1fr); }
    }
    .gph{
      border-radius: var(--radius);
      border:1px solid var(--line);
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(17,18,20,.08), rgba(17,18,20,.02)),
        radial-gradient(420px 240px at 35% 35%, rgba(176,141,87,.18), transparent 60%),
        #fff;
      min-height: 160px;
      display:grid;
      place-items:center;
      color: rgba(17,18,20,.58);
      font-size:13px;
    }
    /* SECTION END: ABOUT US */

    /* -----------------------------
       SERVICES
    ----------------------------- */
    /* SECTION START: SERVICES */
    .service-grid{
      display:grid;
      gap: 14px;
    }
    @media (min-width: 980px){
      .service-grid{ grid-template-columns: 1fr 1fr; }
    }

    .menu-card{ padding: 16px; }
    .menu-card h3{ font-family:var(--serif); font-size:22px; margin:0 0 10px; }

    .menu-list{ display:grid; gap:10px; }

    .menu-item{
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 10px 12px;
      padding: 12px;
      border-radius: 14px;
      border:1px solid rgba(227,221,211,.90);
      background: rgba(255,255,255,.78);
    }
    .menu-item strong{ font-weight:600; letter-spacing:.01em; }
    .menu-item p{ margin:4px 0 0; font-size:13px; color: rgba(17,18,20,.72); }

    .price{
      align-self:start;
      padding: 8px 10px;
      border-radius: 999px;
      border:1px solid rgba(176,141,87,.35);
      background: rgba(176,141,87,.10);
      font-weight:600;
      font-size: 13px;
      white-space:nowrap;
    }

    .all-services{ margin-top: 14px; }
    .all-services .menu-item{ grid-template-columns: 1fr auto; }

    /* SECTION END: SERVICES */

    /* -----------------------------
       OUR BARBERS
    ----------------------------- */
    /* SECTION START: OUR BARBERS */
    .barbers{
      display:grid;
      gap: 14px;
    }
    @media (min-width: 980px){
      .barbers{ grid-template-columns: repeat(2, 1fr); }
    }

    .barber{
      border-radius: calc(var(--radius) + 2px);
      border:1px solid var(--line);
      overflow:hidden;
      background: rgba(255,255,255,.82);
      box-shadow: 0 16px 42px rgba(17,18,20,.07);
    }
    .barber .img{
      min-height: 230px;
      background:
        radial-gradient(520px 240px at 35% 35%, rgba(176,141,87,.18), transparent 60%),
        linear-gradient(180deg, rgba(17,18,20,.10), rgba(17,18,20,.02)),
        #fff;
      display:grid;
      place-items:center;
      color: rgba(17,18,20,.60);
      font-size: 13px;
      position:relative;
    }
    .barber .info{
      padding: 14px;
      border-top:1px solid rgba(227,221,211,.90);
      background: rgba(246,243,238,.35);
    }
    .barber .info h3{ font-family:var(--serif); font-size:20px; margin:0 0 8px; }
    .meta{
      width:100%;
      border-collapse: separate;
      border-spacing: 0;
      overflow:hidden;
      border-radius: 14px;
      border:1px solid rgba(227,221,211,.92);
      background: rgba(255,255,255,.78);
      margin-bottom: 10px;
    }
    .meta td{
      padding: 10px 12px;
      border-bottom:1px solid rgba(227,221,211,.72);
      vertical-align:top;
      font-size: 13px;
    }
    .meta tr:last-child td{ border-bottom:0; }
    .meta td:first-child{ width: 36%; color: rgba(17,18,20,.62); }

    /* SECTION END: OUR BARBERS */

    /* -----------------------------
       REVIEWS
    ----------------------------- */
    /* SECTION START: REVIEWS */
    .reviews-top{
      display:flex;
      flex-direction:column;
      gap: 12px;
      align-items:center; /* center teaser elements */
    }

    .reviews-top .rating{
      margin-left:auto;
      margin-right:auto; /* center Google rating card */
    }

    .carousel{
      position:relative;
      overflow:hidden;
      border-radius: calc(var(--radius) + 2px);
      border:1px solid var(--line);
      background: rgba(255,255,255,.78);
      box-shadow: 0 16px 46px rgba(17,18,20,.06);
      padding-left: 0px;
      padding-right: 0px;
      margin-left: auto;   /* keep away from page edge */
      margin-right: auto;  /* keep away from page edge */
      width: 100%;
      max-width: calc(var(--max) - 60px); /* never touch outer container */
    }

 

    .carousel-track{
      display:flex;
      transition: transform .35s ease;
      will-change: transform;
    }

    .review-card{
      flex: 0 0 100%;
      padding: 16px;
      border-right:1px solid rgba(227,221,211,.80);
    }
    .review-card:last-child{ border-right:0; }

    .review-card p{ margin: 0 0 10px; color: rgba(17,18,20,.78); }
    .review-foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      font-size: 13px;
      color: rgba(17,18,20,.74);
    }

    .carousel-controls{
      display:flex;
      flex-direction:column; /* dots above arrows */
      gap: 10px;
      align-items:center;
      margin-top: 10px;
    }
    .arrow-row{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:center;
    }

    .iconbtn{
      width:44px;
      height:44px;
      border-radius: 999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.70);
      cursor:pointer;
    }
    .iconbtn:hover{ background: rgba(176,141,87,.10); border-color: rgba(176,141,87,.35); }
    .iconbtn:focus{ outline:none; box-shadow: var(--focus); }

    .dots{
      order:-1; /* ensure dots are above arrows */
 display:flex; gap:6px; flex-wrap:wrap; }
    .dot{
      width: 8px; height: 8px;
      border-radius: 999px;
      border: 1px solid rgba(17,18,20,.20);
      background: transparent;
      cursor:pointer;
    }
    .dot[aria-current="true"]{ background: rgba(176,141,87,.80); border-color: rgba(176,141,87,.80); }

    /* 4 reviews visible from >= 980px */
    @media (min-width: 980px){
      .review-card{ flex: 0 0 33.3333%; }
    }

    .work6{
      display:grid;
      gap: 12px;
      margin-top: 14px;
    }
    @media (min-width: 980px){
      .work6{ grid-template-columns: repeat(3, 1fr); }
    }
    .wph{
      border-radius: var(--radius);
      border:1px solid var(--line);
      overflow:hidden;
      background:
        radial-gradient(520px 240px at 35% 35%, rgba(176,141,87,.18), transparent 60%),
        linear-gradient(180deg, rgba(17,18,20,.08), rgba(17,18,20,.02)),
        #fff;
      min-height: 170px;
      display:grid;
      place-items:center;
      color: rgba(17,18,20,.58);
      font-size:13px;
    }

    /* SECTION END: REVIEWS */

    /* -----------------------------
       CONTACT
    ----------------------------- */
    /* SECTION START: CONTACT */
    .contact-grid{
      display:grid;
      gap: 14px;
      align-items:stretch;
    }
    @media (min-width: 980px){
      .contact-grid{ grid-template-columns: 1fr 1.1fr; }
    }

    .contact-left{ padding: 16px; }
    .contact-left h3{ font-family:var(--serif); font-size:22px; margin:0 0 8px; }

    .kv{
      display:grid;
      gap: 10px;
      margin-top: 10px;
    }
    .kv .row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      padding: 12px;
      border-radius: 14px;
      border:1px solid rgba(227,221,211,.92);
      background: rgba(255,255,255,.78);
    }
    .kv .row span{ color: rgba(17,18,20,.62); font-size: 13px; }
    .kv .row strong{ font-weight:600; font-size: 13px; text-align:right; }

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

    .social{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 10px 12px;
      border-radius: 999px;
      border:1px solid var(--line);
      background: rgba(246,243,238,.45);
    }
    .social:hover{ background: rgba(176,141,87,.10); border-color: rgba(176,141,87,.35); }
    .social svg{ width:18px; height:18px; }

    .map-wrap{
      border-radius: calc(var(--radius) + 2px);
      border:1px solid var(--line);
      overflow:hidden;
      background: #fff;
      min-height: 340px;
    }
    .map-wrap iframe{
      width:100%; height:100%; min-height: 340px; border:0;
    }
    /* SECTION END: CONTACT */

    /* -----------------------------
       FAQ
    ----------------------------- */
    /* SECTION START: FAQ */
    .faq{
      display:grid;
      gap: 10px;
    }

    .faq-item{
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: rgba(255,255,255,.76);
      overflow:hidden;
    }

    .faq-q{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 14px 14px;
      border:0;
      background: transparent;
      cursor:pointer;
      text-align:left;
    }
    .faq-q strong{ font-weight:600; }
    .faq-q .chev{ width:18px; height:18px; transition: transform .18s ease; }
    .faq-item[aria-expanded="true"] .faq-q .chev{ transform: rotate(180deg); }

    .faq-a{
      padding: 0 14px 14px;
      display:none;
      color: rgba(17,18,20,.76);
    }
    .faq-item[aria-expanded="true"] .faq-a{ display:block; }
    /* SECTION END: FAQ */

    /* -----------------------------
       FOOTER
    ----------------------------- */
    /* SECTION START: FOOTER */
    footer{
      padding: 40px 0;
      border-top: 1px solid rgba(227,221,211,.90);
      background: rgba(255,255,255,.55);
    }

    .footer-grid{
      display:grid;
      gap: 16px;
    }
    @media (min-width: 980px){
      .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr 1fr; }
    }

    .fcol{
      padding: 16px;
      border-radius: var(--radius);
      border:1px solid rgba(227,221,211,.85);
      background: rgba(246,243,238,.45);
    }

    .fcol h3{ font-family:var(--serif); font-size:18px; margin:0 0 10px; }
    .fnav{ display:grid; gap:8px; }

    .fnav a{
      display:inline-flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      border:1px solid rgba(227,221,211,.92);
      background: rgba(255,255,255,.70);
    }
    .fnav a:hover{ background: rgba(176,141,87,.10); border-color: rgba(176,141,87,.35); }

    .fmeta{ display:grid; gap:10px; font-size:13px; color: rgba(17,18,20,.78); }

    .copyright{
      margin-top: 16px;
      font-size: 12px;
      color: rgba(17,18,20,.60);
      text-align:center;
    }

    /* Location modal */
    .modal{
      position:fixed;
      inset:0;
      background: rgba(17,18,20,.42);
      display:none;
      align-items:center;
      justify-content:center;
      padding: 18px;
      z-index: 1400;
    }
    .modal[aria-hidden="false"]{ display:flex; }
    .modal-card{
      width:min(980px, 96vw);
      background: var(--panel);
      border:1px solid var(--line);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: 0 18px 70px rgba(17,18,20,.25);
    }
    .modal-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 12px 14px;
      border-bottom:1px solid rgba(227,221,211,.90);
      background: rgba(246,243,238,.45);
    }
    .modal-top strong{ font-weight:600; }
    .modal-top button{ width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer; }
    .modal-top button:focus{ outline:none; box-shadow: var(--focus); }

    .modal-body iframe{ width:100%; height: 62vh; min-height: 420px; border:0; }

    .modal-top button{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;                 /* 🔴 WAŻNE */
}

.modal-top button svg{
  width:18px;
  height:18px;
  display:block;
}

    /* SECTION END: FOOTER */

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
      .btn, .hamburger, .iconbtn, .carousel-track, .faq-q .chev, .m-trigger .chev{ transition:none !important; }
    }
  
/* === FIX: submenu descriptions alignment === */
.submenu-list{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;row-gap:18px;}
.submenu-item{display:contents;}
.submenu-title{white-space:nowrap;font-weight:500;}
.submenu-desc{white-space:nowrap;justify-self:start;color:#777;font-size:.95rem;}

/* === Gallery layout: 4 images, 2x2 === */
.gallery{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
@media (max-width: 768px){ .gallery{ grid-template-columns: 1fr; } }

/* === Gallery About: show exactly 4 items === */
.gallery > :nth-child(n+5){ display:none; }



.logo-img{
  height: 65px;          /* główna kontrola rozmiaru */
  width: auto;           /* zachowuje proporcje */
  display: block;
  object-fit: contain;
}


.logo-imf{
  height: 65px;          /* główna kontrola rozmiaru */
  width: auto;           /* zachowuje proporcje */
  display: block;
  object-fit: contain;
}

/* === Services: Book appointment CTA === */
.service-cta{
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.service-cta-card{
  max-width: 520px;
  width: 100%;
  padding: 22px;
  text-align: center;
  background: rgba(255,255,255,.82);
}

.service-cta-card h3{
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 6px;
}

.service-cta-card p{
  font-size: 14px;
  color: rgba(17,18,20,.72);
  margin: 0 0 14px;
}

/* === Meet Our Team – CTA === */
.team-cta{
  margin-bottom: 40px;
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.btn-team{
  padding: 13px 18px;
}

.bg-alt{
  background: #EFEDE8;
  padding: 56px 0;
  margin: 56px 0;
}


.studio-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.studio-image {
  min-height: 320px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(17,18,20,.18), rgba(17,18,20,.05)),
    url("../images/studio.webp") center / cover no-repeat;
}

@media (max-width: 900px) {
  .studio-grid {
    grid-template-columns: 1fr;
  }

  .studio-image {
    min-height: 220px;
  }
}

#openLocation{
  border: 1.5px solid rgba(176,141,87,.55);
  background: rgba(176,141,87,.06);
  box-shadow: inset 0 0 0 1px rgba(176,141,87,.25);
}

.rating + .btn-team {
  margin-top: 16px;
}

/* === mobile ===*/
@media (max-width: 768px) {
  .studio-image {
    background:
      linear-gradient(
        180deg,
        rgba(17,18,20,.18),
        rgba(17,18,20,.05)
      ),
      url("../images/salonmobile.webp");

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    aspect-ratio: 3 / 4;
    min-height: 420px;   /* 🔥 KLUCZ */
    width: 100%;
  }
}

/* === tablet/small alptop ===*/
@media (max-width: 1024px) {
  .cta-banner{
    background-position: center 65%;
  }
}

@media (max-width: 768px){
  .cta-banner{
    background:
      linear-gradient(180deg, rgba(17,18,20,.78), rgba(17,18,20,.55)),
      url("../images/ctamobile.webp") center / cover no-repeat;

    min-height: 400px;
    background-position: center 60%;
  }
}

/* === desktop ===*/
@media (min-width: 980px) {
  .cta-banner{
    min-height: 360px;
    background-size: 115%;
    background-position: center 60%;
  }
}

/* =========================
   CTA buttons – ONLY CTA section
   ========================= */

.cta-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:18px;
}

/* Primary CTA */
.cta-btn--primary{
  background: linear-gradient(
    180deg,
    rgba(216,191,138,.95),
    rgba(176,141,87,.95)
  );
  color:#111214;
  border:none;
  font-weight:600;
  padding:14px 22px;
  box-shadow:
    0 10px 28px rgba(17,18,20,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.cta-btn--primary:hover{
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 14px 36px rgba(17,18,20,.45),
    inset 0 1px 0 rgba(255,255,255,.45);
}

/* Secondary CTA */
.cta-btn--secondary{
  background: rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.45);
  padding:13px 20px;
  backdrop-filter: blur(2px);
}

.cta-btn--secondary:hover{
  background: rgba(255,255,255,.22);
  border-color: rgba(216,191,138,.65);
  transform: translateY(-1px);
}

/* Mobile: stack buttons */
@media (max-width: 480px){
  .cta-actions{
    flex-direction:column;
  }
  .cta-btn{
    width:100%;
    justify-content:center;
  }
}

/* === Reviews section: stronger CTA (local only) === */
.reviews-cta{
  margin-top: 18px;
  padding: 13px 22px;
  font-weight: 600;
  letter-spacing: .02em;

  background: linear-gradient(
    180deg,
    rgba(176,141,87,.28),
    rgba(176,141,87,.16)
  );

  border-color: rgba(176,141,87,.65);
  box-shadow:
    0 10px 26px rgba(17,18,20,.12),
    inset 0 0 0 1px rgba(216,191,138,.35);

  color: #111214;
}

.reviews-cta:hover{
  background: linear-gradient(
    180deg,
    rgba(176,141,87,.38),
    rgba(176,141,87,.22)
  );

  transform: translateY(-1px);
  box-shadow:
    0 14px 34px rgba(17,18,20,.18),
    inset 0 0 0 1px rgba(216,191,138,.55);
}

.about-image{
  border-radius: calc(var(--radius) + 2px);
  border:1px solid var(--line);
  overflow:hidden;

  background:
    linear-gradient(180deg, rgba(17,18,20,.18), rgba(17,18,20,.05)),
    url("../images/team.webp") center / cover no-repeat;

  min-height: 320px;
}

@media (max-width: 768px){
  .about-image{
    background:
      linear-gradient(180deg, rgba(17,18,20,.22), rgba(17,18,20,.06)),
      url("../images/teammobile.webp") center top / cover no-repeat;

    aspect-ratio: 3 / 4;
    min-height: 420px;
  }
}



/* =========================
   OUR BARBERS – IMC (ZERO KONFLIKTÓW)
   ========================= */

.imc{
  width:100%;
  height:420px;
  border-radius:16px;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% top;
  display:block;
}

/* DESKTOP */
.smok-1{ background-image:url("../images/b1.webp"); }
.smok-2{ background-image:url("../images/b2.webp"); }
.smok-3{ background-image:url("../images/b3.webp"); }
.smok-4{ background-image:url("../images/b4.webp"); }

/* MOBILE */
@media (max-width: 768px){
  .imc{
    height:520px;              /* pion */
    background-position:65% top; /* w prawo */
  }

  .smok-1{ background-image:url("../images/b11.webp"); }
  .smok-2{ background-image:url("../images/b22.webp"); }
  .smok-3{ background-image:url("../images/b33.webp"); }
  .smok-4{ background-image:url("../images/b44.webp"); }
}


/* =========================
   GALLERY – BASE
   ========================= */

.work6{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

.wph{
  border-radius:16px;
  overflow:hidden;

  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;

  aspect-ratio: 4 / 3;   /* desktop – poziom */
}

/* =========================
   GALLERY – DESKTOP IMAGES
   ========================= */

.g1{ background-image: url("../images/c1.webp"); }
.g2{ background-image: url("../images/c5.webp"); }
.g3{ background-image: url("../images/c4.webp"); }
.g4{ background-image: url("../images/c3.webp"); }
.g5{ background-image: url("../images/c6.webp"); }
.g6{ background-image: url("../images/c2.webp"); }

/* =========================
   GALLERY – MOBILE
   ========================= */

@media (max-width: 768px){

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

  .wph{
    aspect-ratio: 3 / 4;   /* pion */
    background-position: center top;
  }

  .g1{ background-image: url("../images/c11.webp"); }
  .g2{ background-image: url("../images/c55.webp"); }
  .g3{ background-image: url("../images/c44.webp"); }
  .g4{ background-image: url("../images/c33.webp"); }
  .g5{ background-image: url("../images/c66.webp"); }
  .g6{ background-image: url("../images/c22.webp"); }
}

.wph{
  box-shadow: 0 14px 40px rgba(17,18,20,.12);
  transition: transform .25s ease;
}

.wph:hover{
  transform: scale(1.015);
}


/* =========================
   LIGHTBOX
   ========================= */

.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(17,18,20,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.lightbox[aria-hidden="false"]{
  display: flex;
}

.lb-image{
  width: min(92vw, 1100px);
  height: min(82vh, 720px);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.lb-close{
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 36px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.lb-prev,
.lb-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 60px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 12px;
}

.lb-prev{ left: 18px; }
.lb-next{ right: 18px; }

@media (max-width: 879px){
  .lb-prev,
  .lb-next{
    font-size: 46px;
  }
}

.work6 {
  padding-inline: 8px;
}

/* Center barber buttons – ONLY Our Barbers section, ONLY desktop */
@media (min-width: 880px) {
  #barbers .barber .btn-team {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

.pull-up{
  margin-top: -80px;   /* reguluj: -16 / -24 / -40 */
}

.pull-down {
  margin-top: 35px;
}


/* === FIX: CTA primary hover – no transparency === */
.cta-btn--primary:hover{
  background: linear-gradient(
    180deg,
    rgba(216,191,138,1),
    rgba(176,141,87,1)
  );
}

.pull-upp{
  margin-top: -20px;   /* reguluj: -16 / -24 / -40 */
}


/* === Studio: compact section ONLY === */
.studio-compact{
  padding-top: 24px;
  padding-bottom: 24px;
  margin: 0;
}

.studio-compact.bg-alt{
  padding-top: 24px;
  padding-bottom: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.studio-compact .section-header{
  margin-bottom: 14px;
}

.studio-compact .team-cta{
  margin-top: 16px;
  margin-bottom: 20px;
}

.down-cta{
  margin-bottom: 25px;
}

/* =========================
   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){
  header .nav-actions .btn--dark{
    display: none;
  }
}

/* === FIX: hamburger always above drawer === */
.hamburger{
  position: relative;
  z-index: 1300;
}


/* =========================
   HIDE FLOATING BUTTONS
   WHEN MOBILE MENU IS OPEN
   ========================= */

body.menu-open .call-button-mobile,
body.menu-open .whatsapp-button{
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition: opacity .2s ease, transform .2s ease;
}


/* Mobile drawer – smaller logo */
.drawer .logo-img{
  height: 42px;     /* ← reguluj: 36–48px */
}

@media (max-width: 879px){
  .hero-copy{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-copy p,
  .hero-copy h1,
  .hero-copy h2,
  .hero-copy h3{
    text-align: center;
  }

  .hero-actions{
    justify-content: center;
  }
}

.studio-grid > * {
  min-width: 0;
}

@media (max-width: 768px){
  .about-image{
    min-height: unset;
    height: auto;
    aspect-ratio: 3 / 4;
    background-position: center top;
  }
}

/* MOBILE – wyśrodkuj ikonę (svg), tytuł i opis w tych boxach */
@media (max-width: 879px){
  .linkblock{
    text-align: center;
    align-items: center; /* gdyby .linkblock było flex */
  }

  .linkblock .top{
    justify-content: center;
    align-items: center;
    flex-direction: column;   /* ikonka nad tytułem */
    text-align: center;
    gap: 10px;
  }

  .linkblock .svgwrap{
    margin-inline: auto;      /* dopchnij ikonę idealnie na środek */
  }

  .linkblock h3,
  .linkblock p{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* jeśli w środku jest przycisk/CTA */
  .linkblock .btn{
    margin-inline: auto;
    justify-content: center;
  }
}

/* MOBILE – wyśrodkowanie kafelków USP */
@media (max-width: 879px){
  .usp .item{
    text-align: center;
  }

  .usp .item strong,
  .usp .item span{
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===============================
   OUR STANDARDS – mobile center
   =============================== */
@media (max-width: 879px) {

  .standards {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .standards .std {
    text-align: center;
    align-items: center;
  }

  /* ikonka */
  .standards .std .ic {
    margin: 0 auto 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* nagłówek */
  .standards .std h3 {
    text-align: center;
    margin-left: 0;
    margin-right: 0;
  }

  /* opis */
  .standards .std p {
    text-align: center;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 879px){

  /* jeśli ten "kafelek/pill" jest w divie który już masz (display:flex; align-items:center) */
  /* to wystarczy wymusić centrowanie samego ratingu */
  .rating{
    display: inline-flex;       /* nie rozciąga się na 100% */
    flex-wrap: wrap;            /* pozwala się zawijać */
    justify-content: center;    /* centruje elementy w rzędzie */
    align-items: center;
    gap: 8px 10px;              /* pion/poziom */
    text-align: center;
    width: auto;
    margin-inline: auto;        /* centruje w kontenerze */
  }

  /* gwiazdki zawsze w środku */
  .rating .stars{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
  }

  /* opcjonalnie: żeby "from 800 reviews" spadło do nowej linii i było centralnie */
  .rating .muted:last-child{
    flex-basis: 100%;
    text-align: center;
  }

}

@media (max-width: 767px){

  /* 1. KAFELKI JEDEN POD DRUGIM I NA ŚRODKU */
  .contact-teaser{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* 2. TREŚĆ W KAŻDYM KAFELKU WYŚRODKOWANA */
  .contact-teaser .ct-box{
    text-align: center;
  }

  /* 3. LINIA (divider) NA ŚRODKU */
  .contact-teaser .divider{
    margin-inline: auto;
  }

}

@media (max-width: 879px){

  /* wyśrodkuj CAŁĄ kolumnę 1 w footerze */
  footer .footer-grid .fcol:first-child{
    text-align: center;
  }

  /* wyśrodkuj wrapper brand + link */
  footer .footer-grid .fcol:first-child .brand{
    justify-content: center;
    min-width: 0;           /* zabija min-width z headerowego .brand */
    width: 100%;
  }

  footer .footer-grid .fcol:first-child a.brand{
    justify-content: center;
    width: 100%;
  }

  /* samo logo (img) na środek */
  footer .footer-grid .fcol:first-child .logo-imf{
    margin-inline: auto;
  }

  /* divider też na środek */
  footer .footer-grid .fcol:first-child .divider{
    margin-inline: auto;
  }
}

@media (max-width: 879px){

  /* FOOTER: kolumna "Navigation" (2-ga) na środku */
  footer .footer-grid .fcol:nth-child(2){
    text-align: center;
  }

  /* linki w nav – wyśrodkuj i ustaw równe */
  footer .footer-grid .fcol:nth-child(2) .fnav{
    justify-items: center;
  }

  footer .footer-grid .fcol:nth-child(2) .fnav a{
    width: 100%;
    max-width: 320px;         /* możesz dać 360px jak chcesz szersze */
    margin-inline: auto;
    justify-content: center;  /* tekst na środku */
    gap: 8px;
  }

  /* strzałka ↗️ też niech będzie po środku z tekstem */
  footer .footer-grid .fcol:nth-child(2) .fnav a span{
    margin-left: 6px;
  }
}

@media (max-width: 879px){

  /* FOOTER – Contact column (3 kolumna) */
  footer .footer-grid .fcol:nth-child(3){
    text-align: center;
  }

  /* dane kontaktowe */
  footer .footer-grid .fcol:nth-child(3) .fmeta{
    align-items: center;
    justify-items: center;
    text-align: center;
  }

  footer .footer-grid .fcol:nth-child(3) .fmeta div{
    text-align: center;
  }

  /* przycisk "Our location" na środek */
  footer .footer-grid .fcol:nth-child(3) .btn{
    margin-inline: auto;
    justify-content: center;
  }
}


@media (max-width: 879px){

  /* ABOUT US – karta z tekstem */
  #about .card,
  .about .card,
  .about-card{
    text-align: center;
  }

  /* paragrafy w środku */
  #about .card p,
  .about .card p,
  .about-card p{
    text-align: center;
  }
}


@media (max-width: 879px) {

  /* Our Barbers – wyśrodkowanie imienia i nazwiska */
  #barbers .barber .info h3 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

}

@media (max-width: 879px) {

  /* Our Barbers – wyśrodkuj przyciski "Book with..." */
  #barbers .barber .btn-team {
    display: block;          /* żeby margin auto zadziałał */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

}

@media (max-width: 879px){

  /* === REVIEWS – MOBILE CENTER === */

  #reviews .section-header{
    text-align: center;
  }

  /* Rating pill */
  #reviews .rating{
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    text-align: center;
  }

  /* Carousel wrapper */
  #reviews .carousel{
    margin-left: auto;
    margin-right: auto;
  }

  /* Review card */
  #reviews .review-card{
    text-align: center;
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Review text */
  #reviews .review-card p{
    text-align: center;
  }

  /* Footer: stars + name */
  #reviews .review-foot{
    justify-content: center;
    text-align: center;
    gap: 10px;
  }

  /* Gwiazdki w review */
  #reviews .review-foot .stars{
    justify-content: center;
  }

  /* CTA pod reviews */
  #reviews .reviews-cta{
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

@media (max-width: 879px){

  /* === CONTACT – MOBILE CENTER === */

  /* Social buttons */
  .contact-left .socials{
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  .contact-left .social{
    justify-content: center;
  }

  /* CTA buttons row */
  .contact-left > div[style*="display:flex"]{
    justify-content: center;
  }

  .contact-left .btn{
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 879px){

  /* === FAQ – MOBILE CENTER === */

  .faq-item{
    text-align: center;
  }

  .faq-q{
    justify-content: center;
    gap: 10px;
    text-align: center;
  }

  .faq-q strong{
    display: block;
    text-align: center;
  }

  .faq-a{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Chevron stays visually centered */
  .faq-q .chev{
    margin-left: 6px;
  }
}

/* Section that contains FAQ */
.section:has(.faq){
  padding-top: 20px;
  padding-bottom: 20px;
}

@media (max-width: 768px) {
  .fcol {
    text-align: center;
  }

  .socials {
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  .social {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .mobile-menu a,
  .mobile-menu button,
  .mobile-menu summary {
    color: #FFFFFF; /* albo Twój brandowy */
  }
}

/* =========================
   FIX: Mobile menu blue text (iOS)
   ========================= */

.mobile-nav .m-trigger,
.mobile-nav .m-trigger strong {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* chevron też */
.mobile-nav .m-trigger .chev {
  color: var(--ink) !important;
  stroke: currentColor !important;
}

/* stan otwarty – nadal CZARNY */
.mobile-nav .m-item[aria-expanded="true"] .m-trigger,
.mobile-nav .m-item[aria-expanded="true"] .m-trigger strong {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* =========================
   FIX: FAQ blue text (iOS / Safari)
   ========================= */

.faq-q,
.faq-q strong {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* Chevron też dziedziczy kolor */
.faq-q .chev {
  color: var(--ink) !important;
  stroke: currentColor !important;
}

/* Stan otwarty – nadal CZARNY */
.faq-item[aria-expanded="true"] .faq-q,
.faq-item[aria-expanded="true"] .faq-q strong {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* Kill Safari focus/active highlight */
.faq-q:focus,
.faq-q:active {
  outline: none;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* =========================
   MAP – MOBILE HEIGHT FIX
   ========================= */
@media (max-width: 879px) {
  .map-wrap {
    min-height: 220px;
  }

  .map-wrap iframe {
    min-height: 220px;
    height: 220px;
  }
}

@media (max-width: 879px) {
  #studio .section-header h2 {
    font-size: 32px; /* zwiększ */
  }
}

@media (max-width: 879px) {
  #studio.bg-alt {
    margin-top: 0;
    padding-top: 12px;
  }
}


@media (max-width: 879px) {
  .section-header h2 {
    font-size: 30px;
  }
}

@media (max-width: 879px) {
  #home {
    padding-top: 8px;
  }

  .hero {
    margin-top: 0px;
  }
}

@media (max-width: 879px) {
  #services {
    padding-top: 36px; /* zamiast 56px */
  }
}

@media (max-width: 879px) {
  #reviews {
    margin-top: -20px;
  }
}

@media (max-width: 879px) {
  .section-header[style] {
    margin-top: 53px !important;
  }
}

@media (max-width: 879px) {
  #studio-about.bg-alt {
    margin-top: -80px;
  }
}

@media (max-width: 879px) {
  #contact {
    margin-top: -20px;
  }
}