:root{
  --bg: #F7F5F2;
  --bg-2: #E6E1D8;
  --accent: #C8D0C4;
  --dark: #3E3A37;
  --dark-2: #3E3A37;
  --muted: #6f6a66;
  --white: #ffffff;
  --glass: rgba(255,255,255,0.6);
  --shadow: 0 14px 36px rgba(0,0,0,0.12);
  --radius: 18px;
  --section-title-size: clamp(1.95rem, 3.1vw, 2.65rem);
  --header-height: 102px;
}

/* ---------- GLOBALS ---------- */

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.68;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* anchor defaults */
a{color:inherit}
a:focus{outline:3px solid rgba(62,58,55,0.12); outline-offset:3px}

/* section spacing */
section{padding:80px 20px; position:relative}
main{overflow-x:clip}

/* headings */
h1,h2,h3{margin:0 0 18px 0; color:var(--dark)}
h1{font-family:"Playfair Display", serif; font-size:clamp(2.2rem, 4.6vw, 3.4rem); line-height:1.08;}
h2{font-family:"Playfair Display", serif; font-size:clamp(1.8rem, 3.2vw, 2.5rem); line-height:1.18;}
h3{font-size:clamp(1.1rem, 1.45vw, 1.3rem); font-weight:600; line-height:1.32}
h1,h2,h3,p,li{overflow-wrap:anywhere}

/* paragraphs */
p{color:var(--muted); margin:0 0 14px 0; max-width:880px; font-size:1rem}

.about h2,
.grooming-header h2,
.warum h2,
.gallery h2,
.services h2,
.contact h2{
  font-size:var(--section-title-size);
  line-height:1.16;
  letter-spacing:.01em;
  font-weight:600;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* container */
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* subtle divider under sections for luxury feel */
section::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:10px;
  width:110px;
  height:1px;
  background:rgba(0,0,0,0.04);
}

/* =========================
   HEADER
========================= */

.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1700;
  background:rgba(247,245,242,0.95);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,0.05);
  transition: box-shadow .3s ease;
}

main#top{
  padding-top:var(--header-height);
}

/* shadow when scrolling */
.header.scrolled{
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.nav-container{
  max-width:1200px;
  margin:auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* =========================
   LOGO
========================= */

.logo-wrap{
  flex:0 0 clamp(220px, 20vw, 340px);
  width:clamp(220px, 20vw, 340px);
  min-width:220px;
  max-width:340px;
  display:flex;
  align-items:center;
}

.header .logo-wrap img.site-logo{
  display:block;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  max-width:100% !important;
  object-fit:contain;
  aspect-ratio:1000 / 216;
  min-width:0;
}

/* =========================
   NAV LINKS (DESKTOP)
========================= */

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

.nav-close{
  display:none;
}

.nav a{
  text-decoration:none;
  color:#3E3A37;
  font-weight:500;
  position:relative;
  font-size:15px;
}

/* underline animation */
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#3E3A37;
  transition:.3s;
}

.nav a:hover::after{
  width:100%;
}

/* CTA button */
.nav-cta{
  background:#3E3A37;
  color:#fff !important;
  padding:8px 18px;
  border-radius:999px;
}




/* =========================
   BURGER
========================= */

.burger{
  display:none;
  width:40px;
  height:40px;
  border:1px solid transparent;
  border-radius:10px;
  padding:0;
  background:transparent;
  color:var(--dark);
  appearance:none;
  font-size:27px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(24,22,20,0.26);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:1650;
}

.nav-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

body.menu-open{
  overflow:hidden;
}

body.menu-open .whatsapp-btn{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* ---------- HERO ---------- */

.hero{
  min-height:calc(100vh - var(--header-height));
  min-height:calc(100svh - var(--header-height));
  display:flex;
  align-items:center;
  background:
    linear-gradient(
      to right,
      rgba(247,245,242,0.98) 32%,
      rgba(247,245,242,0.85) 48%,
      rgba(247,245,242,0.35) 68%,
      rgba(247,245,242,0.05) 82%
    ),
    var(--hero-image-url, url("hero.jpg")) right center / cover no-repeat;
  background-color:var(--bg); /* fallback */
}

.hero-inner{
  max-width:660px;
  margin-left:8%;
  z-index:2;
}

.hero h1{ font-size:clamp(2.2rem, 4.2vw, 3.25rem); margin-bottom:14px; color:var(--dark); line-height:1.08 }
.hero .hero-lead{ font-size:1.02rem; color:var(--muted); margin-bottom:18px }
.hero .hero-sub{ font-size:0.98rem; color:var(--muted); margin-bottom:22px }

/* hero CTA */
.hero-btn{
  display:inline-block;
  background:var(--accent);
  color:var(--dark);
  padding:14px 34px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.hero-btn:hover{ transform:translateY(-3px); box-shadow:0 20px 46px rgba(0,0,0,0.18) }

/* ---------- ABOUT / PFLEGE / CONTENT ---------- */

.about, .pflege, .services, .warum, .gallery, .contact{
  max-width:1100px;
  margin:0 auto;
}

/* about specifics */
.about p{ margin-bottom:12px; font-size:16px }

/* Pflege section bg for separation */
.pflege{ background:linear-gradient(180deg,var(--bg-2), rgba(255,255,255,0)); border-radius:12px; padding:56px 20px; margin-top:12px }

/* ---------- WHY / WARUM ---------- */

.warum{
  padding-top:72px;
  padding-bottom:72px;
  background:transparent;
  border-radius:0;
}

.warum-container{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}

.warum h2{
  margin-bottom:10px;
}

.warum-lead{
  max-width:720px;
  margin:0 auto 26px;
  font-size:1.05rem;
}

.warum-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-top:6px;
}

.warum-card{
  text-align:left;
  background:#fff;
  border:1px solid rgba(62,58,55,0.08);
  border-radius:16px;
  padding:18px 18px 16px;
  box-shadow:0 10px 24px rgba(48,44,40,0.06);
  transition:transform .22s ease, box-shadow .22s ease;
}

.warum-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(48,44,40,0.12);
}

.warum-card h3{
  margin-bottom:6px;
  font-size:1.02rem;
}

.warum-card p{
  margin:0;
  font-size:0.95rem;
}

.warum-note{
  margin:24px auto 0;
  max-width:720px;
  font-weight:500;
  color:var(--dark);
}

.warum-salon{
  margin-top:32px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(62,58,55,0.1);
  background:linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(247,245,242,0.85) 100%);
  box-shadow:0 14px 30px rgba(48,44,40,0.08);
}

.warum-salon-head{
  margin-bottom:14px;
}

.warum-salon-title{
  margin:0 0 4px;
  text-align:center;
  font-size:1.08rem;
  font-weight:600;
  color:var(--dark);
}

.warum-salon-sub{
  margin:0 auto;
  max-width:700px;
  text-align:center;
  font-size:0.92rem;
  color:var(--muted);
}

.warum-photos{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  grid-auto-rows:160px;
  gap:12px;
}

.warum-photo{
  position:relative;
  margin:0;
  background:#ddd;
  border:1px solid rgba(62,58,55,0.1);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(48,44,40,0.1);
  isolation:isolate;
}

.warum-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.03) 42%, rgba(0,0,0,0.38) 100%);
  z-index:1;
  pointer-events:none;
}

.warum-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .35s ease;
}

.warum-photo:hover img{
  transform:scale(1.04);
}

.warum-photo figcaption{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:2;
  margin:0;
  text-align:left;
}

.warum-photo-label{
  display:block;
  font-size:0.85rem;
  font-weight:600;
  line-height:1.25;
  color:#fff;
}

.warum-photo-meta{
  display:block;
  margin-top:2px;
  font-size:0.75rem;
  line-height:1.3;
  color:rgba(255,255,255,0.88);
}

.warum-photo-outside{
  grid-column:1 / span 6;
  grid-row:1 / span 2;
  border-color:rgba(62,58,55,0.2);
}

.warum-photo:nth-of-type(2){
  grid-column:7 / span 3;
  grid-row:1 / span 1;
}

.warum-photo:nth-of-type(3){
  grid-column:10 / span 3;
  grid-row:1 / span 1;
}

.warum-photo:nth-of-type(4){
  grid-column:7 / span 6;
  grid-row:2 / span 1;
}

/* ---------- PRICE CARDS ---------- */

.price-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:26px;
  margin-top:22px;
}

.price-card{
  background:var(--white);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 12px 30px rgba(0,0,0,0.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.price-card:hover{ transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,0.12) }

.price-card h3{ margin-bottom:10px }
.price-desc{ color:var(--muted); font-size:14px; margin-bottom:12px }

/* ---------- GALLERY (карточки) ---------- */

.gallery-carousel{
  margin-top:14px;
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}

.gallery-viewport{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-radius:18px;
}
.gallery-viewport::-webkit-scrollbar{ display:none }

.gallery-track{
  display:flex;
  gap:14px;
  align-items:stretch;
}

.gallery-slide{
  position:relative;
  flex:0 0 calc((100% - 28px) / 3);
  margin:0;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:1/1;
  scroll-snap-align:start;
  background:linear-gradient(180deg, #faf8f6, #f1ece8);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.gallery-track .gallery-slide:only-child{
  flex-basis:100%;
}

.gallery-track .gallery-slide:first-child:nth-last-child(2),
.gallery-track .gallery-slide:first-child:nth-last-child(2) ~ .gallery-slide{
  flex-basis:calc((100% - 14px) / 2);
}

.gallery-slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#e8e3de;
}

.gallery-slide::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:34%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.58) 100%);
  pointer-events:none;
}

.gallery-slide figcaption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  z-index:1;
  color:#fff;
  font-size:0.95rem;
  font-weight:500;
  letter-spacing:0.01em;
  text-shadow:0 2px 8px rgba(0,0,0,0.28);
}

.gallery-controls{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.gallery-nav{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(62,58,55,0.18);
  background:#fff;
  color:var(--dark);
  display:grid;
  place-items:center;
  font-size:1.06rem;
  line-height:1;
  cursor:pointer;
  transition:transform .22s ease, background .22s ease, border-color .22s ease;
}

.gallery-nav:hover{
  transform:translateY(-1px);
  background:#f5f1ed;
  border-color:rgba(62,58,55,0.24);
}

.gallery-nav:disabled{
  opacity:0.42;
  cursor:not-allowed;
  transform:none;
}

.gallery-dots{
  display:flex;
  align-items:center;
  gap:7px;
  max-width:46%;
  overflow-x:auto;
  scrollbar-width:none;
  padding:4px 2px;
}
.gallery-dots::-webkit-scrollbar{ display:none }

.gallery-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:0;
  background:rgba(62,58,55,0.26);
  flex:0 0 auto;
  padding:0;
  cursor:pointer;
  transition:width .2s ease, background .2s ease;
}

.gallery-dot.is-active{
  width:24px;
  background:var(--accent);
}

.gallery-counter{
  margin:0;
  min-width:52px;
  text-align:right;
  font-size:0.88rem;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- CONTACT / MAP ---------- */

.contact{
  padding-bottom:52px;
}

.contact-container{
  max-width:1120px;
  margin:0 auto;
}

.contact #kontakt-title{
  text-align:center;
}

.contact-intro{
  text-align:center;
  max-width:760px;
  margin:0 auto 24px;
  font-size:1rem;
}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(320px, 1fr) minmax(420px, 1.25fr);
  gap:18px;
  align-items:stretch;
}

.contact-card,
.map-card{
  background:#fff;
  border:1px solid rgba(62,58,55,0.1);
  border-radius:18px;
  box-shadow:0 12px 26px rgba(0,0,0,0.07);
}

.contact-card{
  padding:24px 22px;
  display:flex;
  flex-direction:column;
}

.contact-card h3{
  margin-bottom:14px;
  font-size:1.2rem;
  font-weight:600;
}

.contact-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}

.contact-list li{
  margin:0;
  padding:0 0 12px;
  border-bottom:1px solid rgba(62,58,55,0.08);
}

.contact-list li:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.contact-list span{
  display:block;
  color:var(--muted);
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:3px;
}

.contact-list a,
.contact-list strong{
  color:var(--dark);
  font-size:1rem;
  font-weight:500;
  text-decoration:none;
}

.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.cta,
.contact-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.cta{
  background:var(--dark);
  color:var(--white);
  border:1px solid var(--dark);
}

.cta:hover{
  background:#2f2b28;
}

.contact-link-btn{
  background:transparent;
  color:var(--dark);
  border:1px solid rgba(62,58,55,0.26);
}

.contact-link-btn:hover{
  background:#f1ece4;
}

.map-card{
  padding:8px;
}

.map-wrapper{
  border-radius:12px;
  overflow:hidden;
  box-shadow:none;
  height:100%;
}

.map-wrapper iframe{
  width:100%;
  height:100%;
  min-height:340px;
  border:0;
  display:block;
}

/* ---------- FOOTER ---------- */

.site-footer{
  background:#ece7de;
  border-top:1px solid rgba(62,58,55,0.12);
  margin-top:10px;
}

.footer-grid{
  max-width:1120px;
  margin:0 auto;
  padding:34px 20px 24px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:24px;
}

.footer-brand h3{
  margin-bottom:10px;
  font-size:1.25rem;
}

.footer-brand p{
  max-width:420px;
  margin:0;
}

.footer-column h4{
  margin:0 0 12px;
  font-size:0.92rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--dark);
}

.footer-column p{
  margin:0 0 10px;
  font-size:0.95rem;
}

.footer-column a{
  display:block;
  width:max-content;
  margin:0 0 9px;
  color:var(--dark);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.footer-column a:hover{
  border-bottom-color:rgba(62,58,55,0.35);
}

.footer-legal-links{
  display:grid;
  gap:8px;
}

.footer-bottom{
  border-top:1px solid rgba(62,58,55,0.1);
  padding:12px 20px 16px;
  text-align:center;
}

.footer-bottom p{
  margin:0;
  max-width:none;
  font-size:0.9rem;
}

@media (max-width: 980px){
  .warum-photos{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-auto-rows:180px;
  }

  .warum-photo-outside{
    grid-column:1 / -1;
    grid-row:auto;
  }

  .warum-photo:nth-of-type(2),
  .warum-photo:nth-of-type(3),
  .warum-photo:nth-of-type(4){
    grid-column:auto;
    grid-row:auto;
  }

  .contact-layout{
    grid-template-columns:1fr;
  }

  .map-wrapper iframe{
    min-height:300px;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .footer-brand{
    grid-column:1 / -1;
  }
}

/* ---------- WHATSAPP FLOAT ---------- */

.whatsapp-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  width:62px;
  height:62px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 14px 36px rgba(0,0,0,0.24);
  z-index:1400;
  font-size:22px;
}


/* ---------- REVEAL / TRANSITIONS ---------- */

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease }
.reveal.active{ opacity:1; transform:translateY(0) }

/* focus states for accessibility */
button:focus, a:focus{ outline: 3px solid rgba(62,58,55,0.12); outline-offset:4px; border-radius:8px }

/* ---------- LEGAL PAGES ---------- */

.legal-page{ max-width:900px; margin:120px auto; padding:0 20px; line-height:1.8; color:var(--muted) }
.legal-page h1{ font-family:"Playfair Display",serif; font-size:2.2rem; color:var(--dark) }

/* ---------- RESPONSIVE / MOBILE ---------- */

@media (max-width: 992px){
  .logo-wrap{
    flex-basis:210px;
    width:210px;
    min-width:210px;
    max-width:210px;
  }
  h1{ font-size:2.6rem }
}

@media (max-width: 768px){

  .header{
    padding-top:env(safe-area-inset-top);
  }

  main#top{
    padding-top:calc(var(--header-height) + env(safe-area-inset-top));
  }

  .burger{
    display:grid;
    place-items:center;
    position:relative;
    z-index:1760;
    width:44px;
    height:44px;
    font-size:0;
    background:#f1eee8;
    border:1px solid rgba(62,58,55,0.16);
    border-radius:12px;
    color:var(--dark);
  }
  .burger::before{
    content:"☰";
    font-size:29px;
    line-height:1;
  }
  .burger.active{
    background:#3e3a37;
    color:#fff;
    border-color:#3e3a37;
  }
  .burger.active::before{
    content:"\00D7";
    font-size:32px;
    transform:translateY(-1px);
  }

  .nav{
    position:fixed;
    top:0;
    right:-100%;
    width:min(88vw, 360px);
    height:100dvh;
    background:#fdfcf9;
    padding:calc(82px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    gap:2px;
    box-shadow:-16px 0 36px rgba(0,0,0,0.2);
    transition:right .28s ease;
    z-index:1750;
    border-left:1px solid rgba(62,58,55,0.1);
    overflow-y:auto;
  }
  .nav.show{ right:0 }
  .nav-close{
    display:grid;
    place-items:center;
    position:absolute;
    top:calc(14px + env(safe-area-inset-top));
    right:12px;
    width:40px;
    height:40px;
    border-radius:10px;
    border:1px solid rgba(62,58,55,0.2);
    background:#f2efe9;
    color:var(--dark);
    font-size:30px;
    line-height:1;
    cursor:pointer;
  }
  .nav a{
    font-size:1.12rem;
    padding:13px 8px;
    border-bottom:1px solid rgba(62,58,55,0.1);
    line-height:1.3;
  }
  .nav a::after{ display:none }
  .nav-cta{
    text-align:center;
    margin-top:10px;
    padding:12px 14px;
    border-radius:12px;
    border-bottom:none !important;
  }

  /* keep header compact */
  .nav-container{ padding:10px 12px }
  .logo-wrap{
    flex-basis:190px;
    width:190px;
    min-width:190px;
    max-width:190px;
  }

  /* hero adapted */
  .hero{
    min-height:calc(100vh - var(--header-height));
    min-height:calc(100svh - var(--header-height));
    background:
      linear-gradient(
        to bottom,
        rgba(247,245,242,0.93) 0%,
        rgba(247,245,242,0.82) 52%,
        rgba(247,245,242,0.76) 100%
      ),
      var(--hero-image-url, url("hero.jpg")) 70% center / cover no-repeat;
    padding:18px 0 16px;
  }
  .hero-inner{
    margin:0 auto;
    max-width:560px;
    padding:24px 14px;
    text-align:center;
    background:rgba(255,255,255,0.66);
    border:1px solid rgba(255,255,255,0.86);
    border-radius:16px;
    backdrop-filter:blur(3px);
  }
  .hero h1{
    font-size:clamp(2rem, 8.2vw, 2.6rem);
    line-height:1.1;
    margin-bottom:12px;
  }
  .hero .hero-lead{
    font-size:1rem;
    line-height:1.48;
    margin-bottom:14px;
  }
  .hero .hero-sub{
    font-size:0.96rem;
    line-height:1.45;
    margin-bottom:18px;
  }
  .hero-btn{
    width:100%;
    max-width:320px;
    padding:12px 18px;
    font-size:1.02rem;
  }

  .warum{
    padding-top:56px;
    padding-bottom:56px;
  }
  .warum-grid{ grid-template-columns:1fr }
  .warum-card{ padding:16px 16px 14px }
  .warum-salon{
    margin-top:24px;
    padding:12px;
    border-radius:16px;
  }
  .warum-salon-sub{
    font-size:0.9rem;
  }
  .warum-photos{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-auto-rows:auto;
    gap:10px;
  }
  .warum-photo-outside{
    grid-column:1 / -1;
  }
  .warum-photo:nth-of-type(2),
  .warum-photo:nth-of-type(3),
  .warum-photo:nth-of-type(4){
    grid-column:auto;
    grid-row:auto;
  }
  .warum-photo::after{
    display:none;
  }
  .warum-photo figcaption{
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    padding:8px 10px 10px;
    background:#fff;
  }
  .warum-photo-label{
    color:var(--dark);
  }
  .warum-photo-meta{
    color:var(--muted);
  }
  .warum-photo img{
    aspect-ratio:4 / 3;
    height:auto;
  }

  /* headings smaller */
  h1{ font-size:2rem; line-height:1.14 }
  h2{ font-size:1.56rem; line-height:1.2 }

  .about h2,
  .grooming-header h2,
  .warum h2,
  .gallery h2,
  .services h2,
  .contact h2{
    font-size:clamp(1.58rem, 7vw, 1.9rem);
  }

  :root{
    --header-height: 78px;
  }

  /* price grid -> single column */
  .price-grid{ grid-template-columns:1fr }

  .gallery-carousel{
    max-width:none;
  }
  .gallery-slide{
    flex:0 0 calc((100% - 14px) / 2);
    border-radius:14px;
  }
  .gallery-controls{
    gap:8px;
  }
  .gallery-nav{
    width:38px;
    height:38px;
    font-size:0.98rem;
  }
  .gallery-dots{
    max-width:52%;
  }

  /* section padding */
  section{ padding:48px 14px }

  .about p,
  .warum-card p,
  .contact-intro{
    font-size:0.96rem;
  }

  .about-grid{
    gap:18px;
  }

  .about-image img{
    border-radius:16px;
    max-height:440px;
  }

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

  .contact-card{
    padding:18px 16px;
  }

  .contact-actions{
    flex-direction:column;
  }

  .cta,
  .contact-link-btn{
    width:100%;
  }

  .map-wrapper iframe{ min-height:280px }

  .footer-grid{
    grid-template-columns:1fr;
    gap:20px;
    padding:26px 16px 18px;
  }

  .footer-brand p{
    max-width:none;
  }

  .footer-column a{
    width:auto;
  }

  .whatsapp-btn{
    width:56px;
    height:56px;
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    font-size:20px;
  }

}

@media (max-width: 480px){
  .nav{
    width:min(92vw, 340px);
    padding:calc(80px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
  }

  .hero{
    padding:14px 0 12px;
  }

  .hero h1{
    font-size:clamp(1.82rem, 9vw, 2.3rem);
  }

  .hero .hero-lead,
  .hero .hero-sub{
    font-size:0.94rem;
  }

  .warum-photos{
    grid-template-columns:1fr;
  }

  .gallery-slide{
    flex:0 0 100%;
    aspect-ratio:1 / 1;
  }

  .gallery-slide figcaption{
    left:10px;
    right:10px;
    bottom:10px;
    font-size:0.88rem;
  }

  .gallery-counter{
    min-width:46px;
    font-size:0.82rem;
  }

  section{
    padding:44px 12px;
  }
}

/* ---------- PRINT ---------- */

@media print{
  .hero, .nav, .burger, .whatsapp-btn, .nav-overlay { display:none !important; }
  body{ background:#fff; color:#000 }
  section{ padding:12px }
}

/* =========================
   ABOUT IMAGE LAYOUT
========================= */

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

.about-image{
  position:relative;
}

.about-image img{
  width:100%;
  border-radius:22px;
  box-shadow:0 25px 55px rgba(0,0,0,0.15);
  object-fit:cover;
}

/* мягкая рамка */
.about-image::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  pointer-events:none;
}

/* mobile */

@media(max-width:768px){
  .about-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .about-image{
    order:-1;
  }
}

/* =========================
   WARUM GROOMING CARDS
========================= */

.grooming{
  text-align:center;
  background:linear-gradient(180deg, #f2f0eb 0%, #ebe8e2 100%);
  border-radius:20px;
}

.grooming-header{
  max-width:860px;
  margin:0 auto 34px;
}

.grooming-header h2{
  margin-bottom:8px;
  color:var(--dark);
}

.grooming-header h2::after{
  content:"";
  display:block;
  width:86px;
  height:1px;
  margin:14px auto 0;
  background:rgba(62,58,55,0.22);
}

.grooming-header p{
  max-width:780px;
  margin:0 auto;
  font-size:1.05rem;
  line-height:1.55;
}

.grooming-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:1100px;
  margin:auto;
  align-items:stretch;
  grid-auto-rows:1fr;
}

.groom-card{
  background:#f3f2f0;
  border-radius:22px;
  padding:24px 22px 18px;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
  text-align:left;
  transition:border-color .2s ease, box-shadow .2s ease;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(62,58,55,0.13);
  display:flex;
  flex-direction:column;
  height:100%;
}

.groom-card:hover{
  box-shadow:0 10px 24px rgba(0,0,0,0.07);
  border-color:rgba(62,58,55,0.16);
}

.icon{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#5a4c42;
  height:42px;
  margin-bottom:12px;
  line-height:1;
}

.icon-glyph{
  display:block;
  font-size:31px;
  line-height:1;
}

.icon-glyph-paw{
  transform:translateY(2px);
}

.groom-card h3{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  margin-bottom:12px;
  font-size:clamp(1.5rem, 1.9vw, 2.05rem);
  line-height:1.2;
  font-weight:700;
  text-align:center;
  color:#3f3935;
  min-height:2.4em;
  display:flex;
  align-items:center;
  justify-content:center;
}

.groom-divider{
  width:100%;
  height:1px;
  background:rgba(62,58,55,0.11);
  margin:0 0 12px;
}

.groom-list{
  margin:0 0 16px;
  padding:0;
  list-style:none;
}

.groom-list li{
  position:relative;
  color:var(--muted);
  font-size:1.04rem;
  line-height:1.45;
  padding-left:18px;
  margin-bottom:9px;
}

.groom-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.56em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(62,58,55,0.24);
}

.groom-more-btn{
  margin-top:auto;
  width:100%;
  border:1px solid rgba(62,58,55,0.22);
  border-radius:12px;
  background:transparent;
  color:#3e3a37;
  font-size:1.02rem;
  font-weight:500;
  letter-spacing:.01em;
  padding:10px 14px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}

.groom-more-btn:hover{
  background:#ece8e1;
  border-color:rgba(62,58,55,0.3);
}

.groom-more-text{
  margin-top:12px;
  padding:12px 12px 2px;
  border-radius:12px;
  background:#ece9e3;
  border:1px solid rgba(62,58,55,0.14);
}

.groom-more-text[hidden]{
  display:none !important;
}

.groom-more-text p{
  font-size:1.02rem;
  line-height:1.5;
  margin-bottom:9px;
}

@media (max-width: 768px){
  .grooming{
    border-radius:16px;
  }
  .grooming-header{
    margin-bottom:22px;
  }
  .grooming-header p{
    font-size:0.95rem;
  }
  .grooming-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .groom-card{
    padding:18px 14px 14px;
    height:auto;
  }
  .groom-card h3{
    font-size:1.55rem;
    min-height:2.3em;
  }
  .icon{
    height:34px;
    margin-bottom:10px;
  }
  .icon-glyph{
    font-size:26px;
  }
  .icon-glyph-paw{
    transform:none;
  }
  .groom-list li{ font-size:0.98rem }
  .groom-more-btn{
    font-size:0.95rem;
    padding:9px 10px;
  }
  .groom-more-text{
    margin-top:10px;
    padding:10px 10px 1px;
  }
  .groom-more-text p{
    font-size:0.95rem;
    line-height:1.45;
  }
}