:root{
    --paper:#F5F1E7;
    --paper-card:#FCFAF4;
    --ink:#262420;
    --ink-soft:#514E45;
    --moss:#2E4152;
    --moss-dark:#1F2C39;
    --sandstone:#B98A4E;
    --slate:#2E4152;
    --slate-ink:#EEE8DA;
    --line:#DAD2C0;
    --radius:2px;
    --maxw:1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation:none !important; transition:none !important;}
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Baloo 2', sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,h4{
    font-family:'Marcellus SC', serif;
    font-weight:400;
    line-height:1.15;
    margin:0 0 .5em;
    color:var(--ink);
    letter-spacing:-0.01em;
  }

  a{color:var(--moss); text-decoration:none;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--sandstone); outline-offset:3px;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

  .eyebrow{
    font-family:'Baloo 2', sans-serif;
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--sandstone);
    font-weight:600;
    display:block;
    margin-bottom:.9em;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    background:var(--moss);
    color:#fff;
    padding:.85em 1.6em;
    border-radius:var(--radius);
    font-weight:600;
    font-size:.92rem;
    border:1px solid var(--moss);
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .btn:hover{background:var(--moss-dark); border-color:var(--moss-dark);}

  /* ---------- Top bar ---------- */
  .topbar{
    background:var(--paper); color:var(--slate);
    font-size:.82rem; font-weight:400;
  }
  .topbar .wrap{
    display:flex; align-items:center; justify-content:flex-end;
    gap:24px; padding:8px 28px;
  }
  .topbar a{
    color:var(--slate); display:inline-flex; align-items:center; gap:6px;
  }
  .topbar a:hover{color:var(--moss);}
  .topbar svg{width:15px; height:15px; flex-shrink:0;}
  .lang-switch{display:flex; align-items:center; gap:2px; padding-left:14px; margin-left:4px; border-left:1px solid var(--line);}
  .lang-switch a{padding:2px 6px; font-weight:600; font-size:.78rem; letter-spacing:.02em; color:var(--ink-soft); border-radius:3px; display:inline-flex; align-items:center; gap:5px;}
  .lang-switch .flag{display:inline-flex; line-height:0;} .lang-switch .flag svg{border-radius:2px; display:block; width:22px; height:15px;}
  .lang-switch a:hover{color:var(--moss); background:rgba(46,65,82,.08);}
  .lang-switch a.is-current{color:#fff; background:var(--slate); cursor:default; pointer-events:none;}
  @media (max-width:600px){
    .topbar .wrap{gap:14px; padding:7px 20px; justify-content:center; flex-wrap:wrap;}
    .topbar .wrap > a{display:none;}
    .lang-switch{border-left:none; margin-left:0; padding-left:0;}
  }

  /* ---------- Header (shared) ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:var(--slate);
    box-shadow:0 1px 0 0 var(--slate);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:8px 28px; position:relative;}
  .brand{
    font-family:'Marcellus SC', serif;
    font-weight:400;
    font-size:1.25rem;
    color:#fff;
    display:flex;
    align-items:center;
    gap:.6em;
  }
  .brand-logo{
    width:36px; height:36px; display:block; flex-shrink:0;
  }
  .brand-logo-icon{height:68px; width:auto; display:block;}
  .brand span{color:var(--sandstone); font-weight:700;}
  .nav-links{
    display:flex; gap:28px; list-style:none; margin:0; padding:0;
    font-size:1.08rem; font-weight:500; font-family:'Marcellus SC', serif;
  align-items:center; position:absolute; left:50%; top:50%; transform:translate(calc(-50% + 130px),-50%); }
  .nav-links a{color:rgba(238,232,218,.82);}
  .nav-links a:hover, .nav-links a.active{color:var(--sandstone);}
  .nav-links a.nav-home{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; flex-shrink:0;
    border-radius:50%;
    border:1.5px solid #BFDCEC;
    background:#DCEEF7;
    color:var(--slate);
    transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
    animation:navHomeRollIn 2.6s cubic-bezier(.22,.75,.3,1) .25s both;
  }
  .nav-links a.nav-home:hover{
    background:var(--sandstone); border-color:var(--sandstone); color:var(--slate);
    transform:translateY(-1px);
  }
  .nav-links a.nav-home svg{width:17px; height:17px; display:block;}
  @keyframes navHomeRollIn{
    from{ transform:translateX(-92px) rotate(-330deg); opacity:0; }
    to{ transform:translateX(0) rotate(0deg); opacity:1; }
  }


  .nav-right{display:flex; align-items:center; gap:20px;}
  .nav-phone{font-size:.9rem; font-weight:600; color:rgba(238,232,218,.9); white-space:nowrap;}
  .nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
  .nav-toggle span{display:block; width:24px; height:2px; background:#fff; margin:5px 0;}

  .nav-panel{display:contents;}
  .nav-panel-brand,
  .nav-panel-contact{display:none;}

  @media (max-width:1180px){
    .nav-panel{
      display:flex; flex-direction:column; justify-content:space-between;
      position:fixed; left:0; right:0; bottom:0; top:64px;
      background:var(--slate);
      padding:28px 24px 32px;
      transform:translateX(100%); transition:transform .25s ease;
      z-index:40; overflow-y:auto;
    }
    .nav-panel.open{transform:translateX(0);}
    .nav-panel-brand{display:none;}
    .nav-links{
      position:static; inset:auto; background:none; transform:none; transition:none;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      flex:1; padding:24px 0; gap:22px; font-size:1.1rem;
    }
    .nav-panel-contact{
      display:flex; flex-direction:column; align-items:center; gap:10px; flex-shrink:0;
      padding-top:18px; border-top:1px solid rgba(238,232,218,.16);
    }
    .nav-panel-contact a{display:inline-flex; align-items:center; gap:8px; color:rgba(238,232,218,.9); font-size:.92rem; font-weight:600;}
    .nav-panel-contact svg{width:16px; height:16px; flex-shrink:0;}
    .nav-toggle{display:block;}
    .nav-right .btn{display:none;}
    body.menu-open .brand{visibility:hidden;}
    .brand-logo-icon{display:none;}
  }

  footer{
    background:var(--slate);
    border-top:1px solid rgba(238,232,218,.16);
    padding:26px 0 40px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
    font-size:.82rem; color:#C9C2B4;
  }
  footer a{color:#FFFFFF; text-decoration:underline; text-underline-offset:2px;}
  footer a:hover{color:var(--sandstone);}

  /* ---------- Propagační pruh „Ubytování ve Vile Marcelce“ nad patičkou (jako na stránce Okolí) ---------- */
  .stay-nearby{padding:52px 0; background:#E4F1F7; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .stay-nearby-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .stay-nearby-photo{overflow:hidden; background:#fff; padding:8px; border:1px solid var(--line); box-shadow:0 1px 3px rgba(0,0,0,.1);}
  .stay-nearby-photo img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3; border-radius:1px;}
  .stay-nearby h2{font-size:clamp(1.4rem,2.4vw,1.85rem); margin:0 0 .5em; max-width:24ch;}
  .stay-nearby p{color:var(--ink-soft); font-size:1rem; line-height:1.7; margin:0 0 1.1em;}
  .stay-nearby .btn-image{display:inline-block; line-height:0; margin-top:8px;}
  .stay-nearby .btn-image img{height:56px; width:auto; display:block;}
  @media (max-width:860px){
    .stay-nearby-grid{grid-template-columns:1fr; gap:28px;}
  }

  /* ---------- Hero fotka rozcestníku Služby – jen samotný snímek (bez textu, překryvné vrstvy a rámečku), přes celou šířku, zarovnaný od horní hrany ---------- */
  /* 43.28vw = poměr stran hero fotky (1920 × 831 px). Od této výšky se odečítá ořez. */
  .sluzby-hero{
    position:relative; width:100%; height:calc(43.28vw - 100px); /* fotka zkrácená o 100 px dole */
    overflow:hidden;
  }
  .sluzby-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; display:block;}
  /* Fotka zůstane stát a obsah stránky přes ni přejede (sticky).
     Vysoká fotka nejdřív dojede spodní hranou ke spodku okna, pak se zastaví; nižší fotka se zastaví pod menu. */
  .sluzby-hero{position:sticky; top:min(84px, calc(100vh - (43.28vw - 100px))); z-index:0;}
  .sluzby-hero ~ .vm-services,
  .sluzby-hero ~ .stay-nearby,
  .sluzby-hero ~ footer{position:relative; z-index:1;}
  .sluzby-hero ~ .vm-services{box-shadow:0 -10px 24px rgba(31,44,57,.18);}
  @media (max-width:1180px){
    .sluzby-hero{height:max(calc(43.28vw - 100px), 300px); min-height:0; top:min(54px, calc(100vh - max(calc(43.28vw - 100px), 300px)));}
  }
  @media (max-width:600px){
    .sluzby-hero{height:430px; min-height:0; top:min(54px, calc(100vh - 430px));}
  }