/* === Reset & tokens === */
  :root{
    --border:#e8eceb;
    --ink:#111111;
    --brand:#0055cc;
    --brand-contrast:#ffffff;
    --shadow:0 10px 30px rgba(0,0,0,.08);
    --maxw:1200px;
    --space: 16px;
    --space-lg: 40px;
    --radius: 12px;
    --paper: #ffffff;
  }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#f6f8f7}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ========== LAYOUT ========== */
.container{max-width:var(--maxw);margin-inline:auto;padding:0 var(--space)}
.section{padding-block:var(--space-lg)}
.grid{display:grid;gap:var(--space)}

/* ========== TYPOGRAPHY ========== */
h1{font-size:clamp(32px,5vw,56px);margin:.3em 0;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(24px,3vw,38px);margin:.6em 0;font-weight:700;letter-spacing:-.01em}
h3{font-size:clamp(18px,2.2vw,26px);margin:.5em 0}
p{line-height:1.7;margin:.5em 0}
ul{line-height:1.7;margin:.6em 0 1em;padding-left:1.2em}
.lead{font-size:1.125rem;color:#33413d}

      
       /* === HEADER (pure CSS hamburger via <details>) === */
  .site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:50}
  .nav-wrap{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 0;position:relative}
  .brand{display:flex;align-items:center;gap:.6rem}
  .brand .logo{width:150px;height:auto;display:block}

  /* Desktop nav */
  .nav-inline{display:flex;gap:1rem;align-items:center}

  .nav-inline .menu-item{position:relative}
  .nav-inline .menu-item > a{display:inline-flex;align-items:center;gap:.4rem}
  .nav-inline .menu-item .caret{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;opacity:.7}
  .nav-inline .submenu{display:none;position:absolute;top:100%;left:0;z-index:60;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:8px;min-width:260px;list-style:none;margin:8px 0 0 0;  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s}
  .nav-inline .submenu a{display:block;padding:8px 12px;border-radius:8px;color:var(--ink);white-space:nowrap}
  .nav-inline .submenu a:hover{background:#eef5ff;color:var(--brand)}
  .nav-inline .has-submenu:hover .submenu, .nav-inline .has-submenu:focus-within .submenu{display: block;opacity: 1;
  visibility: visible;
  transform: translateY(0);}
  .btn{background:var(--brand);color:#ffffff;border-radius:10px;padding:.6rem .9rem;border:0;font-weight:600;text-decoration:none;display:inline-block}
  .btn:hover{background:#0049aa;color:#fff}
  .btn.ghost{background:transparent;color:var(--brand);border:2px solid var(--brand)}
  .btn.ghost:hover{background:var(--brand);color:#fff}

  /* Mobile menu */
  .menu-toggle{display:none}
  .menu-toggle summary{list-style:none;cursor:pointer;border:0;background:transparent;padding:6px}
  .menu-toggle summary::-webkit-details-marker{display:none}
  .menu-toggle summary svg{width:28px;height:28px;display:block;color:var(--brand)}
  .menu-panel{position:absolute;top:100%;right:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.6rem;padding:12px;min-width:220px}
  .menu-panel a{color:var(--brand);text-decoration:none;padding:.2rem 0;font-weight:500}
  .menu-panel a:hover{color:#003f99;text-decoration:underline}

  @media (max-width: 768px){
    .nav-inline{display:none}
    .menu-toggle{display:block}
  }

    .nav-inline .menu-item{position:relative}
.nav-inline .menu-item > a{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .4rem}
.nav-inline .menu-item .caret{
  width:0;height:0;display:inline-block;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;opacity:.7
}
.nav-inline .submenu{
  display:none; position:absolute; top:100%; left:0; z-index:60;
  background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  padding:8px; min-width:260px; list-style:none; margin:8px 0 0 0
}
.nav-inline .submenu a{display:block;padding:8px 12px;border-radius:8px;color:var(--ink);white-space:nowrap}
.nav-inline .submenu a:hover{background:#eef5ff;color:var(--brand)}
.nav-inline .has-submenu:hover .submenu,
.nav-inline .has-submenu:focus-within .submenu{display:block}
  
      
  /* === HERO minimal (so it renders) === */
.hero{position:relative;color:#fff;padding-block:clamp(48px,8vw,140px);
  background:url('/images/expert-przeprowadzki.webp') center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.45))}
.hero .container{position:relative;z-index:1}
.hero h1{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.hero .lead{color:#e6f2ee;max-width:900px}
      
/* ========== CARDS & BUTTONS ========== */
.card{background:var(--paper);margin-bottom:var(--space);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:clamp(18px,2vw,28px)}
.btn{display:inline-flex;align-items:center;justify-content:center;color: #fff;
  padding:.8rem 1.2rem;border-radius:12px;font-weight:600;
  border:1px solid transparent;transition:.2s;cursor:pointer}
      

.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn.ghost{border:1px solid var(--border);background:#fff;color:var(--ink)}
.btn.ghost:hover{box-shadow:var(--shadow)}
.cta-row{display:flex;gap:.8rem;flex-direction:column}
@media(min-width:600px){.cta-row{flex-direction:row}}

/* ========== GRIDS & MODULES ========== */
.grid-23{display:grid;gap:var(--space)}
@media(min-width:900px){
  .grid-23{grid-template-columns:2fr 1fr;align-items:center}
}
.services{margin-bottom:var(--space);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.usps{display:grid;gap:var(--space)}
@media(min-width:900px){.usps{grid-template-columns:repeat(4,1fr)}}
.process{display:grid;gap:var(--space)}
@media(min-width:900px){.process{grid-template-columns:repeat(4,1fr)}}
.fleet{display:grid;gap:var(--space)}
@media(min-width:900px){.fleet{grid-template-columns:repeat(3,1fr)}}

/* ========== BADGES & EFFECTS ========== */
.step{position:relative;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.step::before{content:attr(data-step);position:absolute;top:-12px;left:16px;
  background:var(--brand);color:#fff;border-radius:999px;padding:.18rem .55rem;
  font-weight:700;font-size:.8rem;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.hover-rise{transition:transform .2s ease, box-shadow .2s ease}
.hover-rise:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.10)}

/* ========== IMAGES ========== */
.resp{width:100%;height:auto;border-radius:12px}
.hero-figure img{width:100%;border-radius:12px;box-shadow:var(--shadow)}

/* ========== FAQ ========== */
details{border:1px solid var(--border);border-radius:12px;background:#fff;padding:12px}
summary{cursor:pointer;font-weight:700;outline:none}
details[open] summary{border-bottom:1px solid var(--border);padding-bottom:.4rem;margin-bottom:.4rem}
details p{margin:.6rem 0 0}

/* ========== FOOTER ========== */
.footer{background:#0f1316;color:#fff;padding:var(--space-lg) var(--space)}
.footer .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space)}
.footer a{color:#99ccff;text-decoration:none}
.footer a:hover{color:#99ccff;text-decoration:underline}

/* -- Tap target fix: links as chips with spacing and min target size -- */
.footer .links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0; /* we will rely on margins on <a> for consistency with Lighthouse */
  margin-top:6px;
}
.footer .links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  margin:4px 6px;          /* spacing between tap targets */
  min-height:48px;         /* recommended minimum touch size */
  border-radius:8px;
  line-height:1.2;
  white-space:nowrap;
  background:transparent;
  text-decoration:none;
}
.footer .links a:focus-visible{
  outline:2px solid #99ccff;
  outline-offset:2px;
}

.footer h4{
  text-align:center;
  margin:0;
  font-size:1rem;
  letter-spacing:.02em;
  color:#ffffff;
  opacity:.9;
}

.faq{border-top:1px solid var(--border);padding-top:var(--space-lg)}
.faq h2{margin-bottom:var(--space)}
.faq-item{margin-bottom:var(--space)}
.faq-item h3{cursor:pointer;position:relative;padding-right:24px}
.faq-item h3::after{content:'+';position:absolute;right:0;top:0;color:var(--brand)}
.faq-item.open h3::after{content:'-'}
.faq-item p{display:none;margin-top:.6em}
.faq-item.open p{display:block}
      
      
      .map-lite { position: relative; border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden; }
.map-lite .map-preview img { display:block; width:100%; height:auto; }

.map-lite .map-activate{
  position: absolute; inset: auto 16px 16px 16px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 14px; border-radius: 10px;
  border: 0; background: #0055cc; color: #fff; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}
.map-lite .map-activate:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.flex-row{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px}
  .flex-2col-50 > div{flex:1 1 45%;padding:20px}
  .flex-2col-65-35 > div:first-child{flex:1 1 65%;padding:20px}
  .flex-2col-65-35 > div:last-child{flex:1 1 35%;padding:20px}
  .flex-4col > div{flex:1 1 20%;padding:20px}

  @media(max-width:768px){
    .flex-2col-50 > div,
    .flex-2col-65-35 > div,
    .flex-4col > div{flex:1 1 100%}
      
    
      
      
      
    .reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.review{border:1px solid #e8eceb;border-radius:12px;padding:16px;background:#fff}
.review-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.stars{font-size:14px;letter-spacing:1px}
blockquote{margin:0 0 12px 0;line-height:1.5}
.review-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.review-link img{border-radius:8px;display:block}
.review-link span{font-weight:600}