*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Georgia,"Times New Roman",serif;color:#332b31;background:#f5efe8;line-height:1.7}.hero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;background-image:url("hero.jpg");background-size:cover;background-position:center 28%}.hero-content{position:relative;z-index:1;width:53%;max-width:760px;padding:5vw 4vw 5vw 6vw;text-shadow:0 1px 18px rgba(255,255,255,.45)}.brand-logo{display:block;width:min(540px,88%);height:auto;margin:0 0 1rem}.tagline{font-size:1.18rem;letter-spacing:.12em;margin:.45rem 0 2rem;color:#51464d}.hero h1{font-size:clamp(1.45rem,2.1vw,1.95rem);font-weight:400;line-height:1.2;margin:0 0 .9rem;max-width:520px}.hero p{font-size:1.08rem;max-width:500px;margin:0}.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:center;gap:.65rem;padding:.9rem 1rem;background:rgba(248,242,235,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(167,149,157,.28);box-shadow:0 3px 14px rgba(105,75,85,.07)}.nav a{color:#46373e;text-decoration:none;font-size:1.16rem;white-space:nowrap;padding:.48rem .82rem;border-radius:999px;transition:background .2s ease,transform .2s ease}.nav a:nth-child(1){background:#e5d8ea}.nav a:nth-child(2){background:#dce9df}.nav a:nth-child(3){background:#dbe7ef}.nav a:nth-child(4){background:#e8ddef}.nav a:nth-child(5){background:#dfeadf}.nav a:hover{background:rgba(255,250,245,.72);transform:translateY(-1px)}.section{max-width:960px;margin:auto;padding:5rem 2rem}.section.soft{max-width:none;padding-left:max(2rem,calc((100% - 960px)/2));padding-right:max(2rem,calc((100% - 960px)/2));background:linear-gradient(135deg,#eee4f1 0%,#e9e6ee 48%,#e4eee7 100%)}.section-label{letter-spacing:.04em;font-size:.9rem;margin-bottom:1.15rem;color:#6b5d68}.section h2{font-size:clamp(1.65rem,2.5vw,2.2rem);line-height:1.25;font-weight:400;margin:.2rem 0 1.5rem}.section h3{font-size:1.25rem;font-weight:400;margin:2rem 0 .5rem}.service{padding:2.5rem 0;border-top:1px solid #d3c7d4}.service h2{margin-bottom:.15rem}.service h3{margin-top:0}.price{font-size:1rem;margin-top:1.2rem}.small-note{font-size:.92rem}.intro{font-size:1.1rem;max-width:760px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}.steps>div{border-top:1px solid #d3c7d4;padding-top:1rem}.steps strong{font-size:1rem}.steps p{margin-top:.5rem}.highlight{font-size:1.3rem;font-style:italic;margin:1.8rem 0}.prices{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.price-card,.travel{padding:1.8rem;border:1px solid #ddd1d8;background:rgba(250,246,240,.88)}.price-card h3{margin:0 0 .25rem}.price-card p{margin:.2rem 0 1rem}.travel{margin-top:1.5rem}.travel h3{margin-top:0}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0 3rem}.contact-grid a,.socials a{padding:1.2rem;border:1px solid #ddd1d8;color:#332b31;text-decoration:none}.contact-grid span{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.12em}.socials{display:flex;gap:1rem;flex-wrap:wrap}.signature{margin-top:4rem;font-size:1.05rem}footer{text-align:center;padding:2rem;font-size:.82rem;color:#6b5d68;background:#e8e1eb}@media(max-width:800px){.hero{min-height:78vh;align-items:flex-end;background-position:center 28%}.hero-content{width:100%;padding:4rem 1.5rem 3rem;background:linear-gradient(180deg,rgba(255,250,247,0) 0%,rgba(255,250,247,.2) 25%,rgba(255,250,247,.78) 100%);max-width:none}.brand-logo{width:min(430px,90%)}.nav{overflow-x:auto;justify-content:flex-start;gap:1.4rem}.section,.section.soft{padding:4.2rem 1.3rem}.steps,.prices,.contact-grid{grid-template-columns:1fr}.hero h1{font-size:1.75rem}.hero p{font-size:1.02rem}.tagline{font-size:1.08rem}}

/* v8 – warmer, softer section transitions */
main{background:#f8f3f5}
#sluzby{background:#f8f3f5}
#domu{background:#eee7f1}
#omne{background:#f4edf3}
#cenik{background:#e8eef0}
#kontakt{background:#f5eee8}
.service{border-top-color:#d2c5d4}
.price-card,.travel,.contact-grid a,.socials a{border-color:#cfc2cf;background:rgba(255,255,255,.28)}

/* v9 – unified warm palette, no patchwork blocks */
body{background:#f2ece7}
main{background:#f2ece7}
#sluzby{background:#f0e9ec}
#domu{background:#ece8ef}
#omne{background:#f2ece8}
#cenik{background:#e8eee9}
#kontakt{background:#f1ebe6}

/* Keep the colorful hero untouched; soften the transition below it. */
.nav{background:rgba(244,238,233,.94);border-bottom:1px solid rgba(140,122,130,.18);box-shadow:0 2px 12px rgba(90,70,80,.045)}
.nav a:nth-child(1){background:#e4d8e8}
.nav a:nth-child(2){background:#dce9df}
.nav a:nth-child(3){background:#dce8e8}
.nav a:nth-child(4){background:#e5dce9}
.nav a:nth-child(5){background:#dfe9df}

/* One visual language: cards sit softly in the sections instead of looking boxed-in. */
.price-card,.travel,.contact-grid a,.socials a{border:0;background:rgba(255,255,255,.20);box-shadow:0 1px 8px rgba(90,70,80,.035)}
.price-card,.travel{border-radius:12px}
.contact-grid a,.socials a{border-radius:10px}
.service{border-top-color:rgba(120,100,115,.18)}
.steps>div{border-top-color:rgba(120,100,115,.18)}



/* GALLERY + CERTIFICATES — desktop and mobile */
.gallery-section{background:#f2ebe3}
.gallery-tabs{display:flex;gap:.7rem;flex-wrap:wrap;margin:0 0 2rem}
.gallery-tabs a{color:#4b403c;text-decoration:none;background:#e7d9cf;padding:.45rem .8rem;border-radius:999px}
.gallery-category h3{margin:0 0 1rem}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;min-width:0}
.gallery-grid figure{margin:0;min-width:0;overflow:hidden}
.gallery-grid img{display:block;width:100%;height:auto;max-width:100%;border-radius:4px}
.certificates-section{background:#f2ebe3}
.certificates-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;align-items:start;width:100%;min-width:0}
.certificates-grid figure{margin:0;min-width:0;overflow:hidden}
.certificates-grid img{display:block;width:100%;height:auto;max-width:100%;border-radius:4px}
.empty-gallery-section:has(.empty-gallery:empty),.before-after-section:has(.before-after-grid:empty){display:none}

/* MOBILE REPAIR 3 – intentional phone layout */
html,body{max-width:100%;overflow-x:clip}

@media (max-width:800px){
  /* Hero: preserve the original artwork instead of using a desktop-style cover crop. */
  .hero{
    min-height:690px;
    height:78vh;
    max-height:760px;
    align-items:flex-end;
    background-size:auto 100%;
    background-position:73% center;
    background-repeat:no-repeat;
    background-color:#fbf7f3;
  }
  .hero-content{
    width:100%;
    max-width:none;
    padding:2.2rem 1.25rem 2.5rem;
    background:linear-gradient(180deg,rgba(251,247,243,0) 0%,rgba(251,247,243,.20) 18%,rgba(251,247,243,.88) 72%,rgba(251,247,243,.97) 100%);
    text-shadow:0 1px 12px rgba(255,255,255,.65);
  }
  .brand-logo{width:min(330px,78%);margin:0 0 .8rem}
  .tagline{font-size:.95rem;letter-spacing:.10em;margin:.3rem 0 1.15rem}
  .hero h1{font-size:1.72rem;line-height:1.15;max-width:330px;margin:0 0 .8rem}
  .hero p{font-size:1rem;line-height:1.55;max-width:340px;margin:0}

  /* Navigation: two neat rows, no horizontal page overflow. */
  .nav{
    position:sticky;
    top:0;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:.38rem .45rem;
    padding:.55rem .5rem;
    overflow:visible;
    background:rgba(244,238,233,.98);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  .nav a{
    flex:0 0 auto;
    font-size:.86rem;
    line-height:1.15;
    padding:.42rem .62rem;
    border-radius:999px;
  }

  .section,.section.soft{
    width:100%;
    max-width:none;
    padding:3rem 1.15rem;
    margin:0;
  }
  .section h2{font-size:1.75rem;line-height:1.2}
  .section h3{font-size:1.1rem}

  /* Gallery stays inside the phone width. */
  .gallery-section,
  .gallery-category,
  .gallery-grid,
  .before-after-grid{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.45rem;
  }
  .gallery-grid img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
  }

  /* Empty future gallery areas must not create giant blank gaps. */
  .gallery-category.empty-gallery-section,
  .before-after-section{
    display:none;
  }

  /* Certificates: one readable column, never wider than the screen. */
  .certificates-section{
    width:100%;
    overflow:hidden;
  }
  .certificates-grid{
    width:100%;
    max-width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:1.2rem;
    margin:0;
  }
  .certificates-grid figure{
    width:100%;
    max-width:360px;
    margin:0 auto;
    padding:0;
    overflow:hidden;
  }
  .certificates-grid img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
  }

  footer{padding:1.4rem 1rem}
}

@media (max-width:390px){
  .hero{min-height:650px}
  .brand-logo{width:min(300px,76%)}
  .hero h1{font-size:1.58rem}
  .hero p{font-size:.95rem}
  .nav a{font-size:.80rem;padding:.38rem .52rem}
  .section,.section.soft{padding-left:1rem;padding-right:1rem}
}

/* FINAL FIX – social icons + warm beige navigation */
.nav{background:#f3ece5 !important;border-bottom:1px solid #ddd1c6 !important;box-shadow:0 2px 12px rgba(90,70,80,.045) !important}
.nav a,
.nav a:nth-child(1),
.nav a:nth-child(2),
.nav a:nth-child(3),
.nav a:nth-child(4),
.nav a:nth-child(5),
.nav a:nth-child(6),
.nav a:nth-child(7){background:#e9dfd6 !important;color:#463d38 !important}
.nav a:hover{background:#e2d6cb !important}
.gallery-tabs a{background:#e9dfd6 !important;color:#463d38 !important}
.gallery-tabs a:hover{background:#e2d6cb !important}

/* The SVG social icons had no size rule and therefore used the browser's huge default SVG size. */
.socials .social-icon{display:block;width:72px;height:72px;max-width:72px;max-height:72px;margin:0 auto .7rem}
.socials a{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:flex-start}
.socials a span{font-size:.9rem;margin-top:.1rem}
.socials a strong{font-size:1rem}

@media(max-width:800px){
  .socials .social-icon{width:58px;height:58px;max-width:58px;max-height:58px}
}


/* FINAL 3 – social items horizontal + centered small business info + unified beige */
body,main,
#sluzby,#domu,#omne,#cenik,#kontakt,#galerie,#certifikaty,
.gallery-section,.certificates-section,.section.soft{
  background:#f3ece5 !important;
  background-image:none !important;
}

/* The hero remains the only intentionally colorful area. */
.hero{background-image:url("hero.jpg") !important}

/* Navigation and gallery tabs stay warm beige. */
.nav{
  background:#f3ece5 !important;
  border-bottom:1px solid #ddd1c6 !important;
}
.nav a,
.nav a:nth-child(1),.nav a:nth-child(2),.nav a:nth-child(3),
.nav a:nth-child(4),.nav a:nth-child(5),.nav a:nth-child(6),.nav a:nth-child(7),
.gallery-tabs a{
  background:#e9dfd6 !important;
  color:#463d38 !important;
}
.nav a:hover,.gallery-tabs a:hover{background:#e1d5ca !important}

/* Neutral cards. */
.price-card,.travel,.contact-grid a,.socials a{
  background:#f7f1eb !important;
  border:1px solid #ddd1c6 !important;
  box-shadow:none !important;
}

/* Social area: two cards next to each other. */
.socials{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:1.25rem !important;
  width:100% !important;
}

/* Inside each card: icon + name + account, all on ONE ROW. */
.socials a{
  flex:0 1 340px !important;
  width:340px !important;
  min-width:0 !important;
  padding:1rem 1.15rem !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.65rem !important;
  text-align:left !important;
  white-space:nowrap !important;
}

.socials .social-icon{
  display:block !important;
  flex:0 0 38px !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  max-width:38px !important;
  max-height:38px !important;
  margin:0 !important;
}

.socials a span{
  display:inline !important;
  margin:0 !important;
  font-size:.92rem !important;
  color:#6b5d68 !important;
  white-space:nowrap !important;
}

.socials a strong{
  display:inline !important;
  margin:0 !important;
  font-size:.98rem !important;
  color:#332b31 !important;
  white-space:nowrap !important;
}

/* IČO: small, gray and centered. */
.business-info{
  width:100% !important;
  text-align:center !important;
  margin:3rem auto 0 !important;
  font-size:.72rem !important;
  line-height:1.4 !important;
  color:#8a817b !important;
  font-weight:400 !important;
}

/* Keep the compact horizontal social layout on phones too,
   while allowing the two cards to fit without page overflow. */
@media(max-width:800px){
  .socials{
    flex-wrap:nowrap !important;
    gap:.55rem !important;
  }
  .socials a{
    flex:1 1 0 !important;
    width:auto !important;
    padding:.75rem .55rem !important;
    gap:.38rem !important;
    font-size:.82rem !important;
  }
  .socials .social-icon{
    flex:0 0 30px !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    max-width:30px !important;
    max-height:30px !important;
  }
  .socials a span{font-size:.78rem !important}
  .socials a strong{font-size:.82rem !important}
  .business-info{
    font-size:.68rem !important;
    margin-top:2.2rem !important;
  }
}

/* Service copy and booking links: consistent paragraph alignment and wrapping. */
.service p{
  display:block;
  width:100%;
  max-width:100%;
  margin:.75rem 0;
  padding:0;
  float:none;
  clear:both;
  text-indent:0;
  text-align:left;
  overflow-wrap:break-word;
}
.booking-links{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin:1.35rem 0 0;
}
.booking-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.65rem 1rem;
  border:1px solid #cfc2b8;
  border-radius:999px;
  background:#f7f1eb;
  color:#463d38;
  text-decoration:none;
  line-height:1.25;
  text-align:center;
}
.booking-links a:hover{background:#e9dfd6}
.booking-links a:focus-visible{outline:2px solid #6b5d68;outline-offset:3px}
@media(max-width:800px){
  .booking-links{gap:.55rem}
  .booking-links a{flex:1 1 100%;}
}

/* Final visual corrections. */
footer{background:#f3ece5 !important;color:#6b5d68}
.nav{position:sticky !important;top:0 !important;z-index:50 !important;align-self:start}
@media(max-width:800px){.nav{position:sticky !important;top:0 !important}}