:root{
    --paper:#F3E9D9;
    --paper-2:#EADFCB;
    --card:#FBF5E9;
    --ink:#241A12;
    --ink-soft:#5A4A39;
    --brown:#6E4A28;
    --ochre:#C2701B;
    --terracotta:#B0461E;
    --olive:#5E6B3A;
    --line:#D8C7A9;
    --shadow:24px 24px 0 rgba(36,26,18,.08);
    --r:18px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Karla',sans-serif;
    background:var(--paper);
    color:var(--ink);
    font-size:18px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  }

  h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;line-height:1.05;letter-spacing:-.01em}
  h2{font-size:clamp(2rem,5vw,3.2rem);color:var(--brown)}
  h3{font-size:1.4rem}
  p{color:var(--ink-soft)}
  a{color:inherit}
  .accent{color:var(--terracotta)}

  .wrap{max-width:1140px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
  section{padding:84px 0}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:'Karla',sans-serif;font-weight:700;font-size:1.05rem;
    padding:16px 28px;border-radius:999px;border:none;cursor:pointer;
    text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary{background:var(--terracotta);color:#FBF5E9;box-shadow:0 6px 0 #7d3014}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 #7d3014}
  .btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 #7d3014}
  .btn-ghost{background:transparent;color:var(--brown);border:2px solid var(--brown)}
  .btn-ghost:hover{background:var(--brown);color:var(--paper)}
  .btn .ic{width:19px;height:19px;flex:none}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;background:rgba(243,233,217,.9);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1140px;margin:0 auto}
  .brand{font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;color:var(--brown);display:flex;align-items:center;gap:10px;text-decoration:none}
  .brand .dot{width:14px;height:14px;border-radius:4px;background:var(--ochre);transform:rotate(12deg)}
  .nav-phone{display:flex;align-items:center;gap:18px}
  .nav-phone a.tel{font-weight:700;color:var(--brown);text-decoration:none;font-size:1.1rem}
  .nav-links{display:flex;gap:26px}
  .nav-links a{text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:.98rem}
  .nav-links a:hover{color:var(--terracotta)}

  /* ---------- hero ---------- */
  .hero{padding:64px 0 72px;position:relative}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--paper-2);border:1px solid var(--line);
    padding:7px 16px;border-radius:999px;font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--brown)}
  .eyebrow .pin{width:8px;height:8px;border-radius:50%;background:var(--olive)}
  .hero h1{font-size:clamp(2.6rem,6.2vw,4.6rem);color:var(--ink);margin:22px 0 18px}
  .hero h1 em{font-style:italic;color:var(--terracotta)}
  .hero .lead{font-size:1.22rem;max-width:33ch;margin-bottom:28px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero-note{font-size:.95rem;color:var(--ink-soft);margin-top:18px;display:flex;align-items:center;gap:8px}
  .hero-note b{color:var(--brown)}

  /* reveal animation */
  .reveal{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}.d4{animation-delay:.44s}

  /* ---------- callback card ---------- */
  .callcard{
    background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
    padding:30px;box-shadow:var(--shadow);position:relative;
  }
  .callcard::before{content:"";position:absolute;top:-22px;left:26px;width:48px;height:48px;border-radius:14px;border:2px solid var(--ink);
    background:var(--ochre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241A12' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/22px no-repeat}
  .callcard h3{margin:6px 0 4px;color:var(--ink);font-size:1.55rem}
  .callcard .sub{font-size:.98rem;margin-bottom:18px;color:var(--ink-soft)}
  .field{margin-bottom:14px}
  .field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px;color:var(--brown)}
  .field input,.field textarea{
    width:100%;padding:14px 16px;border:2px solid var(--line);border-radius:12px;
    font-family:'Karla',sans-serif;font-size:1.05rem;background:#fff;color:var(--ink);transition:border-color .15s}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--ochre)}
  .field input::placeholder,.field textarea::placeholder{color:#b6a685}
  .callcard .btn-primary{width:100%;justify-content:center;margin-top:6px}
  .callcard .micro{font-size:.82rem;color:var(--ink-soft);margin-top:12px;text-align:center}

  /* ---------- trust bar ---------- */
  .trust{background:var(--brown);color:var(--paper)}
  .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:38px 24px}
  .trust .item{text-align:center}
  .trust .num{font-family:'Fraunces',serif;font-size:2.4rem;font-weight:700;color:var(--ochre);line-height:1}
  .trust .lbl{font-size:.95rem;margin-top:6px;opacity:.9}
  .trust section{padding:0}

  /* ---------- services ---------- */
  .sec-head{max-width:42ch;margin-bottom:44px}
  .sec-head p{font-size:1.1rem;margin-top:12px}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .scard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:transform .2s, box-shadow .2s}
  .scard:hover{transform:translateY(-4px);box-shadow:12px 12px 0 rgba(36,26,18,.07)}
  .scard .ico{width:62px;height:62px;border-radius:16px;background:var(--paper-2);display:grid;place-items:center;margin-bottom:16px}
  .scard .ico svg{width:30px;height:30px;stroke:var(--brown);fill:none;stroke-width:1.7}
  .scard h3{color:var(--ink);margin-bottom:10px}
  .scard ul{list-style:none;margin-top:12px}
  .scard li{padding-left:24px;position:relative;color:var(--ink-soft);margin-bottom:7px;font-size:1rem}
  .scard li::before{content:"✓";position:absolute;left:0;color:var(--olive);font-weight:700}

  /* ---------- steps ---------- */
  .steps{background:var(--paper-2)}
  .step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}
  .step{position:relative;padding-top:18px}
  .step .n{font-family:'Fraunces',serif;font-size:3.4rem;font-weight:700;color:var(--ochre);line-height:.8}
  .step h3{color:var(--ink);margin:14px 0 8px}

  /* ---------- about ---------- */
  .about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center}
  .portrait{aspect-ratio:4/5;border-radius:var(--r);border:2px solid var(--ink);overflow:hidden;
    background:linear-gradient(135deg,var(--ochre),var(--brown));display:grid;place-items:center;color:var(--paper);
    box-shadow:var(--shadow);position:relative}
  .portrait span{font-family:'Fraunces',serif;font-size:1.05rem;opacity:.85;text-align:center;padding:24px;line-height:1.4}
  .about blockquote{font-family:'Fraunces',serif;font-size:1.5rem;font-style:italic;color:var(--brown);
    border-left:4px solid var(--ochre);padding-left:22px;margin:22px 0}

  /* ---------- area ---------- */
  .area{background:var(--brown);color:var(--paper)}
  .area h2{color:var(--paper)}
  .area .towns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
  .area .town{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
    padding:10px 20px;border-radius:999px;font-weight:600}
  .area .town.hq{background:var(--ochre);color:var(--ink);border-color:var(--ochre)}

  /* ---------- price ---------- */
  .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
  .pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px}
  .pcard .amt{font-family:'Fraunces',serif;font-size:2.6rem;font-weight:700;color:var(--terracotta)}
  .pcard .amt small{font-size:1rem;color:var(--ink-soft);font-weight:400}

  /* ---------- reviews ---------- */
  .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
  .rev .stars{color:var(--ochre);letter-spacing:3px;margin-bottom:10px}
  .rev p{color:var(--ink);font-size:1.05rem}
  .rev .who{margin-top:14px;font-weight:700;color:var(--brown);font-size:.95rem}

  /* ---------- faq ---------- */
  .faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 24px;margin-bottom:12px}
  .faq summary{cursor:pointer;font-family:'Fraunces',serif;font-weight:600;font-size:1.2rem;color:var(--ink);
    padding:20px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-size:1.6rem;color:var(--ochre);transition:transform .2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{padding:0 0 22px}

  /* ---------- final CTA ---------- */
  .final{background:var(--ink);color:var(--paper);border-radius:0}
  .final .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
  .final h2{color:var(--paper)}
  .final p{color:rgba(243,233,217,.8);font-size:1.15rem;margin-top:14px}

  /* ---------- footer ---------- */
  footer{background:var(--ink);color:rgba(243,233,217,.7);padding:40px 0;border-top:1px solid rgba(255,255,255,.1)}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:center}
  footer a{color:var(--ochre);text-decoration:none;font-weight:600}

  /* ---------- sticky mobile call ---------- */
  .sticky-call{position:fixed;bottom:18px;left:18px;right:18px;z-index:60;display:none;
    transform:translateY(170%);opacity:0;transition:transform .35s ease,opacity .35s ease;pointer-events:none}
  .sticky-call.show{transform:none;opacity:1;pointer-events:auto}
  .sticky-call a{display:flex;justify-content:center;width:100%;box-shadow:0 6px 22px rgba(36,26,18,.28)}

  /* ---------- responsive ---------- */
  @media(max-width:880px){
    .hero-grid,.about-grid,.final .wrap{grid-template-columns:1fr;gap:34px}
    .cards,.step-grid,.rev-grid,.trust .wrap{grid-template-columns:1fr 1fr}
    .price-grid{grid-template-columns:1fr}
    .nav-links{display:none}
    .hero .lead{max-width:none}
  }
  @media(max-width:560px){
    body{font-size:17px;padding-bottom:84px}
    .cards,.step-grid,.rev-grid,.trust .wrap{grid-template-columns:1fr}
    section{padding:56px 0}
    .nav-phone a.tel{display:none}
    .sticky-call{display:block}
    footer .wrap{flex-direction:column;text-align:center}
    .area-grid{grid-template-columns:1fr !important}
  }

  /* kompaktní hlavička na úzkých displejích */
  @media(max-width:640px){
    .nav{padding:11px 16px}
    .brand{font-size:1.05rem;white-space:nowrap}
    .brand .dot{width:11px;height:11px}
    .brand span:not(.dot){display:none}      /* skryje "Hodonínsko", je hned pod tím ve štítku */
    .nav-phone{gap:10px}
    .nav-phone .btn{padding:9px 15px;font-size:.92rem;white-space:nowrap}
  }

  /* ---------- area map ---------- */
  .area-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
  .mapframe{border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#fff;line-height:0}
  .mapframe iframe{width:100%;height:380px;border:0;display:block;filter:saturate(.92) contrast(.98)}
  @media(max-width:880px){.area-grid{grid-template-columns:1fr;gap:32px}.mapframe iframe{height:320px}}

  /* ---------- scroll reveal (jen když běží JS) ---------- */
  .js .vobs > *{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
  .js .vobs.shown > *{opacity:1;transform:none}
  .js .vobs.shown > *:nth-child(2){transition-delay:.09s}
  .js .vobs.shown > *:nth-child(3){transition-delay:.18s}
  .js .vobs.shown > *:nth-child(4){transition-delay:.27s}
  @media(prefers-reduced-motion:reduce){.js .vobs > *{opacity:1;transform:none;transition:none}}

  /* ---------- městské stránky / obsah ---------- */
  .crumbs{font-size:.9rem;color:var(--ink-soft);margin:8px 0 18px}
  .crumbs a{color:var(--brown);text-decoration:none;font-weight:600}
  .crumbs a:hover{color:var(--terracotta)}
  .prose{max-width:64ch}
  .prose p{font-size:1.12rem;margin-bottom:16px}
  .prose h2{margin:6px 0 16px}
  .prose h3{color:var(--ink);margin:26px 0 10px}
  .citylinks{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
  .citylinks a{background:var(--paper-2);border:1px solid var(--line);padding:10px 18px;border-radius:999px;font-weight:700;color:var(--brown);text-decoration:none;transition:background .15s,color .15s}
  .citylinks a:hover{background:var(--brown);color:var(--paper)}
  .citylinks a[aria-current="page"]{background:var(--ochre);color:var(--ink);border-color:var(--ochre)}
  .area a.town{text-decoration:none;transition:background .15s}
  .area a.town:hover{background:rgba(255,255,255,.2)}

  /* ---------- pruh fotek (ilustrační) ---------- */
  .photoband{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
  .photoband figure{margin:0;border-radius:var(--r);overflow:hidden;border:2px solid var(--ink);aspect-ratio:3/2;background:var(--paper-2);box-shadow:0 12px 26px rgba(36,26,18,.14)}
  .photoband img{width:100%;height:100%;object-fit:cover;display:block}
  .photoband-note{font-size:.8rem;color:var(--ink-soft);text-align:right;margin-top:10px;opacity:.7}
  @media(max-width:700px){.photoband{grid-template-columns:1fr;gap:14px}}